@telia-ace/alliance-ui 1.0.6-next.5 → 1.0.7-next.0

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @telia-ace/alliance-ui
 
+## 1.0.7-next.0
+
+### Patch Changes
+
+-   ebf3c0c: Add support for `required` property in `<alliance-modal>.`
+
+## 1.0.6
+
+### Patch Changes
+
+-   fea9df3: Remove `<telia-button-text>` after it was removed in `@teliads/components@19`.
+-   cc604b0: Improvements to `<alliance-modal>`.
+
+    -   Sets `max-width` to same width as [Voca Large breakpoint](https://docs.voca.teliacompany.com/?path=/story/foundations-breakpoints-showcase--showcase) (`1024px` / `64em`).
+    -   Adds scrolling support.
+        ![image](https://i.imgur.com/fz2FD8R.gif)
+    -   Uses `<dialog>` instead of `<div>` for modal window.
+    -   Adds support for `disabled` actions.
+
+-   508cbdc: Fix exports of types.
+-   f196975: Add comment to custom event types. Export ActionEvent from modal.
+-   cc604b0: Relative path support in CSS import vite plugin.
+-   fea9df3: Update dependencies to latest.
+-   1740edd: Fix `<alliance-modal>` having incorrect `z-index`.
+-   f196975: Dispatch `'close'` action when pressing Escape in modal.
+-   50e1c70: Add `<alliance-modal>` component, see the documentation for more information.
+-   c3765fc: BREAKING: Always use objects as detail type for events (https://github.com/telia-company/ace-alliance-sdk/issues/190).
+
+    ### Migration guide for existing apps
+
+    #### Paginator `change-page` event
+
+    ```diff
+    import type { ChangePageEvent } from '@telia-ace/alliance-ui/components/alliance-paginator';
+    let currentPage = 1;
+    function onChangePage (event: ChangePageEvent) {
+    -  currentPage = event.detail;
+    +  currentPage = event.detail.nextPage;
+    }
+    ```
+
+    #### Modal `action` event
+
+    ```diff
+    import type { ActionEvent } from '@telia-ace/alliance-ui/components/alliance-modal';
+    let modalOpen = true;
+    function onModalAction (event: ActionEvent) {
+    -  modalOpen = event.detail === 'close';
+    +  modalOpen = event.detail.action === 'close';
+    }
+    ```
+
+-   f196975: Prefix all environment variables defined by the CLI with `ALLIANCE_` to avoid conflicting with third party packages.
+-   f196975: Correct link to Alliance documentation in README.
+
 ## 1.0.6-next.5
 
 ### Patch Changes

package/chunks/alliance-modal-5860f6c1.js

@@ -0,0 +1,163 @@
+import { i as m, r as t, e as c, s as y, y as s, a as $ } from "./query-assigned-elements-4285356d.js";
+import { c as v } from "./repeat-bf84f01f.js";
+import "./telia-button2-d25eddda.js";
+import "./telia-heading2-9d3ab48b.js";
+import "./telia-icon2-34bf5aef.js";
+import { l as u, c as b, b as g, s as f, a as w, d as e } from "./index-57f6bd40.js";
+import { c as k } from "./close-7d423291.js";
+var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (i, n, l, d) => {
+  for (var o = d > 1 ? void 0 : d ? C(n, l) : n, p = i.length - 1, h; p >= 0; p--)
+    (h = i[p]) && (o = (d ? h(n, l, o) : h(o)) || o);
+  return d && o && x(n, l, o), o;
+};
+let a = class extends y {
+  constructor() {
+    super(...arguments), this.header = "", this.actions = [], this.required = !1, this.containStyling = () => this.contain ? s`<style>
+            :host {
+                position: static !important;
+            }
+            .backdrop {
+                position: absolute !important;
+            }
+        </style>` : "", this.closeButton = () => this.required ? "" : s`<telia-button size="sm" variant="text" @click=${this.onCloseClick}
+            ><telia-icon size="md" svg="${k.svg}"
+        /></telia-button>`, this.actionButtons = () => this.actions.length ? s`
+            <div class="footer">
+                ${v(
+      this.actions,
+      (i) => s`
+                        <telia-button
+                            disabled="${i.disabled ? "true" : "false"}"
+                            variant="${i.variant || "primary"}"
+                            size="md"
+                            @click=${() => this.action(i.action)}
+                        >
+                            ${i.label}
+                        </telia-button>
+                    `
+    )}
+            </div>
+        ` : "", this.onBackdropClick = () => {
+      if (!this.required)
+        return this.action("close");
+    }, this.onCloseClick = () => {
+      if (!this.required)
+        return this.action("close");
+    }, this.onKeyDown = (i) => {
+      i.defaultPrevented || !this.required && i.key === "Escape" && this.action("close");
+    }, this.action = (i) => {
+      const n = new CustomEvent("action", {
+        bubbles: !0,
+        composed: !0,
+        detail: { action: i },
+        cancelable: !0
+      });
+      return this.dispatchEvent(n);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("keydown", this.onKeyDown);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("keydown", this.onKeyDown), super.disconnectedCallback();
+  }
+  render() {
+    return s`
+            ${this.containStyling()}
+            <div class="backdrop" @click=${this.onBackdropClick}></div>
+            <div class="container">
+                <dialog open>
+                    <div class="header">
+                        <telia-heading tag="h3" variant="title-100">${this.header}</telia-heading>
+                        ${this.closeButton()}
+                    </div>
+                    <div class="body">
+                        <slot></slot>
+                    </div>
+                    ${this.actionButtons()}
+                </dialog>
+            </div>
+        `;
+  }
+};
+a.styles = m`
+        :host {
+            inset: 0;
+            position: fixed;
+            z-index: ${t(parseInt(u.modal))};
+        }
+
+        .backdrop {
+            inset: 0;
+            position: absolute;
+            z-index: ${t(parseInt(u.modal) - 1)};
+            background-color: ${t(b.black)};
+            opacity: 0.3;
+        }
+
+        .container {
+            margin: 0 auto;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            overflow-x: hidden;
+            overflow-y: overlay;
+            height: 100%;
+            width: 100%;
+        }
+
+        dialog {
+            background-color: ${t(b.white)};
+            border-radius: ${t(g.radiusLg)};
+            box-shadow: ${t(f.md)};
+            z-index: ${t(parseInt(u.modal) + 2)};
+            max-width: ${t(w.breakpointLg)};
+            margin: ${t(e.spacing128)} ${t(e.spacing24)};
+            display: block;
+            position: static;
+            padding: 0;
+            border: none;
+        }
+
+        .header {
+            position: relative;
+            padding: ${t(e.spacing32)};
+            border-bottom: ${t(g.widthXs)} solid ${t(b.gray200)};
+        }
+
+        .header telia-button {
+            position: absolute;
+            top: ${t(e.spacing20)};
+            right: ${t(e.spacing20)};
+        }
+
+        .body {
+            padding: 0 ${t(e.spacing32)};
+            margin: ${t(e.spacing24)} 0;
+            min-width: calc(${t(e.spacing128)} * 2);
+        }
+
+        .footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: ${t(e.spacing24)};
+            padding: 0 ${t(e.spacing32)};
+            margin: ${t(e.spacing24)} 0;
+        }
+    `;
+r([
+  c({ type: String, attribute: "header" })
+], a.prototype, "header", 2);
+r([
+  c({ type: Array })
+], a.prototype, "actions", 2);
+r([
+  c({ type: Boolean, attribute: "required" })
+], a.prototype, "required", 2);
+r([
+  c({ type: Boolean, attribute: "contain" })
+], a.prototype, "contain", 2);
+a = r([
+  $("alliance-modal")
+], a);
+//# sourceMappingURL=alliance-modal-5860f6c1.js.map

package/chunks/alliance-modal-5860f6c1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alliance-modal-5860f6c1.js","sources":["../src/components/alliance-modal/alliance-modal.ts"],"sourcesContent":["import type { ButtonVariantType } from '@teliads/components/dist/types/types/ButtonVariant';\nimport { css, html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport '@/voca/components/telia-button';\nimport '@/voca/components/telia-heading';\nimport '@/voca/components/telia-icon';\nimport { borders, breakpoints, colors, layers, shadows, spacing } from '@/voca/foundations';\nimport { close } from '@/voca/icons';\n\nexport type Action = {\n    variant: ButtonVariantType;\n    label: string;\n    action: string;\n    disabled?: boolean;\n};\n\n/**\n * Event dispatched when clicking the close button, the backdrop, an action button or pressing escape.\n *\n * Event: `action`\n *\n * Detail: Object containing the property `action`.\n */\nexport type ActionEvent = CustomEvent<{ action: string }>;\n\n@customElement('alliance-modal')\nexport class Modal extends LitElement {\n    static styles = css`\n        :host {\n            inset: 0;\n            position: fixed;\n            z-index: ${unsafeCSS(parseInt(layers.modal))};\n        }\n\n        .backdrop {\n            inset: 0;\n            position: absolute;\n            z-index: ${unsafeCSS(parseInt(layers.modal) - 1)};\n            background-color: ${unsafeCSS(colors.black)};\n            opacity: 0.3;\n        }\n\n        .container {\n            margin: 0 auto;\n            display: flex;\n            justify-content: center;\n            align-items: flex-start;\n            overflow-x: hidden;\n            overflow-y: overlay;\n            height: 100%;\n            width: 100%;\n        }\n\n        dialog {\n            background-color: ${unsafeCSS(colors.white)};\n            border-radius: ${unsafeCSS(borders.radiusLg)};\n            box-shadow: ${unsafeCSS(shadows.md)};\n            z-index: ${unsafeCSS(parseInt(layers.modal) + 2)};\n            max-width: ${unsafeCSS(breakpoints.breakpointLg)};\n            margin: ${unsafeCSS(spacing.spacing128)} ${unsafeCSS(spacing.spacing24)};\n            display: block;\n            position: static;\n            padding: 0;\n            border: none;\n        }\n\n        .header {\n            position: relative;\n            padding: ${unsafeCSS(spacing.spacing32)};\n            border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};\n        }\n\n        .header telia-button {\n            position: absolute;\n            top: ${unsafeCSS(spacing.spacing20)};\n            right: ${unsafeCSS(spacing.spacing20)};\n        }\n\n        .body {\n            padding: 0 ${unsafeCSS(spacing.spacing32)};\n            margin: ${unsafeCSS(spacing.spacing24)} 0;\n            min-width: calc(${unsafeCSS(spacing.spacing128)} * 2);\n        }\n\n        .footer {\n            display: flex;\n            justify-content: flex-end;\n            gap: ${unsafeCSS(spacing.spacing24)};\n            padding: 0 ${unsafeCSS(spacing.spacing32)};\n            margin: ${unsafeCSS(spacing.spacing24)} 0;\n        }\n    `;\n\n    @property({ type: String, attribute: 'header' })\n    header: string = '';\n\n    @property({ type: Array })\n    actions: Action[] = [];\n\n    @property({ type: Boolean, attribute: 'required' })\n    required: boolean = false;\n\n    // Internal usage only\n    // Used in Storybook to contain modal in story\n    @property({ type: Boolean, attribute: 'contain' })\n    contain?: boolean;\n\n    containStyling = () => {\n        if (!this.contain) {\n            return '';\n        }\n\n        return html`<style>\n            :host {\n                position: static !important;\n            }\n            .backdrop {\n                position: absolute !important;\n            }\n        </style>`;\n    };\n\n    closeButton = () => {\n        if (this.required) {\n            return '';\n        }\n\n        return html`<telia-button size=\"sm\" variant=\"text\" @click=${this.onCloseClick}\n            ><telia-icon size=\"md\" svg=\"${close.svg}\"\n        /></telia-button>`;\n    };\n\n    actionButtons = () => {\n        if (!this.actions.length) {\n            return '';\n        }\n\n        return html`\n            <div class=\"footer\">\n                ${repeat(\n                    this.actions,\n                    (action) => html`\n                        <telia-button\n                            disabled=\"${action.disabled ? 'true' : 'false'}\"\n                            variant=\"${action.variant || 'primary'}\"\n                            size=\"md\"\n                            @click=${() => this.action(action.action)}\n                        >\n                            ${action.label}\n                        </telia-button>\n                    `\n                )}\n            </div>\n        `;\n    };\n\n    onBackdropClick = () => {\n        if (this.required) {\n            return;\n        }\n\n        return this.action('close');\n    };\n\n    onCloseClick = () => {\n        if (this.required) {\n            return;\n        }\n\n        return this.action('close');\n    };\n\n    onKeyDown = (event: KeyboardEvent) => {\n        if (event.defaultPrevented) {\n            return;\n        }\n\n        if (!this.required && event.key === 'Escape') {\n            this.action('close');\n        }\n    };\n\n    connectedCallback() {\n        super.connectedCallback();\n        window.addEventListener('keydown', this.onKeyDown);\n    }\n\n    disconnectedCallback() {\n        window.removeEventListener('keydown', this.onKeyDown);\n        super.disconnectedCallback();\n    }\n\n    action = (action: string) => {\n        const event: ActionEvent = new CustomEvent('action', {\n            bubbles: true,\n            composed: true,\n            detail: { action },\n            cancelable: true,\n        });\n        return this.dispatchEvent(event);\n    };\n\n    render() {\n        return html`\n            ${this.containStyling()}\n            <div class=\"backdrop\" @click=${this.onBackdropClick}></div>\n            <div class=\"container\">\n                <dialog open>\n                    <div class=\"header\">\n                        <telia-heading tag=\"h3\" variant=\"title-100\">${this.header}</telia-heading>\n                        ${this.closeButton()}\n                    </div>\n                    <div class=\"body\">\n                        <slot></slot>\n                    </div>\n                    ${this.actionButtons()}\n                </dialog>\n            </div>\n        `;\n    }\n}\n"],"names":["Modal","LitElement","html","close","repeat","action","event","css","unsafeCSS","layers","colors","borders","shadows","breakpoints","spacing","__decorateClass","property","customElement"],"mappings":"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"}

package/components/alliance-modal/alliance-modal.d.ts

@@ -23,9 +23,13 @@ export declare class Modal extends LitElement {
     static styles: import("lit").CSSResult;
     header: string;
     actions: Action[];
+    required: boolean;
     contain?: boolean;
-    onBackdropClick: () => boolean;
-    onCloseClick: () => boolean;
+    containStyling: () => "" | import("lit").TemplateResult<1>;
+    closeButton: () => "" | import("lit").TemplateResult<1>;
+    actionButtons: () => "" | import("lit").TemplateResult<1>;
+    onBackdropClick: () => boolean | undefined;
+    onCloseClick: () => boolean | undefined;
     onKeyDown: (event: KeyboardEvent) => void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/components/alliance-modal.js

@@ -1,4 +1,4 @@
-import "../chunks/alliance-modal-f2ab100c.js";
+import "../chunks/alliance-modal-5860f6c1.js";
 import "../chunks/query-assigned-elements-4285356d.js";
 import "../chunks/repeat-bf84f01f.js";
 import "../chunks/telia-button2-d25eddda.js";

package/components/index.js

@@ -1,4 +1,4 @@
-import "../chunks/alliance-modal-f2ab100c.js";
+import "../chunks/alliance-modal-5860f6c1.js";
 import "../chunks/alliance-paginator-button-83c050bc.js";
 import "../chunks/alliance-table-row-67a6becb.js";
 import "../chunks/query-assigned-elements-4285356d.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/alliance-ui",
-  "version": "1.0.6-next.5",
+  "version": "1.0.7-next.0",
   "description": "UI components used by ACE Alliance apps.",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "Telia Company AB",
@@ -45,8 +45,8 @@
     "lit": "^2.6.1"
   },
   "devDependencies": {
-    "@telia-ace/alliance-framework": "^1.0.7-next.3",
-    "@telia-ace/alliance-utilities": "^1.0.7-next.1",
+    "@telia-ace/alliance-framework": "^1.0.7",
+    "@telia-ace/alliance-utilities": "^1.0.7",
     "@types/fs-extra": "^11.0.1",
     "fs-extra": "^11.1.0",
     "vite": "^4.1.1"

package/chunks/alliance-modal-f2ab100c.js

@@ -1,154 +0,0 @@
-import { i as m, r as t, e as g, s as $, y as r, a as v } from "./query-assigned-elements-4285356d.js";
-import { c as y } from "./repeat-bf84f01f.js";
-import "./telia-button2-d25eddda.js";
-import "./telia-heading2-9d3ab48b.js";
-import "./telia-icon2-34bf5aef.js";
-import { l as h, c as b, b as u, s as f, a as w, d as e } from "./index-57f6bd40.js";
-import { c as k } from "./close-7d423291.js";
-var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, c = (i, a, d, n) => {
-  for (var o = n > 1 ? void 0 : n ? C(a, d) : a, l = i.length - 1, p; l >= 0; l--)
-    (p = i[l]) && (o = (n ? p(a, d, o) : p(o)) || o);
-  return n && o && x(a, d, o), o;
-};
-let s = class extends $ {
-  constructor() {
-    super(...arguments), this.header = "", this.actions = [], this.onBackdropClick = () => this.action("close"), this.onCloseClick = () => this.action("close"), this.onKeyDown = (i) => {
-      i.defaultPrevented || i.key === "Escape" && this.action("close");
-    }, this.action = (i) => {
-      const a = new CustomEvent("action", {
-        bubbles: !0,
-        composed: !0,
-        detail: { action: i },
-        cancelable: !0
-      });
-      return this.dispatchEvent(a);
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), window.addEventListener("keydown", this.onKeyDown);
-  }
-  disconnectedCallback() {
-    window.removeEventListener("keydown", this.onKeyDown), super.disconnectedCallback();
-  }
-  render() {
-    return r`
-            ${this.contain && r`<style>
-                :host {
-                    position: static !important;
-                }
-                .backdrop {
-                    position: absolute !important;
-                }
-            </style>`}
-            <div class="backdrop" @keydown=${console.log} @click=${this.onBackdropClick}></div>
-            <div class="container">
-                <dialog open>
-                    <div class="header">
-                        <telia-heading tag="h3" variant="title-100">${this.header}</telia-heading>
-                        <telia-button size="sm" variant="text" @click=${this.onCloseClick}
-                            ><telia-icon size="md" svg="${k.svg}"
-                        /></telia-button>
-                    </div>
-                    <div class="body">
-                        <slot></slot>
-                    </div>
-                    ${this.actions.length ? r`
-                              <div class="footer">
-                                  ${y(
-      this.actions,
-      (i) => r`
-                                          <telia-button
-                                              disabled="${i.disabled ? "true" : "false"}"
-                                              variant="${i.variant || "primary"}"
-                                              size="md"
-                                              @click=${() => this.action(i.action)}
-                                          >
-                                              ${i.label}
-                                          </telia-button>
-                                      `
-    )}
-                              </div>
-                          ` : ""}
-                </dialog>
-            </div>
-        `;
-  }
-};
-s.styles = m`
-        :host {
-            inset: 0;
-            position: fixed;
-            z-index: ${t(parseInt(h.modal))};
-        }
-
-        .backdrop {
-            inset: 0;
-            position: absolute;
-            z-index: ${t(parseInt(h.modal) - 1)};
-            background-color: ${t(b.black)};
-            opacity: 0.3;
-        }
-
-        .container {
-            margin: 0 auto;
-            display: flex;
-            justify-content: center;
-            align-items: flex-start;
-            overflow-x: hidden;
-            overflow-y: overlay;
-            height: 100%;
-            width: 100%;
-        }
-
-        dialog {
-            background-color: ${t(b.white)};
-            border-radius: ${t(u.radiusLg)};
-            box-shadow: ${t(f.md)};
-            z-index: ${t(parseInt(h.modal) + 2)};
-            max-width: ${t(w.breakpointLg)};
-            margin: ${t(e.spacing128)} ${t(e.spacing24)};
-            display: block;
-            position: static;
-            padding: 0;
-            border: none;
-        }
-
-        .header {
-            position: relative;
-            padding: ${t(e.spacing32)};
-            border-bottom: ${t(u.widthXs)} solid ${t(b.gray200)};
-        }
-
-        .header telia-button {
-            position: absolute;
-            top: ${t(e.spacing20)};
-            right: ${t(e.spacing20)};
-        }
-
-        .body {
-            padding: 0 ${t(e.spacing32)};
-            margin: ${t(e.spacing24)} 0;
-            min-width: calc(${t(e.spacing128)} * 2);
-        }
-
-        .footer {
-            display: flex;
-            justify-content: flex-end;
-            gap: ${t(e.spacing24)};
-            padding: 0 ${t(e.spacing32)};
-            margin: ${t(e.spacing24)} 0;
-        }
-    `;
-c([
-  g({ type: String, attribute: "header" })
-], s.prototype, "header", 2);
-c([
-  g({ type: Array })
-], s.prototype, "actions", 2);
-c([
-  g({ type: Boolean, attribute: "contain" })
-], s.prototype, "contain", 2);
-s = c([
-  v("alliance-modal")
-], s);
-//# sourceMappingURL=alliance-modal-f2ab100c.js.map

package/chunks/alliance-modal-f2ab100c.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"alliance-modal-f2ab100c.js","sources":["../src/components/alliance-modal/alliance-modal.ts"],"sourcesContent":["import type { ButtonVariantType } from '@teliads/components/dist/types/types/ButtonVariant';\nimport { css, html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport '@/voca/components/telia-button';\nimport '@/voca/components/telia-heading';\nimport '@/voca/components/telia-icon';\nimport { borders, breakpoints, colors, layers, shadows, spacing } from '@/voca/foundations';\nimport { close } from '@/voca/icons';\n\nexport type Action = {\n    variant: ButtonVariantType;\n    label: string;\n    action: string;\n    disabled?: boolean;\n};\n\n/**\n * Event dispatched when clicking the close button, the backdrop, an action button or pressing escape.\n *\n * Event: `action`\n *\n * Detail: Object containing the property `action`.\n */\nexport type ActionEvent = CustomEvent<{ action: string }>;\n\n@customElement('alliance-modal')\nexport class Modal extends LitElement {\n    static styles = css`\n        :host {\n            inset: 0;\n            position: fixed;\n            z-index: ${unsafeCSS(parseInt(layers.modal))};\n        }\n\n        .backdrop {\n            inset: 0;\n            position: absolute;\n            z-index: ${unsafeCSS(parseInt(layers.modal) - 1)};\n            background-color: ${unsafeCSS(colors.black)};\n            opacity: 0.3;\n        }\n\n        .container {\n            margin: 0 auto;\n            display: flex;\n            justify-content: center;\n            align-items: flex-start;\n            overflow-x: hidden;\n            overflow-y: overlay;\n            height: 100%;\n            width: 100%;\n        }\n\n        dialog {\n            background-color: ${unsafeCSS(colors.white)};\n            border-radius: ${unsafeCSS(borders.radiusLg)};\n            box-shadow: ${unsafeCSS(shadows.md)};\n            z-index: ${unsafeCSS(parseInt(layers.modal) + 2)};\n            max-width: ${unsafeCSS(breakpoints.breakpointLg)};\n            margin: ${unsafeCSS(spacing.spacing128)} ${unsafeCSS(spacing.spacing24)};\n            display: block;\n            position: static;\n            padding: 0;\n            border: none;\n        }\n\n        .header {\n            position: relative;\n            padding: ${unsafeCSS(spacing.spacing32)};\n            border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};\n        }\n\n        .header telia-button {\n            position: absolute;\n            top: ${unsafeCSS(spacing.spacing20)};\n            right: ${unsafeCSS(spacing.spacing20)};\n        }\n\n        .body {\n            padding: 0 ${unsafeCSS(spacing.spacing32)};\n            margin: ${unsafeCSS(spacing.spacing24)} 0;\n            min-width: calc(${unsafeCSS(spacing.spacing128)} * 2);\n        }\n\n        .footer {\n            display: flex;\n            justify-content: flex-end;\n            gap: ${unsafeCSS(spacing.spacing24)};\n            padding: 0 ${unsafeCSS(spacing.spacing32)};\n            margin: ${unsafeCSS(spacing.spacing24)} 0;\n        }\n    `;\n\n    @property({ type: String, attribute: 'header' })\n    header: string = '';\n\n    @property({ type: Array })\n    actions: Action[] = [];\n\n    // Internal usage only\n    // Used in Storybook to contain modal in story\n    @property({ type: Boolean, attribute: 'contain' })\n    contain?: boolean;\n\n    onBackdropClick = () => {\n        return this.action('close');\n    };\n\n    onCloseClick = () => {\n        return this.action('close');\n    };\n\n    onKeyDown = (event: KeyboardEvent) => {\n        if (event.defaultPrevented) {\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            this.action('close');\n        }\n    };\n\n    connectedCallback() {\n        super.connectedCallback();\n        window.addEventListener('keydown', this.onKeyDown);\n    }\n    disconnectedCallback() {\n        window.removeEventListener('keydown', this.onKeyDown);\n        super.disconnectedCallback();\n    }\n\n    action = (action: string) => {\n        const event: ActionEvent = new CustomEvent('action', {\n            bubbles: true,\n            composed: true,\n            detail: { action },\n            cancelable: true,\n        });\n        return this.dispatchEvent(event);\n    };\n\n    render() {\n        return html`\n            ${this.contain &&\n            html`<style>\n                :host {\n                    position: static !important;\n                }\n                .backdrop {\n                    position: absolute !important;\n                }\n            </style>`}\n            <div class=\"backdrop\" @keydown=${console.log} @click=${this.onBackdropClick}></div>\n            <div class=\"container\">\n                <dialog open>\n                    <div class=\"header\">\n                        <telia-heading tag=\"h3\" variant=\"title-100\">${this.header}</telia-heading>\n                        <telia-button size=\"sm\" variant=\"text\" @click=${this.onCloseClick}\n                            ><telia-icon size=\"md\" svg=\"${close.svg}\"\n                        /></telia-button>\n                    </div>\n                    <div class=\"body\">\n                        <slot></slot>\n                    </div>\n                    ${this.actions.length\n                        ? html`\n                              <div class=\"footer\">\n                                  ${repeat(\n                                      this.actions,\n                                      (action) => html`\n                                          <telia-button\n                                              disabled=\"${action.disabled ? 'true' : 'false'}\"\n                                              variant=\"${action.variant || 'primary'}\"\n                                              size=\"md\"\n                                              @click=${() => this.action(action.action)}\n                                          >\n                                              ${action.label}\n                                          </telia-button>\n                                      `\n                                  )}\n                              </div>\n                          `\n                        : ''}\n                </dialog>\n            </div>\n        `;\n    }\n}\n"],"names":["Modal","LitElement","event","action","html","close","repeat","css","unsafeCSS","layers","colors","borders","shadows","breakpoints","spacing","__decorateClass","property","customElement"],"mappings":"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"}