@telia-ace/alliance-ui 1.0.12 → 1.0.13-next.0

package/components/alliance-link.js

@@ -1,3 +1,150 @@
-import "../chunks/alliance-link-8cb7d7d9.js";
-import "../chunks/query-assigned-elements-024d0918.js";
+import { n as s, e as d, s as y, x as f } from "../chunks/query-assigned-elements-ac91685f.js";
+var v = Object.defineProperty, g = (e, t, r) => t in e ? v(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, u = (e, t, r) => (g(e, typeof t != "symbol" ? t + "" : t, r), r);
+function m(e) {
+  const t = Object.entries(e).reduce((r, a) => {
+    const [i, o] = a;
+    return typeof o > "u" || (typeof o == "object" && o !== null ? r[i] = JSON.stringify(o) : r[i] = o), r;
+  }, {});
+  return Object.keys(t).length ? `?${new URLSearchParams(t)}` : "";
+}
+function S(e = "", t = "", r = {}) {
+  const a = w().replace(location.origin, ""), i = m(r);
+  return e ? t ? `${a}/${e}/${t}${i}` : `${a}/${e}${i}` : `${a}${i}`;
+}
+function w() {
+  return globalThis.__ALLIANCE_RUNTIME_ROOT_URL;
+}
+var h = /* @__PURE__ */ ((e) => (e[e.AlreadyExists = 0] = "AlreadyExists", e[e.ApiGatewayPortDescription = 1] = "ApiGatewayPortDescription", e[e.ApiServerModeDescription = 2] = "ApiServerModeDescription", e[e.AppConfigurationPath = 3] = "AppConfigurationPath", e[e.AppCreated = 4] = "AppCreated", e[e.AppEntryBuildOptionDescription = 5] = "AppEntryBuildOptionDescription", e[e.AppNameInquiry = 6] = "AppNameInquiry", e[e.BuildDescription = 7] = "BuildDescription", e[e.BuildModeOptionDescription = 8] = "BuildModeOptionDescription", e[e.BuildWatchDescription = 9] = "BuildWatchDescription", e[e.CreateAppDescription = 10] = "CreateAppDescription", e[e.CreateWorkspaceDescription = 11] = "CreateWorkspaceDescription", e[e.DevServerOpenDescription = 12] = "DevServerOpenDescription", e[e.DevServerPortDescription = 13] = "DevServerPortDescription", e[e.DevServerLoggingDescription = 14] = "DevServerLoggingDescription", e[e.Done = 15] = "Done", e[e.FetchPackageVersionError = 16] = "FetchPackageVersionError", e[e.ManifestEntryBuildOptionDescription = 17] = "ManifestEntryBuildOptionDescription", e[e.MissingTranslationKey = 18] = "MissingTranslationKey", e[e.NoAppName = 19] = "NoAppName", e[e.NoAppNameFound = 20] = "NoAppNameFound", e[e.NoAppOrWorkspaceInCurrentDirectory = 21] = "NoAppOrWorkspaceInCurrentDirectory", e[e.NoWorkspaceName = 22] = "NoWorkspaceName", e[e.OperationCancelled = 23] = "OperationCancelled", e[e.ServeDescription = 24] = "ServeDescription", e[e.ServedStopped = 25] = "ServedStopped", e[e.ServerGatewayMode = 26] = "ServerGatewayMode", e[e.ServerMode = 27] = "ServerMode", e[e.ServerModeInquiry = 28] = "ServerModeInquiry", e[e.ServerProxyMode = 29] = "ServerProxyMode", e[e.StopServerInstructions = 30] = "StopServerInstructions", e[e.TemplateFrameworkInquiry = 31] = "TemplateFrameworkInquiry", e[e.TemplateLanguageInquiry = 32] = "TemplateLanguageInquiry", e[e.UnrecognizedCommand = 33] = "UnrecognizedCommand", e[e.WorkspaceCreated = 34] = "WorkspaceCreated", e[e.WorkspaceNameInquiry = 35] = "WorkspaceNameInquiry", e))(h || {});
+const D = {
+  15: "Done",
+  22: "No workspace name provided!",
+  19: "No app name provided!",
+  0: "File or directory '{0}' already exists!",
+  21: "Could not find any app entry file at '{0}'!",
+  33: "Unrecognized command(s) {0}!",
+  34: "Workspace was created at path '{0}'!",
+  4: "App was created at path '{0}'!",
+  25: "Server stopped.",
+  11: "Creates an Alliance Workspace in the current directory.",
+  10: "Creates an Alliance Application in the current directory or Alliance Workspace.",
+  24: "Starts a Alliance development server using the current directory package.json.",
+  7: "Builds an Alliance Application using Vite.",
+  35: "Enter the name of your workspace",
+  28: "Which server mode do you want to use?",
+  6: "Enter the name of your app",
+  18: "No translation key provided!",
+  23: "Operation cancelled.",
+  30: `Press CTRL + C to stop the server.
+`,
+  32: "Select preferred language",
+  31: "Select preferred framework template",
+  13: "The port that the dev server should use.",
+  14: "Whether the dev server and browser console should output more log information or not (false).",
+  1: "The port that the api gateway should use.",
+  2: "Which components to start. [server|server-proxy|server-gateway].",
+  12: "Whether the dev server should automatically open in your browser or not.",
+  9: "Whether the build should start watching and rebuild when files change or not.",
+  5: "The entry file for the app (./src/app).",
+  17: "The entry file for the app manifest (./src/manifest).",
+  8: "Which mode to use when building the app.",
+  16: "Failed to fetch package info from the NPM registry for package '${0}'!",
+  20: "Could not find app name in manifest.",
+  3: "The path to the app configuration file.",
+  27: "Server",
+  29: "Server with proxy",
+  26: "Server with gateway"
+}, c = class {
+};
+u(c, "getTranslations", () => D), u(c, "getTranslation", (e, ...t) => {
+  const r = c.getTranslations()[e];
+  if (!r)
+    throw new Error(`Could not find text with given key '${e}'.`);
+  return t.reduce(
+    (a, i, o) => a.toString().replace(`{${o}}`, i.toString()),
+    r
+  ).toString();
+}), u(c, "get", (e = h.MissingTranslationKey, ...t) => c.getTranslation(e, ...t));
+function b(e) {
+  return (t) => {
+    t.key === "Enter" && e(t);
+  };
+}
+var k = Object.defineProperty, A = Object.getOwnPropertyDescriptor, p = (e, t, r, a) => {
+  for (var i = a > 1 ? void 0 : a ? A(t, r) : t, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (i = (a ? l(t, r, i) : l(i)) || i);
+  return a && i && k(t, r, i), i;
+};
+function C(e = "") {
+  return location.href.replace(location.origin, "").startsWith(e);
+}
+let n = class extends y {
+  constructor() {
+    super(...arguments), this.capability = "", this.app = "", this.args = {}, this.navigate = () => {
+      history.pushState(this.args, "", this._href), window.dispatchEvent(new Event("popstate"));
+    }, this.clickHandler = (e) => {
+      this.href || this.download || (e.preventDefault(), this.navigate());
+    }, this.updateActive = () => {
+      this.active = C(this._href);
+    }, this._href = "", this.active = !1, this.computeHref = () => {
+      if (this.href)
+        return this._href = this.href;
+      if (!this.app)
+        throw new Error("The app property is required when creating a capability link!");
+      this._href = S(this.app, this.capability, this.args), this.updateActive();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("popstate", this.updateActive), this.computeHref();
+  }
+  disconnectedCallback() {
+    window.removeEventListener("popstate", this.updateActive), super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, t, r) {
+    super.attributeChangedCallback(e, t, r), setTimeout(() => this.computeHref());
+  }
+  render() {
+    return f`<a
+            part="anchor"
+            target=${this.target}
+            rel=${this.rel}
+            download=${this.download}
+            .href=${this._href}
+            ?active=${this.active}
+            @click=${this.clickHandler}
+            @keydown=${b(this.clickHandler)}
+        >
+            <slot></slot>
+        </a>`;
+  }
+};
+p([
+  s({ type: String, attribute: !0, reflect: !0 })
+], n.prototype, "capability", 2);
+p([
+  s({ type: String, attribute: !0, reflect: !0 })
+], n.prototype, "app", 2);
+p([
+  s({ type: Object, attribute: !0, reflect: !0 })
+], n.prototype, "args", 2);
+p([
+  s({ type: String, attribute: !0, reflect: !0 })
+], n.prototype, "href", 2);
+p([
+  s({ type: String })
+], n.prototype, "target", 2);
+p([
+  s({ type: String, attribute: !0, reflect: !0 })
+], n.prototype, "rel", 2);
+p([
+  s({ type: String, attribute: !0, reflect: !0 })
+], n.prototype, "download", 2);
+p([
+  s({ type: String, attribute: !1, reflect: !1 })
+], n.prototype, "_href", 2);
+p([
+  s({ type: Boolean, attribute: "active", reflect: !0 })
+], n.prototype, "active", 2);
+n = p([
+  d("alliance-link")
+], n);
 //# sourceMappingURL=alliance-link.js.map

package/components/alliance-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"alliance-link.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"alliance-link.js","sources":["../../../internal/client-utilities/dist/index.js","../src/components/alliance-link/alliance-link.ts"],"sourcesContent":["var f = Object.defineProperty;\nvar v = (e, t, i) => t in e ? f(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;\nvar a = (e, t, i) => (v(e, typeof t != \"symbol\" ? t + \"\" : t, i), i);\nvar N = /* @__PURE__ */ ((e) => (e[e.AlreadyInitialized = 1e3] = \"AlreadyInitialized\", e[e.NoAppNameOrKey = 1001] = \"NoAppNameOrKey\", e[e.MissingAppController = 1002] = \"MissingAppController\", e[e.MissingCapabilityOnApp = 1003] = \"MissingCapabilityOnApp\", e[e.MissingManagedObjectProvider = 1004] = \"MissingManagedObjectProvider\", e[e.NoManifest = 1005] = \"NoManifest\", e[e.NoRootElement = 1006] = \"NoRootElement\", e[e.NoView = 1007] = \"NoView\", e[e.CookieKeyNotDefined = 1008] = \"CookieKeyNotDefined\", e[e.CookieCategoryNotAllowed = 1009] = \"CookieCategoryNotAllowed\", e[e.StorageKeyNotDefined = 1010] = \"StorageKeyNotDefined\", e[e.StorageCategoryNotAllowed = 1011] = \"StorageCategoryNotAllowed\", e[e.LocalizationTemplateNotDefined = 1012] = \"LocalizationTemplateNotDefined\", e))(N || {}), A = /* @__PURE__ */ ((e) => (e[e.CurrentUserMissingProvider = 2e3] = \"CurrentUserMissingProvider\", e[e.CurrentUserGatewayNotStarted = 2001] = \"CurrentUserGatewayNotStarted\", e[e.CurrentUserMissingBackend = 2002] = \"CurrentUserMissingBackend\", e[e.CurrentUserMissingInDatabase = 2003] = \"CurrentUserMissingInDatabase\", e))(A || {});\nfunction m(e, t) {\n  return Object.entries(t).reduce((i, [r, n]) => i.replaceAll(`{{${r}}}`, n), e);\n}\nconst S = {\n  // framework\n  1e3: \"The runtime has already been initialized\",\n  1001: \"App name and/or app key is not defined on global scope\",\n  1002: \"No app controller registered for app '{{app}}'\",\n  1003: \"No capability '{{capability}}' enabled for app '{{app}}'\",\n  1004: \"No managed object provider registered for object '{{object}}'\",\n  1005: \"The current apps manifest is not defined on global scope\",\n  1006: \"Could not find the root element in the DOM\",\n  1007: \"Could not find view with id '{{id}}' on view controller for app '{{app}}'\",\n  1008: \"Cookie key '{{key}}' not present in manifest, cookie has not been set\",\n  1009: \"Cookies categorized as '{{category}}' are not allowed by the user, cookie '{{key}}' has not been set\",\n  1010: \"Storage key '{{key}}' not present in manifest, item has not been stored\",\n  1011: \"Storage categorized as '{{category}}' is not allowed by the user, item '{{key}}' has not been stored\",\n  1012: \"The translation template, referred by the key '{{key}}' is being used in app, but is not defined in the manifest.\",\n  // utilities\n  2e3: \"No managed object provider registered for object 'currentUser'\",\n  2001: \"Could not access the gateway when querying 'currentUser'\",\n  2002: \"Could not access the required backend when querying 'currentUser'\",\n  2003: \"Could not locate the authenticated user in the Alliance database\"\n}, d = \"AllianceError\";\nclass I extends Error {\n  constructor(t, i = {}) {\n    const r = m(S[t], i), n = `https://github.com/telia-company/ace-alliance-sdk/wiki/error-codes#${t}`;\n    super(r), this.code = t, this.name = d, this.stack = `[${t}] - ${r}\n` + n;\n  }\n}\nfunction k(e) {\n  return !!e.code && e.name === d;\n}\nfunction D(e) {\n  const i = Object.entries(e).reduce((r, n) => {\n    const [o, p] = n;\n    return typeof p > \"u\" || (typeof p == \"object\" && p !== null ? r[o] = JSON.stringify(p) : r[o] = p), r;\n  }, {});\n  return Object.keys(i).length ? `?${new URLSearchParams(i)}` : \"\";\n}\nfunction b() {\n  const e = l(), { href: t, search: i } = window.location;\n  return t.replace(e, \"\").replace(i, \"\");\n}\nfunction C(e = \"\", t = \"\", i = {}) {\n  const r = l().replace(location.origin, \"\"), n = D(i);\n  return e ? t ? `${r}/${e}/${t}${n}` : `${r}/${e}${n}` : `${r}${n}`;\n}\nfunction W() {\n  const e = b(), [t = \"\", i = \"\"] = e.split(\"/\").filter((r) => !!r);\n  return {\n    app: t,\n    capability: i\n  };\n}\nfunction P(e) {\n  const { origin: t, pathname: i } = window.location;\n  if (e === \"production\") {\n    const [r] = i.split(\"/\").filter((n) => !!n);\n    return globalThis.__ALLIANCE_RUNTIME_ROOT_URL = `${t}/${r}`;\n  }\n  return globalThis.__ALLIANCE_RUNTIME_ROOT_URL = t;\n}\nfunction l() {\n  return globalThis.__ALLIANCE_RUNTIME_ROOT_URL;\n}\nvar s = /* @__PURE__ */ ((e) => (e[e.AlreadyExists = 0] = \"AlreadyExists\", e[e.ApiGatewayPortDescription = 1] = \"ApiGatewayPortDescription\", e[e.ApiServerModeDescription = 2] = \"ApiServerModeDescription\", e[e.AppConfigurationPath = 3] = \"AppConfigurationPath\", e[e.AppCreated = 4] = \"AppCreated\", e[e.AppEntryBuildOptionDescription = 5] = \"AppEntryBuildOptionDescription\", e[e.AppNameInquiry = 6] = \"AppNameInquiry\", e[e.BuildDescription = 7] = \"BuildDescription\", e[e.BuildModeOptionDescription = 8] = \"BuildModeOptionDescription\", e[e.BuildWatchDescription = 9] = \"BuildWatchDescription\", e[e.CreateAppDescription = 10] = \"CreateAppDescription\", e[e.CreateWorkspaceDescription = 11] = \"CreateWorkspaceDescription\", e[e.DevServerOpenDescription = 12] = \"DevServerOpenDescription\", e[e.DevServerPortDescription = 13] = \"DevServerPortDescription\", e[e.DevServerLoggingDescription = 14] = \"DevServerLoggingDescription\", e[e.Done = 15] = \"Done\", e[e.FetchPackageVersionError = 16] = \"FetchPackageVersionError\", e[e.ManifestEntryBuildOptionDescription = 17] = \"ManifestEntryBuildOptionDescription\", e[e.MissingTranslationKey = 18] = \"MissingTranslationKey\", e[e.NoAppName = 19] = \"NoAppName\", e[e.NoAppNameFound = 20] = \"NoAppNameFound\", e[e.NoAppOrWorkspaceInCurrentDirectory = 21] = \"NoAppOrWorkspaceInCurrentDirectory\", e[e.NoWorkspaceName = 22] = \"NoWorkspaceName\", e[e.OperationCancelled = 23] = \"OperationCancelled\", e[e.ServeDescription = 24] = \"ServeDescription\", e[e.ServedStopped = 25] = \"ServedStopped\", e[e.ServerGatewayMode = 26] = \"ServerGatewayMode\", e[e.ServerMode = 27] = \"ServerMode\", e[e.ServerModeInquiry = 28] = \"ServerModeInquiry\", e[e.ServerProxyMode = 29] = \"ServerProxyMode\", e[e.StopServerInstructions = 30] = \"StopServerInstructions\", e[e.TemplateFrameworkInquiry = 31] = \"TemplateFrameworkInquiry\", e[e.TemplateLanguageInquiry = 32] = \"TemplateLanguageInquiry\", e[e.UnrecognizedCommand = 33] = \"UnrecognizedCommand\", e[e.WorkspaceCreated = 34] = \"WorkspaceCreated\", e[e.WorkspaceNameInquiry = 35] = \"WorkspaceNameInquiry\", e))(s || {});\nconst M = {\n  15: \"Done\",\n  22: \"No workspace name provided!\",\n  19: \"No app name provided!\",\n  0: \"File or directory '{0}' already exists!\",\n  21: \"Could not find any app entry file at '{0}'!\",\n  33: \"Unrecognized command(s) {0}!\",\n  34: \"Workspace was created at path '{0}'!\",\n  4: \"App was created at path '{0}'!\",\n  25: \"Server stopped.\",\n  11: \"Creates an Alliance Workspace in the current directory.\",\n  10: \"Creates an Alliance Application in the current directory or Alliance Workspace.\",\n  24: \"Starts a Alliance development server using the current directory package.json.\",\n  7: \"Builds an Alliance Application using Vite.\",\n  35: \"Enter the name of your workspace\",\n  28: \"Which server mode do you want to use?\",\n  6: \"Enter the name of your app\",\n  18: \"No translation key provided!\",\n  23: \"Operation cancelled.\",\n  30: `Press CTRL + C to stop the server.\n`,\n  32: \"Select preferred language\",\n  31: \"Select preferred framework template\",\n  13: \"The port that the dev server should use.\",\n  14: \"Whether the dev server and browser console should output more log information or not (false).\",\n  1: \"The port that the api gateway should use.\",\n  2: \"Which components to start. [server|server-proxy|server-gateway].\",\n  12: \"Whether the dev server should automatically open in your browser or not.\",\n  9: \"Whether the build should start watching and rebuild when files change or not.\",\n  5: \"The entry file for the app (./src/app).\",\n  17: \"The entry file for the app manifest (./src/manifest).\",\n  8: \"Which mode to use when building the app.\",\n  16: \"Failed to fetch package info from the NPM registry for package '${0}'!\",\n  20: \"Could not find app name in manifest.\",\n  3: \"The path to the app configuration file.\",\n  27: \"Server\",\n  29: \"Server with proxy\",\n  26: \"Server with gateway\"\n}, c = class c {\n};\na(c, \"getTranslations\", () => M), a(c, \"getTranslation\", (t, ...i) => {\n  const n = c.getTranslations()[t];\n  if (!n)\n    throw new Error(`Could not find text with given key '${t}'.`);\n  return i.reduce(\n    (p, h, g) => p.toString().replace(`{${g}}`, h.toString()),\n    n\n  ).toString();\n}), a(c, \"get\", (t = s.MissingTranslationKey, ...i) => c.getTranslation(t, ...i));\nlet u = c;\nfunction R(e, t) {\n  return O(Object.values(e), ({ name: i }) => ({\n    label: i,\n    value: i,\n    selected: t === i\n  }));\n}\nvar y = /* @__PURE__ */ ((e) => (e.Primary = \"primary\", e.Secondary = \"secondary\", e.Expressive = \"expressive\", e.Destructive = \"destructive\", e.Text = \"text\", e.PrimaryWhite = \"primary-white\", e.SecondaryWhite = \"secondary-white\", e.ExpressiveWhite = \"expressive-white\", e.TertiaryPurple = \"tertiary-purple\", e))(y || {});\nfunction $(e, t) {\n  return Object.values(e).find((r) => r.name === t);\n}\nfunction O(e, t, i = \"Choose...\") {\n  return e.reduce(\n    (r, n) => (r.push({\n      disabled: !1,\n      selected: !1,\n      ...t(n)\n    }), r),\n    [\n      {\n        label: i,\n        value: \"\",\n        disabled: !0,\n        selected: !0\n      }\n    ]\n  );\n}\nfunction L(e) {\n  return (t) => {\n    t.key === \"Enter\" && e(t);\n  };\n}\nfunction U(e, t = \"all\") {\n  const { email: i, displayName: r } = e, n = r && r !== \"unknown\", o = !!i;\n  switch (t) {\n    case \"all\": {\n      if (n && o)\n        return `${r} (${i})`;\n      if (n)\n        return r;\n      if (o)\n        return i;\n    }\n    case \"single\": {\n      if (n)\n        return r;\n      if (o)\n        return i;\n    }\n  }\n  return \"<UNKNOWN USER>\";\n}\nfunction j(...e) {\n  return e.filter((t) => !!t).join(\" \");\n}\nexport {\n  I as AllianceError,\n  N as FrameworkErrorCodes,\n  u as Texts,\n  s as TranslationsKey,\n  A as UtilitiesErrorCodes,\n  y as VocaButtonVariant,\n  j as classNames,\n  C as createCapabilityPath,\n  U as friendlyUserName,\n  W as getCurrentLocationInfo,\n  l as getRuntimeRootUrl,\n  $ as getVocaIcon,\n  k as isAllianceError,\n  O as mapToVocaOptions,\n  L as onEnter,\n  P as setRuntimeRootUrl,\n  R as vocaIconsToOptions\n};\n//# sourceMappingURL=index.js.map\n","import {\n    SerializeableObject,\n    createCapabilityPath,\n    onEnter,\n} from '@telia-ace/alliance-internal-client-utilities';\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nfunction isOnCurrentPath(path: string = '') {\n    const cleanedPath = location.href.replace(location.origin, '');\n    return cleanedPath.startsWith(path);\n}\n\n@customElement('alliance-link')\nexport class Link extends LitElement {\n    @property({ type: String, attribute: true, reflect: true })\n    capability: string = '';\n\n    @property({ type: String, attribute: true, reflect: true })\n    app: string = '';\n\n    @property({ type: Object, attribute: true, reflect: true })\n    args: SerializeableObject = {};\n\n    /**\n     * Link properties\n     */\n    @property({ type: String, attribute: true, reflect: true })\n    href?: string;\n\n    @property({ type: String })\n    target?: string;\n\n    @property({ type: String, attribute: true, reflect: true })\n    rel?: string;\n\n    @property({ type: String, attribute: true, reflect: true })\n    download?: string;\n\n    navigate = () => {\n        history.pushState(this.args, '', this._href);\n        window.dispatchEvent(new Event('popstate'));\n    };\n\n    clickHandler = (event: MouseEvent) => {\n        if (this.href || 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 _href: string = '';\n\n    @property({ type: Boolean, attribute: 'active', reflect: true })\n    private active: boolean = false;\n\n    private computeHref = () => {\n        if (this.href) {\n            return (this._href = this.href);\n        }\n\n        if (!this.app) {\n            throw new Error('The app property is required when creating a capability link!');\n        }\n        this._href = createCapabilityPath(this.app, this.capability, this.args);\n        this.updateActive();\n    };\n\n    render() {\n        return html`<a\n            part=\"anchor\"\n            target=${this.target}\n            rel=${this.rel}\n            download=${this.download}\n            .href=${this._href}\n            ?active=${this.active}\n            @click=${this.clickHandler}\n            @keydown=${onEnter(this.clickHandler)}\n        >\n            <slot></slot>\n        </a>`;\n    }\n}\n"],"names":["f","v","i","a","D","n","o","p","C","r","l","s","M","t","h","g","L","isOnCurrentPath","path","Link","LitElement","event","createCapabilityPath","_1","_2","_3","html","onEnter","__decorateClass","property","customElement"],"mappings":"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"}

package/components/alliance-modal.js

@@ -1,12 +1,232 @@
-import "../chunks/alliance-modal-1126a4c4.js";
-import "../chunks/query-assigned-elements-024d0918.js";
-import "../chunks/repeat-600d2fb9.js";
-import "../chunks/telia-button2-7783c019.js";
+import { i as y, r as t, n as d, s as $, x as o, e as f } from "../chunks/query-assigned-elements-ac91685f.js";
+import { t as m, c as v } from "../chunks/repeat-34adae9e.js";
+import "../chunks/telia-button-c9ba09a9.js";
+import "../chunks/telia-heading-38ae44ae.js";
+import "../chunks/telia-icon-d0e7c715.js";
+import { l as b, d as l, b as p, a as w, c as k, s as e } from "../chunks/index-514c4fef.js";
+import { c as x } from "../chunks/close-ac6e4f1c.js";
 import "../chunks/index-eef143db.js";
-import "../chunks/telia-icon2-d0e7c715.js";
-import "../chunks/getSvgContent-f2389ce0.js";
 import "../chunks/telia-vst2-dfb33a56.js";
-import "../chunks/telia-heading2-38ae44ae.js";
-import "../chunks/index-d925c796.js";
-import "../chunks/close-7d423291.js";
+import "../chunks/getSvgContent-f2389ce0.js";
+var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (i, n, h, c) => {
+  for (var a = c > 1 ? void 0 : c ? C(n, h) : n, u = i.length - 1, g; u >= 0; u--)
+    (g = i[u]) && (a = (c ? g(n, h, a) : g(a)) || a);
+  return c && a && S(n, h, a), a;
+};
+let s = class extends $ {
+  constructor() {
+    super(...arguments), this.header = "", this.actions = [], this.required = !1, this.scrollMode = "outside", this.hasSubHeader = !1, this.containStyling = () => this.contain ? o`<style>
+            :host {
+                height: 500px;
+                position: static;
+            }
+            .backdrop {
+                position: absolute;
+            }
+        </style>` : o`<style>
+                :host {
+                    position: fixed;
+                }
+
+                .backdrop {
+                    position: absolute;
+                }
+            </style>`, this.scrollStyling = () => this.scrollMode === "inside" ? o`<style>
+                .container {
+                    align-items: center;
+                }
+
+                dialog {
+                    max-height: 80%;
+                    display: flex;
+                    flex-direction: column;
+                }
+
+                .body {
+                    flex: 1;
+                    padding: ${t(e.spacing24)} ${t(e.spacing32)};
+                    height: 80%;
+                    overflow-x: hidden;
+                    overflow-y: auto;
+                }
+
+                .footer {
+                    border-top: ${t(p.widthXs)} solid ${t(l.gray200)};
+                    padding: ${t(e.spacing24)} ${t(e.spacing32)};
+                }
+            </style>` : o`<style>
+            .container {
+                overflow-x: hidden;
+                overflow-y: overlay;
+                align-items: flex-start;
+            }
+
+            dialog {
+                display: block;
+                margin: ${t(e.spacing128)} ${t(e.spacing24)};
+            }
+
+            .footer,
+            .body {
+                margin: ${t(e.spacing24)} 0;
+                padding: 0 ${t(e.spacing32)};
+            }
+        </style>`, this.subHeaderStyling = () => {
+      if (this.hasSubHeader)
+        return o`<style>
+                div.sub-header {
+                    display: block;
+                }
+            </style>`;
+    }, this.closeButton = () => this.required ? "" : o`<telia-button size="sm" variant="text" @click=${this.onCloseClick}
+            ><telia-icon size="md" svg="${x.svg}"
+        /></telia-button>`, this.footer = () => this.actions.length ? o`
+            <div class="footer">
+                ${v(
+      this.actions,
+      (i) => o`
+                        <telia-button
+                            disabled="${i.disabled ? "true" : "false"}"
+                            variant="${i.variant || "primary"}"
+                            size="sm"
+                            @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.onSubHeaderSlotChange = () => {
+      this.hasSubHeader = !0;
+    }, 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 o`
+            ${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>
+        `;
+  }
+};
+s.styles = y`
+        :host {
+            display: block;
+            inset: 0;
+            z-index: ${t(parseInt(b.modal) - 2)};
+        }
+
+        .backdrop {
+            inset: 0;
+            z-index: ${t(parseInt(b.modal) - 1)};
+            background-color: ${t(l.black)};
+            opacity: 0.3;
+        }
+
+        .container {
+            margin: 0 auto;
+            display: flex;
+            justify-content: center;
+            height: 100%;
+            width: 100%;
+        }
+
+        dialog {
+            background-color: ${t(l.white)};
+            border-radius: ${t(p.radiusLg)};
+            box-shadow: ${t(w.md)};
+            z-index: ${t(parseInt(b.modal))};
+            max-width: ${t(k.breakpointLg)};
+            position: static;
+            padding: 0;
+            border: none;
+        }
+
+        .header {
+            position: relative;
+            display: flex;
+            align-items: center;
+            padding: ${t(e.spacing24)} ${t(e.spacing32)};
+            border-bottom: ${t(p.widthXs)} solid ${t(l.gray200)};
+            min-height: 40px;
+        }
+
+        .header telia-button {
+            position: absolute;
+            top: ${t(e.spacing20)};
+            right: ${t(e.spacing24)};
+        }
+
+        .sub-header {
+            padding: ${t(e.spacing24)} ${t(e.spacing32)};
+            border-bottom: ${t(p.widthXs)} solid ${t(l.gray200)};
+            display: none;
+        }
+
+        .body {
+            min-width: calc(${t(e.spacing128)} * 2);
+        }
+
+        .footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: ${t(e.spacing16)};
+        }
+    `;
+r([
+  d({ type: String, attribute: "header" })
+], s.prototype, "header", 2);
+r([
+  d({ type: Array })
+], s.prototype, "actions", 2);
+r([
+  d({ type: Boolean, attribute: "required" })
+], s.prototype, "required", 2);
+r([
+  d({ type: String, attribute: "scroll-mode" })
+], s.prototype, "scrollMode", 2);
+r([
+  m()
+], s.prototype, "hasSubHeader", 2);
+r([
+  d({ type: Boolean, attribute: "contain" })
+], s.prototype, "contain", 2);
+s = r([
+  f("alliance-modal")
+], s);
 //# sourceMappingURL=alliance-modal.js.map

package/components/alliance-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"alliance-modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"alliance-modal.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, state } 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            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    header: string = '';\n\n    @property({ type: Array })\n    actions: Action[] = [];\n\n    @property({ type: Boolean, attribute: 'required' })\n    required: boolean = false;\n\n    @property({ type: String, attribute: 'scroll-mode' })\n    scrollMode: 'outside' | 'inside' = 'outside';\n\n    @state()\n    hasSubHeader: 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 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 size=\"sm\" variant=\"text\" @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                    (action) => html`\n                        <telia-button\n                            disabled=\"${action.disabled ? 'true' : 'false'}\"\n                            variant=\"${action.variant || 'primary'}\"\n                            size=\"sm\"\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    // 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"],"names":["Modal","LitElement","html","unsafeCSS","spacing","borders","colors","close","repeat","action","event","css","layers","shadows","breakpoints","__decorateClass","property","state","customElement"],"mappings":"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"}