@telia-ace/alliance-ui 1.0.16-next.0 → 1.0.16-next.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @telia-ace/alliance-ui
 
+## 1.0.16-next.1
+
+### Patch Changes
+
+-   d8c3069: Ensure `href` attribute is properly reflected and use [`display: contents`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#contents) on the `<alliance-link>` host element.
+-   d8c3069: Add `<alliance-pop-over>` component.
+    -   @telia-ace/alliance-internal-client-utilities@1.0.5-next.0
+
 ## 1.0.16-next.0
 
 ### Patch Changes

package/components/alliance-link.js

@@ -1,4 +1,4 @@
-import './chunk-WYQTL7R3.js';
-import './chunk-NB6ODBZJ.js';
+import './chunk-2PC6L5RK.js';
+import './chunk-AW7BCYX5.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=alliance-link.js.map

package/components/alliance-modal.js

@@ -1,7 +1,7 @@
-import './chunk-ADFC4JKF.js';
+import './chunk-4546RD56.js';
 import './chunk-JQ76TOQT.js';
 import './chunk-P2AWWJPH.js';
-import './chunk-B6YHD7BN.js';
-import './chunk-NB6ODBZJ.js';
+import './chunk-5A2VXG2P.js';
+import './chunk-AW7BCYX5.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=alliance-modal.js.map

package/components/alliance-paginator.js

@@ -1,6 +1,6 @@
-import './chunk-LYU2K33W.js';
+import './chunk-CZPHL6EU.js';
 import './chunk-JQ76TOQT.js';
-import './chunk-B6YHD7BN.js';
-import './chunk-NB6ODBZJ.js';
+import './chunk-5A2VXG2P.js';
+import './chunk-AW7BCYX5.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=alliance-paginator.js.map

package/components/alliance-pop-over.d.ts

@@ -0,0 +1,2 @@
+
+export { }

package/components/alliance-pop-over.js

@@ -0,0 +1,5 @@
+import './chunk-IFHLWFVT.js';
+import './chunk-5A2VXG2P.js';
+import './chunk-AW7BCYX5.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=alliance-pop-over.js.map

package/components/alliance-pop-over.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/components/alliance-table.js

@@ -1,6 +1,6 @@
-import './chunk-XPHFAKEI.js';
+import './chunk-MA6NFT5S.js';
 import './chunk-P2AWWJPH.js';
-import './chunk-B6YHD7BN.js';
-import './chunk-NB6ODBZJ.js';
+import './chunk-5A2VXG2P.js';
+import './chunk-AW7BCYX5.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=alliance-table.js.map

package/components/alliance-view.js

@@ -1,41 +1,34 @@
-import { __name, define } from './chunk-NB6ODBZJ.js';
+import { __decorateClass, define } from './chunk-AW7BCYX5.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) {
+var ViewElementType = /* @__PURE__ */ ((ViewElementType2) => {
   ViewElementType2["Main"] = "main";
   ViewElementType2["Aside"] = "aside";
   ViewElementType2["Body"] = "body";
-})(ViewElementType || (ViewElementType = {}));
+  return ViewElementType2;
+})(ViewElementType || {});
 function viewElementTag(appName) {
   return `${viewElementPrefix}${appName}`;
 }
-__name(viewElementTag, "viewElementTag");
 function registerViewElement(appName, onRender) {
-  let ViewElement = class ViewElement extends LitElement {
-    static {
-      __name(this, "ViewElement");
+  class ViewElement extends LitElement {
+    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 }));
+      };
     }
-    static styles = css`
+    static {
+      this.styles = css`
             .loader {
                 background-color: rgba(255, 255, 255, 0.4);
                 z-index: var(--layer-modal);
@@ -133,19 +126,6 @@ function registerViewElement(appName, onRender) {
                 }
             }
         `;
-    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)) {
@@ -181,7 +161,7 @@ function registerViewElement(appName, onRender) {
     }
     renderTypeStyling() {
       switch (this.type) {
-        case "body":
+        case "body" /* Body */:
           return html`
                         <style>
                             :host .app-loader {
@@ -189,7 +169,7 @@ function registerViewElement(appName, onRender) {
                             }
                         </style>
                     `;
-        case "aside":
+        case "aside" /* Aside */:
           return html`
                         <style>
                             :host {
@@ -206,7 +186,7 @@ function registerViewElement(appName, onRender) {
                         </style>
                     `;
         default:
-        case "main":
+        case "main" /* Main */:
           return html`
                         <style>
                             :host {
@@ -225,66 +205,30 @@ function registerViewElement(appName, onRender) {
                 <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);
+  }
+  __decorateClass([
+    property({ type: Boolean, attribute: viewElementSelector, reflect: true })
+  ], ViewElement.prototype, "appView", 2);
+  __decorateClass([
+    property({ type: Boolean, attribute: true, reflect: true })
+  ], ViewElement.prototype, "mounted", 2);
+  __decorateClass([
+    property({ type: Boolean, attribute: true, reflect: true })
+  ], ViewElement.prototype, "loading", 2);
+  __decorateClass([
+    property({ type: String, attribute: false, reflect: true })
+  ], ViewElement.prototype, "app", 2);
+  __decorateClass([
+    property({ type: String, attribute: true, reflect: true })
+  ], ViewElement.prototype, "type", 2);
+  __decorateClass([
+    property({ type: String, attribute: true, reflect: true })
+  ], ViewElement.prototype, "capability", 2);
+  __decorateClass([
+    property({ type: Object, attribute: true, reflect: true })
+  ], ViewElement.prototype, "args", 2);
   define(viewElementTag(appName), ViewElement);
 }
-__name(registerViewElement, "registerViewElement");
 
 export { ViewElementType, registerViewElement, viewElementPrefix, viewElementSelector, viewElementTag };
 //# sourceMappingURL=out.js.map

package/components/alliance-view.js.map

@@ -1 +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"]}
+{"version":3,"sources":["../src/components/alliance-view/alliance-view.ts"],"names":["ViewElementType"],"mappings":"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","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-2PC6L5RK.js

@@ -0,0 +1,115 @@
+import { __decorateClass, define } from './chunk-AW7BCYX5.js';
+import { createCapabilityPath, onEnter } from '@telia-ace/alliance-internal-client-utilities';
+import { LitElement, css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+
+function isOnCurrentPath(path = "") {
+  const cleanedPath = location.href.replace(location.origin, "");
+  return cleanedPath.startsWith(path);
+}
+var Link = class extends LitElement {
+  constructor() {
+    super();
+    this.navigate = () => {
+      if (this.active) {
+        return;
+      }
+      history.pushState({}, "", this._href);
+      window.dispatchEvent(new Event("popstate"));
+    };
+    this.clickHandler = (event) => {
+      if (!this.app || this.download) {
+        return;
+      }
+      event.preventDefault();
+      this.navigate();
+    };
+    this.updateActive = () => {
+      this.active = isOnCurrentPath(this._href);
+    };
+    this.computeHref = () => {
+      if (this.app) {
+        this._href = this.href = createCapabilityPath(this.app, this.capability, this.args);
+        this.updateActive();
+        return;
+      }
+      if (this.href) {
+        this.capability = "";
+        return this._href = this.href;
+      }
+      throw new Error(
+        "The <alliance-link> component requires either the 'app' property or 'href' property!"
+      );
+    };
+    this.args = {};
+    this.download = false;
+    this.target = "_self";
+    this.href = this._href = "";
+    this.capability = "launch";
+    this.active = false;
+  }
+  static {
+    this.styles = css`
+        :host {
+            display: contents;
+        }
+    `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("popstate", this.updateActive);
+    this.computeHref();
+  }
+  disconnectedCallback() {
+    window.removeEventListener("popstate", this.updateActive);
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(_1, _2, _3) {
+    super.attributeChangedCallback(_1, _2, _3);
+    setTimeout(() => this.computeHref());
+  }
+  render() {
+    return html`<a
+            part="anchor"
+            rel=${this.rel}
+            .target=${this.target}
+            .href=${this._href}
+            ?download=${this.download}
+            ?active=${this.active}
+            @click=${this.clickHandler}
+            @keydown=${onEnter(this.clickHandler)}
+        >
+            <slot></slot>
+        </a>`;
+  }
+};
+__decorateClass([
+  property({ type: String, attribute: true, reflect: true })
+], Link.prototype, "capability", 2);
+__decorateClass([
+  property({ type: String, attribute: true, reflect: true })
+], Link.prototype, "app", 2);
+__decorateClass([
+  property({ type: Object, attribute: true, reflect: true })
+], Link.prototype, "args", 2);
+__decorateClass([
+  property({ type: String, attribute: true, reflect: true })
+], Link.prototype, "href", 2);
+__decorateClass([
+  property({ type: String })
+], Link.prototype, "target", 2);
+__decorateClass([
+  property({ type: String, attribute: true, reflect: true })
+], Link.prototype, "rel", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: true, reflect: true })
+], Link.prototype, "download", 2);
+__decorateClass([
+  property({ type: String, attribute: false, reflect: false })
+], Link.prototype, "_href", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: true, reflect: true })
+], Link.prototype, "active", 2);
+define("alliance-link", Link);
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-2PC6L5RK.js.map

package/components/chunk-2PC6L5RK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/alliance-link/alliance-link.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    type SerializeableObject,\n    createCapabilityPath,\n    onEnter,\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\nfunction isOnCurrentPath(path: string = '') {\n    const cleanedPath = location.href.replace(location.origin, '');\n    return cleanedPath.startsWith(path);\n}\n\nexport class Link extends LitElement {\n    constructor() {\n        super();\n        this.args = {};\n        this.download = false;\n        this.target = '_self';\n        this.href = this._href = '';\n        this.capability = 'launch';\n        this.active = false;\n    }\n\n    static styles = css`\n        :host {\n            display: contents;\n        }\n    `;\n\n    @property({ type: String, attribute: true, reflect: true })\n    declare capability: string;\n\n    @property({ type: String, attribute: true, reflect: true })\n    declare app: string;\n\n    @property({ type: Object, attribute: true, reflect: true })\n    declare args: SerializeableObject;\n\n    /**\n     * Link properties\n     */\n    @property({ type: String, attribute: true, reflect: true })\n    declare href?: string;\n\n    @property({ type: String })\n    declare target?: string;\n\n    @property({ type: String, attribute: true, reflect: true })\n    declare rel?: string;\n\n    @property({ type: Boolean, attribute: true, reflect: true })\n    declare download?: boolean;\n\n    navigate = () => {\n        if (this.active) {\n            return;\n        }\n\n        history.pushState({}, '', this._href);\n        window.dispatchEvent(new Event('popstate'));\n    };\n\n    clickHandler = (event: MouseEvent | KeyboardEvent) => {\n        if (!this.app || this.download) {\n            return;\n        }\n\n        event.preventDefault();\n\n        this.navigate();\n    };\n\n    updateActive = () => {\n        this.active = isOnCurrentPath(this._href);\n    };\n\n    connectedCallback() {\n        super.connectedCallback();\n        window.addEventListener('popstate', this.updateActive);\n        this.computeHref();\n    }\n\n    disconnectedCallback() {\n        window.removeEventListener('popstate', this.updateActive);\n        super.disconnectedCallback();\n    }\n\n    attributeChangedCallback(_1: string, _2: string | null, _3: string | null) {\n        super.attributeChangedCallback(_1, _2, _3);\n\n        // FUTURE TODO: Try to figure out this timeout is needed\n        // Update seems to happen too early if this is not timed\n        setTimeout(() => this.computeHref());\n    }\n\n    /**\n     * Internal properties\n     */\n    @property({ type: String, attribute: false, reflect: false })\n    private declare _href: string;\n\n    @property({ type: Boolean, attribute: true, reflect: true })\n    private declare active: boolean;\n\n    private computeHref = () => {\n        if (this.app) {\n            this._href = this.href = createCapabilityPath(this.app, this.capability, this.args);\n            this.updateActive();\n            return;\n        }\n\n        if (this.href) {\n            this.capability = '';\n            return (this._href = this.href);\n        }\n\n        throw new Error(\n            \"The <alliance-link> component requires either the 'app' property or 'href' property!\",\n        );\n    };\n\n    render() {\n        return html`<a\n            part=\"anchor\"\n            rel=${this.rel}\n            .target=${this.target}\n            .href=${this._href}\n            ?download=${this.download}\n            ?active=${this.active}\n            @click=${this.clickHandler}\n            @keydown=${onEnter(this.clickHandler)}\n        >\n            <slot></slot>\n        </a>`;\n    }\n}\n\ndefine('alliance-link', Link);\n"]}