@clevercloud/components - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

dist/atoms/cc-input-text.js

@@ -1,2 +0,2 @@
-import{css as e,html as t,LitElement as i}from"lit-element";import{classMap as o}from"lit-html/directives/class-map.js";import{dispatchCustomEvent as s}from"../lib/events.js";import{pulse as n}from"../styles/animations.js";export class CcInputText extends i{static get properties(){return{disabled:{type:Boolean},readonly:{type:Boolean},skeleton:{type:Boolean},multi:{type:Boolean},value:{type:String},name:{type:String},placeholder:{type:String}}}constructor(){super(),this.name="",this.value="",this.placeholder=""}focus(){this.shadowRoot.querySelector(".input").focus()}t(e){this.value=e.target.value,s(this,"input",this.value)}i(e){this.readonly&&e.target.select()}o(e){e.stopPropagation()}render(){const e=(this.value||"").split("\n").length;return this.multi?t`<textarea class="${o({input:!0,skeleton:this.skeleton})}" style="--rows:${e}" rows="${e}" ?disabled="${this.disabled||this.skeleton}" ?readonly="${this.readonly}" .value="${this.value}" name="${this.name}" placeholder="${this.placeholder}" @input="${this.t}" @focus="${this.i}" spellcheck="false" @keydown="${this.o}" @keypress="${this.o}"></textarea>`:t`<input type="text" class="${o({input:!0,skeleton:this.skeleton})}" ?disabled="${this.disabled||this.skeleton}" ?readonly="${this.readonly}" .value="${this.value}" name="${this.name}" placeholder="${this.placeholder}" @input="${this.t}" @focus="${this.i}" spellcheck="false" @keydown="${this.o}" @keypress="${this.o}">`}static get styles(){return[n,e`:host{display:inline-block;box-sizing:border-box;padding:.2rem;vertical-align:top}:host([multi]){display:block}:host([skeleton]){cursor:progress}.input{background:#fff;border:1px solid #aaa;box-sizing:border-box;display:block;font-family:SourceCodePro,monaco,monospace;font-size:14px;margin:0;padding:.15rem .5rem;resize:none;width:100%;border-radius:.25rem;height:2rem;line-height:1.7rem;overflow:hidden;box-shadow:0 0 0 0 rgba(255,255,255,0);transition:75ms ease-in-out,height}.input:focus{box-shadow:0 0 0 .2em rgba(50,115,220,.25);border-color:#777;outline:0}.input:hover{border-color:#777}.input:active{outline:0}.input[disabled]{background:#eee;border-color:#eee;cursor:default;opacity:.75;pointer-events:none}.input[readonly]{background:#eee}.input.skeleton{animation-direction:alternate;animation-duration:.5s;animation-iteration-count:infinite;animation-name:pulse;background:#eee;border-color:#eee;color:transparent}.input.skeleton::placeholder{color:transparent}.input[rows]{height:calc(calc(calc(var(--rows,1) * 1.7rem) + .3rem) + 2px);white-space:pre}.input[rows="1"]{height:2rem}`]}}window.customElements.define("cc-input-text",CcInputText);
+import{css as e,html as t,LitElement as i}from"lit-element";import{classMap as o}from"lit-html/directives/class-map.js";import{dispatchCustomEvent as s}from"../lib/events.js";import{pulse as n}from"../styles/animations.js";export class CcInputText extends i{static get properties(){return{disabled:{type:Boolean},readonly:{type:Boolean},skeleton:{type:Boolean},multi:{type:Boolean},value:{type:String},name:{type:String},placeholder:{type:String}}}constructor(){super(),this.name="",this.value="",this.placeholder=""}focus(){this.shadowRoot.querySelector(".input").focus()}t(e){this.value=e.target.value,s(this,"input",this.value)}i(e){this.readonly&&e.target.select()}o(e){e.stopPropagation()}render(){const e=(this.value||"").split("\n").length;return this.multi?t`<textarea class="${o({input:!0,skeleton:this.skeleton})}" style="--rows:${e}" rows="${e}" ?disabled="${this.disabled||this.skeleton}" ?readonly="${this.readonly}" .value="${this.value}" name="${this.name}" placeholder="${this.placeholder}" @input="${this.t}" @focus="${this.i}" spellcheck="false" @keydown="${this.o}" @keypress="${this.o}"></textarea>`:t`<input type="text" class="${o({input:!0,skeleton:this.skeleton})}" ?disabled="${this.disabled||this.skeleton}" ?readonly="${this.readonly}" .value="${this.value}" name="${this.name}" placeholder="${this.placeholder}" @input="${this.t}" @focus="${this.i}" spellcheck="false" @keydown="${this.o}" @keypress="${this.o}">`}static get styles(){return[n,e`:host{display:inline-block;box-sizing:border-box;padding:.2rem;vertical-align:top}:host([multi]){display:block}:host([skeleton]){cursor:progress}.input{-webkit-appearance:none;background:#fff;border:1px solid #aaa;box-sizing:border-box;display:block;font-family:SourceCodePro,monaco,monospace;font-size:14px;margin:0;padding:.15rem .5rem;resize:none;width:100%;border-radius:.25rem;height:2rem;line-height:1.7rem;overflow:hidden;box-shadow:0 0 0 0 rgba(255,255,255,0);transition:75ms ease-in-out,height}.input:focus{box-shadow:0 0 0 .2em rgba(50,115,220,.25);border-color:#777;outline:0}.input:hover{border-color:#777}.input:active{outline:0}.input[disabled]{background:#eee;border-color:#eee;cursor:default;opacity:.75;pointer-events:none}.input[readonly]{background:#eee}.input.skeleton{animation-direction:alternate;animation-duration:.5s;animation-iteration-count:infinite;animation-name:pulse;background:#eee;border-color:#eee;color:transparent}.input.skeleton::placeholder{color:transparent}.input[rows]{height:calc(calc(calc(var(--rows,1) * 1.7rem) + .3rem) + 2px);white-space:pre}.input[rows="1"]{height:2rem}`]}}window.customElements.define("cc-input-text",CcInputText);
 //# sourceMappingURL=cc-input-text.js.map

dist/atoms/cc-toggle.js

@@ -1,2 +0,2 @@
-import{css as e,html as o,LitElement as t}from"lit-element";import{classMap as r}from"lit-html/directives/class-map.js";import{dispatchCustomEvent as l}from"../lib/events.js";import{repeat as i}from"lit-html/directives/repeat.js";export class CcToggle extends t{static get properties(){return{value:{type:String},disabled:{type:Boolean},choices:{type:Array,attribute:!1}}}o(e){this.value=e.target.value,l(this,"input",this.value)}render(){return o`<div class="${r({"toggle-group":!0,disabled:this.disabled,enabled:!this.disabled})}">${i(this.choices,({value:e})=>e,({label:e,value:t})=>o`<input type="radio" name="mode" value="${t}" id="${t}" ?disabled="${this.disabled}" ?checked="${this.value===t}" @change="${this.o}"> <label for="${t}">${e}</label>`)}</div>`}static get styles(){return[e`:host{--toggle-color:hsl(210, 23%, 26%);display:flex;margin:.2rem}.toggle-group{border-radius:.15rem;border:1px solid var(--toggle-color);display:flex;overflow:hidden}.toggle-group.enabled:focus-within{box-shadow:0 0 0 .2em rgba(50,115,220,.25);outline:0}.toggle-group.enabled:hover{box-shadow:0 1px 3px #888}.toggle-group.enabled:active{box-shadow:none;outline:0}.toggle-group.disabled{opacity:.5}input{-moz-appearance:none;-webkit-appearance:none;appearance:none;border:0;display:block;height:0;margin:0;outline:0;width:0}label{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-transform:uppercase;font-weight:700;font-size:14px;color:var(--toggle-color);padding:.35rem .5rem}.disabled label{cursor:default}input:not(:checked):enabled:hover+label{background-color:#eff2f5}input:checked+label{background-color:var(--toggle-color);color:#fff;position:relative}`]}}window.customElements.define("cc-toggle",CcToggle);
+import{css as e,html as o,LitElement as t}from"lit-element";import{classMap as r}from"lit-html/directives/class-map.js";import{dispatchCustomEvent as l}from"../lib/events.js";import{repeat as i}from"lit-html/directives/repeat.js";export class CcToggle extends t{static get properties(){return{value:{type:String},disabled:{type:Boolean},choices:{type:Array,attribute:!1}}}constructor(){super(),this.o=Math.random().toString(36).slice(2)}t(e){this.value=e.target.value,l(this,"input",this.value)}render(){return o`<div class="${r({"toggle-group":!0,disabled:this.disabled,enabled:!this.disabled})}">${i(this.choices,({value:e})=>e,({label:e,value:t})=>o`<input type="radio" name="${this.o}" value="${t}" id="${t}" ?disabled="${this.disabled}" ?checked="${this.value===t}" @change="${this.t}"> <label for="${t}">${e}</label>`)}</div>`}static get styles(){return[e`:host{--toggle-color:hsl(210, 23%, 26%);display:flex;margin:.2rem}.toggle-group{border-radius:.15rem;border:1px solid var(--toggle-color);display:flex;overflow:hidden}.toggle-group.enabled:focus-within{box-shadow:0 0 0 .2em rgba(50,115,220,.25);outline:0}.toggle-group.enabled:hover{box-shadow:0 1px 3px #888}.toggle-group.enabled:active{box-shadow:none;outline:0}.toggle-group.disabled{opacity:.5}input{-moz-appearance:none;-webkit-appearance:none;appearance:none;border:0;display:block;height:0;margin:0;outline:0;width:0}label{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-transform:uppercase;font-weight:700;font-size:14px;color:var(--toggle-color);padding:.35rem .5rem}.disabled label{cursor:default}input:not(:checked):enabled:hover+label{background-color:#eff2f5}input:checked+label{background-color:var(--toggle-color);color:#fff;position:relative}`]}}window.customElements.define("cc-toggle",CcToggle);
 //# sourceMappingURL=cc-toggle.js.map

package.json

 {
   "name": "@clevercloud/components",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "This is a Work In Progress to introduce Web Components in our Clever Cloud Web based UIs.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

121182

increased by0.42%

No dependency changes