npm - @ukic/web-components - Versions diffs - 3.0.0 → 3.2.0 - Mend

@ukic/web-components 3.0.0 → 3.2.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 (1143) hide show

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

@@ -1,17 +1,55 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { I as IcThemeForegroundEnum } from './types.js';
-import { e as isPropDefined } from './helpers.js';
 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-action-default);--outer-color:var(--ic-architectural-100);--label-color:var(--ic-color-primary-text);--margin:none;--linear-line-height:var(--ic-space-xs)}:host(.ic-loading-indicator-light){--inner-color:var(--ic-architectural-white);--outer-color:var(--ic-architectural-800);--label-color:var(--ic-architectural-white)}.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=\"default\"]){--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{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{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;color:var(--compact-step-inner-color, var(--ic-status-info))}:host(.not-required.compact-step-progress-indicator) .inner-text{color:var(--ic-color-tertiary-text)}:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator) .inner-text{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-hc-border)}.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 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));
             }
         };
@@ -32,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`;
@@ -85,14 +130,19 @@ const LoadingIndicator = /*@__PURE__*/ proxyCustomElement(class LoadingIndicator
             return cls;
         };
         this.updateLabel = () => {
-            if (isPropDefined(this.label)) {
-                this.labelList = this.label.split("/");
-                const labelIndex = 0;
-                this.indicatorLabel = this.labelList[labelIndex];
-                if (this.labelList.length > 1) {
-                    this.getLabel(labelIndex, (label) => {
-                        this.indicatorLabel = label;
-                    });
+            if (this.label !== undefined) {
+                if (typeof this.label === "string") {
+                    this.indicatorLabel = this.label;
+                }
+                else {
+                    this.labelList = this.label;
+                    const labelIndex = 0;
+                    this.indicatorLabel = this.labelList[labelIndex];
+                    if (this.labelList.length > 1) {
+                        this.getLabel(labelIndex, (label) => {
+                            this.indicatorLabel = label;
+                        });
+                    }
                 }
             }
         };
@@ -109,30 +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.appearance = "dark";
-        this.description = "Loading";
-        this.fullWidth = false;
-        this.innerLabel = undefined;
-        this.labelDuration = 8000;
-        this.max = 100;
-        this.min = 0;
-        this.size = "default";
-        this.type = "circular";
-        this.label = undefined;
-        this.progress = undefined;
     }
     watchPropHandler() {
         this.updateLabel();
@@ -151,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") {
@@ -169,35 +208,37 @@ const LoadingIndicator = /*@__PURE__*/ proxyCustomElement(class LoadingIndicator
         }
     }
     render() {
-        const { appearance, label, description, size, fullWidth, innerLabel } = this;
+        const { theme, label, description, size, fullWidth, innerLabel, monochrome, } = this;
         const { x, y, r } = this.setCircleXY();
-        return (h(Host, { class: {
-                ["ic-loading-indicator-light"]: appearance === IcThemeForegroundEnum.Light,
-                ["ic-loading-indicator-label"]: !!label,
-                ["ic-loading-indicator-full-width"]: fullWidth,
-                ["inner-label"]: !!innerLabel,
-            } }, 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 &&
+        return (h(Host, { key: '27fb3a096e338b3c7fb088c845d46e8897594e25', class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                "ic-loading-indicator-label": !!label,
+                "ic-loading-indicator-full-width": !!fullWidth,
+                "inner-label": !!innerLabel,
+                "ic-loading-indicator-monochrome": !!monochrome,
+            } }, h("div", { key: 'bff98017c103e8c92f21e1b495e63d7883826637', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: '80564769566925591667a47978974ff3b2138c61', 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: '3b491c190d252bcf69024365c4bf4a980b3266ca', 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: '53c57c16988f98039dce47a09077ec5eee3f6246', variant: "subtitle-small", class: "inner-text" }, this.innerLabel)), this.type === "circular" && (h("svg", { key: '74cd96683524d32564d4b9c969c5d361259d1368', class: "ic-loading-circular-svg", viewBox: `0 0 ${this.circularDiameter || 0} ${this.circularDiameter || 0}` }, h("circle", { key: 'b4e4283ab0a67b2e318d188c9387f3b14adb3e11', cx: `${x}`, cy: `${y}`, r: `${r}` }), h("circle", { key: '8c9064a662ebed26f8759b34ccca02d377bb57e5', cx: `${x}`, cy: `${y}`, r: `${r}` }))))), label && size !== "icon" && (h("ic-typography", { key: '347ae35f8ed6dc666c1e4854e324a0a905cc67e0', id: "ic-loading-label", class: "ic-loading-label", role: "status", variant: this.getLabelVariant() }, h("p", { key: 'e0a42f64ad38299380becbdb33bb72ec3428ded3' }, 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", {
-        "appearance": [1],
         "description": [1],
         "fullWidth": [516, "full-width"],
         "innerLabel": [2, "inner-label"],
         "labelDuration": [2, "label-duration"],
         "max": [2],
         "min": [2],
+        "monochrome": [4],
         "size": [513],
         "type": [513],
         "label": [1],
         "progress": [2],
+        "theme": [1],
         "circularDiameter": [32],
         "circularLineWidth": [32],
         "indeterminate": [32],

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-action-default);\n --outer-color: var(--ic-architectural-100);\n --label-color: var(--ic-color-primary-text);\n --margin: none;\n --linear-line-height: var(--ic-space-xs);\n}\n\n:host(.ic-loading-indicator-light) {\n --inner-color: var(--ic-architectural-white);\n --outer-color: var(--ic-architectural-800);\n --label-color: var(--ic-architectural-white);\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=\"default\"]) {\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 color: var(--label-color);\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 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: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 color: var(--compact-step-inner-color, var(--ic-status-info));\n}\n\n:host(.not-required.compact-step-progress-indicator) .inner-text {\n color: var(--ic-color-tertiary-text);\n}\n\n:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator)\n .inner-text {\n 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-hc-border);\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 {\n IcThemeForegroundEnum,\n IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\nimport { isPropDefined } from \"../../utils/helpers\";\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 appearance of the loading indicator, e.g. dark or light.\n /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\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 The size of the loading indicator.\n /\n @Prop({ reflect: true }) size?: IcLoadingSizes = \"default\";\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 separating multiple messages with forward slashes.\n /\n @Prop() label?: 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 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 (isPropDefined(this.label)) {\n this.labelList = this.label.split(\"/\");\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 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 { appearance, label, description, size, fullWidth, innerLabel } =\n this;\n const { x, y, r } = this.setCircleXY();\n\n return (\n <Host\n class={{\n [\"ic-loading-indicator-light\"]:\n appearance === IcThemeForegroundEnum.Light,\n [\"ic-loading-indicator-label\"]: !!label,\n [\"ic-loading-indicator-full-width\"]: fullWidth,\n [\"inner-label\"]: !!innerLabel,\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

@@ -1,22 +1,22 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { e as isPropDefined } from './helpers.js';
+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{color:var(--ic-color-tertiary-text);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-architectural-300);margin:var(--ic-space-xxs) 0 calc(var(--ic-space-sm) / 4)}";
+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, { "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (h("ic-typography", { variant: "subtitle-small" }, this.label)), h("ul", { role: "group" }, 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: '764de2c558acf63dbc1334a023ad7b6a815f98f0', role: "group", "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (h("ic-typography", { key: '9edfa75cb7e68dcb6a4fa25549349cb1e90c0c4e', variant: "subtitle-small" }, this.label)), h("span", { key: 'ed914d09ebe32fccc3f74bc4e1b1cd460fb6f2cd', class: "menu-items-wrapper" }, h("slot", { key: 'aa9dffc7557cde9485c8edfce2689d5e16cedc96' })), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (h("hr", { key: '1d326397dd4eabd07479ee686077be0724fbcfbe' }))));
     }
     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,~~2tFAA2tF~~;;~~MCQruF~~,SAAS~~;;;;;;;~~IAOpB,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEtD,QACE,EAAC,IAAI,~~kBAAa~~,IAAI,CAAC,KAAK,KAAK,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,~~IACpD~~,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,KACxB,~~qBAAe~~,OAAO,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAiB,CACrE,EACD,~~UAAI~~,~~IAAI~~,EAAC,~~OAAO~~,~~IACd~~,~~eAAa~~,~~CACV~~,~~EAEJ~~,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 color: var(--ic-~~color~~-~~tertiary~~-~~text~~);\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-~~architectural~~-~~300~~);\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 aria-label={this.label !== null ? this.label : \"\"}>\n {isPropDefined(this.label) && (\n <ic-typography variant=\"subtitle-small\">{this.label}</ic-typography>\n )}\n <ul ~~role~~=\"~~group~~\">\n <slot></slot>\n </ul>\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}