@telia-ace/alliance-ui 1.0.14 → 1.0.15

package/components/alliance-view.js

@@ -0,0 +1,291 @@
+import { __name, define } from './chunk-NB6ODBZJ.js';
+import { LitElement, css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+
+function _ts_decorate(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate, "_ts_decorate");
+function _ts_metadata(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+    return Reflect.metadata(k, v);
+}
+__name(_ts_metadata, "_ts_metadata");
+var viewElementPrefix = "alliance-view-";
+var viewElementSelector = "app-view";
+var ViewElementType;
+(function(ViewElementType2) {
+  ViewElementType2["Main"] = "main";
+  ViewElementType2["Aside"] = "aside";
+  ViewElementType2["Body"] = "body";
+})(ViewElementType || (ViewElementType = {}));
+function viewElementTag(appName) {
+  return `${viewElementPrefix}${appName}`;
+}
+__name(viewElementTag, "viewElementTag");
+function registerViewElement(appName, onRender) {
+  let ViewElement = class ViewElement extends LitElement {
+    static {
+      __name(this, "ViewElement");
+    }
+    static styles = css`
+            .loader {
+                background-color: rgba(255, 255, 255, 0.4);
+                z-index: var(--layer-modal);
+                position: absolute;
+                inset: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                > div {
+                    display: inline-block;
+                    position: relative;
+                    width: 80px;
+                    height: 80px;
+
+                    > div {
+                        animation: alliance-app-loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+                        transform-origin: 40px 40px;
+
+                        &:after {
+                            content: ' ';
+                            display: block;
+                            position: absolute;
+                            width: 7px;
+                            height: 7px;
+                            border-radius: 50%;
+                            background: var(--purple-850);
+                            margin: -4px 0 0 -4px;
+                        }
+                        &:nth-child(1) {
+                            animation-delay: -0.036s;
+                        }
+                        &:nth-child(1):after {
+                            top: 63px;
+                            left: 63px;
+                        }
+                        &:nth-child(2) {
+                            animation-delay: -0.072s;
+                        }
+                        &:nth-child(2):after {
+                            top: 68px;
+                            left: 56px;
+                        }
+                        &:nth-child(3) {
+                            animation-delay: -0.108s;
+                        }
+                        &:nth-child(3):after {
+                            top: 71px;
+                            left: 48px;
+                        }
+                        &:nth-child(4) {
+                            animation-delay: -0.144s;
+                        }
+                        &:nth-child(4):after {
+                            top: 72px;
+                            left: 40px;
+                        }
+                        &:nth-child(5) {
+                            animation-delay: -0.18s;
+                        }
+                        &:nth-child(5):after {
+                            top: 71px;
+                            left: 32px;
+                        }
+                        &:nth-child(6) {
+                            animation-delay: -0.216s;
+                        }
+                        &:nth-child(6):after {
+                            top: 68px;
+                            left: 24px;
+                        }
+                        &:nth-child(7) {
+                            animation-delay: -0.252s;
+                        }
+                        &:nth-child(7):after {
+                            top: 63px;
+                            left: 17px;
+                        }
+                        &:nth-child(8) {
+                            animation-delay: -0.288s;
+                        }
+                        &:nth-child(8):after {
+                            top: 56px;
+                            left: 12px;
+                        }
+                    }
+                }
+            }
+            @keyframes alliance-app-loader {
+                0% {
+                    transform: rotate(0deg);
+                }
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+        `;
+    constructor() {
+      super();
+      this.appView = true;
+      this.loading = true;
+      this.mounted = false;
+      this.args = {};
+      this.app = appName;
+      this.capability = "launch";
+      this.complete = (result) => {
+        this.dispatchEvent(new CustomEvent("complete", {
+          detail: result
+        }));
+      };
+    }
+    init(props) {
+      for (const [key, value] of Object.entries(props)) {
+        if (value) {
+          this[key] = value;
+        }
+      }
+    }
+    async connectedCallback() {
+      super.connectedCallback();
+      if (!this.id) {
+        this.id = crypto.randomUUID();
+      }
+      await onRender(this);
+      this.loading = false;
+      this.mounted = true;
+    }
+    renderLoader() {
+      return html`
+                <div class="loader">
+                    <div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                    </div>
+                </div>
+            `;
+    }
+    renderTypeStyling() {
+      switch (this.type) {
+        case "body":
+          return html`
+                        <style>
+                            :host .app-loader {
+                                display: none;
+                            }
+                        </style>
+                    `;
+        case "aside":
+          return html`
+                        <style>
+                            :host {
+                                height: 100vh;
+                                width: auto;
+                                z-index: 3;
+                                position: fixed;
+                                top: 0;
+                                left: 0;
+                            }
+                            :host .app-loader {
+                                display: none;
+                            }
+                        </style>
+                    `;
+        default:
+        case "main":
+          return html`
+                        <style>
+                            :host {
+                                position: relative;
+                                display: block;
+                                height: 100%;
+                                width: 100%;
+                            }
+                        </style>
+                    `;
+      }
+    }
+    render() {
+      return html`
+                ${this.renderTypeStyling()} ${this.loading ? this.renderLoader() : ""}
+                <slot></slot>
+            `;
+    }
+  };
+  _ts_decorate([
+    property({
+      type: Boolean,
+      attribute: viewElementSelector,
+      reflect: true
+    }),
+    _ts_metadata("design:type", Boolean)
+  ], ViewElement.prototype, "appView", void 0);
+  _ts_decorate([
+    property({
+      type: Boolean,
+      attribute: true,
+      reflect: true
+    }),
+    _ts_metadata("design:type", Object)
+  ], ViewElement.prototype, "mounted", void 0);
+  _ts_decorate([
+    property({
+      type: Boolean,
+      attribute: true,
+      reflect: true
+    }),
+    _ts_metadata("design:type", Object)
+  ], ViewElement.prototype, "loading", void 0);
+  _ts_decorate([
+    property({
+      type: String,
+      attribute: false,
+      reflect: true
+    }),
+    _ts_metadata("design:type", Object)
+  ], ViewElement.prototype, "app", void 0);
+  _ts_decorate([
+    property({
+      type: String,
+      attribute: true,
+      reflect: true
+    }),
+    _ts_metadata("design:type", Object)
+  ], ViewElement.prototype, "type", void 0);
+  _ts_decorate([
+    property({
+      type: String,
+      attribute: true,
+      reflect: true
+    }),
+    _ts_metadata("design:type", Object)
+  ], ViewElement.prototype, "capability", void 0);
+  _ts_decorate([
+    property({
+      type: Object,
+      attribute: true,
+      reflect: true
+    }),
+    _ts_metadata("design:type", Object)
+  ], ViewElement.prototype, "args", void 0);
+  define(viewElementTag(appName), ViewElement);
+}
+__name(registerViewElement, "registerViewElement");
+
+export { ViewElementType, registerViewElement, viewElementPrefix, viewElementSelector, viewElementTag };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=alliance-view.js.map

package/components/alliance-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/alliance-view/alliance-view.ts"],"names":["LitElement","css","html","property","viewElementPrefix","viewElementSelector","ViewElementType","viewElementTag","appName","registerViewElement","onRender","ViewElement","styles","constructor","appView","loading","mounted","args","app","capability","complete","result","dispatchEvent","CustomEvent","detail","init","props","key","value","Object","entries","connectedCallback","id","crypto","randomUUID","renderLoader","renderTypeStyling","type","render","Boolean","attribute","reflect","String","define"],"mappings":";;;;;;AAIA,SAASA,YAAYC,KAAKC,YAAY;AACtC,SAASC,gBAAgB;;;;;;;;;;;;;;;;;AAIlB,IAAMC,oBAAoB;AAE1B,IAAMC,sBAAsB;;UAEvBC,kBAAAA;;;;GAAAA,oBAAAA,kBAAAA,CAAAA,EAAAA;AAML,SAASC,eAAeC,SAAe;AAC1C,SAAO,GAAGJ,iBAAAA,GAAoBI,OAAAA;AAClC;AAFgBD;AAwBT,SAASE,oBACZD,SACAE,UAAqD;AAErD,MAAMC,cAAN,MAAMA,oBAAoBX,WAAAA;WAAAA;;;IACtB,OAAOY,SAASX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmGhBY,cAAc;AACV,YAAK;AACL,WAAKC,UAAU;AACf,WAAKC,UAAU;AACf,WAAKC,UAAU;AACf,WAAKC,OAAO,CAAC;AACb,WAAKC,MAAMV;AACX,WAAKW,aAAa;AAClB,WAAKC,WAAW,CAACC,WAAAA;AACb,aAAKC,cAAc,IAAIC,YAAY,YAAY;UAAEC,QAAQH;QAAO,CAAA,CAAA;MACpE;IACJ;IAEAI,KAAKC,OAAsB;AACvB,iBAAW,CAACC,KAAKC,KAAAA,KAAUC,OAAOC,QAAQJ,KAAAA,GAAQ;AAC9C,YAAIE,OAAO;AAEP,eAAKD,GAAAA,IAAOC;QAChB;MACJ;IACJ;IAyBA,MAAMG,oBAAoB;AACtB,YAAMA,kBAAAA;AACN,UAAI,CAAC,KAAKC,IAAI;AACV,aAAKA,KAAKC,OAAOC,WAAU;MAC/B;AACA,YAAMxB,SAAS,IAAI;AACnB,WAAKK,UAAU;AACf,WAAKC,UAAU;IACnB;IAEQmB,eAAe;AACnB,aAAOjC;;;;;;;;;;;;;;IAcX;IAEQkC,oBAAoB;AACxB,cAAQ,KAAKC,MAAI;QACb,KAAA;AACI,iBAAOnC;;;;;;;QAOX,KAAA;AACI,iBAAOA;;;;;;;;;;;;;;;QAeX;QACA,KAAA;AACI,iBAAOA;;;;;;;;;;MAUf;IACJ;IAEUoC,SAAS;AACf,aAAOpC;kBACD,KAAKkC,kBAAiB,CAAA,IAAM,KAAKrB,UAAU,KAAKoB,aAAY,IAAK,EAAA;;;IAG3E;EACJ;;IAjGKhC,SAAS;MAAEkC,MAAME;MAASC,WAAWnC;MAAqBoC,SAAS;IAAK,CAAA;;KA1HvE9B,YAAAA,WAAAA,WAAAA,MAAAA;;IA6HDR,SAAS;MAAEkC,MAAME;MAASC,WAAW;MAAMC,SAAS;IAAK,CAAA;;KA7HxD9B,YAAAA,WAAAA,WAAAA,MAAAA;;IAgIDR,SAAS;MAAEkC,MAAME;MAASC,WAAW;MAAMC,SAAS;IAAK,CAAA;;KAhIxD9B,YAAAA,WAAAA,WAAAA,MAAAA;;IAmIDR,SAAS;MAAEkC,MAAMK;MAAQF,WAAW;MAAOC,SAAS;IAAK,CAAA;;KAnIxD9B,YAAAA,WAAAA,OAAAA,MAAAA;;IAsIDR,SAAS;MAAEkC,MAAMK;MAAQF,WAAW;MAAMC,SAAS;IAAK,CAAA;;KAtIvD9B,YAAAA,WAAAA,QAAAA,MAAAA;;IAyIDR,SAAS;MAAEkC,MAAMK;MAAQF,WAAW;MAAMC,SAAS;IAAK,CAAA;;KAzIvD9B,YAAAA,WAAAA,cAAAA,MAAAA;;IA4IDR,SAAS;MAAEkC,MAAMR;MAAQW,WAAW;MAAMC,SAAS;IAAK,CAAA;;KA5IvD9B,YAAAA,WAAAA,QAAAA,MAAAA;AA6NNgC,SAAOpC,eAAeC,OAAAA,GAAUG,WAAAA;AACpC;AAlOgBF","sourcesContent":["import type {\n    Promisable,\n    SerializeableObject,\n} from '@telia-ace/alliance-internal-client-utilities';\nimport { LitElement, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { define } from '@/utils';\n\nexport const viewElementPrefix = 'alliance-view-';\n\nexport const viewElementSelector = 'app-view';\n\nexport enum ViewElementType {\n    Main = 'main',\n    Aside = 'aside',\n    Body = 'body',\n}\n\nexport function viewElementTag(appName: string) {\n    return `${viewElementPrefix}${appName}`;\n}\n\nexport type ViewInitProps = {\n    app?: IViewElement['app'];\n    capability?: IViewElement['capability'];\n    id?: IViewElement['id'];\n    args?: IViewElement['args'];\n    type?: IViewElement['type'];\n    complete?: IViewElement['complete'];\n};\n\nexport interface IViewElement extends LitElement {\n    init: (props: ViewInitProps) => void;\n    complete: (result: SerializeableObject | null) => void;\n    app: string;\n    capability: string;\n    args: SerializeableObject;\n    mounted: boolean;\n    loading: boolean;\n    type?: ViewElementType;\n}\n\nexport function registerViewElement(\n    appName: string,\n    onRender: (element: IViewElement) => Promisable<void>,\n) {\n    class ViewElement extends LitElement implements IViewElement {\n        static styles = css`\n            .loader {\n                background-color: rgba(255, 255, 255, 0.4);\n                z-index: var(--layer-modal);\n                position: absolute;\n                inset: 0;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n\n                > div {\n                    display: inline-block;\n                    position: relative;\n                    width: 80px;\n                    height: 80px;\n\n                    > div {\n                        animation: alliance-app-loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n                        transform-origin: 40px 40px;\n\n                        &:after {\n                            content: ' ';\n                            display: block;\n                            position: absolute;\n                            width: 7px;\n                            height: 7px;\n                            border-radius: 50%;\n                            background: var(--purple-850);\n                            margin: -4px 0 0 -4px;\n                        }\n                        &:nth-child(1) {\n                            animation-delay: -0.036s;\n                        }\n                        &:nth-child(1):after {\n                            top: 63px;\n                            left: 63px;\n                        }\n                        &:nth-child(2) {\n                            animation-delay: -0.072s;\n                        }\n                        &:nth-child(2):after {\n                            top: 68px;\n                            left: 56px;\n                        }\n                        &:nth-child(3) {\n                            animation-delay: -0.108s;\n                        }\n                        &:nth-child(3):after {\n                            top: 71px;\n                            left: 48px;\n                        }\n                        &:nth-child(4) {\n                            animation-delay: -0.144s;\n                        }\n                        &:nth-child(4):after {\n                            top: 72px;\n                            left: 40px;\n                        }\n                        &:nth-child(5) {\n                            animation-delay: -0.18s;\n                        }\n                        &:nth-child(5):after {\n                            top: 71px;\n                            left: 32px;\n                        }\n                        &:nth-child(6) {\n                            animation-delay: -0.216s;\n                        }\n                        &:nth-child(6):after {\n                            top: 68px;\n                            left: 24px;\n                        }\n                        &:nth-child(7) {\n                            animation-delay: -0.252s;\n                        }\n                        &:nth-child(7):after {\n                            top: 63px;\n                            left: 17px;\n                        }\n                        &:nth-child(8) {\n                            animation-delay: -0.288s;\n                        }\n                        &:nth-child(8):after {\n                            top: 56px;\n                            left: 12px;\n                        }\n                    }\n                }\n            }\n            @keyframes alliance-app-loader {\n                0% {\n                    transform: rotate(0deg);\n                }\n                100% {\n                    transform: rotate(360deg);\n                }\n            }\n        `;\n\n        constructor() {\n            super();\n            this.appView = true;\n            this.loading = true;\n            this.mounted = false;\n            this.args = {};\n            this.app = appName;\n            this.capability = 'launch';\n            this.complete = (result) => {\n                this.dispatchEvent(new CustomEvent('complete', { detail: result }));\n            };\n        }\n\n        init(props: ViewInitProps) {\n            for (const [key, value] of Object.entries(props)) {\n                if (value) {\n                    // @ts-ignore\n                    this[key] = value;\n                }\n            }\n        }\n\n        @property({ type: Boolean, attribute: viewElementSelector, reflect: true })\n        private declare appView: boolean;\n\n        @property({ type: Boolean, attribute: true, reflect: true })\n        declare mounted: IViewElement['mounted'];\n\n        @property({ type: Boolean, attribute: true, reflect: true })\n        declare loading: IViewElement['loading'];\n\n        @property({ type: String, attribute: false, reflect: true })\n        declare app: IViewElement['app'];\n\n        @property({ type: String, attribute: true, reflect: true })\n        declare type: IViewElement['type'];\n\n        @property({ type: String, attribute: true, reflect: true })\n        declare capability: IViewElement['capability'];\n\n        @property({ type: Object, attribute: true, reflect: true })\n        declare args: IViewElement['args'];\n\n        declare complete: IViewElement['complete'];\n\n        async connectedCallback() {\n            super.connectedCallback();\n            if (!this.id) {\n                this.id = crypto.randomUUID();\n            }\n            await onRender(this);\n            this.loading = false;\n            this.mounted = true;\n        }\n\n        private renderLoader() {\n            return html`\n                <div class=\"loader\">\n                    <div>\n                        <div></div>\n                        <div></div>\n                        <div></div>\n                        <div></div>\n                        <div></div>\n                        <div></div>\n                        <div></div>\n                        <div></div>\n                    </div>\n                </div>\n            `;\n        }\n\n        private renderTypeStyling() {\n            switch (this.type) {\n                case ViewElementType.Body:\n                    return html`\n                        <style>\n                            :host .app-loader {\n                                display: none;\n                            }\n                        </style>\n                    `;\n                case ViewElementType.Aside:\n                    return html`\n                        <style>\n                            :host {\n                                height: 100vh;\n                                width: auto;\n                                z-index: 3;\n                                position: fixed;\n                                top: 0;\n                                left: 0;\n                            }\n                            :host .app-loader {\n                                display: none;\n                            }\n                        </style>\n                    `;\n                default:\n                case ViewElementType.Main:\n                    return html`\n                        <style>\n                            :host {\n                                position: relative;\n                                display: block;\n                                height: 100%;\n                                width: 100%;\n                            }\n                        </style>\n                    `;\n            }\n        }\n\n        protected render() {\n            return html`\n                ${this.renderTypeStyling()} ${this.loading ? this.renderLoader() : ''}\n                <slot></slot>\n            `;\n        }\n    }\n\n    define(viewElementTag(appName), ViewElement);\n}\n"]}

package/components/chunk-ADFC4JKF.js

@@ -0,0 +1,315 @@
+import { layers, colors, borders, shadows, breakpoints, spacing } from './chunk-B6YHD7BN.js';
+import { __name, define } from './chunk-NB6ODBZJ.js';
+import { close } from '@teliads/components/icons';
+import { LitElement, css, unsafeCSS, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+function _ts_decorate(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate, "_ts_decorate");
+function _ts_metadata(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+    return Reflect.metadata(k, v);
+}
+__name(_ts_metadata, "_ts_metadata");
+var Modal = class extends LitElement {
+  static {
+    __name(this, "Modal");
+  }
+  constructor() {
+    super();
+    this.header = "";
+    this.actions = [];
+    this.required = false;
+    this.scrollMode = "outside";
+    this.hasSubHeader = false;
+  }
+  static styles = css`
+        :host {
+            display: block;
+            inset: 0;
+            z-index: ${unsafeCSS(parseInt(layers.modal) - 2)};
+        }
+
+        .backdrop {
+            inset: 0;
+            z-index: ${unsafeCSS(parseInt(layers.modal) - 1)};
+            background-color: ${unsafeCSS(colors.black)};
+            opacity: 0.3;
+        }
+
+        .container {
+            margin: 0 auto;
+            display: flex;
+            justify-content: center;
+            height: 100%;
+            width: 100%;
+        }
+
+        dialog {
+            background-color: ${unsafeCSS(colors.white)};
+            border-radius: ${unsafeCSS(borders.radiusLg)};
+            box-shadow: ${unsafeCSS(shadows.md)};
+            z-index: ${unsafeCSS(parseInt(layers.modal))};
+            max-width: ${unsafeCSS(breakpoints.breakpointLg)};
+            position: static;
+            padding: 0;
+            border: none;
+        }
+
+        .header {
+            position: relative;
+            display: flex;
+            align-items: center;
+            padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};
+            border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};
+            min-height: 40px;
+        }
+
+        .header telia-button {
+            position: absolute;
+            top: ${unsafeCSS(spacing.spacing20)};
+            right: ${unsafeCSS(spacing.spacing24)};
+        }
+
+        .sub-header {
+            padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};
+            border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};
+            display: none;
+        }
+
+        .body {
+            min-width: calc(${unsafeCSS(spacing.spacing128)} * 2);
+        }
+
+        .footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: ${unsafeCSS(spacing.spacing16)};
+        }
+    `;
+  containStyling = () => {
+    if (!this.contain) {
+      return html`<style>
+                :host {
+                    position: fixed;
+                }
+
+                .backdrop {
+                    position: absolute;
+                }
+            </style>`;
+    }
+    return html`<style>
+            :host {
+                height: 500px;
+                position: static;
+            }
+            .backdrop {
+                position: absolute;
+            }
+        </style>`;
+  };
+  scrollStyling = () => {
+    if (this.scrollMode === "inside") {
+      return html`<style>
+                .container {
+                    align-items: center;
+                }
+
+                dialog {
+                    max-height: 80%;
+                    display: flex;
+                    flex-direction: column;
+                }
+
+                .body {
+                    flex: 1;
+                    padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};
+                    height: 80%;
+                    overflow-x: hidden;
+                    overflow-y: auto;
+                }
+
+                .footer {
+                    border-top: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};
+                    padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};
+                }
+            </style>`;
+    }
+    return html`<style>
+            .container {
+                overflow-x: hidden;
+                overflow-y: overlay;
+                align-items: flex-start;
+            }
+
+            dialog {
+                display: block;
+                margin: ${unsafeCSS(spacing.spacing128)} ${unsafeCSS(spacing.spacing24)};
+            }
+
+            .footer,
+            .body {
+                margin: ${unsafeCSS(spacing.spacing24)} 0;
+                padding: 0 ${unsafeCSS(spacing.spacing32)};
+            }
+        </style>`;
+  };
+  subHeaderStyling = () => {
+    if (this.hasSubHeader) {
+      return html`<style>
+                div.sub-header {
+                    display: block;
+                }
+            </style>`;
+    }
+  };
+  closeButton = () => {
+    if (this.required) {
+      return "";
+    }
+    return html`<telia-button
+            size="sm"
+            variant="text"
+            data-testid="close-modal-button"
+            @click=${this.onCloseClick}
+            ><telia-icon size="md" svg="${close.svg}"
+        /></telia-button>`;
+  };
+  footer = () => {
+    if (!this.actions.length) {
+      return "";
+    }
+    return html`
+            <div class="footer">
+                ${repeat(this.actions, ({ disabled, variant, action, label }) => html`
+                        <telia-button
+                            disabled="${disabled ? "true" : "false"}"
+                            variant="${variant || "primary"}"
+                            size="sm"
+                            @click=${() => this.action(action)}
+                            data-testid="${action}-action-button"
+                        >
+                            ${label}
+                        </telia-button>
+                    `)}
+            </div>
+        `;
+  };
+  onBackdropClick = () => {
+    if (this.required) {
+      return;
+    }
+    return this.action("close");
+  };
+  onCloseClick = () => {
+    if (this.required) {
+      return;
+    }
+    return this.action("close");
+  };
+  onKeyDown = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (!this.required && event.key === "Escape") {
+      this.action("close");
+    }
+  };
+  // The slotchange event is only triggered if slot changes content
+  // So if event is triggered, that means sub-header is populated and should be shown
+  onSubHeaderSlotChange = () => {
+    this.hasSubHeader = true;
+  };
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("keydown", this.onKeyDown);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("keydown", this.onKeyDown);
+    super.disconnectedCallback();
+  }
+  action = (action) => {
+    const event = new CustomEvent("action", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        action
+      },
+      cancelable: true
+    });
+    return this.dispatchEvent(event);
+  };
+  render() {
+    return html`
+            ${this.containStyling()} ${this.scrollStyling()} ${this.subHeaderStyling()}
+            <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="sub-header">
+                        <slot name="sub-header" @slotchange=${this.onSubHeaderSlotChange}></slot>
+                    </div>
+                    <div class="body">
+                        <slot></slot>
+                    </div>
+                    ${this.footer()}
+                </dialog>
+            </div>
+        `;
+  }
+};
+_ts_decorate([
+  property({
+    type: String,
+    attribute: "header"
+  }),
+  _ts_metadata("design:type", String)
+], Modal.prototype, "header", void 0);
+_ts_decorate([
+  property({
+    type: Array
+  }),
+  _ts_metadata("design:type", Array)
+], Modal.prototype, "actions", void 0);
+_ts_decorate([
+  property({
+    type: Boolean,
+    attribute: "required"
+  }),
+  _ts_metadata("design:type", Boolean)
+], Modal.prototype, "required", void 0);
+_ts_decorate([
+  property({
+    type: String,
+    attribute: "scroll-mode"
+  }),
+  _ts_metadata("design:type", String)
+], Modal.prototype, "scrollMode", void 0);
+_ts_decorate([
+  state(),
+  _ts_metadata("design:type", Boolean)
+], Modal.prototype, "hasSubHeader", void 0);
+_ts_decorate([
+  property({
+    type: Boolean,
+    attribute: "contain"
+  }),
+  _ts_metadata("design:type", Boolean)
+], Modal.prototype, "contain", void 0);
+define("alliance-modal", Modal);
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-ADFC4JKF.js.map

package/components/chunk-ADFC4JKF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/alliance-modal/alliance-modal.ts"],"names":["close","LitElement","css","html","unsafeCSS","property","state","repeat","Modal","constructor","header","actions","required","scrollMode","hasSubHeader","styles","parseInt","layers","modal","colors","black","white","borders","radiusLg","shadows","md","breakpoints","breakpointLg","spacing","spacing24","spacing32","widthXs","gray200","spacing20","spacing128","spacing16","containStyling","contain","scrollStyling","subHeaderStyling","closeButton","onCloseClick","svg","footer","length","disabled","variant","action","label","onBackdropClick","onKeyDown","event","defaultPrevented","key","onSubHeaderSlotChange","connectedCallback","window","addEventListener","disconnectedCallback","removeEventListener","CustomEvent","bubbles","composed","detail","cancelable","dispatchEvent","render","type","String","attribute","Array","Boolean","define"],"mappings":"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","sourcesContent":["import type { ButtonVariantType } from '@teliads/components/dist/types/types/ButtonVariant';\nimport { close } from '@teliads/components/icons';\nimport { LitElement, css, html, unsafeCSS } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport { define } from '@/utils';\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';\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\nexport class Modal extends LitElement {\n    constructor() {\n        super();\n        this.header = '';\n        this.actions = [];\n        this.required = false;\n        this.scrollMode = 'outside';\n        this.hasSubHeader = false;\n    }\n\n    static styles = css`\n        :host {\n            display: block;\n            inset: 0;\n            z-index: ${unsafeCSS(parseInt(layers.modal) - 2)};\n        }\n\n        .backdrop {\n            inset: 0;\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            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))};\n            max-width: ${unsafeCSS(breakpoints.breakpointLg)};\n            position: static;\n            padding: 0;\n            border: none;\n        }\n\n        .header {\n            position: relative;\n            display: flex;\n            align-items: center;\n            padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};\n            border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};\n            min-height: 40px;\n        }\n\n        .header telia-button {\n            position: absolute;\n            top: ${unsafeCSS(spacing.spacing20)};\n            right: ${unsafeCSS(spacing.spacing24)};\n        }\n\n        .sub-header {\n            padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};\n            border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};\n            display: none;\n        }\n\n        .body {\n            min-width: calc(${unsafeCSS(spacing.spacing128)} * 2);\n        }\n\n        .footer {\n            display: flex;\n            justify-content: flex-end;\n            gap: ${unsafeCSS(spacing.spacing16)};\n        }\n    `;\n\n    @property({ type: String, attribute: 'header' })\n    declare header: string;\n\n    @property({ type: Array })\n    declare actions: Action[];\n\n    @property({ type: Boolean, attribute: 'required' })\n    declare required: boolean;\n\n    @property({ type: String, attribute: 'scroll-mode' })\n    declare scrollMode: 'outside' | 'inside';\n\n    @state()\n    declare hasSubHeader: boolean;\n\n    // Internal usage only\n    // Used in Storybook to contain modal in story\n    @property({ type: Boolean, attribute: 'contain' })\n    declare contain?: boolean;\n\n    containStyling = () => {\n        if (!this.contain) {\n            return html`<style>\n                :host {\n                    position: fixed;\n                }\n\n                .backdrop {\n                    position: absolute;\n                }\n            </style>`;\n        }\n\n        return html`<style>\n            :host {\n                height: 500px;\n                position: static;\n            }\n            .backdrop {\n                position: absolute;\n            }\n        </style>`;\n    };\n\n    scrollStyling = () => {\n        if (this.scrollMode === 'inside') {\n            return html`<style>\n                .container {\n                    align-items: center;\n                }\n\n                dialog {\n                    max-height: 80%;\n                    display: flex;\n                    flex-direction: column;\n                }\n\n                .body {\n                    flex: 1;\n                    padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};\n                    height: 80%;\n                    overflow-x: hidden;\n                    overflow-y: auto;\n                }\n\n                .footer {\n                    border-top: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};\n                    padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};\n                }\n            </style>`;\n        }\n\n        return html`<style>\n            .container {\n                overflow-x: hidden;\n                overflow-y: overlay;\n                align-items: flex-start;\n            }\n\n            dialog {\n                display: block;\n                margin: ${unsafeCSS(spacing.spacing128)} ${unsafeCSS(spacing.spacing24)};\n            }\n\n            .footer,\n            .body {\n                margin: ${unsafeCSS(spacing.spacing24)} 0;\n                padding: 0 ${unsafeCSS(spacing.spacing32)};\n            }\n        </style>`;\n    };\n\n    subHeaderStyling = () => {\n        if (this.hasSubHeader) {\n            return html`<style>\n                div.sub-header {\n                    display: block;\n                }\n            </style>`;\n        }\n    };\n\n    closeButton = () => {\n        if (this.required) {\n            return '';\n        }\n\n        return html`<telia-button\n            size=\"sm\"\n            variant=\"text\"\n            data-testid=\"close-modal-button\"\n            @click=${this.onCloseClick}\n            ><telia-icon size=\"md\" svg=\"${close.svg}\"\n        /></telia-button>`;\n    };\n\n    footer = () => {\n        if (!this.actions.length) {\n            return '';\n        }\n\n        return html`\n            <div class=\"footer\">\n                ${repeat(\n                    this.actions,\n                    ({ disabled, variant, action, label }) => html`\n                        <telia-button\n                            disabled=\"${disabled ? 'true' : 'false'}\"\n                            variant=\"${variant || 'primary'}\"\n                            size=\"sm\"\n                            @click=${() => this.action(action)}\n                            data-testid=\"${action}-action-button\"\n                        >\n                            ${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    // The slotchange event is only triggered if slot changes content\n    // So if event is triggered, that means sub-header is populated and should be shown\n    onSubHeaderSlotChange = () => {\n        this.hasSubHeader = true;\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()} ${this.scrollStyling()} ${this.subHeaderStyling()}\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=\"sub-header\">\n                        <slot name=\"sub-header\" @slotchange=${this.onSubHeaderSlotChange}></slot>\n                    </div>\n                    <div class=\"body\">\n                        <slot></slot>\n                    </div>\n                    ${this.footer()}\n                </dialog>\n            </div>\n        `;\n    }\n}\n\ndefine('alliance-modal', Modal);\n"]}

package/components/chunk-B6YHD7BN.js

@@ -0,0 +1,4 @@
+export { borders, breakpoints, colors, layers, motion, shadows, spacing } from '@teliads/components/foundations';
+export { default as focus } from '@teliads/components/foundations/focus/variables.json';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-B6YHD7BN.js.map