@getflip/swirl-components 0.259.1 → 0.261.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/components.json +120 -18
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-modal.cjs.entry.js +12 -5
- package/dist/cjs/swirl-option-list_2.cjs.entry.js +4 -1
- package/dist/cjs/swirl-switch.cjs.entry.js +4 -1
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-modal/swirl-modal.js +67 -20
- package/dist/collection/components/swirl-switch/swirl-switch.js +21 -1
- package/dist/collection/components/swirl-tag/swirl-tag.js +4 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-modal.js +14 -5
- package/dist/components/swirl-switch.js +5 -1
- package/dist/components/swirl-tag2.js +4 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-modal.entry.js +12 -5
- package/dist/esm/swirl-option-list_2.entry.js +4 -1
- package/dist/esm/swirl-switch.entry.js +4 -1
- package/dist/swirl-components/p-673ec310.entry.js +1 -0
- package/dist/swirl-components/p-7b831369.entry.js +1 -0
- package/dist/swirl-components/{p-6835a307.entry.js → p-a6e6e516.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-modal/swirl-modal.d.ts +8 -6
- package/dist/types/components/swirl-switch/swirl-switch.d.ts +1 -0
- package/dist/types/components/swirl-tag/swirl-tag.d.ts +1 -0
- package/dist/types/components.d.ts +18 -12
- package/package.json +1 -1
- package/vscode-data.json +41 -0
- package/dist/swirl-components/p-2a67a199.entry.js +0 -1
- package/dist/swirl-components/p-90470a38.entry.js +0 -1
|
@@ -50,11 +50,13 @@ export class SwirlModal {
|
|
|
50
50
|
this.hideLabel = undefined;
|
|
51
51
|
this.label = undefined;
|
|
52
52
|
this.maxHeight = undefined;
|
|
53
|
+
this.minHeight = undefined;
|
|
53
54
|
this.maxWidth = undefined;
|
|
54
55
|
this.padded = true;
|
|
55
56
|
this.primaryActionLabel = undefined;
|
|
56
57
|
this.secondaryActionLabel = undefined;
|
|
57
58
|
this.variant = "default";
|
|
59
|
+
this.contentGap = undefined;
|
|
58
60
|
this.hideSecondaryContent = undefined;
|
|
59
61
|
this.primaryContentMaxWidth = undefined;
|
|
60
62
|
this.secondaryContentMaxWidth = undefined;
|
|
@@ -174,16 +176,21 @@ export class SwirlModal {
|
|
|
174
176
|
"modal--scrolled-down": this.scrolledDown,
|
|
175
177
|
"modal--hide-secondary-content-borders": this.hideSecondaryContentBorders,
|
|
176
178
|
});
|
|
177
|
-
return (h(Host, { key: '
|
|
179
|
+
return (h(Host, { key: 'd033f0c1406706e17273c53722f695056ec020ef' }, h("section", { key: 'ac17a86296c2851b0657c648746a90889c9ecfda', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: '761720b16e6569e4d987f974947b5e2611e43fcd', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '0141dba284827e673f0d359bf954a5ba038f00ab', class: "modal__body", style: {
|
|
178
180
|
"--swirl-modal-max-height": this.maxHeight,
|
|
179
181
|
"--swirl-modal-height": this.height,
|
|
182
|
+
minHeight: this.minHeight,
|
|
180
183
|
maxWidth: this.maxWidth,
|
|
181
|
-
} }, h("header", { key: '
|
|
184
|
+
} }, h("header", { key: '69459b29420d96b9ba4d4f2436c3797a3124a7d3', class: "modal__custom-header" }, h("slot", { key: '104aaeb9c9db217a1e618e47711199414142cb8b', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '507ef90230648a0e442287cd2f54869e6cfa0eef', class: "modal__header" }, h("div", { key: 'f5857feebe80b246582bf7bf87d6d47e49f9b952', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '18ac7b39aad9fb3bc8d31e4c8b4a4bb44a05b2fb', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
182
185
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
183
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '
|
|
186
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'e20cd79a5e818f55e3f69c7f32fea9846df85dac', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'df671cb6a1dea04457c2efcd01834b8019bedfd8', class: "modal__content-container", style: {
|
|
187
|
+
gap: this.contentGap
|
|
188
|
+
? `var(--s-space-${this.contentGap})`
|
|
189
|
+
: undefined,
|
|
190
|
+
} }, h("div", { key: 'e2bbde38ff82eab2155d10de74b8a42367600727', class: "modal__primary-content", style: {
|
|
184
191
|
maxWidth: this.primaryContentMaxWidth,
|
|
185
192
|
flex: this.primaryContentFlex,
|
|
186
|
-
} }, h("div", { key: '
|
|
193
|
+
} }, h("div", { key: 'b2de29bd69871d147fc36b7492415c396fb1648a', class: "modal__header-tools" }, h("slot", { key: '2fc61ca6e9abe1b64454e98b107aebfc4749a4e1', name: "header-tools" })), h("div", { key: '2f061d28cd5f0bd4decdaa52a03d1ea0efa5fc52', class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '0874783375b78fc086476d5b225f0b4ae2b3e0fe' }))), h("div", { key: 'fb7c231c2f7fb23496abaca8cbdabcaca8a2f5d7', class: "modal__secondary-content", style: {
|
|
187
194
|
maxWidth: this.secondaryContentMaxWidth,
|
|
188
195
|
flex: this.secondaryContentFlex,
|
|
189
196
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -201,7 +208,7 @@ export class SwirlModal {
|
|
|
201
208
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
202
209
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
203
210
|
: undefined,
|
|
204
|
-
} }, h("slot", { key: '
|
|
211
|
+
} }, h("slot", { key: '6ed3a7f8e37ab33046acd79771c2cd0822a3f200', name: "secondary-content" }))), h("div", { key: 'e19e516962ea0ed06cce4ced0ac2733c1339a138', class: "modal__custom-footer" }, h("slot", { key: '9e4f0b146ff3ae13ed78ad4f23d268d76edcf9c2', name: "custom-footer" })), showControls && (h("footer", { key: '3fdf562211374639fec30f8fd36d924aefe14072', class: "modal__controls" }, h("swirl-button-group", { key: '2e0b6d4695b362c7b719580f231da797005bf025', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'e70248627158ce0da7fac07e113d78fe1136bd6e', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '2e18bb8c251139c5bac5758204218f4a3b4e6c50', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
|
|
205
212
|
}
|
|
206
213
|
static get is() { return "swirl-modal"; }
|
|
207
214
|
static get originalStyleUrls() {
|
|
@@ -337,6 +344,23 @@ export class SwirlModal {
|
|
|
337
344
|
"attribute": "max-height",
|
|
338
345
|
"reflect": false
|
|
339
346
|
},
|
|
347
|
+
"minHeight": {
|
|
348
|
+
"type": "string",
|
|
349
|
+
"mutable": false,
|
|
350
|
+
"complexType": {
|
|
351
|
+
"original": "string",
|
|
352
|
+
"resolved": "string",
|
|
353
|
+
"references": {}
|
|
354
|
+
},
|
|
355
|
+
"required": false,
|
|
356
|
+
"optional": true,
|
|
357
|
+
"docs": {
|
|
358
|
+
"tags": [],
|
|
359
|
+
"text": ""
|
|
360
|
+
},
|
|
361
|
+
"attribute": "min-height",
|
|
362
|
+
"reflect": false
|
|
363
|
+
},
|
|
340
364
|
"maxWidth": {
|
|
341
365
|
"type": "string",
|
|
342
366
|
"mutable": false,
|
|
@@ -430,6 +454,29 @@ export class SwirlModal {
|
|
|
430
454
|
"reflect": false,
|
|
431
455
|
"defaultValue": "\"default\""
|
|
432
456
|
},
|
|
457
|
+
"contentGap": {
|
|
458
|
+
"type": "string",
|
|
459
|
+
"mutable": false,
|
|
460
|
+
"complexType": {
|
|
461
|
+
"original": "SwirlModalSpacing",
|
|
462
|
+
"resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
|
|
463
|
+
"references": {
|
|
464
|
+
"SwirlModalSpacing": {
|
|
465
|
+
"location": "local",
|
|
466
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-modal/swirl-modal.tsx",
|
|
467
|
+
"id": "src/components/swirl-modal/swirl-modal.tsx::SwirlModalSpacing"
|
|
468
|
+
}
|
|
469
|
+
}
|
|
470
|
+
},
|
|
471
|
+
"required": false,
|
|
472
|
+
"optional": true,
|
|
473
|
+
"docs": {
|
|
474
|
+
"tags": [],
|
|
475
|
+
"text": ""
|
|
476
|
+
},
|
|
477
|
+
"attribute": "content-gap",
|
|
478
|
+
"reflect": false
|
|
479
|
+
},
|
|
433
480
|
"hideSecondaryContent": {
|
|
434
481
|
"type": "boolean",
|
|
435
482
|
"mutable": false,
|
|
@@ -536,13 +583,13 @@ export class SwirlModal {
|
|
|
536
583
|
"type": "string",
|
|
537
584
|
"mutable": false,
|
|
538
585
|
"complexType": {
|
|
539
|
-
"original": "
|
|
586
|
+
"original": "SwirlModalSpacing",
|
|
540
587
|
"resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
|
|
541
588
|
"references": {
|
|
542
|
-
"
|
|
589
|
+
"SwirlModalSpacing": {
|
|
543
590
|
"location": "local",
|
|
544
591
|
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-modal/swirl-modal.tsx",
|
|
545
|
-
"id": "src/components/swirl-modal/swirl-modal.tsx::
|
|
592
|
+
"id": "src/components/swirl-modal/swirl-modal.tsx::SwirlModalSpacing"
|
|
546
593
|
}
|
|
547
594
|
}
|
|
548
595
|
},
|
|
@@ -559,13 +606,13 @@ export class SwirlModal {
|
|
|
559
606
|
"type": "string",
|
|
560
607
|
"mutable": false,
|
|
561
608
|
"complexType": {
|
|
562
|
-
"original": "
|
|
609
|
+
"original": "SwirlModalSpacing",
|
|
563
610
|
"resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
|
|
564
611
|
"references": {
|
|
565
|
-
"
|
|
612
|
+
"SwirlModalSpacing": {
|
|
566
613
|
"location": "local",
|
|
567
614
|
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-modal/swirl-modal.tsx",
|
|
568
|
-
"id": "src/components/swirl-modal/swirl-modal.tsx::
|
|
615
|
+
"id": "src/components/swirl-modal/swirl-modal.tsx::SwirlModalSpacing"
|
|
569
616
|
}
|
|
570
617
|
}
|
|
571
618
|
},
|
|
@@ -582,13 +629,13 @@ export class SwirlModal {
|
|
|
582
629
|
"type": "string",
|
|
583
630
|
"mutable": false,
|
|
584
631
|
"complexType": {
|
|
585
|
-
"original": "
|
|
632
|
+
"original": "SwirlModalSpacing",
|
|
586
633
|
"resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
|
|
587
634
|
"references": {
|
|
588
|
-
"
|
|
635
|
+
"SwirlModalSpacing": {
|
|
589
636
|
"location": "local",
|
|
590
637
|
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-modal/swirl-modal.tsx",
|
|
591
|
-
"id": "src/components/swirl-modal/swirl-modal.tsx::
|
|
638
|
+
"id": "src/components/swirl-modal/swirl-modal.tsx::SwirlModalSpacing"
|
|
592
639
|
}
|
|
593
640
|
}
|
|
594
641
|
},
|
|
@@ -605,13 +652,13 @@ export class SwirlModal {
|
|
|
605
652
|
"type": "string",
|
|
606
653
|
"mutable": false,
|
|
607
654
|
"complexType": {
|
|
608
|
-
"original": "
|
|
655
|
+
"original": "SwirlModalSpacing",
|
|
609
656
|
"resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
|
|
610
657
|
"references": {
|
|
611
|
-
"
|
|
658
|
+
"SwirlModalSpacing": {
|
|
612
659
|
"location": "local",
|
|
613
660
|
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-modal/swirl-modal.tsx",
|
|
614
|
-
"id": "src/components/swirl-modal/swirl-modal.tsx::
|
|
661
|
+
"id": "src/components/swirl-modal/swirl-modal.tsx::SwirlModalSpacing"
|
|
615
662
|
}
|
|
616
663
|
}
|
|
617
664
|
},
|
|
@@ -628,13 +675,13 @@ export class SwirlModal {
|
|
|
628
675
|
"type": "string",
|
|
629
676
|
"mutable": false,
|
|
630
677
|
"complexType": {
|
|
631
|
-
"original": "
|
|
678
|
+
"original": "SwirlModalSpacing",
|
|
632
679
|
"resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
|
|
633
680
|
"references": {
|
|
634
|
-
"
|
|
681
|
+
"SwirlModalSpacing": {
|
|
635
682
|
"location": "local",
|
|
636
683
|
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-modal/swirl-modal.tsx",
|
|
637
|
-
"id": "src/components/swirl-modal/swirl-modal.tsx::
|
|
684
|
+
"id": "src/components/swirl-modal/swirl-modal.tsx::SwirlModalSpacing"
|
|
638
685
|
}
|
|
639
686
|
}
|
|
640
687
|
},
|
|
@@ -14,6 +14,7 @@ export class SwirlSwitch {
|
|
|
14
14
|
this.label = undefined;
|
|
15
15
|
this.labelPosition = "end";
|
|
16
16
|
this.value = undefined;
|
|
17
|
+
this.swirlAriaLabel = undefined;
|
|
17
18
|
}
|
|
18
19
|
/**
|
|
19
20
|
* Toggle the switch state programmatically.
|
|
@@ -30,7 +31,9 @@ export class SwirlSwitch {
|
|
|
30
31
|
"switch--on": on,
|
|
31
32
|
"switch--disabled": this.disabled,
|
|
32
33
|
});
|
|
33
|
-
return (h(Host, { key: '
|
|
34
|
+
return (h(Host, { key: 'bb36e59a2236b588270524d97e11c875ee41fe4a' }, h("label", { key: 'b3de9d0f1b11716cde14de0ea2f163509cccacc5', class: className, htmlFor: this.inputId }, h("span", { key: 'a19f8001a1d6275e09f233fea42378fd2a573d36', class: "switch__control" }, h("swirl-visually-hidden", { key: '16d4071f8274deb7a68c1415d30699f047a49684' }, h("input", { key: 'beb5b76df2e8b3590fceac2fb3bd8d1e0a30c1dc', "aria-checked": ariaCheckedLabel, "aria-label": !this.hideLabel && this.swirlAriaLabel
|
|
35
|
+
? this.swirlAriaLabel
|
|
36
|
+
: undefined, checked: on, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), role: "switch", type: "checkbox", value: this.value })), h("span", { key: 'f8bb40235dec900ca7e48e3ca004c20753cfcc39', "aria-hidden": "true", class: "switch__thumb" })), this.label && !this.hideLabel && (h("span", { key: 'b53227931a9b6e34eed46f7409677ecb27dfbdab', class: "switch__label" }, this.label)), this.hideLabel && (h("swirl-visually-hidden", { key: '64b8c18218a53923efc8998a966db48b9d92fecb' }, this.swirlAriaLabel || this.label)))));
|
|
34
37
|
}
|
|
35
38
|
static get is() { return "swirl-switch"; }
|
|
36
39
|
static get encapsulation() { return "scoped"; }
|
|
@@ -190,6 +193,23 @@ export class SwirlSwitch {
|
|
|
190
193
|
},
|
|
191
194
|
"attribute": "value",
|
|
192
195
|
"reflect": false
|
|
196
|
+
},
|
|
197
|
+
"swirlAriaLabel": {
|
|
198
|
+
"type": "string",
|
|
199
|
+
"mutable": false,
|
|
200
|
+
"complexType": {
|
|
201
|
+
"original": "string",
|
|
202
|
+
"resolved": "string",
|
|
203
|
+
"references": {}
|
|
204
|
+
},
|
|
205
|
+
"required": false,
|
|
206
|
+
"optional": true,
|
|
207
|
+
"docs": {
|
|
208
|
+
"tags": [],
|
|
209
|
+
"text": ""
|
|
210
|
+
},
|
|
211
|
+
"attribute": "swirl-aria-label",
|
|
212
|
+
"reflect": false
|
|
193
213
|
}
|
|
194
214
|
};
|
|
195
215
|
}
|
|
@@ -21,6 +21,9 @@ export class SwirlTag {
|
|
|
21
21
|
componentWillLoad() {
|
|
22
22
|
this.forceVariant();
|
|
23
23
|
}
|
|
24
|
+
componentDidRender() {
|
|
25
|
+
this.forceIconProps();
|
|
26
|
+
}
|
|
24
27
|
forceIconProps() {
|
|
25
28
|
const icon = this.iconEl?.children[0];
|
|
26
29
|
icon?.setAttribute("size", "16");
|
|
@@ -33,7 +36,7 @@ export class SwirlTag {
|
|
|
33
36
|
}
|
|
34
37
|
render() {
|
|
35
38
|
const className = classnames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`);
|
|
36
|
-
return (h(Host, { key: '
|
|
39
|
+
return (h(Host, { key: 'b1252aae3bea38598442cb55686853e117d13c7f' }, h("span", { key: '8913c5ba54383d25683173d728f3bfaecc3e5738', class: className, part: "tag" }, this.icon && (h("span", { key: 'aaf64fd259e1379305e46314103380ac80330c45', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'f1bb805f0264d23957e244682027417f41dc6507', class: "tag__label" }, this.label), this.removable && (h("button", { key: 'c0e1fc5f3c153fea47edf8dadf0870b9d3ecb405', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '94acd6d0feb76393da944ae9bf41043735d297c6', size: 16 }))))));
|
|
37
40
|
}
|
|
38
41
|
static get is() { return "swirl-tag"; }
|
|
39
42
|
static get encapsulation() { return "shadow"; }
|