csc-ui - npm Package Compare versions

Comparing version 0.0.32 to 0.0.33

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

@@ -23,2 +23,3 @@ 'use strict';
         this.value = null;
+        this.required = null;
         this.items = [
@@ -110,6 +111,6 @@ { name: 'Default 1', value: 'default1' },
             classes = `${classes} c-autocomplete-dense`;
-        return (core.h(core.Host, null, core.h("label", { id: "c-autocomplete-label" }, this.label), core.h("div", { class: "c-autocomplete" }, core.h("div", { class: classes, onClick: () => this.showMenu(), role: "button", "aria-labelledby": "c-autocomplete-label" }, core.h("c-row", { class: "no-wrap" }, core.h("div", { class: "c-autocomplete-current" }, core.h("input", { value: this.query, ref: el => this.current = el, "aria-autocomplete": "list", "aria-controls": "c-menu-parent", "aria-haspopup": "true", 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", { id: "c-menu-parent", class: "c-menu-parent", "aria-expanded": this.menuVisible }, this.menuVisible ? core.h("ul", { class: "c-menu" }, this.items.map(item => this.getListItem(item))) : ''))));
+        return (core.h(core.Host, null, core.h("label", { id: "c-autocomplete-label" }, this.label, this.required ? core.h("span", { class: "required" }, " *") : ''), core.h("div", { class: "c-autocomplete" }, core.h("div", { class: classes, onClick: () => this.showMenu(), role: "button", "aria-labelledby": "c-autocomplete-label" }, core.h("c-row", { class: "no-wrap" }, core.h("div", { class: "c-autocomplete-current" }, core.h("input", { value: this.query, ref: el => this.current = el, "aria-autocomplete": "list", "aria-controls": "c-menu-parent", "aria-haspopup": "true", 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", { id: "c-menu-parent", class: "c-menu-parent", "aria-expanded": this.menuVisible }, this.menuVisible ? core.h("ul", { class: "c-menu" }, this.items.map(item => this.getListItem(item))) : ''))));
     }
     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-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);padding-left:0;margin:0;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%}.c-menu li{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}.c-menu li.dense{padding:10px 14px}.c-menu li:HOVER{background-color:#eef2f8}"; }
+    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}label span.required{color:#e71d32}.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);padding-left:0;margin:0;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%}.c-menu li{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}.c-menu li.dense{padding:10px 14px}.c-menu li:HOVER{background-color:#eef2f8}"; }
 };
@@ -196,2 +197,3 @@
         core.registerInstance(this, hostRef);
+        this.required = null;
         this.value = null;
@@ -280,6 +282,6 @@ this.menuVisible = false;
             classes = `${classes} c-select-dense`;
-        return (core.h(core.Host, null, core.h("label", { id: "c-select-label" }, this.label), core.h("div", { class: "c-selections" }, core.h("div", { class: classes, onClick: () => this.showMenu(), ref: el => this.current = el, tabindex: "0", role: "button", "aria-labelledby": "c-select-label" }, 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", "aria-expanded": this.menuVisible }, this.menuVisible ? core.h("div", { class: "c-menu" }, this.items.map(item => this.getListItem(item))) : ''))));
+        return (core.h(core.Host, null, core.h("label", { id: "c-select-label" }, this.label, this.required ? core.h("span", { class: "required" }, " *") : ''), core.h("div", { class: "c-selections" }, core.h("div", { class: classes, onClick: () => this.showMenu(), ref: el => this.current = el, tabindex: "0", role: "button", "aria-labelledby": "c-select-label" }, 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", "aria-expanded": this.menuVisible }, this.menuVisible ? core.h("div", { class: "c-menu" }, this.items.map(item => this.getListItem(item))) : ''))));
     }
     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:focus-within{border:2px solid #006778;outline:none}.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 li{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}.c-menu li.dense{padding:10px 14px}.c-menu li:HOVER{background-color:#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:focus-within{border:2px solid #006778;outline:none}.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}label span.required{color:#e71d32}.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 li{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}.c-menu li.dense{padding:10px 14px}.c-menu li:HOVER{background-color:#eef2f8}"; }
 };
@@ -350,2 +352,3 @@
         core.registerInstance(this, hostRef);
+        this.required = null;
         this.step = null;
@@ -360,2 +363,5 @@ this.min = null;
         let classes = this.dense ? 'text-field-wrapper text-field-dense' : 'text-field-wrapper';
+        if (this.required && this.value === '') {
+            classes = `${classes} required-border`;
+        }
         let labelClasses = '';
@@ -366,5 +372,5 @@ if (this.disabled) {
         }
-        return (core.h(core.Host, null, core.h("label", { id: "c-text-label", class: labelClasses, htmlFor: this.name }, this.label), core.h("div", { class: classes }, core.h("input", { name: this.name, "aria-labelledby": "c-text-label", disabled: this.disabled, type: this.number ? 'number' : 'text', min: this.min, max: this.max, step: this.step, value: this.value, onInput: (event) => this.handleChange(event) }))));
+        return (core.h(core.Host, null, core.h("label", { id: "c-text-label", class: labelClasses, htmlFor: this.name }, this.label, this.required ? core.h("span", { class: "required" }, " *") : ''), core.h("div", { class: classes }, core.h("input", { name: this.name, "aria-labelledby": "c-text-label", disabled: this.disabled, type: this.number ? 'number' : 'text', min: this.min, max: this.max, step: this.step, 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-dense{min-height:36px}label.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%}.label-disabled,.text-field-wrapper.text-field-disabled input{color:#93979d}"; }
+    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}label.dense-label{font-size:12px}label span.required{color:#e71d32}.text-field-wrapper.required-border{border-bottom:2px solid #e71d32}.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%}.label-disabled,.text-field-wrapper.text-field-disabled input{color:#93979d}"; }
 };
@@ -371,0 +377,0 @@

dist/cjs/cscwebcomponents.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 core.patchBrowser().then(options => {
-  return core.bootstrapLazy([["c-option.cjs",[[1,"c-option",{"label":[1],"value":[1],"dense":[4]}]]],["c-autocomplete_13.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],"items":[16],"menuVisible":[32],"currentIndex":[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-select",{"label":[1],"dense":[4],"name":[1],"value":[1032],"items":[16],"menuVisible":[32],"currentIndex":[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-button",{"color":[1],"fixed":[4],"noRadius":[4,"no-radius"],"outlined":[4],"fullWidthMobile":[4,"full-width-mobile"],"disabled":[4],"icon":[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-tab",{"active":[4]}],[1,"c-text-field",{"number":[4],"disabled":[4],"dense":[4],"label":[1],"name":[1],"step":[2],"min":[2],"max":[2],"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-option.cjs",[[1,"c-option",{"label":[1],"value":[1],"dense":[4]}]]],["c-autocomplete_13.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],"required":[4],"items":[16],"menuVisible":[32],"currentIndex":[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-select",{"label":[1],"dense":[4],"name":[1],"required":[4],"value":[1032],"items":[16],"menuVisible":[32],"currentIndex":[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-button",{"color":[1],"fixed":[4],"noRadius":[4,"no-radius"],"outlined":[4],"fullWidthMobile":[4,"full-width-mobile"],"disabled":[4],"icon":[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-tab",{"active":[4]}],[1,"c-text-field",{"number":[4],"disabled":[4],"dense":[4],"required":[4],"label":[1],"name":[1],"step":[2],"min":[2],"max":[2],"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-option.cjs",[[1,"c-option",{"label":[1],"value":[1],"dense":[4]}]]],["c-autocomplete_13.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],"items":[16],"menuVisible":[32],"currentIndex":[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-select",{"label":[1],"dense":[4],"name":[1],"value":[1032],"items":[16],"menuVisible":[32],"currentIndex":[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-button",{"color":[1],"fixed":[4],"noRadius":[4,"no-radius"],"outlined":[4],"fullWidthMobile":[4,"full-width-mobile"],"disabled":[4],"icon":[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-tab",{"active":[4]}],[1,"c-text-field",{"number":[4],"disabled":[4],"dense":[4],"label":[1],"name":[1],"step":[2],"min":[2],"max":[2],"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-option.cjs",[[1,"c-option",{"label":[1],"value":[1],"dense":[4]}]]],["c-autocomplete_13.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],"required":[4],"items":[16],"menuVisible":[32],"currentIndex":[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-select",{"label":[1],"dense":[4],"name":[1],"required":[4],"value":[1032],"items":[16],"menuVisible":[32],"currentIndex":[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-button",{"color":[1],"fixed":[4],"noRadius":[4,"no-radius"],"outlined":[4],"fullWidthMobile":[4,"full-width-mobile"],"disabled":[4],"icon":[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-tab",{"active":[4]}],[1,"c-text-field",{"number":[4],"disabled":[4],"dense":[4],"required":[4],"label":[1],"name":[1],"step":[2],"min":[2],"max":[2],"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/toggle/toggle.js",
-    "components/tab-button/tab-button.js",
-    "components/tab/tab.js",
-    "components/option/option.js",
+    "components/autocomplete/autocomplete.js",
+    "components/select/select.js",
+    "components/text-field/text-field.js",
     "components/col/col.js",
     "components/container/container.js",
+    "components/button/button.js",
+    "components/row/row.js",
+    "components/option/option.js",
     "components/spacer/spacer.js",
-    "components/row/row.js",
-    "components/text-field/text-field.js",
-    "components/select/select.js",
-    "components/card/card.js",
-    "components/button/button.js",
-    "components/autocomplete/autocomplete.js",
-    "components/title/title.js"
+    "components/tab-button/tab-button.js",
+    "components/title/title.js",
+    "components/tab/tab.js",
+    "components/toggle/toggle.js",
+    "components/card/card.js"
   ],
@@ -18,0 +18,0 @@ "compiler": {

dist/collection/components/autocomplete/autocomplete.js

@@ -7,2 +7,3 @@ import { Host, h } from "@stencil/core";
         this.value = null;
+        this.required = null;
         this.items = [
@@ -94,3 +95,5 @@ { name: 'Default 1', value: 'default1' },
         return (h(Host, null,
-            h("label", { id: "c-autocomplete-label" }, this.label),
+            h("label", { id: "c-autocomplete-label" },
+                this.label,
+                this.required ? h("span", { class: "required" }, " *") : ''),
             h("div", { class: "c-autocomplete" },
@@ -202,2 +205,20 @@ h("div", { class: classes, onClick: () => this.showMenu(), role: "button", "aria-labelledby": "c-autocomplete-label" },
         },
+        "required": {
+            "type": "boolean",
+            "mutable": false,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "required",
+            "reflect": false,
+            "defaultValue": "null"
+        },
         "items": {
@@ -204,0 +225,0 @@ "type": "unknown",

dist/collection/components/select/select.js

@@ -5,2 +5,3 @@ import { Host, h } from "@stencil/core";
     constructor() {
+        this.required = null;
         this.value = null;
@@ -89,3 +90,5 @@ this.menuVisible = false;
         return (h(Host, null,
-            h("label", { id: "c-select-label" }, this.label),
+            h("label", { id: "c-select-label" },
+                this.label,
+                this.required ? h("span", { class: "required" }, " *") : ''),
             h("div", { class: "c-selections" },
@@ -160,2 +163,20 @@ h("div", { class: classes, onClick: () => this.showMenu(), ref: el => this.current = el, tabindex: "0", role: "button", "aria-labelledby": "c-select-label" },
         },
+        "required": {
+            "type": "boolean",
+            "mutable": false,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "required",
+            "reflect": false,
+            "defaultValue": "null"
+        },
         "value": {
@@ -162,0 +183,0 @@ "type": "any",

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

 import { Host, h } from "@stencil/core";
 export class TextField {
     constructor() {
+        this.required = null;
         this.step = null;
@@ -13,2 +14,5 @@ this.min = null;
         let classes = this.dense ? 'text-field-wrapper text-field-dense' : 'text-field-wrapper';
+        if (this.required && this.value === '') {
+            classes = `${classes} required-border`;
+        }
         let labelClasses = '';
@@ -20,3 +24,5 @@ if (this.disabled) {
         return (h(Host, null,
-            h("label", { id: "c-text-label", class: labelClasses, htmlFor: this.name }, this.label),
+            h("label", { id: "c-text-label", class: labelClasses, htmlFor: this.name },
+                this.label,
+                this.required ? h("span", { class: "required" }, " *") : ''),
             h("div", { class: classes },
@@ -85,2 +91,20 @@ h("input", { name: this.name, "aria-labelledby": "c-text-label", disabled: this.disabled, type: this.number ? 'number' : 'text', min: this.min, max: this.max, step: this.step, value: this.value, onInput: (event) => this.handleChange(event) }))));
         },
+        "required": {
+            "type": "boolean",
+            "mutable": false,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "required",
+            "reflect": false,
+            "defaultValue": "null"
+        },
         "label": {
@@ -87,0 +111,0 @@ "type": "string",

dist/cscwebcomponents/cscwebcomponents.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as l}from"./p-58f7be44.js";e().then(e=>l([["p-x9llcs5a",[[1,"c-option",{label:[1],value:[1],dense:[4]}]]],["p-3t4bz7qe",[[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],items:[16],menuVisible:[32],currentIndex:[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-select",{label:[1],dense:[4],name:[1],value:[1032],items:[16],menuVisible:[32],currentIndex:[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-button",{color:[1],fixed:[4],noRadius:[4,"no-radius"],outlined:[4],fullWidthMobile:[4,"full-width-mobile"],disabled:[4],icon:[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-tab",{active:[4]}],[1,"c-text-field",{number:[4],disabled:[4],dense:[4],label:[1],name:[1],step:[2],min:[2],max:[2],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-58f7be44.js";e().then(e=>l([["p-x9llcs5a",[[1,"c-option",{label:[1],value:[1],dense:[4]}]]],["p-qdo2kcxe",[[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],required:[4],items:[16],menuVisible:[32],currentIndex:[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-select",{label:[1],dense:[4],name:[1],required:[4],value:[1032],items:[16],menuVisible:[32],currentIndex:[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-button",{color:[1],fixed:[4],noRadius:[4,"no-radius"],outlined:[4],fullWidthMobile:[4,"full-width-mobile"],disabled:[4],icon:[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-tab",{active:[4]}],[1,"c-text-field",{number:[4],disabled:[4],dense:[4],required:[4],label:[1],name:[1],step:[2],min:[2],max:[2],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-ac4a4233.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-0d24b536.system.js"],(function(){"use strict";var e,t;return{setters:[function(n){e=n.p;t=n.b}],execute:function(){e().then((function(e){return t([["p-qz1u1uah.system",[[1,"c-option",{label:[1],value:[1],dense:[4]}]]],["p-ieerast1.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],items:[16],menuVisible:[32],currentIndex:[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-select",{label:[1],dense:[4],name:[1],value:[1032],items:[16],menuVisible:[32],currentIndex:[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-button",{color:[1],fixed:[4],noRadius:[4,"no-radius"],outlined:[4],fullWidthMobile:[4,"full-width-mobile"],disabled:[4],icon:[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-tab",{active:[4]}],[1,"c-text-field",{number:[4],disabled:[4],dense:[4],label:[1],name:[1],step:[2],min:[2],max:[2],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-0d24b536.system.js"],(function(){"use strict";var e,t;return{setters:[function(n){e=n.p;t=n.b}],execute:function(){e().then((function(e){return t([["p-qz1u1uah.system",[[1,"c-option",{label:[1],value:[1],dense:[4]}]]],["p-4atva7ou.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],required:[4],items:[16],menuVisible:[32],currentIndex:[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-select",{label:[1],dense:[4],name:[1],required:[4],value:[1032],items:[16],menuVisible:[32],currentIndex:[32]},[[0,"keydown","handleKeyDown"]]],[1,"c-button",{color:[1],fixed:[4],noRadius:[4,"no-radius"],outlined:[4],fullWidthMobile:[4,"full-width-mobile"],disabled:[4],icon:[1]}],[1,"c-card"],[1,"c-col"],[1,"c-container"],[1,"c-tab",{active:[4]}],[1,"c-text-field",{number:[4],disabled:[4],dense:[4],required:[4],label:[1],name:[1],step:[2],min:[2],max:[2],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_13.entry.js

@@ -18,2 +18,3 @@ import { r as registerInstance, h, c as createEvent, H as Host, g as getElement } from './core-621fa4e5.js';
         this.value = null;
+        this.required = null;
         this.items = [
@@ -106,3 +107,3 @@ { name: 'Default 1', value: 'default1' },
             classes = classes + " c-autocomplete-dense";
-        return (h(Host, null, h("label", { id: "c-autocomplete-label" }, this.label), h("div", { class: "c-autocomplete" }, h("div", { class: classes, onClick: function () { return _this_1.showMenu(); }, role: "button", "aria-labelledby": "c-autocomplete-label" }, h("c-row", { class: "no-wrap" }, h("div", { class: "c-autocomplete-current" }, h("input", { value: this.query, ref: function (el) { return _this_1.current = el; }, "aria-autocomplete": "list", "aria-controls": "c-menu-parent", "aria-haspopup": "true", 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", { id: "c-menu-parent", class: "c-menu-parent", "aria-expanded": this.menuVisible }, this.menuVisible ? h("ul", { class: "c-menu" }, this.items.map(function (item) { return _this_1.getListItem(item); })) : ''))));
+        return (h(Host, null, h("label", { id: "c-autocomplete-label" }, this.label, this.required ? h("span", { class: "required" }, " *") : ''), h("div", { class: "c-autocomplete" }, h("div", { class: classes, onClick: function () { return _this_1.showMenu(); }, role: "button", "aria-labelledby": "c-autocomplete-label" }, h("c-row", { class: "no-wrap" }, h("div", { class: "c-autocomplete-current" }, h("input", { value: this.query, ref: function (el) { return _this_1.current = el; }, "aria-autocomplete": "list", "aria-controls": "c-menu-parent", "aria-haspopup": "true", 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", { id: "c-menu-parent", class: "c-menu-parent", "aria-expanded": this.menuVisible }, this.menuVisible ? h("ul", { class: "c-menu" }, this.items.map(function (item) { return _this_1.getListItem(item); })) : ''))));
     };
@@ -115,3 +116,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-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);padding-left:0;margin:0;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%}.c-menu li{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}.c-menu li.dense{padding:10px 14px}.c-menu li:HOVER{background-color:#eef2f8}"; },
+        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}label span.required{color:#e71d32}.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);padding-left:0;margin:0;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%}.c-menu li{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}.c-menu li.dense{padding:10px 14px}.c-menu li:HOVER{background-color:#eef2f8}"; },
         enumerable: true,
@@ -222,2 +223,3 @@ configurable: true
         registerInstance(this, hostRef);
+        this.required = null;
         this.value = null;
@@ -307,3 +309,3 @@ this.menuVisible = false;
             classes = classes + " c-select-dense";
-        return (h(Host, null, h("label", { id: "c-select-label" }, this.label), h("div", { class: "c-selections" }, h("div", { class: classes, onClick: function () { return _this_1.showMenu(); }, ref: function (el) { return _this_1.current = el; }, tabindex: "0", role: "button", "aria-labelledby": "c-select-label" }, 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", "aria-expanded": this.menuVisible }, this.menuVisible ? h("div", { class: "c-menu" }, this.items.map(function (item) { return _this_1.getListItem(item); })) : ''))));
+        return (h(Host, null, h("label", { id: "c-select-label" }, this.label, this.required ? h("span", { class: "required" }, " *") : ''), h("div", { class: "c-selections" }, h("div", { class: classes, onClick: function () { return _this_1.showMenu(); }, ref: function (el) { return _this_1.current = el; }, tabindex: "0", role: "button", "aria-labelledby": "c-select-label" }, 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", "aria-expanded": this.menuVisible }, this.menuVisible ? h("div", { class: "c-menu" }, this.items.map(function (item) { return _this_1.getListItem(item); })) : ''))));
     };
@@ -316,3 +318,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:focus-within{border:2px solid #006778;outline:none}.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 li{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}.c-menu li.dense{padding:10px 14px}.c-menu li:HOVER{background-color:#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:focus-within{border:2px solid #006778;outline:none}.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}label span.required{color:#e71d32}.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 li{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}.c-menu li.dense{padding:10px 14px}.c-menu li:HOVER{background-color:#eef2f8}"; },
         enumerable: true,
@@ -398,2 +400,3 @@ configurable: true
         registerInstance(this, hostRef);
+        this.required = null;
         this.step = null;
@@ -409,2 +412,5 @@ this.min = null;
         var classes = this.dense ? 'text-field-wrapper text-field-dense' : 'text-field-wrapper';
+        if (this.required && this.value === '') {
+            classes = classes + " required-border";
+        }
         var labelClasses = '';
@@ -415,6 +421,6 @@ if (this.disabled) {
         }
-        return (h(Host, null, h("label", { id: "c-text-label", class: labelClasses, htmlFor: this.name }, this.label), h("div", { class: classes }, h("input", { name: this.name, "aria-labelledby": "c-text-label", disabled: this.disabled, type: this.number ? 'number' : 'text', min: this.min, max: this.max, step: this.step, value: this.value, onInput: function (event) { return _this_1.handleChange(event); } }))));
+        return (h(Host, null, h("label", { id: "c-text-label", class: labelClasses, htmlFor: this.name }, this.label, this.required ? h("span", { class: "required" }, " *") : ''), h("div", { class: classes }, h("input", { name: this.name, "aria-labelledby": "c-text-label", disabled: this.disabled, type: this.number ? 'number' : 'text', min: this.min, max: this.max, step: this.step, 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-dense{min-height:36px}label.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%}.label-disabled,.text-field-wrapper.text-field-disabled input{color:#93979d}"; },
+        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}label.dense-label{font-size:12px}label span.required{color:#e71d32}.text-field-wrapper.required-border{border-bottom:2px solid #e71d32}.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%}.label-disabled,.text-field-wrapper.text-field-disabled input{color:#93979d}"; },
         enumerable: true,
@@ -421,0 +427,0 @@ configurable: true

dist/esm/c-autocomplete_13.entry.js

@@ -19,2 +19,3 @@ import { r as registerInstance, h, c as createEvent, H as Host, g as getElement } from './core-621fa4e5.js';
         this.value = null;
+        this.required = null;
         this.items = [
@@ -106,6 +107,6 @@ { name: 'Default 1', value: 'default1' },
             classes = `${classes} c-autocomplete-dense`;
-        return (h(Host, null, h("label", { id: "c-autocomplete-label" }, this.label), h("div", { class: "c-autocomplete" }, h("div", { class: classes, onClick: () => this.showMenu(), role: "button", "aria-labelledby": "c-autocomplete-label" }, h("c-row", { class: "no-wrap" }, h("div", { class: "c-autocomplete-current" }, h("input", { value: this.query, ref: el => this.current = el, "aria-autocomplete": "list", "aria-controls": "c-menu-parent", "aria-haspopup": "true", 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", { id: "c-menu-parent", class: "c-menu-parent", "aria-expanded": this.menuVisible }, this.menuVisible ? h("ul", { class: "c-menu" }, this.items.map(item => this.getListItem(item))) : ''))));
+        return (h(Host, null, h("label", { id: "c-autocomplete-label" }, this.label, this.required ? h("span", { class: "required" }, " *") : ''), h("div", { class: "c-autocomplete" }, h("div", { class: classes, onClick: () => this.showMenu(), role: "button", "aria-labelledby": "c-autocomplete-label" }, h("c-row", { class: "no-wrap" }, h("div", { class: "c-autocomplete-current" }, h("input", { value: this.query, ref: el => this.current = el, "aria-autocomplete": "list", "aria-controls": "c-menu-parent", "aria-haspopup": "true", 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", { id: "c-menu-parent", class: "c-menu-parent", "aria-expanded": this.menuVisible }, this.menuVisible ? h("ul", { class: "c-menu" }, this.items.map(item => this.getListItem(item))) : ''))));
     }
     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-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);padding-left:0;margin:0;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%}.c-menu li{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}.c-menu li.dense{padding:10px 14px}.c-menu li:HOVER{background-color:#eef2f8}"; }
+    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}label span.required{color:#e71d32}.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);padding-left:0;margin:0;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%}.c-menu li{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}.c-menu li.dense{padding:10px 14px}.c-menu li:HOVER{background-color:#eef2f8}"; }
 };
@@ -192,2 +193,3 @@
         registerInstance(this, hostRef);
+        this.required = null;
         this.value = null;
@@ -276,6 +278,6 @@ this.menuVisible = false;
             classes = `${classes} c-select-dense`;
-        return (h(Host, null, h("label", { id: "c-select-label" }, this.label), h("div", { class: "c-selections" }, h("div", { class: classes, onClick: () => this.showMenu(), ref: el => this.current = el, tabindex: "0", role: "button", "aria-labelledby": "c-select-label" }, 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", "aria-expanded": this.menuVisible }, this.menuVisible ? h("div", { class: "c-menu" }, this.items.map(item => this.getListItem(item))) : ''))));
+        return (h(Host, null, h("label", { id: "c-select-label" }, this.label, this.required ? h("span", { class: "required" }, " *") : ''), h("div", { class: "c-selections" }, h("div", { class: classes, onClick: () => this.showMenu(), ref: el => this.current = el, tabindex: "0", role: "button", "aria-labelledby": "c-select-label" }, 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", "aria-expanded": this.menuVisible }, this.menuVisible ? h("div", { class: "c-menu" }, this.items.map(item => this.getListItem(item))) : ''))));
     }
     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:focus-within{border:2px solid #006778;outline:none}.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 li{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}.c-menu li.dense{padding:10px 14px}.c-menu li:HOVER{background-color:#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:focus-within{border:2px solid #006778;outline:none}.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}label span.required{color:#e71d32}.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 li{display:block;padding:14px;-webkit-transition:background-color .5s;transition:background-color .5s;font-size:14px}.c-menu li.dense{padding:10px 14px}.c-menu li:HOVER{background-color:#eef2f8}"; }
 };
@@ -346,2 +348,3 @@
         registerInstance(this, hostRef);
+        this.required = null;
         this.step = null;
@@ -356,2 +359,5 @@ this.min = null;
         let classes = this.dense ? 'text-field-wrapper text-field-dense' : 'text-field-wrapper';
+        if (this.required && this.value === '') {
+            classes = `${classes} required-border`;
+        }
         let labelClasses = '';
@@ -362,5 +368,5 @@ if (this.disabled) {
         }
-        return (h(Host, null, h("label", { id: "c-text-label", class: labelClasses, htmlFor: this.name }, this.label), h("div", { class: classes }, h("input", { name: this.name, "aria-labelledby": "c-text-label", disabled: this.disabled, type: this.number ? 'number' : 'text', min: this.min, max: this.max, step: this.step, value: this.value, onInput: (event) => this.handleChange(event) }))));
+        return (h(Host, null, h("label", { id: "c-text-label", class: labelClasses, htmlFor: this.name }, this.label, this.required ? h("span", { class: "required" }, " *") : ''), h("div", { class: classes }, h("input", { name: this.name, "aria-labelledby": "c-text-label", disabled: this.disabled, type: this.number ? 'number' : 'text', min: this.min, max: this.max, step: this.step, 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-dense{min-height:36px}label.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%}.label-disabled,.text-field-wrapper.text-field-disabled input{color:#93979d}"; }
+    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}label.dense-label{font-size:12px}label span.required{color:#e71d32}.text-field-wrapper.required-border{border-bottom:2px solid #e71d32}.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%}.label-disabled,.text-field-wrapper.text-field-disabled input{color:#93979d}"; }
 };
@@ -367,0 +373,0 @@

dist/types/components.d.ts

@@ -19,2 +19,3 @@ /* eslint-disable */
     'query': any;
+    'required': boolean;
     'value': any;
@@ -45,2 +46,3 @@ }
     'name': string;
+    'required': boolean;
     'value': any;
@@ -68,2 +70,3 @@ }
     'number': boolean;
+    'required': boolean;
     'step': number;
@@ -195,2 +198,3 @@ 'value': string;
     'query'?: any;
+    'required'?: boolean;
     'value'?: any;
@@ -222,2 +226,3 @@ }
     'onChangeValue'?: (event: CustomEvent<any>) => void;
+    'required'?: boolean;
     'value'?: any;
@@ -245,2 +250,3 @@ }
     'number'?: boolean;
+    'required'?: boolean;
     'step'?: number;
@@ -247,0 +253,0 @@ 'value'?: string;

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

@@ -8,2 +8,3 @@ import { EventEmitter } from '../../stencil.core';
     dense: boolean;
+    required: boolean;
     items: any[];
@@ -10,0 +11,0 @@ changeValue: EventEmitter;

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

@@ -6,2 +6,3 @@ import { EventEmitter } from '../../stencil.core';
     name: string;
+    required: boolean;
     value: any;
@@ -8,0 +9,0 @@ host: HTMLElement;

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

@@ -5,2 +5,3 @@ export declare class TextField {
     dense: boolean;
+    required: boolean;
     label: string;
@@ -7,0 +8,0 @@ name: string;

package.json

 {
   "name": "csc-ui",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "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

1036515

increased by0.52%

Lines of code

17096

increased by0.63%

No dependency changes