@telia-ace/widget-components-close-button 1.1.1-rc.0 → 1.1.1-rc.2

package/close-button-3a1c7e38.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),d=require("@emotion/styled");require("@emotion/react");const s=require("./index-0b94d9ea.js"),i=require("react");require("react-dom");require("react-transition-group");require("react-router-dom");const h=()=>i.useContext(s.ComponentNodeContext),y=()=>{const t=s.useComponentPlatform(),e=h(),[o,u]=i.useState([]),[p,m]=i.useState();return i.useEffect(()=>{if(t&&e){const l=new s.ComponentQuery(t).withId(e.id),r=t.actions(l,e.type||s.uuid());m(r),o!==null&&(o.forEach(n=>{r.dispatch(n.key,n.data).then(c=>n.resolve(c)).catch(c=>n.reject(c))}),u(null))}},[t,e.id]),(l,r)=>o!==null?new Promise((n,c)=>{o.push({key:l,data:r,resolve:n,reject:c})}):p.dispatch(l,r)},f=()=>i.useContext(s.ComponentPropertyContext),x=({className:t,...e})=>{const o=y(),{ariaLabel:u=""}=f();return a.jsx(C,{...e,className:t,children:a.jsx(b,{onClick:()=>o("close"),"aria-label":u,children:a.jsx(S,{size:12,symbol:{type:"Svg",content:"close"}})})})},C=d.div`
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+`,b=d(s.Button)`
+    &:focus-visible {
+        ${s.borderTabStyle}
+        padding: ${t=>{var e,o;return`calc(${(e=t.theme.sizes)==null?void 0:e.small} / 2) ${(o=t.theme.sizes)==null?void 0:o.small}`}};
+        line,
+        path {
+            stroke: ${t=>{var e,o;return(o=(e=t.theme.accessibility)==null?void 0:e.colors)==null?void 0:o.inactiveText}};
+        }
+    }
+`,S=d(s.SymbolBadge)`
+    line,
+    path {
+        stroke: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
+    }
+`;exports.default=x;

package/close-button-95701c2d.mjs

@@ -0,0 +1,59 @@
+import { jsx as a } from "react/jsx-runtime";
+import l from "@emotion/styled";
+import "@emotion/react";
+import { C as f, u as h, a as y, b as C, c as b, B as x, d as S, S as B } from "./index-71bf0c3f.mjs";
+import { useContext as u, useState as p, useEffect as $ } from "react";
+import "react-dom";
+import "react-transition-group";
+import "react-router-dom";
+const g = () => u(f), v = () => {
+  const e = h(), t = g(), [o, c] = p([]), [m, d] = p();
+  return $(() => {
+    if (e && t) {
+      const i = new y(e).withId(t.id), n = e.actions(i, t.type || C());
+      d(n), o !== null && (o.forEach((s) => {
+        n.dispatch(s.key, s.data).then((r) => s.resolve(r)).catch((r) => s.reject(r));
+      }), c(null));
+    }
+  }, [e, t.id]), (i, n) => o !== null ? new Promise((s, r) => {
+    o.push({
+      key: i,
+      data: n,
+      resolve: s,
+      reject: r
+    });
+  }) : m.dispatch(i, n);
+}, P = () => u(b), L = ({ className: e, ...t }) => {
+  const o = v(), { ariaLabel: c = "" } = P();
+  return /* @__PURE__ */ a(j, { ...t, className: e, children: /* @__PURE__ */ a(k, { onClick: () => o("close"), "aria-label": c, children: /* @__PURE__ */ a(w, { size: 12, symbol: { type: "Svg", content: "close" } }) }) });
+}, j = l.div`
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+`, k = l(x)`
+    &:focus-visible {
+        ${S}
+        padding: ${(e) => {
+  var t, o;
+  return `calc(${(t = e.theme.sizes) == null ? void 0 : t.small} / 2) ${(o = e.theme.sizes) == null ? void 0 : o.small}`;
+}};
+        line,
+        path {
+            stroke: ${(e) => {
+  var t, o;
+  return (o = (t = e.theme.accessibility) == null ? void 0 : t.colors) == null ? void 0 : o.inactiveText;
+}};
+        }
+    }
+`, w = l(B)`
+    line,
+    path {
+        stroke: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    }
+`;
+export {
+  L as default
+};