npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.9 → 3.1.0 - Mend

@ukic/web-components 3.0.0-alpha.9 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1061) hide show

package/dist/components/ic-loading-indicator2.js CHANGED Viewed

@@ -2,14 +2,54 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defineCustomElement$1 } from './ic-typography2.js';
 const icLoadingIndicatorCss = "/*! 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:block;--linear-border-radius:0.25rem;--inner-color:var(--ic-loading-indicator-inner-color);--outer-color:var(--ic-loading-indicator-outer-color);--label-color:var(--ic-loading-indicator-label-color);--margin:none;--linear-line-height:var(--ic-space-xs)}:host(.ic-loading-indicator-monochrome){--inner-color:var(--ic-loading-indicator-inner-color-monochrome);--outer-color:var(--ic-loading-indicator-outer-color-monochrome);--label-color:var(--ic-loading-indicator-label-color-monochrome)}.ic-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host([size=\"small\"]){--circular-diameter:2.5rem;--linear-line-height:var(--ic-space-xxs)}:host([size=\"medium\"]){--circular-diameter:5rem}:host([size=\"large\"]){--circular-diameter:7.5rem}:host([size=\"icon\"]){display:inline-block;--margin:var(--ic-space-xxxs);--circular-diameter:1.25rem}:host(.ic-loading-indicator-label){--margin:0 0 var(--ic-space-xs) 0}.ic-loading-label{--ic-typography-color:var(--label-color);margin-left:var(--label-margin-left)}.ic-loading-circular-outer{height:var(--circular-diameter);width:var(--circular-diameter)}.ic-loading-circular-outer.indeterminate{animation:circular-animation 1s linear;animation-iteration-count:infinite}@keyframes circular-animation{100%{transform:rotate(360deg)}}.ic-loading-circular-outer,.ic-loading-linear-outer{margin:var(--margin)}.ic-loading-linear-outer{background-color:var(--outer-color);height:var(--linear-line-height);width:100%;border-radius:var(--linear-border-radius);overflow:hidden}.ic-loading-linear-inner{position:relative;height:100%;background-color:var(--inner-color);border-radius:var(--linear-border-radius)}.indeterminate>.ic-loading-linear-inner{animation:linear-animation 2s infinite}.determinate>.ic-loading-linear-inner{transition:width 0.5s;width:var(--linear-width)}:host(.ic-loading-indicator-full-width){--linear-border-radius:none}@keyframes linear-animation{0%{width:0%;left:-1%}25%{width:0%;left:-1%}50%{width:101%;left:-1%}75%{width:0%;left:101%}100%{width:0%;left:101%}}.ic-loading-circular-svg{position:relative;width:100%;height:100%;transform:rotate(-90deg)}.ic-loading-circular-svg circle{width:100%;height:100%;fill:none;stroke:var(--compact-step-outer-color, var(--outer-color));stroke-width:var(--circular-line-width);stroke-linecap:round}.ic-loading-circular-svg circle:nth-child(2){--circular-indeterminate:calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );stroke-dasharray:var(--stroke-dasharray), var(--stroke-dasharray);stroke-dashoffset:var(--stroke-dashoffset, var(--circular-indeterminate));stroke:var(--compact-step-inner-color, var(--inner-color))}:host(.inner-label) .ic-loading-circular-inner{height:100%;display:grid}:host(.inner-label) .ic-loading-circular-svg,.inner-text{grid-column:1;grid-row:1}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:var(--ic-architectural-300)}.inner-text{display:flex;align-items:center;justify-content:center;width:var(--ic-space-lg);height:inherit;overflow:hidden;margin:auto;--ic-typography-color:var(\n    --ic-step-indicator-text-current,\n    var(--ic-status-info-default)\n  )}:host(.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-step-indicator-text-disabled)}:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-architectural-400)}@media (forced-colors: active){.indeterminate>.ic-loading-circular-inner{forced-color-adjust:none}.ic-loading-linear-outer{border:var(--ic-border-hc)}.ic-loading-linear-inner{background-color:canvastext}.ic-loading-circular-svg circle{stroke:Background}.ic-loading-circular-svg circle:nth-child(2){stroke:canvastext}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:GrayText}}";
+const IcLoadingIndicatorStyle0 = icLoadingIndicatorCss;
 const LoadingIndicator = /*@__PURE__*/ proxyCustomElement(class LoadingIndicator extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.clipInnerElement = false;
+        /**
+         * The description that will be set as the aria-label of the loading indicator when not using a visible label.
+         */
+        this.description = "Loading";
+        /**
+         * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.
+         */
+        this.fullWidth = false;
+        /**
+         * The time in milliseconds before the label changes.
+         */
+        this.labelDuration = 8000;
+        /**
+         * The maximum value that the progress value can take.
+         * Used to calculate the proportional width of the progress bar.
+         */
+        this.max = 100;
+        /**
+         * The minimum value that the progress value can take.
+         * Used to calculate the proportional width of the progress bar.
+         */
+        this.min = 0;
+        /**
+         * If `true`, the element will display as black and white.
+         */
+        this.monochrome = false;
+        /**
+         * The size of the loading indicator.
+         */
+        this.size = "medium";
+        /**
+         * The type of indicator, either linear or circular.
+         */
+        this.type = "circular";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
         this.updateCircularProgressMeter = () => {
-            if (!this.indeterminate) {
+            if (!this.indeterminate && this.circularMeter) {
                 this.circularMeter.style.setProperty("--progress-value", String(this.progress));
             }
         };
@@ -30,52 +70,59 @@ const LoadingIndicator = /*@__PURE__*/ proxyCustomElement(class LoadingIndicator
             var _a;
             let variant = "h4";
             const width = (_a = this.outerElement) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-            if (this.size === "small" || (this.type === "circular" && width < 60)) {
+            if (this.size === "small" ||
+                (width && this.type === "circular" && width < 60)) {
                 variant = "label";
             }
             else if (this.size === "large" ||
-                (this.type === "circular" && width >= 120)) {
+                (width && this.type === "circular" && width >= 120)) {
                 variant = "h2";
             }
             return variant;
         };
         // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property
         this.setCircleLineWidth = () => {
-            const { offsetWidth: width } = this.outerElement;
             const compactStepCircularLineWidth = this.el.classList.contains("compact-step-progress-indicator")
                 ? 40
                 : 0;
             const toastDismissTimerCircularLineWidth = this.el.classList.contains("toast-dismiss-timer")
                 ? 20
                 : 0;
-            if (width ||
-                compactStepCircularLineWidth ||
-                toastDismissTimerCircularLineWidth) {
-                this.circularLineWidth =
-                    (compactStepCircularLineWidth ||
-                        toastDismissTimerCircularLineWidth ||
-                        width) * 0.1;
-                this.circularDiameter =
+            if (this.outerElement) {
+                const { offsetWidth: width } = this.outerElement;
+                if (width ||
                     compactStepCircularLineWidth ||
-                        toastDismissTimerCircularLineWidth ||
-                        width;
-                this.outerElement.style.setProperty("--circular-line-width", `${this.circularLineWidth}px`);
+                    toastDismissTimerCircularLineWidth) {
+                    this.circularLineWidth =
+                        (compactStepCircularLineWidth ||
+                            toastDismissTimerCircularLineWidth ||
+                            width) * 0.1;
+                    this.circularDiameter =
+                        compactStepCircularLineWidth ||
+                            toastDismissTimerCircularLineWidth ||
+                            width;
+                    this.outerElement.style.setProperty("--circular-line-width", `${this.circularLineWidth}px`);
+                }
             }
         };
         this.setLinearDeterminateWidth = () => {
+            const max = this.max;
+            const min = this.min;
             if (!this.innerElement)
                 return;
             // Ensure progress cannot be out of bounds
-            const progress = Math.min(this.max, Math.max(this.min, this.progress));
-            const proportion = (progress - this.min) / (this.max - this.min);
-            this.clipInnerElement = proportion > 0.5;
-            if (this.clipInnerElement) {
-                this.innerElement.classList.remove("clip");
-            }
-            else {
-                this.innerElement.classList.add("clip");
+            if (this.progress) {
+                const progress = Math.min(max, Math.max(min, this.progress));
+                const proportion = (progress - min) / (max - min);
+                this.clipInnerElement = proportion > 0.5;
+                if (this.clipInnerElement) {
+                    this.innerElement.classList.remove("clip");
+                }
+                else {
+                    this.innerElement.classList.add("clip");
+                }
+                this.innerElement.style.setProperty("--linear-width", `${proportion * 100}%`);
             }
-            this.innerElement.style.setProperty("--linear-width", `${proportion * 100}%`);
         };
         this.calcOuterClass = () => {
             let cls = `ic-loading-${this.type}-outer`;
@@ -112,31 +159,18 @@ const LoadingIndicator = /*@__PURE__*/ proxyCustomElement(class LoadingIndicator
         };
         this.setDashSteps = (radius) => {
             const dashArray = 2 * Math.PI * radius;
-            const progress = Math.min(Math.max(this.progress, this.min), this.max);
-            const proportion = -1 - (progress - this.min) / (this.max - this.min);
-            this.circularMeter.style.setProperty("--stroke-dasharray", `${dashArray}px`);
-            if (!this.indeterminate) {
-                this.circularMeter.style.setProperty("--circular-steps-max", String(this.max));
-                this.circularMeter.style.setProperty("--stroke-dashoffset", `${proportion * dashArray}px`);
+            if (this.circularMeter) {
+                this.circularMeter.style.setProperty("--stroke-dasharray", `${dashArray}px`);
+                if (!this.indeterminate && this.progress) {
+                    const min = this.min;
+                    const max = this.max;
+                    const progress = Math.min(Math.max(this.progress, min), max);
+                    const proportion = -1 - (progress - min) / (max - min);
+                    this.circularMeter.style.setProperty("--circular-steps-max", String(this.max));
+                    this.circularMeter.style.setProperty("--stroke-dashoffset", `${proportion * dashArray}px`);
+                }
             }
         };
-        this.circularDiameter = undefined;
-        this.circularLineWidth = undefined;
-        this.indeterminate = undefined;
-        this.indicatorLabel = undefined;
-        this.clipInnerElement = false;
-        this.description = "Loading";
-        this.fullWidth = false;
-        this.innerLabel = undefined;
-        this.labelDuration = 8000;
-        this.max = 100;
-        this.min = 0;
-        this.monochrome = false;
-        this.size = "medium";
-        this.type = "circular";
-        this.label = undefined;
-        this.progress = undefined;
-        this.theme = "inherit";
     }
     watchPropHandler() {
         this.updateLabel();
@@ -155,9 +189,10 @@ const LoadingIndicator = /*@__PURE__*/ proxyCustomElement(class LoadingIndicator
         this.el.setAttribute("exportparts", "ic-loading-container");
     }
     componentDidLoad() {
+        var _a;
         if (this.type === "circular") {
             this.setCircleLineWidth();
-            this.circularMeter = this.el.shadowRoot.querySelector(".ic-loading-circular-svg circle:nth-child(2)");
+            this.circularMeter = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".ic-loading-circular-svg circle:nth-child(2)");
             this.updateCircularProgressMeter();
         }
         if (Number(this.progress) >= 0 && this.type === "linear") {
@@ -175,22 +210,22 @@ const LoadingIndicator = /*@__PURE__*/ proxyCustomElement(class LoadingIndicator
     render() {
         const { theme, label, description, size, fullWidth, innerLabel, monochrome, } = this;
         const { x, y, r } = this.setCircleXY();
-        return (h(Host, { class: {
+        return (h(Host, { key: 'b17f695d24b5f1a62714e4ed4241ae04d62d71f7', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-loading-indicator-label": !!label,
-                "ic-loading-indicator-full-width": fullWidth,
+                "ic-loading-indicator-full-width": !!fullWidth,
                 "inner-label": !!innerLabel,
-                "ic-loading-indicator-monochrome": monochrome,
-            } }, h("div", { class: "ic-loading-container", part: "ic-loading-container" }, h("div", { ref: (el) => (this.outerElement = el), class: this.calcOuterClass(), role: "progressbar", "aria-labelledby": this.label && this.size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": this.progress, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { ref: (el) => (this.innerElement = el), class: `ic-loading-${this.type}-inner` }, this.innerLabel &&
+                "ic-loading-indicator-monochrome": !!monochrome,
+            } }, h("div", { key: '01b49b1b944995a0311f780d04675b4929c99406', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: '2a3ff1778af28ca4dca52fa48a8a21809be7cc10', ref: (el) => (this.outerElement = el), class: this.calcOuterClass(), role: "progressbar", "aria-labelledby": this.label && this.size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": this.progress, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: '858cf1fe1b405bd3afc005198caba3edee162129', ref: (el) => (this.innerElement = el), class: `ic-loading-${this.type}-inner` }, this.innerLabel &&
             this.innerLabel !== undefined &&
-            this.size === "small" && (h("ic-typography", { variant: "subtitle-small", class: "inner-text" }, this.innerLabel)), this.type === "circular" && (h("svg", { class: "ic-loading-circular-svg", viewBox: `0 0 ${this.circularDiameter || 0} ${this.circularDiameter || 0}` }, h("circle", { cx: `${x}`, cy: `${y}`, r: `${r}` }), h("circle", { cx: `${x}`, cy: `${y}`, r: `${r}` }))))), label && size !== "icon" && (h("ic-typography", { id: "ic-loading-label", class: "ic-loading-label", role: "status", variant: this.getLabelVariant() }, h("p", null, this.indicatorLabel))))));
+            this.size === "small" && (h("ic-typography", { key: '4f64dad9d84fa059f17cc5992c67ae5c49dcad79', variant: "subtitle-small", class: "inner-text" }, this.innerLabel)), this.type === "circular" && (h("svg", { key: '8951796434ce976b8de54fb6d8ef3c83954c9963', class: "ic-loading-circular-svg", viewBox: `0 0 ${this.circularDiameter || 0} ${this.circularDiameter || 0}` }, h("circle", { key: 'ba08f047bd24717b2f0fe63fc997514f65f671ca', cx: `${x}`, cy: `${y}`, r: `${r}` }), h("circle", { key: 'f8220ad9a66c16f27a1e99ec7bce39d959b0b1ae', cx: `${x}`, cy: `${y}`, r: `${r}` }))))), label && size !== "icon" && (h("ic-typography", { key: '16d99f7f3404b3f487018ad5e004ebf78ac455f5', id: "ic-loading-label", class: "ic-loading-label", role: "status", variant: this.getLabelVariant() }, h("p", { key: '18e223aa28d162404989460f7b8e552edec83316' }, this.indicatorLabel))))));
     }
     get el() { return this; }
     static get watchers() { return {
         "label": ["watchPropHandler"],
         "progress": ["watchProgressHandler"]
     }; }
-    static get style() { return icLoadingIndicatorCss; }
+    static get style() { return IcLoadingIndicatorStyle0; }
 }, [1, "ic-loading-indicator", {
         "description": [1],
         "fullWidth": [516, "full-width"],

package/dist/components/ic-loading-indicator2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-loading-indicator2.js","mappings":"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","names":[],"sources":["src/components/ic-loading-indicator/ic-loading-indicator.css?tag=ic-loading-indicator&encapsulation=shadow","src/components/ic-loading-indicator/ic-loading-indicator.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n /*\n @prop --circular-diameter: Diameter of the circular-indicator\n /\n\n display: block;\n\n --linear-border-radius: 0.25rem;\n --inner-color: var(--ic-loading-indicator-inner-color);\n --outer-color: var(--ic-loading-indicator-outer-color);\n --label-color: var(--ic-loading-indicator-label-color);\n --margin: none;\n --linear-line-height: var(--ic-space-xs);\n}\n\n:host(.ic-loading-indicator-monochrome) {\n --inner-color: var(--ic-loading-indicator-inner-color-monochrome);\n --outer-color: var(--ic-loading-indicator-outer-color-monochrome);\n --label-color: var(--ic-loading-indicator-label-color-monochrome);\n}\n\n.ic-loading-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host([size=\"small\"]) {\n --circular-diameter: 2.5rem;\n --linear-line-height: var(--ic-space-xxs);\n}\n\n:host([size=\"medium\"]) {\n --circular-diameter: 5rem;\n}\n\n:host([size=\"large\"]) {\n --circular-diameter: 7.5rem;\n}\n\n:host([size=\"icon\"]) {\n display: inline-block;\n\n --margin: var(--ic-space-xxxs);\n --circular-diameter: 1.25rem;\n}\n\n:host(.ic-loading-indicator-label) {\n --margin: 0 0 var(--ic-space-xs) 0;\n}\n\n.ic-loading-label {\n --ic-typography-color: var(--label-color);\n\n margin-left: var(--label-margin-left);\n}\n\n.ic-loading-circular-outer {\n height: var(--circular-diameter);\n width: var(--circular-diameter);\n}\n\n.ic-loading-circular-outer.indeterminate {\n animation: circular-animation 1s linear;\n animation-iteration-count: infinite;\n}\n\n@keyframes circular-animation {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.ic-loading-circular-outer,\n.ic-loading-linear-outer {\n margin: var(--margin);\n}\n\n.ic-loading-linear-outer {\n background-color: var(--outer-color);\n height: var(--linear-line-height);\n width: 100%;\n border-radius: var(--linear-border-radius);\n overflow: hidden;\n}\n\n.ic-loading-linear-inner {\n position: relative;\n height: 100%;\n background-color: var(--inner-color);\n border-radius: var(--linear-border-radius);\n}\n\n.indeterminate > .ic-loading-linear-inner {\n animation: linear-animation 2s infinite;\n}\n\n.determinate > .ic-loading-linear-inner {\n transition: width 0.5s;\n width: var(--linear-width);\n}\n\n:host(.ic-loading-indicator-full-width) {\n --linear-border-radius: none;\n}\n\n@keyframes linear-animation {\n 0% {\n width: 0%;\n left: -1%;\n }\n\n 25% {\n width: 0%;\n left: -1%;\n }\n\n 50% {\n width: 101%;\n left: -1%;\n }\n\n 75% {\n width: 0%;\n left: 101%;\n }\n\n 100% {\n width: 0%;\n left: 101%;\n }\n}\n\n.ic-loading-circular-svg {\n position: relative;\n width: 100%;\n height: 100%;\n transform: rotate(-90deg);\n}\n\n.ic-loading-circular-svg circle {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: var(--compact-step-outer-color, var(--outer-color));\n stroke-width: var(--circular-line-width);\n stroke-linecap: round;\n}\n\n/ --stroke-dash-array calculated via dashArray method /\n.ic-loading-circular-svg circle:nth-child(2) {\n --circular-indeterminate: calc(\n (0.25 var(--stroke-dasharray)) - var(--stroke-dasharray)\n );\n\n stroke-dasharray: var(--stroke-dasharray), var(--stroke-dasharray);\n stroke-dashoffset: var(--stroke-dashoffset, var(--circular-indeterminate));\n stroke: var(--compact-step-inner-color, var(--inner-color));\n}\n\n:host(.inner-label) .ic-loading-circular-inner {\n height: 100%;\n display: grid;\n}\n\n:host(.inner-label) .ic-loading-circular-svg,\n.inner-text {\n grid-column: 1;\n grid-row: 1;\n}\n\n/ ic-stepper /\n:host(.not-required.compact-step-progress-indicator)\n .ic-loading-circular-svg\n circle:nth-child(2) {\n stroke: var(--ic-architectural-300);\n}\n\n.inner-text {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--ic-space-lg);\n height: inherit;\n overflow: hidden;\n margin: auto;\n\n --ic-typography-color: var(\n --ic-step-indicator-text-current,\n var(--ic-status-info-default)\n );\n}\n\n:host(.not-required.compact-step-progress-indicator) .inner-text {\n --ic-typography-color: var(--ic-step-indicator-text-disabled);\n}\n\n:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator)\n .inner-text {\n --ic-typography-color: var(--ic-architectural-400);\n}\n\n/ High Contrast /\n@media (forced-colors: active) {\n .indeterminate > .ic-loading-circular-inner {\n forced-color-adjust: none;\n }\n\n .ic-loading-linear-outer {\n border: var(--ic-border-hc);\n }\n\n .ic-loading-linear-inner {\n background-color: canvastext;\n }\n\n .ic-loading-circular-svg circle {\n stroke: Background;\n }\n\n .ic-loading-circular-svg circle:nth-child(2) {\n stroke: canvastext;\n }\n\n :host(.not-required.compact-step-progress-indicator)\n .ic-loading-circular-svg\n circle:nth-child(2) {\n stroke: GrayText;\n }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport {\n IcLoadingCircleXYR,\n IcLoadingSizes,\n IcLoadingTypes,\n} from \"./ic-loading-indicator.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-loading-indicator\",\n styleUrl: \"ic-loading-indicator.css\",\n shadow: true,\n})\nexport class LoadingIndicator {\n private circularMeter: SVGCircleElement;\n private innerElement?: HTMLDivElement;\n private interval: ReturnType<typeof setInterval>;\n private labelList: string[];\n private outerElement?: HTMLDivElement;\n\n @Element() el: HTMLIcLoadingIndicatorElement;\n\n @State() circularDiameter: number;\n @State() circularLineWidth: number;\n @State() indeterminate: boolean;\n @State() indicatorLabel: string;\n @State() clipInnerElement: boolean = false;\n\n /*\n The description that will be set as the aria-label of the loading indicator when not using a visible label.\n /\n @Prop() description?: string = \"Loading\";\n\n /\n If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.\n /\n @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n /\n @internal The step number of a compact step, managed by ic-step.\n /\n @Prop() innerLabel?: number;\n\n /\n The time in milliseconds before the label changes.\n /\n @Prop() labelDuration?: number = 8000;\n\n /\n The maximum value that the progress value can take.\n * Used to calculate the proportional width of the progress bar.\n /\n @Prop() max?: number = 100;\n\n /\n The minimum value that the progress value can take.\n * Used to calculate the proportional width of the progress bar.\n /\n @Prop() min?: number = 0;\n\n /\n If `true`, the element will display as black and white.\n /\n @Prop() monochrome?: boolean = false;\n\n /\n The size of the loading indicator.\n /\n @Prop({ reflect: true }) size?: IcLoadingSizes = \"medium\";\n\n /\n The type of indicator, either linear or circular.\n /\n @Prop({ reflect: true }) type?: IcLoadingTypes = \"circular\";\n\n /\n The label to be displayed beneath the loading indicator.\n * Display a changing label by supplying an array of messages.\n /\n @Prop() label?: string \| string[];\n\n @Watch(\"label\")\n watchPropHandler(): void {\n this.updateLabel();\n }\n\n /\n The current amount of progress made.\n * If not provided, component acts as an indeterminate loading indicator.\n /\n @Prop() progress?: number;\n\n @Watch(\"progress\")\n watchProgressHandler(): void {\n if (this.type === \"circular\") {\n this.updateCircularProgressMeter();\n }\n }\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n disconnectedCallback(): void {\n clearInterval(this.interval);\n }\n\n componentWillLoad(): void {\n this.indeterminate = this.progress === undefined;\n this.updateLabel();\n this.el.setAttribute(\"exportparts\", \"ic-loading-container\");\n }\n\n componentDidLoad(): void {\n if (this.type === \"circular\") {\n this.setCircleLineWidth();\n this.circularMeter = this.el.shadowRoot.querySelector(\n \".ic-loading-circular-svg circle:nth-child(2)\"\n );\n this.updateCircularProgressMeter();\n }\n\n if (Number(this.progress) >= 0 && this.type === \"linear\") {\n this.setLinearDeterminateWidth();\n }\n }\n\n componentWillUpdate(): void {\n this.indeterminate = this.progress === undefined;\n }\n\n componentDidUpdate(): void {\n if (Number(this.progress) >= 0 && this.type === \"linear\") {\n this.setLinearDeterminateWidth();\n }\n }\n\n private updateCircularProgressMeter = () => {\n if (!this.indeterminate) {\n this.circularMeter.style.setProperty(\n \"--progress-value\",\n String(this.progress)\n );\n }\n };\n\n private getLabel = (\n labelIndex: number,\n setLabel: (label: string) => void\n ) => {\n return new Promise(() => {\n this.interval = setInterval(() => {\n if (labelIndex < this.labelList.length - 1) {\n labelIndex++;\n } else {\n labelIndex = 0;\n }\n setLabel(this.labelList[labelIndex]);\n }, this.labelDuration);\n });\n };\n\n private getLabelVariant = () => {\n let variant: \"label\" \| \"h4\" \| \"h2\" = \"h4\";\n const width = this.outerElement?.offsetWidth;\n if (this.size === \"small\" \|\| (this.type === \"circular\" && width < 60)) {\n variant = \"label\";\n } else if (\n this.size === \"large\" \|\|\n (this.type === \"circular\" && width >= 120)\n ) {\n variant = \"h2\";\n }\n return variant;\n };\n\n // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n private setCircleLineWidth = () => {\n const { offsetWidth: width } = this.outerElement;\n\n const compactStepCircularLineWidth = this.el.classList.contains(\n \"compact-step-progress-indicator\"\n )\n ? 40\n : 0;\n const toastDismissTimerCircularLineWidth = this.el.classList.contains(\n \"toast-dismiss-timer\"\n )\n ? 20\n : 0;\n\n if (\n width \|\|\n compactStepCircularLineWidth \|\|\n toastDismissTimerCircularLineWidth\n ) {\n this.circularLineWidth =\n (compactStepCircularLineWidth \|\|\n toastDismissTimerCircularLineWidth \|\|\n width) 0.1;\n this.circularDiameter =\n compactStepCircularLineWidth \|\|\n toastDismissTimerCircularLineWidth \|\|\n width;\n this.outerElement.style.setProperty(\n \"--circular-line-width\",\n `${this.circularLineWidth}px`\n );\n }\n };\n\n private setLinearDeterminateWidth = () => {\n if (!this.innerElement) return;\n // Ensure progress cannot be out of bounds\n\n const progress = Math.min(this.max, Math.max(this.min, this.progress));\n const proportion = (progress - this.min) / (this.max - this.min);\n this.clipInnerElement = proportion > 0.5;\n if (this.clipInnerElement) {\n this.innerElement.classList.remove(\"clip\");\n } else {\n this.innerElement.classList.add(\"clip\");\n }\n this.innerElement.style.setProperty(\n \"--linear-width\",\n `${proportion * 100}%`\n );\n };\n\n private calcOuterClass = (): string => {\n let cls = `ic-loading-${this.type}-outer`;\n cls += this.indeterminate ? \" indeterminate\" : \" determinate\";\n return cls;\n };\n\n private updateLabel = (): void => {\n if (this.label !== undefined) {\n if (typeof this.label === \"string\") {\n this.indicatorLabel = this.label;\n } else {\n this.labelList = this.label;\n const labelIndex = 0;\n this.indicatorLabel = this.labelList[labelIndex];\n if (this.labelList.length > 1) {\n this.getLabel(labelIndex, (label) => {\n this.indicatorLabel = label;\n });\n }\n }\n }\n };\n\n private setCircleXY = (): IcLoadingCircleXYR => {\n if (this.circularDiameter > 0) {\n const r = this.circularDiameter / 2;\n const x = r;\n const y = r;\n const nextRadius = r - this.circularLineWidth / 2;\n this.setDashSteps(nextRadius);\n\n return { x, y, r: nextRadius };\n }\n return { x: 0, y: 0, r: 0 };\n };\n\n private setDashSteps = (radius: number) => {\n const dashArray = 2 * Math.PI * radius;\n const progress = Math.min(Math.max(this.progress, this.min), this.max);\n const proportion = -1 - (progress - this.min) / (this.max - this.min);\n\n this.circularMeter.style.setProperty(\n \"--stroke-dasharray\",\n `${dashArray}px`\n );\n\n if (!this.indeterminate) {\n this.circularMeter.style.setProperty(\n \"--circular-steps-max\",\n String(this.max)\n );\n this.circularMeter.style.setProperty(\n \"--stroke-dashoffset\",\n `${proportion * dashArray}px`\n );\n }\n };\n\n render() {\n const {\n theme,\n label,\n description,\n size,\n fullWidth,\n innerLabel,\n monochrome,\n } = this;\n const { x, y, r } = this.setCircleXY();\n\n return (\n <Host\n class={{\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n \"ic-loading-indicator-label\": !!label,\n \"ic-loading-indicator-full-width\": fullWidth,\n \"inner-label\": !!innerLabel,\n \"ic-loading-indicator-monochrome\": monochrome,\n }}\n >\n <div class=\"ic-loading-container\" part=\"ic-loading-container\">\n <div\n ref={(el) => (this.outerElement = el as HTMLDivElement)}\n class={this.calcOuterClass()}\n role=\"progressbar\"\n aria-labelledby={\n this.label && this.size !== \"icon\" && \"ic-loading-label\"\n }\n aria-label={description}\n aria-valuenow={this.progress}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n >\n <div\n ref={(el) => (this.innerElement = el as HTMLDivElement)}\n class={`ic-loading-${this.type}-inner`}\n >\n {this.innerLabel &&\n this.innerLabel !== undefined &&\n this.size === \"small\" && (\n <ic-typography variant=\"subtitle-small\" class=\"inner-text\">\n {this.innerLabel}\n </ic-typography>\n )}\n {this.type === \"circular\" && (\n <svg\n class=\"ic-loading-circular-svg\"\n viewBox={`0 0 ${this.circularDiameter \|\| 0} ${\n this.circularDiameter \|\| 0\n }`}\n >\n <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n </svg>\n )}\n </div>\n </div>\n {label && size !== \"icon\" && (\n <ic-typography\n id=\"ic-loading-label\"\n class=\"ic-loading-label\"\n role=\"status\"\n variant={this.getLabelVariant()}\n >\n <p>{this.indicatorLabel}</p>\n </ic-typography>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-loading-indicator2.js","mappings":"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","names":[],"sources":["src/components/ic-loading-indicator/ic-loading-indicator.css?tag=ic-loading-indicator&encapsulation=shadow","src/components/ic-loading-indicator/ic-loading-indicator.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n /*\n @prop --circular-diameter: Diameter of the circular-indicator\n /\n\n display: block;\n\n --linear-border-radius: 0.25rem;\n --inner-color: var(--ic-loading-indicator-inner-color);\n --outer-color: var(--ic-loading-indicator-outer-color);\n --label-color: var(--ic-loading-indicator-label-color);\n --margin: none;\n --linear-line-height: var(--ic-space-xs);\n}\n\n:host(.ic-loading-indicator-monochrome) {\n --inner-color: var(--ic-loading-indicator-inner-color-monochrome);\n --outer-color: var(--ic-loading-indicator-outer-color-monochrome);\n --label-color: var(--ic-loading-indicator-label-color-monochrome);\n}\n\n.ic-loading-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host([size=\"small\"]) {\n --circular-diameter: 2.5rem;\n --linear-line-height: var(--ic-space-xxs);\n}\n\n:host([size=\"medium\"]) {\n --circular-diameter: 5rem;\n}\n\n:host([size=\"large\"]) {\n --circular-diameter: 7.5rem;\n}\n\n:host([size=\"icon\"]) {\n display: inline-block;\n\n --margin: var(--ic-space-xxxs);\n --circular-diameter: 1.25rem;\n}\n\n:host(.ic-loading-indicator-label) {\n --margin: 0 0 var(--ic-space-xs) 0;\n}\n\n.ic-loading-label {\n --ic-typography-color: var(--label-color);\n\n margin-left: var(--label-margin-left);\n}\n\n.ic-loading-circular-outer {\n height: var(--circular-diameter);\n width: var(--circular-diameter);\n}\n\n.ic-loading-circular-outer.indeterminate {\n animation: circular-animation 1s linear;\n animation-iteration-count: infinite;\n}\n\n@keyframes circular-animation {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.ic-loading-circular-outer,\n.ic-loading-linear-outer {\n margin: var(--margin);\n}\n\n.ic-loading-linear-outer {\n background-color: var(--outer-color);\n height: var(--linear-line-height);\n width: 100%;\n border-radius: var(--linear-border-radius);\n overflow: hidden;\n}\n\n.ic-loading-linear-inner {\n position: relative;\n height: 100%;\n background-color: var(--inner-color);\n border-radius: var(--linear-border-radius);\n}\n\n.indeterminate > .ic-loading-linear-inner {\n animation: linear-animation 2s infinite;\n}\n\n.determinate > .ic-loading-linear-inner {\n transition: width 0.5s;\n width: var(--linear-width);\n}\n\n:host(.ic-loading-indicator-full-width) {\n --linear-border-radius: none;\n}\n\n@keyframes linear-animation {\n 0% {\n width: 0%;\n left: -1%;\n }\n\n 25% {\n width: 0%;\n left: -1%;\n }\n\n 50% {\n width: 101%;\n left: -1%;\n }\n\n 75% {\n width: 0%;\n left: 101%;\n }\n\n 100% {\n width: 0%;\n left: 101%;\n }\n}\n\n.ic-loading-circular-svg {\n position: relative;\n width: 100%;\n height: 100%;\n transform: rotate(-90deg);\n}\n\n.ic-loading-circular-svg circle {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: var(--compact-step-outer-color, var(--outer-color));\n stroke-width: var(--circular-line-width);\n stroke-linecap: round;\n}\n\n/ --stroke-dash-array calculated via dashArray method /\n.ic-loading-circular-svg circle:nth-child(2) {\n --circular-indeterminate: calc(\n (0.25 var(--stroke-dasharray)) - var(--stroke-dasharray)\n );\n\n stroke-dasharray: var(--stroke-dasharray), var(--stroke-dasharray);\n stroke-dashoffset: var(--stroke-dashoffset, var(--circular-indeterminate));\n stroke: var(--compact-step-inner-color, var(--inner-color));\n}\n\n:host(.inner-label) .ic-loading-circular-inner {\n height: 100%;\n display: grid;\n}\n\n:host(.inner-label) .ic-loading-circular-svg,\n.inner-text {\n grid-column: 1;\n grid-row: 1;\n}\n\n/ ic-stepper /\n:host(.not-required.compact-step-progress-indicator)\n .ic-loading-circular-svg\n circle:nth-child(2) {\n stroke: var(--ic-architectural-300);\n}\n\n.inner-text {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--ic-space-lg);\n height: inherit;\n overflow: hidden;\n margin: auto;\n\n --ic-typography-color: var(\n --ic-step-indicator-text-current,\n var(--ic-status-info-default)\n );\n}\n\n:host(.not-required.compact-step-progress-indicator) .inner-text {\n --ic-typography-color: var(--ic-step-indicator-text-disabled);\n}\n\n:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator)\n .inner-text {\n --ic-typography-color: var(--ic-architectural-400);\n}\n\n/ High Contrast /\n@media (forced-colors: active) {\n .indeterminate > .ic-loading-circular-inner {\n forced-color-adjust: none;\n }\n\n .ic-loading-linear-outer {\n border: var(--ic-border-hc);\n }\n\n .ic-loading-linear-inner {\n background-color: canvastext;\n }\n\n .ic-loading-circular-svg circle {\n stroke: Background;\n }\n\n .ic-loading-circular-svg circle:nth-child(2) {\n stroke: canvastext;\n }\n\n :host(.not-required.compact-step-progress-indicator)\n .ic-loading-circular-svg\n circle:nth-child(2) {\n stroke: GrayText;\n }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport {\n IcLoadingCircleXYR,\n IcLoadingSizes,\n IcLoadingTypes,\n} from \"./ic-loading-indicator.types\";\nimport { IcThemeMode, IcTypographyVariants } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-loading-indicator\",\n styleUrl: \"ic-loading-indicator.css\",\n shadow: true,\n})\nexport class LoadingIndicator {\n private circularMeter?: SVGCircleElement \| null;\n private innerElement?: HTMLDivElement;\n private interval: ReturnType<typeof setInterval>;\n private labelList: string[];\n private outerElement?: HTMLDivElement;\n\n @Element() el: HTMLIcLoadingIndicatorElement;\n\n @State() circularDiameter: number;\n @State() circularLineWidth: number;\n @State() indeterminate: boolean;\n @State() indicatorLabel: string;\n @State() clipInnerElement: boolean = false;\n\n /*\n The description that will be set as the aria-label of the loading indicator when not using a visible label.\n /\n @Prop() description?: string = \"Loading\";\n\n /\n If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.\n /\n @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n /\n @internal The step number of a compact step, managed by ic-step.\n /\n @Prop() innerLabel?: number;\n\n /\n The time in milliseconds before the label changes.\n /\n @Prop() labelDuration?: number = 8000;\n\n /\n The maximum value that the progress value can take.\n * Used to calculate the proportional width of the progress bar.\n /\n @Prop() max?: number = 100;\n\n /\n The minimum value that the progress value can take.\n * Used to calculate the proportional width of the progress bar.\n /\n @Prop() min?: number = 0;\n\n /\n If `true`, the element will display as black and white.\n /\n @Prop() monochrome?: boolean = false;\n\n /\n The size of the loading indicator.\n /\n @Prop({ reflect: true }) size?: IcLoadingSizes = \"medium\";\n\n /\n The type of indicator, either linear or circular.\n /\n @Prop({ reflect: true }) type?: IcLoadingTypes = \"circular\";\n\n /\n The label to be displayed beneath the loading indicator.\n * Display a changing label by supplying an array of messages.\n /\n @Prop() label?: string \| string[];\n\n @Watch(\"label\")\n watchPropHandler(): void {\n this.updateLabel();\n }\n\n /\n The current amount of progress made.\n * If not provided, component acts as an indeterminate loading indicator.\n /\n @Prop() progress?: number;\n\n @Watch(\"progress\")\n watchProgressHandler(): void {\n if (this.type === \"circular\") {\n this.updateCircularProgressMeter();\n }\n }\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n disconnectedCallback(): void {\n clearInterval(this.interval);\n }\n\n componentWillLoad(): void {\n this.indeterminate = this.progress === undefined;\n this.updateLabel();\n this.el.setAttribute(\"exportparts\", \"ic-loading-container\");\n }\n\n componentDidLoad(): void {\n if (this.type === \"circular\") {\n this.setCircleLineWidth();\n this.circularMeter = this.el.shadowRoot?.querySelector(\n \".ic-loading-circular-svg circle:nth-child(2)\"\n );\n this.updateCircularProgressMeter();\n }\n\n if (Number(this.progress) >= 0 && this.type === \"linear\") {\n this.setLinearDeterminateWidth();\n }\n }\n\n componentWillUpdate(): void {\n this.indeterminate = this.progress === undefined;\n }\n\n componentDidUpdate(): void {\n if (Number(this.progress) >= 0 && this.type === \"linear\") {\n this.setLinearDeterminateWidth();\n }\n }\n\n private updateCircularProgressMeter = () => {\n if (!this.indeterminate && this.circularMeter) {\n this.circularMeter.style.setProperty(\n \"--progress-value\",\n String(this.progress)\n );\n }\n };\n\n private getLabel = (\n labelIndex: number,\n setLabel: (label: string) => void\n ) => {\n return new Promise(() => {\n this.interval = setInterval(() => {\n if (labelIndex < this.labelList.length - 1) {\n labelIndex++;\n } else {\n labelIndex = 0;\n }\n setLabel(this.labelList[labelIndex]);\n }, this.labelDuration);\n });\n };\n\n private getLabelVariant = (): IcTypographyVariants => {\n let variant: \"label\" \| \"h4\" \| \"h2\" = \"h4\";\n const width = this.outerElement?.offsetWidth;\n if (\n this.size === \"small\" \|\|\n (width && this.type === \"circular\" && width < 60)\n ) {\n variant = \"label\";\n } else if (\n this.size === \"large\" \|\|\n (width && this.type === \"circular\" && width >= 120)\n ) {\n variant = \"h2\";\n }\n return variant;\n };\n\n // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n private setCircleLineWidth = () => {\n const compactStepCircularLineWidth = this.el.classList.contains(\n \"compact-step-progress-indicator\"\n )\n ? 40\n : 0;\n const toastDismissTimerCircularLineWidth = this.el.classList.contains(\n \"toast-dismiss-timer\"\n )\n ? 20\n : 0;\n\n if (this.outerElement) {\n const { offsetWidth: width } = this.outerElement;\n\n if (\n width \|\|\n compactStepCircularLineWidth \|\|\n toastDismissTimerCircularLineWidth\n ) {\n this.circularLineWidth =\n (compactStepCircularLineWidth \|\|\n toastDismissTimerCircularLineWidth \|\|\n width) 0.1;\n this.circularDiameter =\n compactStepCircularLineWidth \|\|\n toastDismissTimerCircularLineWidth \|\|\n width;\n this.outerElement.style.setProperty(\n \"--circular-line-width\",\n `${this.circularLineWidth}px`\n );\n }\n }\n };\n\n private setLinearDeterminateWidth = () => {\n const max = this.max!;\n const min = this.min!;\n\n if (!this.innerElement) return;\n // Ensure progress cannot be out of bounds\n\n if (this.progress) {\n const progress = Math.min(max, Math.max(min, this.progress));\n const proportion = (progress - min) / (max - min);\n this.clipInnerElement = proportion > 0.5;\n if (this.clipInnerElement) {\n this.innerElement.classList.remove(\"clip\");\n } else {\n this.innerElement.classList.add(\"clip\");\n }\n this.innerElement.style.setProperty(\n \"--linear-width\",\n `${proportion * 100}%`\n );\n }\n };\n\n private calcOuterClass = (): string => {\n let cls = `ic-loading-${this.type}-outer`;\n cls += this.indeterminate ? \" indeterminate\" : \" determinate\";\n return cls;\n };\n\n private updateLabel = (): void => {\n if (this.label !== undefined) {\n if (typeof this.label === \"string\") {\n this.indicatorLabel = this.label;\n } else {\n this.labelList = this.label;\n const labelIndex = 0;\n this.indicatorLabel = this.labelList[labelIndex];\n if (this.labelList.length > 1) {\n this.getLabel(labelIndex, (label) => {\n this.indicatorLabel = label;\n });\n }\n }\n }\n };\n\n private setCircleXY = (): IcLoadingCircleXYR => {\n if (this.circularDiameter > 0) {\n const r = this.circularDiameter / 2;\n const x = r;\n const y = r;\n const nextRadius = r - this.circularLineWidth / 2;\n this.setDashSteps(nextRadius);\n\n return { x, y, r: nextRadius };\n }\n return { x: 0, y: 0, r: 0 };\n };\n\n private setDashSteps = (radius: number) => {\n const dashArray = 2 * Math.PI * radius;\n\n if (this.circularMeter) {\n this.circularMeter.style.setProperty(\n \"--stroke-dasharray\",\n `${dashArray}px`\n );\n\n if (!this.indeterminate && this.progress) {\n const min = this.min!;\n const max = this.max!;\n const progress = Math.min(Math.max(this.progress, min), max);\n const proportion = -1 - (progress - min) / (max - min);\n this.circularMeter.style.setProperty(\n \"--circular-steps-max\",\n String(this.max)\n );\n this.circularMeter.style.setProperty(\n \"--stroke-dashoffset\",\n `${proportion * dashArray}px`\n );\n }\n }\n };\n\n render() {\n const {\n theme,\n label,\n description,\n size,\n fullWidth,\n innerLabel,\n monochrome,\n } = this;\n const { x, y, r } = this.setCircleXY();\n\n return (\n <Host\n class={{\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n \"ic-loading-indicator-label\": !!label,\n \"ic-loading-indicator-full-width\": !!fullWidth,\n \"inner-label\": !!innerLabel,\n \"ic-loading-indicator-monochrome\": !!monochrome,\n }}\n >\n <div class=\"ic-loading-container\" part=\"ic-loading-container\">\n <div\n ref={(el) => (this.outerElement = el as HTMLDivElement)}\n class={this.calcOuterClass()}\n role=\"progressbar\"\n aria-labelledby={\n this.label && this.size !== \"icon\" && \"ic-loading-label\"\n }\n aria-label={description}\n aria-valuenow={this.progress}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n >\n <div\n ref={(el) => (this.innerElement = el as HTMLDivElement)}\n class={`ic-loading-${this.type}-inner`}\n >\n {this.innerLabel &&\n this.innerLabel !== undefined &&\n this.size === \"small\" && (\n <ic-typography variant=\"subtitle-small\" class=\"inner-text\">\n {this.innerLabel}\n </ic-typography>\n )}\n {this.type === \"circular\" && (\n <svg\n class=\"ic-loading-circular-svg\"\n viewBox={`0 0 ${this.circularDiameter \|\| 0} ${\n this.circularDiameter \|\| 0\n }`}\n >\n <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n </svg>\n )}\n </div>\n </div>\n {label && size !== \"icon\" && (\n <ic-typography\n id=\"ic-loading-label\"\n class=\"ic-loading-label\"\n role=\"status\"\n variant={this.getLabelVariant()}\n >\n <p>{this.indicatorLabel}</p>\n </ic-typography>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-menu-group.js CHANGED Viewed

@@ -3,20 +3,20 @@ import { l as isPropDefined } from './helpers.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 const icMenuGroupCss = "/*! 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:flex;flex-direction:column}ic-typography{--ic-typography-color:var(--ic-popover-parent-label);margin:var(--ic-space-xs) var(--ic-space-xs) 0}ul{list-style-type:none;margin:0;padding:0}hr{display:flex;align-self:stretch;border:calc(var(--ic-space-xxxs) / 2) solid var(--ic-popover-border);margin:var(--ic-space-xxs) 0 calc(var(--ic-space-sm) / 4)}";
+const IcMenuGroupStyle0 = icMenuGroupCss;
 const MenuGroup = /*@__PURE__*/ proxyCustomElement(class MenuGroup extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.label = undefined;
     }
     render() {
         const parentMenu = this.el.closest("ic-popover-menu");
-        return (h(Host, { role: "group", "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (h("ic-typography", { variant: "subtitle-small" }, this.label)), h("span", { class: "menu-items-wrapper" }, h("slot", null)), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (h("hr", null))));
+        return (h(Host, { key: '515b72afa3b03f7e0891238195e29d02a8603e3e', role: "group", "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (h("ic-typography", { key: 'dcec254c8a7e969ee2c91bf9a5c3bb614eb10e28', variant: "subtitle-small" }, this.label)), h("span", { key: 'c4fd9ee769cd5bc63e1c103ec52f6dd8f9092209', class: "menu-items-wrapper" }, h("slot", { key: '7207d713599fb19d63672ab9a1480bf832c3350d' })), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (h("hr", { key: 'ba0fa6eab3179ba0983027867e53c5db1bb2509e' }))));
     }
     get el() { return this; }
-    static get style() { return icMenuGroupCss; }
+    static get style() { return IcMenuGroupStyle0; }
 }, [1, "ic-menu-group", {
         "label": [1]
     }]);

package/dist/components/ic-menu-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-menu-group.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,yuFAAyuF;;~~MCQnvF~~,SAAS~~;;;;;;;~~IAOpB,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEtD,QACE,EAAC,IAAI,~~IAAC~~,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,KAAK,KAAK,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,IACjE,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,KACxB,~~qBAAe~~,OAAO,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAiB,CACrE,EACD,~~YAAM~~,KAAK,EAAC,oBAAoB,IAC9B,~~eAAa~~,CACR,EAEN,IAAI,CAAC,EAAE,MAAK,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,CAAC,0BAA0B,CAAC,CAAA,KAChE,~~aAAM~~,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-menu-group/ic-menu-group.css?tag=ic-menu-group&encapsulation=shadow","src/components/ic-menu-group/ic-menu-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: flex;\n flex-direction: column;\n}\n\nic-typography {\n --ic-typography-color: var(--ic-popover-parent-label);\n\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\nul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n}\n\nhr {\n display: flex;\n align-self: stretch;\n border: calc(var(--ic-space-xxxs) / 2) solid var(--ic-popover-border);\n margin: var(--ic-space-xxs) 0 calc(var(--ic-space-sm) / 4);\n}\n","import { Component, Element, Host, h, Prop } from \"@stencil/core\";\nimport { isPropDefined } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-menu-group\",\n styleUrl: \"ic-menu-group.css\",\n shadow: true,\n})\nexport class MenuGroup {\n @Element() el: HTMLIcMenuGroupElement;\n /*\n The label to display as the title of the menu group.\n /\n @Prop() label?: string;\n\n render() {\n const parentMenu = this.el.closest(\"ic-popover-menu\");\n\n return (\n <Host role=\"group\" aria-label={this.label !== null ? this.label : \"\"}>\n {isPropDefined(this.label) && (\n <ic-typography variant=\"subtitle-small\">{this.label}</ic-typography>\n )}\n <span class=\"menu-items-wrapper\">\n <slot></slot>\n </span>\n {/ The line under the menu group is added on all menu groups except in the case that the menu group is the last item in the popover menu */}\n {this.el !== parentMenu?.querySelector(\"ic-menu-group:last-child\") && (\n <hr />\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-menu-group.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,yuFAAyuF,CAAC;AACjwF,0BAAe,cAAc;;MCOhB,SAAS;;;;;;IAOpB,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEtD,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,KAAK,KAAK,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,IACjE,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,KACxB,sEAAe,OAAO,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAiB,CACrE,EACD,6DAAM,KAAK,EAAC,oBAAoB,IAC9B,8DAAa,CACR,EAEN,IAAI,CAAC,EAAE,MAAK,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,CAAC,0BAA0B,CAAC,CAAA,KAChE,4DAAM,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-menu-group/ic-menu-group.css?tag=ic-menu-group&encapsulation=shadow","src/components/ic-menu-group/ic-menu-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: flex;\n flex-direction: column;\n}\n\nic-typography {\n --ic-typography-color: var(--ic-popover-parent-label);\n\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\nul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n}\n\nhr {\n display: flex;\n align-self: stretch;\n border: calc(var(--ic-space-xxxs) / 2) solid var(--ic-popover-border);\n margin: var(--ic-space-xxs) 0 calc(var(--ic-space-sm) / 4);\n}\n","import { Component, Element, Host, h, Prop } from \"@stencil/core\";\nimport { isPropDefined } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-menu-group\",\n styleUrl: \"ic-menu-group.css\",\n shadow: true,\n})\nexport class MenuGroup {\n @Element() el: HTMLIcMenuGroupElement;\n /*\n The label to display as the title of the menu group.\n /\n @Prop() label?: string;\n\n render() {\n const parentMenu = this.el.closest(\"ic-popover-menu\");\n\n return (\n <Host role=\"group\" aria-label={this.label !== null ? this.label : \"\"}>\n {isPropDefined(this.label) && (\n <ic-typography variant=\"subtitle-small\">{this.label}</ic-typography>\n )}\n <span class=\"menu-items-wrapper\">\n <slot></slot>\n </span>\n {/ The line under the menu group is added on all menu groups except in the case that the menu group is the last item in the popover menu */}\n {this.el !== parentMenu?.querySelector(\"ic-menu-group:last-child\") && (\n <hr />\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-menu-item2.js CHANGED Viewed

@@ -7,7 +7,8 @@ import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$2 } from './ic-tooltip2.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
-const icMenuItemCss = "/*! 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}li{list-style:none;padding:0}:host ::part(button){color:var(--ic-popover-menu-item-check);padding:calc(var(--ic-space-xxxs) / 2);display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:0;min-height:2.5rem;height:auto}.focus-border{display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:var(--ic-border-radius);margin:calc(var(--ic-space-xxxs) / 2);padding:var(--ic-space-xxs);border:var(--ic-space-xxxs) dashed transparent;--icon-height:auto}:host(.ic-menu-item-disabled) ::part(button){color:var(--ic-popover-menu-item-check-disabled) !important;--ic-typography-color:var(--ic-popover-menu-item-check-disabled) !important;pointer-events:none}:host(.ic-menu-item-disabled) .menu-item-label,:host(.ic-menu-item-disabled) .shortcut,:host(.ic-menu-item-disabled) .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-disabled) !important}:host([variant=\"destructive\"]) ::part(button){color:var(--ic-popover-menu-destructive-item-icon);--ic-typography-color:var(--ic-popover-menu-destructive-item-label)}:host ::part(button):hover{background-color:var(--ic-popover-background-hover)}:host ::part(button):focus-visible,:host ::part(button):focus{color:var(--ic-popover-menu-item-icon-focused);--ic-typography-color:purple;background-color:var(--ic-popover-background-focus);box-shadow:none}:host(.ic-menu-item-disabled) ::part(button):focus-visible,:host(.ic-menu-item-disabled) ::part(button):focus{color:var(--ic-popover-menu-item-icon-disabled) !important;--ic-typography-color:orange !important}:host([variant=\"destructive\"]) ::part(button):focus-visible,:host([variant=\"destructive\"]) ::part(button):focus{background-color:var(--ic-popover-destructive-background-focus)}ic-button:focus-within .menu-item-label,ic-button:focus-within .shortcut,ic-button:focus-within .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-focused)}:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border{border-color:var(--ic-popover-menu-border)}:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-disabled) !important}:host ::part(button):active{background-color:var(--ic-popover-background-pressed);color:var(--ic-popover-menu-item-label) !important;--ic-typography-color:var(--ic-popover-menu-item-label) !important}:host([variant=\"destructive\"]) ::part(button):active{background-color:var(--ic-popover-background-pressed);color:var(--ic-popover-menu-destructive-item-label) !important;--ic-typography-color:var(\n    --ic-popover-menu-destructive-item-label\n  ) !important}.menu-item-info{display:flex;flex-direction:column;flex:1;align-items:baseline;white-space:pre-line;text-align:left}.menu-labels{display:flex;align-items:baseline;gap:var(--ic-space-xs)}.menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-description)}.shortcut{--ic-typography-color:var(--ic-popover-menu-item-shortcut);display:flex;flex:min-content}:host([variant=\"destructive\"]) .menu-item-label{text-transform:uppercase;font-weight:600;letter-spacing:0.025em}ic-button:active .menu-item-label{--ic-typography-color:var(--ic-popover-menu-item-label)}ic-button:active .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-description)}ic-button:active .shortcut{--ic-typography-color:var(--ic-popover-menu-item-shortcut)}:host([variant=\"destructive\"]) ic-button:active .menu-item-label{--ic-typography-color:var(\n    --ic-popover-menu-destructive-item-label\n  ) !important}.icon,.check-icon,.submenu-icon,.icon ::slotted(svg),.check-icon svg,.submenu-icon svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.check-icon.hide{visibility:hidden}@media (forced-colors: active){:host ::part(button){border:canvas}:host ::part(button):focus-visible{outline:var(--ic-space-xxxs) solid transparent}.focus-border{border-color:canvas}:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border{border-color:GrayText}:host(.ic-menu-item-disabled) .menu-item-info,:host(.ic-menu-item-disabled) .menu-item-label,:host(.ic-menu-item-disabled) .shortcut,:host(.ic-menu-item-disabled) .menu-item-description,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-info,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description{--ic-typography-color:GrayText !important}:host(.ic-menu-item-disabled) ::part(button):focus-visible,:host(.ic-menu-item-disabled) ::part(button):focus{outline-color:GrayText !important}}";
+const icMenuItemCss = "/*! 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}li{list-style:none;padding:0}:host ::part(button){color:var(--ic-popover-menu-item-check);--ic-typography-color:var(--ic-popover-menu-item-check);padding:calc(var(--ic-space-xxxs) / 2);display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:0;min-height:2.5rem;height:auto}.focus-border{display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:var(--ic-border-radius);margin:calc(var(--ic-space-xxxs) / 2);padding:var(--ic-space-xxs);border:var(--ic-space-xxxs) dashed transparent;--icon-height:auto}:host(.ic-menu-item-disabled) ::part(button){color:var(--ic-popover-menu-item-check-disabled) !important;--ic-typography-color:var(--ic-popover-menu-item-check-disabled) !important;pointer-events:none}:host(.ic-menu-item-disabled) .menu-item-label,:host(.ic-menu-item-disabled) .shortcut,:host(.ic-menu-item-disabled) .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-disabled) !important}:host([variant=\"destructive\"]) ::part(button){color:var(--ic-popover-menu-destructive-item-icon);--ic-typography-color:var(--ic-popover-menu-destructive-item-label)}:host ::part(button):hover{background-color:var(--ic-popover-background-hover)}:host ::part(button):focus-visible,:host ::part(button):focus{color:var(--ic-popover-menu-item-icon-focused);--ic-typography-color:purple;background-color:var(--ic-popover-background-focus);box-shadow:none}:host(.ic-menu-item-disabled) ::part(button):focus-visible,:host(.ic-menu-item-disabled) ::part(button):focus{color:var(--ic-popover-menu-item-icon-disabled) !important;--ic-typography-color:orange !important}:host([variant=\"destructive\"]) ::part(button):focus-visible,:host([variant=\"destructive\"]) ::part(button):focus{background-color:var(--ic-popover-destructive-background-focus)}ic-button:focus-within .menu-item-label,ic-button:focus-within .shortcut,ic-button:focus-within .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-focused)}:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border{border-color:var(--ic-popover-menu-border)}:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-disabled) !important}:host ::part(button):active{background-color:var(--ic-popover-background-pressed);color:var(--ic-popover-menu-item-label) !important;--ic-typography-color:var(--ic-popover-menu-item-label) !important}:host([variant=\"destructive\"]) ::part(button):active{background-color:var(--ic-popover-background-pressed);color:var(--ic-popover-menu-destructive-item-label) !important;--ic-typography-color:var(\n    --ic-popover-menu-destructive-item-label\n  ) !important}.menu-item-info{display:flex;flex-direction:column;flex:1;align-items:baseline;white-space:pre-line;text-align:left}.menu-labels{display:flex;align-items:baseline;gap:var(--ic-space-xs)}.menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-description)}.shortcut{--ic-typography-color:var(--ic-popover-menu-item-shortcut);display:flex;flex:min-content}:host([variant=\"destructive\"]) .menu-item-label{text-transform:uppercase;font-weight:600;letter-spacing:0.025em}ic-button:active .menu-item-label{--ic-typography-color:var(--ic-popover-menu-item-label)}ic-button:active .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-description)}ic-button:active .shortcut{--ic-typography-color:var(--ic-popover-menu-item-shortcut)}:host([variant=\"destructive\"]) ic-button:active .menu-item-label{--ic-typography-color:var(\n    --ic-popover-menu-destructive-item-label\n  ) !important}.icon,.check-icon,.submenu-icon,.icon ::slotted(svg),.check-icon svg,.submenu-icon svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.check-icon.hide{visibility:hidden}@media (forced-colors: active){:host ::part(button){border:canvas}:host ::part(button):focus-visible{outline:var(--ic-space-xxxs) solid transparent}.focus-border{border-color:canvas}:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border{border-color:GrayText}:host(.ic-menu-item-disabled) .menu-item-info,:host(.ic-menu-item-disabled) .menu-item-label,:host(.ic-menu-item-disabled) .shortcut,:host(.ic-menu-item-disabled) .menu-item-description,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-info,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description{--ic-typography-color:GrayText !important}:host(.ic-menu-item-disabled) ::part(button):focus-visible,:host(.ic-menu-item-disabled) ::part(button):focus{outline-color:GrayText !important}}";
+const IcMenuItemStyle0 = icMenuItemCss;
 const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLElement {
     constructor() {
@@ -18,6 +19,18 @@ const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLEle
         this.handleMenuItemClick = createEvent(this, "handleMenuItemClick", 7);
         this.icToggleChecked = createEvent(this, "icToggleChecked", 7);
         this.triggerPopoverMenuInstance = createEvent(this, "triggerPopoverMenuInstance", 7);
+        /**
+         * If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.
+         */
+        this.checked = false;
+        /**
+         * If `true`, the menu item will be in disabled state.
+         */
+        this.disabled = false;
+        /**
+         * The variant of the menu item.
+         */
+        this.variant = "default";
         this.handleClick = (e) => {
             if (isPropDefined(this.submenuTriggerFor)) {
                 this.triggerPopoverMenuInstance.emit();
@@ -49,7 +62,8 @@ const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLEle
                 ariaLabel = "Go back to parent menu";
             }
             const parentEl = this.el.parentElement;
-            if (parentEl.tagName === "IC-MENU-GROUP" &&
+            if (parentEl &&
+                parentEl.tagName === "IC-MENU-GROUP" &&
                 parentEl.label) {
                 return `${ariaLabel}, ${parentEl.label} menu group`;
             }
@@ -57,18 +71,6 @@ const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLEle
                 return ariaLabel;
             }
         };
-        this.checked = false;
-        this.description = undefined;
-        this.disabled = false;
-        this.href = undefined;
-        this.hreflang = undefined;
-        this.keyboardShortcutLabel = undefined;
-        this.label = undefined;
-        this.referrerpolicy = undefined;
-        this.rel = undefined;
-        this.submenuTriggerFor = undefined;
-        this.target = undefined;
-        this.variant = "default";
     }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
@@ -94,12 +96,12 @@ const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLEle
             return (h("div", { class: "menu-item-info" }, h("div", { class: "menu-labels" }, h("ic-typography", { class: "menu-item-label" }, this.label), this.keyboardShortcutLabel && (h("ic-typography", { variant: "caption", class: "shortcut" }, this.keyboardShortcutLabel))), this.description && (h("ic-typography", { class: "menu-item-description", variant: "caption" }, this.description))));
         };
         return (h(Host, { class: {
-                ["ic-menu-item-disabled"]: this.disabled,
+                ["ic-menu-item-disabled"]: !!this.disabled,
             } }, h("li", { role: this.variant === "toggle" ? "menuitemcheckbox" : "menuitem", "aria-disabled": `${this.disabled}`, "aria-checked": this.variant === "toggle"
                 ? this.checked
                     ? "true"
                     : "false"
-                : undefined }, h("ic-button", { fullWidth: true, variant: "tertiary", onClick: this.handleClick, href: isPropDefined(this.href), hreflang: isPropDefined(this.hreflang), target: isPropDefined(this.target), rel: isPropDefined(this.rel), referrerpolicy: this.referrerpolicy !== undefined ? this.referrerpolicy : null, "aria-disabled": `${this.disabled}`, "aria-label": this.getMenuItemAriaLabel(), "aria-haspopup": isPropDefined(this.submenuTriggerFor) ||
+                : undefined }, h("ic-button", { fullWidth: true, variant: "tertiary", onClick: this.handleClick, href: isPropDefined(this.href), hreflang: isPropDefined(this.hreflang), target: isPropDefined(this.target), rel: isPropDefined(this.rel), referrerpolicy: this.referrerpolicy, "aria-disabled": `${this.disabled}`, "aria-label": this.getMenuItemAriaLabel(), "aria-haspopup": isPropDefined(this.submenuTriggerFor) ||
                 this.el.classList.contains("ic-popover-submenu-back-button")
                 ? "menu"
                 : false }, h("div", { class: "focus-border" }, isSlotUsed(this.el, "icon") && (h("span", { class: "icon" }, h("slot", { name: "icon" }))), h(MenuItemInformation, null), this.variant === "toggle" && (h("span", { class: {
@@ -112,7 +114,7 @@ const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLEle
     static get watchers() { return {
         "disabled": ["watchDisabledHandler"]
     }; }
-    static get style() { return icMenuItemCss; }
+    static get style() { return IcMenuItemStyle0; }
 }, [17, "ic-menu-item", {
         "checked": [1540],
         "description": [1],

package/dist/components/ic-menu-item2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-menu-item2.js","mappings":"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","names":["Check","Chevron"],"sources":["src/components/ic-menu-item/ic-menu-item.css?tag=ic-menu-item&encapsulation=shadow","src/components/ic-menu-item/ic-menu-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nli {\n list-style: none;\n padding: 0;\n}\n\n:host ::part(button) {\n color: var(--ic-popover-menu-item-check);\n padding: calc(var(--ic-space-xxxs) / 2);\n display: flex;\n align-items: flex-start;\n gap: var(--ic-space-xs);\n border-radius: 0;\n min-height: 2.5rem;\n height: auto;\n}\n\n.focus-border {\n display: flex;\n align-items: flex-start;\n gap: var(--ic-space-xs);\n border-radius: var(--ic-border-radius);\n margin: calc(var(--ic-space-xxxs) / 2);\n padding: var(--ic-space-xxs);\n border: var(--ic-space-xxxs) dashed transparent;\n\n --icon-height: auto;\n}\n\n:host(.ic-menu-item-disabled) ::part(button) {\n color: var(--ic-popover-menu-item-check-disabled) !important;\n\n --ic-typography-color: var(--ic-popover-menu-item-check-disabled) !important;\n\n pointer-events: none;\n}\n\n:host(.ic-menu-item-disabled) .menu-item-label,\n:host(.ic-menu-item-disabled) .shortcut,\n:host(.ic-menu-item-disabled) .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-label-disabled) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button) {\n color: var(--ic-popover-menu-destructive-item-icon);\n\n --ic-typography-color: var(--ic-popover-menu-destructive-item-label);\n}\n\n:host ::part(button):hover {\n background-color: var(--ic-popover-background-hover);\n}\n\n:host ::part(button):focus-visible,\n:host ::part(button):focus {\n color: var(--ic-popover-menu-item-icon-focused);\n\n --ic-typography-color: purple;\n\n background-color: var(--ic-popover-background-focus);\n box-shadow: none;\n}\n\n:host(.ic-menu-item-disabled) ::part(button):focus-visible,\n:host(.ic-menu-item-disabled) ::part(button):focus {\n color: var(--ic-popover-menu-item-icon-disabled) !important;\n\n --ic-typography-color: orange !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):focus-visible,\n:host([variant=\"destructive\"]) ::part(button):focus {\n background-color: var(--ic-popover-destructive-background-focus);\n}\n\nic-button:focus-within .menu-item-label,\nic-button:focus-within .shortcut,\nic-button:focus-within .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-label-focused);\n}\n\n:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border {\n border-color: var(--ic-popover-menu-border);\n}\n\n:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,\n:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,\n:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-label-disabled) !important;\n}\n\n:host ::part(button):active {\n background-color: var(--ic-popover-background-pressed);\n color: var(--ic-popover-menu-item-label) !important;\n\n --ic-typography-color: var(--ic-popover-menu-item-label) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):active {\n background-color: var(--ic-popover-background-pressed);\n color: var(--ic-popover-menu-destructive-item-label) !important;\n\n --ic-typography-color: var(\n --ic-popover-menu-destructive-item-label\n ) !important;\n}\n\n.menu-item-info {\n display: flex;\n flex-direction: column;\n flex: 1;\n align-items: baseline;\n white-space: pre-line;\n text-align: left;\n}\n\n.menu-labels {\n display: flex;\n align-items: baseline;\n gap: var(--ic-space-xs);\n}\n\n.menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-description);\n}\n\n.shortcut {\n --ic-typography-color: var(--ic-popover-menu-item-shortcut);\n\n display: flex;\n flex: min-content;\n}\n\n:host([variant=\"destructive\"]) .menu-item-label {\n text-transform: uppercase;\n font-weight: 600;\n letter-spacing: 0.025em;\n}\n\nic-button:active .menu-item-label {\n --ic-typography-color: var(--ic-popover-menu-item-label);\n}\n\nic-button:active .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-description);\n}\n\nic-button:active .shortcut {\n --ic-typography-color: var(--ic-popover-menu-item-shortcut);\n}\n\n:host([variant=\"destructive\"]) ic-button:active .menu-item-label {\n --ic-typography-color: var(\n --ic-popover-menu-destructive-item-label\n ) !important;\n}\n\n.icon,\n.check-icon,\n.submenu-icon,\n.icon ::slotted(svg),\n.check-icon svg,\n.submenu-icon svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.check-icon.hide {\n visibility: hidden;\n}\n\n/ High Contrast /\n@media (forced-colors: active) {\n :host ::part(button) {\n border: canvas;\n }\n\n :host ::part(button):focus-visible {\n outline: var(--ic-space-xxxs) solid transparent;\n }\n\n .focus-border {\n border-color: canvas;\n }\n\n :host(.ic-menu-item-disabled) ic-button:focus-within .focus-border {\n border-color: GrayText;\n }\n\n :host(.ic-menu-item-disabled) .menu-item-info,\n :host(.ic-menu-item-disabled) .menu-item-label,\n :host(.ic-menu-item-disabled) .shortcut,\n :host(.ic-menu-item-disabled) .menu-item-description,\n :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-info,\n :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,\n :host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,\n :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description {\n --ic-typography-color: GrayText !important;\n }\n\n :host(.ic-menu-item-disabled) ::part(button):focus-visible,\n :host(.ic-menu-item-disabled) ::part(button):focus {\n outline-color: GrayText !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n Watch,\n} from \"@stencil/core\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/*\n @slot icon - Content will be placed to the left of the menu item label.\n /\n\n@Component({\n tag: \"ic-menu-item\",\n styleUrl: \"ic-menu-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class MenuItem {\n @Element() el: HTMLIcMenuItemElement;\n\n /\n If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.\n /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /\n The description displayed in the menu item, below the label.\n /\n @Prop() description?: string;\n\n /\n If `true`, the menu item will be in disabled state.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n The URL that the link points to. This will render the menu item as an \"a\" tag.\n /\n @Prop() href?: string;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n The label describing the keyboard shortcut for a menu item's action.\n /\n @Prop() keyboardShortcutLabel?: string;\n\n /\n The label to display in the menu item.\n /\n @Prop() label!: string;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n /\n @Prop() submenuTriggerFor?: string;\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n\n /\n The variant of the menu item.\n /\n @Prop({ mutable: true, reflect: true }) variant: IcMenuItemVariants =\n \"default\";\n\n /\n @internal Emitted when item loses focus.\n /\n @Event() childBlur: EventEmitter<void>;\n\n /\n @internal Emitted when the user clicks a menu item.\n /\n @Event() handleMenuItemClick: EventEmitter<HTMLIcMenuItemElement>;\n\n /\n Emitted when the user clicks a menu item that is set to the toggle variant.\n /\n @Event() icToggleChecked: EventEmitter<{\n checked: boolean;\n }>;\n\n /\n @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n */\n @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n componentWillLoad(): void {\n // This ensures that trigger menu items are always set to the default variant\n if (isPropDefined(this.submenuTriggerFor) && this.variant !== \"default\") {\n this.variant = \"default\";\n }\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Menu Item\"\n );\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(e: Event): void {\n if (this.disabled) {\n e.stopImmediatePropagation();\n }\n }\n\n private handleClick = (e: Event): void => {\n if (isPropDefined(this.submenuTriggerFor)) {\n this.triggerPopoverMenuInstance.emit();\n } else if (this.variant === \"toggle\") {\n e.preventDefault();\n this.checked = !this.checked;\n this.icToggleChecked.emit({\n checked: this.checked,\n });\n }\n this.handleMenuItemClick.emit(this.el);\n };\n\n private getMenuItemAriaLabel = (): string => {\n let ariaLabel = this.label;\n\n if (isPropDefined(this.description)) {\n ariaLabel = `${ariaLabel}, ${this.description}`;\n }\n\n if (isPropDefined(this.keyboardShortcutLabel)) {\n ariaLabel = `${ariaLabel}, ${this.keyboardShortcutLabel}`;\n }\n\n if (this.variant === \"destructive\") {\n ariaLabel = `${ariaLabel}, destructive`;\n }\n\n if (isPropDefined(this.submenuTriggerFor)) {\n ariaLabel = `${ariaLabel}, triggers submenu`;\n }\n\n if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n ariaLabel = \"Go back to parent menu\";\n }\n const parentEl = this.el.parentElement;\n\n if (\n parentEl.tagName === \"IC-MENU-GROUP\" &&\n (parentEl as HTMLIcMenuGroupElement).label\n ) {\n return `${ariaLabel}, ${\n (parentEl as HTMLIcMenuGroupElement).label\n } menu group`;\n } else {\n return ariaLabel;\n }\n };\n\n render() {\n // A sub-component to layout the menu information correctly in ic-button\n const MenuItemInformation = () => {\n return (\n <div class=\"menu-item-info\">\n <div class=\"menu-labels\">\n <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n {this.keyboardShortcutLabel && (\n <ic-typography variant=\"caption\" class=\"shortcut\">\n {this.keyboardShortcutLabel}\n </ic-typography>\n )}\n </div>\n {this.description && (\n <ic-typography class=\"menu-item-description\" variant=\"caption\">\n {this.description}\n </ic-typography>\n )}\n </div>\n );\n };\n\n return (\n <Host\n class={{\n [\"ic-menu-item-disabled\"]: this.disabled,\n }}\n >\n <li\n role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n aria-disabled={`${this.disabled}`}\n aria-checked={\n this.variant === \"toggle\"\n ? this.checked\n ? \"true\"\n : \"false\"\n : undefined\n }\n >\n <ic-button\n fullWidth\n variant=\"tertiary\"\n onClick={this.handleClick}\n href={isPropDefined(this.href)}\n hreflang={isPropDefined(this.hreflang)}\n target={isPropDefined(this.target)}\n rel={isPropDefined(this.rel)}\n referrerpolicy={\n this.referrerpolicy !== undefined ? this.referrerpolicy : null\n }\n aria-disabled={`${this.disabled}`}\n aria-label={this.getMenuItemAriaLabel()}\n aria-haspopup={\n isPropDefined(this.submenuTriggerFor) \|\|\n this.el.classList.contains(\"ic-popover-submenu-back-button\")\n ? \"menu\"\n : false\n }\n >\n <div class=\"focus-border\">\n {isSlotUsed(this.el, \"icon\") && (\n <span class=\"icon\">\n <slot name=\"icon\"></slot>\n </span>\n )}\n <MenuItemInformation />\n {this.variant === \"toggle\" && (\n <span\n class={{\n [\"check-icon\"]: true,\n [\"hide\"]: !this.checked,\n }}\n aria-hidden=\"true\"\n innerHTML={Check}\n />\n )}\n {isPropDefined(this.submenuTriggerFor) && (\n <span\n class={{ [\"submenu-icon\"]: true }}\n aria-hidden=\"true\"\n innerHTML={Chevron}\n />\n )}\n </div>\n </ic-button>\n </li>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-menu-item2.js","mappings":"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","names":["Check","Chevron"],"sources":["src/components/ic-menu-item/ic-menu-item.css?tag=ic-menu-item&encapsulation=shadow","src/components/ic-menu-item/ic-menu-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nli {\n list-style: none;\n padding: 0;\n}\n\n:host ::part(button) {\n color: var(--ic-popover-menu-item-check);\n --ic-typography-color: var(--ic-popover-menu-item-check);\n padding: calc(var(--ic-space-xxxs) / 2);\n display: flex;\n align-items: flex-start;\n gap: var(--ic-space-xs);\n border-radius: 0;\n min-height: 2.5rem;\n height: auto;\n}\n\n.focus-border {\n display: flex;\n align-items: flex-start;\n gap: var(--ic-space-xs);\n border-radius: var(--ic-border-radius);\n margin: calc(var(--ic-space-xxxs) / 2);\n padding: var(--ic-space-xxs);\n border: var(--ic-space-xxxs) dashed transparent;\n\n --icon-height: auto;\n}\n\n:host(.ic-menu-item-disabled) ::part(button) {\n color: var(--ic-popover-menu-item-check-disabled) !important;\n\n --ic-typography-color: var(--ic-popover-menu-item-check-disabled) !important;\n\n pointer-events: none;\n}\n\n:host(.ic-menu-item-disabled) .menu-item-label,\n:host(.ic-menu-item-disabled) .shortcut,\n:host(.ic-menu-item-disabled) .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-label-disabled) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button) {\n color: var(--ic-popover-menu-destructive-item-icon);\n\n --ic-typography-color: var(--ic-popover-menu-destructive-item-label);\n}\n\n:host ::part(button):hover {\n background-color: var(--ic-popover-background-hover);\n}\n\n:host ::part(button):focus-visible,\n:host ::part(button):focus {\n color: var(--ic-popover-menu-item-icon-focused);\n\n --ic-typography-color: purple;\n\n background-color: var(--ic-popover-background-focus);\n box-shadow: none;\n}\n\n:host(.ic-menu-item-disabled) ::part(button):focus-visible,\n:host(.ic-menu-item-disabled) ::part(button):focus {\n color: var(--ic-popover-menu-item-icon-disabled) !important;\n\n --ic-typography-color: orange !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):focus-visible,\n:host([variant=\"destructive\"]) ::part(button):focus {\n background-color: var(--ic-popover-destructive-background-focus);\n}\n\nic-button:focus-within .menu-item-label,\nic-button:focus-within .shortcut,\nic-button:focus-within .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-label-focused);\n}\n\n:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border {\n border-color: var(--ic-popover-menu-border);\n}\n\n:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,\n:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,\n:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-label-disabled) !important;\n}\n\n:host ::part(button):active {\n background-color: var(--ic-popover-background-pressed);\n color: var(--ic-popover-menu-item-label) !important;\n\n --ic-typography-color: var(--ic-popover-menu-item-label) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):active {\n background-color: var(--ic-popover-background-pressed);\n color: var(--ic-popover-menu-destructive-item-label) !important;\n\n --ic-typography-color: var(\n --ic-popover-menu-destructive-item-label\n ) !important;\n}\n\n.menu-item-info {\n display: flex;\n flex-direction: column;\n flex: 1;\n align-items: baseline;\n white-space: pre-line;\n text-align: left;\n}\n\n.menu-labels {\n display: flex;\n align-items: baseline;\n gap: var(--ic-space-xs);\n}\n\n.menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-description);\n}\n\n.shortcut {\n --ic-typography-color: var(--ic-popover-menu-item-shortcut);\n\n display: flex;\n flex: min-content;\n}\n\n:host([variant=\"destructive\"]) .menu-item-label {\n text-transform: uppercase;\n font-weight: 600;\n letter-spacing: 0.025em;\n}\n\nic-button:active .menu-item-label {\n --ic-typography-color: var(--ic-popover-menu-item-label);\n}\n\nic-button:active .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-description);\n}\n\nic-button:active .shortcut {\n --ic-typography-color: var(--ic-popover-menu-item-shortcut);\n}\n\n:host([variant=\"destructive\"]) ic-button:active .menu-item-label {\n --ic-typography-color: var(\n --ic-popover-menu-destructive-item-label\n ) !important;\n}\n\n.icon,\n.check-icon,\n.submenu-icon,\n.icon ::slotted(svg),\n.check-icon svg,\n.submenu-icon svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.check-icon.hide {\n visibility: hidden;\n}\n\n/ High Contrast /\n@media (forced-colors: active) {\n :host ::part(button) {\n border: canvas;\n }\n\n :host ::part(button):focus-visible {\n outline: var(--ic-space-xxxs) solid transparent;\n }\n\n .focus-border {\n border-color: canvas;\n }\n\n :host(.ic-menu-item-disabled) ic-button:focus-within .focus-border {\n border-color: GrayText;\n }\n\n :host(.ic-menu-item-disabled) .menu-item-info,\n :host(.ic-menu-item-disabled) .menu-item-label,\n :host(.ic-menu-item-disabled) .shortcut,\n :host(.ic-menu-item-disabled) .menu-item-description,\n :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-info,\n :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,\n :host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,\n :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description {\n --ic-typography-color: GrayText !important;\n }\n\n :host(.ic-menu-item-disabled) ::part(button):focus-visible,\n :host(.ic-menu-item-disabled) ::part(button):focus {\n outline-color: GrayText !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n Watch,\n} from \"@stencil/core\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/*\n @slot icon - Content will be placed to the left of the menu item label.\n /\n\n@Component({\n tag: \"ic-menu-item\",\n styleUrl: \"ic-menu-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class MenuItem {\n @Element() el: HTMLIcMenuItemElement;\n\n /\n If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.\n /\n @Prop({ mutable: true, reflect: true }) checked?: boolean = false;\n\n /\n The description displayed in the menu item, below the label.\n /\n @Prop() description?: string;\n\n /\n If `true`, the menu item will be in disabled state.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n The URL that the link points to. This will render the menu item as an \"a\" tag.\n /\n @Prop() href?: string;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n The label describing the keyboard shortcut for a menu item's action.\n /\n @Prop() keyboardShortcutLabel?: string;\n\n /\n The label to display in the menu item.\n /\n @Prop() label!: string;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n /\n @Prop() submenuTriggerFor?: string;\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n\n /\n The variant of the menu item.\n /\n @Prop({ mutable: true, reflect: true }) variant?: IcMenuItemVariants =\n \"default\";\n\n /\n @internal Emitted when item loses focus.\n /\n @Event() childBlur: EventEmitter<void>;\n\n /\n @internal Emitted when the user clicks a menu item.\n /\n @Event() handleMenuItemClick: EventEmitter<HTMLIcMenuItemElement>;\n\n /\n Emitted when the user clicks a menu item that is set to the toggle variant.\n /\n @Event() icToggleChecked: EventEmitter<{\n checked: boolean;\n }>;\n\n /\n @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n */\n @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n componentWillLoad(): void {\n // This ensures that trigger menu items are always set to the default variant\n if (isPropDefined(this.submenuTriggerFor) && this.variant !== \"default\") {\n this.variant = \"default\";\n }\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Menu Item\"\n );\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(e: Event): void {\n if (this.disabled) {\n e.stopImmediatePropagation();\n }\n }\n\n private handleClick = (e: Event): void => {\n if (isPropDefined(this.submenuTriggerFor)) {\n this.triggerPopoverMenuInstance.emit();\n } else if (this.variant === \"toggle\") {\n e.preventDefault();\n this.checked = !this.checked;\n this.icToggleChecked.emit({\n checked: this.checked,\n });\n }\n this.handleMenuItemClick.emit(this.el);\n };\n\n private getMenuItemAriaLabel = (): string => {\n let ariaLabel = this.label;\n\n if (isPropDefined(this.description)) {\n ariaLabel = `${ariaLabel}, ${this.description}`;\n }\n\n if (isPropDefined(this.keyboardShortcutLabel)) {\n ariaLabel = `${ariaLabel}, ${this.keyboardShortcutLabel}`;\n }\n\n if (this.variant === \"destructive\") {\n ariaLabel = `${ariaLabel}, destructive`;\n }\n\n if (isPropDefined(this.submenuTriggerFor)) {\n ariaLabel = `${ariaLabel}, triggers submenu`;\n }\n\n if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n ariaLabel = \"Go back to parent menu\";\n }\n const parentEl = this.el.parentElement;\n\n if (\n parentEl &&\n parentEl.tagName === \"IC-MENU-GROUP\" &&\n (parentEl as HTMLIcMenuGroupElement).label\n ) {\n return `${ariaLabel}, ${\n (parentEl as HTMLIcMenuGroupElement).label\n } menu group`;\n } else {\n return ariaLabel;\n }\n };\n\n render() {\n // A sub-component to layout the menu information correctly in ic-button\n const MenuItemInformation = () => {\n return (\n <div class=\"menu-item-info\">\n <div class=\"menu-labels\">\n <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n {this.keyboardShortcutLabel && (\n <ic-typography variant=\"caption\" class=\"shortcut\">\n {this.keyboardShortcutLabel}\n </ic-typography>\n )}\n </div>\n {this.description && (\n <ic-typography class=\"menu-item-description\" variant=\"caption\">\n {this.description}\n </ic-typography>\n )}\n </div>\n );\n };\n\n return (\n <Host\n class={{\n [\"ic-menu-item-disabled\"]: !!this.disabled,\n }}\n >\n <li\n role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n aria-disabled={`${this.disabled}`}\n aria-checked={\n this.variant === \"toggle\"\n ? this.checked\n ? \"true\"\n : \"false\"\n : undefined\n }\n >\n <ic-button\n fullWidth\n variant=\"tertiary\"\n onClick={this.handleClick}\n href={isPropDefined(this.href)}\n hreflang={isPropDefined(this.hreflang)}\n target={isPropDefined(this.target)}\n rel={isPropDefined(this.rel)}\n referrerpolicy={this.referrerpolicy}\n aria-disabled={`${this.disabled}`}\n aria-label={this.getMenuItemAriaLabel()}\n aria-haspopup={\n isPropDefined(this.submenuTriggerFor) \|\|\n this.el.classList.contains(\"ic-popover-submenu-back-button\")\n ? \"menu\"\n : false\n }\n >\n <div class=\"focus-border\">\n {isSlotUsed(this.el, \"icon\") && (\n <span class=\"icon\">\n <slot name=\"icon\"></slot>\n </span>\n )}\n <MenuItemInformation />\n {this.variant === \"toggle\" && (\n <span\n class={{\n [\"check-icon\"]: true,\n [\"hide\"]: !this.checked,\n }}\n aria-hidden=\"true\"\n innerHTML={Check}\n />\n )}\n {isPropDefined(this.submenuTriggerFor) && (\n <span\n class={{ [\"submenu-icon\"]: true }}\n aria-hidden=\"true\"\n innerHTML={Chevron}\n />\n )}\n </div>\n </ic-button>\n </li>\n </Host>\n );\n }\n}\n"],"version":3}