@telia-ace/alliance-ui 1.0.6 → 1.0.7-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/chunks/alliance-modal-5860f6c1.js +163 -0
- package/chunks/alliance-modal-5860f6c1.js.map +1 -0
- package/components/alliance-modal/alliance-modal.d.ts +6 -2
- package/components/alliance-modal.js +1 -1
- package/components/index.js +1 -1
- package/package.json +1 -1
- package/chunks/alliance-modal-f2ab100c.js +0 -154
- package/chunks/alliance-modal-f2ab100c.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { i as m, r as t, e as c, s as y, y as s, a as $ } from "./query-assigned-elements-4285356d.js";
|
|
2
|
+
import { c as v } from "./repeat-bf84f01f.js";
|
|
3
|
+
import "./telia-button2-d25eddda.js";
|
|
4
|
+
import "./telia-heading2-9d3ab48b.js";
|
|
5
|
+
import "./telia-icon2-34bf5aef.js";
|
|
6
|
+
import { l as u, c as b, b as g, s as f, a as w, d as e } from "./index-57f6bd40.js";
|
|
7
|
+
import { c as k } from "./close-7d423291.js";
|
|
8
|
+
var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (i, n, l, d) => {
|
|
9
|
+
for (var o = d > 1 ? void 0 : d ? C(n, l) : n, p = i.length - 1, h; p >= 0; p--)
|
|
10
|
+
(h = i[p]) && (o = (d ? h(n, l, o) : h(o)) || o);
|
|
11
|
+
return d && o && x(n, l, o), o;
|
|
12
|
+
};
|
|
13
|
+
let a = class extends y {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments), this.header = "", this.actions = [], this.required = !1, this.containStyling = () => this.contain ? s`<style>
|
|
16
|
+
:host {
|
|
17
|
+
position: static !important;
|
|
18
|
+
}
|
|
19
|
+
.backdrop {
|
|
20
|
+
position: absolute !important;
|
|
21
|
+
}
|
|
22
|
+
</style>` : "", this.closeButton = () => this.required ? "" : s`<telia-button size="sm" variant="text" @click=${this.onCloseClick}
|
|
23
|
+
><telia-icon size="md" svg="${k.svg}"
|
|
24
|
+
/></telia-button>`, this.actionButtons = () => this.actions.length ? s`
|
|
25
|
+
<div class="footer">
|
|
26
|
+
${v(
|
|
27
|
+
this.actions,
|
|
28
|
+
(i) => s`
|
|
29
|
+
<telia-button
|
|
30
|
+
disabled="${i.disabled ? "true" : "false"}"
|
|
31
|
+
variant="${i.variant || "primary"}"
|
|
32
|
+
size="md"
|
|
33
|
+
@click=${() => this.action(i.action)}
|
|
34
|
+
>
|
|
35
|
+
${i.label}
|
|
36
|
+
</telia-button>
|
|
37
|
+
`
|
|
38
|
+
)}
|
|
39
|
+
</div>
|
|
40
|
+
` : "", this.onBackdropClick = () => {
|
|
41
|
+
if (!this.required)
|
|
42
|
+
return this.action("close");
|
|
43
|
+
}, this.onCloseClick = () => {
|
|
44
|
+
if (!this.required)
|
|
45
|
+
return this.action("close");
|
|
46
|
+
}, this.onKeyDown = (i) => {
|
|
47
|
+
i.defaultPrevented || !this.required && i.key === "Escape" && this.action("close");
|
|
48
|
+
}, this.action = (i) => {
|
|
49
|
+
const n = new CustomEvent("action", {
|
|
50
|
+
bubbles: !0,
|
|
51
|
+
composed: !0,
|
|
52
|
+
detail: { action: i },
|
|
53
|
+
cancelable: !0
|
|
54
|
+
});
|
|
55
|
+
return this.dispatchEvent(n);
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
connectedCallback() {
|
|
59
|
+
super.connectedCallback(), window.addEventListener("keydown", this.onKeyDown);
|
|
60
|
+
}
|
|
61
|
+
disconnectedCallback() {
|
|
62
|
+
window.removeEventListener("keydown", this.onKeyDown), super.disconnectedCallback();
|
|
63
|
+
}
|
|
64
|
+
render() {
|
|
65
|
+
return s`
|
|
66
|
+
${this.containStyling()}
|
|
67
|
+
<div class="backdrop" @click=${this.onBackdropClick}></div>
|
|
68
|
+
<div class="container">
|
|
69
|
+
<dialog open>
|
|
70
|
+
<div class="header">
|
|
71
|
+
<telia-heading tag="h3" variant="title-100">${this.header}</telia-heading>
|
|
72
|
+
${this.closeButton()}
|
|
73
|
+
</div>
|
|
74
|
+
<div class="body">
|
|
75
|
+
<slot></slot>
|
|
76
|
+
</div>
|
|
77
|
+
${this.actionButtons()}
|
|
78
|
+
</dialog>
|
|
79
|
+
</div>
|
|
80
|
+
`;
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
a.styles = m`
|
|
84
|
+
:host {
|
|
85
|
+
inset: 0;
|
|
86
|
+
position: fixed;
|
|
87
|
+
z-index: ${t(parseInt(u.modal))};
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.backdrop {
|
|
91
|
+
inset: 0;
|
|
92
|
+
position: absolute;
|
|
93
|
+
z-index: ${t(parseInt(u.modal) - 1)};
|
|
94
|
+
background-color: ${t(b.black)};
|
|
95
|
+
opacity: 0.3;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.container {
|
|
99
|
+
margin: 0 auto;
|
|
100
|
+
display: flex;
|
|
101
|
+
justify-content: center;
|
|
102
|
+
align-items: flex-start;
|
|
103
|
+
overflow-x: hidden;
|
|
104
|
+
overflow-y: overlay;
|
|
105
|
+
height: 100%;
|
|
106
|
+
width: 100%;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
dialog {
|
|
110
|
+
background-color: ${t(b.white)};
|
|
111
|
+
border-radius: ${t(g.radiusLg)};
|
|
112
|
+
box-shadow: ${t(f.md)};
|
|
113
|
+
z-index: ${t(parseInt(u.modal) + 2)};
|
|
114
|
+
max-width: ${t(w.breakpointLg)};
|
|
115
|
+
margin: ${t(e.spacing128)} ${t(e.spacing24)};
|
|
116
|
+
display: block;
|
|
117
|
+
position: static;
|
|
118
|
+
padding: 0;
|
|
119
|
+
border: none;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.header {
|
|
123
|
+
position: relative;
|
|
124
|
+
padding: ${t(e.spacing32)};
|
|
125
|
+
border-bottom: ${t(g.widthXs)} solid ${t(b.gray200)};
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.header telia-button {
|
|
129
|
+
position: absolute;
|
|
130
|
+
top: ${t(e.spacing20)};
|
|
131
|
+
right: ${t(e.spacing20)};
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.body {
|
|
135
|
+
padding: 0 ${t(e.spacing32)};
|
|
136
|
+
margin: ${t(e.spacing24)} 0;
|
|
137
|
+
min-width: calc(${t(e.spacing128)} * 2);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.footer {
|
|
141
|
+
display: flex;
|
|
142
|
+
justify-content: flex-end;
|
|
143
|
+
gap: ${t(e.spacing24)};
|
|
144
|
+
padding: 0 ${t(e.spacing32)};
|
|
145
|
+
margin: ${t(e.spacing24)} 0;
|
|
146
|
+
}
|
|
147
|
+
`;
|
|
148
|
+
r([
|
|
149
|
+
c({ type: String, attribute: "header" })
|
|
150
|
+
], a.prototype, "header", 2);
|
|
151
|
+
r([
|
|
152
|
+
c({ type: Array })
|
|
153
|
+
], a.prototype, "actions", 2);
|
|
154
|
+
r([
|
|
155
|
+
c({ type: Boolean, attribute: "required" })
|
|
156
|
+
], a.prototype, "required", 2);
|
|
157
|
+
r([
|
|
158
|
+
c({ type: Boolean, attribute: "contain" })
|
|
159
|
+
], a.prototype, "contain", 2);
|
|
160
|
+
a = r([
|
|
161
|
+
$("alliance-modal")
|
|
162
|
+
], a);
|
|
163
|
+
//# sourceMappingURL=alliance-modal-5860f6c1.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alliance-modal-5860f6c1.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 } 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 inset: 0;\n position: fixed;\n z-index: ${unsafeCSS(parseInt(layers.modal))};\n }\n\n .backdrop {\n inset: 0;\n position: absolute;\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 align-items: flex-start;\n overflow-x: hidden;\n overflow-y: overlay;\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) + 2)};\n max-width: ${unsafeCSS(breakpoints.breakpointLg)};\n margin: ${unsafeCSS(spacing.spacing128)} ${unsafeCSS(spacing.spacing24)};\n display: block;\n position: static;\n padding: 0;\n border: none;\n }\n\n .header {\n position: relative;\n padding: ${unsafeCSS(spacing.spacing32)};\n border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};\n }\n\n .header telia-button {\n position: absolute;\n top: ${unsafeCSS(spacing.spacing20)};\n right: ${unsafeCSS(spacing.spacing20)};\n }\n\n .body {\n padding: 0 ${unsafeCSS(spacing.spacing32)};\n margin: ${unsafeCSS(spacing.spacing24)} 0;\n min-width: calc(${unsafeCSS(spacing.spacing128)} * 2);\n }\n\n .footer {\n display: flex;\n justify-content: flex-end;\n gap: ${unsafeCSS(spacing.spacing24)};\n padding: 0 ${unsafeCSS(spacing.spacing32)};\n margin: ${unsafeCSS(spacing.spacing24)} 0;\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 // 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 '';\n }\n\n return html`<style>\n :host {\n position: static !important;\n }\n .backdrop {\n position: absolute !important;\n }\n </style>`;\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 actionButtons = () => {\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=\"md\"\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 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()}\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=\"body\">\n <slot></slot>\n </div>\n ${this.actionButtons()}\n </dialog>\n </div>\n `;\n }\n}\n"],"names":["Modal","LitElement","html","close","repeat","action","event","css","unsafeCSS","layers","colors","borders","shadows","breakpoints","spacing","__decorateClass","property","customElement"],"mappings":"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"}
|
|
@@ -23,9 +23,13 @@ export declare class Modal extends LitElement {
|
|
|
23
23
|
static styles: import("lit").CSSResult;
|
|
24
24
|
header: string;
|
|
25
25
|
actions: Action[];
|
|
26
|
+
required: boolean;
|
|
26
27
|
contain?: boolean;
|
|
27
|
-
|
|
28
|
-
|
|
28
|
+
containStyling: () => "" | import("lit").TemplateResult<1>;
|
|
29
|
+
closeButton: () => "" | import("lit").TemplateResult<1>;
|
|
30
|
+
actionButtons: () => "" | import("lit").TemplateResult<1>;
|
|
31
|
+
onBackdropClick: () => boolean | undefined;
|
|
32
|
+
onCloseClick: () => boolean | undefined;
|
|
29
33
|
onKeyDown: (event: KeyboardEvent) => void;
|
|
30
34
|
connectedCallback(): void;
|
|
31
35
|
disconnectedCallback(): void;
|
package/components/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
import { i as m, r as t, e as g, s as $, y as r, a as v } from "./query-assigned-elements-4285356d.js";
|
|
2
|
-
import { c as y } from "./repeat-bf84f01f.js";
|
|
3
|
-
import "./telia-button2-d25eddda.js";
|
|
4
|
-
import "./telia-heading2-9d3ab48b.js";
|
|
5
|
-
import "./telia-icon2-34bf5aef.js";
|
|
6
|
-
import { l as h, c as b, b as u, s as f, a as w, d as e } from "./index-57f6bd40.js";
|
|
7
|
-
import { c as k } from "./close-7d423291.js";
|
|
8
|
-
var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, c = (i, a, d, n) => {
|
|
9
|
-
for (var o = n > 1 ? void 0 : n ? C(a, d) : a, l = i.length - 1, p; l >= 0; l--)
|
|
10
|
-
(p = i[l]) && (o = (n ? p(a, d, o) : p(o)) || o);
|
|
11
|
-
return n && o && x(a, d, o), o;
|
|
12
|
-
};
|
|
13
|
-
let s = class extends $ {
|
|
14
|
-
constructor() {
|
|
15
|
-
super(...arguments), this.header = "", this.actions = [], this.onBackdropClick = () => this.action("close"), this.onCloseClick = () => this.action("close"), this.onKeyDown = (i) => {
|
|
16
|
-
i.defaultPrevented || i.key === "Escape" && this.action("close");
|
|
17
|
-
}, this.action = (i) => {
|
|
18
|
-
const a = new CustomEvent("action", {
|
|
19
|
-
bubbles: !0,
|
|
20
|
-
composed: !0,
|
|
21
|
-
detail: { action: i },
|
|
22
|
-
cancelable: !0
|
|
23
|
-
});
|
|
24
|
-
return this.dispatchEvent(a);
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
connectedCallback() {
|
|
28
|
-
super.connectedCallback(), window.addEventListener("keydown", this.onKeyDown);
|
|
29
|
-
}
|
|
30
|
-
disconnectedCallback() {
|
|
31
|
-
window.removeEventListener("keydown", this.onKeyDown), super.disconnectedCallback();
|
|
32
|
-
}
|
|
33
|
-
render() {
|
|
34
|
-
return r`
|
|
35
|
-
${this.contain && r`<style>
|
|
36
|
-
:host {
|
|
37
|
-
position: static !important;
|
|
38
|
-
}
|
|
39
|
-
.backdrop {
|
|
40
|
-
position: absolute !important;
|
|
41
|
-
}
|
|
42
|
-
</style>`}
|
|
43
|
-
<div class="backdrop" @keydown=${console.log} @click=${this.onBackdropClick}></div>
|
|
44
|
-
<div class="container">
|
|
45
|
-
<dialog open>
|
|
46
|
-
<div class="header">
|
|
47
|
-
<telia-heading tag="h3" variant="title-100">${this.header}</telia-heading>
|
|
48
|
-
<telia-button size="sm" variant="text" @click=${this.onCloseClick}
|
|
49
|
-
><telia-icon size="md" svg="${k.svg}"
|
|
50
|
-
/></telia-button>
|
|
51
|
-
</div>
|
|
52
|
-
<div class="body">
|
|
53
|
-
<slot></slot>
|
|
54
|
-
</div>
|
|
55
|
-
${this.actions.length ? r`
|
|
56
|
-
<div class="footer">
|
|
57
|
-
${y(
|
|
58
|
-
this.actions,
|
|
59
|
-
(i) => r`
|
|
60
|
-
<telia-button
|
|
61
|
-
disabled="${i.disabled ? "true" : "false"}"
|
|
62
|
-
variant="${i.variant || "primary"}"
|
|
63
|
-
size="md"
|
|
64
|
-
@click=${() => this.action(i.action)}
|
|
65
|
-
>
|
|
66
|
-
${i.label}
|
|
67
|
-
</telia-button>
|
|
68
|
-
`
|
|
69
|
-
)}
|
|
70
|
-
</div>
|
|
71
|
-
` : ""}
|
|
72
|
-
</dialog>
|
|
73
|
-
</div>
|
|
74
|
-
`;
|
|
75
|
-
}
|
|
76
|
-
};
|
|
77
|
-
s.styles = m`
|
|
78
|
-
:host {
|
|
79
|
-
inset: 0;
|
|
80
|
-
position: fixed;
|
|
81
|
-
z-index: ${t(parseInt(h.modal))};
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.backdrop {
|
|
85
|
-
inset: 0;
|
|
86
|
-
position: absolute;
|
|
87
|
-
z-index: ${t(parseInt(h.modal) - 1)};
|
|
88
|
-
background-color: ${t(b.black)};
|
|
89
|
-
opacity: 0.3;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.container {
|
|
93
|
-
margin: 0 auto;
|
|
94
|
-
display: flex;
|
|
95
|
-
justify-content: center;
|
|
96
|
-
align-items: flex-start;
|
|
97
|
-
overflow-x: hidden;
|
|
98
|
-
overflow-y: overlay;
|
|
99
|
-
height: 100%;
|
|
100
|
-
width: 100%;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
dialog {
|
|
104
|
-
background-color: ${t(b.white)};
|
|
105
|
-
border-radius: ${t(u.radiusLg)};
|
|
106
|
-
box-shadow: ${t(f.md)};
|
|
107
|
-
z-index: ${t(parseInt(h.modal) + 2)};
|
|
108
|
-
max-width: ${t(w.breakpointLg)};
|
|
109
|
-
margin: ${t(e.spacing128)} ${t(e.spacing24)};
|
|
110
|
-
display: block;
|
|
111
|
-
position: static;
|
|
112
|
-
padding: 0;
|
|
113
|
-
border: none;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.header {
|
|
117
|
-
position: relative;
|
|
118
|
-
padding: ${t(e.spacing32)};
|
|
119
|
-
border-bottom: ${t(u.widthXs)} solid ${t(b.gray200)};
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.header telia-button {
|
|
123
|
-
position: absolute;
|
|
124
|
-
top: ${t(e.spacing20)};
|
|
125
|
-
right: ${t(e.spacing20)};
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.body {
|
|
129
|
-
padding: 0 ${t(e.spacing32)};
|
|
130
|
-
margin: ${t(e.spacing24)} 0;
|
|
131
|
-
min-width: calc(${t(e.spacing128)} * 2);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.footer {
|
|
135
|
-
display: flex;
|
|
136
|
-
justify-content: flex-end;
|
|
137
|
-
gap: ${t(e.spacing24)};
|
|
138
|
-
padding: 0 ${t(e.spacing32)};
|
|
139
|
-
margin: ${t(e.spacing24)} 0;
|
|
140
|
-
}
|
|
141
|
-
`;
|
|
142
|
-
c([
|
|
143
|
-
g({ type: String, attribute: "header" })
|
|
144
|
-
], s.prototype, "header", 2);
|
|
145
|
-
c([
|
|
146
|
-
g({ type: Array })
|
|
147
|
-
], s.prototype, "actions", 2);
|
|
148
|
-
c([
|
|
149
|
-
g({ type: Boolean, attribute: "contain" })
|
|
150
|
-
], s.prototype, "contain", 2);
|
|
151
|
-
s = c([
|
|
152
|
-
v("alliance-modal")
|
|
153
|
-
], s);
|
|
154
|
-
//# sourceMappingURL=alliance-modal-f2ab100c.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"alliance-modal-f2ab100c.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 } 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 inset: 0;\n position: fixed;\n z-index: ${unsafeCSS(parseInt(layers.modal))};\n }\n\n .backdrop {\n inset: 0;\n position: absolute;\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 align-items: flex-start;\n overflow-x: hidden;\n overflow-y: overlay;\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) + 2)};\n max-width: ${unsafeCSS(breakpoints.breakpointLg)};\n margin: ${unsafeCSS(spacing.spacing128)} ${unsafeCSS(spacing.spacing24)};\n display: block;\n position: static;\n padding: 0;\n border: none;\n }\n\n .header {\n position: relative;\n padding: ${unsafeCSS(spacing.spacing32)};\n border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};\n }\n\n .header telia-button {\n position: absolute;\n top: ${unsafeCSS(spacing.spacing20)};\n right: ${unsafeCSS(spacing.spacing20)};\n }\n\n .body {\n padding: 0 ${unsafeCSS(spacing.spacing32)};\n margin: ${unsafeCSS(spacing.spacing24)} 0;\n min-width: calc(${unsafeCSS(spacing.spacing128)} * 2);\n }\n\n .footer {\n display: flex;\n justify-content: flex-end;\n gap: ${unsafeCSS(spacing.spacing24)};\n padding: 0 ${unsafeCSS(spacing.spacing32)};\n margin: ${unsafeCSS(spacing.spacing24)} 0;\n }\n `;\n\n @property({ type: String, attribute: 'header' })\n header: string = '';\n\n @property({ type: Array })\n actions: Action[] = [];\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 onBackdropClick = () => {\n return this.action('close');\n };\n\n onCloseClick = () => {\n return this.action('close');\n };\n\n onKeyDown = (event: KeyboardEvent) => {\n if (event.defaultPrevented) {\n return;\n }\n\n if (event.key === 'Escape') {\n this.action('close');\n }\n };\n\n connectedCallback() {\n super.connectedCallback();\n window.addEventListener('keydown', this.onKeyDown);\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.contain &&\n html`<style>\n :host {\n position: static !important;\n }\n .backdrop {\n position: absolute !important;\n }\n </style>`}\n <div class=\"backdrop\" @keydown=${console.log} @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 <telia-button size=\"sm\" variant=\"text\" @click=${this.onCloseClick}\n ><telia-icon size=\"md\" svg=\"${close.svg}\"\n /></telia-button>\n </div>\n <div class=\"body\">\n <slot></slot>\n </div>\n ${this.actions.length\n ? 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=\"md\"\n @click=${() => this.action(action.action)}\n >\n ${action.label}\n </telia-button>\n `\n )}\n </div>\n `\n : ''}\n </dialog>\n </div>\n `;\n }\n}\n"],"names":["Modal","LitElement","event","action","html","close","repeat","css","unsafeCSS","layers","colors","borders","shadows","breakpoints","spacing","__decorateClass","property","customElement"],"mappings":"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"}
|