npm - @ukic/canary-web-components - Versions diffs - 2.0.0-canary.3 → 2.0.0-canary.5 - Mend

@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.5

Files changed (1354) hide show

package/dist/collection/components/ic-button/ic-button.js DELETED Viewed

@@ -1,769 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s)
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-      t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
-};
-import { Host, h, } from "@stencil/core";
-import { getThemeFromContext, inheritAttributes, isSlotUsed, removeDisabledFalse, } from "../../utils/helpers";
-import { IC_INHERITED_ARIA } from "../../utils/constants";
-import { IcThemeForegroundEnum, } from "../../utils/types";
-let buttonIds = 0;
-/**
- * @slot icon - Deprecated. This slot should not be used anymore. Use left-icon or right-icon slot instead.
- * @slot left-icon - Content will be placed to the left of the button label.
- * @slot right-icon - Content will be placed to the right of the button label.
- */
-export class Button {
-  constructor() {
-    this.buttonIdNum = buttonIds++;
-    this.hasTooltip = false;
-    this.inheritedAttributes = {};
-    this.describedByEl = null;
-    this.describedById = null;
-    this.mutationObserver = null;
-    this.setViewBox = () => {
-      let iconEl;
-      if (this.hasLeftIconSlot()) {
-        iconEl = this.el.querySelector(`[slot="left-icon"]`);
-      }
-      else if (this.hasRightIconSlot()) {
-        iconEl = this.el.querySelector(`[slot="right-icon"]`);
-      }
-      else {
-        iconEl = null;
-      }
-      return iconEl;
-    };
-    this.handleClick = () => {
-      if ((this.el.type === "submit" || this.el.type === "reset") &&
-        !!this.el.closest("FORM")) {
-        this.handleHiddenFormButtonClick(this.el.closest("FORM"));
-      }
-    };
-    this.onFocus = () => {
-      this.icFocus.emit();
-    };
-    this.onBlur = () => {
-      this.icBlur.emit();
-    };
-    this.loadingWidth = () => {
-      if (this.loading) {
-        this.el.style.setProperty("--min-width", `${this.el.getBoundingClientRect().width}px`);
-      }
-    };
-    // triggered when text content of sibling element in light DOM changes
-    this.mutationCallback = () => {
-      this.describedByContent = this.describedByEl.innerText;
-    };
-    this.describedByContent = null;
-    this.appearance = "default";
-    this.disabled = false;
-    this.disableTooltip = false;
-    this.download = false;
-    this.form = undefined;
-    this.formaction = undefined;
-    this.formenctype = undefined;
-    this.formmethod = undefined;
-    this.formnovalidate = undefined;
-    this.formtarget = undefined;
-    this.fullWidth = false;
-    this.href = undefined;
-    this.hreflang = undefined;
-    this.loading = false;
-    this.referrerpolicy = undefined;
-    this.rel = undefined;
-    this.size = "default";
-    this.target = undefined;
-    this.tooltipPlacement = "bottom";
-    this.type = "button";
-    this.variant = "primary";
-  }
-  disconnectedCallback() {
-    if (this.mutationObserver !== null && this.mutationObserver !== undefined) {
-      this.mutationObserver.disconnect();
-    }
-  }
-  componentWillUpdate() {
-    this.loadingWidth();
-  }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.el, [
-      ...IC_INHERITED_ARIA,
-      "aria-expanded",
-      "title",
-    ]);
-    removeDisabledFalse(this.disabled, this.el);
-    this.el.setAttribute("exportparts", "button");
-    const id = this.el.id;
-    this.id = id !== undefined ? id : null;
-    this.hasTooltip = this.variant === "icon" && this.disableTooltip === false;
-    if (!this.hasTooltip) {
-      const describedById = this.inheritedAttributes["aria-describedby"];
-      if (describedById !== undefined) {
-        this.describedById = describedById;
-        const el = this.el.parentElement.querySelector(`#${describedById}`);
-        this.describedByContent = el.innerText;
-        this.describedByEl = el;
-      }
-    }
-  }
-  componentDidLoad() {
-    this.updateTheme();
-    if (this.describedById) {
-      this.mutationObserver = new MutationObserver(this.mutationCallback);
-      this.mutationObserver.observe(this.describedByEl, {
-        characterData: true,
-        childList: true,
-        subtree: true,
-      });
-    }
-  }
-  componentWillRender() {
-    var _a;
-    (_a = this.setViewBox()) === null || _a === void 0 ? void 0 : _a.setAttribute("viewBox", "0 0 24 24");
-  }
-  handleHostClick(event) {
-    if (this.disabled || this.loading) {
-      event.stopImmediatePropagation();
-    }
-  }
-  themeChangeHandler(ev) {
-    const theme = ev.detail;
-    this.updateTheme(theme.mode);
-  }
-  /**
-   * Sets focus on the native `button`.
-   */
-  async setFocus() {
-    if (this.buttonEl) {
-      this.buttonEl.focus();
-    }
-  }
-  /**
-   * @internal Updates tooltip/aria-label text - needed as can't watch an ARIA attribute change.
-   */
-  async updateAriaLabel(newValue) {
-    if (this.hasTooltip) {
-      this.tooltipEl.label = newValue;
-      this.buttonEl.setAttribute("aria-label", null);
-    }
-    else {
-      this.buttonEl.setAttribute("aria-label", newValue);
-    }
-  }
-  hasIconSlot() {
-    const iconEl = this.el.querySelector(`[slot="icon"]`);
-    return iconEl !== null;
-  }
-  hasLeftIconSlot() {
-    const iconEl = this.el.querySelector(`[slot="left-icon"]`);
-    return iconEl !== null;
-  }
-  hasRightIconSlot() {
-    const iconEl = this.el.querySelector(`[slot="right-icon"]`);
-    return iconEl !== null;
-  }
-  handleHiddenFormButtonClick(form) {
-    const hiddenFormButton = document.createElement("button");
-    hiddenFormButton.setAttribute("type", this.el.type);
-    hiddenFormButton.style.display = "none";
-    form.appendChild(hiddenFormButton);
-    hiddenFormButton.click();
-    hiddenFormButton.remove();
-  }
-  updateTheme(newTheme = null) {
-    const foregroundColor = getThemeFromContext(this.el, newTheme || null);
-    if (foregroundColor !== IcThemeForegroundEnum.Default) {
-      this.appearance = foregroundColor;
-    }
-  }
-  render() {
-    const TagType = (this.href && "a") || "button";
-    const _a = this.inheritedAttributes, { title, "aria-label": ariaLabel } = _a, restInheritedAttributes = __rest(_a, ["title", "aria-label"]);
-    const buttonAttrs = TagType === "button"
-      ? {
-        type: this.type,
-        disabled: this.disabled,
-        form: this.form,
-        formaction: this.formaction,
-        formenctype: this.formenctype,
-        formmethod: this.formmethod,
-        formnovalidate: this.formnovalidate,
-        formtarget: this.formtarget,
-      }
-      : {
-        download: this.download !== false ? this.download : null,
-        href: this.href,
-        rel: this.rel,
-        target: this.target,
-        referrerpolicy: this.referrerpolicy,
-        hreflang: this.hreflang,
-      };
-    const newTitle = title && title;
-    const titleAttr = this.hasTooltip ? {} : { title: newTitle };
-    let tooltipText = "";
-    if (this.hasTooltip) {
-      if (newTitle !== undefined) {
-        tooltipText = newTitle;
-      }
-      else if (ariaLabel !== null) {
-        tooltipText = ariaLabel;
-      }
-    }
-    let describedBy = null;
-    let buttonId = null;
-    if (this.hasTooltip) {
-      buttonId =
-        this.id !== null
-          ? `ic-button-with-tooltip-${this.id}`
-          : `ic-button-with-tooltip-${this.buttonIdNum}`;
-      describedBy = `ic-tooltip-${buttonId}`;
-    }
-    else {
-      describedBy = this.describedById;
-    }
-    const ButtonContent = () => {
-      return (h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel }, buttonAttrs, restInheritedAttributes, titleAttr, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), id: buttonId, "aria-describedby": this.hasTooltip && ariaLabel ? null : describedBy, part: "button" }), this.hasIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), this.hasLeftIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "left-icon" }))), this.loading ? (h("div", { class: "loading-container" }, h("ic-loading-indicator", { type: "linear", appearance: this.variant === "primary" ||
-          this.variant === "destructive" ||
-          this.appearance === IcThemeForegroundEnum.Dark ||
-          this.appearance === IcThemeForegroundEnum.Light
-          ? "light"
-          : "dark" }))) : (h("slot", null)), this.hasRightIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "right-icon" })))));
-    };
-    return (h(Host, { class: {
-        ["disabled"]: this.disabled && !this.loading,
-        [`button-variant-${this.variant}`]: true,
-        [`button-size-${this.size}`]: true,
-        ["loading"]: this.loading,
-        ["dark"]: this.appearance === IcThemeForegroundEnum.Dark,
-        ["light"]: this.appearance === IcThemeForegroundEnum.Light,
-        ["full-width"]: this.fullWidth,
-        ["with-badge"]: isSlotUsed(this.el, "badge"),
-      }, onClick: this.handleClick }, this.hasTooltip && (h("ic-tooltip", { class: { ["tooltip-disabled"]: this.disableTooltip }, ref: (el) => (this.tooltipEl = el), label: tooltipText, target: buttonId, placement: this.tooltipPlacement }, h(ButtonContent, null))), !this.hasTooltip && h(ButtonContent, null), this.describedByContent && (h("span", { id: describedBy, class: "ic-button-describedby" }, this.describedByContent))));
-  }
-  static get is() { return "ic-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ic-button.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ic-button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "appearance": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "IcThemeForeground",
-          "resolved": "\"dark\" | \"default\" | \"light\"",
-          "references": {
-            "IcThemeForeground": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::IcThemeForeground"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The appearance of the button, e.g. dark, light, or the default."
-        },
-        "attribute": "appearance",
-        "reflect": false,
-        "defaultValue": "\"default\""
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the button will be in disabled state."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disableTooltip": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied."
-        },
-        "attribute": "disable-tooltip",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "download": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "string | boolean",
-          "resolved": "boolean | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the user can save the linked URL instead of navigating to it."
-        },
-        "attribute": "download",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "form": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The <form> element to associate the button with."
-        },
-        "attribute": "form",
-        "reflect": false
-      },
-      "formaction": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner."
-        },
-        "attribute": "formaction",
-        "reflect": false
-      },
-      "formenctype": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The way the submitted form data is encoded."
-        },
-        "attribute": "formenctype",
-        "reflect": false
-      },
-      "formmethod": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The HTTP method used to submit the form."
-        },
-        "attribute": "formmethod",
-        "reflect": false
-      },
-      "formnovalidate": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the form will not be validated when submitted."
-        },
-        "attribute": "formnovalidate",
-        "reflect": false
-      },
-      "formtarget": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The place to display the response from submitting the form. It overrides the target attribute of the button's form owner."
-        },
-        "attribute": "formtarget",
-        "reflect": false
-      },
-      "fullWidth": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the button will fill the width of the container."
-        },
-        "attribute": "full-width",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The URL that the link points to. This will render the button as an \"a\" tag."
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "hreflang": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The human language of the linked URL."
-        },
-        "attribute": "hreflang",
-        "reflect": false
-      },
-      "loading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the button will be in loading state."
-        },
-        "attribute": "loading",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "referrerpolicy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ReferrerPolicy",
-          "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
-          "references": {
-            "ReferrerPolicy": {
-              "location": "global",
-              "id": "global::ReferrerPolicy"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "How much of the referrer to send when following the link."
-        },
-        "attribute": "referrerpolicy",
-        "reflect": false
-      },
-      "rel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The relationship of the linked URL as space-separated link types."
-        },
-        "attribute": "rel",
-        "reflect": false
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcSizes",
-          "resolved": "\"default\" | \"large\" | \"small\"",
-          "references": {
-            "IcSizes": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::IcSizes"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The size of the button to be displayed."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "\"default\""
-      },
-      "target": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
-        },
-        "attribute": "target",
-        "reflect": false
-      },
-      "tooltipPlacement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcButtonTooltipPlacement",
-          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
-          "references": {
-            "IcButtonTooltipPlacement": {
-              "location": "import",
-              "path": "./ic-button.types",
-              "id": "src/components/ic-button/ic-button.types.ts::IcButtonTooltipPlacement"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The position of the tooltip in relation to the button."
-        },
-        "attribute": "tooltip-placement",
-        "reflect": false,
-        "defaultValue": "\"bottom\""
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcButtonTypes",
-          "resolved": "\"button\" | \"reset\" | \"submit\"",
-          "references": {
-            "IcButtonTypes": {
-              "location": "import",
-              "path": "./ic-button.types",
-              "id": "src/components/ic-button/ic-button.types.ts::IcButtonTypes"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The type of the button."
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "\"button\""
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcButtonVariants",
-          "resolved": "\"destructive\" | \"icon\" | \"primary\" | \"secondary\" | \"tertiary\"",
-          "references": {
-            "IcButtonVariants": {
-              "location": "import",
-              "path": "./ic-button.types",
-              "id": "src/components/ic-button/ic-button.types.ts::IcButtonVariants"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The variant of the button to be displayed."
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "\"primary\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "describedByContent": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "icBlur",
-        "name": "icBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when button has blur"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }, {
-        "method": "icFocus",
-        "name": "icFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when button has focus"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the native `button`.",
-          "tags": []
-        }
-      },
-      "updateAriaLabel": {
-        "complexType": {
-          "signature": "(newValue: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": [{
-              "name": "internal",
-              "text": "Updates tooltip/aria-label text - needed as can't watch an ARIA attribute change."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleHostClick",
-        "target": undefined,
-        "capture": true,
-        "passive": false
-      }, {
-        "name": "themeChange",
-        "method": "themeChangeHandler",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
-//# sourceMappingURL=ic-button.js.map