npm - @ukic/web-components - Versions diffs - 2.8.0 → 2.9.0 - Mend

@ukic/web-components 2.8.0 → 2.9.0

Files changed (1070) hide show

package/dist/cjs/ic-checkbox.cjs.entry.js CHANGED Viewed

@@ -2,107 +2,107 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-4f8c900f.js');
-const helpers = require('./helpers-0d63359f.js');
-require('./types-7d67439f.js');
+const index = require('./index-152d1fe5.js');
+const helpers = require('./helpers-3f91f63a.js');
+require('./types-dc22e301.js');
-const icCheckboxCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.disabled){color:var(--ic-architectural-200);pointer-events:none}.container{display:flex;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);margin-bottom:var(--ic-space-xxs);align-items:center}:host(.small) .container{margin-bottom:var(--ic-space-xxxs)}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:transparent;border:var(--ic-border-width) solid var(--ic-architectural-300);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast);flex-shrink:0}:host(.small) .checkbox,:host(.small) .container svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.large) .checkbox,:host(.large) .container svg{width:var(--ic-space-xl);height:var(--ic-space-xl)}.checkbox:checked{background-color:var(--ic-action-default);border:var(--ic-border-width) solid var(--ic-action-default);transition:var(--ic-easing-transition-slow)}.checkbox:checked:disabled{background-color:var(--ic-architectural-200)}.checkbox:indeterminate,.checkbox.indeterminate:checked{background-color:transparent;border:0.125rem solid var(--ic-action-default)}.checkbox:checked:hover{background-color:var(--ic-action-default-hover)}.checkbox:indeterminate:hover,.checkbox.indeterminate:checked:hover{background-color:var(--ic-action-default-bg-hover);border:0.125rem solid var(--ic-action-default-hover)}.checkbox:checked:active{background-color:var(--ic-action-default-active)}.checkbox:indeterminate:active,.checkbox.indeterminate:checked:active{background-color:var(--ic-action-default-bg-active);border:0.125rem solid var(--ic-action-default-active)}.checkbox:hover{background-color:var(--ic-action-default-bg-hover);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:var(--ic-border-width) solid var(--ic-action-default-hover)}.checkbox:active{background-color:var(--ic-action-default-bg-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active);border:var(--ic-border-width) solid var(--ic-action-default-active)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:var(--ic-border-width) dashed var(--ic-architectural-200)}.checkbox-label{padding-left:var(--ic-space-sm)}.checkbox-label:hover{cursor:pointer}.checkmark{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:white;z-index:1;background-color:transparent;pointer-events:none;flex-shrink:0}:host(.small) .checkmark{margin-left:calc(-1 * var(--ic-space-md));right:calc(-1 * var(--ic-space-md))}:host(.large) .checkmark{margin-left:calc(-1 * var(--ic-space-xl));right:calc(-1 * var(--ic-space-xl))}.indeterminate-symbol{position:relative;width:0.875rem;height:var(--ic-space-xxxs);right:-1.188rem;margin-left:-0.875rem;z-index:1;background-color:var(--ic-action-default);pointer-events:none;flex-shrink:0}:host(.small) .indeterminate-symbol{width:0.6rem;right:-0.8rem;margin-left:-0.6rem}:host(.large) .indeterminate-symbol{width:1.25rem;right:-1.625rem;margin-left:-1.25rem}.container:hover .indeterminate-symbol{background-color:var(--ic-action-default-hover)}.container:active .indeterminate-symbol{background-color:var(--ic-action-default-active)}.additional-field-wrapper{margin-left:calc(var(--ic-space-md) + var(--ic-space-lg));margin-top:calc(var(--ic-space-sm) / 2)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-action-default);border-left:0.125rem solid var(--ic-action-default)}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-text{color:var(--ic-action-default);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){::slotted(ic-text-field){--input-width:100%}}@media (forced-colors: active){.checkbox{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert;transition:none}.checkbox:checked{transition:none}.checkbox:focus-visible{outline:0.125rem solid highlight}.checkbox:disabled:not(:checked){-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.checkmark{fill:none}.indeterminate-symbol{display:none}}";
+const icCheckboxCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.disabled){color:var(--ic-architectural-200);pointer-events:none}.container{display:flex;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);margin-bottom:var(--ic-space-xxs);align-items:center}:host(.small) .container{margin-bottom:var(--ic-space-xxxs)}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-architectural-white);border:var(--ic-border-width) solid var(--ic-architectural-300);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast);flex-shrink:0}:host(.small) .checkbox,:host(.small) .container svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.large) .checkbox,:host(.large) .container svg{width:var(--ic-space-xl);height:var(--ic-space-xl)}.checkbox:checked{background-color:var(--ic-action-default);border:var(--ic-border-width) solid var(--ic-action-default);transition:var(--ic-easing-transition-slow)}.checkbox:checked:disabled{background-color:var(--ic-architectural-200)}.checkbox:indeterminate,.checkbox.indeterminate:checked{background-color:var(--ic-architectural-white);border:0.125rem solid var(--ic-action-default)}.checkbox:checked:hover{background-color:var(--ic-action-default-hover)}.checkbox:indeterminate:hover,.checkbox.indeterminate:checked:hover{background-color:var(--ic-action-default-bg-hover-no-alpha);border:0.125rem solid var(--ic-action-default-hover)}.checkbox:checked:active{background-color:var(--ic-action-default-active)}.checkbox:indeterminate:active,.checkbox.indeterminate:checked:active{background-color:var(--ic-action-default-bg-active-no-alpha);border:0.125rem solid var(--ic-action-default-active)}.checkbox:hover{background-color:var(--ic-action-default-bg-hover-no-alpha);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:var(--ic-border-width) solid var(--ic-action-default-hover)}.checkbox:active{background-color:var(--ic-action-default-bg-active-no-alpha);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active);border:var(--ic-border-width) solid var(--ic-action-default-active)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:var(--ic-border-width) dashed var(--ic-architectural-200)}.checkbox-label{padding-left:var(--ic-space-sm)}.checkbox-label:hover{cursor:pointer}.checkmark{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:white;z-index:1;background-color:transparent;pointer-events:none;flex-shrink:0}:host(.small) .checkmark{margin-left:calc(-1 * var(--ic-space-md));right:calc(-1 * var(--ic-space-md))}:host(.large) .checkmark{margin-left:calc(-1 * var(--ic-space-xl));right:calc(-1 * var(--ic-space-xl))}.indeterminate-symbol{position:relative;width:0.875rem;height:var(--ic-space-xxxs);right:-1.188rem;margin-left:-0.875rem;z-index:1;background-color:var(--ic-action-default);pointer-events:none;flex-shrink:0}:host(.small) .indeterminate-symbol{width:0.6rem;right:-0.8rem;margin-left:-0.6rem}:host(.large) .indeterminate-symbol{width:1.25rem;right:-1.625rem;margin-left:-1.25rem}.container:hover .indeterminate-symbol{background-color:var(--ic-action-default-hover)}.container:active .indeterminate-symbol{background-color:var(--ic-action-default-active)}.additional-field-wrapper{margin-left:calc(var(--ic-space-md) + var(--ic-space-lg));margin-top:calc(var(--ic-space-sm) / 2)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-action-default);border-left:0.125rem solid var(--ic-action-default)}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-text{color:var(--ic-action-default);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){::slotted(ic-text-field){--input-width:100%}}@media (forced-colors: active){.checkbox{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert;transition:none}.checkbox:checked{transition:none}.checkbox:focus-visible{outline:0.125rem solid highlight}.checkbox:disabled:not(:checked){-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.checkmark{fill:none}.indeterminate-symbol{display:none}}";
 const Checkbox = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.checkboxChecked = index.createEvent(this, "checkboxChecked", 7);
-    this.icCheck = index.createEvent(this, "icCheck", 7);
-    this.IC_TEXT_FIELD = "ic-text-field";
-    this.handleClick = () => {
-      this.checked = !this.checked;
-      this.icCheck.emit();
-      this.checkboxChecked.emit();
-    };
-    this.handleFormReset = () => {
-      this.checked = this.initiallyChecked;
-    };
-    this.additionalFieldDisplay = "static";
-    this.checked = false;
-    this.initiallyChecked = this.checked;
-    this.disabled = false;
-    this.dynamicText = "This selection requires additional answers";
-    this.form = undefined;
-    this.formaction = undefined;
-    this.formenctype = undefined;
-    this.formmethod = undefined;
-    this.formnovalidate = undefined;
-    this.formtarget = undefined;
-    this.groupLabel = undefined;
-    this.indeterminate = false;
-    this.label = undefined;
-    this.name = undefined;
-    this.size = undefined;
-    this.small = false;
-    this.value = undefined;
-  }
-  componentWillLoad() {
-    helpers.removeDisabledFalse(this.disabled, this.el);
-    helpers.addFormResetListener(this.el, this.handleFormReset);
-  }
-  componentDidLoad() {
-    helpers.onComponentRequiredPropUndefined([
-      { prop: this.label, propName: "label" },
-      { prop: this.value, propName: "value" },
-    ], "Checkbox");
-  }
-  componentDidRender() {
-    if (this.additionalFieldDisplay === "static") {
-      const textfield = this.el.querySelector(this.IC_TEXT_FIELD);
-      if (!this.checked) {
-        textfield && textfield.setAttribute("disabled", "");
-      }
-      else {
-        textfield && textfield.removeAttribute("disabled");
-      }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkboxChecked = index.createEvent(this, "checkboxChecked", 7);
+        this.icCheck = index.createEvent(this, "icCheck", 7);
+        this.IC_TEXT_FIELD = "ic-text-field";
+        this.handleClick = () => {
+            this.checked = !this.checked;
+            this.icCheck.emit();
+            this.checkboxChecked.emit();
+        };
+        this.handleFormReset = () => {
+            this.checked = this.initiallyChecked;
+        };
+        this.additionalFieldDisplay = "static";
+        this.checked = false;
+        this.initiallyChecked = this.checked;
+        this.disabled = false;
+        this.dynamicText = "This selection requires additional answers";
+        this.form = undefined;
+        this.formaction = undefined;
+        this.formenctype = undefined;
+        this.formmethod = undefined;
+        this.formnovalidate = undefined;
+        this.formtarget = undefined;
+        this.groupLabel = undefined;
+        this.indeterminate = false;
+        this.label = undefined;
+        this.name = undefined;
+        this.size = undefined;
+        this.small = false;
+        this.value = undefined;
     }
-    else if (this.additionalFieldContainer) {
-      if (!this.checked) {
-        this.additionalFieldContainer.style.display = "none";
-      }
-      else {
-        this.additionalFieldContainer.style.display = "flex";
-      }
+    componentWillLoad() {
+        helpers.removeDisabledFalse(this.disabled, this.el);
+        helpers.addFormResetListener(this.el, this.handleFormReset);
     }
-  }
-  disconnectedCallback() {
-    helpers.removeFormResetListener(this.el, this.handleFormReset);
-  }
-  /**
-   * Sets focus on the checkbox.
-   */
-  async setFocus() {
-    const checkboxEl = this.el.shadowRoot.querySelector(".checkbox");
-    if (checkboxEl) {
-      checkboxEl.focus();
+    componentDidLoad() {
+        helpers.onComponentRequiredPropUndefined([
+            { prop: this.label, propName: "label" },
+            { prop: this.value, propName: "value" },
+        ], "Checkbox");
     }
-  }
-  render() {
-    let id = `ic-checkbox-${helpers.isPropDefined(this.label) ? this.label : this.value}-${this.groupLabel}`;
-    id = id.replace(/ /g, "-");
-    const parentElementSize = this.el.parentElement.size;
-    this.checked
-      ? helpers.renderHiddenInput(true, this.el, this.name, this.checked && this.value, this.disabled)
-      : helpers.removeHiddenInput(this.el);
-    return (index.h(index.Host, { class: {
-        ["disabled"]: this.disabled,
-        ["small"]: this.small,
-        [`${this.size || parentElementSize}`]: true,
-      } }, index.h("div", { class: "container" }, this.checked && !this.indeterminate && (index.h("svg", { class: "checkmark", width: "1.5rem", height: "1.5rem", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, index.h("title", null, "checkmark icon"), index.h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))), this.checked && this.indeterminate && (index.h("div", { class: "indeterminate-symbol" })), index.h("input", { role: "checkbox", class: {
-        ["checkbox"]: true,
-        ["checked"]: this.checked,
-        ["indeterminate"]: this.indeterminate,
-      }, type: "checkbox", name: this.name, id: id, value: this.value, disabled: this.disabled ? true : null, checked: this.checked, indeterminate: this.indeterminate, onClick: this.handleClick, form: this.form, formaction: this.formaction, formenctype: this.formenctype, formmethod: this.formmethod, formnovalidate: this.formnovalidate, formtarget: this.formtarget }), index.h("ic-typography", { class: "checkbox-label", variant: "body" }, index.h("label", { htmlFor: id }, this.label))), helpers.isSlotUsed(this.el, "additional-field") && (index.h("div", { class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, this.additionalFieldDisplay === "dynamic" && (index.h("div", { class: "branch-corner" })), index.h("div", null, this.additionalFieldDisplay === "dynamic" && (index.h("ic-typography", { variant: "caption" }, index.h("p", { class: "dynamic-text", "aria-live": "polite" }, this.dynamicText))), index.h("div", { class: {
-        "additional-field-wrapper": this.additionalFieldDisplay === "static",
-      } }, index.h("slot", { name: "additional-field" })))))));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return index.getElement(this); }
+    componentDidRender() {
+        if (this.additionalFieldDisplay === "static") {
+            const textfield = this.el.querySelector(this.IC_TEXT_FIELD);
+            if (!this.checked) {
+                textfield && textfield.setAttribute("disabled", "");
+            }
+            else {
+                textfield && textfield.removeAttribute("disabled");
+            }
+        }
+        else if (this.additionalFieldContainer) {
+            if (!this.checked) {
+                this.additionalFieldContainer.style.display = "none";
+            }
+            else {
+                this.additionalFieldContainer.style.display = "flex";
+            }
+        }
+    }
+    disconnectedCallback() {
+        helpers.removeFormResetListener(this.el, this.handleFormReset);
+    }
+    /**
+     * Sets focus on the checkbox.
+     */
+    async setFocus() {
+        const checkboxEl = this.el.shadowRoot.querySelector(".checkbox");
+        if (checkboxEl) {
+            checkboxEl.focus();
+        }
+    }
+    render() {
+        let id = `ic-checkbox-${helpers.isPropDefined(this.label) ? this.label : this.value}-${this.groupLabel}`;
+        id = id.replace(/ /g, "-");
+        const parentElementSize = this.el.parentElement.size;
+        this.checked
+            ? helpers.renderHiddenInput(true, this.el, this.name, this.checked && this.value, this.disabled)
+            : helpers.removeHiddenInput(this.el);
+        return (index.h(index.Host, { class: {
+                ["disabled"]: this.disabled,
+                ["small"]: this.small,
+                [`${this.size || parentElementSize}`]: true,
+            } }, index.h("div", { class: "container" }, this.checked && !this.indeterminate && (index.h("svg", { class: "checkmark", width: "1.5rem", height: "1.5rem", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, index.h("title", null, "checkmark icon"), index.h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))), this.checked && this.indeterminate && (index.h("div", { class: "indeterminate-symbol" })), index.h("input", { role: "checkbox", class: {
+                ["checkbox"]: true,
+                ["checked"]: this.checked,
+                ["indeterminate"]: this.indeterminate,
+            }, type: "checkbox", name: this.name, id: id, value: this.value, disabled: this.disabled ? true : null, checked: this.checked, indeterminate: this.indeterminate, onClick: this.handleClick, form: this.form, formaction: this.formaction, formenctype: this.formenctype, formmethod: this.formmethod, formnovalidate: this.formnovalidate, formtarget: this.formtarget }), index.h("ic-typography", { class: "checkbox-label", variant: "body" }, index.h("label", { htmlFor: id }, this.label))), helpers.isSlotUsed(this.el, "additional-field") && (index.h("div", { class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, this.additionalFieldDisplay === "dynamic" && (index.h("div", { class: "branch-corner" })), index.h("div", null, this.additionalFieldDisplay === "dynamic" && (index.h("ic-typography", { variant: "caption" }, index.h("p", { class: "dynamic-text", "aria-live": "polite" }, this.dynamicText))), index.h("div", { class: {
+                "additional-field-wrapper": this.additionalFieldDisplay === "static",
+            } }, index.h("slot", { name: "additional-field" })))))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return index.getElement(this); }
 };
 Checkbox.style = icCheckboxCss;

package/dist/cjs/ic-checkbox.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-checkbox.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","addFormResetListener","onComponentRequiredPropUndefined","removeFormResetListener","isPropDefined","renderHiddenInput","removeHiddenInput","h","Host","isSlotUsed"],"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.disabled) {\n color: var(--ic-architectural-200);\n pointer-events: none;\n}\n\n.container {\n display: flex;\n width: fit-content;\n padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n margin-bottom: var(--ic-space-xxs);\n align-items: center;\n}\n\n:host(.small) .container {\n margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: transparent;\n border: var(--ic-border-width) solid var(--ic-architectural-300);\n border-radius: var(--ic-border-radius);\n outline: none;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n flex-shrink: 0;\n}\n\n:host(.small) .checkbox,\n:host(.small) .container svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n:host(.large) .checkbox,\n:host(.large) .container svg {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n}\n\n.checkbox:checked {\n background-color: var(--ic-action-default);\n border: var(--ic-border-width) solid var(--ic-action-default);\n transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n background-color: var(--ic-architectural-200);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n background-color: transparent;\n border: 0.125rem solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n background-color: var(--ic-action-default-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n background-color: var(--ic-action-default-bg-hover);\n border: 0.125rem solid var(--ic-action-default-hover);\n}\n\n.checkbox:checked:active {\n background-color: var(--ic-action-default-active);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n background-color: var(--ic-action-default-bg-active);\n border: 0.125rem solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\n background-color: var(--ic-action-default-bg-hover);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n border: var(--ic-border-width) solid var(--ic-action-default-hover);\n}\n\n.checkbox:active {\n background-color: var(--ic-action-default-bg-active);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n border: var(--ic-border-width) solid var(--ic-action-default-active);\n}\n\n.checkbox:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n border: var(--ic-border-width) dashed var(--ic-architectural-200);\n}\n\n.checkbox-label {\n padding-left: var(--ic-space-sm);\n}\n\n.checkbox-label:hover {\n cursor: pointer;\n}\n\n.checkmark {\n position: relative;\n right: calc(-1 * var(--ic-space-lg));\n margin-left: calc(-1 * var(--ic-space-lg));\n fill: white;\n z-index: 1;\n background-color: transparent;\n pointer-events: none;\n flex-shrink: 0;\n}\n\n:host(.small) .checkmark {\n margin-left: calc(-1 * var(--ic-space-md));\n right: calc(-1 * var(--ic-space-md));\n}\n\n:host(.large) .checkmark {\n margin-left: calc(-1 * var(--ic-space-xl));\n right: calc(-1 * var(--ic-space-xl));\n}\n\n.indeterminate-symbol {\n position: relative;\n width: 0.875rem;\n height: var(--ic-space-xxxs);\n right: -1.188rem;\n margin-left: -0.875rem;\n z-index: 1;\n background-color: var(--ic-action-default);\n pointer-events: none;\n flex-shrink: 0;\n}\n\n:host(.small) .indeterminate-symbol {\n width: 0.6rem;\n right: -0.8rem;\n margin-left: -0.6rem;\n}\n\n:host(.large) .indeterminate-symbol {\n width: 1.25rem;\n right: -1.625rem;\n margin-left: -1.25rem;\n}\n\n.container:hover .indeterminate-symbol {\n background-color: var(--ic-action-default-hover);\n}\n\n.container:active .indeterminate-symbol {\n background-color: var(--ic-action-default-active);\n}\n\n.additional-field-wrapper {\n margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.branch-corner {\n color: var(--ic-action-default);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-action-default);\n border-left: 0.125rem solid var(--ic-action-default);\n}\n\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n color: var(--ic-action-default);\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n /* Styles here only apply to Forced Colors Mode /\n .checkbox {\n appearance: revert;\n transition: none;\n }\n\n .checkbox:checked {\n transition: none;\n }\n\n .checkbox:focus-visible {\n outline: 0.125rem solid highlight;\n }\n\n .checkbox:disabled:not(:checked) {\n appearance: none;\n border-color: GrayText;\n }\n\n .checkmark {\n fill: none;\n }\n\n .indeterminate-symbol {\n display: none;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcSizes } from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n} from \"../../utils/helpers\";\n\n/\n @slot additional-field - Content to be displayed alongside a checkbox.\n /\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n private additionalFieldContainer: HTMLDivElement;\n private IC_TEXT_FIELD: string = \"ic-text-field\";\n\n @Element() el: HTMLIcCheckboxElement;\n\n /\n The style of additionalField that will be displayed if used.\n /\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n /\n If `true`, the checkbox will be set to the checked state.\n /\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n @State() initiallyChecked = this.checked;\n\n /\n If `true`, the checkbox will be set to the disabled state.\n /\n @Prop() disabled?: boolean = false;\n\n /\n The text to be displayed when dynamic.\n /\n\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n /\n The <form> element to associate the checkbox with.\n /\n @Prop() form?: string;\n\n /\n The URL that processes the information submitted by the checkbox. It overrides the action attribute of the checkbox's form owner. Does nothing if there is no form owner.\n /\n @Prop() formaction?: string;\n\n /\n The way the submitted form data is encoded.\n /\n @Prop() formenctype?: string;\n\n /\n The HTTP method used to submit the form.\n /\n @Prop() formmethod?: string;\n\n /\n If `true`, the form will not be validated when submitted.\n /\n @Prop() formnovalidate?: boolean;\n\n /\n The place to display the response from submitting the form. It overrides the target attribute of the checkbox's form owner.\n /\n @Prop() formtarget?: string;\n\n /\n The group label for the checkbox.\n /\n @Prop() groupLabel: string;\n\n /\n If `true`, the indeterminate state will be displayed when checked.\n /\n @Prop() indeterminate: boolean = false;\n\n /\n The label for the checkbox.\n /\n @Prop() label!: string;\n\n /\n The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n /\n @Prop() name: string;\n\n /\n The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n /\n @Prop() size?: IcSizes;\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\n\n /\n The value for the checkbox.\n /\n @Prop() value!: string;\n\n /\n @deprecated This event should not be used anymore. Use icCheck instead.\n /\n @Event() checkboxChecked: EventEmitter<void>;\n\n /\n Emitted when a checkbox has been checked.\n /\n @Event() icCheck: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n addFormResetListener(this.el, this.handleFormReset);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.value, propName: \"value\" },\n ],\n \"Checkbox\"\n );\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.el.querySelector(this.IC_TEXT_FIELD);\n if (!this.checked) {\n textfield && textfield.setAttribute(\"disabled\", \"\");\n } else {\n textfield && textfield.removeAttribute(\"disabled\");\n }\n } else if (this.additionalFieldContainer) {\n if (!this.checked) {\n this.additionalFieldContainer.style.display = \"none\";\n } else {\n this.additionalFieldContainer.style.display = \"flex\";\n }\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n /\n Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n const checkboxEl: HTMLElement =\n this.el.shadowRoot.querySelector(\".checkbox\");\n if (checkboxEl) {\n checkboxEl.focus();\n }\n }\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.icCheck.emit();\n this.checkboxChecked.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n render() {\n let id = `ic-checkbox-${\n isPropDefined(this.label) ? this.label : this.value\n }-${this.groupLabel}`;\n\n id = id.replace(/ /g, \"-\");\n\n const parentElementSize = (\n this.el.parentElement as HTMLIcCheckboxGroupElement\n ).size;\n\n this.checked\n ? renderHiddenInput(\n true,\n this.el,\n this.name,\n this.checked && this.value,\n this.disabled\n )\n : removeHiddenInput(this.el);\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled,\n [\"small\"]: this.small,\n [`${this.size \|\| parentElementSize}`]: true,\n }}\n >\n <div class=\"container\">\n {this.checked && !this.indeterminate && (\n <svg\n class=\"checkmark\"\n width=\"1.5rem\"\n height=\"1.5rem\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n >\n <title>checkmark icon</title>\n <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n </svg>\n )}\n {this.checked && this.indeterminate && (\n <div class=\"indeterminate-symbol\" />\n )}\n <input\n role=\"checkbox\"\n class={{\n [\"checkbox\"]: true,\n [\"checked\"]: this.checked,\n [\"indeterminate\"]: this.indeterminate,\n }}\n type=\"checkbox\"\n name={this.name}\n id={id}\n value={this.value}\n disabled={this.disabled ? true : null}\n checked={this.checked}\n indeterminate={this.indeterminate}\n onClick={this.handleClick}\n form={this.form}\n formaction={this.formaction}\n formenctype={this.formenctype}\n formmethod={this.formmethod}\n formnovalidate={this.formnovalidate}\n formtarget={this.formtarget}\n ></input>\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{this.label}</label>\n </ic-typography>\n </div>\n {isSlotUsed(this.el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {this.additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {this.additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {this.dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n this.additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-checkbox.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","addFormResetListener","onComponentRequiredPropUndefined","removeFormResetListener","isPropDefined","renderHiddenInput","removeHiddenInput","h","Host","isSlotUsed"],"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.disabled) {\n color: var(--ic-architectural-200);\n pointer-events: none;\n}\n\n.container {\n display: flex;\n width: fit-content;\n padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n margin-bottom: var(--ic-space-xxs);\n align-items: center;\n}\n\n:host(.small) .container {\n margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: var(--ic-architectural-white);\n border: var(--ic-border-width) solid var(--ic-architectural-300);\n border-radius: var(--ic-border-radius);\n outline: none;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n flex-shrink: 0;\n}\n\n:host(.small) .checkbox,\n:host(.small) .container svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n:host(.large) .checkbox,\n:host(.large) .container svg {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n}\n\n.checkbox:checked {\n background-color: var(--ic-action-default);\n border: var(--ic-border-width) solid var(--ic-action-default);\n transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n background-color: var(--ic-architectural-200);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n background-color: var(--ic-architectural-white);\n border: 0.125rem solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n background-color: var(--ic-action-default-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n background-color: var(--ic-action-default-bg-hover-no-alpha);\n border: 0.125rem solid var(--ic-action-default-hover);\n}\n\n.checkbox:checked:active {\n background-color: var(--ic-action-default-active);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n background-color: var(--ic-action-default-bg-active-no-alpha);\n border: 0.125rem solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\n background-color: var(--ic-action-default-bg-hover-no-alpha);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n border: var(--ic-border-width) solid var(--ic-action-default-hover);\n}\n\n.checkbox:active {\n background-color: var(--ic-action-default-bg-active-no-alpha);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n border: var(--ic-border-width) solid var(--ic-action-default-active);\n}\n\n.checkbox:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n border: var(--ic-border-width) dashed var(--ic-architectural-200);\n}\n\n.checkbox-label {\n padding-left: var(--ic-space-sm);\n}\n\n.checkbox-label:hover {\n cursor: pointer;\n}\n\n.checkmark {\n position: relative;\n right: calc(-1 * var(--ic-space-lg));\n margin-left: calc(-1 * var(--ic-space-lg));\n fill: white;\n z-index: 1;\n background-color: transparent;\n pointer-events: none;\n flex-shrink: 0;\n}\n\n:host(.small) .checkmark {\n margin-left: calc(-1 * var(--ic-space-md));\n right: calc(-1 * var(--ic-space-md));\n}\n\n:host(.large) .checkmark {\n margin-left: calc(-1 * var(--ic-space-xl));\n right: calc(-1 * var(--ic-space-xl));\n}\n\n.indeterminate-symbol {\n position: relative;\n width: 0.875rem;\n height: var(--ic-space-xxxs);\n right: -1.188rem;\n margin-left: -0.875rem;\n z-index: 1;\n background-color: var(--ic-action-default);\n pointer-events: none;\n flex-shrink: 0;\n}\n\n:host(.small) .indeterminate-symbol {\n width: 0.6rem;\n right: -0.8rem;\n margin-left: -0.6rem;\n}\n\n:host(.large) .indeterminate-symbol {\n width: 1.25rem;\n right: -1.625rem;\n margin-left: -1.25rem;\n}\n\n.container:hover .indeterminate-symbol {\n background-color: var(--ic-action-default-hover);\n}\n\n.container:active .indeterminate-symbol {\n background-color: var(--ic-action-default-active);\n}\n\n.additional-field-wrapper {\n margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.branch-corner {\n color: var(--ic-action-default);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-action-default);\n border-left: 0.125rem solid var(--ic-action-default);\n}\n\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n color: var(--ic-action-default);\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n /* Styles here only apply to Forced Colors Mode /\n .checkbox {\n appearance: revert;\n transition: none;\n }\n\n .checkbox:checked {\n transition: none;\n }\n\n .checkbox:focus-visible {\n outline: 0.125rem solid highlight;\n }\n\n .checkbox:disabled:not(:checked) {\n appearance: none;\n border-color: GrayText;\n }\n\n .checkmark {\n fill: none;\n }\n\n .indeterminate-symbol {\n display: none;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcSizes } from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n} from \"../../utils/helpers\";\n\n/\n @slot additional-field - Content to be displayed alongside a checkbox.\n /\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n private additionalFieldContainer: HTMLDivElement;\n private IC_TEXT_FIELD: string = \"ic-text-field\";\n\n @Element() el: HTMLIcCheckboxElement;\n\n /\n The style of additionalField that will be displayed if used.\n /\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n /\n If `true`, the checkbox will be set to the checked state.\n /\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n @State() initiallyChecked = this.checked;\n\n /\n If `true`, the checkbox will be set to the disabled state.\n /\n @Prop() disabled?: boolean = false;\n\n /\n The text to be displayed when dynamic.\n /\n\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n /\n The <form> element to associate the checkbox with.\n /\n @Prop() form?: string;\n\n /\n The URL that processes the information submitted by the checkbox. It overrides the action attribute of the checkbox's form owner. Does nothing if there is no form owner.\n /\n @Prop() formaction?: string;\n\n /\n The way the submitted form data is encoded.\n /\n @Prop() formenctype?: string;\n\n /\n The HTTP method used to submit the form.\n /\n @Prop() formmethod?: string;\n\n /\n If `true`, the form will not be validated when submitted.\n /\n @Prop() formnovalidate?: boolean;\n\n /\n The place to display the response from submitting the form. It overrides the target attribute of the checkbox's form owner.\n /\n @Prop() formtarget?: string;\n\n /\n The group label for the checkbox.\n /\n @Prop() groupLabel: string;\n\n /\n If `true`, the indeterminate state will be displayed when checked.\n /\n @Prop() indeterminate: boolean = false;\n\n /\n The label for the checkbox.\n /\n @Prop() label!: string;\n\n /\n The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n /\n @Prop() name: string;\n\n /\n The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n /\n @Prop() size?: IcSizes;\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\n\n /\n The value for the checkbox.\n /\n @Prop() value!: string;\n\n /\n @deprecated This event should not be used anymore. Use icCheck instead.\n /\n @Event() checkboxChecked: EventEmitter<void>;\n\n /\n Emitted when a checkbox has been checked.\n /\n @Event() icCheck: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n addFormResetListener(this.el, this.handleFormReset);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.value, propName: \"value\" },\n ],\n \"Checkbox\"\n );\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.el.querySelector(this.IC_TEXT_FIELD);\n if (!this.checked) {\n textfield && textfield.setAttribute(\"disabled\", \"\");\n } else {\n textfield && textfield.removeAttribute(\"disabled\");\n }\n } else if (this.additionalFieldContainer) {\n if (!this.checked) {\n this.additionalFieldContainer.style.display = \"none\";\n } else {\n this.additionalFieldContainer.style.display = \"flex\";\n }\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n /\n Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n const checkboxEl: HTMLElement =\n this.el.shadowRoot.querySelector(\".checkbox\");\n if (checkboxEl) {\n checkboxEl.focus();\n }\n }\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.icCheck.emit();\n this.checkboxChecked.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n render() {\n let id = `ic-checkbox-${\n isPropDefined(this.label) ? this.label : this.value\n }-${this.groupLabel}`;\n\n id = id.replace(/ /g, \"-\");\n\n const parentElementSize = (\n this.el.parentElement as HTMLIcCheckboxGroupElement\n ).size;\n\n this.checked\n ? renderHiddenInput(\n true,\n this.el,\n this.name,\n this.checked && this.value,\n this.disabled\n )\n : removeHiddenInput(this.el);\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled,\n [\"small\"]: this.small,\n [`${this.size \|\| parentElementSize}`]: true,\n }}\n >\n <div class=\"container\">\n {this.checked && !this.indeterminate && (\n <svg\n class=\"checkmark\"\n width=\"1.5rem\"\n height=\"1.5rem\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n >\n <title>checkmark icon</title>\n <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n </svg>\n )}\n {this.checked && this.indeterminate && (\n <div class=\"indeterminate-symbol\" />\n )}\n <input\n role=\"checkbox\"\n class={{\n [\"checkbox\"]: true,\n [\"checked\"]: this.checked,\n [\"indeterminate\"]: this.indeterminate,\n }}\n type=\"checkbox\"\n name={this.name}\n id={id}\n value={this.value}\n disabled={this.disabled ? true : null}\n checked={this.checked}\n indeterminate={this.indeterminate}\n onClick={this.handleClick}\n form={this.form}\n formaction={this.formaction}\n formenctype={this.formenctype}\n formmethod={this.formmethod}\n formnovalidate={this.formnovalidate}\n formtarget={this.formtarget}\n ></input>\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{this.label}</label>\n </ic-typography>\n </div>\n {isSlotUsed(this.el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {this.additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {this.additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {this.dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n this.additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ic-chip.cjs.entry.js CHANGED Viewed

@@ -2,81 +2,83 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-4f8c900f.js');
-const helpers = require('./helpers-0d63359f.js');
-require('./types-7d67439f.js');
+const index = require('./index-152d1fe5.js');
+const helpers = require('./helpers-3f91f63a.js');
+require('./types-dc22e301.js');
 const dismissIcon = `<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM15 13.59L13.59 15L10 11.41L6.41 15L5 13.59L8.59 10L5 6.41L6.41 5L10 8.59L13.59 5L15 6.41L11.41 10L15 13.59Z" fill="currentColor"/>
 </svg>
 `;
-const icChipCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block}.chip{display:flex;padding:var(--ic-space-xxs);font-size:0.875rem;border-radius:var(--ic-space-md);text-align:left;text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative}.chip.small{padding:var(--ic-space-xxxs);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}.chip.large{padding:var(--ic-space-xs);border-radius:calc(var(--ic-space-md) + var(--ic-space-xxs))}.label{padding:0 var(--ic-space-xs)}.chip.hovered:not(:focus-within){background-color:var(--ic-architectural-300)}.chip:focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);z-index:1}.chip.outline.hovered:not(:focus-within),.chip.outlined.hovered:not(:focus-within){background-color:var(--ic-action-dark-bg-hover)}ic-tooltip:focus-within{z-index:1}.filled{background-color:var(--ic-architectural-200);color:black;border:none}.filled.disabled{background-color:var(--ic-architectural-100)}.outline,.outlined{color:var(--ic-architectural-900);border:var(--ic-border-width) solid var(--ic-architectural-900);padding:calc(var(--ic-space-xxs) - var(--ic-space-1px))}.outline.small,.outlined.small{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}.outline.large,.outlined.large{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}.outline.disabled,.outlined.disabled{border:var(--ic-border-disabled);background:none}.chip.disabled ic-typography{color:var(--ic-architectural-200)}.dismiss-icon{border:none;border-radius:50%;padding:0;background:none;cursor:pointer;margin:var(--ic-space-xxxs);height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs))}.dismiss-icon:focus{outline:var(--ic-hc-focus-outline)}.dismiss-icon[disabled]{pointer-events:none;color:var(--ic-architectural-200)}.icon{padding:var(--ic-space-xxxs);box-sizing:border-box}.icon,ic-tooltip{width:var(--ic-space-lg);height:var(--ic-space-lg)}.chip.disabled path,.chip.disabled ::slotted(svg){fill:var(--ic-architectural-200)}@media (forced-colors: active){.chip{border:var(--ic-hc-border)}.filled.small{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}.filled{padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}.filled.large{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}.chip.disabled{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.chip.disabled ic-typography{color:GrayText}.chip.disabled path,.chip.disabled ::slotted(svg){fill:GrayText}.chip:focus-within{outline:none;border-color:Highlight}}";
+const icChipCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block}.chip{display:flex;padding:var(--ic-space-xxs);font-size:0.875rem;border-radius:var(--ic-space-md);text-align:left;text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative}.chip.small{padding:var(--ic-space-xxxs);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}.chip.large{padding:var(--ic-space-xs);border-radius:calc(var(--ic-space-md) + var(--ic-space-xxs))}.label{padding:0 var(--ic-space-xs)}.chip.hovered:not(:focus-within){background-color:var(--ic-architectural-300)}.chip:focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);z-index:1}.chip.outline.hovered:not(:focus-within),.chip.outlined.hovered:not(:focus-within){background-color:var(--ic-action-dark-bg-hover)}ic-tooltip:focus-within{z-index:1}.filled{background-color:var(--ic-architectural-200);color:black;border:none}.filled.disabled{background-color:var(--ic-architectural-100)}.outline,.outlined{color:var(--ic-architectural-900);border:var(--ic-border-width) solid var(--ic-architectural-900);padding:calc(var(--ic-space-xxs) - var(--ic-space-1px))}.outline.small,.outlined.small{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}.outline.large,.outlined.large{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}.outline.disabled,.outlined.disabled{border:var(--ic-border-disabled);background:none}.chip.disabled ic-typography{color:var(--ic-architectural-200)}.dismiss-icon{border:none;border-radius:50%;padding:0;background:none;cursor:pointer;margin:var(--ic-space-xxxs);height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs))}.dismiss-icon:focus{outline:var(--ic-hc-focus-outline)}.dismiss-icon[disabled]{pointer-events:none;color:var(--ic-architectural-200)}.icon{padding:var(--ic-space-xxxs);box-sizing:border-box}.icon,ic-tooltip{width:var(--ic-space-lg);height:var(--ic-space-lg)}.chip.disabled path,.chip.disabled ::slotted(svg){fill:var(--ic-architectural-200)}.chip.white-background{background-color:var(--ic-architectural-white)}.chip.white-background.hovered:not(:focus-within){background-color:var(--ic-action-dark-bg-hover-no-alpha) !important}@media (forced-colors: active){.chip{border:var(--ic-hc-border)}.filled.small{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}.filled{padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}.filled.large{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}.chip.disabled{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.chip.disabled ic-typography{color:GrayText}.chip.disabled path,.chip.disabled ::slotted(svg){fill:GrayText}.chip:focus-within{outline:none;border-color:Highlight}}";
 const Chip = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.dismiss = index.createEvent(this, "dismiss", 7);
-    this.icDismiss = index.createEvent(this, "icDismiss", 7);
-    this.dismissAction = () => {
-      this.dismiss.emit();
-      this.icDismiss.emit();
-    };
-    this.mouseEnterHandler = () => {
-      this.isHovered = true;
-    };
-    this.mouseLeaveHandler = () => {
-      this.isHovered = false;
-    };
-    this.isHovered = false;
-    this.visible = true;
-    this.appearance = undefined;
-    this.disabled = false;
-    this.dismissible = false;
-    this.label = undefined;
-    this.size = "default";
-    this.variant = "filled";
-  }
-  componentWillLoad() {
-    helpers.removeDisabledFalse(this.disabled, this.el);
-    if (this.appearance === "outline") {
-      this.variant = "outlined";
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dismiss = index.createEvent(this, "dismiss", 7);
+        this.icDismiss = index.createEvent(this, "icDismiss", 7);
+        this.dismissAction = () => {
+            this.dismiss.emit();
+            this.icDismiss.emit();
+        };
+        this.mouseEnterHandler = () => {
+            this.isHovered = true;
+        };
+        this.mouseLeaveHandler = () => {
+            this.isHovered = false;
+        };
+        this.isHovered = false;
+        this.visible = true;
+        this.appearance = undefined;
+        this.disabled = false;
+        this.dismissible = false;
+        this.label = undefined;
+        this.size = "default";
+        this.transparentBackground = true;
+        this.variant = "filled";
     }
-  }
-  componentDidLoad() {
-    var _a;
-    this.dismissible &&
-      ((_a = this.el.shadowRoot
-        .querySelector("span.ic-tooltip-label")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-hidden", "true"));
-    helpers.onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Chip");
-  }
-  handleClick() {
-    this.visible = !this.visible;
-  }
-  /**
-   * Sets focus on the chip.
-   */
-  async setFocus() {
-    if (this.el.shadowRoot.querySelector("button")) {
-      this.el.shadowRoot.querySelector("button").focus();
+    componentWillLoad() {
+        helpers.removeDisabledFalse(this.disabled, this.el);
+        if (this.appearance === "outline") {
+            this.variant = "outlined";
+        }
     }
-  }
-  render() {
-    const { label, appearance, variant, size, dismissible, visible, disabled, isHovered, } = this;
-    return (visible && (index.h("div", { class: {
-        ["chip"]: true,
-        [`${appearance}`]: appearance !== undefined,
-        [`${variant}`]: true,
-        [`${size}`]: true,
-        ["disabled"]: disabled,
-        ["dismissible"]: dismissible,
-        ["hovered"]: isHovered,
-      } }, helpers.isSlotUsed(this.el, "icon") && (index.h("div", { class: "icon" }, index.h("slot", { name: "icon" }))), index.h("ic-typography", { variant: "label", "apply-vertical-margins": false, class: "label" }, index.h("span", null, label)), dismissible && (index.h("ic-tooltip", { label: "Dismiss", target: "dismiss-icon", class: { ["tooltip-disabled"]: disabled } }, index.h("button", { id: "dismiss-icon", class: {
-        ["dismiss-icon"]: true,
-      }, "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), helpers.isSlotUsed(this.el, "badge") && index.h("slot", { name: "badge" }))));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return index.getElement(this); }
+    componentDidLoad() {
+        var _a;
+        this.dismissible &&
+            ((_a = this.el.shadowRoot
+                .querySelector("span.ic-tooltip-label")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-hidden", "true"));
+        helpers.onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Chip");
+    }
+    handleClick() {
+        this.visible = !this.visible;
+    }
+    /**
+     * Sets focus on the chip.
+     */
+    async setFocus() {
+        if (this.el.shadowRoot.querySelector("button")) {
+            this.el.shadowRoot.querySelector("button").focus();
+        }
+    }
+    render() {
+        const { label, appearance, variant, size, dismissible, visible, disabled, isHovered, } = this;
+        return (visible && (index.h("div", { class: {
+                ["chip"]: true,
+                [`${appearance}`]: appearance !== undefined,
+                [`${variant}`]: true,
+                [`${size}`]: true,
+                ["disabled"]: disabled,
+                ["dismissible"]: dismissible,
+                ["hovered"]: isHovered,
+                ["white-background"]: this.variant === "outlined" && !this.transparentBackground,
+            } }, helpers.isSlotUsed(this.el, "icon") && (index.h("div", { class: "icon" }, index.h("slot", { name: "icon" }))), index.h("ic-typography", { variant: "label", "apply-vertical-margins": false, class: "label" }, index.h("span", null, label)), dismissible && (index.h("ic-tooltip", { label: "Dismiss", target: "dismiss-icon", class: { ["tooltip-disabled"]: disabled } }, index.h("button", { id: "dismiss-icon", class: {
+                ["dismiss-icon"]: true,
+            }, "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), helpers.isSlotUsed(this.el, "badge") && index.h("slot", { name: "badge" }))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return index.getElement(this); }
 };
 Chip.style = icChipCss;

package/dist/cjs/ic-chip.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-chip.entry.cjs.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,q2JAAq2J;;MC+B12J,IAAI;;;;;IAgFP,kBAAa,GAAG;MACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;MACpB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB,CAAC;qBAxF4B,KAAK;mBACP,IAAI;;oBAUH,KAAK;uBAKF,KAAK;;gBAUZ,SAAS;mBAKC,QAAQ;;EAY3C,iBAAiB;IACfA,2BAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAE5C,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE;MACjC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;KAC3B;GACF;EAED,gBAAgB;;IACd,IAAI,CAAC,WAAW;OACd,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU;SACf,aAAa,CAAC,uBAAuB,CAAC,0CACrC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA,CAAC;IAC1CC,wCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,MAAM,CACP,CAAC;GACH;EAGD,WAAW;IACT,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;GAC9B;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC9C,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;KACpD;GACF;EAeD,MAAM;IACJ,MAAM,EACJ,KAAK,EACL,UAAU,EACV,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,QAAQ,EACR,SAAS,GACV,GAAG,IAAI,CAAC;IAET,QACE,OAAO,KACLC,iBACE,KAAK,EAAE;QACL,CAAC,MAAM,GAAG,IAAI;QACd,CAAC,GAAG,UAAU,EAAE,GAAG,UAAU,KAAK,SAAS;QAC3C,CAAC,GAAG,OAAO,EAAE,GAAG,IAAI;QACpB,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;QACjB,CAAC,UAAU,GAAG,QAAQ;QACtB,CAAC,aAAa,GAAG,WAAW;QAC5B,CAAC,SAAS,GAAG,SAAS;OACvB,IAEAC,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,KAC1BD,iBAAK,KAAK,EAAC,MAAM,IACfA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,EACDA,2BACE,OAAO,EAAC,OAAO,4BACS,KAAK,EAC7B,KAAK,EAAC,OAAO,IAEbA,sBAAO,KAAK,CAAQ,CACN,EACf,WAAW,KACVA,wBACE,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,cAAc,EACrB,KAAK,EAAE,EAAE,CAAC,kBAAkB,GAAG,QAAQ,EAAE,IAEzCA,oBACE,EAAE,EAAC,cAAc,EACjB,KAAK,EAAE;QACL,CAAC,cAAc,GAAG,IAAI;OACvB,gBACW,WAAW,KAAK,OAAO,EACnC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAC3B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,SAAS,EAAE,WAAW,GACd,CACC,CACd,EACAC,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAID,kBAAM,IAAI,EAAC,OAAO,GAAQ,CACvD,CACP,EACD;GACH;;;;;;;;","names":["removeDisabledFalse","onComponentRequiredPropUndefined","h","isSlotUsed"],"sources":["src/components/ic-chip/ic-chip.css?tag=ic-chip&encapsulation=shadow","src/components/ic-chip/ic-chip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: inline-block;\n}\n\n.chip {\n display: flex;\n padding: var(--ic-space-xxs);\n font-size: 0.875rem;\n border-radius: var(--ic-space-md);\n text-align: left;\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n}\n\n.chip.small {\n padding: var(--ic-space-xxxs);\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.chip.large {\n padding: var(--ic-space-xs);\n border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.label {\n padding: 0 var(--ic-space-xs);\n}\n\n.chip.hovered:not(:focus-within) {\n background-color: var(--ic-architectural-300);\n}\n\n.chip:focus-within {\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n}\n\n.chip.outline.hovered:not(:focus-within),\n.chip.outlined.hovered:not(:focus-within) {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\nic-tooltip:focus-within {\n z-index: 1;\n}\n\n.filled {\n background-color: var(--ic-architectural-200);\n color: black;\n border: none;\n}\n\n.filled.disabled {\n background-color: var(--ic-architectural-100);\n}\n\n.outline,\n.outlined {\n color: var(--ic-architectural-900);\n border: var(--ic-border-width) solid var(--ic-architectural-900);\n padding: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.outline.small,\n.outlined.small {\n padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));\n}\n\n.outline.large,\n.outlined.large {\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px));\n}\n\n.outline.disabled,\n.outlined.disabled {\n border: var(--ic-border-disabled);\n background: none;\n}\n\n.chip.disabled ic-typography {\n color: var(--ic-architectural-200);\n}\n\n.dismiss-icon {\n border: none;\n border-radius: 50%;\n padding: 0;\n background: none;\n cursor: pointer;\n margin: var(--ic-space-xxxs);\n height: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n width: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n}\n\n.dismiss-icon:focus {\n outline: var(--ic-hc-focus-outline);\n}\n\n.dismiss-icon[disabled] {\n pointer-events: none;\n color: var(--ic-architectural-200);\n}\n\n.icon {\n padding: var(--ic-space-xxxs);\n box-sizing: border-box;\n}\n\n.icon,\nic-tooltip {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.chip.disabled path,\n.chip.disabled ::slotted(svg) {\n fill: var(--ic-architectural-200);\n}\n\n@media (forced-colors: active) {\n .chip {\n border: var(--ic-hc-border);\n }\n\n .filled.small {\n padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));\n }\n\n .filled {\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n }\n\n .filled.large {\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px));\n }\n\n .chip.disabled {\n appearance: none;\n border-color: GrayText;\n }\n\n .chip.disabled ic-typography {\n color: GrayText;\n }\n\n .chip.disabled path,\n .chip.disabled ::slotted(svg) {\n fill: GrayText;\n }\n\n .chip:focus-within {\n outline: none;\n border-color: Highlight;\n }\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Element,\n Method,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance } from \"./ic-chip.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/*\n @slot icon - Content will be rendered at the start of the chip.\n * @slot badge - Badge component overlaying the top right of the chip.\n /\n@Component({\n tag: \"ic-chip\",\n styleUrl: \"ic-chip.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Chip {\n @Element() el: HTMLIcChipElement;\n\n @State() isHovered: boolean = false;\n @State() visible: boolean = true;\n\n /\n @deprecated This prop should not be used anymore. Use variant prop instead.\n /\n @Prop() appearance?: IcChipAppearance;\n\n /\n If `true`, the chip will appear disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If `true`, the chip will have a close button at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The text rendered within the chip.\n /\n @Prop() label!: string;\n\n /\n The size of the chip.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n The emphasis of the chip.\n /\n @Prop() variant?: IcEmphasisType = \"filled\";\n\n /\n @deprecated This event should not be used anymore. Use icDismiss instead.\n /\n @Event() dismiss: EventEmitter<void>;\n\n /\n Is emitted when the user dismisses the chip.\n /\n @Event() icDismiss: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n if (this.appearance === \"outline\") {\n this.variant = \"outlined\";\n }\n }\n\n componentDidLoad(): void {\n this.dismissible &&\n this.el.shadowRoot\n .querySelector(\"span.ic-tooltip-label\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Chip\"\n );\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n /\n Sets focus on the chip.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"button\")) {\n this.el.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n private dismissAction = (): void => {\n this.dismiss.emit();\n this.icDismiss.emit();\n };\n\n private mouseEnterHandler = (): void => {\n this.isHovered = true;\n };\n\n private mouseLeaveHandler = (): void => {\n this.isHovered = false;\n };\n\n render() {\n const {\n label,\n appearance,\n variant,\n size,\n dismissible,\n visible,\n disabled,\n isHovered,\n } = this;\n\n return (\n visible && (\n <div\n class={{\n [\"chip\"]: true,\n [`${appearance}`]: appearance !== undefined,\n [`${variant}`]: true,\n [`${size}`]: true,\n [\"disabled\"]: disabled,\n [\"dismissible\"]: dismissible,\n [\"hovered\"]: isHovered,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography\n variant=\"label\"\n apply-vertical-margins={false}\n class=\"label\"\n >\n <span>{label}</span>\n </ic-typography>\n {dismissible && (\n <ic-tooltip\n label=\"Dismiss\"\n target=\"dismiss-icon\"\n class={{ [\"tooltip-disabled\"]: disabled }}\n >\n <button\n id=\"dismiss-icon\"\n class={{\n [\"dismiss-icon\"]: true,\n }}\n aria-label={`Dismiss ${label} chip`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n onClick={this.dismissAction}\n onMouseEnter={this.mouseEnterHandler}\n onMouseLeave={this.mouseLeaveHandler}\n innerHTML={dismissIcon}\n ></button>\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </div>\n )\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-chip.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","onComponentRequiredPropUndefined","h","isSlotUsed"],"sources":["src/components/ic-chip/ic-chip.css?tag=ic-chip&encapsulation=shadow","src/components/ic-chip/ic-chip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: inline-block;\n}\n\n.chip {\n display: flex;\n padding: var(--ic-space-xxs);\n font-size: 0.875rem;\n border-radius: var(--ic-space-md);\n text-align: left;\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n}\n\n.chip.small {\n padding: var(--ic-space-xxxs);\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.chip.large {\n padding: var(--ic-space-xs);\n border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.label {\n padding: 0 var(--ic-space-xs);\n}\n\n.chip.hovered:not(:focus-within) {\n background-color: var(--ic-architectural-300);\n}\n\n.chip:focus-within {\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n}\n\n.chip.outline.hovered:not(:focus-within),\n.chip.outlined.hovered:not(:focus-within) {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\nic-tooltip:focus-within {\n z-index: 1;\n}\n\n.filled {\n background-color: var(--ic-architectural-200);\n color: black;\n border: none;\n}\n\n.filled.disabled {\n background-color: var(--ic-architectural-100);\n}\n\n.outline,\n.outlined {\n color: var(--ic-architectural-900);\n border: var(--ic-border-width) solid var(--ic-architectural-900);\n padding: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.outline.small,\n.outlined.small {\n padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));\n}\n\n.outline.large,\n.outlined.large {\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px));\n}\n\n.outline.disabled,\n.outlined.disabled {\n border: var(--ic-border-disabled);\n background: none;\n}\n\n.chip.disabled ic-typography {\n color: var(--ic-architectural-200);\n}\n\n.dismiss-icon {\n border: none;\n border-radius: 50%;\n padding: 0;\n background: none;\n cursor: pointer;\n margin: var(--ic-space-xxxs);\n height: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n width: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n}\n\n.dismiss-icon:focus {\n outline: var(--ic-hc-focus-outline);\n}\n\n.dismiss-icon[disabled] {\n pointer-events: none;\n color: var(--ic-architectural-200);\n}\n\n.icon {\n padding: var(--ic-space-xxxs);\n box-sizing: border-box;\n}\n\n.icon,\nic-tooltip {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.chip.disabled path,\n.chip.disabled ::slotted(svg) {\n fill: var(--ic-architectural-200);\n}\n\n.chip.white-background {\n background-color: var(--ic-architectural-white);\n}\n\n.chip.white-background.hovered:not(:focus-within) {\n background-color: var(--ic-action-dark-bg-hover-no-alpha) !important;\n}\n\n@media (forced-colors: active) {\n .chip {\n border: var(--ic-hc-border);\n }\n\n .filled.small {\n padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));\n }\n\n .filled {\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n }\n\n .filled.large {\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px));\n }\n\n .chip.disabled {\n appearance: none;\n border-color: GrayText;\n }\n\n .chip.disabled ic-typography {\n color: GrayText;\n }\n\n .chip.disabled path,\n .chip.disabled ::slotted(svg) {\n fill: GrayText;\n }\n\n .chip:focus-within {\n outline: none;\n border-color: Highlight;\n }\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Element,\n Method,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance } from \"./ic-chip.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/*\n @slot icon - Content will be rendered at the start of the chip.\n * @slot badge - Badge component overlaying the top right of the chip.\n /\n@Component({\n tag: \"ic-chip\",\n styleUrl: \"ic-chip.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Chip {\n @Element() el: HTMLIcChipElement;\n\n @State() isHovered: boolean = false;\n @State() visible: boolean = true;\n\n /\n @deprecated This prop should not be used anymore. Use variant prop instead.\n /\n @Prop() appearance?: IcChipAppearance;\n\n /\n If `true`, the chip will appear disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If `true`, the chip will have a close button at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The text rendered within the chip.\n /\n @Prop() label!: string;\n\n /\n The size of the chip.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n If `true`, the outlined variant of chip will have a transparent background rather than white.\n /\n @Prop() transparentBackground?: boolean = true;\n\n /\n The emphasis of the chip.\n /\n @Prop() variant?: IcEmphasisType = \"filled\";\n\n /\n @deprecated This event should not be used anymore. Use icDismiss instead.\n /\n @Event() dismiss: EventEmitter<void>;\n\n /\n Is emitted when the user dismisses the chip.\n /\n @Event() icDismiss: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n if (this.appearance === \"outline\") {\n this.variant = \"outlined\";\n }\n }\n\n componentDidLoad(): void {\n this.dismissible &&\n this.el.shadowRoot\n .querySelector(\"span.ic-tooltip-label\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Chip\"\n );\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n /\n Sets focus on the chip.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"button\")) {\n this.el.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n private dismissAction = (): void => {\n this.dismiss.emit();\n this.icDismiss.emit();\n };\n\n private mouseEnterHandler = (): void => {\n this.isHovered = true;\n };\n\n private mouseLeaveHandler = (): void => {\n this.isHovered = false;\n };\n\n render() {\n const {\n label,\n appearance,\n variant,\n size,\n dismissible,\n visible,\n disabled,\n isHovered,\n } = this;\n\n return (\n visible && (\n <div\n class={{\n [\"chip\"]: true,\n [`${appearance}`]: appearance !== undefined,\n [`${variant}`]: true,\n [`${size}`]: true,\n [\"disabled\"]: disabled,\n [\"dismissible\"]: dismissible,\n [\"hovered\"]: isHovered,\n [\"white-background\"]:\n this.variant === \"outlined\" && !this.transparentBackground,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography\n variant=\"label\"\n apply-vertical-margins={false}\n class=\"label\"\n >\n <span>{label}</span>\n </ic-typography>\n {dismissible && (\n <ic-tooltip\n label=\"Dismiss\"\n target=\"dismiss-icon\"\n class={{ [\"tooltip-disabled\"]: disabled }}\n >\n <button\n id=\"dismiss-icon\"\n class={{\n [\"dismiss-icon\"]: true,\n }}\n aria-label={`Dismiss ${label} chip`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n onClick={this.dismissAction}\n onMouseEnter={this.mouseEnterHandler}\n onMouseLeave={this.mouseLeaveHandler}\n innerHTML={dismissIcon}\n ></button>\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </div>\n )\n );\n }\n}\n"],"version":3}