q2-tecton-elements 1.71.4 → 1.73.0

package/dist/esm/q2-action-sheet.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-Cqkz7Bnm.js';
-import { l as loc, w as waitForNextPaint } from './index-Cps4jSQM.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Cqkz7Bnm.js';
+import { l as loc, w as waitForNextPaint } from './index-CP8pXJ-l.js';
 import { s as sanitizeHTMLString, a as sanitizeActionSheetSlotHtml } from './sanitize-html-string-DPHNpMWE.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
 
-const q2ActionSheetCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;--comp-border-radius:var(--tct-action-sheet-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-action-sheet-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-action-sheet-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-action-sheet-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-action-sheet-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-action-sheet-color, inherit);--comp-dialog-padding:var(--tct-action-sheet-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-action-sheet-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-action-sheet-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-action-sheet-max-width, 400px);--comp-dialog-max-height:var(--tct-action-sheet-max-height, var(--comp-action-sheet-computed-max-height, 75vh));--comp-dialog-min-height:var(--tct-action-sheet-min-height, var(--comp-action-sheet-computed-min-height, 20vh));--comp-dialog-box-shadow:var(--tct-action-sheet-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden;min-height:var(--comp-dialog-min-height);max-height:var(--comp-dialog-max-height)}dialog::backdrop{opacity:0;background:var(--tct-action-sheet-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open].is-opening,dialog[open].is-open{transform:translateY(-100%)}@media screen and (min-width: 1200px){dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}@media screen and (min-width: 1200px){dialog{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:0}}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.interior{display:grid;grid-template-rows:44px 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding);margin-bottom:env(safe-area-inset-bottom, 0px)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}.interior [slot=popover-top]{padding:var(--tct-dropdown-popover-top-slot-padding, 0);border-bottom:var(--tct-dropdown-slot-border-top)}.interior [slot=popover-bottom]{padding:var(--tct-dropdown-popover-bottom-slot-padding, 0);border-top:var(--tct-dropdown-slot-border-bottom)}header{display:grid;grid-template-columns:var(--comp-close-button-size) 1fr var(--comp-close-button-size);grid-template-areas:". title close";gap:var(--comp-dialog-gap)}header #title{grid-area:title;text-align:center;line-height:var(--comp-header-height)}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}footer{display:flex;justify-content:end}`;
+const q2ActionSheetCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;--comp-border-radius:var(--tct-action-sheet-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-action-sheet-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-action-sheet-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-action-sheet-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-action-sheet-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-action-sheet-color, inherit);--comp-dialog-padding:var(--tct-action-sheet-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-action-sheet-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-action-sheet-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-action-sheet-max-width, 400px);--comp-dialog-max-height:var(--tct-action-sheet-max-height, var(--comp-action-sheet-computed-max-height, 75vh));--comp-dialog-min-height:var(--tct-action-sheet-min-height, var(--comp-action-sheet-computed-min-height, 20vh));--comp-dialog-box-shadow:var(--tct-action-sheet-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden;overscroll-behavior:contain;min-height:var(--comp-dialog-min-height);max-height:var(--comp-dialog-max-height)}dialog::backdrop{opacity:0;background:var(--tct-action-sheet-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open].is-opening,dialog[open].is-open{transform:translateY(-100%)}@media screen and (min-width: 1200px){dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}@media screen and (min-width: 1200px){dialog{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:0}}.content{overflow-y:auto;overscroll-behavior:contain;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.date-picker-content{padding:var(--tct-action-sheet-date-picker-padding, var(--app-scale-1x, 5px))}.interior{display:grid;grid-template-rows:44px 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding);margin-bottom:env(safe-area-inset-bottom, 0px)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}.interior [slot=popover-top]{padding:var(--tct-dropdown-popover-top-slot-padding, 0);border-bottom:var(--tct-dropdown-slot-border-top)}.interior [slot=popover-bottom]{padding:var(--tct-dropdown-popover-bottom-slot-padding, 0);border-top:var(--tct-dropdown-slot-border-bottom)}.list-body{display:contents}.interior.is-list{display:flex;flex-direction:column}.interior.is-list>header,.interior.is-list .list-body>.list-slot,.interior.is-list .list-body>footer{flex-shrink:0}.interior.is-list .list-body>.content{flex:1 1 auto;min-height:0}.interior.is-list .list-body>.content>.list-slot{margin-block:var(--comp-dialog-gap)}header{display:grid;grid-template-columns:var(--comp-close-button-size) 1fr var(--comp-close-button-size);grid-template-areas:". title close";gap:var(--comp-dialog-gap)}header #title{grid-area:title;text-align:center;line-height:var(--comp-header-height)}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}footer{display:flex;justify-content:end}@media screen and (max-width: 1199px) and (orientation: portrait){dialog:has(.date-picker-content){--comp-dialog-max-height:100dvh}.interior:has(.date-picker-content){max-height:calc(100dvh - var(--comp-dialog-padding) - var(--comp-dialog-padding))}.content.date-picker-content{overflow-y:visible}}@media screen and (max-width: 1199px) and (orientation: landscape){dialog:has(.date-picker-content){--comp-dialog-max-height:100dvh;height:100dvh}.interior:has(.date-picker-content){height:calc(100dvh - var(--comp-dialog-padding) - var(--comp-dialog-padding))}.content.date-picker-content{min-height:0}}`;
 
 const Q2ActionSheet = class {
     constructor(hostRef) {
@@ -11,9 +11,13 @@ const Q2ActionSheet = class {
         this.close = createEvent(this, "close", 7);
         this.ready = createEvent(this, "ready", 3);
         this.tctClose = createEvent(this, "tctClose", 7);
+        // #region Own Properties
+        this.bodyOverflow = '';
         this.initialSelectedOptions = [];
         this.maxHeight = 0.75;
         this.minHeight = 0.2;
+        this.rootOverflow = '';
+        this.selectedDate = {};
         this.selectedOptions = { values: [], value: '' };
         // #endregion
         // #region State Properties
@@ -170,6 +174,26 @@ const Q2ActionSheet = class {
                 return;
             this.onCancel(event);
         };
+        this.onDatePickerCancel = (event) => {
+            event.stopPropagation();
+            this.onCancel(event);
+        };
+        this.onDatePickerChange = (event) => {
+            event.stopPropagation();
+            this.selectedDate = event.detail;
+        };
+        this.onDatePickerClose = (event) => {
+            event.stopPropagation();
+            const detail = event.detail || undefined;
+            if (detail === null || detail === void 0 ? void 0 : detail.error) {
+                this.hide({ error: detail.error, type: 'confirm' });
+                return;
+            }
+            const hasSelection = this.selectedDate.value !== undefined ||
+                this.selectedDate.rangeStart !== undefined ||
+                this.selectedDate.rangeEnd !== undefined;
+            this.hide({ ...this.selectedDate, type: hasSelection ? 'confirm' : 'cancel' });
+        };
         this.onListChange = (event) => {
             this.selectedOptions = event.detail;
         };
@@ -189,16 +213,47 @@ const Q2ActionSheet = class {
                 this.onListDone();
             }
         };
+        this.onViewportResize = () => {
+            requestAnimationFrame(() => this.updateDialogMinMaxHeight());
+        };
         // #endregion
         // #region Render Methods
+        this.renderDatePicker = ({ data }) => {
+            const props = data.datePickerProps;
+            return (h("div", { class: "content date-picker-content", ref: el => (this.contentElement = el) }, h("q2-date-picker", { _actionSheet: true, open: true, calendarLabel: props.calendarLabel, closeDelay: props.closeDelay, cutoffTime: props.cutoffTime, daysOfWeekChecksum: props.daysOfWeekChecksum, disclaimer: props.disclaimer, endDate: props.endDate, displayFormat: props.displayFormat, invalidDates: props.invalidDates, locale: props.locale, mode: props.mode, rangeEnd: props.rangeEnd, rangeStart: props.rangeStart, startDate: props.startDate, validDates: props.validDates, value: props.value, onTctCancel: this.onDatePickerCancel, onTctChange: this.onDatePickerChange, onTctClose: this.onDatePickerClose })));
+        };
         this.renderList = ({ data }) => {
             var _a;
             const { listProps, slotsHtml = [] } = data;
-            return (h(Fragment, null, slotsHtml
-                .filter(entry => entry.slot === 'top')
-                .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) }))), h("div", { class: "content", ref: el => (this.contentElement = el) }, h("q2-option-list", { ref: el => (this.optionListElement = el), multiple: listProps.multiple, label: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.title) || this.title, noSelect: listProps.noSelect, onChange: this.onListChange, onPopoverState: this.onListPopoverStateChange, selectedOptions: listProps.selectedOptions }, h("slot", null))), h("footer", null, listProps.multiple && (h("q2-btn", { ref: el => (this.doneButtonElement = el), "test-id": "btnDone", intent: "workflow-primary", onClick: this.onListDone }, loc('tecton.element.actionSheet.done')))), slotsHtml
-                .filter(entry => entry.slot === 'bottom')
-                .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) })))));
+            let scrollTopSlots = false;
+            const slots = slotsHtml.map(entry => {
+                var _a;
+                const html = sanitizeActionSheetSlotHtml(entry.html);
+                const container = document.createElement('div');
+                container.innerHTML = html;
+                const marked = ((_a = container.firstElementChild) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-action-sheet-scroll')) === true;
+                if (entry.slot === 'top' && marked)
+                    scrollTopSlots = true;
+                return {
+                    ...entry,
+                    html,
+                    scrolls: entry.slot === 'top' ? scrollTopSlots : marked,
+                };
+            });
+            // Bottom content joins the scroll area from the options through the last marker.
+            let scrollBottomSlots = false;
+            for (let index = slots.length - 1; index >= 0; index--) {
+                const entry = slots[index];
+                if (entry.slot !== 'bottom')
+                    continue;
+                if (entry.scrolls)
+                    scrollBottomSlots = true;
+                entry.scrolls = scrollBottomSlots;
+            }
+            const renderSlots = (position, scrolls) => slots
+                .filter(entry => entry.slot === position && entry.scrolls === scrolls)
+                .map(entry => (h("div", { class: "list-slot", innerHTML: entry.html })));
+            return (h("div", { class: "list-body" }, renderSlots('top', false), h("div", { class: "content", ref: el => (this.contentElement = el) }, renderSlots('top', true), h("q2-option-list", { ref: el => (this.optionListElement = el), multiple: listProps.multiple, label: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.title) || this.title, noSelect: listProps.noSelect, onChange: this.onListChange, onPopoverState: this.onListPopoverStateChange, selectedOptions: listProps.selectedOptions }, h("slot", null)), renderSlots('bottom', true)), h("footer", null, listProps.multiple && (h("q2-btn", { ref: el => (this.doneButtonElement = el), "test-id": "btnDone", intent: "primary", onClick: this.onListDone }, loc('tecton.element.actionSheet.done')))), renderSlots('bottom', false)));
         };
         this.renderMessage = ({ data }) => {
             return (h("q2-message", { type: data.type }, data.title && h("h2", null, data.title), data.description && h("p", null, data.description)));
@@ -212,6 +267,9 @@ const Q2ActionSheet = class {
     disconnectedCallback() {
         this.dialogElement.removeEventListener('cancel', this.onCancel);
         this.dialogElement.removeEventListener('keydown', this.handleDialogKeydown, true);
+        window.removeEventListener('resize', this.onViewportResize);
+        if (this.dialogElement.open)
+            this.restorePageScroll();
     }
     componentDidLoad() {
         this.dialogElement.addEventListener('cancel', this.onCancel);
@@ -224,6 +282,8 @@ const Q2ActionSheet = class {
     async hide(data = { value: '', values: [], type: 'confirm' }) {
         mirrorEmit(this, ['close', 'tctClose'], data);
         this.renderStatus = 'is-closing';
+        window.removeEventListener('resize', this.onViewportResize);
+        this.restorePageScroll();
         this.dialogElement.addEventListener('transitionend', () => {
             if (this.renderStatus !== 'is-closing')
                 return;
@@ -231,25 +291,38 @@ const Q2ActionSheet = class {
             this.renderStatus = null;
             this.data = undefined;
             this.initialSelectedOptions = [];
+            this.selectedDate = {};
             this.selectedOptions = { values: [], value: '' };
             this.hidePostHook();
         }, { once: true });
     }
     async show() {
+        if (this.dialogElement.open)
+            return;
         this.showPreHook();
         await waitForNextPaint();
         this.updateDialogMinMaxHeight();
         this.storeInitialValues();
-        if (this.dialogElement.open)
-            return;
         this.dialogElement.showModal();
-        this.renderStatus = 'is-opening';
-        this.dialogElement.addEventListener('transitionend', () => {
-            if (this.renderStatus !== 'is-opening')
-                return;
-            this.renderStatus = 'is-open';
-            this.focusContent();
-        }, { once: true });
+        window.addEventListener('resize', this.onViewportResize);
+        this.bodyOverflow = document.body.style.overflow;
+        this.rootOverflow = document.documentElement.style.overflow;
+        document.body.style.overflow = 'hidden';
+        document.documentElement.style.overflow = 'hidden';
+        try {
+            this.renderStatus = 'is-opening';
+            this.dialogElement.addEventListener('transitionend', () => {
+                if (this.renderStatus !== 'is-opening')
+                    return;
+                this.renderStatus = 'is-open';
+                this.focusContent();
+            }, { once: true });
+        }
+        catch (error) {
+            window.removeEventListener('resize', this.onViewportResize);
+            this.restorePageScroll();
+            throw error;
+        }
     }
     // #endregion
     // #region Local Methods
@@ -275,6 +348,10 @@ const Q2ActionSheet = class {
             this.hostElement.innerHTML = null;
         }
     }
+    restorePageScroll() {
+        document.body.style.overflow = this.bodyOverflow;
+        document.documentElement.style.overflow = this.rootOverflow;
+    }
     showPreHook() {
         const { data } = this;
         if (!data)
@@ -300,12 +377,15 @@ const Q2ActionSheet = class {
         this.dialogElement.style.setProperty('--comp-action-sheet-computed-max-height', `${Math.floor(windowHeight * this.maxHeight)}px`);
     }
     render() {
-        var _a;
         const { data } = this;
         const showHeader = (data === null || data === void 0 ? void 0 : data.title) || this.title || !this.hideClose;
+        const headerTitle = (data === null || data === void 0 ? void 0 : data.title) || this.title;
         const renderStatus = this.renderStatus || '';
         let RenderContent = null;
         switch (data === null || data === void 0 ? void 0 : data.appearance) {
+            case 'date-picker':
+                RenderContent = this.renderDatePicker;
+                break;
             case 'message':
                 RenderContent = this.renderMessage;
                 break;
@@ -318,7 +398,7 @@ const Q2ActionSheet = class {
         }
         const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
         const interiorClasses = `interior is-${appearance}`;
-        return (h("dialog", { key: '840635222baf3ed3f7193c550bb73675d0b466d4', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick, "aria-labelledby": showHeader ? 'title' : undefined }, h("div", { key: 'c09338fde8ba753281162bd75714e29e6a8cc936', class: interiorClasses }, showHeader && (h("header", { key: 'd3bb667204c262a28363b71ffe6fba8209454391' }, h("div", { key: '8981cf55df99b607a49660fd6ecfe8ef827c100e', id: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'b4d175a3e7d0382ae9e4630a4fe0f85403af5888', ref: el => (this.closeButtonElement = el), class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '95624ea4bcb5a9897a2b09326de718205a32e346', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '4f599b2645c604bde96747af50f8d7344db60e11' }, data.description), RenderContent && h(RenderContent, { key: '0878d252923c4c3a8b82cc89f8a88fc3bace794d', data: this.data }))));
+        return (h("dialog", { key: 'a2594cad0378cf9bf045ed3ec1022afc58e34dbb', ref: el => (this.dialogElement = el), class: renderStatus, "aria-label": showHeader ? undefined : headerTitle, "aria-labelledby": showHeader ? 'title' : undefined, onClick: this.onClick }, h("div", { key: 'de6361cfa49ec69666b8b2c193dcc9cfc5ac4b0f', class: interiorClasses }, showHeader && (h("header", { key: 'c5a1ddd1f414027e3f75d2a7048c1ccd349cba78' }, h("div", { key: '3d4e7472f5c55ed96eec5ad8909d6ada7a5aa5b2', id: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'c5e4c952b308e2571a6e90017e4f8010b4a580fe', ref: el => (this.closeButtonElement = el), class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '10383e6b8d6ab899648208bbada3c18f47fb5bd3', type: "close" }))))), data && 'description' in data && data.description && h("p", { key: 'a1de7256a6f497270866f076d7697226a8bea946' }, data.description), RenderContent && h(RenderContent, { key: '3f5a57d706b4066c036bb4710a612bd34268b78e', data: this.data }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-avatar.entry.js

@@ -87,7 +87,7 @@ const Q2Avatar = class {
         const isLoaded = this.isLoaded;
         const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
         const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
-        return (h("div", { key: 'bdce1116b87a48c861e7ba66e0dccd13829d3819', class: `avatar-wrapper size-${this.size}` }, this.hasDecorator && (h("div", { key: '461db5f2062faa3c4d7f43105c84c51aabc179d8', class: "decorator" }, h("slot", { key: '673a93a53a752514bce15687f5791682fdf3b0b7', name: "decorator" }))), showImg && (h("img", { key: 'fa881cb161c7f2bf64dabc1cf888d465e4698cb9', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: '6d8707c833fed056813f81b9014e82584444fa54', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'ae99c0b68abaa70e9517dee3dfe6dfdccdad13d6', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: 'df92213216e69c7d933fdfcd4ba1664cee793e14', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '373a344abc59c1e8ea07472d932d5417265582d3', type: this.icon })))));
+        return (h("div", { key: '2a10f13b2ca606dab3563d026910d909e37ddcb0', class: `avatar-wrapper size-${this.size}` }, this.hasDecorator && (h("div", { key: 'e5deb3da74508a5731238724895ca9f1ab8b7a50', class: "decorator" }, h("slot", { key: '3cc01e88891a09f7917416a0acd0940e79decf26', name: "decorator" }))), showImg && (h("img", { key: 'cbed4e936072bca7bd23bd18b8679d0539c3fbd2', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: 'f1876a7748d3806e21e48f3de7b70c6faea499ca', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'a120d991968334f383efcb9d5ef920c7ee542880', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: '598457dc937327172221fab317246d1085a57b02', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '578836c985252ea19c06d5499e6ad8f9c311e09f', type: this.icon })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {