csc-ui - npm Package Compare versions

Comparing version 0.0.19 to 0.0.20

dist/cjs/c-autocomplete_14.cjs.entry.js

@@ -41,6 +41,11 @@ 'use strict';
     render() {
-        return (core.h(core.Host, null, this.label, core.h("div", { class: "c-autocomplete" }, core.h("div", { class: this.menuVisible ? 'c-autocomplete-wrapper c-autocomplete-wrapper-active' : 'c-autocomplete-wrapper', onClick: () => this.showMenu() }, core.h("c-row", { class: "no-wrap" }, core.h("div", { class: "c-autocomplete-current" }, core.h("input", { value: this.query, onInput: (event) => this.handleChange(event) })), core.h("svg", { width: "22", height: "22", fill: "#222", viewBox: "0 0 24 24", class: this.menuVisible ? 'c-autocomplete-icon rotated' : 'c-autocomplete-icon' }, core.h("path", { d: mdiChevronDown })))), core.h("input", { type: "hidden", value: this.value.value, name: this.name }), core.h("div", { class: "c-menu-parent" }, this.menuVisible ? core.h("div", { class: "c-menu" }, core.h("slot", null)) : ''))));
+        let classes = 'c-autocomplete-wrapper';
+        if (this.menuVisible)
+            classes = `${classes} c-autocomplete-wrapper-active`;
+        if (this.dense)
+            classes = `${classes} c-autocomplete-dense`;
+        return (core.h(core.Host, null, core.h("span", { class: this.dense ? 'dense-label' : '' }, this.label), core.h("div", { class: "c-autocomplete" }, core.h("div", { class: classes, onClick: () => this.showMenu() }, core.h("c-row", { class: "no-wrap" }, core.h("div", { class: "c-autocomplete-current" }, core.h("input", { value: this.query, onInput: (event) => this.handleChange(event) })), core.h("svg", { width: "22", height: "22", fill: "#222", viewBox: "0 0 24 24", class: this.menuVisible ? 'c-autocomplete-icon rotated' : 'c-autocomplete-icon' }, core.h("path", { d: mdiChevronDown })))), core.h("input", { type: "hidden", value: this.value.value, name: this.name }), core.h("div", { class: "c-menu-parent" }, this.menuVisible ? core.h("div", { class: "c-menu" }, core.h("slot", null)) : ''))));
     }
     get host() { return core.getElement(this); }
-    static get style() { return ":host{display:block}.c-autocomplete-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent;cursor:pointer}.c-autocomplete-wrapper-active{background:#d0dced}.c-autocomplete-current{margin-top:3px;outline:none;font-size:14px;display:inline-block;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 0 8px 18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-autocomplete-icon{line-height:20px;padding:8px 24px;margin-top:3px;-webkit-transition:all .25s;transition:all .25s}.rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.c-menu-overlay{background:rgba(0,0,0,.2);position:fixed;width:100%;height:100vw}.c-menu-parent{position:relative}.c-menu{position:absolute;background-color:#fff;min-width:160px;-webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.2);box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-autocomplete-current input{outline:none;font-size:14px;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;max-width:100%;min-width:0;width:100%}"; }
+    static get style() { return ":host{display:block}.c-autocomplete-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent;cursor:pointer}.c-autocomplete-wrapper-active{background:#d0dced}.c-autocomplete-wrapper:focus-within{border:2px solid #006778}.c-autocomplete-current{margin-top:3px;outline:none;font-size:14px;display:inline-block;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 0 8px 18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-autocomplete-icon{line-height:20px;padding:8px 24px;margin-top:3px;-webkit-transition:all .25s;transition:all .25s}.rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.c-autocomplete-dense{min-height:36px}.c-autocomplete-dense input{padding:0}.c-autocomplete-dense .c-autocomplete-current{margin-top:0}.c-autocomplete-dense .c-autocomplete-icon{padding:4px 24px}span.dense-label{font-size:12px}.c-menu-overlay{background:rgba(0,0,0,.2);position:fixed;width:100%;height:100vw}.c-menu-parent{position:relative}.c-menu{position:absolute;background-color:#fff;min-width:100%;-webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.2);box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-autocomplete-current input{outline:none;font-size:14px;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;max-width:100%;min-width:0;width:100%}"; }
 };
@@ -116,5 +121,5 @@
     render() {
-        return (core.h(core.Host, null, core.h("slot", null)));
+        return (core.h(core.Host, { class: this.dense ? 'dense' : '' }, core.h("slot", null)));
     }
-    static get style() { return ":host{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}:host(:HOVER){background-color:#eef2f8}"; }
+    static get style() { return ":host{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}:host(:HOVER){background-color:#eef2f8}:host(.dense){padding:10px 14px}"; }
 };
@@ -150,6 +155,11 @@
     render() {
-        return (core.h(core.Host, null, this.label, core.h("div", { class: "c-selections" }, core.h("div", { class: this.menuVisible ? 'c-select-wrapper c-select-wrapper-active' : 'c-select-wrapper', onClick: () => this.showMenu() }, core.h("c-row", null, core.h("div", { class: "c-select-current" }, this.value.name), core.h("svg", { width: "22", height: "22", fill: "#222", viewBox: "0 0 24 24", class: this.menuVisible ? 'c-select-icon rotated' : 'c-select-icon' }, core.h("path", { d: mdiChevronDown })))), core.h("input", { type: "hidden", value: this.value.value, name: this.name }), core.h("div", { class: "c-menu-parent" }, this.menuVisible ? core.h("div", { class: "c-menu" }, core.h("slot", null)) : ''))));
+        let classes = 'c-select-wrapper';
+        if (this.menuVisible)
+            classes = `${classes} c-select-wrapper-active`;
+        if (this.dense)
+            classes = `${classes} c-select-dense`;
+        return (core.h(core.Host, null, core.h("span", { class: this.dense ? 'dense-label' : '' }, this.label), core.h("div", { class: "c-selections" }, core.h("div", { class: classes, onClick: () => this.showMenu() }, core.h("c-row", null, core.h("div", { class: "c-select-current" }, this.value), core.h("svg", { width: "22", height: "22", fill: "#222", viewBox: "0 0 24 24", class: this.menuVisible ? 'c-select-icon rotated' : 'c-select-icon' }, core.h("path", { d: mdiChevronDown })))), core.h("input", { type: "hidden", value: this.value.value, name: this.name }), core.h("div", { class: "c-menu-parent" }, this.menuVisible ? core.h("div", { class: "c-menu" }, core.h("slot", null)) : ''))));
     }
     get host() { return core.getElement(this); }
-    static get style() { return ":host{display:block}.c-select-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent;cursor:pointer}.c-select-wrapper-active{background:#d0dced}.c-select-current{margin-top:3px;outline:none;font-size:14px;display:inline-block;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-select-icon{line-height:20px;padding:8px 24px;margin-top:3px;-webkit-transition:all .25s;transition:all .25s}.rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.c-menu-parent{position:relative}.c-menu{position:absolute;background-color:#fff;min-width:160px;-webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.2);box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-menu option{display:block;padding:14px;-webkit-transition:all .5s;transition:all .5s;font-size:14px}.c-menu option:HOVER{background:#eef2f8}"; }
+    static get style() { return ":host{display:block}.c-select-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent;cursor:pointer}.c-select-wrapper-active{background:#d0dced}.c-select-current{margin-top:3px;outline:none;font-size:14px;display:inline-block;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-select-dense .c-select-current{margin-top:0}.c-select-icon{line-height:20px;padding:8px 24px;margin-top:3px;-webkit-transition:all .25s;transition:all .25s}.c-select-dense{min-height:36px}.c-select-dense .c-select-icon{padding:4px 24px}span.dense-label{font-size:12px}.rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.c-menu-parent{position:relative;width:100%}.c-menu{position:absolute;background-color:#fff;min-width:100%;-webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.2);box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-menu option{display:block;padding:14px;-webkit-transition:all .5s;transition:all .5s;font-size:14px}.c-menu option:HOVER{background:#eef2f8}"; }
 };
@@ -226,5 +236,5 @@
     render() {
-        return (core.h(core.Host, null, this.label, core.h("div", { class: "text-field-wrapper" }, core.h("input", { name: this.name, disabled: this.disabled, type: this.number ? 'number' : 'text', value: this.value, onInput: (event) => this.handleChange(event) }))));
+        return (core.h(core.Host, null, core.h("span", { class: this.dense ? 'dense-label' : '' }, this.label), core.h("div", { class: this.dense ? 'text-field-wrapper text-field-dense' : 'text-field-wrapper' }, core.h("input", { name: this.name, disabled: this.disabled, type: this.number ? 'number' : 'text', value: this.value, onInput: (event) => this.handleChange(event) }))));
     }
-    static get style() { return ":host{display:block}.text-field-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent}.text-field-wrapper:focus-within{border:2px solid #006778}.text-field-wrapper input{outline:none;font-size:14px;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 8px;max-width:100%;min-width:0;width:100%}"; }
+    static get style() { return ":host{display:block}.text-field-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent}.text-field-dense{min-height:36px}span.dense-label{font-size:12px}.text-field-wrapper:focus-within{border:2px solid #006778}.text-field-wrapper input{outline:none;font-size:14px;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 8px;max-width:100%;min-width:0;width:100%}"; }
 };
@@ -231,0 +241,0 @@

dist/cjs/cscwebcomponents.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 core.patchBrowser().then(options => {
-  return core.bootstrapLazy([["c-autocomplete_14.cjs",[[1,"c-tab-button",{"disabled":[4],"color":[1],"active":[4],"noRadius":[4,"no-radius"],"icon":[1],"label":[1]}],[1,"c-autocomplete",{"label":[1],"name":[1],"query":[1032],"value":[1032],"menuVisible":[32]}],[1,"c-select",{"label":[1],"name":[1],"value":[1032],"menuVisible":[32]}],[1,"c-button",{"color":[1],"fixed":[4],"noRadius":[4,"no-radius"],"fullWidthMobile":[4,"full-width-mobile"],"disabled":[4],"icon":[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-option",{"label":[1],"value":[1]}],[1,"c-tab",{"active":[4]}],[1,"c-text-field",{"number":[4],"disabled":[4],"label":[1],"name":[1],"value":[1025]}],[1,"c-title"],[1,"c-toggle",{"color":[1],"fixed":[4],"fit":[4],"active":[4],"subtitle":[1],"description":[1]}],[1,"c-spacer"],[1,"c-row"]]]], options);
+  return core.bootstrapLazy([["c-autocomplete_14.cjs",[[1,"c-tab-button",{"disabled":[4],"color":[1],"active":[4],"noRadius":[4,"no-radius"],"icon":[1],"label":[1]}],[1,"c-autocomplete",{"label":[1],"name":[1],"query":[1032],"value":[1032],"dense":[4],"menuVisible":[32]}],[1,"c-select",{"label":[1],"dense":[4],"name":[1],"value":[1032],"menuVisible":[32]}],[1,"c-button",{"color":[1],"fixed":[4],"noRadius":[4,"no-radius"],"fullWidthMobile":[4,"full-width-mobile"],"disabled":[4],"icon":[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-option",{"label":[1],"value":[1],"dense":[4]}],[1,"c-tab",{"active":[4]}],[1,"c-text-field",{"number":[4],"disabled":[4],"dense":[4],"label":[1],"name":[1],"value":[1025]}],[1,"c-title"],[1,"c-toggle",{"color":[1],"fixed":[4],"fit":[4],"active":[4],"subtitle":[1],"description":[1]}],[1,"c-spacer"],[1,"c-row"]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -9,3 +9,3 @@ 'use strict';
   return core.patchEsm().then(() => {
-    core.bootstrapLazy([["c-autocomplete_14.cjs",[[1,"c-tab-button",{"disabled":[4],"color":[1],"active":[4],"noRadius":[4,"no-radius"],"icon":[1],"label":[1]}],[1,"c-autocomplete",{"label":[1],"name":[1],"query":[1032],"value":[1032],"menuVisible":[32]}],[1,"c-select",{"label":[1],"name":[1],"value":[1032],"menuVisible":[32]}],[1,"c-button",{"color":[1],"fixed":[4],"noRadius":[4,"no-radius"],"fullWidthMobile":[4,"full-width-mobile"],"disabled":[4],"icon":[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-option",{"label":[1],"value":[1]}],[1,"c-tab",{"active":[4]}],[1,"c-text-field",{"number":[4],"disabled":[4],"label":[1],"name":[1],"value":[1025]}],[1,"c-title"],[1,"c-toggle",{"color":[1],"fixed":[4],"fit":[4],"active":[4],"subtitle":[1],"description":[1]}],[1,"c-spacer"],[1,"c-row"]]]], options);
+    core.bootstrapLazy([["c-autocomplete_14.cjs",[[1,"c-tab-button",{"disabled":[4],"color":[1],"active":[4],"noRadius":[4,"no-radius"],"icon":[1],"label":[1]}],[1,"c-autocomplete",{"label":[1],"name":[1],"query":[1032],"value":[1032],"dense":[4],"menuVisible":[32]}],[1,"c-select",{"label":[1],"dense":[4],"name":[1],"value":[1032],"menuVisible":[32]}],[1,"c-button",{"color":[1],"fixed":[4],"noRadius":[4,"no-radius"],"fullWidthMobile":[4,"full-width-mobile"],"disabled":[4],"icon":[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-option",{"label":[1],"value":[1],"dense":[4]}],[1,"c-tab",{"active":[4]}],[1,"c-text-field",{"number":[4],"disabled":[4],"dense":[4],"label":[1],"name":[1],"value":[1025]}],[1,"c-title"],[1,"c-toggle",{"color":[1],"fixed":[4],"fit":[4],"active":[4],"subtitle":[1],"description":[1]}],[1,"c-spacer"],[1,"c-row"]]]], options);
   });
@@ -12,0 +12,0 @@ };

dist/collection/collection-manifest.json

 {
   "entries": [
-    "components/button/button.js",
-    "components/card/card.js",
+    "components/option/option.js",
+    "components/select/select.js",
+    "components/text-field/text-field.js",
+    "components/autocomplete/autocomplete.js",
+    "components/container/container.js",
     "components/col/col.js",
-    "components/container/container.js",
     "components/spacer/spacer.js",
-    "components/text-field/text-field.js",
     "components/title/title.js",
+    "components/tab-button/tab-button.js",
+    "components/tab/tab.js",
     "components/toggle/toggle.js",
-    "components/row/row.js",
-    "components/autocomplete/autocomplete.js",
-    "components/select/select.js",
-    "components/option/option.js",
-    "components/tab/tab.js",
-    "components/tab-button/tab-button.js"
+    "components/card/card.js",
+    "components/button/button.js",
+    "components/row/row.js"
   ],
@@ -18,0 +18,0 @@ "compiler": {

dist/collection/components/autocomplete/autocomplete.js

@@ -25,6 +25,11 @@ import { Host, h } from "@stencil/core";
     render() {
+        let classes = 'c-autocomplete-wrapper';
+        if (this.menuVisible)
+            classes = `${classes} c-autocomplete-wrapper-active`;
+        if (this.dense)
+            classes = `${classes} c-autocomplete-dense`;
         return (h(Host, null,
-            this.label,
+            h("span", { class: this.dense ? 'dense-label' : '' }, this.label),
             h("div", { class: "c-autocomplete" },
-                h("div", { class: this.menuVisible ? 'c-autocomplete-wrapper c-autocomplete-wrapper-active' : 'c-autocomplete-wrapper', onClick: () => this.showMenu() },
+                h("div", { class: classes, onClick: () => this.showMenu() },
                     h("c-row", { class: "no-wrap" },
@@ -117,2 +122,19 @@ h("div", { class: "c-autocomplete-current" },
             "defaultValue": "null"
+        },
+        "dense": {
+            "type": "boolean",
+            "mutable": false,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "dense",
+            "reflect": false
         }
@@ -119,0 +141,0 @@ }; }

dist/collection/components/option/option.js

 import { Host, h } from "@stencil/core";
 export class Option {
     render() {
-        return (h(Host, null,
+        return (h(Host, { class: this.dense ? 'dense' : '' },
             h("slot", null)));
@@ -49,4 +49,21 @@ }
             "reflect": false
+        },
+        "dense": {
+            "type": "boolean",
+            "mutable": false,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "dense",
+            "reflect": false
         }
     }; }
 }

dist/collection/components/select/select.js

@@ -20,8 +20,13 @@ import { Host, h } from "@stencil/core";
     render() {
+        let classes = 'c-select-wrapper';
+        if (this.menuVisible)
+            classes = `${classes} c-select-wrapper-active`;
+        if (this.dense)
+            classes = `${classes} c-select-dense`;
         return (h(Host, null,
-            this.label,
+            h("span", { class: this.dense ? 'dense-label' : '' }, this.label),
             h("div", { class: "c-selections" },
-                h("div", { class: this.menuVisible ? 'c-select-wrapper c-select-wrapper-active' : 'c-select-wrapper', onClick: () => this.showMenu() },
+                h("div", { class: classes, onClick: () => this.showMenu() },
                     h("c-row", null,
-                        h("div", { class: "c-select-current" }, this.value.name),
+                        h("div", { class: "c-select-current" }, this.value),
                         h("svg", { width: "22", height: "22", fill: "#222", viewBox: "0 0 24 24", class: this.menuVisible ? 'c-select-icon rotated' : 'c-select-icon' },
@@ -59,2 +64,19 @@ h("path", { d: mdiChevronDown })))),
         },
+        "dense": {
+            "type": "boolean",
+            "mutable": false,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "dense",
+            "reflect": false
+        },
         "name": {
@@ -61,0 +83,0 @@ "type": "string",

dist/collection/components/text-field/text-field.js

@@ -8,4 +8,4 @@ import { Host, h } from "@stencil/core";
         return (h(Host, null,
-            this.label,
-            h("div", { class: "text-field-wrapper" },
+            h("span", { class: this.dense ? 'dense-label' : '' }, this.label),
+            h("div", { class: this.dense ? 'text-field-wrapper text-field-dense' : 'text-field-wrapper' },
                 h("input", { name: this.name, disabled: this.disabled, type: this.number ? 'number' : 'text', value: this.value, onInput: (event) => this.handleChange(event) }))));
@@ -56,2 +56,19 @@ }
         },
+        "dense": {
+            "type": "boolean",
+            "mutable": false,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "dense",
+            "reflect": false
+        },
         "label": {
@@ -58,0 +75,0 @@ "type": "string",

dist/cscwebcomponents/cscwebcomponents.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as l}from"./p-a1b30910.js";e().then(e=>l([["p-q3h749fz",[[1,"c-tab-button",{disabled:[4],color:[1],active:[4],noRadius:[4,"no-radius"],icon:[1],label:[1]}],[1,"c-autocomplete",{label:[1],name:[1],query:[1032],value:[1032],menuVisible:[32]}],[1,"c-select",{label:[1],name:[1],value:[1032],menuVisible:[32]}],[1,"c-button",{color:[1],fixed:[4],noRadius:[4,"no-radius"],fullWidthMobile:[4,"full-width-mobile"],disabled:[4],icon:[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-option",{label:[1],value:[1]}],[1,"c-tab",{active:[4]}],[1,"c-text-field",{number:[4],disabled:[4],label:[1],name:[1],value:[1025]}],[1,"c-title"],[1,"c-toggle",{color:[1],fixed:[4],fit:[4],active:[4],subtitle:[1],description:[1]}],[1,"c-spacer"],[1,"c-row"]]]],e));
+import{p as e,b as l}from"./p-a1b30910.js";e().then(e=>l([["p-cnwwybnd",[[1,"c-tab-button",{disabled:[4],color:[1],active:[4],noRadius:[4,"no-radius"],icon:[1],label:[1]}],[1,"c-autocomplete",{label:[1],name:[1],query:[1032],value:[1032],dense:[4],menuVisible:[32]}],[1,"c-select",{label:[1],dense:[4],name:[1],value:[1032],menuVisible:[32]}],[1,"c-button",{color:[1],fixed:[4],noRadius:[4,"no-radius"],fullWidthMobile:[4,"full-width-mobile"],disabled:[4],icon:[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-option",{label:[1],value:[1],dense:[4]}],[1,"c-tab",{active:[4]}],[1,"c-text-field",{number:[4],disabled:[4],dense:[4],label:[1],name:[1],value:[1025]}],[1,"c-title"],[1,"c-toggle",{color:[1],fixed:[4],fit:[4],active:[4],subtitle:[1],description:[1]}],[1,"c-spacer"],[1,"c-row"]]]],e));

dist/cscwebcomponents/p-f31fc7fc.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-bc8c1a68.system.js"],(function(){"use strict";var e,t;return{setters:[function(c){e=c.p;t=c.b}],execute:function(){e().then((function(e){return t([["p-roj9mdg0.system",[[1,"c-tab-button",{disabled:[4],color:[1],active:[4],noRadius:[4,"no-radius"],icon:[1],label:[1]}],[1,"c-autocomplete",{label:[1],name:[1],query:[1032],value:[1032],menuVisible:[32]}],[1,"c-select",{label:[1],name:[1],value:[1032],menuVisible:[32]}],[1,"c-button",{color:[1],fixed:[4],noRadius:[4,"no-radius"],fullWidthMobile:[4,"full-width-mobile"],disabled:[4],icon:[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-option",{label:[1],value:[1]}],[1,"c-tab",{active:[4]}],[1,"c-text-field",{number:[4],disabled:[4],label:[1],name:[1],value:[1025]}],[1,"c-title"],[1,"c-toggle",{color:[1],fixed:[4],fit:[4],active:[4],subtitle:[1],description:[1]}],[1,"c-spacer"],[1,"c-row"]]]],e)}))}}}));
+System.register(["./p-bc8c1a68.system.js"],(function(){"use strict";var e,t;return{setters:[function(c){e=c.p;t=c.b}],execute:function(){e().then((function(e){return t([["p-xsbtmroh.system",[[1,"c-tab-button",{disabled:[4],color:[1],active:[4],noRadius:[4,"no-radius"],icon:[1],label:[1]}],[1,"c-autocomplete",{label:[1],name:[1],query:[1032],value:[1032],dense:[4],menuVisible:[32]}],[1,"c-select",{label:[1],dense:[4],name:[1],value:[1032],menuVisible:[32]}],[1,"c-button",{color:[1],fixed:[4],noRadius:[4,"no-radius"],fullWidthMobile:[4,"full-width-mobile"],disabled:[4],icon:[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-option",{label:[1],value:[1],dense:[4]}],[1,"c-tab",{active:[4]}],[1,"c-text-field",{number:[4],disabled:[4],dense:[4],label:[1],name:[1],value:[1025]}],[1,"c-title"],[1,"c-toggle",{color:[1],fixed:[4],fit:[4],active:[4],subtitle:[1],description:[1]}],[1,"c-spacer"],[1,"c-row"]]]],e)}))}}}));

dist/esm-es5/c-autocomplete_14.entry.js

@@ -36,3 +36,8 @@ import { r as registerInstance, h, H as Host, g as getElement } from './core-e7b053b6.js';
         var _this_1 = this;
-        return (h(Host, null, this.label, h("div", { class: "c-autocomplete" }, h("div", { class: this.menuVisible ? 'c-autocomplete-wrapper c-autocomplete-wrapper-active' : 'c-autocomplete-wrapper', onClick: function () { return _this_1.showMenu(); } }, h("c-row", { class: "no-wrap" }, h("div", { class: "c-autocomplete-current" }, h("input", { value: this.query, onInput: function (event) { return _this_1.handleChange(event); } })), h("svg", { width: "22", height: "22", fill: "#222", viewBox: "0 0 24 24", class: this.menuVisible ? 'c-autocomplete-icon rotated' : 'c-autocomplete-icon' }, h("path", { d: mdiChevronDown })))), h("input", { type: "hidden", value: this.value.value, name: this.name }), h("div", { class: "c-menu-parent" }, this.menuVisible ? h("div", { class: "c-menu" }, h("slot", null)) : ''))));
+        var classes = 'c-autocomplete-wrapper';
+        if (this.menuVisible)
+            classes = classes + " c-autocomplete-wrapper-active";
+        if (this.dense)
+            classes = classes + " c-autocomplete-dense";
+        return (h(Host, null, h("span", { class: this.dense ? 'dense-label' : '' }, this.label), h("div", { class: "c-autocomplete" }, h("div", { class: classes, onClick: function () { return _this_1.showMenu(); } }, h("c-row", { class: "no-wrap" }, h("div", { class: "c-autocomplete-current" }, h("input", { value: this.query, onInput: function (event) { return _this_1.handleChange(event); } })), h("svg", { width: "22", height: "22", fill: "#222", viewBox: "0 0 24 24", class: this.menuVisible ? 'c-autocomplete-icon rotated' : 'c-autocomplete-icon' }, h("path", { d: mdiChevronDown })))), h("input", { type: "hidden", value: this.value.value, name: this.name }), h("div", { class: "c-menu-parent" }, this.menuVisible ? h("div", { class: "c-menu" }, h("slot", null)) : ''))));
     };
@@ -45,3 +50,3 @@ Object.defineProperty(Autocomplete.prototype, "host", {
     Object.defineProperty(Autocomplete, "style", {
-        get: function () { return ":host{display:block}.c-autocomplete-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent;cursor:pointer}.c-autocomplete-wrapper-active{background:#d0dced}.c-autocomplete-current{margin-top:3px;outline:none;font-size:14px;display:inline-block;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 0 8px 18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-autocomplete-icon{line-height:20px;padding:8px 24px;margin-top:3px;-webkit-transition:all .25s;transition:all .25s}.rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.c-menu-overlay{background:rgba(0,0,0,.2);position:fixed;width:100%;height:100vw}.c-menu-parent{position:relative}.c-menu{position:absolute;background-color:#fff;min-width:160px;-webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.2);box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-autocomplete-current input{outline:none;font-size:14px;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;max-width:100%;min-width:0;width:100%}"; },
+        get: function () { return ":host{display:block}.c-autocomplete-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent;cursor:pointer}.c-autocomplete-wrapper-active{background:#d0dced}.c-autocomplete-wrapper:focus-within{border:2px solid #006778}.c-autocomplete-current{margin-top:3px;outline:none;font-size:14px;display:inline-block;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 0 8px 18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-autocomplete-icon{line-height:20px;padding:8px 24px;margin-top:3px;-webkit-transition:all .25s;transition:all .25s}.rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.c-autocomplete-dense{min-height:36px}.c-autocomplete-dense input{padding:0}.c-autocomplete-dense .c-autocomplete-current{margin-top:0}.c-autocomplete-dense .c-autocomplete-icon{padding:4px 24px}span.dense-label{font-size:12px}.c-menu-overlay{background:rgba(0,0,0,.2);position:fixed;width:100%;height:100vw}.c-menu-parent{position:relative}.c-menu{position:absolute;background-color:#fff;min-width:100%;-webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.2);box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-autocomplete-current input{outline:none;font-size:14px;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;max-width:100%;min-width:0;width:100%}"; },
         enumerable: true,
@@ -136,6 +141,6 @@ configurable: true
     Option.prototype.render = function () {
-        return (h(Host, null, h("slot", null)));
+        return (h(Host, { class: this.dense ? 'dense' : '' }, h("slot", null)));
     };
     Object.defineProperty(Option, "style", {
-        get: function () { return ":host{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}:host(:HOVER){background-color:#eef2f8}"; },
+        get: function () { return ":host{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}:host(:HOVER){background-color:#eef2f8}:host(.dense){padding:10px 14px}"; },
         enumerable: true,
@@ -179,3 +184,8 @@ configurable: true
         var _this_1 = this;
-        return (h(Host, null, this.label, h("div", { class: "c-selections" }, h("div", { class: this.menuVisible ? 'c-select-wrapper c-select-wrapper-active' : 'c-select-wrapper', onClick: function () { return _this_1.showMenu(); } }, h("c-row", null, h("div", { class: "c-select-current" }, this.value.name), h("svg", { width: "22", height: "22", fill: "#222", viewBox: "0 0 24 24", class: this.menuVisible ? 'c-select-icon rotated' : 'c-select-icon' }, h("path", { d: mdiChevronDown })))), h("input", { type: "hidden", value: this.value.value, name: this.name }), h("div", { class: "c-menu-parent" }, this.menuVisible ? h("div", { class: "c-menu" }, h("slot", null)) : ''))));
+        var classes = 'c-select-wrapper';
+        if (this.menuVisible)
+            classes = classes + " c-select-wrapper-active";
+        if (this.dense)
+            classes = classes + " c-select-dense";
+        return (h(Host, null, h("span", { class: this.dense ? 'dense-label' : '' }, this.label), h("div", { class: "c-selections" }, h("div", { class: classes, onClick: function () { return _this_1.showMenu(); } }, h("c-row", null, h("div", { class: "c-select-current" }, this.value), h("svg", { width: "22", height: "22", fill: "#222", viewBox: "0 0 24 24", class: this.menuVisible ? 'c-select-icon rotated' : 'c-select-icon' }, h("path", { d: mdiChevronDown })))), h("input", { type: "hidden", value: this.value.value, name: this.name }), h("div", { class: "c-menu-parent" }, this.menuVisible ? h("div", { class: "c-menu" }, h("slot", null)) : ''))));
     };
@@ -188,3 +198,3 @@ Object.defineProperty(Select.prototype, "host", {
     Object.defineProperty(Select, "style", {
-        get: function () { return ":host{display:block}.c-select-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent;cursor:pointer}.c-select-wrapper-active{background:#d0dced}.c-select-current{margin-top:3px;outline:none;font-size:14px;display:inline-block;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-select-icon{line-height:20px;padding:8px 24px;margin-top:3px;-webkit-transition:all .25s;transition:all .25s}.rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.c-menu-parent{position:relative}.c-menu{position:absolute;background-color:#fff;min-width:160px;-webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.2);box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-menu option{display:block;padding:14px;-webkit-transition:all .5s;transition:all .5s;font-size:14px}.c-menu option:HOVER{background:#eef2f8}"; },
+        get: function () { return ":host{display:block}.c-select-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent;cursor:pointer}.c-select-wrapper-active{background:#d0dced}.c-select-current{margin-top:3px;outline:none;font-size:14px;display:inline-block;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-select-dense .c-select-current{margin-top:0}.c-select-icon{line-height:20px;padding:8px 24px;margin-top:3px;-webkit-transition:all .25s;transition:all .25s}.c-select-dense{min-height:36px}.c-select-dense .c-select-icon{padding:4px 24px}span.dense-label{font-size:12px}.rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.c-menu-parent{position:relative;width:100%}.c-menu{position:absolute;background-color:#fff;min-width:100%;-webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.2);box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-menu option{display:block;padding:14px;-webkit-transition:all .5s;transition:all .5s;font-size:14px}.c-menu option:HOVER{background:#eef2f8}"; },
         enumerable: true,
@@ -277,6 +287,6 @@ configurable: true
         var _this_1 = this;
-        return (h(Host, null, this.label, h("div", { class: "text-field-wrapper" }, h("input", { name: this.name, disabled: this.disabled, type: this.number ? 'number' : 'text', value: this.value, onInput: function (event) { return _this_1.handleChange(event); } }))));
+        return (h(Host, null, h("span", { class: this.dense ? 'dense-label' : '' }, this.label), h("div", { class: this.dense ? 'text-field-wrapper text-field-dense' : 'text-field-wrapper' }, h("input", { name: this.name, disabled: this.disabled, type: this.number ? 'number' : 'text', value: this.value, onInput: function (event) { return _this_1.handleChange(event); } }))));
     };
     Object.defineProperty(TextField, "style", {
-        get: function () { return ":host{display:block}.text-field-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent}.text-field-wrapper:focus-within{border:2px solid #006778}.text-field-wrapper input{outline:none;font-size:14px;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 8px;max-width:100%;min-width:0;width:100%}"; },
+        get: function () { return ":host{display:block}.text-field-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent}.text-field-dense{min-height:36px}span.dense-label{font-size:12px}.text-field-wrapper:focus-within{border:2px solid #006778}.text-field-wrapper input{outline:none;font-size:14px;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 8px;max-width:100%;min-width:0;width:100%}"; },
         enumerable: true,
@@ -283,0 +293,0 @@ configurable: true

dist/esm/c-autocomplete_14.entry.js

@@ -37,6 +37,11 @@ import { r as registerInstance, h, H as Host, g as getElement } from './core-e7b053b6.js';
     render() {
-        return (h(Host, null, this.label, h("div", { class: "c-autocomplete" }, h("div", { class: this.menuVisible ? 'c-autocomplete-wrapper c-autocomplete-wrapper-active' : 'c-autocomplete-wrapper', onClick: () => this.showMenu() }, h("c-row", { class: "no-wrap" }, h("div", { class: "c-autocomplete-current" }, h("input", { value: this.query, onInput: (event) => this.handleChange(event) })), h("svg", { width: "22", height: "22", fill: "#222", viewBox: "0 0 24 24", class: this.menuVisible ? 'c-autocomplete-icon rotated' : 'c-autocomplete-icon' }, h("path", { d: mdiChevronDown })))), h("input", { type: "hidden", value: this.value.value, name: this.name }), h("div", { class: "c-menu-parent" }, this.menuVisible ? h("div", { class: "c-menu" }, h("slot", null)) : ''))));
+        let classes = 'c-autocomplete-wrapper';
+        if (this.menuVisible)
+            classes = `${classes} c-autocomplete-wrapper-active`;
+        if (this.dense)
+            classes = `${classes} c-autocomplete-dense`;
+        return (h(Host, null, h("span", { class: this.dense ? 'dense-label' : '' }, this.label), h("div", { class: "c-autocomplete" }, h("div", { class: classes, onClick: () => this.showMenu() }, h("c-row", { class: "no-wrap" }, h("div", { class: "c-autocomplete-current" }, h("input", { value: this.query, onInput: (event) => this.handleChange(event) })), h("svg", { width: "22", height: "22", fill: "#222", viewBox: "0 0 24 24", class: this.menuVisible ? 'c-autocomplete-icon rotated' : 'c-autocomplete-icon' }, h("path", { d: mdiChevronDown })))), h("input", { type: "hidden", value: this.value.value, name: this.name }), h("div", { class: "c-menu-parent" }, this.menuVisible ? h("div", { class: "c-menu" }, h("slot", null)) : ''))));
     }
     get host() { return getElement(this); }
-    static get style() { return ":host{display:block}.c-autocomplete-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent;cursor:pointer}.c-autocomplete-wrapper-active{background:#d0dced}.c-autocomplete-current{margin-top:3px;outline:none;font-size:14px;display:inline-block;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 0 8px 18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-autocomplete-icon{line-height:20px;padding:8px 24px;margin-top:3px;-webkit-transition:all .25s;transition:all .25s}.rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.c-menu-overlay{background:rgba(0,0,0,.2);position:fixed;width:100%;height:100vw}.c-menu-parent{position:relative}.c-menu{position:absolute;background-color:#fff;min-width:160px;-webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.2);box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-autocomplete-current input{outline:none;font-size:14px;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;max-width:100%;min-width:0;width:100%}"; }
+    static get style() { return ":host{display:block}.c-autocomplete-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent;cursor:pointer}.c-autocomplete-wrapper-active{background:#d0dced}.c-autocomplete-wrapper:focus-within{border:2px solid #006778}.c-autocomplete-current{margin-top:3px;outline:none;font-size:14px;display:inline-block;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 0 8px 18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-autocomplete-icon{line-height:20px;padding:8px 24px;margin-top:3px;-webkit-transition:all .25s;transition:all .25s}.rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.c-autocomplete-dense{min-height:36px}.c-autocomplete-dense input{padding:0}.c-autocomplete-dense .c-autocomplete-current{margin-top:0}.c-autocomplete-dense .c-autocomplete-icon{padding:4px 24px}span.dense-label{font-size:12px}.c-menu-overlay{background:rgba(0,0,0,.2);position:fixed;width:100%;height:100vw}.c-menu-parent{position:relative}.c-menu{position:absolute;background-color:#fff;min-width:100%;-webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.2);box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-autocomplete-current input{outline:none;font-size:14px;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;max-width:100%;min-width:0;width:100%}"; }
 };
@@ -112,5 +117,5 @@
     render() {
-        return (h(Host, null, h("slot", null)));
+        return (h(Host, { class: this.dense ? 'dense' : '' }, h("slot", null)));
     }
-    static get style() { return ":host{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}:host(:HOVER){background-color:#eef2f8}"; }
+    static get style() { return ":host{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}:host(:HOVER){background-color:#eef2f8}:host(.dense){padding:10px 14px}"; }
 };
@@ -146,6 +151,11 @@
     render() {
-        return (h(Host, null, this.label, h("div", { class: "c-selections" }, h("div", { class: this.menuVisible ? 'c-select-wrapper c-select-wrapper-active' : 'c-select-wrapper', onClick: () => this.showMenu() }, h("c-row", null, h("div", { class: "c-select-current" }, this.value.name), h("svg", { width: "22", height: "22", fill: "#222", viewBox: "0 0 24 24", class: this.menuVisible ? 'c-select-icon rotated' : 'c-select-icon' }, h("path", { d: mdiChevronDown })))), h("input", { type: "hidden", value: this.value.value, name: this.name }), h("div", { class: "c-menu-parent" }, this.menuVisible ? h("div", { class: "c-menu" }, h("slot", null)) : ''))));
+        let classes = 'c-select-wrapper';
+        if (this.menuVisible)
+            classes = `${classes} c-select-wrapper-active`;
+        if (this.dense)
+            classes = `${classes} c-select-dense`;
+        return (h(Host, null, h("span", { class: this.dense ? 'dense-label' : '' }, this.label), h("div", { class: "c-selections" }, h("div", { class: classes, onClick: () => this.showMenu() }, h("c-row", null, h("div", { class: "c-select-current" }, this.value), h("svg", { width: "22", height: "22", fill: "#222", viewBox: "0 0 24 24", class: this.menuVisible ? 'c-select-icon rotated' : 'c-select-icon' }, h("path", { d: mdiChevronDown })))), h("input", { type: "hidden", value: this.value.value, name: this.name }), h("div", { class: "c-menu-parent" }, this.menuVisible ? h("div", { class: "c-menu" }, h("slot", null)) : ''))));
     }
     get host() { return getElement(this); }
-    static get style() { return ":host{display:block}.c-select-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent;cursor:pointer}.c-select-wrapper-active{background:#d0dced}.c-select-current{margin-top:3px;outline:none;font-size:14px;display:inline-block;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-select-icon{line-height:20px;padding:8px 24px;margin-top:3px;-webkit-transition:all .25s;transition:all .25s}.rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.c-menu-parent{position:relative}.c-menu{position:absolute;background-color:#fff;min-width:160px;-webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.2);box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-menu option{display:block;padding:14px;-webkit-transition:all .5s;transition:all .5s;font-size:14px}.c-menu option:HOVER{background:#eef2f8}"; }
+    static get style() { return ":host{display:block}.c-select-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent;cursor:pointer}.c-select-wrapper-active{background:#d0dced}.c-select-current{margin-top:3px;outline:none;font-size:14px;display:inline-block;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-select-dense .c-select-current{margin-top:0}.c-select-icon{line-height:20px;padding:8px 24px;margin-top:3px;-webkit-transition:all .25s;transition:all .25s}.c-select-dense{min-height:36px}.c-select-dense .c-select-icon{padding:4px 24px}span.dense-label{font-size:12px}.rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.c-menu-parent{position:relative;width:100%}.c-menu{position:absolute;background-color:#fff;min-width:100%;-webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.2);box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.c-menu option{display:block;padding:14px;-webkit-transition:all .5s;transition:all .5s;font-size:14px}.c-menu option:HOVER{background:#eef2f8}"; }
 };
@@ -222,5 +232,5 @@
     render() {
-        return (h(Host, null, this.label, h("div", { class: "text-field-wrapper" }, h("input", { name: this.name, disabled: this.disabled, type: this.number ? 'number' : 'text', value: this.value, onInput: (event) => this.handleChange(event) }))));
+        return (h(Host, null, h("span", { class: this.dense ? 'dense-label' : '' }, this.label), h("div", { class: this.dense ? 'text-field-wrapper text-field-dense' : 'text-field-wrapper' }, h("input", { name: this.name, disabled: this.disabled, type: this.number ? 'number' : 'text', value: this.value, onInput: (event) => this.handleChange(event) }))));
     }
-    static get style() { return ":host{display:block}.text-field-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent}.text-field-wrapper:focus-within{border:2px solid #006778}.text-field-wrapper input{outline:none;font-size:14px;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 8px;max-width:100%;min-width:0;width:100%}"; }
+    static get style() { return ":host{display:block}.text-field-wrapper{background:#eef2f8;-ms-flex-align:stretch;align-items:stretch;min-height:44px;margin-top:4px;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;border:2px solid transparent}.text-field-dense{min-height:36px}span.dense-label{font-size:12px}.text-field-wrapper:focus-within{border:2px solid #006778}.text-field-wrapper input{outline:none;font-size:14px;background-color:transparent;border-style:none;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:8px 8px;max-width:100%;min-width:0;width:100%}"; }
 };
@@ -227,0 +237,0 @@

dist/types/components.d.ts

@@ -14,2 +14,3 @@ /* eslint-disable */
   interface CAutocomplete {
+    'dense': boolean;
     'label': string;
@@ -32,2 +33,3 @@ 'name': string;
   interface COption {
+    'dense': boolean;
     'label': string;
@@ -38,2 +40,3 @@ 'value': string;
   interface CSelect {
+    'dense': boolean;
     'label': string;
@@ -56,2 +59,3 @@ 'name': string;
   interface CTextField {
+    'dense': boolean;
     'disabled': boolean;
@@ -180,2 +184,3 @@ 'label': string;
   interface CAutocomplete {
+    'dense'?: boolean;
     'label'?: string;
@@ -198,2 +203,3 @@ 'name'?: string;
   interface COption {
+    'dense'?: boolean;
     'label'?: string;
@@ -204,2 +210,3 @@ 'value'?: string;
   interface CSelect {
+    'dense'?: boolean;
     'label'?: string;
@@ -222,2 +229,3 @@ 'name'?: string;
   interface CTextField {
+    'dense'?: boolean;
     'disabled'?: boolean;
@@ -224,0 +232,0 @@ 'label'?: string;

dist/types/components/autocomplete/autocomplete.d.ts

@@ -6,2 +6,3 @@ export declare class Autocomplete {
     value: any;
+    dense: boolean;
     host: HTMLElement;
@@ -8,0 +9,0 @@ menuVisible: boolean;

dist/types/components/option/option.d.ts

 export declare class Option {
     label: string;
     value: string;
+    dense: boolean;
     render(): any;
 }

dist/types/components/select/select.d.ts

 export declare class Select {
     label: string;
+    dense: boolean;
     name: string;
@@ -4,0 +5,0 @@ value: any;

dist/types/components/text-field/text-field.d.ts

 export declare class TextField {
     number: boolean;
     disabled: boolean;
+    dense: boolean;
     label: string;
@@ -5,0 +6,0 @@ name: string;

package.json

 {
   "name": "csc-ui",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "CSC UI components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

961301

increased by0.91%

Lines of code

15808

increased by1.1%

No dependency changes