@getflip/swirl-components 0.413.1 → 0.414.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 +24 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-console-layout.cjs.entry.js +4 -3
- package/dist/cjs/swirl-date-input.cjs.entry.js +8 -1
- package/dist/collection/components/swirl-console-layout/swirl-console-layout.css +11 -0
- package/dist/collection/components/swirl-console-layout/swirl-console-layout.js +22 -2
- package/dist/collection/components/swirl-date-input/swirl-date-input.js +8 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-console-layout.js +5 -3
- package/dist/components/swirl-date-input.js +8 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-console-layout.entry.js +4 -3
- package/dist/esm/swirl-date-input.entry.js +8 -1
- package/dist/swirl-components/p-631e86ac.entry.js +1 -0
- package/dist/swirl-components/p-658c1584.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-console-layout/swirl-console-layout.d.ts +1 -0
- package/dist/types/components.d.ts +2 -0
- package/package.json +1 -1
- package/vscode-data.json +4 -0
- package/dist/swirl-components/p-049ab4f0.entry.js +0 -1
- package/dist/swirl-components/p-94c2d083.entry.js +0 -1
|
@@ -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 {
|
|
@@ -351,3 +351,14 @@
|
|
|
351
351
|
.console-layout__app-bar:not(.console-layout__app-bar--custom) {
|
|
352
352
|
display: none;
|
|
353
353
|
}
|
|
354
|
+
|
|
355
|
+
/* Hide content header mode - remove padding and hide content header */
|
|
356
|
+
.console-layout--hide-content-header .console-layout__content {
|
|
357
|
+
padding: 0;
|
|
358
|
+
overflow: hidden;
|
|
359
|
+
scrollbar-gutter: auto;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.console-layout--hide-content-header .console-layout__integration {
|
|
363
|
+
padding-bottom: 0;
|
|
364
|
+
}
|
|
@@ -156,12 +156,13 @@ export class SwirlConsoleLayout {
|
|
|
156
156
|
"console-layout--main-scrollable": this.contentScrollState.scrollable,
|
|
157
157
|
"console-layout--main-scrolled-to-top": this.contentScrollState.scrolledToTop,
|
|
158
158
|
"console-layout--main-scrolled-to-bottom": this.contentScrollState.scrolledToBottom,
|
|
159
|
+
"console-layout--hide-content-header": this.hideContentHeader,
|
|
159
160
|
});
|
|
160
|
-
return (h(Host, { key: '
|
|
161
|
+
return (h(Host, { key: '4815fb5e801fe8a6e6b0c822dc2368904bf2dc8b' }, h("div", { key: '6159ff22d25c7d27a677e6d67a3f8971016b5ef4', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: 'baefa5ac4861ba8363a46b9c64b95cca3479ebc1', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: 'd45a7e304e2013b9c134fab4fefd5380ab20de9a', class: "console-layout__header" }, h("div", { key: '3063e9bd8df891002fdf043b55407fce59a0c901', class: "console-layout__logo" }, h("svg", { key: '41f42776a3a3d1d88889a2fa108814fd660ace35', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'af24345a81f147ab75d8a20fd528dde813914352', d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), h("path", { key: 'fa7003b487a843eafd643d786ca4e9a66967ee1f', d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), h("path", { key: '14d9fe03db375d378a6a4db9c6b375ae55fdc03c', d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), h("path", { key: 'b903958362f3d3fa7f72d37fc1844bf9e4d7559b', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: 'b7f9690de23744e1dcc81f53acf97236a8362e75', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: 'a475177cc1f77ce548e3138f8ee6a202545b72cf', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: 'e9ce193270fe8193733b208f889cc788b9a277c5', name: "navigation" })), h("div", { key: '12584d4dc12ff36e0ecd0d853aace0936794790f', class: "console-layout__user" }, h("slot", { key: 'c7db2cbc4b349a9598f97979beeec2e7e61cd33d', name: "user" }))), h("main", { key: '2b48c26ec129def46e1cc3f3be7151fb863a8113', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: 'cb481e40c801b8c42967f35de8400905ded5a70f', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: '7fdb1d5bd16e7b1d64ae6db7a910490e41b86866', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), h("header", { key: '36e691514c17442d18ec856cc42934594cc8c939', class: "console-layout__app-bar" }, h("span", { key: 'b1f0bc0fe2770791d5a0b8136869d91c92161743', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: '22871bc55035291e21878ed88b42e813a7224f89', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
|
|
161
162
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
162
163
|
: "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
|
|
163
164
|
? this.hideNavigationButtonLabel
|
|
164
|
-
: this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: '
|
|
165
|
+
: this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: '36fdc660f38123feeb8b0028d856988d3c5441e5', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '17a56f9da94065e344b1b6b8ffd84b82c6dff7cb', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: '328cd8b96c1559d3aaf520715e52089bfdcb8b44', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: '19486de9997b5daf9af31a25a8885c86329cdb46', "aria-labelledby": "heading", class: "console-layout__content", onScroll: this.onMainScroll, ref: (el) => (this.contentEl = el) }, h("div", { key: '12d6c46a62957ed848c7894a68f4b1e0824b0b9e', class: "console-layout__content-container" }, !this.hideContentHeader && (h("header", { key: 'cc4cc44ca37cb973521feca0ccf4236f0a5d6607', class: "console-layout__content-header", style: contentStyles }, this.showBackButton && (h("swirl-button", { key: 'f27f8fc2d149f4e4587f4a755b4023f60136df2a', class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (h("div", { key: 'd76d8b57036bc3105565ede67dc9ee84fb719992', class: "console-layout__heading-container" }, h("swirl-heading", { key: '1dc1bd897ae597bf67fc31154711632393bca99b', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '2e405156ab5fe2332064050248ef4de2e0b3c1b7', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: 'e1304c66641fe4b12289ea8e34f0ea3e305360f0', class: "console-layout__heading-container" }, h("slot", { key: '79c27ac40d642391776704ddde0b5823537fe3b1', name: "heading" }))), h("div", { key: 'f3ab1fc15a49bec24c74d934bc244c29eb681ff9', class: "console-layout__content-header-tools" }, h("slot", { key: 'cf9640f2b11289b98618397046d87ecfb09da321', name: "content-header-tools" })))), h("div", { key: 'f2b7b295a028120ea5d9bd971e0078e957a6ff48', class: "console-layout__integration", style: contentStyles }, h("slot", { key: '0a48de530204d697420fc83e0e0665abe9bcd55d', name: "content" })))), h("footer", { key: '19f61a51b65406ddf246726467add2e0b9fdbe8c', class: "console-layout__footer" }, h("slot", { key: '5d7b06005008d041669ebac4a11b2d8816365edf', name: "footer", onSlotchange: this.updateFooterStatus })), h("div", { key: '62c51f28ff4035296904dfac3a3f7ca01ce20dff', class: "console-layout__overlays" }, h("slot", { key: 'ae36884ab5fa186a7113ea509b8629c78d50c809', name: "overlays" }))))));
|
|
165
166
|
}
|
|
166
167
|
static get is() { return "swirl-console-layout"; }
|
|
167
168
|
static get encapsulation() { return "shadow"; }
|
|
@@ -410,6 +411,25 @@ export class SwirlConsoleLayout {
|
|
|
410
411
|
"getter": false,
|
|
411
412
|
"setter": false,
|
|
412
413
|
"reflect": false
|
|
414
|
+
},
|
|
415
|
+
"hideContentHeader": {
|
|
416
|
+
"type": "boolean",
|
|
417
|
+
"attribute": "hide-content-header",
|
|
418
|
+
"mutable": false,
|
|
419
|
+
"complexType": {
|
|
420
|
+
"original": "boolean",
|
|
421
|
+
"resolved": "boolean",
|
|
422
|
+
"references": {}
|
|
423
|
+
},
|
|
424
|
+
"required": false,
|
|
425
|
+
"optional": true,
|
|
426
|
+
"docs": {
|
|
427
|
+
"tags": [],
|
|
428
|
+
"text": ""
|
|
429
|
+
},
|
|
430
|
+
"getter": false,
|
|
431
|
+
"setter": false,
|
|
432
|
+
"reflect": false
|
|
413
433
|
}
|
|
414
434
|
};
|
|
415
435
|
}
|
|
@@ -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"; }
|