@getflip/swirl-components 0.413.0 → 0.413.2
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 +1 -1
- package/dist/cjs/swirl-avatar-group.cjs.entry.js +1 -1
- package/dist/cjs/swirl-date-input.cjs.entry.js +8 -1
- package/dist/cjs/swirl-icon-checkbox-filled.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.css +2 -0
- package/dist/collection/components/swirl-date-input/swirl-date-input.js +8 -1
- package/dist/collection/components/swirl-icon/icons/swirl-icon-checkbox-filled.js +1 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-avatar-group.js +1 -1
- package/dist/components/swirl-date-input.js +8 -1
- package/dist/components/swirl-icon-checkbox-filled.js +1 -1
- package/dist/esm/swirl-avatar-group.entry.js +1 -1
- package/dist/esm/swirl-date-input.entry.js +8 -1
- package/dist/esm/swirl-icon-checkbox-filled.entry.js +1 -1
- package/dist/swirl-components/p-5049c7d6.entry.js +1 -0
- package/dist/swirl-components/p-5515e41f.entry.js +1 -0
- package/dist/swirl-components/p-631e86ac.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +2 -2
- package/dist/swirl-components/p-65e8e897.entry.js +0 -1
- package/dist/swirl-components/p-94c2d083.entry.js +0 -1
- package/dist/swirl-components/p-ca6728d2.entry.js +0 -1
package/components.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-UMoljGbd.js');
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
|
|
6
|
-
const swirlAvatarGroupCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative}.avatar-group--diagonal-stack{display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group--diagonal-stack ::slotted(*:first-child){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group--diagonal-stack ::slotted(*:nth-child(2)){z-index:0;display:inline-flex;border-radius:50%;grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group--diagonal-stack ::slotted(*:nth-child(n+3)){display:none}.avatar-group--diagonal-stack .avatar-group__badge{position:absolute;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4))}.avatar-group--horizontal-stack{display:inline-flex}.avatar-group--horizontal-stack .avatar-group__badge{display:none}.avatar-group--horizontal-stack ::slotted(*){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.125rem var(--swirl-avatar-group-border-color)}.avatar-group--horizontal-stack ::slotted(*:not(:first-child)){margin-left:calc(-1 * var(--s-space-4))}.avatar-group__badge{z-index:3;display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}";
|
|
6
|
+
const swirlAvatarGroupCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative}.avatar-group--diagonal-stack{display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group--diagonal-stack ::slotted(*:first-child){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color);grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group--diagonal-stack ::slotted(*:nth-child(2)){z-index:0;display:inline-flex;border-radius:50%;grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group--diagonal-stack ::slotted(*:nth-child(n+3)){display:none}.avatar-group--diagonal-stack .avatar-group__badge{position:absolute;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4))}.avatar-group--horizontal-stack{display:inline-flex}.avatar-group--horizontal-stack .avatar-group__badge{display:none}.avatar-group--horizontal-stack ::slotted(*){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.125rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color)}.avatar-group--horizontal-stack ::slotted(*:not(:first-child)){margin-left:calc(-1 * var(--s-space-4))}.avatar-group__badge{z-index:3;display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}";
|
|
7
7
|
|
|
8
8
|
const SwirlAvatarGroup = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -189,6 +189,13 @@ const SwirlDateInput = class {
|
|
|
189
189
|
return newString;
|
|
190
190
|
},
|
|
191
191
|
});
|
|
192
|
+
// Listen for when the mask is cleared to reset the value
|
|
193
|
+
this.mask.on("accept", () => {
|
|
194
|
+
if (this.mask.value === "") {
|
|
195
|
+
this.value = "";
|
|
196
|
+
this.valueChange.emit("");
|
|
197
|
+
}
|
|
198
|
+
});
|
|
192
199
|
this.updateValue();
|
|
193
200
|
}
|
|
194
201
|
updateValue() {
|
|
@@ -215,7 +222,7 @@ const SwirlDateInput = class {
|
|
|
215
222
|
const className = index$2.classnames("date-input", {
|
|
216
223
|
"date-input--inline": this.inline,
|
|
217
224
|
});
|
|
218
|
-
return (index.h(index.Host, { key: '
|
|
225
|
+
return (index.h(index.Host, { key: '77aaf0846db36ae3c53aedfe95f6b8b1f1760572' }, index.h("div", { key: '346e4f7f711d8fa13203083e2812d24a2f6c5471', class: className }, index.h("input", { key: '1a851268aa0479639893a6975be78713353c8e8f', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.isInPickOnlyMode || this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), !this.readonly && (index.h("swirl-popover-trigger", { key: '8e5da94d520dcc92deebfe8c9e17a9d7c4dddb81', swirlPopover: `popover-${this.id}` }, index.h("button", { key: 'ae641758c00ff228020ad06959fbaa58f51f3b06', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, index.h("swirl-icon-today", { key: 'a19d5137d01c3a7381109eafeafc4d4a1529ad4e', size: this.iconSize }))))), !(this.disabled || this.readonly) && (index.h("swirl-popover", { key: 'dac1e2a9d8190f24e532944b6aabd91c484982c2', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, index.h("swirl-date-picker", { key: '0d26e6a36dbc28b0c877f34f1ff5b993faa01fa6', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
|
|
219
226
|
}
|
|
220
227
|
get el() { return index.getElement(this); }
|
|
221
228
|
static get watchers() { return {
|
|
@@ -16,7 +16,7 @@ const SwirlIconCheckboxFilled = class {
|
|
|
16
16
|
color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
|
|
17
17
|
};
|
|
18
18
|
const className = index$1.classnames("swirl-icon", `swirl-icon--size-${this.size}`);
|
|
19
|
-
return (index.h("svg", { key: '6efbf4778cbc5bb8ebfc9ca1e888f65ca3ad4eec', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (index.h(index.Fragment, { key: 'ce2e7bc30b4bf29e9d9a3ba805acb8ab67cb2c60' }, index.h("path", { key: '
|
|
19
|
+
return (index.h("svg", { key: '6efbf4778cbc5bb8ebfc9ca1e888f65ca3ad4eec', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (index.h(index.Fragment, { key: 'ce2e7bc30b4bf29e9d9a3ba805acb8ab67cb2c60' }, index.h("path", { key: 'e2b369ee4aa32c5a622fe4c3097515ffd37554dd', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 1.33337C13.4728 1.33337 14.6667 2.52728 14.6667 4.00004V12C14.6667 13.4728 13.4728 14.6667 12 14.6667H4.00004C2.52728 14.6667 1.33337 13.4728 1.33337 12V4.00004C1.33337 2.52728 2.52728 1.33337 4.00004 1.33337H12ZM10.8334 5.71684C10.6445 5.71684 10.4888 5.77759 10.3666 5.89978L7.06645 9.19991L5.61658 7.75004C5.4944 7.62789 5.3419 7.56982 5.15889 7.57556C4.97534 7.58089 4.82213 7.64475 4.69991 7.76697C4.57788 7.88911 4.51702 8.04444 4.51697 8.23311C4.51697 8.42194 4.57777 8.57771 4.69991 8.69991L6.6003 10.6003C6.72242 10.7223 6.87782 10.7832 7.06645 10.7832C7.25522 10.7832 7.41105 10.7224 7.53324 10.6003L11.3164 6.81645C11.4386 6.69425 11.4975 6.54162 11.4922 6.35811C11.4864 6.175 11.4224 6.022 11.3002 5.89978C11.178 5.7776 11.0222 5.71684 10.8334 5.71684Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (index.h(index.Fragment, { key: '81497eaa901ef6c1119cc7e15bc529a08b069aea' }, index.h("path", { key: 'c542d5fcf2a9c9797ff97947f9965790077f26e0', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18 2C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6C2 3.79086 3.79086 2 6 2H18ZM16.25 8.5752C15.9667 8.5752 15.7331 8.66632 15.5498 8.84961L10.5996 13.7998L8.4248 11.625C8.24154 11.4418 8.0128 11.3547 7.73828 11.3633C7.46295 11.3713 7.23314 11.4671 7.0498 11.6504C6.86677 11.8336 6.77546 12.0666 6.77539 12.3496C6.77539 12.6328 6.86659 12.8665 7.0498 13.0498L9.90039 15.9004C10.0836 16.0834 10.3167 16.1747 10.5996 16.1748C10.8828 16.1748 11.1165 16.0835 11.2998 15.9004L16.9746 10.2246C17.1579 10.0413 17.2462 9.81237 17.2383 9.53711C17.2296 9.26244 17.1335 9.03294 16.9502 8.84961C16.7669 8.66633 16.5333 8.5752 16.25 8.5752Z", fill: "currentColor" }))), this.size === 28 && (index.h(index.Fragment, { key: 'cff2be13520bf6a219806b5f85f965d6b16b818f' }, index.h("path", { key: '60f2a68cd72fa403d4d013bdfbef36050bbd1556', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21 2.33337C23.5774 2.33337 25.6667 4.42271 25.6667 7.00004V21C25.6667 23.5774 23.5774 25.6667 21 25.6667H7.00004C4.42271 25.6667 2.33337 23.5774 2.33337 21V7.00004C2.33337 4.42271 4.42271 2.33337 7.00004 2.33337H21ZM18.9584 10.0044C18.6279 10.0044 18.3554 10.1108 18.1415 10.3246L12.3663 16.0998L9.82898 13.5625C9.61517 13.3488 9.3483 13.2472 9.02804 13.2572C8.70681 13.2665 8.4387 13.3783 8.22481 13.5922C8.01127 13.8059 7.90475 14.0777 7.90466 14.4079C7.90466 14.7384 8.01107 15.011 8.22481 15.2248L11.5505 18.5505C11.7642 18.764 12.0362 18.8705 12.3663 18.8706C12.6966 18.8706 12.9693 18.7641 13.1831 18.5505L19.8038 11.9288C20.0176 11.7149 20.1207 11.4478 20.1114 11.1267C20.1013 10.8062 19.9892 10.5385 19.7753 10.3246C19.5614 10.1108 19.2889 10.0044 18.9584 10.0044Z", fill: "currentColor" })))));
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
SwirlIconCheckboxFilled.style = swirlIconCss;
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
display: inline-flex;
|
|
22
22
|
border-radius: 50%;
|
|
23
23
|
box-shadow: 0 0 0 0.25rem var(--swirl-avatar-group-border-color);
|
|
24
|
+
background-color: var(--swirl-avatar-group-border-color);
|
|
24
25
|
grid-column-start: 1;
|
|
25
26
|
grid-column-end: 7;
|
|
26
27
|
grid-row-start: 4;
|
|
@@ -60,6 +61,7 @@
|
|
|
60
61
|
display: inline-flex;
|
|
61
62
|
border-radius: 50%;
|
|
62
63
|
box-shadow: 0 0 0 0.125rem var(--swirl-avatar-group-border-color);
|
|
64
|
+
background-color: var(--swirl-avatar-group-border-color);
|
|
63
65
|
}
|
|
64
66
|
|
|
65
67
|
.avatar-group--horizontal-stack ::slotted(*:not(:first-child)) {
|
|
@@ -182,6 +182,13 @@ export class SwirlDateInput {
|
|
|
182
182
|
return newString;
|
|
183
183
|
},
|
|
184
184
|
});
|
|
185
|
+
// Listen for when the mask is cleared to reset the value
|
|
186
|
+
this.mask.on("accept", () => {
|
|
187
|
+
if (this.mask.value === "") {
|
|
188
|
+
this.value = "";
|
|
189
|
+
this.valueChange.emit("");
|
|
190
|
+
}
|
|
191
|
+
});
|
|
185
192
|
this.updateValue();
|
|
186
193
|
}
|
|
187
194
|
updateValue() {
|
|
@@ -208,7 +215,7 @@ export class SwirlDateInput {
|
|
|
208
215
|
const className = classnames("date-input", {
|
|
209
216
|
"date-input--inline": this.inline,
|
|
210
217
|
});
|
|
211
|
-
return (h(Host, { key: '
|
|
218
|
+
return (h(Host, { key: '77aaf0846db36ae3c53aedfe95f6b8b1f1760572' }, h("div", { key: '346e4f7f711d8fa13203083e2812d24a2f6c5471', class: className }, h("input", { key: '1a851268aa0479639893a6975be78713353c8e8f', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.isInPickOnlyMode || this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), !this.readonly && (h("swirl-popover-trigger", { key: '8e5da94d520dcc92deebfe8c9e17a9d7c4dddb81', swirlPopover: `popover-${this.id}` }, h("button", { key: 'ae641758c00ff228020ad06959fbaa58f51f3b06', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'a19d5137d01c3a7381109eafeafc4d4a1529ad4e', size: this.iconSize }))))), !(this.disabled || this.readonly) && (h("swirl-popover", { key: 'dac1e2a9d8190f24e532944b6aabd91c484982c2', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '0d26e6a36dbc28b0c877f34f1ff5b993faa01fa6', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
|
|
212
219
|
}
|
|
213
220
|
static get is() { return "swirl-date-input"; }
|
|
214
221
|
static get encapsulation() { return "scoped"; }
|
|
@@ -11,7 +11,7 @@ export class SwirlIconCheckboxFilled {
|
|
|
11
11
|
color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
|
|
12
12
|
};
|
|
13
13
|
const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
|
|
14
|
-
return (h("svg", { key: '6efbf4778cbc5bb8ebfc9ca1e888f65ca3ad4eec', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: 'ce2e7bc30b4bf29e9d9a3ba805acb8ab67cb2c60' }, h("path", { key: '
|
|
14
|
+
return (h("svg", { key: '6efbf4778cbc5bb8ebfc9ca1e888f65ca3ad4eec', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: 'ce2e7bc30b4bf29e9d9a3ba805acb8ab67cb2c60' }, h("path", { key: 'e2b369ee4aa32c5a622fe4c3097515ffd37554dd', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 1.33337C13.4728 1.33337 14.6667 2.52728 14.6667 4.00004V12C14.6667 13.4728 13.4728 14.6667 12 14.6667H4.00004C2.52728 14.6667 1.33337 13.4728 1.33337 12V4.00004C1.33337 2.52728 2.52728 1.33337 4.00004 1.33337H12ZM10.8334 5.71684C10.6445 5.71684 10.4888 5.77759 10.3666 5.89978L7.06645 9.19991L5.61658 7.75004C5.4944 7.62789 5.3419 7.56982 5.15889 7.57556C4.97534 7.58089 4.82213 7.64475 4.69991 7.76697C4.57788 7.88911 4.51702 8.04444 4.51697 8.23311C4.51697 8.42194 4.57777 8.57771 4.69991 8.69991L6.6003 10.6003C6.72242 10.7223 6.87782 10.7832 7.06645 10.7832C7.25522 10.7832 7.41105 10.7224 7.53324 10.6003L11.3164 6.81645C11.4386 6.69425 11.4975 6.54162 11.4922 6.35811C11.4864 6.175 11.4224 6.022 11.3002 5.89978C11.178 5.7776 11.0222 5.71684 10.8334 5.71684Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: '81497eaa901ef6c1119cc7e15bc529a08b069aea' }, h("path", { key: 'c542d5fcf2a9c9797ff97947f9965790077f26e0', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18 2C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6C2 3.79086 3.79086 2 6 2H18ZM16.25 8.5752C15.9667 8.5752 15.7331 8.66632 15.5498 8.84961L10.5996 13.7998L8.4248 11.625C8.24154 11.4418 8.0128 11.3547 7.73828 11.3633C7.46295 11.3713 7.23314 11.4671 7.0498 11.6504C6.86677 11.8336 6.77546 12.0666 6.77539 12.3496C6.77539 12.6328 6.86659 12.8665 7.0498 13.0498L9.90039 15.9004C10.0836 16.0834 10.3167 16.1747 10.5996 16.1748C10.8828 16.1748 11.1165 16.0835 11.2998 15.9004L16.9746 10.2246C17.1579 10.0413 17.2462 9.81237 17.2383 9.53711C17.2296 9.26244 17.1335 9.03294 16.9502 8.84961C16.7669 8.66633 16.5333 8.5752 16.25 8.5752Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: 'cff2be13520bf6a219806b5f85f965d6b16b818f' }, h("path", { key: '60f2a68cd72fa403d4d013bdfbef36050bbd1556', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21 2.33337C23.5774 2.33337 25.6667 4.42271 25.6667 7.00004V21C25.6667 23.5774 23.5774 25.6667 21 25.6667H7.00004C4.42271 25.6667 2.33337 23.5774 2.33337 21V7.00004C2.33337 4.42271 4.42271 2.33337 7.00004 2.33337H21ZM18.9584 10.0044C18.6279 10.0044 18.3554 10.1108 18.1415 10.3246L12.3663 16.0998L9.82898 13.5625C9.61517 13.3488 9.3483 13.2472 9.02804 13.2572C8.70681 13.2665 8.4387 13.3783 8.22481 13.5922C8.01127 13.8059 7.90475 14.0777 7.90466 14.4079C7.90466 14.7384 8.01107 15.011 8.22481 15.2248L11.5505 18.5505C11.7642 18.764 12.0362 18.8705 12.3663 18.8706C12.6966 18.8706 12.9693 18.7641 13.1831 18.5505L19.8038 11.9288C20.0176 11.7149 20.1207 11.4478 20.1114 11.1267C20.1013 10.8062 19.9892 10.5385 19.7753 10.3246C19.5614 10.1108 19.2889 10.0044 18.9584 10.0044Z", fill: "currentColor" })))));
|
|
15
15
|
}
|
|
16
16
|
static get is() { return "swirl-icon-checkbox-filled"; }
|
|
17
17
|
static get encapsulation() { return "shadow"; }
|