@telia-ace/widget-components-area 1.0.26-experimental.1 → 1.0.26-experimental.11

package/dist/area-component.d.ts

@@ -23,5 +23,5 @@ export type AreaComponentProps = {
         ariaLabel?: string;
     };
 };
-export declare const AreaComponent: (container: Container) => Promise<void>;
+declare const AreaComponent: (container: Container) => Promise<void>;
 export default AreaComponent;

package/dist/area-wrapper.1ed96999.js

@@ -0,0 +1,92 @@
+var m = (o, e, t) => new Promise((s, n) => {
+  var r = (i) => {
+    try {
+      p(t.next(i));
+    } catch (d) {
+      n(d);
+    }
+  }, c = (i) => {
+    try {
+      p(t.throw(i));
+    } catch (d) {
+      n(d);
+    }
+  }, p = (i) => i.done ? s(i.value) : Promise.resolve(i.value).then(r, c);
+  p((t = t.apply(o, e)).next());
+});
+import { ComponentPlatform as f, asDescriptor as g } from "@telia-ace/widget-core";
+import { resolveComponent as y } from "@telia-ace/widget-types-grid";
+import { WidgetComponentMixin as b, NodeConnector as v } from "@telia-ace/widget-ui";
+import { LitElement as _, css as w } from "lit";
+import { property as u } from "lit/decorators.js";
+import { html as l, unsafeStatic as x } from "lit/static-html.js";
+var C = Object.defineProperty, P = Object.getOwnPropertyDescriptor, h = (o, e, t, s) => {
+  for (var n = s > 1 ? void 0 : s ? P(e, t) : e, r = o.length - 1, c; r >= 0; r--)
+    (c = o[r]) && (n = (s ? c(e, t, n) : c(n)) || n);
+  return s && n && C(e, t, n), n;
+};
+const I = (o) => `w-${o}`;
+class a extends _ {
+  constructor() {
+    super(), this._columns = 1, this._children = [];
+  }
+  render() {
+    return this.style.setProperty("--columns", this._columns.toString()), l`
+            ${this._children.map((e) => e.type === "view" ? l` <w-view nodeId=${e.id} /> ` : l`<${x(I(e.type || ""))}
+                    nodeId=${e.id}
+                />`)}
+        `;
+  }
+}
+a.styles = [
+  w`
+            * {
+                box-sizing: border-box;
+                outline: none;
+            }
+
+            :host {
+                background: var(--background);
+                outline: none;
+                box-sizing: border-box;
+
+                display: grid;
+                grid-template-columns: repeat(var(--columns), 1fr);
+                gap: var(--gap, 0);
+                justify-content: center;
+                grid-auto-rows: max-content;
+            }
+        `
+];
+h([
+  u({ type: Number })
+], a.prototype, "_columns", 2);
+h([
+  u({ type: Array })
+], a.prototype, "_children", 2);
+class E extends b(a) {
+  constructor() {
+    super(), this.connector = new v(this);
+  }
+  connectedCallback() {
+    this.container = this.requestInstance("container"), this.container && f.getInstance(this.container).then((e) => m(this, null, function* () {
+      if (!this.nodeId) {
+        console.warn("Could not find node id.");
+        return;
+      }
+      const t = e.nodes.get(this.nodeId);
+      if (t) {
+        const s = e.getBranch(t);
+        this._children = t.getChildren(s).map((r) => g(r));
+        const n = yield this.container.getAsync("componentResolver");
+        this._children.forEach((r) => m(this, null, function* () {
+          yield y(r.id, n, e);
+        }));
+      }
+    })), super.connectedCallback();
+  }
+}
+export {
+  E as default
+};
+//# sourceMappingURL=area-wrapper.1ed96999.js.map

package/dist/area-wrapper.1ed96999.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-wrapper.1ed96999.js","sources":["../src/area.ts","../src/area-wrapper.ts"],"sourcesContent":["import { css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { html, unsafeStatic } from 'lit/static-html.js';\nimport './view';\n\n// TODO: this is duplicate of what already exists in type-web\nconst componentTagFromType = (type: string) => {\n    const componentTagPrefix = 'w';\n    return `${componentTagPrefix}-${type}`;\n};\n\nexport default class Area extends LitElement {\n    static styles = [\n        css`\n            * {\n                box-sizing: border-box;\n                outline: none;\n            }\n\n            :host {\n                background: var(--background);\n                outline: none;\n                box-sizing: border-box;\n\n                display: grid;\n                grid-template-columns: repeat(var(--columns), 1fr);\n                gap: var(--gap, 0);\n                justify-content: center;\n                grid-auto-rows: max-content;\n            }\n        `,\n    ];\n\n    @property({ type: Number })\n    declare _columns;\n\n    @property({ type: Array })\n    declare _children: any[];\n\n    constructor() {\n        super();\n\n        this._columns = 1;\n        this._children = [];\n    }\n\n    // protected updated(\n    //   _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n    // ): void {\n\n    // }\n\n    render() {\n        this.style.setProperty('--columns', this._columns.toString());\n        return html`\n            ${this._children.map((child) => {\n                if (child.type === 'view') {\n                    return html` <w-view nodeId=${child.id} /> `;\n                }\n                return html`<${unsafeStatic(componentTagFromType(child.type || ''))}\n                    nodeId=${child.id}\n                />`;\n            })}\n        `;\n    }\n}\n","import { asDescriptor, ComponentPlatform } from '@telia-ace/widget-core';\nimport { resolveComponent } from '@telia-ace/widget-types-grid';\nimport { NodeConnector, WidgetComponentMixin } from '@telia-ace/widget-ui';\nimport { Container } from '@webprovisions/platform';\n// import { WidgetComponent, NodeConnector, resolveComponent } from 'types-web';\nimport Area from './area';\n\nexport default class AreaWrapper extends WidgetComponentMixin(Area) {\n    connector = new NodeConnector(this);\n    container: Container | undefined;\n\n    constructor() {\n        super();\n    }\n\n    connectedCallback(): void {\n        this.container = this.requestInstance('container');\n        if (this.container) {\n            ComponentPlatform.getInstance(this.container).then(async (platform) => {\n                if (!this.nodeId) {\n                    console.warn('Could not find node id.');\n                    return;\n                }\n                const node = platform.nodes.get(this.nodeId);\n                if (node) {\n                    const branch = platform.getBranch(node);\n                    this._children = node.getChildren(branch).map((child) => asDescriptor(child));\n                    const resolver = await this.container!.getAsync('componentResolver');\n                    this._children.forEach(async (child) => {\n                        await resolveComponent(child.id, resolver, platform);\n                    });\n                }\n            });\n        }\n        super.connectedCallback();\n    }\n}\n"],"names":["componentTagFromType","type","Area","LitElement","html","child","unsafeStatic","css","__decorateClass","property","AreaWrapper","WidgetComponentMixin","NodeConnector","ComponentPlatform","platform","__async","node","branch","asDescriptor","resolver","resolveComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAMA,IAAuB,CAACC,MAEnB,KAAyBA;AAGpC,MAAqBC,UAAaC,EAAW;AAAA,EA4BzC,cAAc;AACJ,aAEN,KAAK,WAAW,GAChB,KAAK,YAAY;EACrB;AAAA,EAQA,SAAS;AACL,gBAAK,MAAM,YAAY,aAAa,KAAK,SAAS,UAAU,GACrDC;AAAA,cACD,KAAK,UAAU,IAAI,CAACC,MACdA,EAAM,SAAS,SACRD,oBAAuBC,EAAM,WAEjCD,KAAQE,EAAaN,EAAqBK,EAAM,QAAQ,EAAE,CAAC;AAAA,6BACrDA,EAAM;AAAA,mBAEtB;AAAA;AAAA,EAET;AACJ;AAtDqBH,EACV,SAAS;AAAA,EACZK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBJ;AAGQC,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,QAAQ;AAAA,GAtBTP,EAuBT,WAAA,YAAA,CAAA;AAGAM,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,OAAO;AAAA,GAzBRP,EA0BT,WAAA,aAAA,CAAA;AC9BS,MAAAQ,UAAoBC,EAAqBT,CAAI,EAAE;AAAA,EAIhE,cAAc;AACJ,aAJE,KAAA,YAAA,IAAIU,EAAc,IAAI;AAAA,EAKlC;AAAA,EAEA,oBAA0B;AACjB,SAAA,YAAY,KAAK,gBAAgB,WAAW,GAC7C,KAAK,aACLC,EAAkB,YAAY,KAAK,SAAS,EAAE,KAAK,CAAOC,MAAaC,EAAA;AAC/D,UAAA,CAAC,KAAK,QAAQ;AACd,gBAAQ,KAAK,yBAAyB;AACtC;AAAA,MACJ;AACA,YAAMC,IAAOF,EAAS,MAAM,IAAI,KAAK,MAAM;AAC3C,UAAIE,GAAM;AACA,cAAAC,IAASH,EAAS,UAAUE,CAAI;AACjC,aAAA,YAAYA,EAAK,YAAYC,CAAM,EAAE,IAAI,CAACZ,MAAUa,EAAab,CAAK,CAAC;AAC5E,cAAMc,IAAW,MAAM,KAAK,UAAW,SAAS,mBAAmB;AAC9D,aAAA,UAAU,QAAQ,CAAOd,MAAUU,EAAA;AACpC,gBAAMK,EAAiBf,EAAM,IAAIc,GAAUL,CAAQ;AAAA,QAAA,EACtD;AAAA,MACL;AAAA,IAAA,EACH,GAEL,MAAM,kBAAkB;AAAA,EAC5B;AACJ;"}

package/dist/area-wrapper.d.ts

@@ -0,0 +1,11 @@
+import { NodeConnector } from '@telia-ace/widget-ui';
+import { Container } from '@webprovisions/platform';
+import Area from './area';
+declare const AreaWrapper_base: (new (...args: any[]) => import("@telia-ace/widget-ui/dist/mixins/widget-component").WidgetComponentInterface) & typeof Area;
+export default class AreaWrapper extends AreaWrapper_base {
+    connector: NodeConnector;
+    container: Container | undefined;
+    constructor();
+    connectedCallback(): void;
+}
+export {};

package/dist/area.d.ts

@@ -1,3 +1,9 @@
-import React from 'react';
-declare const Area: React.FC<any>;
-export default Area;
+import { LitElement } from 'lit';
+import './view';
+export default class Area extends LitElement {
+    static styles: import("lit").CSSResult[];
+    _columns: number;
+    _children: any[];
+    constructor();
+    render(): import("lit").TemplateResult<1 | 2>;
+}

package/dist/index.js

@@ -1,6 +1,7 @@
-import { a as t } from "./index.892b6d04.js";
-import "@telia-ace/widget-ui";
+import { createWebComponent as e } from "@telia-ace/widget-ui";
+const t = (o) => e(o, "area", import("./area-wrapper.1ed96999.js"), (n) => {
+}), a = t;
 export {
-  t as default
+  a as default
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":["../src/area-component.ts"],"sourcesContent":["import { createWebComponent } from '@telia-ace/widget-ui';\nimport { Container } from '@webprovisions/platform';\n\ntype Symbol = {\n    type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;\n    content: string;\n};\n\nexport enum AreaMode {\n    Static = 'static',\n    Drawer = 'drawer',\n    Dropdown = 'dropdown',\n    Modal = 'modal',\n}\n\nexport type AreaComponentProps = {\n    mode: AreaMode;\n    animation?: string;\n    fullScreen?: boolean;\n    columns?: number;\n    scrollable?: boolean;\n    header?: string;\n    trigger?: {\n        symbol?: Symbol;\n        label?: string;\n        size?: number;\n        ariaLabel?: string;\n    };\n};\n\n// export const AreaComponent = (container: Container) => {\n//     return createReactComponent(container, 'area', import('./area'), (component) => {});\n// };\n\n// export default AreaComponent;\n\nconst AreaComponent = (container: Container) => {\n    return createWebComponent(container, 'area', import('./area-wrapper'), (component) => {});\n};\nexport default AreaComponent;\n"],"names":["AreaComponent","container","createWebComponent","component","AreaComponent$1"],"mappings":";AAoCA,MAAMA,IAAgB,CAACC,MACZC,EAAmBD,GAAW,QAAQ,OAAO,+BAAmB,CAACE,MAAc;AAAA,CAAE,GAE5FC,IAAeJ;"}

package/dist/view.d.ts

@@ -0,0 +1,14 @@
+import { Container, EventSubscriptionCancellation } from '@webprovisions/platform';
+import { LitElement } from 'lit';
+declare const View_base: (new (...args: any[]) => import("@telia-ace/widget-ui/dist/mixins/requester").RequesterInterface) & typeof LitElement;
+export declare class View extends View_base {
+    container: Container | undefined;
+    listeners: EventSubscriptionCancellation[];
+    static styles: import("lit").CSSResult[];
+    _children: any[];
+    _setSwitch(name: string): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1 | 2>;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-components-area",
-  "version": "1.0.26-experimental.1",
+  "version": "1.0.26-experimental.11",
   "description": "Area component for ACE Widgets.",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "Telia Company AB",
@@ -21,15 +21,16 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@telia-ace/widget-core": "1.0.21-experimental.1",
-    "@telia-ace/widget-types-grid": "1.0.30-experimental.1",
-    "@telia-ace/widget-ui": "1.0.28-experimental.1",
-    "@telia-ace/widget-utilities": "1.0.10-experimental.1",
+    "@telia-ace/widget-core": "1.0.21-experimental.11",
+    "@telia-ace/widget-types-grid": "1.0.30-experimental.11",
+    "@telia-ace/widget-ui": "1.0.28-experimental.11",
+    "@telia-ace/widget-utilities": "1.0.10-experimental.11",
     "@webprovisions/platform": "^1.1.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "lit": "^2.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-transition-group": "^4.4.5"
@@ -37,10 +38,11 @@
   "devDependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@telia-ace/widget-developer-tools": "1.0.16-experimental.1",
+    "@telia-ace/widget-developer-tools": "1.0.16-experimental.11",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@types/react-transition-group": "^4.4.5",
+    "lit": "^2.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-transition-group": "^4.4.5"

package/dist/area.c168254b.js

@@ -1,186 +0,0 @@
-var Y = Object.defineProperty, Z = Object.defineProperties;
-var _ = Object.getOwnPropertyDescriptors;
-var b = Object.getOwnPropertySymbols;
-var B = Object.prototype.hasOwnProperty, R = Object.prototype.propertyIsEnumerable;
-var z = (e, t, n) => t in e ? Y(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, s = (e, t) => {
-  for (var n in t || (t = {}))
-    B.call(t, n) && z(e, n, t[n]);
-  if (b)
-    for (var n of b(t))
-      R.call(t, n) && z(e, n, t[n]);
-  return e;
-}, c = (e, t) => Z(e, _(t));
-var d = (e, t) => {
-  var n = {};
-  for (var r in e)
-    B.call(e, r) && t.indexOf(r) < 0 && (n[r] = e[r]);
-  if (e != null && b)
-    for (var r of b(e))
-      t.indexOf(r) < 0 && R.call(e, r) && (n[r] = e[r]);
-  return n;
-};
-import { css as k } from "@emotion/react";
-import f from "@emotion/styled";
-import { WidgetRenderState as p } from "@telia-ace/widget-core";
-import { genericComponentStyling as L, Component as N } from "@telia-ace/widget-types-grid";
-import { TransitionComponent as ee, Grid as O, useComponentDescriptor as te, useRenderState as ne, useContext as re, useProperties as ae, useChildren as oe, useContainer as se, useScroll as ie, createEmptyComponent as le, ColumnContext as j, filterCssProps as me, Dropdown as ce, DrawerAnimationType as de, Drawer as ue, Button as pe, filterCssPropsStyle as fe, paddedBorderTabStyle as ge, Text as he, SymbolBadge as ye } from "@telia-ace/widget-ui";
-import { appendClassNames as v, Logger as Ce } from "@telia-ace/widget-utilities";
-import a, { forwardRef as be, useCallback as $e } from "react";
-import { A as u } from "./index.892b6d04.js";
-const Ee = be(
-  (x, i) => {
-    var l = x, { children: e, className: t, renderState: n, animation: r } = l, g = d(l, ["children", "className", "renderState", "animation"]);
-    return n ? /* @__PURE__ */ a.createElement(
-      ee,
-      {
-        mountOnEnter: n !== p.hidden,
-        timeout: 200,
-        in: n === p.open,
-        transitions: r,
-        unmountOnExit: n === p.closed
-      },
-      (m, h) => /* @__PURE__ */ a.createElement(
-        xe,
-        c(s({}, g), {
-          animationCss: h,
-          "data-state": m,
-          ref: i,
-          className: v("humany-animated-area", t)
-        }),
-        e
-      )
-    ) : null;
-  }
-), ve = Ee, xe = f(O)`
-    ${L}
-    ${(e) => !!e.animationCss && e.animationCss}
-  ${(e) => !!e.scrollableCss && e.scrollableCss}
-  text-size-adjust: 100%;
-    input::-ms-clear {
-        display: none;
-    }
-    ${(e) => e.hidden && e["data-state"] === "exited" && k`
-            visibility: collapse;
-            pointer-events: none;
-        `};
-`, Oe = (n) => {
-  var r = n, { className: e } = r, t = d(r, ["className"]);
-  const { name: g } = te(), i = ne(), x = re(), l = ae(), m = oe(), h = se(), { gap: W = "0" } = x, P = l, {
-    columns: $ = 1,
-    animation: y = "none",
-    scrollable: M = !1,
-    mode: C = u.Static,
-    trigger: G = {},
-    fullScreen: q,
-    header: F
-  } = P, H = d(P, [
-    "columns",
-    "animation",
-    "scrollable",
-    "mode",
-    "trigger",
-    "fullScreen",
-    "header"
-  ]), D = G, { size: I = 24, symbol: w, label: S, ariaLabel: J } = D, K = d(D, ["size", "symbol", "label", "ariaLabel"]), [Q, U] = ie(M), V = $e(
-    (o) => {
-      const { events: X } = h.get("$widget");
-      return X.dispatch("widget:area-rendered", {
-        name: g,
-        properties: l,
-        element: o
-      }), U.current = o, o;
-    },
-    [l, i]
-  );
-  if (!m.length)
-    return le(h, c(s({}, t), {
-      className: v(e, "humany-area")
-    }));
-  const A = c(s(c(s({}, t), {
-    className: v(e, "humany-area", `humany-area-${g}`),
-    scrollableCss: Q
-  }), H), {
-    columns: $,
-    gap: W,
-    renderState: i,
-    animation: y,
-    hidden: i === p.hidden,
-    ref: V
-  }), E = (() => y !== "none" ? /* @__PURE__ */ a.createElement(j.Provider, { value: $ }, /* @__PURE__ */ a.createElement(ve, s({}, A), m.map((o) => /* @__PURE__ */ a.createElement(N, { key: o.id, id: o.id, branch: "default" })))) : i === p.closed ? null : /* @__PURE__ */ a.createElement(j.Provider, { value: $ }, /* @__PURE__ */ a.createElement(Te, s({}, A), m.map((o) => /* @__PURE__ */ a.createElement(N, { key: o.id, id: o.id, branch: "default" })))))();
-  if (C === u.Static)
-    return E;
-  const T = /* @__PURE__ */ a.createElement(
-    we,
-    s({
-      className: "humany-area-trigger",
-      title: J
-    }, me(K)),
-    S && /* @__PURE__ */ a.createElement(Se, null, S),
-    w && /* @__PURE__ */ a.createElement(Ae, { symbol: w, size: I })
-  );
-  if (C === u.Dropdown)
-    return /* @__PURE__ */ a.createElement(ce, { trigger: T }, E);
-  if (C === u.Drawer) {
-    const o = Object.values(de).includes(y) && {
-      type: y
-    } || void 0;
-    return /* @__PURE__ */ a.createElement(
-      ue,
-      {
-        header: F,
-        animation: o,
-        fullScreen: q,
-        trigger: T
-      },
-      E
-    );
-  }
-  return C === u.Modal && Ce.warn("modal area not implemented"), null;
-}, we = f(pe)`
-    display: flex;
-    align-items: inherit;
-    align-self: center;
-    width: fit-content;
-    height: fit-content;
-    ${fe}
-
-    ${(e) => e.theme.fonts && `
-    font-family: ${e.theme.fonts.type};
-    font-size: ${e.theme.fonts.normal};
-  `}
-
-  &:focus-visible {
-        ${ge};
-    }
-`, Se = f(he)`
-    margin: 0 ${(e) => {
-  var t;
-  return (t = e.theme.sizes) == null ? void 0 : t.small;
-}} 0 0;
-    color: ${(e) => {
-  var t;
-  return (t = e.theme.colors) == null ? void 0 : t.text;
-}};
-`, Ae = f(ye)`
-    path {
-        fill: ${(e) => {
-  var t;
-  return (t = e.theme.colors) == null ? void 0 : t.text;
-}};
-    }
-`, Te = f(O)`
-    ${L}
-    ${(e) => !!e.scrollableCss && e.scrollableCss}
-  text-size-adjust: 100%;
-    input::-ms-clear {
-        display: none;
-    }
-    ${(e) => e.hidden && k`
-            visibility: collapse;
-            pointer-events: none;
-        `};
-`;
-export {
-  Oe as default
-};
-//# sourceMappingURL=area.c168254b.js.map

package/dist/area.c168254b.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"area.c168254b.js","sources":["../src/animated-area.tsx","../src/area.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { WidgetRenderState } from '@telia-ace/widget-core';\nimport { genericComponentStyling } from '@telia-ace/widget-types-grid';\nimport { Grid, TransitionComponent } from '@telia-ace/widget-ui';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React, { forwardRef } from 'react';\nimport { TransitionStatus } from 'react-transition-group/Transition';\n\nconst Area: React.FC<any> = forwardRef(\n    ({ children, className, renderState, animation, ...other }, ref) => {\n        if (!renderState) {\n            return null;\n        }\n\n        return (\n            <TransitionComponent\n                mountOnEnter={renderState !== WidgetRenderState.hidden}\n                timeout={200}\n                in={renderState === WidgetRenderState.open}\n                transitions={animation}\n                unmountOnExit={renderState === WidgetRenderState.closed}\n            >\n                {(state: TransitionStatus, css?: string) => (\n                    <Wrapper\n                        {...other}\n                        animationCss={css}\n                        data-state={state}\n                        ref={ref}\n                        className={appendClassNames('humany-animated-area', className)}\n                    >\n                        {children}\n                    </Wrapper>\n                )}\n            </TransitionComponent>\n        );\n    }\n);\n\nexport default Area;\n\nconst Wrapper = styled(Grid)<any>`\n    ${genericComponentStyling}\n    ${(p) => !!p.animationCss && p.animationCss}\n  ${(p) => !!p.scrollableCss && p.scrollableCss}\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ${(p) =>\n        p.hidden &&\n        p['data-state'] === 'exited' &&\n        css`\n            visibility: collapse;\n            pointer-events: none;\n        `};\n`;\n","import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { WidgetRenderState } from '@telia-ace/widget-core';\nimport { Component, genericComponentStyling } from '@telia-ace/widget-types-grid';\nimport {\n    Button,\n    ColumnContext,\n    createEmptyComponent,\n    Drawer,\n    DrawerAnimationType,\n    Dropdown,\n    filterCssProps,\n    filterCssPropsStyle,\n    Grid,\n    paddedBorderTabStyle,\n    SymbolBadge,\n    Text,\n    useChildren,\n    useComponentDescriptor,\n    useContainer,\n    useContext,\n    useProperties,\n    useRenderState,\n    useScroll,\n} from '@telia-ace/widget-ui';\nimport { appendClassNames, Logger } from '@telia-ace/widget-utilities';\nimport { Widget } from '@webprovisions/platform';\nimport React, { useCallback } from 'react';\nimport AnimatedArea from './animated-area';\nimport { AreaComponentProps, AreaMode } from './area-component';\n\nconst Area: React.FC<any> = ({ className, ...other }) => {\n    const { name } = useComponentDescriptor();\n    const renderState = useRenderState();\n    const context = useContext();\n    const properties = useProperties<AreaComponentProps>();\n    const children = useChildren();\n    const container = useContainer();\n\n    const { gap = '0' } = context;\n    const {\n        columns = 1,\n        animation = 'none',\n        scrollable = false,\n        mode = AreaMode.Static,\n        trigger = {},\n        fullScreen,\n        header,\n        ...areaProperties\n    } = properties;\n\n    const { size = 24, symbol, label, ariaLabel, ...otherTriggerProps } = trigger;\n\n    const [scrollableCss, elem] = useScroll(scrollable);\n\n    const setRef = useCallback(\n        (node: HTMLDivElement) => {\n            const { events } = container.get('$widget') as Widget;\n            events.dispatch('widget:area-rendered', {\n                name,\n                properties,\n                element: node,\n            });\n\n            elem.current = node;\n            return node;\n        },\n        [properties, renderState]\n    );\n\n    if (!children.length) {\n        return createEmptyComponent(container, {\n            ...other,\n            className: appendClassNames(className, 'humany-area'),\n        });\n    }\n\n    const props = {\n        ...other,\n        className: appendClassNames(className, 'humany-area', `humany-area-${name}`),\n        scrollableCss,\n        ...areaProperties,\n        columns,\n        gap,\n        renderState,\n        animation,\n        hidden: renderState === WidgetRenderState.hidden,\n        ref: setRef,\n    };\n\n    const content = (() => {\n        if (animation !== 'none') {\n            return (\n                <ColumnContext.Provider value={columns}>\n                    <AnimatedArea {...props}>\n                        {children.map((child) => (\n                            <Component key={child.id} id={child.id} branch=\"default\" />\n                        ))}\n                    </AnimatedArea>\n                </ColumnContext.Provider>\n            );\n        }\n\n        if (renderState === WidgetRenderState.closed) {\n            return null;\n        }\n\n        return (\n            <ColumnContext.Provider value={columns}>\n                <Wrapper {...props}>\n                    {children.map((child) => (\n                        <Component key={child.id} id={child.id} branch=\"default\" />\n                    ))}\n                </Wrapper>\n            </ColumnContext.Provider>\n        );\n    })();\n\n    if (mode === AreaMode.Static) {\n        return content;\n    }\n\n    const triggerButton = (\n        <Trigger\n            className=\"humany-area-trigger\"\n            title={ariaLabel}\n            {...filterCssProps(otherTriggerProps)}\n        >\n            {label && <TriggerLabel>{label}</TriggerLabel>}\n            {symbol && <TriggerSymbolBadge symbol={symbol} size={size} />}\n        </Trigger>\n    );\n\n    if (mode === AreaMode.Dropdown) {\n        return <Dropdown trigger={triggerButton}>{content}</Dropdown>;\n    }\n\n    if (mode === AreaMode.Drawer) {\n        const drawerAnimation =\n            (Object.values(DrawerAnimationType).includes(animation as any) && {\n                type: animation as DrawerAnimationType,\n            }) ||\n            undefined;\n        return (\n            <Drawer\n                header={header}\n                animation={drawerAnimation}\n                fullScreen={fullScreen}\n                trigger={triggerButton}\n            >\n                {content}\n            </Drawer>\n        );\n    }\n\n    if (mode === AreaMode.Modal) {\n        Logger.warn('modal area not implemented');\n        return null;\n    }\n\n    return null;\n};\n\nexport default Area;\n\nconst Trigger = styled(Button)`\n    display: flex;\n    align-items: inherit;\n    align-self: center;\n    width: fit-content;\n    height: fit-content;\n    ${filterCssPropsStyle}\n\n    ${(p) =>\n        p.theme.fonts &&\n        `\n    font-family: ${p.theme.fonts.type};\n    font-size: ${p.theme.fonts.normal};\n  `}\n\n  &:focus-visible {\n        ${paddedBorderTabStyle};\n    }\n`;\n\nconst TriggerLabel = styled(Text)`\n    margin: 0 ${(p) => p.theme.sizes?.small} 0 0;\n    color: ${(p) => p.theme.colors?.text};\n`;\n\nconst TriggerSymbolBadge = styled(SymbolBadge)`\n    path {\n        fill: ${(p) => p.theme.colors?.text};\n    }\n`;\n\nconst Wrapper = styled(Grid)<any>`\n    ${genericComponentStyling}\n    ${(p) => !!p.scrollableCss && p.scrollableCss}\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ${(p) =>\n        p.hidden &&\n        css`\n            visibility: collapse;\n            pointer-events: none;\n        `};\n`;\n"],"names":["Area","forwardRef","_a","ref","_b","children","className","renderState","animation","other","__objRest","React","TransitionComponent","WidgetRenderState","state","css","Wrapper","__spreadProps","__spreadValues","appendClassNames","AnimatedArea","styled","Grid","genericComponentStyling","p","name","useComponentDescriptor","useRenderState","context","useContext","properties","useProperties","useChildren","container","useContainer","gap","columns","scrollable","mode","AreaMode","trigger","fullScreen","header","areaProperties","size","symbol","label","ariaLabel","otherTriggerProps","scrollableCss","elem","useScroll","setRef","useCallback","node","events","createEmptyComponent","props","content","ColumnContext","child","Component","triggerButton","Trigger","filterCssProps","TriggerLabel","TriggerSymbolBadge","Dropdown","drawerAnimation","DrawerAnimationType","Drawer","Logger","Button","filterCssPropsStyle","paddedBorderTabStyle","Text","SymbolBadge"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAMA,KAAsBC;AAAA,EACxB,CAACC,GAA2DC,MAAQ;AAAnE,QAAAC,IAAAF,GAAE,YAAAG,GAAU,WAAAC,GAAW,aAAAC,GAAa,WAAAC,MAApCJ,GAAkDK,IAAAC,EAAlDN,GAAkD,CAAhD,YAAU,aAAW,eAAa;AACjC,WAAKG,IAKD,gBAAAI,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,cAAcL,MAAgBM,EAAkB;AAAA,QAChD,SAAS;AAAA,QACT,IAAIN,MAAgBM,EAAkB;AAAA,QACtC,aAAaL;AAAA,QACb,eAAeD,MAAgBM,EAAkB;AAAA,MAAA;AAAA,MAEhD,CAACC,GAAyBC,MACvB,gBAAAJ,EAAA;AAAA,QAACK;AAAAA,QAAAC,EAAAC,EAAA,IACOT,IADP;AAAA,UAEG,cAAcM;AAAAA,UACd,cAAYD;AAAA,UACZ,KAAAX;AAAA,UACA,WAAWgB,EAAiB,wBAAwBb,CAAS;AAAA,QAAA;AAAA,QAE5DD;AAAA,MACL;AAAA,IAAA,IApBD;AAAA,EAwBf;AACJ,GAEAe,KAAepB,IAETgB,KAAUK,EAAOC,CAAI;AAAA,MACrBC;AAAA,MACA,CAACC,MAAM,CAAC,CAACA,EAAE,gBAAgBA,EAAE;AAAA,IAC/B,CAACA,MAAM,CAAC,CAACA,EAAE,iBAAiBA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,MAK5B,CAACA,MACCA,EAAE,UACFA,EAAE,kBAAkB,YACpBT;AAAA;AAAA;AAAA;AAAA,GCrBFf,KAAsB,CAACE,MAA4B;AAA5B,MAAAE,IAAAF,GAAE,aAAAI,MAAFF,GAAgBK,IAAAC,EAAhBN,GAAgB,CAAd;AACrB,QAAA,EAAE,MAAAqB,MAASC,MACXnB,IAAcoB,MACdC,IAAUC,MACVC,IAAaC,MACb1B,IAAW2B,MACXC,IAAYC,MAEZ,EAAE,KAAAC,IAAM,IAAQ,IAAAP,GAUlB1B,IAAA4B,GARA;AAAA,aAAAM,IAAU;AAAA,IACV,WAAA5B,IAAY;AAAA,IACZ,YAAA6B,IAAa;AAAA,IACb,MAAAC,IAAOC,EAAS;AAAA,IAChB,SAAAC,IAAU,CAAC;AAAA,IACX,YAAAC;AAAA,IACA,QAAAC;AAAA,MAEAxC,GADGyC,IAAAjC,EACHR,GADG;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAIkEE,IAAAoC,GAA9D,QAAAI,IAAO,IAAI,QAAAC,GAAQ,OAAAC,GAAO,WAAAC,MAAoC3C,GAAtB4C,IAAAtC,EAAsBN,GAAtB,CAAxC,QAAW,UAAQ,SAAO,eAE5B,CAAC6C,GAAeC,CAAI,IAAIC,GAAUd,CAAU,GAE5Ce,IAASC;AAAA,IACX,CAACC,MAAyB;AACtB,YAAM,EAAE,QAAAC,EAAW,IAAAtB,EAAU,IAAI,SAAS;AAC1C,aAAAsB,EAAO,SAAS,wBAAwB;AAAA,QACpC,MAAA9B;AAAA,QACA,YAAAK;AAAA,QACA,SAASwB;AAAA,MAAA,CACZ,GAEDJ,EAAK,UAAUI,GACRA;AAAA,IACX;AAAA,IACA,CAACxB,GAAYvB,CAAW;AAAA,EAAA;AAGxB,MAAA,CAACF,EAAS;AACV,WAAOmD,GAAqBvB,GAAWhB,EAAAC,EAAA,IAChCT,IADgC;AAAA,MAEnC,WAAWU,EAAiBb,GAAW,aAAa;AAAA,IAAA,EACvD;AAGL,QAAMmD,IAAQxC,EAAAC,EAAAD,EAAAC,EAAA,IACPT,IADO;AAAA,IAEV,WAAWU,EAAiBb,GAAW,eAAe,eAAemB,GAAM;AAAA,IAC3E,eAAAwB;AAAA,MACGN,IAJO;AAAA,IAKV,SAAAP;AAAA,IACA,KAAAD;AAAA,IACA,aAAA5B;AAAA,IACA,WAAAC;AAAA,IACA,QAAQD,MAAgBM,EAAkB;AAAA,IAC1C,KAAKuC;AAAA,EAAA,IAGHM,KAAW,MACTlD,MAAc,SAEV,gBAAAG,EAAA,cAACgD,EAAc,UAAd,EAAuB,OAAOvB,EAC3B,GAAA,gBAAAzB,EAAA,cAACS,IAAcF,EAAA,IAAGuC,IACbpD,EAAS,IAAI,CAACuD,MACV,gBAAAjD,EAAA,cAAAkD,GAAA,EAAU,KAAKD,EAAM,IAAI,IAAIA,EAAM,IAAI,QAAO,UAAA,CAAU,CAC5D,CACL,CACJ,IAIJrD,MAAgBM,EAAkB,SAC3B,OAIP,gBAAAF,EAAA,cAACgD,EAAc,UAAd,EAAuB,OAAOvB,EAC3B,GAAA,gBAAAzB,EAAA,cAACK,IAASE,EAAA,IAAGuC,IACRpD,EAAS,IAAI,CAACuD,MACV,gBAAAjD,EAAA,cAAAkD,GAAA,EAAU,KAAKD,EAAM,IAAI,IAAIA,EAAM,IAAI,QAAO,UAAA,CAAU,CAC5D,CACL,CACJ;AAIJ,MAAAtB,MAASC,EAAS;AACX,WAAAmB;AAGX,QAAMI,IACF,gBAAAnD,EAAA;AAAA,IAACoD;AAAA,IAAA7C,EAAA;AAAA,MACG,WAAU;AAAA,MACV,OAAO6B;AAAA,OACHiB,GAAehB,CAAiB;AAAA,IAEnCF,KAAU,gBAAAnC,EAAA,cAAAsD,IAAA,MAAcnB,CAAM;AAAA,IAC9BD,KAAU,gBAAAlC,EAAA,cAACuD,IAAmB,EAAA,QAAArB,GAAgB,MAAAD,GAAY;AAAA,EAAA;AAI/D,MAAAN,MAASC,EAAS;AAClB,WAAQ,gBAAA5B,EAAA,cAAAwD,IAAA,EAAS,SAASL,EAAA,GAAgBJ,CAAQ;AAGlD,MAAApB,MAASC,EAAS,QAAQ;AAC1B,UAAM6B,IACD,OAAO,OAAOC,EAAmB,EAAE,SAAS7D,CAAgB,KAAK;AAAA,MAC9D,MAAMA;AAAA,IAEV,KAAA;AAEA,WAAA,gBAAAG,EAAA;AAAA,MAAC2D;AAAA,MAAA;AAAA,QACG,QAAA5B;AAAA,QACA,WAAW0B;AAAA,QACX,YAAA3B;AAAA,QACA,SAASqB;AAAA,MAAA;AAAA,MAERJ;AAAA,IAAA;AAAA,EAGb;AAEI,SAAApB,MAASC,EAAS,SAClBgC,GAAO,KAAK,4BAA4B,GACjC;AAIf,GAIMR,KAAU1C,EAAOmD,EAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMvBC;AAAA;AAAA,MAEA,CAACjD,MACCA,EAAE,MAAM,SACR;AAAA,mBACWA,EAAE,MAAM,MAAM;AAAA,iBAChBA,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,UAIrBkD;AAAA;AAAA,GAIJT,KAAe5C,EAAOsD,EAAI;AAAA,gBAChB,CAACnD,MAAM;;AAAA,UAAAtB,IAAAsB,EAAE,MAAM,UAAR,gBAAAtB,EAAe;AAAA;AAAA,aACzB,CAACsB,MAAM;;AAAA,UAAAtB,IAAAsB,EAAE,MAAM,WAAR,gBAAAtB,EAAgB;AAAA;AAAA,GAG9BgE,KAAqB7C,EAAOuD,EAAW;AAAA;AAAA,gBAE7B,CAACpD,MAAM;;AAAA,UAAAtB,IAAAsB,EAAE,MAAM,WAAR,gBAAAtB,EAAgB;AAAA;AAAA;AAAA,GAIjCc,KAAUK,EAAOC,CAAI;AAAA,MACrBC;AAAA,MACA,CAACC,MAAM,CAAC,CAACA,EAAE,iBAAiBA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,MAK9B,CAACA,MACCA,EAAE,UACFT;AAAA;AAAA;AAAA;AAAA;"}

package/dist/index.892b6d04.js

@@ -1,9 +0,0 @@
-import { createReactComponent as t } from "@telia-ace/widget-ui";
-var r = /* @__PURE__ */ ((o) => (o.Static = "static", o.Drawer = "drawer", o.Dropdown = "dropdown", o.Modal = "modal", o))(r || {});
-const n = (o) => t(o, "area", import("./area.c168254b.js"), (a) => {
-}), p = n;
-export {
-  r as A,
-  p as a
-};
-//# sourceMappingURL=index.892b6d04.js.map

package/dist/index.892b6d04.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.892b6d04.js","sources":["../src/area-component.ts"],"sourcesContent":["import { createReactComponent } from '@telia-ace/widget-ui';\nimport { Container } from '@webprovisions/platform';\n\ntype Symbol = {\n    type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;\n    content: string;\n};\n\nexport enum AreaMode {\n    Static = 'static',\n    Drawer = 'drawer',\n    Dropdown = 'dropdown',\n    Modal = 'modal',\n}\n\nexport type AreaComponentProps = {\n    mode: AreaMode;\n    animation?: string;\n    fullScreen?: boolean;\n    columns?: number;\n    scrollable?: boolean;\n    header?: string;\n    trigger?: {\n        symbol?: Symbol;\n        label?: string;\n        size?: number;\n        ariaLabel?: string;\n    };\n};\n\nexport const AreaComponent = (container: Container) => {\n    return createReactComponent(container, 'area', import('./area'), (component) => {});\n};\n\nexport default AreaComponent;\n"],"names":["AreaMode","AreaComponent","container","createReactComponent","component","AreaComponent$1"],"mappings":";AAQY,IAAAA,sBAAAA,OACRA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,WAAW,YACXA,EAAA,QAAQ,SAJAA,IAAAA,KAAA,CAAA,CAAA;AAsBC,MAAAC,IAAgB,CAACC,MACnBC,EAAqBD,GAAW,QAAQ,OAAO,uBAAW,CAACE,MAAc;AAAA,CAAE,GAGtFC,IAAeJ;"}