@eui/mobile-core 17.3.2-snapshot-1724139015958 → 17.4.0-snapshot-1724418554241

package/fesm2022/eui-mobile-core.mjs

@@ -3643,9 +3643,10 @@ class EuimToolbarDatepickerComponent {
     get cssClasses() {
         return this.getCssClasses();
     }
-    constructor(baseStatesDirective, translate) {
+    constructor(baseStatesDirective, translate, modalController) {
         this.baseStatesDirective = baseStatesDirective;
         this.translate = translate;
+        this.modalController = modalController;
         this.icon = 'calendar-clear-sharp';
         this.prevBtnClick = new EventEmitter();
         this.nextBtnClick = new EventEmitter();
@@ -3657,6 +3658,12 @@ class EuimToolbarDatepickerComponent {
         this.currentDate = new Date();
         this.formattedDate = this.currentDate.toLocaleDateString();
     }
+    async dismissModal() {
+        const topModal = await this.modalController.getTop();
+        if (topModal) {
+            await this.modalController.dismiss();
+        }
+    }
     get dateTimeId() {
         return this._dateTimeId;
     }
@@ -3701,14 +3708,24 @@ class EuimToolbarDatepickerComponent {
         }
     }
     selectPrevDate() {
-        this.currentDate.setDate(this.currentDate.getDate() - 1);
+        if (this.selectDateBy === 'week') {
+            this.currentDate.setDate(this.currentDate.getDate() - 7);
+        }
+        else {
+            this.currentDate.setDate(this.currentDate.getDate() - 1);
+        }
         this.formattedDate = this.currentDate.toLocaleDateString();
         this.formatDateAndWeekDay();
         this.selectedDate = this.currentDate.toISOString();
         this.prevBtnClick.emit(this.currentDate);
     }
     selectNextDate() {
-        this.currentDate.setDate(this.currentDate.getDate() + 1);
+        if (this.selectDateBy === 'week') {
+            this.currentDate.setDate(this.currentDate.getDate() + 7);
+        }
+        else {
+            this.currentDate.setDate(this.currentDate.getDate() + 1);
+        }
         this.formattedDate = this.currentDate.toLocaleDateString();
         this.formatDateAndWeekDay();
         this.selectedDate = this.currentDate.toISOString();
@@ -3722,8 +3739,8 @@ class EuimToolbarDatepickerComponent {
     formatDateAndWeekDay() {
         this.weekDayName = this.weekdays[this.currentDate.getDay()];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuimToolbarDatepickerComponent, deps: [{ token: BaseStatesDirective }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: EuimToolbarDatepickerComponent, selector: "euim-toolbar-datepicker", inputs: { icon: "icon", title: "title", subTitle: "subTitle", euimPrevBtnDisabled: ["euimPrevBtnDisabled", "euimPrevBtnDisabled", booleanAttribute], euimNextBtnDisabled: ["euimNextBtnDisabled", "euimNextBtnDisabled", booleanAttribute], euimReadOnly: ["euimReadOnly", "euimReadOnly", booleanAttribute] }, outputs: { prevBtnClick: "prevBtnClick", nextBtnClick: "nextBtnClick", dateChanged: "dateChanged" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ion-item class=\"euim-toolbar-datepicker__item\"\n           color=\"primary\">\n    <euim-avatar-icon  fill=\"clear\" slot=\"start\" >\n        <ion-icon [name]=\"icon\"\n                  class=\"euim-toolbar-datepicker__calendar\"></ion-icon>\n    </euim-avatar-icon>\n    @if (!euimReadOnly){\n    <ion-datetime-button class=\"euim-toolbar-datepicker__datetime-button--hidden\"\n                         [datetime]=\"dateTimeId\">\n    </ion-datetime-button>\n    }\n    <div class=\"euim-toolbar-datepicker__datetime-button\" [id]=\"modalId\" [style.cursor]=\"(!euimReadOnly) ? 'pointer' : 'auto'\">\n        <ion-label class=\"euim-toolbar-datepicker__date\"\n                   position=\"fixed\">\n            <div class=\"euim-toolbar-datepicker__title\"\n                 euimLabel\n                 euimLabelTitle\n                 disabled=\"euimReadOnly\">{{!title ? weekDayName : title}}</div>\n\n            <div euimLabel euimLabelSubTitle\n                 disabled=\"euimReadOnly\">{{!subTitle ? formattedDate : subTitle}}</div>\n        </ion-label>\n        @if (!euimReadOnly){\n            <ion-icon class=\"euim-toolbar-datepicker__datetime-caret\"\n                      name=\"caret-down-sharp\"\n                      color=\"light\"></ion-icon>\n        }\n    </div>\n\n    @if (!euimReadOnly) {\n        <ion-buttons slot=\"end\">\n            <ion-button (click)=\"selectPrevDate()\"\n                        [disabled] = \"euimPrevBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button\">\n                <ion-icon name=\"chevron-back-circle-sharp\"\n                          color=\"light\">\n                </ion-icon>\n            </ion-button>\n            <ion-button\n                        (click)=\"selectNextDate()\"\n                        [disabled]=\"euimNextBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button euim-toolbar-datepicker__nav-button--next\">\n                <ion-icon name=\"chevron-forward-circle-sharp\"\n                          color=\"light\"></ion-icon>\n            </ion-button>\n        </ion-buttons>\n    }\n</ion-item>\n\n@if (!euimReadOnly){\n<ion-modal [keepContentsMounted]=\"true\"\n           [trigger]=\"modalId\">\n    <ng-template>\n        <ion-datetime\n            [showDefaultButtons]=\"true\"\n            (ionChange)=\"calendarDateChanged($event)\"\n            size=\"cover\"\n            [id]=\"dateTimeId\"\n            [locale]=\"currentLang\"\n            [(ngModel)]=\"selectedDate\"\n            presentation=\"date\"></ion-datetime>\n    </ng-template>\n</ion-modal>\n}\n", styles: [".euim-toolbar-datepicker{--inner-padding-end: var(--eui-base-spacing-xs)}.euim-toolbar-datepicker ion-item:has(ion-buttons ion-button ion-icon){--inner-padding-end: var(--eui-base-spacing-2xs)}.euim-toolbar-datepicker__datetime_icon{margin-left:var(--eui-base-spacing-l);margin-right:var(--eui-base-spacing-l);width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-toolbar-datepicker__datetime-button{display:flex;align-items:center;height:100%;padding-top:var(--eui-base-spacing-s);padding-bottom:var(--eui-base-spacing-s)}.euim-toolbar-datepicker__datetime-button--hidden{display:none}.euim-toolbar-datepicker__datetime-caret{margin-left:var(--eui-base-spacing-xs)!important;margin-right:var(--eui-base-spacing-xs)!important;width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m)}.euim-toolbar-datepicker__nav-button{width:calc(var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs))!important;height:calc(var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs))!important}.euim-toolbar-datepicker__nav-button ion-icon{width:var(--eui-base-spacing-xl);height:var(--eui-base-spacing-xl)}.euim-toolbar-datepicker__date{display:inline-table!important;flex:0 0 0!important;min-width:0!important}.euim-toolbar-datepicker__title{width:fit-content}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__calendar,.euim-toolbar-datepicker--primary .euim-label{color:#fff}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__datetime-button::part(native){background:var(--eui-base-color-primary);color:#fff}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: i1.IonDatetimeButton, selector: "ion-datetime-button", inputs: ["color", "datetime", "disabled", "mode"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal", inputs: ["animated", "keepContentsMounted", "backdropBreakpoint", "backdropDismiss", "breakpoints", "canDismiss", "cssClass", "enterAnimation", "event", "handle", "handleBehavior", "initialBreakpoint", "isOpen", "keyboardClose", "leaveAnimation", "mode", "presentingElement", "showBackdrop", "swipeToClose", "translucent", "trigger"] }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "component", type: EuimAvatarIconComponent, selector: "euim-avatar-icon", inputs: ["color", "size", "fill", "variant", "borderColor"] }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuimToolbarDatepickerComponent, deps: [{ token: BaseStatesDirective }, { token: i1$1.TranslateService }, { token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: EuimToolbarDatepickerComponent, selector: "euim-toolbar-datepicker", inputs: { icon: "icon", title: "title", subTitle: "subTitle", euimPrevBtnDisabled: ["euimPrevBtnDisabled", "euimPrevBtnDisabled", booleanAttribute], euimNextBtnDisabled: ["euimNextBtnDisabled", "euimNextBtnDisabled", booleanAttribute], euimReadOnly: ["euimReadOnly", "euimReadOnly", booleanAttribute], selectDateBy: "selectDateBy" }, outputs: { prevBtnClick: "prevBtnClick", nextBtnClick: "nextBtnClick", dateChanged: "dateChanged" }, host: { listeners: { "window:popstate": "dismissModal($event)" }, properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ion-item class=\"euim-toolbar-datepicker__item\"\n           color=\"primary\">\n    <euim-avatar-icon  fill=\"clear\" slot=\"start\" >\n        <ion-icon [name]=\"icon\"\n                  class=\"euim-toolbar-datepicker__calendar\"></ion-icon>\n    </euim-avatar-icon>\n    @if (!euimReadOnly){\n    <ion-datetime-button class=\"euim-toolbar-datepicker__datetime-button--hidden\"\n                         [datetime]=\"dateTimeId\">\n    </ion-datetime-button>\n    }\n    <div class=\"euim-toolbar-datepicker__datetime-button\" [id]=\"modalId\" [style.cursor]=\"(!euimReadOnly) ? 'pointer' : 'auto'\">\n        <ion-label class=\"euim-toolbar-datepicker__date\"\n                   position=\"fixed\">\n            <div class=\"euim-toolbar-datepicker__title\"\n                 euimLabel\n                 euimLabelTitle\n                 disabled=\"euimReadOnly\">{{!title ? weekDayName : title}}</div>\n\n            <div euimLabel euimLabelSubTitle\n                 disabled=\"euimReadOnly\">{{!subTitle ? formattedDate : subTitle}}</div>\n        </ion-label>\n        @if (!euimReadOnly){\n            <ion-icon class=\"euim-toolbar-datepicker__datetime-caret\"\n                      name=\"caret-down-sharp\"\n                      color=\"light\"></ion-icon>\n        }\n    </div>\n\n    @if (!euimReadOnly) {\n        <ion-buttons slot=\"end\">\n            <ion-button (click)=\"selectPrevDate()\"\n                        [disabled] = \"euimPrevBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button\">\n                <ion-icon name=\"chevron-back-circle-sharp\"\n                          color=\"light\">\n                </ion-icon>\n            </ion-button>\n            <ion-button\n                        (click)=\"selectNextDate()\"\n                        [disabled]=\"euimNextBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button euim-toolbar-datepicker__nav-button--next\">\n                <ion-icon name=\"chevron-forward-circle-sharp\"\n                          color=\"light\"></ion-icon>\n            </ion-button>\n        </ion-buttons>\n    }\n</ion-item>\n\n@if (!euimReadOnly){\n<ion-modal [keepContentsMounted]=\"true\"\n           [trigger]=\"modalId\">\n    <ng-template>\n        <ion-datetime\n            [showDefaultButtons]=\"true\"\n            (ionChange)=\"calendarDateChanged($event)\"\n            size=\"cover\"\n            [id]=\"dateTimeId\"\n            [locale]=\"currentLang\"\n            [(ngModel)]=\"selectedDate\"\n            presentation=\"date\"></ion-datetime>\n    </ng-template>\n</ion-modal>\n}\n", styles: [".euim-toolbar-datepicker{--inner-padding-end: var(--eui-base-spacing-xs)}.euim-toolbar-datepicker ion-item:has(ion-buttons ion-button ion-icon){--inner-padding-end: var(--eui-base-spacing-2xs)}.euim-toolbar-datepicker__datetime_icon{margin-left:var(--eui-base-spacing-l);margin-right:var(--eui-base-spacing-l);width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-toolbar-datepicker__datetime-button{display:flex;align-items:center;height:100%;padding-top:var(--eui-base-spacing-s);padding-bottom:var(--eui-base-spacing-s)}.euim-toolbar-datepicker__datetime-button--hidden{display:none}.euim-toolbar-datepicker__datetime-caret{margin-left:var(--eui-base-spacing-xs)!important;margin-right:var(--eui-base-spacing-xs)!important;width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m)}.euim-toolbar-datepicker__nav-button{width:calc(var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs))!important;height:calc(var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs))!important}.euim-toolbar-datepicker__nav-button ion-icon{width:var(--eui-base-spacing-xl);height:var(--eui-base-spacing-xl)}.euim-toolbar-datepicker__date{display:inline-table!important;flex:0 0 0!important;min-width:0!important}.euim-toolbar-datepicker__title{width:fit-content}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__calendar,.euim-toolbar-datepicker--primary .euim-label{color:#fff}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__datetime-button::part(native){background:var(--eui-base-color-primary);color:#fff}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: i1.IonDatetimeButton, selector: "ion-datetime-button", inputs: ["color", "datetime", "disabled", "mode"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal", inputs: ["animated", "keepContentsMounted", "backdropBreakpoint", "backdropDismiss", "breakpoints", "canDismiss", "cssClass", "enterAnimation", "event", "handle", "handleBehavior", "initialBreakpoint", "isOpen", "keyboardClose", "leaveAnimation", "mode", "presentingElement", "showBackdrop", "swipeToClose", "translucent", "trigger"] }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "component", type: EuimAvatarIconComponent, selector: "euim-avatar-icon", inputs: ["color", "size", "fill", "variant", "borderColor"] }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuimToolbarDatepickerComponent, decorators: [{
             type: Component,
@@ -3735,7 +3752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
                             ],
                         },
                     ], template: "<ion-item class=\"euim-toolbar-datepicker__item\"\n           color=\"primary\">\n    <euim-avatar-icon  fill=\"clear\" slot=\"start\" >\n        <ion-icon [name]=\"icon\"\n                  class=\"euim-toolbar-datepicker__calendar\"></ion-icon>\n    </euim-avatar-icon>\n    @if (!euimReadOnly){\n    <ion-datetime-button class=\"euim-toolbar-datepicker__datetime-button--hidden\"\n                         [datetime]=\"dateTimeId\">\n    </ion-datetime-button>\n    }\n    <div class=\"euim-toolbar-datepicker__datetime-button\" [id]=\"modalId\" [style.cursor]=\"(!euimReadOnly) ? 'pointer' : 'auto'\">\n        <ion-label class=\"euim-toolbar-datepicker__date\"\n                   position=\"fixed\">\n            <div class=\"euim-toolbar-datepicker__title\"\n                 euimLabel\n                 euimLabelTitle\n                 disabled=\"euimReadOnly\">{{!title ? weekDayName : title}}</div>\n\n            <div euimLabel euimLabelSubTitle\n                 disabled=\"euimReadOnly\">{{!subTitle ? formattedDate : subTitle}}</div>\n        </ion-label>\n        @if (!euimReadOnly){\n            <ion-icon class=\"euim-toolbar-datepicker__datetime-caret\"\n                      name=\"caret-down-sharp\"\n                      color=\"light\"></ion-icon>\n        }\n    </div>\n\n    @if (!euimReadOnly) {\n        <ion-buttons slot=\"end\">\n            <ion-button (click)=\"selectPrevDate()\"\n                        [disabled] = \"euimPrevBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button\">\n                <ion-icon name=\"chevron-back-circle-sharp\"\n                          color=\"light\">\n                </ion-icon>\n            </ion-button>\n            <ion-button\n                        (click)=\"selectNextDate()\"\n                        [disabled]=\"euimNextBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button euim-toolbar-datepicker__nav-button--next\">\n                <ion-icon name=\"chevron-forward-circle-sharp\"\n                          color=\"light\"></ion-icon>\n            </ion-button>\n        </ion-buttons>\n    }\n</ion-item>\n\n@if (!euimReadOnly){\n<ion-modal [keepContentsMounted]=\"true\"\n           [trigger]=\"modalId\">\n    <ng-template>\n        <ion-datetime\n            [showDefaultButtons]=\"true\"\n            (ionChange)=\"calendarDateChanged($event)\"\n            size=\"cover\"\n            [id]=\"dateTimeId\"\n            [locale]=\"currentLang\"\n            [(ngModel)]=\"selectedDate\"\n            presentation=\"date\"></ion-datetime>\n    </ng-template>\n</ion-modal>\n}\n", styles: [".euim-toolbar-datepicker{--inner-padding-end: var(--eui-base-spacing-xs)}.euim-toolbar-datepicker ion-item:has(ion-buttons ion-button ion-icon){--inner-padding-end: var(--eui-base-spacing-2xs)}.euim-toolbar-datepicker__datetime_icon{margin-left:var(--eui-base-spacing-l);margin-right:var(--eui-base-spacing-l);width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-toolbar-datepicker__datetime-button{display:flex;align-items:center;height:100%;padding-top:var(--eui-base-spacing-s);padding-bottom:var(--eui-base-spacing-s)}.euim-toolbar-datepicker__datetime-button--hidden{display:none}.euim-toolbar-datepicker__datetime-caret{margin-left:var(--eui-base-spacing-xs)!important;margin-right:var(--eui-base-spacing-xs)!important;width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m)}.euim-toolbar-datepicker__nav-button{width:calc(var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs))!important;height:calc(var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs))!important}.euim-toolbar-datepicker__nav-button ion-icon{width:var(--eui-base-spacing-xl);height:var(--eui-base-spacing-xl)}.euim-toolbar-datepicker__date{display:inline-table!important;flex:0 0 0!important;min-width:0!important}.euim-toolbar-datepicker__title{width:fit-content}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__calendar,.euim-toolbar-datepicker--primary .euim-label{color:#fff}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__datetime-button::part(native){background:var(--eui-base-color-primary);color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: BaseStatesDirective }, { type: i1$1.TranslateService }], propDecorators: { icon: [{
+        }], ctorParameters: () => [{ type: BaseStatesDirective }, { type: i1$1.TranslateService }, { type: i1.ModalController }], propDecorators: { icon: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -3750,6 +3767,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
             }], euimReadOnly: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], selectDateBy: [{
+                type: Input
             }], prevBtnClick: [{
                 type: Output
             }], nextBtnClick: [{
@@ -3759,6 +3778,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
+            }], dismissModal: [{
+                type: HostListener,
+                args: ['window:popstate', ['$event']]
             }] } });
 
 class EuimToolbarDatepickerDatetimeDirective {
@@ -3870,6 +3892,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
                 }]
         }] });
 
+class EuimReadOnlyFormLabelDirective {
+    constructor() {
+        this.className = 'euim-read-only-form__label';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuimReadOnlyFormLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.7", type: EuimReadOnlyFormLabelDirective, isStandalone: true, selector: "[euimReadOnlyFormLabel]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuimReadOnlyFormLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimReadOnlyFormLabel]',
+                    standalone: true,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuimReadOnlyFormValueDirective {
+    constructor() {
+        this.className = 'euim-read-only-form__value';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuimReadOnlyFormValueDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.7", type: EuimReadOnlyFormValueDirective, isStandalone: true, selector: "[euimReadOnlyFormValue]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuimReadOnlyFormValueDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimReadOnlyFormValue]',
+                    standalone: true,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuimReadOnlyFormDirective {
+    constructor() {
+        this.className = 'euim-read-only-form';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuimReadOnlyFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.7", type: EuimReadOnlyFormDirective, isStandalone: true, selector: "[euimReadOnlyForm]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuimReadOnlyFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimReadOnlyForm]',
+                    standalone: true,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class EuimDividerDirective {
     get cssClasses() {
         return this.getCssClasses('euim-divider');
@@ -4159,6 +4235,9 @@ const MODULES = [
     EuimToolbarTransparentDirective,
     EuimSidebarFooterNoBordersDirective,
     EuimListItemNoPaddingsDirective,
+    EuimReadOnlyFormDirective,
+    EuimReadOnlyFormValueDirective,
+    EuimReadOnlyFormLabelDirective,
     EuimSkeletonTextAvatarModule,
 ];
 class EuimAllModule {
@@ -4203,6 +4282,9 @@ class EuimAllModule {
             EuimToolbarTransparentDirective,
             EuimSidebarFooterNoBordersDirective,
             EuimListItemNoPaddingsDirective,
+            EuimReadOnlyFormDirective,
+            EuimReadOnlyFormValueDirective,
+            EuimReadOnlyFormLabelDirective,
             EuimSkeletonTextAvatarModule], exports: [
             // Layout
             EuimAppModule,
@@ -4243,6 +4325,9 @@ class EuimAllModule {
             EuimToolbarTransparentDirective,
             EuimSidebarFooterNoBordersDirective,
             EuimListItemNoPaddingsDirective,
+            EuimReadOnlyFormDirective,
+            EuimReadOnlyFormValueDirective,
+            EuimReadOnlyFormLabelDirective,
             EuimSkeletonTextAvatarModule] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuimAllModule, imports: [
             // Layout
@@ -4332,5 +4417,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseStatesDirective, EuiMUserProfileActionComponent, EuiMUserProfileAvatarComponent, EuiMUserProfileInfosComponent, EuiMUserProfileInfosItemComponent, EuimAboutComponent, EuimAboutContentLoadingComponent, EuimAboutModule, EuimAlertMessageComponent, EuimAlertMessageModule, EuimAlignCenterDirective, EuimAlignTopDirective, EuimAllModule, EuimAppComponent, EuimAppModule, EuimAppService, EuimAvatarComponent, EuimAvatarIconComponent, EuimAvatarIconModule, EuimAvatarMainIconDirective, EuimAvatarModule, EuimAvatarSubIconDirective, EuimBadgeComponent, EuimBadgeModule, EuimCardComponent, EuimCardImageDirective, EuimCardListComponent, EuimCardListModule, EuimCardModule, EuimChangelogComponent, EuimChipSelectorComponent, EuimChipSelectorComponentModule, EuimChipSelectorItemDirective, EuimDataSummaryColComponent, EuimDataSummaryColLabelDirective, EuimDataSummaryColValueDirective, EuimDataSummaryComponent, EuimDataSummaryModule, EuimDividerDirective, EuimDividerModule, EuimEmptyListPlaceholderComponent, EuimEmptyListPlaceholderModule, EuimHeaderDetailsComponent, EuimHeaderDetailsIconDirective, EuimHeaderDetailsMetaDirective, EuimHeaderDetailsModule, EuimHeaderDetailsTitleDirective, EuimHelpSupportComponent, EuimLabelComponent, EuimLabelModule, EuimLanguageListComponent, EuimLanguageSelectorComponent, EuimLanguageSelectorModule, EuimListHeaderDirective, EuimListHeaderModule, EuimListItemNoPaddingsDirective, EuimMediaHeaderComponent, EuimMediaHeaderImageDirective, EuimMediaHeaderModule, EuimMediaHeaderSubTitleDirective, EuimMediaHeaderTitleDirective, EuimMessageComponent, EuimMessageModule, EuimMessageTitleComponent, EuimMinWidthDirective, EuimMultiselectAllDirective, EuimMultiselectComponent, EuimMultiselectFilterComponent, EuimMultiselectInfoComponent, EuimMultiselectListComponent, EuimMultiselectModule, EuimMultiselectSelectFieldDirective, EuimMultiselectToolbarComponent, EuimNotificationItemComponent, EuimNotificationItemModule, EuimOpenSourceLicencesComponent, EuimPdfViewerComponent, EuimPdfViewerModule, EuimScrollerXComponent, EuimScrollerXComponentModule, EuimSidebarComponent, EuimSidebarContentComponent, EuimSidebarFooterNoBordersDirective, EuimSidebarModule, EuimSkeletonListComponent, EuimSkeletonListItemComponent, EuimSkeletonListItemModule, EuimSkeletonListModule, EuimSkeletonTextAvatarDirective, EuimSkeletonTextAvatarModule, EuimSlideInfoScreenComponent, EuimSliderInfoScreenComponent, EuimSliderInfoScreenContentDirective, EuimSliderInfoScreenModule, EuimSliderInfoScreenSubTitleDirective, EuimSliderInfoScreenTitleDirective, EuimSpinnerComponent, EuimSpinnerComponentModule, EuimSpinnerDescriptionComponent, EuimSpinnerMessageComponent, EuimToolbarActionItemsComponent, EuimToolbarComponent, EuimToolbarComponentModule, EuimToolbarDatepickerComponent, EuimToolbarDatepickerDatetimeDirective, EuimToolbarDatepickerModule, EuimToolbarTitleComponent, EuimToolbarTransparentDirective, EuimUserProfileComponent, EuimUserProfileModule };
+export { BaseStatesDirective, EuiMUserProfileActionComponent, EuiMUserProfileAvatarComponent, EuiMUserProfileInfosComponent, EuiMUserProfileInfosItemComponent, EuimAboutComponent, EuimAboutContentLoadingComponent, EuimAboutModule, EuimAlertMessageComponent, EuimAlertMessageModule, EuimAlignCenterDirective, EuimAlignTopDirective, EuimAllModule, EuimAppComponent, EuimAppModule, EuimAppService, EuimAvatarComponent, EuimAvatarIconComponent, EuimAvatarIconModule, EuimAvatarMainIconDirective, EuimAvatarModule, EuimAvatarSubIconDirective, EuimBadgeComponent, EuimBadgeModule, EuimCardComponent, EuimCardImageDirective, EuimCardListComponent, EuimCardListModule, EuimCardModule, EuimChangelogComponent, EuimChipSelectorComponent, EuimChipSelectorComponentModule, EuimChipSelectorItemDirective, EuimDataSummaryColComponent, EuimDataSummaryColLabelDirective, EuimDataSummaryColValueDirective, EuimDataSummaryComponent, EuimDataSummaryModule, EuimDividerDirective, EuimDividerModule, EuimEmptyListPlaceholderComponent, EuimEmptyListPlaceholderModule, EuimHeaderDetailsComponent, EuimHeaderDetailsIconDirective, EuimHeaderDetailsMetaDirective, EuimHeaderDetailsModule, EuimHeaderDetailsTitleDirective, EuimHelpSupportComponent, EuimLabelComponent, EuimLabelModule, EuimLanguageListComponent, EuimLanguageSelectorComponent, EuimLanguageSelectorModule, EuimListHeaderDirective, EuimListHeaderModule, EuimListItemNoPaddingsDirective, EuimMediaHeaderComponent, EuimMediaHeaderImageDirective, EuimMediaHeaderModule, EuimMediaHeaderSubTitleDirective, EuimMediaHeaderTitleDirective, EuimMessageComponent, EuimMessageModule, EuimMessageTitleComponent, EuimMinWidthDirective, EuimMultiselectAllDirective, EuimMultiselectComponent, EuimMultiselectFilterComponent, EuimMultiselectInfoComponent, EuimMultiselectListComponent, EuimMultiselectModule, EuimMultiselectSelectFieldDirective, EuimMultiselectToolbarComponent, EuimNotificationItemComponent, EuimNotificationItemModule, EuimOpenSourceLicencesComponent, EuimPdfViewerComponent, EuimPdfViewerModule, EuimReadOnlyFormDirective, EuimReadOnlyFormLabelDirective, EuimReadOnlyFormValueDirective, EuimScrollerXComponent, EuimScrollerXComponentModule, EuimSidebarComponent, EuimSidebarContentComponent, EuimSidebarFooterNoBordersDirective, EuimSidebarModule, EuimSkeletonListComponent, EuimSkeletonListItemComponent, EuimSkeletonListItemModule, EuimSkeletonListModule, EuimSkeletonTextAvatarDirective, EuimSkeletonTextAvatarModule, EuimSlideInfoScreenComponent, EuimSliderInfoScreenComponent, EuimSliderInfoScreenContentDirective, EuimSliderInfoScreenModule, EuimSliderInfoScreenSubTitleDirective, EuimSliderInfoScreenTitleDirective, EuimSpinnerComponent, EuimSpinnerComponentModule, EuimSpinnerDescriptionComponent, EuimSpinnerMessageComponent, EuimToolbarActionItemsComponent, EuimToolbarComponent, EuimToolbarComponentModule, EuimToolbarDatepickerComponent, EuimToolbarDatepickerDatetimeDirective, EuimToolbarDatepickerModule, EuimToolbarTitleComponent, EuimToolbarTransparentDirective, EuimUserProfileComponent, EuimUserProfileModule };
 //# sourceMappingURL=eui-mobile-core.mjs.map