@raintonic/formaui 0.3.1 → 0.4.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/fesm2022/raintonic-formaui-cdk-overlay.mjs +8 -1
- package/fesm2022/raintonic-formaui-cdk-overlay.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-date-picker.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-date-picker.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-menu.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-menu.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-paginator.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-paginator.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-popover.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-popover.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-select.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-select.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-time-picker.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-time-picker.mjs.map +1 -1
- package/fesm2022/raintonic-formaui.mjs +1 -1
- package/fesm2022/raintonic-formaui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/raintonic-formaui-cdk-overlay.d.ts.map +1 -1
- package/types/raintonic-formaui.d.ts +1 -1
|
@@ -1324,7 +1324,7 @@ class FuiDatePickerComponent {
|
|
|
1324
1324
|
provide: FUI_FORM_FIELD_CONTROL,
|
|
1325
1325
|
useExisting: FuiDatePickerComponent,
|
|
1326
1326
|
},
|
|
1327
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "calendarPanel", first: true, predicate: ["calendarPanel"], descendants: true }, { propertyName: "startInputEl", first: true, predicate: ["startInput"], descendants: true }, { propertyName: "endInputEl", first: true, predicate: ["endInput"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!-- Trigger area -->\r\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\r\n <!-- Start input -->\r\n <input\r\n #startInput\r\n class=\"fui-date-picker__input\"\r\n [id]=\"id\"\r\n [value]=\"startInputText()\"\r\n [placeholder]=\"getStartPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-describedby]=\"_ariaDescribedby\"\r\n [attr.aria-required]=\"required()\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n aria-haspopup=\"dialog\"\r\n aria-autocomplete=\"none\"\r\n role=\"combobox\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n\r\n <!-- Range separator + end input -->\r\n @if (range()) {\r\n <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n <input\r\n #endInput\r\n class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n [value]=\"endInputText()\"\r\n [placeholder]=\"getEndPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-label]=\"intl.endDateAriaLabel\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onEndInput($event)\"\r\n (blur)=\"onEndBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onEndKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n\r\n <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\r\n @if (!_readOnly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-date-picker__toggle\"\r\n tabindex=\"-1\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n [disabled]=\"disabled()\"\r\n aria-haspopup=\"dialog\"\r\n [attr.aria-label]=\"intl.openCalendarAriaLabel\"\r\n (click)=\"onToggleClick($event)\"\r\n >\r\n <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\r\n\r\n<!-- Calendar panel -->\r\n@if (panelOpen()) {\r\n <div\r\n #calendarPanel\r\n class=\"fui-date-picker__panel\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-label]=\"intl.calendarDialogAriaLabel\"\r\n >\r\n <fui-calendar\r\n #calendar\r\n [selected]=\"selectedDate()\"\r\n [rangeStart]=\"rangeStartDate()\"\r\n [rangeEnd]=\"rangeEndDate()\"\r\n [range]=\"range()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [dateFilter]=\"dateFilter()\"\r\n [startAt]=\"startAt()\"\r\n [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n [hoveredDate]=\"hoveredDate()\"\r\n (dateSelected)=\"onDateSelected($event)\"\r\n (dateHovered)=\"onDateHovered($event)\"\r\n />\r\n </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-date-picker{--fui-date-picker-font-size: var(--fui-font-size-02);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker__panel{--fui-date-picker-panel-border-radius: var(--fui-border-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-04);--fui-date-picker-panel-bg: var(--fui-surface-00);--fui-date-picker-panel-border-color: var(--fui-border-color);background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-02);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-date-picker-backdrop{background:transparent}
|
|
1327
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "calendarPanel", first: true, predicate: ["calendarPanel"], descendants: true }, { propertyName: "startInputEl", first: true, predicate: ["startInput"], descendants: true }, { propertyName: "endInputEl", first: true, predicate: ["endInput"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!-- Trigger area -->\r\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\r\n <!-- Start input -->\r\n <input\r\n #startInput\r\n class=\"fui-date-picker__input\"\r\n [id]=\"id\"\r\n [value]=\"startInputText()\"\r\n [placeholder]=\"getStartPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-describedby]=\"_ariaDescribedby\"\r\n [attr.aria-required]=\"required()\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n aria-haspopup=\"dialog\"\r\n aria-autocomplete=\"none\"\r\n role=\"combobox\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n\r\n <!-- Range separator + end input -->\r\n @if (range()) {\r\n <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n <input\r\n #endInput\r\n class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n [value]=\"endInputText()\"\r\n [placeholder]=\"getEndPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-label]=\"intl.endDateAriaLabel\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onEndInput($event)\"\r\n (blur)=\"onEndBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onEndKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n\r\n <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\r\n @if (!_readOnly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-date-picker__toggle\"\r\n tabindex=\"-1\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n [disabled]=\"disabled()\"\r\n aria-haspopup=\"dialog\"\r\n [attr.aria-label]=\"intl.openCalendarAriaLabel\"\r\n (click)=\"onToggleClick($event)\"\r\n >\r\n <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\r\n\r\n<!-- Calendar panel -->\r\n@if (panelOpen()) {\r\n <div\r\n #calendarPanel\r\n class=\"fui-date-picker__panel\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-label]=\"intl.calendarDialogAriaLabel\"\r\n >\r\n <fui-calendar\r\n #calendar\r\n [selected]=\"selectedDate()\"\r\n [rangeStart]=\"rangeStartDate()\"\r\n [rangeEnd]=\"rangeEndDate()\"\r\n [range]=\"range()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [dateFilter]=\"dateFilter()\"\r\n [startAt]=\"startAt()\"\r\n [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n [hoveredDate]=\"hoveredDate()\"\r\n (dateSelected)=\"onDateSelected($event)\"\r\n (dateHovered)=\"onDateHovered($event)\"\r\n />\r\n </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-date-picker{--fui-date-picker-font-size: var(--fui-font-size-02);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker__panel{--fui-date-picker-panel-border-radius: var(--fui-border-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-04);--fui-date-picker-panel-bg: var(--fui-surface-00);--fui-date-picker-panel-border-color: var(--fui-border-color);background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-02);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-date-picker-backdrop{background:transparent}@media(prefers-contrast:high){.fui-date-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-date-picker__panel{animation:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiCalendarComponent, selector: "fui-calendar", inputs: ["selected", "rangeStart", "rangeEnd", "range", "min", "max", "dateFilter", "startAt", "firstDayOfWeek", "hoveredDate"], outputs: ["dateSelected", "dateHovered", "monthChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1328
1328
|
}
|
|
1329
1329
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDatePickerComponent, decorators: [{
|
|
1330
1330
|
type: Component,
|
|
@@ -1352,7 +1352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
1352
1352
|
provide: FUI_FORM_FIELD_CONTROL,
|
|
1353
1353
|
useExisting: FuiDatePickerComponent,
|
|
1354
1354
|
},
|
|
1355
|
-
], template: "<!-- Trigger area -->\r\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\r\n <!-- Start input -->\r\n <input\r\n #startInput\r\n class=\"fui-date-picker__input\"\r\n [id]=\"id\"\r\n [value]=\"startInputText()\"\r\n [placeholder]=\"getStartPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-describedby]=\"_ariaDescribedby\"\r\n [attr.aria-required]=\"required()\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n aria-haspopup=\"dialog\"\r\n aria-autocomplete=\"none\"\r\n role=\"combobox\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n\r\n <!-- Range separator + end input -->\r\n @if (range()) {\r\n <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n <input\r\n #endInput\r\n class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n [value]=\"endInputText()\"\r\n [placeholder]=\"getEndPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-label]=\"intl.endDateAriaLabel\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onEndInput($event)\"\r\n (blur)=\"onEndBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onEndKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n\r\n <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\r\n @if (!_readOnly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-date-picker__toggle\"\r\n tabindex=\"-1\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n [disabled]=\"disabled()\"\r\n aria-haspopup=\"dialog\"\r\n [attr.aria-label]=\"intl.openCalendarAriaLabel\"\r\n (click)=\"onToggleClick($event)\"\r\n >\r\n <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\r\n\r\n<!-- Calendar panel -->\r\n@if (panelOpen()) {\r\n <div\r\n #calendarPanel\r\n class=\"fui-date-picker__panel\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-label]=\"intl.calendarDialogAriaLabel\"\r\n >\r\n <fui-calendar\r\n #calendar\r\n [selected]=\"selectedDate()\"\r\n [rangeStart]=\"rangeStartDate()\"\r\n [rangeEnd]=\"rangeEndDate()\"\r\n [range]=\"range()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [dateFilter]=\"dateFilter()\"\r\n [startAt]=\"startAt()\"\r\n [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n [hoveredDate]=\"hoveredDate()\"\r\n (dateSelected)=\"onDateSelected($event)\"\r\n (dateHovered)=\"onDateHovered($event)\"\r\n />\r\n </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-date-picker{--fui-date-picker-font-size: var(--fui-font-size-02);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker__panel{--fui-date-picker-panel-border-radius: var(--fui-border-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-04);--fui-date-picker-panel-bg: var(--fui-surface-00);--fui-date-picker-panel-border-color: var(--fui-border-color);background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-02);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-date-picker-backdrop{background:transparent}
|
|
1355
|
+
], template: "<!-- Trigger area -->\r\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\r\n <!-- Start input -->\r\n <input\r\n #startInput\r\n class=\"fui-date-picker__input\"\r\n [id]=\"id\"\r\n [value]=\"startInputText()\"\r\n [placeholder]=\"getStartPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-describedby]=\"_ariaDescribedby\"\r\n [attr.aria-required]=\"required()\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n aria-haspopup=\"dialog\"\r\n aria-autocomplete=\"none\"\r\n role=\"combobox\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n\r\n <!-- Range separator + end input -->\r\n @if (range()) {\r\n <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n <input\r\n #endInput\r\n class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n [value]=\"endInputText()\"\r\n [placeholder]=\"getEndPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-label]=\"intl.endDateAriaLabel\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onEndInput($event)\"\r\n (blur)=\"onEndBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onEndKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n\r\n <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\r\n @if (!_readOnly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-date-picker__toggle\"\r\n tabindex=\"-1\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n [disabled]=\"disabled()\"\r\n aria-haspopup=\"dialog\"\r\n [attr.aria-label]=\"intl.openCalendarAriaLabel\"\r\n (click)=\"onToggleClick($event)\"\r\n >\r\n <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\r\n\r\n<!-- Calendar panel -->\r\n@if (panelOpen()) {\r\n <div\r\n #calendarPanel\r\n class=\"fui-date-picker__panel\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-label]=\"intl.calendarDialogAriaLabel\"\r\n >\r\n <fui-calendar\r\n #calendar\r\n [selected]=\"selectedDate()\"\r\n [rangeStart]=\"rangeStartDate()\"\r\n [rangeEnd]=\"rangeEndDate()\"\r\n [range]=\"range()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [dateFilter]=\"dateFilter()\"\r\n [startAt]=\"startAt()\"\r\n [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n [hoveredDate]=\"hoveredDate()\"\r\n (dateSelected)=\"onDateSelected($event)\"\r\n (dateHovered)=\"onDateHovered($event)\"\r\n />\r\n </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-date-picker{--fui-date-picker-font-size: var(--fui-font-size-02);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker__panel{--fui-date-picker-panel-border-radius: var(--fui-border-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-04);--fui-date-picker-panel-bg: var(--fui-surface-00);--fui-date-picker-panel-border-color: var(--fui-border-color);background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-02);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-date-picker-backdrop{background:transparent}@media(prefers-contrast:high){.fui-date-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-date-picker__panel{animation:none}}\n"] }]
|
|
1356
1356
|
}], ctorParameters: () => [], propDecorators: { placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], rangeSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeSeparator", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], triggerEl: [{
|
|
1357
1357
|
type: ViewChild,
|
|
1358
1358
|
args: ['triggerEl', { static: false }]
|