@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.1

package/dist/components/button/button.element.js

@@ -0,0 +1,517 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _resetStateTimeout;
+import { nothing, html, css, LitElement } from "lit";
+import { property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../icon/icon.js";
+import "../loader-circle/loader-circle.js";
+import { UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
+import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
+import { PopoverTargetMixin } from "../../internal/mixins/PopoverTargetMixin.js";
+import { iconWrong } from "../icon-registry-essential/svgs/iconWrong.js";
+import { iconCheck } from "../icon-registry-essential/svgs/iconCheck.js";
+import { UUIHorizontalShakeKeyframes, UUIHorizontalShakeAnimationValue } from "../../internal/animations/uui-shake.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _UUIButtonElement = class _UUIButtonElement extends UUIFormControlWithBasicsMixin(
+  LabelMixin("", PopoverTargetMixin(LitElement))
+) {
+  constructor() {
+    super();
+    __privateAdd(this, _resetStateTimeout);
+    this.type = "button";
+    this.disabled = false;
+    this.look = "default";
+    this.color = "default";
+    this.compact = false;
+    this.state = void 0;
+    this.title = "";
+    this.addEventListener("click", this._onHostClick);
+  }
+  getFormElement() {
+    return this._button;
+  }
+  async focus() {
+    await this.updateComplete;
+    this._button.focus();
+  }
+  async blur() {
+    await this.updateComplete;
+    this._button.blur();
+  }
+  async click() {
+    await this.updateComplete;
+    this._button.click();
+  }
+  _onHostClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+    if (this._internals?.form) {
+      switch (this.type) {
+        case "reset":
+          this._internals.form.reset();
+          break;
+        case "button":
+          break;
+        default:
+          this.submit();
+          break;
+      }
+    }
+    this._togglePopover();
+  }
+  // Reset the state after 2sec if it is 'success' or 'failed'.
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("state")) {
+      clearTimeout(__privateGet(this, _resetStateTimeout));
+      if (this.state === "success" || this.state === "failed") {
+        __privateSet(this, _resetStateTimeout, setTimeout(
+          () => this.state = void 0,
+          2e3
+        ));
+      }
+    }
+  }
+  renderState() {
+    let element;
+    switch (this.state) {
+      case "waiting":
+        element = html`<uui-loader-circle id="loader"></uui-loader-circle>`;
+        break;
+      case "success":
+        element = html`<uui-icon
+          name="check"
+          .fallback=${iconCheck.strings[0]}></uui-icon>`;
+        break;
+      case "failed":
+        element = html`<uui-icon
+          name="wrong"
+          .fallback=${iconWrong.strings[0]}></uui-icon>`;
+        break;
+      default:
+        return nothing;
+    }
+    return html`<div id="state">${element}</div>`;
+  }
+  render() {
+    if (this.href) {
+      const rel = this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0);
+      return html`
+        <a
+          id="button"
+          aria-label=${ifDefined(this.label)}
+          title=${ifDefined(this.title === "" ? void 0 : this.title)}
+          href=${ifDefined(this.disabled ? void 0 : this.href)}
+          target=${ifDefined(this.target || void 0)}
+          rel=${ifDefined(rel)}>
+          ${this.renderState()} ${this.renderLabel()}
+          <slot name="extra"></slot>
+        </a>
+      `;
+    }
+    return html`
+      <button
+        id="button"
+        type=${this.type}
+        ?disabled=${this.disabled}
+        aria-label=${ifDefined(this.label)}
+        title=${ifDefined(this.title === "" ? void 0 : this.title)}>
+        ${this.renderState()} ${this.renderLabel()}
+        <slot name="extra"></slot>
+      </button>
+    `;
+  }
+};
+_resetStateTimeout = new WeakMap();
+_UUIButtonElement.styles = [
+  UUIHorizontalShakeKeyframes,
+  css`
+      :host {
+        position: relative;
+        display: inline-flex;
+        margin-left: calc(var(--uui-button-merge-border-left, 0) * -1px);
+        --uui-button-padding-left-factor: 3;
+        --uui-button-padding-right-factor: 3;
+        --uui-button-padding-top-factor: 1;
+        --uui-button-padding-bottom-factor: 1;
+
+        min-height: var(--uui-button-height, var(--uui-size-11));
+        max-height: 100%;
+        cursor: pointer;
+
+        text-align: center;
+        font-size: var(--uui-button-font-size, inherit);
+        font-weight: var(--uui-button-font-weight, 400);
+        transition:
+          background-color 80ms,
+          border-color 80ms,
+          color 80ms;
+      }
+
+      :host([compact]) {
+        --uui-button-padding-left-factor: 1;
+        --uui-button-padding-right-factor: 1;
+        --uui-button-padding-top-factor: 0;
+        --uui-button-padding-bottom-factor: 0;
+      }
+
+      .label {
+        line-height: 1; /** needed to reset 'a > span' */
+        transition: opacity 120ms;
+        display: flex;
+        gap: var(--uui-size-1);
+        align-items: center;
+      }
+
+      :host([state]:not([state=''])) .label {
+        opacity: 0;
+      }
+
+      #state {
+        position: absolute;
+        opacity: 0;
+        animation-name: fadeIn;
+        animation-delay: 40ms;
+        animation-duration: 360ms;
+        animation-fill-mode: forwards;
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+      }
+
+      #button {
+        width: 100%;
+        background-color: transparent;
+        color: inherit;
+        font-size: inherit;
+        border-radius: inherit;
+        font-family: inherit;
+        font-weight: inherit;
+        text-align: inherit;
+        border: none;
+        cursor: inherit;
+
+        display: inline-flex;
+        align-items: center;
+        justify-content: var(--uui-button-content-align, center);
+
+        /* for anchor tag: */
+        text-decoration: none;
+        color: currentColor;
+        line-height: inherit;
+
+        border-width: var(--uui-button-border-width, 1px);
+        border-style: solid;
+        border-radius: var(
+          --uui-button-border-radius,
+          var(--uui-border-radius-3)
+        );
+        cursor: pointer;
+
+        padding: calc(var(--uui-size-2) * var(--uui-button-padding-top-factor))
+          calc(var(--uui-size-2) * var(--uui-button-padding-right-factor))
+          calc(var(--uui-size-2) * var(--uui-button-padding-bottom-factor))
+          calc(var(--uui-size-2) * var(--uui-button-padding-left-factor));
+
+        box-shadow: none;
+
+        transition: var(--uui-button-transition, none);
+      }
+
+      #button:focus-visible {
+        outline: 2px solid
+          var(
+            --uui-focus-outline-color,
+            var(--color-emphasis, var(--uui-color-focus))
+          );
+      }
+
+      button[disabled]:active,
+      a:not([href]):active {
+        animation: ${UUIHorizontalShakeAnimationValue};
+      }
+
+      /* ANIMATIONS */
+      @keyframes fadeIn {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+
+      @keyframes fadeOut {
+        0% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+
+      #icon-check,
+      #icon-wrong {
+        display: grid;
+        place-items: center;
+        width: 1.5em;
+      }
+
+      #loader {
+        font-size: 1.5em;
+      }
+      :host([look]:not([look=''])) #loader {
+        color: inherit;
+      }
+
+      /* edge case for default color */
+      :host(:not([color]):not([look='primary'])),
+      :host([color='']:not([look='primary'])),
+      :host([color='default']:not([look='primary'])) {
+        --uui-button-contrast-hover: var(--uui-color-default-emphasis);
+      }
+
+      :host([color='warning'][look='outline']) #button,
+      :host([color='warning'][look='placeholder']) #button {
+        --uui-button-contrast-hover: var(--color-standalone);
+      }
+
+      /** Button color attribute: */
+      #button {
+        --color: var(--uui-color-default);
+        --color-standalone: var(--uui-color-default-standalone);
+        --color-emphasis: var(--uui-color-default-emphasis);
+        --color-contrast: var(--uui-color-default-contrast);
+      }
+      :host([color='positive']) #button {
+        --color: var(--uui-color-positive);
+        --color-standalone: var(--uui-color-positive-standalone);
+        --color-emphasis: var(--uui-color-positive-emphasis);
+        --color-contrast: var(--uui-color-positive-contrast);
+      }
+      :host([color='warning']) #button {
+        --color: var(--uui-color-warning);
+        --color-standalone: var(--uui-color-warning-standalone);
+        --color-emphasis: var(--uui-color-warning-emphasis);
+        --color-contrast: var(--uui-color-warning-contrast);
+      }
+      :host([color='danger']) #button {
+        --color: var(--uui-color-danger);
+        --color-standalone: var(--uui-color-danger-standalone);
+        --color-emphasis: var(--uui-color-danger-emphasis);
+        --color-contrast: var(--uui-color-danger-contrast);
+      }
+      :host([color='invalid']) #button {
+        --color: var(--uui-color-invalid);
+        --color-standalone: var(--uui-color-invalid-standalone);
+        --color-emphasis: var(--uui-color-invalid-emphasis);
+        --color-contrast: var(--uui-color-invalid-contrast);
+      }
+      :host([disabled]) #button {
+        --color: var(--uui-color-disabled);
+        --color-standalone: var(--uui-color-disabled-contrast);
+        --color-emphasis: var(--uui-color-disabled);
+        --color-contrast: var(--uui-color-disabled-contrast);
+
+        cursor: default;
+      }
+
+      /** Button look attribute: */
+      /* DEFAULT */
+      #button {
+        background-color: var(--uui-button-background-color, transparent);
+        color: var(--uui-button-contrast, var(--color-standalone));
+        border-color: var(--uui-button-border-color, transparent);
+      }
+      :host(:not([disabled]):hover) #button {
+        background-color: var(
+          --uui-button-background-color-hover,
+          var(--uui-color-surface-emphasis)
+        );
+        color: var(--uui-button-contrast-hover, var(--color-standalone));
+        border-color: var(--uui-button-border-color-hover, transparent);
+      }
+      :host([disabled]) #button {
+        background-color: var(
+          --uui-button-background-color-disabled,
+          transparent
+        );
+        color: var(--uui-button-contrast-disabled, var(--color-contrast));
+        border-color: var(--uui-button-border-color-disabled, transparent);
+      }
+
+      /* PRIMARY */
+      :host([look='primary']) #button {
+        background-color: var(--uui-button-background-color, var(--color));
+        color: var(--uui-button-contrast, var(--color-contrast));
+        border-color: var(--uui-button-border-color, transparent);
+
+        /* special for primary: */
+        font-weight: var(--uui-button-font-weight, 400);
+      }
+
+      :host([look='primary']:hover) #button {
+        background-color: var(
+          --uui-button-background-color-hover,
+          var(--color-emphasis)
+        );
+        color: var(--uui-button-contrast-hover, var(--color-contrast));
+        border-color: var(--uui-button-border-color-hover, transparent);
+      }
+
+      /* special outline offset tof primary style so you can see the outline */
+      :host([look='primary']) #button:focus-visible {
+        outline-offset: 2px;
+      }
+
+      :host([look='primary'][disabled]) #button {
+        background-color: var(
+          --uui-button-background-color-disabled,
+          var(--color)
+        );
+        color: var(--uui-button-contrast-disabled, var(--color-contrast));
+        border-color: var(--uui-button-border-color-disabled, var(--color));
+      }
+      /* SECONDARY */
+      :host([look='secondary']) #button {
+        background-color: var(
+          --uui-button-background-color,
+          var(--uui-color-surface-alt)
+        );
+        color: var(--uui-button-contrast, var(--color-standalone));
+        border-color: var(--uui-button-border-color, transparent);
+
+        /* special for secondary: */
+        font-weight: var(--uui-button-font-weight, 400);
+      }
+      :host([look='secondary']:hover) #button {
+        background-color: var(
+          --uui-button-background-color-hover,
+          var(--uui-color-surface-emphasis)
+        );
+        color: var(--uui-button-contrast-hover, var(--color-standalone));
+        border-color: var(--uui-button-border-color-hover, transparent);
+      }
+      :host([look='secondary'][disabled]) #button {
+        background-color: var(
+          --uui-button-background-color-disabled,
+          var(--color)
+        );
+        color: var(--uui-button-contrast-disabled, var(--color-contrast));
+        border-color: var(--uui-button-border-color-disabled, var(--color));
+      }
+
+      /* OUTLINE */
+      :host([look='outline']) #button {
+        background-color: var(--uui-button-background-color, transparent);
+        color: var(--uui-button-contrast, var(--color-standalone));
+        border-color: var(
+          --uui-button-border-color,
+          var(--uui-color-border-standalone)
+        );
+
+        /* special for outline: */
+        font-weight: var(--uui-button-font-weight, 400);
+      }
+      :host([look='outline']:not([disabled]):hover) #button {
+        background-color: var(--uui-button-background-color-hover, transparent);
+        color: var(--uui-button-contrast-hover, var(--color-standalone));
+        border-color: var(--uui-button-border-color-hover);
+      }
+      :host([look='outline'][disabled]) #button {
+        background-color: var(
+          --uui-button-background-color-disabled,
+          transparent
+        );
+        color: var(--uui-button-contrast-disabled, var(--color-standalone));
+        border-color: var(
+          --uui-button-border-color-disabled,
+          var(--color-standalone)
+        );
+      }
+
+      /* PLACEHOLDER */
+      :host([look='placeholder']) #button {
+        border-style: dashed;
+        background-color: var(--uui-button-background-color, transparent);
+        color: var(--uui-button-contrast, var(--color-standalone));
+        border-color: var(
+          --uui-button-border-color,
+          var(--uui-color-border-standalone)
+        );
+      }
+      :host([look='placeholder']:not([disabled]):hover) #button {
+        background-color: var(--uui-button-background-color-hover, transparent);
+        color: var(--uui-button-contrast-hover, var(--color-standalone));
+        border-color: var(--uui-button-border-color-hover);
+      }
+      :host([look='placeholder'][disabled]) #button {
+        background-color: var(
+          --uui-button-background-color-disabled,
+          var(--color)
+        );
+        color: var(--uui-button-contrast-disabled, var(--color-standalone));
+        border-color: var(
+          --uui-button-border-color-disabled,
+          var(--color-standalone)
+        );
+      }
+    `
+];
+let UUIButtonElement = _UUIButtonElement;
+__decorateClass([
+  property({ type: String, reflect: true })
+], UUIButtonElement.prototype, "type");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIButtonElement.prototype, "disabled");
+__decorateClass([
+  property({ reflect: true })
+], UUIButtonElement.prototype, "look");
+__decorateClass([
+  property({ reflect: true })
+], UUIButtonElement.prototype, "color");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIButtonElement.prototype, "compact");
+__decorateClass([
+  property({ type: String, reflect: true })
+], UUIButtonElement.prototype, "state");
+__decorateClass([
+  property({ type: String })
+], UUIButtonElement.prototype, "href");
+__decorateClass([
+  property({ type: String })
+], UUIButtonElement.prototype, "target");
+__decorateClass([
+  property({ type: String })
+], UUIButtonElement.prototype, "rel");
+__decorateClass([
+  property({ type: String })
+], UUIButtonElement.prototype, "title");
+__decorateClass([
+  query("#button")
+], UUIButtonElement.prototype, "_button");
+export {
+  UUIButtonElement
+};
+//# sourceMappingURL=button.element.js.map

package/dist/components/button/button.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.element.js","sources":["../../../src/components/button/button.element.ts"],"sourcesContent":["import {\n  UUIHorizontalShakeAnimationValue,\n  UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport {\n  LabelMixin,\n  PopoverTargetMixin,\n  UUIFormControlWithBasicsMixin,\n} from '../../internal/mixins/index.js';\nimport { iconCheck, iconWrong } from '../icon-registry-essential/svgs/index.js';\nimport type {\n  UUIInterfaceColor,\n  UUIInterfaceLook,\n} from '../../internal/types/index.js';\nimport type { TemplateResult } from 'lit';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../icon/icon.js';\nimport '../loader-circle/loader-circle.js';\n\nexport type UUIButtonState = undefined | 'waiting' | 'success' | 'failed';\n\nexport type UUIButtonType = 'submit' | 'button' | 'reset';\n\n/**\n *  @element uui-button\n *  @fires {UUIButtonEvent} click - fires when the element is clicked\n *  @slot - for default content\n *  @slot label - for label content\n *  @slot extra - for extra\n *  @property {string} label - label to be used for aria-label and potentially as visual label for some components\n *  @attribute label - label to be used for aria-label and potentially as visual label for some components\n *  @description - All-around button\n *  @cssprop --uui-button-height - overwrite the button height\n *  @cssprop --uui-button-border-width - overwrite the border width\n *  @cssprop --uui-button-border-radius - overwrite the border radius\n *  @cssprop --uui-button-font-weight - overwrite the font weight\n *  @cssprop --uui-button-font-size - overwrite the font size\n *  @cssprop --uui-button-background-color - overwrite the background color\n *  @cssprop --uui-button-background-color-hover - overwrite the background color for hover state\n *  @cssprop --uui-button-background-color-disabled - overwrite the background color for disabled state\n *  @cssprop --uui-button-border-color - overwrite the border color\n *  @cssprop --uui-button-border-color-hover - overwrite the border color for hover state\n *  @cssprop --uui-button-border-color-disabled - overwrite the border color for disabled state\n *  @cssprop --uui-button-contrast - overwrite the text color\n *  @cssprop --uui-button-contrast-hover - overwrite the text color for hover state\n *  @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state\n *  @cssprop --uui-button-content-align - Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'.\n *  @cssprop --uui-button-transition - Add transition to the button. Default is none.\n *  @cssprop --uui-focus-outline-color - overwrite the focus outline color\n */\nexport class UUIButtonElement extends UUIFormControlWithBasicsMixin(\n  LabelMixin('', PopoverTargetMixin(LitElement)),\n) {\n  /**\n   * Specifies the type of button\n   * @type {\"submit\" | \"button\" | \"reset\"}\n   * @attr\n   * @default \"button\"\n   */\n  @property({ type: String, reflect: true })\n  type: UUIButtonType = 'button';\n\n  /**\n   * Disables the button, changes the looks of it and prevents if from emitting the click event\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  look: UUIInterfaceLook = 'default';\n\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"positive\" | \"warning\" | \"danger\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  color: UUIInterfaceColor = 'default';\n\n  /**\n   * Makes the left and right padding of the button narrower.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  /**\n   * Sets the state of the button. With waiting state a loader will show, the success and fail states display icons. State is automatically reset to the default after 3 seconds.\n   * @type {undefined |'waiting' | 'success' | 'failed'}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String, reflect: true })\n  state: UUIButtonState = undefined;\n\n  /**\n   * Set an href, this will turns the button into a anchor tag.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public href?: string;\n\n  /**\n   * Set an anchor tag target, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * Set the rel attribute for an anchor tag, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public rel?: string;\n\n  /**\n   * Sets the title attribute, which provides a tooltip for both button and anchor elements.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  public title: string = '';\n\n  @query('#button')\n  protected readonly _button!: HTMLInputElement;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this._onHostClick);\n  }\n\n  protected getFormElement(): HTMLElement {\n    return this._button;\n  }\n\n  async focus() {\n    await this.updateComplete;\n    this._button.focus();\n  }\n  async blur() {\n    await this.updateComplete;\n    this._button.blur();\n  }\n  async click() {\n    await this.updateComplete;\n    this._button.click();\n  }\n\n  private _onHostClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopImmediatePropagation();\n      return;\n    }\n\n    if (this._internals?.form) {\n      switch (this.type) {\n        case 'reset':\n          this._internals.form.reset();\n          break;\n        case 'button':\n          break;\n        default:\n          this.submit();\n          break;\n      }\n    }\n\n    this._togglePopover();\n  }\n\n  #resetStateTimeout?: number;\n\n  // Reset the state after 2sec if it is 'success' or 'failed'.\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('state')) {\n      clearTimeout(this.#resetStateTimeout);\n      if (this.state === 'success' || this.state === 'failed') {\n        this.#resetStateTimeout = setTimeout(\n          () => (this.state = undefined),\n          2000,\n        ) as any;\n      }\n    }\n  }\n\n  protected renderState(): TemplateResult | typeof nothing {\n    let element: TemplateResult;\n    switch (this.state) {\n      case 'waiting':\n        element = html`<uui-loader-circle id=\"loader\"></uui-loader-circle>`;\n        break;\n      case 'success':\n        element = html`<uui-icon\n          name=\"check\"\n          .fallback=${iconCheck.strings[0]}></uui-icon>`;\n        break;\n      case 'failed':\n        element = html`<uui-icon\n          name=\"wrong\"\n          .fallback=${iconWrong.strings[0]}></uui-icon>`;\n        break;\n      default:\n        return nothing;\n    }\n\n    return html`<div id=\"state\">${element}</div>`;\n  }\n\n  render() {\n    if (this.href) {\n      const rel =\n        this.rel ||\n        (this.target === '_blank' ? 'noopener noreferrer' : undefined);\n      return html`\n        <a\n          id=\"button\"\n          aria-label=${ifDefined(this.label)}\n          title=${ifDefined(this.title === '' ? undefined : this.title)}\n          href=${ifDefined(this.disabled ? undefined : this.href)}\n          target=${ifDefined(this.target || undefined)}\n          rel=${ifDefined(rel)}>\n          ${this.renderState()} ${this.renderLabel()}\n          <slot name=\"extra\"></slot>\n        </a>\n      `;\n    }\n    return html`\n      <button\n        id=\"button\"\n        type=${this.type}\n        ?disabled=${this.disabled}\n        aria-label=${ifDefined(this.label)}\n        title=${ifDefined(this.title === '' ? undefined : this.title)}>\n        ${this.renderState()} ${this.renderLabel()}\n        <slot name=\"extra\"></slot>\n      </button>\n    `;\n  }\n\n  static override readonly styles = [\n    UUIHorizontalShakeKeyframes,\n    css`\n      :host {\n        position: relative;\n        display: inline-flex;\n        margin-left: calc(var(--uui-button-merge-border-left, 0) * -1px);\n        --uui-button-padding-left-factor: 3;\n        --uui-button-padding-right-factor: 3;\n        --uui-button-padding-top-factor: 1;\n        --uui-button-padding-bottom-factor: 1;\n\n        min-height: var(--uui-button-height, var(--uui-size-11));\n        max-height: 100%;\n        cursor: pointer;\n\n        text-align: center;\n        font-size: var(--uui-button-font-size, inherit);\n        font-weight: var(--uui-button-font-weight, 400);\n        transition:\n          background-color 80ms,\n          border-color 80ms,\n          color 80ms;\n      }\n\n      :host([compact]) {\n        --uui-button-padding-left-factor: 1;\n        --uui-button-padding-right-factor: 1;\n        --uui-button-padding-top-factor: 0;\n        --uui-button-padding-bottom-factor: 0;\n      }\n\n      .label {\n        line-height: 1; /** needed to reset 'a > span' */\n        transition: opacity 120ms;\n        display: flex;\n        gap: var(--uui-size-1);\n        align-items: center;\n      }\n\n      :host([state]:not([state=''])) .label {\n        opacity: 0;\n      }\n\n      #state {\n        position: absolute;\n        opacity: 0;\n        animation-name: fadeIn;\n        animation-delay: 40ms;\n        animation-duration: 360ms;\n        animation-fill-mode: forwards;\n        display: flex;\n        justify-content: center;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n      }\n\n      #button {\n        width: 100%;\n        background-color: transparent;\n        color: inherit;\n        font-size: inherit;\n        border-radius: inherit;\n        font-family: inherit;\n        font-weight: inherit;\n        text-align: inherit;\n        border: none;\n        cursor: inherit;\n\n        display: inline-flex;\n        align-items: center;\n        justify-content: var(--uui-button-content-align, center);\n\n        /* for anchor tag: */\n        text-decoration: none;\n        color: currentColor;\n        line-height: inherit;\n\n        border-width: var(--uui-button-border-width, 1px);\n        border-style: solid;\n        border-radius: var(\n          --uui-button-border-radius,\n          var(--uui-border-radius-3)\n        );\n        cursor: pointer;\n\n        padding: calc(var(--uui-size-2) * var(--uui-button-padding-top-factor))\n          calc(var(--uui-size-2) * var(--uui-button-padding-right-factor))\n          calc(var(--uui-size-2) * var(--uui-button-padding-bottom-factor))\n          calc(var(--uui-size-2) * var(--uui-button-padding-left-factor));\n\n        box-shadow: none;\n\n        transition: var(--uui-button-transition, none);\n      }\n\n      #button:focus-visible {\n        outline: 2px solid\n          var(\n            --uui-focus-outline-color,\n            var(--color-emphasis, var(--uui-color-focus))\n          );\n      }\n\n      button[disabled]:active,\n      a:not([href]):active {\n        animation: ${UUIHorizontalShakeAnimationValue};\n      }\n\n      /* ANIMATIONS */\n      @keyframes fadeIn {\n        0% {\n          opacity: 0;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n\n      @keyframes fadeOut {\n        0% {\n          opacity: 1;\n        }\n        100% {\n          opacity: 0;\n        }\n      }\n\n      #icon-check,\n      #icon-wrong {\n        display: grid;\n        place-items: center;\n        width: 1.5em;\n      }\n\n      #loader {\n        font-size: 1.5em;\n      }\n      :host([look]:not([look=''])) #loader {\n        color: inherit;\n      }\n\n      /* edge case for default color */\n      :host(:not([color]):not([look='primary'])),\n      :host([color='']:not([look='primary'])),\n      :host([color='default']:not([look='primary'])) {\n        --uui-button-contrast-hover: var(--uui-color-default-emphasis);\n      }\n\n      :host([color='warning'][look='outline']) #button,\n      :host([color='warning'][look='placeholder']) #button {\n        --uui-button-contrast-hover: var(--color-standalone);\n      }\n\n      /** Button color attribute: */\n      #button {\n        --color: var(--uui-color-default);\n        --color-standalone: var(--uui-color-default-standalone);\n        --color-emphasis: var(--uui-color-default-emphasis);\n        --color-contrast: var(--uui-color-default-contrast);\n      }\n      :host([color='positive']) #button {\n        --color: var(--uui-color-positive);\n        --color-standalone: var(--uui-color-positive-standalone);\n        --color-emphasis: var(--uui-color-positive-emphasis);\n        --color-contrast: var(--uui-color-positive-contrast);\n      }\n      :host([color='warning']) #button {\n        --color: var(--uui-color-warning);\n        --color-standalone: var(--uui-color-warning-standalone);\n        --color-emphasis: var(--uui-color-warning-emphasis);\n        --color-contrast: var(--uui-color-warning-contrast);\n      }\n      :host([color='danger']) #button {\n        --color: var(--uui-color-danger);\n        --color-standalone: var(--uui-color-danger-standalone);\n        --color-emphasis: var(--uui-color-danger-emphasis);\n        --color-contrast: var(--uui-color-danger-contrast);\n      }\n      :host([color='invalid']) #button {\n        --color: var(--uui-color-invalid);\n        --color-standalone: var(--uui-color-invalid-standalone);\n        --color-emphasis: var(--uui-color-invalid-emphasis);\n        --color-contrast: var(--uui-color-invalid-contrast);\n      }\n      :host([disabled]) #button {\n        --color: var(--uui-color-disabled);\n        --color-standalone: var(--uui-color-disabled-contrast);\n        --color-emphasis: var(--uui-color-disabled);\n        --color-contrast: var(--uui-color-disabled-contrast);\n\n        cursor: default;\n      }\n\n      /** Button look attribute: */\n      /* DEFAULT */\n      #button {\n        background-color: var(--uui-button-background-color, transparent);\n        color: var(--uui-button-contrast, var(--color-standalone));\n        border-color: var(--uui-button-border-color, transparent);\n      }\n      :host(:not([disabled]):hover) #button {\n        background-color: var(\n          --uui-button-background-color-hover,\n          var(--uui-color-surface-emphasis)\n        );\n        color: var(--uui-button-contrast-hover, var(--color-standalone));\n        border-color: var(--uui-button-border-color-hover, transparent);\n      }\n      :host([disabled]) #button {\n        background-color: var(\n          --uui-button-background-color-disabled,\n          transparent\n        );\n        color: var(--uui-button-contrast-disabled, var(--color-contrast));\n        border-color: var(--uui-button-border-color-disabled, transparent);\n      }\n\n      /* PRIMARY */\n      :host([look='primary']) #button {\n        background-color: var(--uui-button-background-color, var(--color));\n        color: var(--uui-button-contrast, var(--color-contrast));\n        border-color: var(--uui-button-border-color, transparent);\n\n        /* special for primary: */\n        font-weight: var(--uui-button-font-weight, 400);\n      }\n\n      :host([look='primary']:hover) #button {\n        background-color: var(\n          --uui-button-background-color-hover,\n          var(--color-emphasis)\n        );\n        color: var(--uui-button-contrast-hover, var(--color-contrast));\n        border-color: var(--uui-button-border-color-hover, transparent);\n      }\n\n      /* special outline offset tof primary style so you can see the outline */\n      :host([look='primary']) #button:focus-visible {\n        outline-offset: 2px;\n      }\n\n      :host([look='primary'][disabled]) #button {\n        background-color: var(\n          --uui-button-background-color-disabled,\n          var(--color)\n        );\n        color: var(--uui-button-contrast-disabled, var(--color-contrast));\n        border-color: var(--uui-button-border-color-disabled, var(--color));\n      }\n      /* SECONDARY */\n      :host([look='secondary']) #button {\n        background-color: var(\n          --uui-button-background-color,\n          var(--uui-color-surface-alt)\n        );\n        color: var(--uui-button-contrast, var(--color-standalone));\n        border-color: var(--uui-button-border-color, transparent);\n\n        /* special for secondary: */\n        font-weight: var(--uui-button-font-weight, 400);\n      }\n      :host([look='secondary']:hover) #button {\n        background-color: var(\n          --uui-button-background-color-hover,\n          var(--uui-color-surface-emphasis)\n        );\n        color: var(--uui-button-contrast-hover, var(--color-standalone));\n        border-color: var(--uui-button-border-color-hover, transparent);\n      }\n      :host([look='secondary'][disabled]) #button {\n        background-color: var(\n          --uui-button-background-color-disabled,\n          var(--color)\n        );\n        color: var(--uui-button-contrast-disabled, var(--color-contrast));\n        border-color: var(--uui-button-border-color-disabled, var(--color));\n      }\n\n      /* OUTLINE */\n      :host([look='outline']) #button {\n        background-color: var(--uui-button-background-color, transparent);\n        color: var(--uui-button-contrast, var(--color-standalone));\n        border-color: var(\n          --uui-button-border-color,\n          var(--uui-color-border-standalone)\n        );\n\n        /* special for outline: */\n        font-weight: var(--uui-button-font-weight, 400);\n      }\n      :host([look='outline']:not([disabled]):hover) #button {\n        background-color: var(--uui-button-background-color-hover, transparent);\n        color: var(--uui-button-contrast-hover, var(--color-standalone));\n        border-color: var(--uui-button-border-color-hover);\n      }\n      :host([look='outline'][disabled]) #button {\n        background-color: var(\n          --uui-button-background-color-disabled,\n          transparent\n        );\n        color: var(--uui-button-contrast-disabled, var(--color-standalone));\n        border-color: var(\n          --uui-button-border-color-disabled,\n          var(--color-standalone)\n        );\n      }\n\n      /* PLACEHOLDER */\n      :host([look='placeholder']) #button {\n        border-style: dashed;\n        background-color: var(--uui-button-background-color, transparent);\n        color: var(--uui-button-contrast, var(--color-standalone));\n        border-color: var(\n          --uui-button-border-color,\n          var(--uui-color-border-standalone)\n        );\n      }\n      :host([look='placeholder']:not([disabled]):hover) #button {\n        background-color: var(--uui-button-background-color-hover, transparent);\n        color: var(--uui-button-contrast-hover, var(--color-standalone));\n        border-color: var(--uui-button-border-color-hover);\n      }\n      :host([look='placeholder'][disabled]) #button {\n        background-color: var(\n          --uui-button-background-color-disabled,\n          var(--color)\n        );\n        color: var(--uui-button-contrast-disabled, var(--color-standalone));\n        border-color: var(\n          --uui-button-border-color-disabled,\n          var(--color-standalone)\n        );\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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AAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAyGiB,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA9T9C,IAAM,mBAAN;AAUL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAT9B,iBAUX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAlB/B,iBAmBX,WAAA,UAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GA3BhB,iBA4BX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GApChB,iBAqCX,WAAA,OAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA7C/B,iBA8CX,WAAA,SAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAtD9B,iBAuDX,WAAA,OAAA;AASO,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/Df,iBAgEJ,WAAA,MAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxEf,iBAyEJ,WAAA,QAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjFf,iBAkFJ,WAAA,KAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1Ff,iBA2FJ,WAAA,OAAA;AAGY,gBAAA;AAAA,EADlB,MAAM,SAAS;AAAA,GA7FL,iBA8FQ,WAAA,SAAA;"}

package/dist/components/button/button.js

@@ -0,0 +1,8 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIButtonElement } from "./button.element.js";
+defineElement("uui-button", UUIButtonElement);
+export {
+  UUIButtonElement,
+  UUIButtonElement as default
+};
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../src/components/button/button.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIButtonElement } from './button.element.js';\n\ndefineElement('uui-button', UUIButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-button': UUIButtonElement;\n  }\n}\n\nexport * from './button.element.js';\nexport { UUIButtonElement as default } from './button.element.js';\n"],"names":[],"mappings":";;AAGA,cAAc,cAAc,gBAAgB;"}

package/dist/components/button-copy-text/UUICopyTextEvent.d.ts

@@ -0,0 +1,12 @@
+import { UUIEvent } from '../../internal/events/index.js';
+import type { UUIButtonCopyTextElement } from './button-copy-text.element.js';
+export declare class UUICopyTextEvent extends UUIEvent<{
+    text: string;
+}, UUIButtonCopyTextElement> {
+    static readonly COPIED: string;
+    static readonly COPYING: string;
+    /**
+     * The text content that is about to be copied to the clipboard
+     */
+    text: string | null;
+}

package/dist/components/button-copy-text/UUICopyTextEvent.js

@@ -0,0 +1,14 @@
+import { UUIEvent } from "../../internal/events/UUIEvent.js";
+const _UUICopyTextEvent = class _UUICopyTextEvent extends UUIEvent {
+  constructor() {
+    super(...arguments);
+    this.text = null;
+  }
+};
+_UUICopyTextEvent.COPIED = "copied";
+_UUICopyTextEvent.COPYING = "copying";
+let UUICopyTextEvent = _UUICopyTextEvent;
+export {
+  UUICopyTextEvent
+};
+//# sourceMappingURL=UUICopyTextEvent.js.map

package/dist/components/button-copy-text/UUICopyTextEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUICopyTextEvent.js","sources":["../../../src/components/button-copy-text/UUICopyTextEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIButtonCopyTextElement } from './button-copy-text.element.js';\n\nexport class UUICopyTextEvent extends UUIEvent<\n  { text: string },\n  UUIButtonCopyTextElement\n> {\n  public static readonly COPIED: string = 'copied';\n  public static readonly COPYING: string = 'copying';\n\n  /**\n   * The text content that is about to be copied to the clipboard\n   */\n  public text: string | null = null;\n}\n"],"names":[],"mappings":";AAGO,MAAM,oBAAN,MAAM,0BAAyB,SAGpC;AAAA,EAHK,cAAA;AAAA,UAAA,GAAA,SAAA;AAUL,SAAO,OAAsB;AAAA,EAAA;AAC/B;AAPE,kBAAuB,SAAiB;AACxC,kBAAuB,UAAkB;AALpC,IAAM,mBAAN;"}

package/dist/components/button-copy-text/button-copy-text.d.ts

@@ -0,0 +1,9 @@
+import { UUIButtonCopyTextElement } from './button-copy-text.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-button-copy-text': UUIButtonCopyTextElement;
+    }
+}
+export * from './button-copy-text.element.js';
+export * from './UUICopyTextEvent.js';
+export { UUIButtonCopyTextElement as default } from './button-copy-text.element.js';

package/dist/components/button-copy-text/button-copy-text.element.d.ts

@@ -0,0 +1,41 @@
+import { UUIButtonElement } from '../button/button.js';
+import '../icon/icon.js';
+/**
+ * @summary A button to trigger text content to be copied to the clipboard
+ * @element uui-button-copy-text
+ * @dependency uui-button
+ * @dependency uui-icon
+ * @fires {UUICopyTextEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard
+ * @fires {UUICopyTextEvent} copied - Fires when the content is copied to the clipboard
+ * @slot - Use to replace the default content of the copy icon
+ */
+export declare class UUIButtonCopyTextElement extends UUIButtonElement {
+    #private;
+    /**
+     * Set a string you wish to copy to the clipboard
+     * @type {string}
+     * @default ''
+     */
+    text: string;
+    /**
+     * Copies the text content from another element by specifying the ID of the element
+     * The ID of the element does not need to start with # like a CSS selector
+     * If this property is set, the value property is ignored
+     * @type {string}
+     * @attr
+     * @default ''
+     * @example copy-from="element-id"
+     */
+    copyFrom: string;
+    /**
+     * The delay in milliseconds before the button returns to its default state after a successful copy
+     * @type {number}
+     * @attr
+     * @default 250
+     */
+    animationStateDelay: number;
+    constructor();
+    disconnectedCallback(): void;
+    protected renderLabel(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}