@pushengineering/umg-web-components 2.0.6 → 3.0.1

package/dist/components/button/button.js

@@ -1,81 +1,86 @@
-import { css as h, LitElement as m, html as r } from "lit";
-import { customElement as g } from "lit/decorators/custom-element.js";
-import { property as n } from "lit/decorators/property.js";
-import { ifDefined as d } from "lit/directives/if-defined.js";
-import { classMap as c } from "lit/directives/class-map.js";
-import { styleMap as p } from "lit/directives/style-map.js";
-import { global as f } from "../../styles/global.js";
-import { buttonState as y } from "../../styles/button.js";
-import { settings as v } from "../../scripts/settings.js";
-import { mergeStyles as x } from "../../scripts/mergeStyles.js";
-var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (o, a, l, s) => {
-  for (var i = s > 1 ? void 0 : s ? _(a, l) : a, u = o.length - 1, b; u >= 0; u--)
-    (b = o[u]) && (i = (s ? b(a, l, i) : b(i)) || i);
-  return s && i && w(a, l, i), i;
-};
-const { prefix: z } = v;
-let t = class extends m {
-  constructor() {
-    super(), this.as = "button", this.type = "button", this.for = void 0, this.clickAction = void 0, this.url = void 0, this.target = "_self", this.size = "medium", this.buttonStyle = "solid", this.textAlign = "center", this.disabled = !1, this.fullWidth = !1, this.extendInteraction = !1, this.extendInteractionHidden = !1, this.loading = !1, this._extendedInteraction();
-  }
-  async _extendedInteraction() {
-    await this.updateComplete, !this.disabled && this.as === "link" && this.url !== void 0 && this.extendInteraction && this.dispatchEvent(new CustomEvent("extend-interaction", {
-      detail: {
-        url: this.url,
-        target: this.target
-      },
-      bubbles: !0,
-      composed: !0
-    }));
-  }
-  handleClick() {
-    if (!this.disabled && this.clickAction) {
-      const o = new CustomEvent(this.clickAction, {
-        bubbles: !0,
-        composed: !0
-      });
-      this.dispatchEvent(o);
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.16.1_tslib@2.6.2_typescript@5.4.5/node_modules/tslib/tslib.es6.js';
+import { LitElement, css, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { global } from '../../styles/global.js';
+import { buttonState } from '../../styles/button.js';
+import { buttonMain } from './styles/button-main.js';
+import { buttonOutline } from './styles/button-outline.js';
+import { buttonPlain } from './styles/button-plain.js';
+import { settings } from '../../scripts/settings.js';
+import { mergeStyles } from '../../scripts/mergeStyles.js';
+
+const { prefix } = settings;
+let Button = class Button extends LitElement {
+    constructor() {
+        super();
+        this.as = 'button';
+        this.type = 'button';
+        this.for = undefined;
+        this.clickAction = undefined;
+        this.url = undefined;
+        this.target = '_self';
+        this.buttonStyle = 'solid';
+        this.textAlign = 'center';
+        this.disabled = false;
+        this.fullWidth = false;
+        this.extendInteraction = false;
+        this.extendInteractionHidden = false;
+        this.loading = false;
+        this._extendedInteraction();
+    }
+    async _extendedInteraction() {
+        await this.updateComplete;
+        if (this.disabled) {
+            return;
+        }
+        if (this.as === 'link' && this.url !== undefined && this.extendInteraction) {
+            this.dispatchEvent(new CustomEvent('extend-interaction', {
+                detail: {
+                    url: this.url,
+                    target: this.target,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    handleClick() {
+        if (this.disabled) {
+            return;
+        }
+        if (this.clickAction) {
+            const event = new CustomEvent(this.clickAction, {
+                bubbles: true,
+                composed: true,
+            });
+            this.dispatchEvent(event);
+        }
     }
-  }
-  buttonClasses() {
-    const o = {
-      "btn--plain": this.buttonStyle === "plain",
-      "btn--plain-underline": this.buttonStyle === "plain-underline",
-      "btn--outline": this.buttonStyle === "outline",
-      "btn--fullwidth": this.fullWidth,
-      "btn--extend": this.extendInteraction,
-      "btn--extend-hidden": this.extendInteractionHidden,
-      "btn--loading": this.loading
-    };
-    return o["btn--size-" + this.size] = !0, o["btn--text-align-" + this.textAlign] = !0, o;
-  }
-  buttonStyles() {
-    let o = {};
-    return this.colorText && (o = {
-      ...o,
-      "--um-color-button-primary-text": this.colorText,
-      "--um-color-button-secondary-bg": this.colorText
-    }), this.colorBg && (o = {
-      ...o,
-      "--um-color-button-primary-bg": this.colorBg,
-      "--um-color-button-secondary-text": this.colorBg
-    }), this.colorBgOpacity && (o = {
-      ...o,
-      "--um-opacity-button-bg": this.colorBgOpacity
-    }), this.borderRadius && this.borderRadius !== "0" && (o = {
-      ...o,
-      "--um-border-button-radius": "var(--um-border-radius-" + this.borderRadius + ")"
-    }), o;
-  }
-  buttonAs() {
-    if (this.as === "button" || this.url === void 0 || this.url === "")
-      return r`
+    buttonClasses() {
+        const classes = {
+            'btn--plain': this.buttonStyle === 'plain' ? true : false,
+            'btn--plain-underline': this.buttonStyle === 'plain-underline' ? true : false,
+            'btn--outline': this.buttonStyle === 'outline' ? true : false,
+            'btn--fullwidth': this.fullWidth,
+            'btn--extend': this.extendInteraction,
+            'btn--extend-hidden': this.extendInteractionHidden,
+            'btn--loading': this.loading,
+        };
+        classes['btn--size-' + this.size] = true;
+        classes['btn--text-align-' + this.textAlign] = true;
+        return classes;
+    }
+    buttonAs() {
+        if (this.as === 'button' || this.url === undefined || this.url === '') {
+            return html `
                 <button
                     type=${this.type}
-                    class="button${c(this.buttonClasses())}"
-                    style="${p(this.buttonStyles())}"
-                    aria-controls="${d(this.for)}"
-                    clickAction="${d(this.clickAction)}"
+                    class="button${classMap(this.buttonClasses())}"
+                    aria-controls="${ifDefined(this.for)}"
+                    clickAction="${ifDefined(this.clickAction)}"
                     ?disabled=${this.disabled}
                     @click=${this.handleClick}
                     part="button"
@@ -83,12 +88,12 @@ let t = class extends m {
                     ${this.buttonContent()}
                 </button>
             `;
-    if (this.url)
-      return r`
+        }
+        else if (this.url) {
+            return html `
                 <a 
                     href="${this.url}"
-                    class="button${c(this.buttonClasses())}"
-                    style="${p(this.buttonStyles())}"
+                    class="button${classMap(this.buttonClasses())}"
                     target="${this.target}"
                     ?disabled=${this.disabled}
                     part="button"
@@ -96,17 +101,11 @@ let t = class extends m {
                     ${this.buttonContent()}
                 </a> 
             `;
-  }
-  buttonContent() {
-    return this.loading ? r`
-                <slot name="label"></slot>
-                <slot>
-                    <span class="button__label">Label</span>
-                </slot>
-                <svg class="button__spinner" width="16" height="16" xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" aria-hidden="true" viewBox="0 0 512 512">
-                    <path d="M463.9 376c7.6 4.4 17.5 1.8 21.4-6.1c17.1-34.3 26.7-73 26.7-113.9C512 120 405.9 8.8 272 .5c-8.8-.5-16 6.7-16 15.5v0c0 8.8 7.2 15.9 16 16.6C388.2 40.8 480 137.7 480 256c0 35.1-8.1 68.3-22.5 97.9c-3.9 8-1.3 17.7 6.4 22.2v0z"/>
-                </svg>
-            ` : r`
+        }
+    }
+    buttonContent() {
+        if (!this.loading) {
+            return html `
                 <span class="button__label">
                     <slot name="label"></slot>
                     <slot>
@@ -114,17 +113,36 @@ let t = class extends m {
                     </slot>
                 </span>
                 `;
-  }
-  render() {
-    return r`
+        }
+        else {
+            return html `
+                <slot name="label"></slot>
+                <slot>
+                    <span class="button__label">Label</span>
+                </slot>
+                <svg class="button__spinner" width="16" height="16" xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" aria-hidden="true" viewBox="0 0 512 512">
+                    <path d="M463.9 376c7.6 4.4 17.5 1.8 21.4-6.1c17.1-34.3 26.7-73 26.7-113.9C512 120 405.9 8.8 272 .5c-8.8-.5-16 6.7-16 15.5v0c0 8.8 7.2 15.9 16 16.6C388.2 40.8 480 137.7 480 256c0 35.1-8.1 68.3-22.5 97.9c-3.9 8-1.3 17.7 6.4 22.2v0z"/>
+                </svg>
+            `;
+        }
+    }
+    render() {
+        return html `
             ${this.buttonAs()}
       `;
-  }
+    }
+};
+Button.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true
 };
-t.styles = x([
-  f,
-  y,
-  h`
+Button.styles = mergeStyles([
+    global,
+    buttonState,
+    buttonMain,
+    buttonOutline,
+    buttonPlain,
+    css `
             /* Parent */
             :host([fullwidth]) {
                 width: 100%;
@@ -140,194 +158,61 @@ t.styles = x([
                 border: 0;
                 clip: rect(0 0 0 0);
             }
-
-            .button {
-                line-height: 0;
-                height: var(--um-size-button-height, var(--um-space-48, 2.5rem));
-                width: var(--um-size-button-width, auto);
-            }
-
-            .button__label {
-                display: flex;
-                gap: 0.25rem;
-                align-items: center;
-                justify-content: center;
-            }
-
-            /* State */
-            .btn--outline {
-                background-color: transparent;
-                border-color: rgb(var(--um-color-button-primary-bg, var(--um-color-page-text, 62, 62, 62)), 1);
-                color: rgb(var(--um-color-button-primary-bg, var(--um-color-page-text, 62, 62, 62)), 1);
-            }
-            .btn--outline[disabled],
-            .btn--outline[disabled]:hover {
-                cursor: default;
-                color: rgb(var(--um-color-base-text-disabled,136, 136, 136), 0.7);
-                background-color: transparent;
-                border-color: rgb(var(--um-color-base-text-disabled,136, 136, 136), 0.7);
-                box-shadow: none;
-            }
-            .btn--outline:hover {
-                box-shadow: 0 0 0 0.0625rem rgb(var(--um-color-button-primary-bg, var(--um-color-page-text, 62, 62, 62)), 0.8);
-                border-color: transparent;
-            }
-            .btn--outline:focus-visible {
-                outline-offset: 3px;
-                outline: var(--um-border-width-20, 0.125rem) solid rgb(var(--um-color-button-primary-bg, var(--um-color-page-text, 62, 62, 62)),1);
-            }
-            .btn--plain, .btn--plain-underline {
-                background-color: transparent;
-                color: inherit;
-                border: none;
-                padding: 0;
-            }
-            .btn--plain:not(.btn--plain-underline):not([disabled]):hover {
-                text-decoration: underline;
-                text-underline-offset: 0.3rem;
-            }
-            .btn--plain-underline {
-                text-decoration: underline;
-                text-underline-offset: 0.3rem;
-                transition: text-decoration-color 0.2s;
-            }
-            .btn--plain-underline:not([disabled]):hover {
-                text-decoration-color: rgb(var(--um-color-button-primary-bg, var(--um-color-page-text, 62, 62, 62)),0.5)
-            }
-
-            /* Text alignment */
-            .btn--text-align-left .button__label  {
-                justify-content: start;
-            }
-            .btn--text-align-center .button__label  {
-                justify-content: center;
-            }
-            .btn--text-align-right .button__label  {
-                justify-content: end;
-            }
-
-            /* Width */
-            .btn--fullwidth {
-                width: 100%;
+            
+            .btn--plain > *,
+            .btn--plain-underline > *,
+            .btn--outline > * {
+                /* Child elements */
+                --umg-color-base-text: var(--umg-color-button-background);
             }
-
-            /* Size */
-            .btn--size-large:not(.btn--plain) {
-                --um-size-button-height: var(--um-space-48, 3rem);
-                padding: 0 var(--um-space-32, 2rem);
-            }
-            .btn--size-medium:not(.btn--plain) {
-                --um-size-button-height: var(--um-space-48, 2.5rem);
-                padding: 0 var(--um-space-20, 1.5rem);
-            }
-            .btn--size-small:not(.btn--plain) {
-                --um-size-button-height: var(--um-space-32, 2rem);
-                padding: 0 var(--um-space-12, 0.75rem);
-                font-size: var(--um-font-size-body-sm);
-                font-weight: var(--um-font-weight-regular);
-            }
-            .btn--size-slim:not(.btn--plain) {
-                --um-size-button-height: var(--um-space-24, 1.5rem);
-                font-weight: var(--um-font-weight-regular);
-                font-size: var(--um-font-size-body-xs);
-                padding: 0 var(--um-space-8, 0.5rem);
-            }
-
-            /* Behaviour */
-            .btn--extend:after,
-            .btn--extend-hidden:after {
-                content: '';
-                position:absolute;
-                top:0;
-                left:0;
-                height: 100%;
-                width: 100%;
-                z-index: 1;
-                cursor: pointer;
-            }
-
-            /* Loading state */
-            .btn--loading {
-                position: relative;
-            }
-            .btn--loading ::slotted(*),
-            .btn--loading .button__label {
-                opacity: 0;
-            }
-            .button__spinner {
-                animation-name: spin;
-                animation-duration: 500ms;
-                animation-timing-function: cubic-bezier(0, 0, 1, 1);
-                animation-iteration-count: infinite;
-                animation-direction: both;
-                fill: currentColor;
-                height: 1rem;
-                left: 50%;
-                margin: calc(var(--um-space-16, 1rem) / 2 * -1) 0 0 calc(var(--um-space-16, 1rem) / 2 * -1);
-                position: absolute;
-                top: 50%;
-                width: 1rem;
-            }
-            @keyframes spin {to{transform: rotate(1turn)}};
-        `
+            
+        `,
 ]);
-e([
-  n()
-], t.prototype, "as", 2);
-e([
-  n()
-], t.prototype, "type", 2);
-e([
-  n()
-], t.prototype, "for", 2);
-e([
-  n()
-], t.prototype, "clickAction", 2);
-e([
-  n()
-], t.prototype, "url", 2);
-e([
-  n()
-], t.prototype, "target", 2);
-e([
-  n()
-], t.prototype, "size", 2);
-e([
-  n()
-], t.prototype, "buttonStyle", 2);
-e([
-  n()
-], t.prototype, "borderRadius", 2);
-e([
-  n()
-], t.prototype, "textAlign", 2);
-e([
-  n({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
-e([
-  n({ type: Boolean })
-], t.prototype, "fullWidth", 2);
-e([
-  n({ type: Boolean })
-], t.prototype, "extendInteraction", 2);
-e([
-  n({ type: Boolean })
-], t.prototype, "extendInteractionHidden", 2);
-e([
-  n()
-], t.prototype, "colorBg", 2);
-e([
-  n()
-], t.prototype, "colorBgOpacity", 2);
-e([
-  n()
-], t.prototype, "colorText", 2);
-e([
-  n({ type: Boolean })
-], t.prototype, "loading", 2);
-t = e([
-  g(`${z}-button`)
-], t);
-export {
-  t as Button
-};
+__decorate([
+    property()
+], Button.prototype, "as", void 0);
+__decorate([
+    property()
+], Button.prototype, "type", void 0);
+__decorate([
+    property()
+], Button.prototype, "for", void 0);
+__decorate([
+    property()
+], Button.prototype, "clickAction", void 0);
+__decorate([
+    property()
+], Button.prototype, "url", void 0);
+__decorate([
+    property()
+], Button.prototype, "target", void 0);
+__decorate([
+    property()
+], Button.prototype, "size", void 0);
+__decorate([
+    property()
+], Button.prototype, "buttonStyle", void 0);
+__decorate([
+    property()
+], Button.prototype, "textAlign", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], Button.prototype, "fullWidth", void 0);
+__decorate([
+    property({ type: Boolean })
+], Button.prototype, "extendInteraction", void 0);
+__decorate([
+    property({ type: Boolean })
+], Button.prototype, "extendInteractionHidden", void 0);
+__decorate([
+    property({ type: Boolean })
+], Button.prototype, "loading", void 0);
+Button = __decorate([
+    customElement(`${prefix}-button`)
+], Button);
+
+export { Button };
+//# 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":[null],"names":[],"mappings":"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"}

package/dist/components/button/index.d.ts

@@ -1,2 +1,3 @@
 import { Button } from './button';
 export { Button };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/button/styles/button-main.d.ts

@@ -0,0 +1,2 @@
+export declare const buttonMain: import("lit").CSSResult;
+//# sourceMappingURL=button-main.d.ts.map

package/dist/components/button/styles/button-main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-main.d.ts","sourceRoot":"","sources":["../../../../src/components/button/styles/button-main.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,yBAqGtB,CAAA"}

package/dist/components/button/styles/button-main.js

@@ -0,0 +1,107 @@
+import { css } from 'lit';
+
+const buttonMain = css `
+    .button {
+        line-height: 1;
+        height: var(--umg-size-button-height, var(--umg-space-48, 2.5rem));
+        padding: var(--umg-space-button-padding, 0 2rem);
+        width: var(--umg-size-button-width, auto);
+    }
+
+    .button__label {
+        display: flex;
+        gap: 0.25rem;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Text alignment */
+    .btn--text-align-left .button__label  {
+        justify-content: start;
+    }
+    .btn--text-align-center .button__label  {
+        justify-content: center;
+    }
+    .btn--text-align-right .button__label  {
+        justify-content: end;
+    }
+
+    /* Width */
+    .btn--fullwidth {
+        width: 100%;
+    }
+
+    /* Size */
+    .btn--size-large:not(.btn--plain) {
+        --umg-size-button-height: var(--umg-space-48, 3rem);
+        padding: 0 var(--umg-space-32, 2rem);
+    }
+    .btn--size-medium:not(.btn--plain) {
+        --umg-size-button-height: 2.75rem;
+        padding: 0 var(--umg-space-20, 1.5rem);
+    }
+    .btn--size-small:not(.btn--plain) {
+        --umg-size-button-height: var(--umg-space-40, 2.5rem);
+        padding: 0 var(--umg-space-16, 1rem);
+        font-size: var(--umg-font-body-size-xs);
+        font-weight: var(--umg-font-button-weight, var(--umg-font-base-weight-regular));
+    }
+    .btn--size-xsmall:not(.btn--plain) {
+        --umg-size-button-height: var(--umg-space-32, 2rem);
+        padding: 0 var(--umg-space-12, 0.75rem);
+        font-size: var(--umg-font-body-size-xs);
+        font-weight: var(--umg-font-button-weight, var(--umg-font-base-weight-regular));
+    }
+    .btn--size-slim:not(.btn--plain) {
+        --umg-size-button-height: var(--umg-space-24, 1.5rem);
+        font-weight: var(--umg-font-button-weight, var(--umg-font-base-weight-regular));
+        font-size: var(--umg-font-body-size-xs);
+        padding: 0 var(--umg-space-12, 0.75rem);
+    }
+    .btn--size-small.btn--plain {
+        font-size: var(--umg-font-body-size-sm);
+    }
+    .btn--size-slim.btn--plain {
+        font-size: var(--umg-font-body-size-xs);
+    }
+
+    /* Behaviour */
+    .btn--extend:not([disabled]):after,
+    .btn--extend-hidden:not([disabled]):after {
+        content: '';
+        position:absolute;
+        top:0;
+        left:0;
+        height: 100%;
+        width: 100%;
+        z-index: 1;
+        cursor: pointer;
+    }
+
+    /* Loading state */
+    .btn--loading {
+        position: relative;
+    }
+    .btn--loading ::slotted(*),
+    .btn--loading .button__label {
+        opacity: 0;
+    }
+    .button__spinner {
+        animation-name: spin;
+        animation-duration: 500ms;
+        animation-timing-function: cubic-bezier(0, 0, 1, 1);
+        animation-iteration-count: infinite;
+        animation-direction: both;
+        fill: currentColor;
+        height: 1rem;
+        left: 50%;
+        margin: calc(var(--umg-space-16, 1rem) / 2 * -1) 0 0 calc(var(--umg-space-16, 1rem) / 2 * -1);
+        position: absolute;
+        top: 50%;
+        width: 1rem;
+    }
+    @keyframes spin {to{transform: rotate(1turn)}};
+`;
+
+export { buttonMain };
+//# sourceMappingURL=button-main.js.map

package/dist/components/button/styles/button-main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-main.js","sources":["../../../../src/components/button/styles/button-main.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGO,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/button/styles/button-outline.d.ts

@@ -0,0 +1,2 @@
+export declare const buttonOutline: import("lit").CSSResult;
+//# sourceMappingURL=button-outline.d.ts.map

package/dist/components/button/styles/button-outline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-outline.d.ts","sourceRoot":"","sources":["../../../../src/components/button/styles/button-outline.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,yBAyCzB,CAAA"}