@ukic/canary-web-components 3.0.0-canary.25 → 3.0.0-canary.27

package/dist/esm/ic-button_3.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement, F as Fragment } from './index-a7a720e7.js';
-import { C as handleHiddenFormButtonClick, v as IC_INHERITED_ARIA, r as removeDisabledFalse, t as inheritAttributes, a1 as renderFileHiddenInput, j as getBrandFromContext, I as IcBrandForegroundEnum, i as isSlotUsed, o as onComponentRequiredPropUndefined } from './helpers-f3928d01.js';
+import { C as handleHiddenFormButtonClick, v as IC_INHERITED_ARIA, r as removeDisabledFalse, t as inheritAttributes, a2 as renderFileHiddenInput, j as getBrandFromContext, I as IcBrandForegroundEnum, i as isSlotUsed, o as onComponentRequiredPropUndefined } from './helpers-1dbd527e.js';
 import { c as createPopper } from './popper-b8cc3f16.js';
 
 const arrowDropdown = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -232,6 +232,10 @@ const Button = class {
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
     }
+    watchVariantHandler(newVariant) {
+        if (newVariant === "icon")
+            this.variant = "icon-tertiary";
+    }
     disconnectedCallback() {
         var _a, _b;
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -264,6 +268,9 @@ const Button = class {
                 }
             }
         }
+        if (this.variant === "icon") {
+            this.variant = "icon-tertiary";
+        }
     }
     componentDidLoad() {
         this.updateTheme();
@@ -362,11 +369,7 @@ const Button = class {
         const buttonId = hasTooltip
             ? `ic-button-with-tooltip-${id || buttonIdNum}`
             : undefined;
-        const describedby = !hasTooltip
-            ? describedById
-            : variant !== "icon" || !ariaLabel
-                ? `ic-tooltip-${buttonId}`
-                : undefined;
+        const describedby = !hasTooltip ? describedById : `ic-tooltip-${buttonId}`;
         const hasLeftIcon = !!this.getSlottedIcon("left");
         const hasRightIcon = !!this.getSlottedIcon("right");
         const ButtonContent = () => this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(TagType, Object.assign({ class: "button", tabindex: 0, "aria-disabled": loading || disabled ? "true" : null, "aria-label": loading ? "Loading" : ariaLabel, "aria-expanded": dropdown && `${dropdownExpanded}` }, buttonAttrs, inheritedAttributes, { onFocus: onFocus, onBlur: onBlur, ref: (el) => (this.buttonEl = el), "aria-describedby": describedby, part: "button" }), loading ? (h("div", { class: "loading-container" }, h("ic-loading-indicator", { type: "linear", monochrome: monochrome, theme: theme }))) : (h(Fragment, null, (hasLeftIcon ||
@@ -376,7 +379,7 @@ const Button = class {
                 variant !== "destructive" && (h("span", { class: dropdownExpanded
                     ? "dropdown-expanded"
                     : "arrow-dropdown", innerHTML: arrowDropdown }))))));
-        return (h(Host, { key: '93677b4fa42904890e9fa3b33297734b895f04a4', class: {
+        return (h(Host, { key: '1f58739b62e290b1b86fa82c9153e04711196367', class: {
                 "ic-button-disabled": disabled && !loading,
                 "ic-button-full-width": fullWidth,
                 "ic-button-loading": loading,
@@ -392,12 +395,13 @@ const Button = class {
                 monochrome,
                 "top-icon": isSlotUsed(this.el, "top-icon"),
                 "with-badge": isSlotUsed(this.el, "badge"),
-            }, onClick: handleClick, onKeyDown: handleKeyDown, "aria-owns": ariaOwnsId, "aria-controls": ariaControlsId, "aria-expanded": dropdown && `${dropdownExpanded}` }, hasTooltip && (h("ic-tooltip", { key: '273a8bb9c3146fc8fb2b177d842f6ac17a0db0fb', id: describedby, label: title || ariaLabel, target: buttonId, placement: tooltipPlacement, fixedPositioning: tooltipFixedPositioning, silent: isIconVariant() && !!ariaLabel }, h(ButtonContent, { key: '092785c68429f1458a74e2f9aa611179ce5d490c' }))), isSlotUsed(this.el, "badge") && h("slot", { key: '002e2fd22a45138708c9a188f87cb37c6c6c386d', name: "badge" }), !hasTooltip && h(ButtonContent, { key: '3d3634e2078b0d52e687cc4068e5e80f6ff8a8a2' }), describedByContent && (h("span", { key: '6e134f3c30402bb3217c284df65d72aca696043c', id: describedby, class: "ic-button-describedby" }, describedByContent))));
+            }, onClick: handleClick, onKeyDown: handleKeyDown, "aria-owns": ariaOwnsId, "aria-controls": ariaControlsId, "aria-expanded": dropdown && `${dropdownExpanded}` }, hasTooltip && (h("ic-tooltip", { key: 'fa067eeedb2f960436c693a0d8978a46eea9cc68', id: describedby, label: title || ariaLabel, target: buttonId, placement: tooltipPlacement, fixedPositioning: tooltipFixedPositioning, silent: isIconVariant() && !!ariaLabel }, h(ButtonContent, { key: 'a3565789687668d376a8c6e6044a0c3b1e864532' }))), isSlotUsed(this.el, "badge") && h("slot", { key: '1bacc47dfc65cce6880600906512a9262b6773cc', name: "badge" }), !hasTooltip && h(ButtonContent, { key: 'd00dc87862ffc939fc5c8341c686dddbc642eb02' }), describedByContent && (h("span", { key: '1d25a9c513d23e6a23e2e1d81ad036d1df47363c', id: describedby, class: "ic-button-describedby" }, describedByContent))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "disabled": ["watchDisabledHandler"]
+        "disabled": ["watchDisabledHandler"],
+        "variant": ["watchVariantHandler"]
     }; }
 };
 Button.style = IcButtonStyle0;
@@ -586,23 +590,23 @@ const LoadingIndicator = class {
     }
     render() {
         const { circularDiameter, circularDimensions: { x, y, r, dashArray, dashOffset }, description, fullWidth, indicatorLabel, innerLabel, label, max, min, monochrome, progress, size, theme, type, } = this;
-        return (h(Host, { key: '413c553dc741429027e834c352171bc538bad4e5', class: {
+        return (h(Host, { key: '8e5015de29e0c003ae813d95e215031276669fed', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-loading-indicator-full-width": fullWidth,
                 "ic-loading-indicator-label": !!label,
                 "ic-loading-indicator-monochrome": monochrome,
-            } }, h("div", { key: '988482262c2ce8269f8e10706f2455ee94fbed4c', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: '93e2878a03795a8e5fd65e85cc586f8de22ec764', ref: (el) => (this.outerElement = el), class: {
+            } }, h("div", { key: 'fdd7384e07827cfc6f32cd7f7fde71807a441e7d', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: 'dd4b7dae54199c8313a6bd9c5a2133b11de29b57', ref: (el) => (this.outerElement = el), class: {
                 [`ic-loading-${type}-outer`]: true,
                 [progress === undefined ? "indeterminate" : "determinate"]: true,
-            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '1d4f9ebc1ee51844d0357c5629a9dc69aac0f16c', ref: (el) => (this.innerElement = el), class: {
+            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: 'ba4e9f7ec6e1cdafdd844bb2e357822cf316128c', ref: (el) => (this.innerElement = el), class: {
                 [`ic-loading-${type}-inner`]: true,
                 "inner-label": !!innerLabel,
-            } }, innerLabel && size === "small" && (h("ic-typography", { key: '85269ef476f8ee423e4a14383445cfa4b0256556', variant: "subtitle-small", class: "inner-text" }, innerLabel)), type === "circular" && (h("svg", { key: 'd3f423cd9659b735184d6657127c8626cc9cf4a3', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: '060c4d530c2e27309fbe6513eb2497ae91bcdb6a', cx: x, cy: y, r: r }), h("circle", { key: 'e4b17ca2492a92fe99561193250bb9fb4a8cf960', style: {
+            } }, innerLabel && size === "small" && (h("ic-typography", { key: '096a8f75dcbdaec7c0d2f71dcd447e08e279a41d', variant: "subtitle-small", class: "inner-text" }, innerLabel)), type === "circular" && (h("svg", { key: 'c048f6de73691df17ec79f75860d177e9c83bcc5', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: '5c52a4f617319167ab495785c736601f9d12bf08', cx: x, cy: y, r: r }), h("circle", { key: '7839b8b36e4306e224639f8a347ccde726aaa09c', style: {
                 "--circular-steps-max": progress ? `${max}` : undefined,
                 "--progress-value": progress !== undefined ? `${progress}` : undefined,
                 "--stroke-dasharray": dashArray,
                 "--stroke-dashoffset": dashOffset,
-            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: '22f1b492ebc832a2ea60ffbefd9790c1f85b2c90', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: 'e513e1965e25987826a872c991faec17c17db505' }, indicatorLabel))))));
+            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: '868967e2a21589616e31a9b761849a69b458a2c1', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: '439329efda39e3ae81e56f494c8cbe5000265aa9' }, indicatorLabel))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -702,8 +706,10 @@ const Tooltip = class {
             }
         };
         this.hide = () => {
-            this.toolTip.removeAttribute("data-show");
-            this.persistTooltip = false;
+            if (this.toolTip !== undefined) {
+                this.toolTip.removeAttribute("data-show");
+                this.persistTooltip = false;
+            }
             if (this.popperInstance !== undefined) {
                 this.popperInstance.destroy();
             }
@@ -829,10 +835,10 @@ const Tooltip = class {
     }
     render() {
         const { label, maxLines, silent, theme } = this;
-        return (h(Host, { key: '87f3bd48a10c5b2a9238773960171629d6661602', class: {
+        return (h(Host, { key: '9e66710981ac51e4fae8ff9e6b8d30eb44870c3b', class: {
                 "ic-tooltip": true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: 'f6469c289d080dcf9159e80f7e0a2a6092aac5f0', ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": `${silent}` }, h("ic-typography", { key: 'ca39cfc710166a4ade00f2d430632af8211f1991', maxLines: maxLines, variant: "caption" }, label), h("div", { key: 'c7c068079a39a3ad1b09af475519e3ad3590d28c', ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), h("slot", { key: 'ca0c7f33a5809e1571e91bc9bf5033dbf5ddb31f' })));
+            } }, h("div", { key: 'f0b962933c6c88872a4cd8661348de663a40ecc4', ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": `${silent}` }, h("ic-typography", { key: '8935a9eaa6be2f05cf71a95b53d9b06e1cf2b080', maxLines: maxLines, variant: "caption" }, label), h("div", { key: 'b433ac73eab9462e32a14710d7f29ee78d515f15', ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), h("slot", { key: 'e9d8e149871c83c45c87d6418b86e7a901e10ae1' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {