@digital-realty/ix-dialog 1.0.9 → 1.0.23

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.
Files changed (9) hide show
  1. package/dist/IxDialog.d.ts +1 -1
  2. package/dist/IxDialog.js +1 -1
  3. package/dist/IxDialog.js.map +1 -1
  4. package/dist/ix-dialog.js +10 -0
  5. package/dist/ix-dialog.js.map +1 -1
  6. package/dist/md-dialog.d.ts +6 -0
  7. package/dist/md-dialog.js +282 -0
  8. package/dist/md-dialog.js.map +1 -0
  9. package/package.json +3 -3
package/dist/IxDialog.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { LitElement } from 'lit';
2
- import '@material/web/dialog/dialog.js';
2
+ import './md-dialog.js';
3
3
  import { Dialog } from '@material/web/dialog/internal/dialog.js';
4
4
  export declare class IxDialog extends LitElement {
5
5
  /** @nocollapse */
package/dist/IxDialog.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { html, LitElement } from 'lit';
3
3
  import { property, query } from 'lit/decorators.js';
4
- import '@material/web/dialog/dialog.js';
4
+ import './md-dialog.js';
5
5
  import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
6
6
  export class IxDialog extends LitElement {
7
7
  constructor() {
package/dist/IxDialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IxDialog.js","sourceRoot":"","sources":["../src/IxDialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,gCAAgC,CAAC;AAExC,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAEpF,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAc8C,SAAI,GAAG,KAAK,CAAC;IAwC3D,CAAC;IAtCC,MAAM;QACJ,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACxC,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,OAAO;QACL,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACzC,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,IAAI;;gBAET,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;kBACb,IAAI,CAAC,QAAQ;;;;;;;KAO1B,CAAC;IACJ,CAAC;;AApDD;IACE,yBAAyB,CAAC,QAAQ,CAAC,CAAC;AACtC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,0BAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,CAAC;AAGF;IADC,KAAK,CAAC,SAAS,CAAC;2CACW;AAEgB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAc","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport '@material/web/dialog/dialog.js';\nimport { Dialog } from '@material/web/dialog/internal/dialog.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\n\nexport class IxDialog extends LitElement {\n static {\n requestUpdateOnAriaChange(IxDialog);\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @query('.dialog')\n readonly component!: Dialog;\n\n @property({ type: Boolean, reflect: true }) open = false;\n\n onOpen() {\n this.dispatchEvent(new Event('open'));\n }\n\n onOpened() {\n this.dispatchEvent(new Event('opened'));\n }\n\n onClose() {\n this.dispatchEvent(new Event('close'));\n }\n\n onClosed() {\n this.dispatchEvent(new Event('closed'));\n }\n\n onCancel() {\n this.dispatchEvent(new Event('cancel'));\n }\n\n render() {\n return html`\n <md-dialog\n ?open=${this.open}\n class=\"dialog\"\n @open=${this.onOpen}\n @opened=${this.onOpened}\n @close=${this.onClose}\n @closed=${this.onClosed}\n @cancel=${this.onCancel}\n >\n <slot slot=\"headline\" name=\"headline\"></slot>\n <slot slot=\"content\" name=\"content\"></slot>\n <slot slot=\"actions\" name=\"actions\"></slot>\n ></md-dialog\n >\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"IxDialog.js","sourceRoot":"","sources":["../src/IxDialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAEpF,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAc8C,SAAI,GAAG,KAAK,CAAC;IAwC3D,CAAC;IAtCC,MAAM;QACJ,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACxC,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,OAAO;QACL,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACzC,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,IAAI;;gBAET,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;kBACb,IAAI,CAAC,QAAQ;;;;;;;KAO1B,CAAC;IACJ,CAAC;;AApDD;IACE,yBAAyB,CAAC,QAAQ,CAAC,CAAC;AACtC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,0BAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,CAAC;AAGF;IADC,KAAK,CAAC,SAAS,CAAC;2CACW;AAEgB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAc","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport './md-dialog.js';\nimport { Dialog } from '@material/web/dialog/internal/dialog.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\n\nexport class IxDialog extends LitElement {\n static {\n requestUpdateOnAriaChange(IxDialog);\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @query('.dialog')\n readonly component!: Dialog;\n\n @property({ type: Boolean, reflect: true }) open = false;\n\n onOpen() {\n this.dispatchEvent(new Event('open'));\n }\n\n onOpened() {\n this.dispatchEvent(new Event('opened'));\n }\n\n onClose() {\n this.dispatchEvent(new Event('close'));\n }\n\n onClosed() {\n this.dispatchEvent(new Event('closed'));\n }\n\n onCancel() {\n this.dispatchEvent(new Event('cancel'));\n }\n\n render() {\n return html`\n <md-dialog\n ?open=${this.open}\n class=\"dialog\"\n @open=${this.onOpen}\n @opened=${this.onOpened}\n @close=${this.onClose}\n @closed=${this.onClosed}\n @cancel=${this.onCancel}\n >\n <slot slot=\"headline\" name=\"headline\"></slot>\n <slot slot=\"content\" name=\"content\"></slot>\n <slot slot=\"actions\" name=\"actions\"></slot>\n ></md-dialog\n >\n `;\n }\n}\n"]}
package/dist/ix-dialog.js CHANGED
@@ -3,9 +3,19 @@ import { IxDialog } from './IxDialog.js';
3
3
  export class IxDialogStyled extends IxDialog {
4
4
  }
5
5
  IxDialogStyled.styles = css `
6
+ :root,
7
+ :host :root,
8
+ :host {
9
+ font-size: var(--ix-dialog-font-size, 0.875rem);
10
+ line-height: var(--ix-dialog-line-height, 1.25rem);
11
+ }
12
+
6
13
  .dialog {
7
14
  max-height: 90vh;
8
15
  max-width: 90vw;
16
+ background: red;
17
+ font-size: var(--ix-dialog-font-size, 0.875rem);
18
+ line-height: var(--ix-dialog-line-height, 1.25rem);
9
19
  }
10
20
  `;
11
21
  window.customElements.define('ix-dialog', IxDialogStyled);
package/dist/ix-dialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ix-dialog.js","sourceRoot":"","sources":["../src/ix-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,OAAO,cAAe,SAAQ,QAAQ;;AAC1B,qBAAM,GAAG,GAAG,CAAA;;;;;GAK3B,CAAC;AAGJ,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { IxDialog } from './IxDialog.js';\n\nexport class IxDialogStyled extends IxDialog {\n static override styles = css`\n .dialog {\n max-height: 90vh;\n max-width: 90vw;\n }\n `;\n}\n\nwindow.customElements.define('ix-dialog', IxDialogStyled);\n"]}
1
+ {"version":3,"file":"ix-dialog.js","sourceRoot":"","sources":["../src/ix-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,OAAO,cAAe,SAAQ,QAAQ;;AAC1B,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;GAe3B,CAAC;AAGJ,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { IxDialog } from './IxDialog.js';\n\nexport class IxDialogStyled extends IxDialog {\n static override styles = css`\n :root,\n :host :root,\n :host {\n font-size: var(--ix-dialog-font-size, 0.875rem);\n line-height: var(--ix-dialog-line-height, 1.25rem);\n }\n\n .dialog {\n max-height: 90vh;\n max-width: 90vw;\n background: red;\n font-size: var(--ix-dialog-font-size, 0.875rem);\n line-height: var(--ix-dialog-line-height, 1.25rem);\n }\n `;\n}\n\nwindow.customElements.define('ix-dialog', IxDialogStyled);\n"]}
package/dist/md-dialog.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { CSSResultOrNative } from 'lit';
2
+ import { Dialog } from '@material/web/dialog/internal/dialog.js';
3
+ export declare const styles: import("lit").CSSResult;
4
+ export declare class MdDialog extends Dialog {
5
+ static styles: CSSResultOrNative[];
6
+ }
package/dist/md-dialog.js ADDED
@@ -0,0 +1,282 @@
1
+ import { css } from 'lit';
2
+ import { Dialog } from '@material/web/dialog/internal/dialog.js';
3
+ export const styles = css `
4
+ :host {
5
+ border-start-start-radius: var(
6
+ --md-dialog-container-shape-start-start,
7
+ var(
8
+ --md-dialog-container-shape,
9
+ var(--md-sys-shape-corner-extra-large, 28px)
10
+ )
11
+ );
12
+ border-start-end-radius: var(
13
+ --md-dialog-container-shape-start-end,
14
+ var(
15
+ --md-dialog-container-shape,
16
+ var(--md-sys-shape-corner-extra-large, 28px)
17
+ )
18
+ );
19
+ border-end-end-radius: var(
20
+ --md-dialog-container-shape-end-end,
21
+ var(
22
+ --md-dialog-container-shape,
23
+ var(--md-sys-shape-corner-extra-large, 28px)
24
+ )
25
+ );
26
+ border-end-start-radius: var(
27
+ --md-dialog-container-shape-end-start,
28
+ var(
29
+ --md-dialog-container-shape,
30
+ var(--md-sys-shape-corner-extra-large, 28px)
31
+ )
32
+ );
33
+ display: contents;
34
+ margin: auto;
35
+ max-height: min(560px, 100% - 48px);
36
+ max-width: min(560px, 100% - 48px);
37
+ min-height: 140px;
38
+ min-width: 280px;
39
+ position: fixed;
40
+ height: fit-content;
41
+ width: fit-content;
42
+ }
43
+
44
+ dialog {
45
+ background: rgba(0, 0, 0, 0);
46
+ border: none;
47
+ border-radius: inherit;
48
+ box-shadow: 0px 12px 16px 0px rgba(0, 0, 0, 0.58);
49
+ flex-direction: column;
50
+ height: inherit;
51
+ margin: inherit;
52
+ max-height: inherit;
53
+ max-width: inherit;
54
+ min-height: inherit;
55
+ min-width: inherit;
56
+ outline: none;
57
+ overflow: visible;
58
+ padding: 0;
59
+ width: inherit;
60
+ }
61
+
62
+ dialog[open] {
63
+ display: flex;
64
+ }
65
+
66
+ ::backdrop {
67
+ background: none;
68
+ }
69
+
70
+ .scrim {
71
+ background: var(--ix-scrim-color, #000);
72
+ display: none;
73
+ inset: 0;
74
+ opacity: var(--ix-scrim-opacity, 50%);
75
+ pointer-events: none;
76
+ position: fixed;
77
+ z-index: 1;
78
+ }
79
+
80
+ :host([open]) .scrim {
81
+ display: flex;
82
+ }
83
+
84
+ h2 {
85
+ all: unset;
86
+ align-self: stretch;
87
+ }
88
+
89
+ .headline {
90
+ align-items: center;
91
+ color: var(
92
+ --md-dialog-headline-color,
93
+ var(--md-sys-color-on-surface, #1d1b20)
94
+ );
95
+ display: flex;
96
+ flex-direction: column;
97
+ font-family: var(
98
+ --md-dialog-headline-font,
99
+ var(
100
+ --md-sys-typescale-headline-small-font,
101
+ var(--md-ref-typeface-brand, Roboto)
102
+ )
103
+ );
104
+ font-size: var(
105
+ --md-dialog-headline-size,
106
+ var(--md-sys-typescale-headline-small-size, 1.5rem)
107
+ );
108
+ line-height: var(
109
+ --md-dialog-headline-line-height,
110
+ var(--md-sys-typescale-headline-small-line-height, 2rem)
111
+ );
112
+ font-weight: var(
113
+ --md-dialog-headline-weight,
114
+ var(
115
+ --md-sys-typescale-headline-small-weight,
116
+ var(--md-ref-typeface-weight-regular, 400)
117
+ )
118
+ );
119
+ position: relative;
120
+ }
121
+
122
+ slot[name='headline']::slotted(*) {
123
+ align-items: center;
124
+ align-self: stretch;
125
+ box-sizing: border-box;
126
+ display: flex;
127
+ gap: 8px;
128
+ padding: 24px 24px 0;
129
+ }
130
+
131
+ .icon {
132
+ display: flex;
133
+ }
134
+
135
+ slot[name='icon']::slotted(*) {
136
+ color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));
137
+ fill: currentColor;
138
+ font-size: var(--md-dialog-icon-size, 24px);
139
+ margin-top: 24px;
140
+ height: var(--md-dialog-icon-size, 24px);
141
+ width: var(--md-dialog-icon-size, 24px);
142
+ }
143
+
144
+ .has-icon slot[name='headline']::slotted(*) {
145
+ justify-content: center;
146
+ padding-top: 16px;
147
+ }
148
+
149
+ .scrollable slot[name='headline']::slotted(*) {
150
+ padding-bottom: 16px;
151
+ }
152
+
153
+ .scrollable.has-headline slot[name='content']::slotted(*) {
154
+ padding-top: 8px;
155
+ }
156
+
157
+ .container {
158
+ border-radius: inherit;
159
+ display: flex;
160
+ flex-direction: column;
161
+ flex-grow: 1;
162
+ overflow: hidden;
163
+ position: relative;
164
+ transform-origin: top;
165
+ }
166
+
167
+ .container::before {
168
+ background: var(
169
+ --md-dialog-container-color,
170
+ var(--md-sys-color-surface-container-high, #ece6f0)
171
+ );
172
+ border-radius: inherit;
173
+ content: '';
174
+ inset: 0;
175
+ position: absolute;
176
+ }
177
+
178
+ .scroller {
179
+ display: flex;
180
+ flex: 1;
181
+ flex-direction: column;
182
+ overflow: hidden;
183
+ z-index: 1;
184
+ }
185
+
186
+ .scrollable .scroller {
187
+ overflow-y: scroll;
188
+ }
189
+
190
+ .content {
191
+ color: var(
192
+ --md-dialog-supporting-text-color,
193
+ var(--md-sys-color-on-surface-variant, #49454f)
194
+ );
195
+ font-family: var(
196
+ --md-dialog-supporting-text-font,
197
+ var(
198
+ --md-sys-typescale-body-medium-font,
199
+ var(--md-ref-typeface-plain, Roboto)
200
+ )
201
+ );
202
+ font-size: var(
203
+ --md-dialog-supporting-text-size,
204
+ var(--md-sys-typescale-body-medium-size, 0.875rem)
205
+ );
206
+ line-height: var(
207
+ --md-dialog-supporting-text-line-height,
208
+ var(--md-sys-typescale-body-medium-line-height, 1.25rem)
209
+ );
210
+ font-weight: var(
211
+ --md-dialog-supporting-text-weight,
212
+ var(
213
+ --md-sys-typescale-body-medium-weight,
214
+ var(--md-ref-typeface-weight-regular, 400)
215
+ )
216
+ );
217
+ height: min-content;
218
+ position: relative;
219
+ }
220
+
221
+ slot[name='content']::slotted(*) {
222
+ box-sizing: border-box;
223
+ padding: 24px;
224
+ }
225
+
226
+ .anchor {
227
+ position: absolute;
228
+ }
229
+
230
+ .top.anchor {
231
+ top: 0;
232
+ }
233
+
234
+ .bottom.anchor {
235
+ bottom: 0;
236
+ }
237
+
238
+ .actions {
239
+ position: relative;
240
+ }
241
+
242
+ slot[name='actions']::slotted(*) {
243
+ box-sizing: border-box;
244
+ display: flex;
245
+ gap: 8px;
246
+ justify-content: flex-end;
247
+ padding: 16px 24px 24px;
248
+ }
249
+
250
+ .has-actions slot[name='content']::slotted(*) {
251
+ padding-bottom: 8px;
252
+ }
253
+
254
+ md-divider {
255
+ display: none;
256
+ position: absolute;
257
+ }
258
+
259
+ .has-headline.show-top-divider .headline md-divider,
260
+ .has-actions.show-bottom-divider .actions md-divider {
261
+ display: flex;
262
+ }
263
+
264
+ .headline md-divider {
265
+ bottom: 0;
266
+ }
267
+
268
+ .actions md-divider {
269
+ top: 0;
270
+ }
271
+
272
+ @media (forced-colors: active) {
273
+ dialog {
274
+ outline: 2px solid WindowText;
275
+ }
276
+ }
277
+ `;
278
+ export class MdDialog extends Dialog {
279
+ }
280
+ MdDialog.styles = [styles];
281
+ window.customElements.define('md-dialog', MdDialog);
282
+ //# sourceMappingURL=md-dialog.js.map
package/dist/md-dialog.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"md-dialog.js","sourceRoot":"","sources":["../src/md-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,GAAG,EAAE,MAAM,KAAK,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkRxB,CAAC;AAEF,MAAM,OAAO,QAAS,SAAQ,MAAM;;AAClB,eAAM,GAAwB,CAAC,MAAM,CAAC,CAAC;AAGzD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["import { CSSResultOrNative, css } from 'lit';\n\nimport { Dialog } from '@material/web/dialog/internal/dialog.js';\n\nexport const styles = css`\n :host {\n border-start-start-radius: var(\n --md-dialog-container-shape-start-start,\n var(\n --md-dialog-container-shape,\n var(--md-sys-shape-corner-extra-large, 28px)\n )\n );\n border-start-end-radius: var(\n --md-dialog-container-shape-start-end,\n var(\n --md-dialog-container-shape,\n var(--md-sys-shape-corner-extra-large, 28px)\n )\n );\n border-end-end-radius: var(\n --md-dialog-container-shape-end-end,\n var(\n --md-dialog-container-shape,\n var(--md-sys-shape-corner-extra-large, 28px)\n )\n );\n border-end-start-radius: var(\n --md-dialog-container-shape-end-start,\n var(\n --md-dialog-container-shape,\n var(--md-sys-shape-corner-extra-large, 28px)\n )\n );\n display: contents;\n margin: auto;\n max-height: min(560px, 100% - 48px);\n max-width: min(560px, 100% - 48px);\n min-height: 140px;\n min-width: 280px;\n position: fixed;\n height: fit-content;\n width: fit-content;\n }\n\n dialog {\n background: rgba(0, 0, 0, 0);\n border: none;\n border-radius: inherit;\n box-shadow: 0px 12px 16px 0px rgba(0, 0, 0, 0.58);\n flex-direction: column;\n height: inherit;\n margin: inherit;\n max-height: inherit;\n max-width: inherit;\n min-height: inherit;\n min-width: inherit;\n outline: none;\n overflow: visible;\n padding: 0;\n width: inherit;\n }\n\n dialog[open] {\n display: flex;\n }\n\n ::backdrop {\n background: none;\n }\n\n .scrim {\n background: var(--ix-scrim-color, #000);\n display: none;\n inset: 0;\n opacity: var(--ix-scrim-opacity, 50%);\n pointer-events: none;\n position: fixed;\n z-index: 1;\n }\n\n :host([open]) .scrim {\n display: flex;\n }\n\n h2 {\n all: unset;\n align-self: stretch;\n }\n\n .headline {\n align-items: center;\n color: var(\n --md-dialog-headline-color,\n var(--md-sys-color-on-surface, #1d1b20)\n );\n display: flex;\n flex-direction: column;\n font-family: var(\n --md-dialog-headline-font,\n var(\n --md-sys-typescale-headline-small-font,\n var(--md-ref-typeface-brand, Roboto)\n )\n );\n font-size: var(\n --md-dialog-headline-size,\n var(--md-sys-typescale-headline-small-size, 1.5rem)\n );\n line-height: var(\n --md-dialog-headline-line-height,\n var(--md-sys-typescale-headline-small-line-height, 2rem)\n );\n font-weight: var(\n --md-dialog-headline-weight,\n var(\n --md-sys-typescale-headline-small-weight,\n var(--md-ref-typeface-weight-regular, 400)\n )\n );\n position: relative;\n }\n\n slot[name='headline']::slotted(*) {\n align-items: center;\n align-self: stretch;\n box-sizing: border-box;\n display: flex;\n gap: 8px;\n padding: 24px 24px 0;\n }\n\n .icon {\n display: flex;\n }\n\n slot[name='icon']::slotted(*) {\n color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));\n fill: currentColor;\n font-size: var(--md-dialog-icon-size, 24px);\n margin-top: 24px;\n height: var(--md-dialog-icon-size, 24px);\n width: var(--md-dialog-icon-size, 24px);\n }\n\n .has-icon slot[name='headline']::slotted(*) {\n justify-content: center;\n padding-top: 16px;\n }\n\n .scrollable slot[name='headline']::slotted(*) {\n padding-bottom: 16px;\n }\n\n .scrollable.has-headline slot[name='content']::slotted(*) {\n padding-top: 8px;\n }\n\n .container {\n border-radius: inherit;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\n position: relative;\n transform-origin: top;\n }\n\n .container::before {\n background: var(\n --md-dialog-container-color,\n var(--md-sys-color-surface-container-high, #ece6f0)\n );\n border-radius: inherit;\n content: '';\n inset: 0;\n position: absolute;\n }\n\n .scroller {\n display: flex;\n flex: 1;\n flex-direction: column;\n overflow: hidden;\n z-index: 1;\n }\n\n .scrollable .scroller {\n overflow-y: scroll;\n }\n\n .content {\n color: var(\n --md-dialog-supporting-text-color,\n var(--md-sys-color-on-surface-variant, #49454f)\n );\n font-family: var(\n --md-dialog-supporting-text-font,\n var(\n --md-sys-typescale-body-medium-font,\n var(--md-ref-typeface-plain, Roboto)\n )\n );\n font-size: var(\n --md-dialog-supporting-text-size,\n var(--md-sys-typescale-body-medium-size, 0.875rem)\n );\n line-height: var(\n --md-dialog-supporting-text-line-height,\n var(--md-sys-typescale-body-medium-line-height, 1.25rem)\n );\n font-weight: var(\n --md-dialog-supporting-text-weight,\n var(\n --md-sys-typescale-body-medium-weight,\n var(--md-ref-typeface-weight-regular, 400)\n )\n );\n height: min-content;\n position: relative;\n }\n\n slot[name='content']::slotted(*) {\n box-sizing: border-box;\n padding: 24px;\n }\n\n .anchor {\n position: absolute;\n }\n\n .top.anchor {\n top: 0;\n }\n\n .bottom.anchor {\n bottom: 0;\n }\n\n .actions {\n position: relative;\n }\n\n slot[name='actions']::slotted(*) {\n box-sizing: border-box;\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n padding: 16px 24px 24px;\n }\n\n .has-actions slot[name='content']::slotted(*) {\n padding-bottom: 8px;\n }\n\n md-divider {\n display: none;\n position: absolute;\n }\n\n .has-headline.show-top-divider .headline md-divider,\n .has-actions.show-bottom-divider .actions md-divider {\n display: flex;\n }\n\n .headline md-divider {\n bottom: 0;\n }\n\n .actions md-divider {\n top: 0;\n }\n\n @media (forced-colors: active) {\n dialog {\n outline: 2px solid WindowText;\n }\n }\n`;\n\nexport class MdDialog extends Dialog {\n static override styles: CSSResultOrNative[] = [styles];\n}\n\nwindow.customElements.define('md-dialog', MdDialog);\n"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent ix-dialog following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "Digital Realty",
6
- "version": "1.0.9",
6
+ "version": "1.0.23",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -27,7 +27,7 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@lit/react": "^1.0.2",
30
- "@material/web": "^1.0.1",
30
+ "@material/web": "1.2.0",
31
31
  "lit": "^2.7.6",
32
32
  "react": "^18.2.0"
33
33
  },
@@ -95,5 +95,5 @@
95
95
  "README.md",
96
96
  "LICENSE"
97
97
  ],
98
- "gitHead": "7dd8615d5f732cb14d465b2d46b2ee743546a4b2"
98
+ "gitHead": "dced04ebef5c8342344b1fd3df33b5e22a78725f"
99
99
  }