@telia-ace/alliance-ui 1.0.7-next.0 → 1.0.7
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 +21 -0
- package/chunks/alliance-modal-6cef0241.js +208 -0
- package/chunks/alliance-modal-6cef0241.js.map +1 -0
- package/components/alliance-modal/alliance-modal.d.ts +3 -1
- package/components/alliance-modal.js +1 -1
- package/components/index.js +1 -1
- package/package.json +1 -1
- package/chunks/alliance-modal-5860f6c1.js +0 -163
- package/chunks/alliance-modal-5860f6c1.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @telia-ace/alliance-ui
|
|
2
2
|
|
|
3
|
+
## 1.0.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- ebf3c0c: Add support for `required` property in `<alliance-modal>.`
|
|
8
|
+
- 0c1ec7b: Add `scroll-mode` property to `<alliance-modal>`.
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
- 0c1ec7b: Smaller action buttons and decreased vertical padding in `<alliance-modal>`.
|
|
13
|
+
|
|
14
|
+
## 1.0.7-next.1
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- 0c1ec7b: Add `scroll-mode` property to `<alliance-modal>`.
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
- 0c1ec7b: Smaller action buttons and decreased vertical padding in `<alliance-modal>`.
|
|
23
|
+
|
|
3
24
|
## 1.0.7-next.0
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
import { i as b, r as t, e as l, s as $, y as o, a as f } from "./query-assigned-elements-4285356d.js";
|
|
2
|
+
import { c as m } 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 g, c, b as y, s as v, 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, p, d) => {
|
|
9
|
+
for (var a = d > 1 ? void 0 : d ? C(n, p) : n, h = i.length - 1, u; h >= 0; h--)
|
|
10
|
+
(u = i[h]) && (a = (d ? u(n, p, a) : u(a)) || a);
|
|
11
|
+
return d && a && x(n, p, a), a;
|
|
12
|
+
};
|
|
13
|
+
let s = class extends $ {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments), this.header = "", this.actions = [], this.required = !1, this.scrollMode = "outside", this.containStyling = () => this.contain ? o`<style>
|
|
16
|
+
:host {
|
|
17
|
+
height: 500px;
|
|
18
|
+
position: static;
|
|
19
|
+
}
|
|
20
|
+
.backdrop {
|
|
21
|
+
position: absolute;
|
|
22
|
+
}
|
|
23
|
+
</style>` : o`<style>
|
|
24
|
+
:host {
|
|
25
|
+
position: fixed;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.backdrop {
|
|
29
|
+
position: absolute;
|
|
30
|
+
}
|
|
31
|
+
</style>`, this.scrollStyling = () => this.scrollMode === "inside" ? o`<style>
|
|
32
|
+
.container {
|
|
33
|
+
align-items: center;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
dialog {
|
|
37
|
+
max-height: 80%;
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-direction: column;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.body {
|
|
43
|
+
flex: 1;
|
|
44
|
+
padding: ${t(e.spacing24)} ${t(e.spacing32)};
|
|
45
|
+
height: 80%;
|
|
46
|
+
overflow-x: hidden;
|
|
47
|
+
overflow-y: auto;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.footer {
|
|
51
|
+
border-top: ${t(y.widthXs)} solid ${t(c.gray200)};
|
|
52
|
+
padding: ${t(e.spacing24)} ${t(e.spacing32)};
|
|
53
|
+
}
|
|
54
|
+
</style>` : o`<style>
|
|
55
|
+
.container {
|
|
56
|
+
overflow-x: hidden;
|
|
57
|
+
overflow-y: overlay;
|
|
58
|
+
align-items: flex-start;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
dialog {
|
|
62
|
+
display: block;
|
|
63
|
+
margin: ${t(e.spacing128)} ${t(e.spacing24)};
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.footer,
|
|
67
|
+
.body {
|
|
68
|
+
margin: ${t(e.spacing24)} 0;
|
|
69
|
+
padding: 0 ${t(e.spacing32)};
|
|
70
|
+
}
|
|
71
|
+
</style>`, this.closeButton = () => this.required ? "" : o`<telia-button size="sm" variant="text" @click=${this.onCloseClick}
|
|
72
|
+
><telia-icon size="md" svg="${k.svg}"
|
|
73
|
+
/></telia-button>`, this.actionButtons = () => this.actions.length ? o`
|
|
74
|
+
<div class="footer">
|
|
75
|
+
${m(
|
|
76
|
+
this.actions,
|
|
77
|
+
(i) => o`
|
|
78
|
+
<telia-button
|
|
79
|
+
disabled="${i.disabled ? "true" : "false"}"
|
|
80
|
+
variant="${i.variant || "primary"}"
|
|
81
|
+
size="sm"
|
|
82
|
+
@click=${() => this.action(i.action)}
|
|
83
|
+
>
|
|
84
|
+
${i.label}
|
|
85
|
+
</telia-button>
|
|
86
|
+
`
|
|
87
|
+
)}
|
|
88
|
+
</div>
|
|
89
|
+
` : "", this.onBackdropClick = () => {
|
|
90
|
+
if (!this.required)
|
|
91
|
+
return this.action("close");
|
|
92
|
+
}, this.onCloseClick = () => {
|
|
93
|
+
if (!this.required)
|
|
94
|
+
return this.action("close");
|
|
95
|
+
}, this.onKeyDown = (i) => {
|
|
96
|
+
i.defaultPrevented || !this.required && i.key === "Escape" && this.action("close");
|
|
97
|
+
}, this.action = (i) => {
|
|
98
|
+
const n = new CustomEvent("action", {
|
|
99
|
+
bubbles: !0,
|
|
100
|
+
composed: !0,
|
|
101
|
+
detail: { action: i },
|
|
102
|
+
cancelable: !0
|
|
103
|
+
});
|
|
104
|
+
return this.dispatchEvent(n);
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
connectedCallback() {
|
|
108
|
+
super.connectedCallback(), window.addEventListener("keydown", this.onKeyDown);
|
|
109
|
+
}
|
|
110
|
+
disconnectedCallback() {
|
|
111
|
+
window.removeEventListener("keydown", this.onKeyDown), super.disconnectedCallback();
|
|
112
|
+
}
|
|
113
|
+
render() {
|
|
114
|
+
return o`
|
|
115
|
+
${this.containStyling()} ${this.scrollStyling()}
|
|
116
|
+
<div class="backdrop" @click=${this.onBackdropClick}></div>
|
|
117
|
+
<div class="container">
|
|
118
|
+
<dialog open>
|
|
119
|
+
<div class="header">
|
|
120
|
+
<telia-heading tag="h3" variant="title-100">${this.header}</telia-heading>
|
|
121
|
+
${this.closeButton()}
|
|
122
|
+
</div>
|
|
123
|
+
<div class="body">
|
|
124
|
+
<slot></slot>
|
|
125
|
+
</div>
|
|
126
|
+
${this.actionButtons()}
|
|
127
|
+
</dialog>
|
|
128
|
+
</div>
|
|
129
|
+
`;
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
s.styles = b`
|
|
133
|
+
:host {
|
|
134
|
+
display: block;
|
|
135
|
+
inset: 0;
|
|
136
|
+
z-index: ${t(parseInt(g.modal) - 2)};
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.backdrop {
|
|
140
|
+
inset: 0;
|
|
141
|
+
z-index: ${t(parseInt(g.modal) - 1)};
|
|
142
|
+
background-color: ${t(c.black)};
|
|
143
|
+
opacity: 0.3;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.container {
|
|
147
|
+
margin: 0 auto;
|
|
148
|
+
display: flex;
|
|
149
|
+
justify-content: center;
|
|
150
|
+
height: 100%;
|
|
151
|
+
width: 100%;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
dialog {
|
|
155
|
+
background-color: ${t(c.white)};
|
|
156
|
+
border-radius: ${t(y.radiusLg)};
|
|
157
|
+
box-shadow: ${t(v.md)};
|
|
158
|
+
z-index: ${t(parseInt(g.modal))};
|
|
159
|
+
max-width: ${t(w.breakpointLg)};
|
|
160
|
+
position: static;
|
|
161
|
+
padding: 0;
|
|
162
|
+
border: none;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.header {
|
|
166
|
+
position: relative;
|
|
167
|
+
display: flex;
|
|
168
|
+
align-items: center;
|
|
169
|
+
padding: ${t(e.spacing24)} ${t(e.spacing32)};
|
|
170
|
+
border-bottom: ${t(y.widthXs)} solid ${t(c.gray200)};
|
|
171
|
+
min-height: 40px;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.header telia-button {
|
|
175
|
+
position: absolute;
|
|
176
|
+
top: ${t(e.spacing20)};
|
|
177
|
+
right: ${t(e.spacing24)};
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.body {
|
|
181
|
+
min-width: calc(${t(e.spacing128)} * 2);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.footer {
|
|
185
|
+
display: flex;
|
|
186
|
+
justify-content: flex-end;
|
|
187
|
+
gap: ${t(e.spacing16)};
|
|
188
|
+
}
|
|
189
|
+
`;
|
|
190
|
+
r([
|
|
191
|
+
l({ type: String, attribute: "header" })
|
|
192
|
+
], s.prototype, "header", 2);
|
|
193
|
+
r([
|
|
194
|
+
l({ type: Array })
|
|
195
|
+
], s.prototype, "actions", 2);
|
|
196
|
+
r([
|
|
197
|
+
l({ type: Boolean, attribute: "required" })
|
|
198
|
+
], s.prototype, "required", 2);
|
|
199
|
+
r([
|
|
200
|
+
l({ type: String, attribute: "scroll-mode" })
|
|
201
|
+
], s.prototype, "scrollMode", 2);
|
|
202
|
+
r([
|
|
203
|
+
l({ type: Boolean, attribute: "contain" })
|
|
204
|
+
], s.prototype, "contain", 2);
|
|
205
|
+
s = r([
|
|
206
|
+
f("alliance-modal")
|
|
207
|
+
], s);
|
|
208
|
+
//# sourceMappingURL=alliance-modal-6cef0241.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alliance-modal-6cef0241.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 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 .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 // 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 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=\"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 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()}\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","unsafeCSS","spacing","borders","colors","close","repeat","action","event","css","layers","shadows","breakpoints","__decorateClass","property","customElement"],"mappings":"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"}
|
|
@@ -24,8 +24,10 @@ export declare class Modal extends LitElement {
|
|
|
24
24
|
header: string;
|
|
25
25
|
actions: Action[];
|
|
26
26
|
required: boolean;
|
|
27
|
+
scrollMode: 'outside' | 'inside';
|
|
27
28
|
contain?: boolean;
|
|
28
|
-
containStyling: () =>
|
|
29
|
+
containStyling: () => import("lit").TemplateResult<1>;
|
|
30
|
+
scrollStyling: () => import("lit").TemplateResult<1>;
|
|
29
31
|
closeButton: () => "" | import("lit").TemplateResult<1>;
|
|
30
32
|
actionButtons: () => "" | import("lit").TemplateResult<1>;
|
|
31
33
|
onBackdropClick: () => boolean | undefined;
|
package/components/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,163 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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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"}
|