@ojiepermana/angular-component 22.0.43 → 22.0.45
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/ojiepermana-angular-component-accordion.mjs +21 -23
- package/fesm2022/ojiepermana-angular-component-alert-dialog.mjs +111 -50
- package/fesm2022/ojiepermana-angular-component-alert.mjs +13 -17
- package/fesm2022/ojiepermana-angular-component-aspect-ratio.mjs +4 -5
- package/fesm2022/ojiepermana-angular-component-avatar.mjs +20 -26
- package/fesm2022/ojiepermana-angular-component-badge.mjs +4 -5
- package/fesm2022/ojiepermana-angular-component-breadcrumb.mjs +32 -35
- package/fesm2022/ojiepermana-angular-component-button-group.mjs +10 -13
- package/fesm2022/ojiepermana-angular-component-button.mjs +4 -5
- package/fesm2022/ojiepermana-angular-component-calendar.mjs +10 -8
- package/fesm2022/ojiepermana-angular-component-card.mjs +22 -29
- package/fesm2022/ojiepermana-angular-component-carousel.mjs +31 -34
- package/fesm2022/ojiepermana-angular-component-checkbox.mjs +42 -13
- package/fesm2022/ojiepermana-angular-component-collapsible.mjs +19 -17
- package/fesm2022/ojiepermana-angular-component-combobox.mjs +30 -17
- package/fesm2022/ojiepermana-angular-component-command.mjs +29 -37
- package/fesm2022/ojiepermana-angular-component-composer.mjs +31 -34
- package/fesm2022/ojiepermana-angular-component-context-menu.mjs +3 -3
- package/fesm2022/ojiepermana-angular-component-date-picker.mjs +39 -14
- package/fesm2022/ojiepermana-angular-component-dialog.mjs +100 -45
- package/fesm2022/ojiepermana-angular-component-dropdown-menu.mjs +61 -56
- package/fesm2022/ojiepermana-angular-component-editor.mjs +52 -43
- package/fesm2022/ojiepermana-angular-component-empty.mjs +19 -25
- package/fesm2022/ojiepermana-angular-component-form.mjs +41 -49
- package/fesm2022/ojiepermana-angular-component-hover-card.mjs +10 -11
- package/fesm2022/ojiepermana-angular-component-icon.mjs +56 -11
- package/fesm2022/ojiepermana-angular-component-input-group.mjs +29 -27
- package/fesm2022/ojiepermana-angular-component-input-otp.mjs +29 -28
- package/fesm2022/ojiepermana-angular-component-input.mjs +4 -5
- package/fesm2022/ojiepermana-angular-component-item.mjs +31 -41
- package/fesm2022/ojiepermana-angular-component-kanban.mjs +47 -46
- package/fesm2022/ojiepermana-angular-component-kbd.mjs +7 -9
- package/fesm2022/ojiepermana-angular-component-label.mjs +4 -5
- package/fesm2022/ojiepermana-angular-component-menubar.mjs +16 -16
- package/fesm2022/ojiepermana-angular-component-native-select.mjs +11 -11
- package/fesm2022/ojiepermana-angular-component-navigation-menu.mjs +41 -28
- package/fesm2022/ojiepermana-angular-component-pagination.mjs +25 -16
- package/fesm2022/ojiepermana-angular-component-pillbox.mjs +78 -50
- package/fesm2022/ojiepermana-angular-component-popover.mjs +6 -6
- package/fesm2022/ojiepermana-angular-component-progress.mjs +10 -8
- package/fesm2022/ojiepermana-angular-component-radio.mjs +17 -13
- package/fesm2022/ojiepermana-angular-component-resizable.mjs +32 -21
- package/fesm2022/ojiepermana-angular-component-scroll-area.mjs +11 -9
- package/fesm2022/ojiepermana-angular-component-select.mjs +35 -23
- package/fesm2022/ojiepermana-angular-component-separator.mjs +4 -5
- package/fesm2022/ojiepermana-angular-component-sheet.mjs +101 -45
- package/fesm2022/ojiepermana-angular-component-skeleton.mjs +4 -5
- package/fesm2022/ojiepermana-angular-component-slider.mjs +30 -18
- package/fesm2022/ojiepermana-angular-component-spinner.mjs +9 -8
- package/fesm2022/ojiepermana-angular-component-switch.mjs +19 -10
- package/fesm2022/ojiepermana-angular-component-table.mjs +26 -34
- package/fesm2022/ojiepermana-angular-component-tabs.mjs +20 -24
- package/fesm2022/ojiepermana-angular-component-textarea.mjs +4 -5
- package/fesm2022/ojiepermana-angular-component-timeline.mjs +28 -28
- package/fesm2022/ojiepermana-angular-component-toast.mjs +3 -3
- package/fesm2022/ojiepermana-angular-component-toggle-group.mjs +18 -13
- package/fesm2022/ojiepermana-angular-component-toggle.mjs +4 -5
- package/fesm2022/ojiepermana-angular-component-tooltip.mjs +20 -19
- package/package.json +10 -1
- package/types/ojiepermana-angular-component-alert-dialog.d.ts +42 -3
- package/types/ojiepermana-angular-component-dialog.d.ts +33 -3
- package/types/ojiepermana-angular-component-icon.d.ts +48 -1
- package/types/ojiepermana-angular-component-sheet.d.ts +33 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { model, input, signal, computed, effect, inject, DestroyRef, untracked, forwardRef,
|
|
2
|
+
import { model, input, signal, computed, effect, inject, DestroyRef, untracked, forwardRef, Component } from '@angular/core';
|
|
3
3
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
4
4
|
import { provideNativeDateAdapter } from '@angular/material/core';
|
|
5
5
|
import { MatDatepicker, MatDatepickerInput } from '@angular/material/datepicker';
|
|
@@ -90,8 +90,8 @@ class DatePickerComponent {
|
|
|
90
90
|
setDisabledState(state) {
|
|
91
91
|
this.cvaDisabled.set(state);
|
|
92
92
|
}
|
|
93
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
94
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
93
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
94
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DatePickerComponent, isStandalone: true, selector: "DatePicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, touchUi: { classPropertyName: "touchUi", publicName: "touchUi", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { properties: { "class": "classes()" } }, providers: [
|
|
95
95
|
provideNativeDateAdapter(),
|
|
96
96
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
|
|
97
97
|
], ngImport: i0, template: `
|
|
@@ -108,15 +108,23 @@ class DatePickerComponent {
|
|
|
108
108
|
[min]="min()"
|
|
109
109
|
[max]="max()"
|
|
110
110
|
[formControl]="control"
|
|
111
|
-
(blur)="handleTouched()"
|
|
111
|
+
(blur)="handleTouched()"
|
|
112
|
+
/>
|
|
112
113
|
<button
|
|
113
114
|
matIconSuffix
|
|
114
115
|
type="button"
|
|
115
116
|
class="date-picker-toggle"
|
|
116
117
|
aria-label="Open calendar"
|
|
117
118
|
[disabled]="control.disabled"
|
|
118
|
-
(click)="picker.open()"
|
|
119
|
-
|
|
119
|
+
(click)="picker.open()"
|
|
120
|
+
>
|
|
121
|
+
<svg
|
|
122
|
+
aria-hidden="true"
|
|
123
|
+
viewBox="0 0 24 24"
|
|
124
|
+
fill="none"
|
|
125
|
+
stroke="currentColor"
|
|
126
|
+
stroke-width="2"
|
|
127
|
+
>
|
|
120
128
|
<path d="M8 2v4" />
|
|
121
129
|
<path d="M16 2v4" />
|
|
122
130
|
<rect width="18" height="18" x="3" y="4" rx="2" />
|
|
@@ -129,13 +137,21 @@ class DatePickerComponent {
|
|
|
129
137
|
[startAt]="startAt()"
|
|
130
138
|
[startView]="startView()"
|
|
131
139
|
[touchUi]="touchUi()"
|
|
132
|
-
(closed)="handleTouched()"
|
|
140
|
+
(closed)="handleTouched()"
|
|
141
|
+
></mat-datepicker>
|
|
133
142
|
</mat-form-field>
|
|
134
|
-
`, isInline: true, styles: [":host{display:inline-block}:host ::ng-deep .mat-mdc-form-field{--mat-form-field-container-height: 2.25rem;--mat-form-field-container-vertical-padding: 0;--mat-form-field-filled-with-label-container-padding-top: 0;--mat-form-field-filled-with-label-container-padding-bottom: 0;--mdc-outlined-text-field-container-shape: calc(var(--radius) - .125rem);--mdc-outlined-text-field-outline-color: hsl(var(--input));--mdc-outlined-text-field-hover-outline-color: hsl(var(--input));--mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));--mdc-outlined-text-field-input-text-color: hsl(var(--foreground));--mdc-outlined-text-field-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-hover-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-focus-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-disabled-outline-color: hsl(var(--input) / .5);--mdc-outlined-text-field-disabled-input-text-color: hsl(var(--muted-foreground));width:100%;font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-text-field-wrapper{height:2.25rem;padding:0 .25rem 0 .75rem;background:transparent}:host ::ng-deep .mat-mdc-form-field-flex{height:2.25rem;align-items:center}:host ::ng-deep .mat-mdc-form-field-infix{display:flex;min-height:2.25rem;height:2.25rem;align-items:center;padding:0;width:auto}:host ::ng-deep .mat-mdc-form-field-icon-suffix{align-self:center;padding-right:.25rem!important;padding-left:.25rem!important;color:hsl(var(--muted-foreground))}.date-picker-toggle{display:inline-flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;color:hsl(var(--muted-foreground));border-radius:calc(var(--radius) - .125rem);transition:color .15s ease,background-color .15s ease}.date-picker-toggle:hover{color:hsl(var(--foreground));background:hsl(var(--accent))}.date-picker-toggle:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.date-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.date-picker-toggle svg{width:1rem;height:1rem}:host ::ng-deep .mat-mdc-input-element{font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-input-element::placeholder{color:hsl(var(--muted-foreground))}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mdc-floating-label,:host ::ng-deep .mat-mdc-floating-label,:host ::ng-deep .mdc-notched-outline__notch .mdc-floating-label{display:none}:host ::ng-deep .mdc-notched-outline__notch{padding:0;border-left:none;border-right:none}:host ::ng-deep .mat-mdc-form-field.mat-focused .date-picker-toggle{color:hsl(var(--foreground))}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .date-picker-toggle{opacity:.5}::ng-deep mat-datepicker-content:has(.datepicker-panel){--mat-datepicker-calendar-container-background-color: hsl(var(--popover));--mat-datepicker-calendar-container-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-container-shape: var(--radius);--mat-datepicker-calendar-container-touch-shape: var(--radius);--mat-datepicker-calendar-container-elevation-shadow: var( --shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24) );--mat-datepicker-calendar-container-touch-elevation-shadow: var( --shadow-lg, 0 18px 36px -28px hsl(var(--foreground) / .34) );--mat-datepicker-calendar-text-font: var(--font-sans);--mat-datepicker-calendar-date-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-date-outline-color: transparent;--mat-datepicker-calendar-date-hover-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-focus-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-selected-state-background-color: hsl(var(--primary));--mat-datepicker-calendar-date-selected-state-text-color: hsl(var(--primary-foreground));--mat-datepicker-calendar-date-selected-disabled-state-background-color: hsl(var(--muted));--mat-datepicker-calendar-date-disabled-state-text-color: hsl(var(--muted-foreground) / .5);--mat-datepicker-calendar-date-today-outline-color: hsl(var(--primary));--mat-datepicker-calendar-date-today-selected-state-outline-color: hsl(var(--primary-foreground));--mat-datepicker-calendar-date-today-disabled-state-outline-color: hsl(var(--muted-foreground) / .5);--mat-datepicker-calendar-date-in-range-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-in-comparison-range-state-background-color: hsl(var(--accent) / .5);--mat-datepicker-calendar-date-preview-state-outline-color: hsl(var(--ring));--mat-datepicker-calendar-header-text-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-header-divider-color: transparent;--mat-datepicker-calendar-body-label-text-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-period-button-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-period-button-icon-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-navigation-button-icon-color: hsl(var(--muted-foreground));border:1px solid hsl(var(--border))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }]
|
|
143
|
+
`, isInline: true, styles: [":host{display:inline-block}:host ::ng-deep .mat-mdc-form-field{--mat-form-field-container-height: 2.25rem;--mat-form-field-container-vertical-padding: 0;--mat-form-field-filled-with-label-container-padding-top: 0;--mat-form-field-filled-with-label-container-padding-bottom: 0;--mdc-outlined-text-field-container-shape: calc(var(--radius) - .125rem);--mdc-outlined-text-field-outline-color: hsl(var(--input));--mdc-outlined-text-field-hover-outline-color: hsl(var(--input));--mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));--mdc-outlined-text-field-input-text-color: hsl(var(--foreground));--mdc-outlined-text-field-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-hover-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-focus-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-disabled-outline-color: hsl(var(--input) / .5);--mdc-outlined-text-field-disabled-input-text-color: hsl(var(--muted-foreground));width:100%;font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-text-field-wrapper{height:2.25rem;padding:0 .25rem 0 .75rem;background:transparent}:host ::ng-deep .mat-mdc-form-field-flex{height:2.25rem;align-items:center}:host ::ng-deep .mat-mdc-form-field-infix{display:flex;min-height:2.25rem;height:2.25rem;align-items:center;padding:0;width:auto}:host ::ng-deep .mat-mdc-form-field-icon-suffix{align-self:center;padding-right:.25rem!important;padding-left:.25rem!important;color:hsl(var(--muted-foreground))}.date-picker-toggle{display:inline-flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;color:hsl(var(--muted-foreground));border-radius:calc(var(--radius) - .125rem);transition:color .15s ease,background-color .15s ease}.date-picker-toggle:hover{color:hsl(var(--foreground));background:hsl(var(--accent))}.date-picker-toggle:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.date-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.date-picker-toggle svg{width:1rem;height:1rem}:host ::ng-deep .mat-mdc-input-element{font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-input-element::placeholder{color:hsl(var(--muted-foreground))}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mdc-floating-label,:host ::ng-deep .mat-mdc-floating-label,:host ::ng-deep .mdc-notched-outline__notch .mdc-floating-label{display:none}:host ::ng-deep .mdc-notched-outline__notch{padding:0;border-left:none;border-right:none}:host ::ng-deep .mat-mdc-form-field.mat-focused .date-picker-toggle{color:hsl(var(--foreground))}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .date-picker-toggle{opacity:.5}::ng-deep mat-datepicker-content:has(.datepicker-panel){--mat-datepicker-calendar-container-background-color: hsl(var(--popover));--mat-datepicker-calendar-container-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-container-shape: var(--radius);--mat-datepicker-calendar-container-touch-shape: var(--radius);--mat-datepicker-calendar-container-elevation-shadow: var( --shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24) );--mat-datepicker-calendar-container-touch-elevation-shadow: var( --shadow-lg, 0 18px 36px -28px hsl(var(--foreground) / .34) );--mat-datepicker-calendar-text-font: var(--font-sans);--mat-datepicker-calendar-date-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-date-outline-color: transparent;--mat-datepicker-calendar-date-hover-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-focus-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-selected-state-background-color: hsl(var(--primary));--mat-datepicker-calendar-date-selected-state-text-color: hsl(var(--primary-foreground));--mat-datepicker-calendar-date-selected-disabled-state-background-color: hsl(var(--muted));--mat-datepicker-calendar-date-disabled-state-text-color: hsl(var(--muted-foreground) / .5);--mat-datepicker-calendar-date-today-outline-color: hsl(var(--primary));--mat-datepicker-calendar-date-today-selected-state-outline-color: hsl(var(--primary-foreground));--mat-datepicker-calendar-date-today-disabled-state-outline-color: hsl(var(--muted-foreground) / .5);--mat-datepicker-calendar-date-in-range-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-in-comparison-range-state-background-color: hsl(var(--accent) / .5);--mat-datepicker-calendar-date-preview-state-outline-color: hsl(var(--ring));--mat-datepicker-calendar-header-text-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-header-divider-color: transparent;--mat-datepicker-calendar-body-label-text-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-period-button-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-period-button-icon-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-navigation-button-icon-color: hsl(var(--muted-foreground));border:1px solid hsl(var(--border))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }] });
|
|
135
144
|
}
|
|
136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
145
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
137
146
|
type: Component,
|
|
138
|
-
args: [{ selector: 'DatePicker',
|
|
147
|
+
args: [{ selector: 'DatePicker', imports: [
|
|
148
|
+
ReactiveFormsModule,
|
|
149
|
+
MatFormField,
|
|
150
|
+
MatSuffix,
|
|
151
|
+
MatInput,
|
|
152
|
+
MatDatepicker,
|
|
153
|
+
MatDatepickerInput,
|
|
154
|
+
], host: { '[class]': 'classes()' }, providers: [
|
|
139
155
|
provideNativeDateAdapter(),
|
|
140
156
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
|
|
141
157
|
], template: `
|
|
@@ -152,15 +168,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
152
168
|
[min]="min()"
|
|
153
169
|
[max]="max()"
|
|
154
170
|
[formControl]="control"
|
|
155
|
-
(blur)="handleTouched()"
|
|
171
|
+
(blur)="handleTouched()"
|
|
172
|
+
/>
|
|
156
173
|
<button
|
|
157
174
|
matIconSuffix
|
|
158
175
|
type="button"
|
|
159
176
|
class="date-picker-toggle"
|
|
160
177
|
aria-label="Open calendar"
|
|
161
178
|
[disabled]="control.disabled"
|
|
162
|
-
(click)="picker.open()"
|
|
163
|
-
|
|
179
|
+
(click)="picker.open()"
|
|
180
|
+
>
|
|
181
|
+
<svg
|
|
182
|
+
aria-hidden="true"
|
|
183
|
+
viewBox="0 0 24 24"
|
|
184
|
+
fill="none"
|
|
185
|
+
stroke="currentColor"
|
|
186
|
+
stroke-width="2"
|
|
187
|
+
>
|
|
164
188
|
<path d="M8 2v4" />
|
|
165
189
|
<path d="M16 2v4" />
|
|
166
190
|
<rect width="18" height="18" x="3" y="4" rx="2" />
|
|
@@ -173,7 +197,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
173
197
|
[startAt]="startAt()"
|
|
174
198
|
[startView]="startView()"
|
|
175
199
|
[touchUi]="touchUi()"
|
|
176
|
-
(closed)="handleTouched()"
|
|
200
|
+
(closed)="handleTouched()"
|
|
201
|
+
></mat-datepicker>
|
|
177
202
|
</mat-form-field>
|
|
178
203
|
`, styles: [":host{display:inline-block}:host ::ng-deep .mat-mdc-form-field{--mat-form-field-container-height: 2.25rem;--mat-form-field-container-vertical-padding: 0;--mat-form-field-filled-with-label-container-padding-top: 0;--mat-form-field-filled-with-label-container-padding-bottom: 0;--mdc-outlined-text-field-container-shape: calc(var(--radius) - .125rem);--mdc-outlined-text-field-outline-color: hsl(var(--input));--mdc-outlined-text-field-hover-outline-color: hsl(var(--input));--mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));--mdc-outlined-text-field-input-text-color: hsl(var(--foreground));--mdc-outlined-text-field-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-hover-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-focus-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-disabled-outline-color: hsl(var(--input) / .5);--mdc-outlined-text-field-disabled-input-text-color: hsl(var(--muted-foreground));width:100%;font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-text-field-wrapper{height:2.25rem;padding:0 .25rem 0 .75rem;background:transparent}:host ::ng-deep .mat-mdc-form-field-flex{height:2.25rem;align-items:center}:host ::ng-deep .mat-mdc-form-field-infix{display:flex;min-height:2.25rem;height:2.25rem;align-items:center;padding:0;width:auto}:host ::ng-deep .mat-mdc-form-field-icon-suffix{align-self:center;padding-right:.25rem!important;padding-left:.25rem!important;color:hsl(var(--muted-foreground))}.date-picker-toggle{display:inline-flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;color:hsl(var(--muted-foreground));border-radius:calc(var(--radius) - .125rem);transition:color .15s ease,background-color .15s ease}.date-picker-toggle:hover{color:hsl(var(--foreground));background:hsl(var(--accent))}.date-picker-toggle:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.date-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.date-picker-toggle svg{width:1rem;height:1rem}:host ::ng-deep .mat-mdc-input-element{font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-input-element::placeholder{color:hsl(var(--muted-foreground))}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mdc-floating-label,:host ::ng-deep .mat-mdc-floating-label,:host ::ng-deep .mdc-notched-outline__notch .mdc-floating-label{display:none}:host ::ng-deep .mdc-notched-outline__notch{padding:0;border-left:none;border-right:none}:host ::ng-deep .mat-mdc-form-field.mat-focused .date-picker-toggle{color:hsl(var(--foreground))}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .date-picker-toggle{opacity:.5}::ng-deep mat-datepicker-content:has(.datepicker-panel){--mat-datepicker-calendar-container-background-color: hsl(var(--popover));--mat-datepicker-calendar-container-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-container-shape: var(--radius);--mat-datepicker-calendar-container-touch-shape: var(--radius);--mat-datepicker-calendar-container-elevation-shadow: var( --shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24) );--mat-datepicker-calendar-container-touch-elevation-shadow: var( --shadow-lg, 0 18px 36px -28px hsl(var(--foreground) / .34) );--mat-datepicker-calendar-text-font: var(--font-sans);--mat-datepicker-calendar-date-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-date-outline-color: transparent;--mat-datepicker-calendar-date-hover-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-focus-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-selected-state-background-color: hsl(var(--primary));--mat-datepicker-calendar-date-selected-state-text-color: hsl(var(--primary-foreground));--mat-datepicker-calendar-date-selected-disabled-state-background-color: hsl(var(--muted));--mat-datepicker-calendar-date-disabled-state-text-color: hsl(var(--muted-foreground) / .5);--mat-datepicker-calendar-date-today-outline-color: hsl(var(--primary));--mat-datepicker-calendar-date-today-selected-state-outline-color: hsl(var(--primary-foreground));--mat-datepicker-calendar-date-today-disabled-state-outline-color: hsl(var(--muted-foreground) / .5);--mat-datepicker-calendar-date-in-range-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-in-comparison-range-state-background-color: hsl(var(--accent) / .5);--mat-datepicker-calendar-date-preview-state-outline-color: hsl(var(--ring));--mat-datepicker-calendar-header-text-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-header-divider-color: transparent;--mat-datepicker-calendar-body-label-text-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-period-button-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-period-button-icon-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-navigation-button-icon-color: hsl(var(--muted-foreground));border:1px solid hsl(var(--border))}\n"] }]
|
|
179
204
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], touchUi: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchUi", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
@@ -2,12 +2,12 @@ import { Overlay } from '@angular/cdk/overlay';
|
|
|
2
2
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
3
3
|
import { FocusTrapFactory } from '@angular/cdk/a11y';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { inject, ViewContainerRef, DestroyRef, model, input, output,
|
|
5
|
+
import { inject, ViewContainerRef, DestroyRef, model, input, output, signal, computed, viewChild, effect, Component, Directive } from '@angular/core';
|
|
6
6
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
7
7
|
import { DOCUMENT } from '@angular/common';
|
|
8
8
|
import { filter } from 'rxjs/operators';
|
|
9
9
|
import { ButtonComponent } from '@ojiepermana/angular-component/button';
|
|
10
|
-
import { cn, radiusBaseValue, densityBaseValue } from '@ojiepermana/angular-component/utils';
|
|
10
|
+
import { cn, radiusBaseValue, densityBaseValue, uniqueId } from '@ojiepermana/angular-component/utils';
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* Declarative modal dialog. Renders into the body via CDK overlay when
|
|
@@ -44,6 +44,9 @@ class DialogComponent {
|
|
|
44
44
|
...(ngDevMode ? [{ debugName: "closeButtonLabel" }] : /* istanbul ignore next */ []));
|
|
45
45
|
labelledBy = input(null, { ...(ngDevMode ? { debugName: "labelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
|
|
46
46
|
describedBy = input(null, { ...(ngDevMode ? { debugName: "describedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
|
|
47
|
+
/** ARIA role for the surface. `'dialog'` by default; `AlertDialog` sets `'alertdialog'`. */
|
|
48
|
+
role = input('dialog', /* @ts-ignore */
|
|
49
|
+
...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
|
|
47
50
|
class = input('', /* @ts-ignore */
|
|
48
51
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
49
52
|
radius = input('inherit', /* @ts-ignore */
|
|
@@ -51,6 +54,36 @@ class DialogComponent {
|
|
|
51
54
|
density = input('inherit', /* @ts-ignore */
|
|
52
55
|
...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
|
|
53
56
|
openedChange = output();
|
|
57
|
+
registeredTitleId = signal(null, /* @ts-ignore */
|
|
58
|
+
...(ngDevMode ? [{ debugName: "registeredTitleId" }] : /* istanbul ignore next */ []));
|
|
59
|
+
registeredDescriptionId = signal(null, /* @ts-ignore */
|
|
60
|
+
...(ngDevMode ? [{ debugName: "registeredDescriptionId" }] : /* istanbul ignore next */ []));
|
|
61
|
+
/** Explicit `aria-labelledby` wins; otherwise a projected `DialogTitle` supplies the id. */
|
|
62
|
+
resolvedLabelledBy = computed(() => this.labelledBy() ?? this.registeredTitleId(), /* @ts-ignore */
|
|
63
|
+
...(ngDevMode ? [{ debugName: "resolvedLabelledBy" }] : /* istanbul ignore next */ []));
|
|
64
|
+
/** Explicit `aria-describedby` wins; otherwise a projected `DialogDescription` supplies the id. */
|
|
65
|
+
resolvedDescribedBy = computed(() => this.describedBy() ?? this.registeredDescriptionId(), /* @ts-ignore */
|
|
66
|
+
...(ngDevMode ? [{ debugName: "resolvedDescribedBy" }] : /* istanbul ignore next */ []));
|
|
67
|
+
/** Called by a projected `DialogTitle` so default usage has an accessible name (AXE-safe). */
|
|
68
|
+
registerTitleId(id) {
|
|
69
|
+
this.registeredTitleId.set(id);
|
|
70
|
+
}
|
|
71
|
+
/** Cleared by a `DialogTitle` on destroy so a closed/reopened dialog never points at a stale id. */
|
|
72
|
+
unregisterTitleId(id) {
|
|
73
|
+
if (this.registeredTitleId() === id) {
|
|
74
|
+
this.registeredTitleId.set(null);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
/** Called by a projected `DialogDescription`. */
|
|
78
|
+
registerDescriptionId(id) {
|
|
79
|
+
this.registeredDescriptionId.set(id);
|
|
80
|
+
}
|
|
81
|
+
/** Cleared by a `DialogDescription` on destroy. */
|
|
82
|
+
unregisterDescriptionId(id) {
|
|
83
|
+
if (this.registeredDescriptionId() === id) {
|
|
84
|
+
this.registeredDescriptionId.set(null);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
54
87
|
tpl = viewChild.required('tpl');
|
|
55
88
|
overlayRef = null;
|
|
56
89
|
focusTrap = null;
|
|
@@ -116,18 +149,19 @@ class DialogComponent {
|
|
|
116
149
|
close() {
|
|
117
150
|
this.requestClose();
|
|
118
151
|
}
|
|
119
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
120
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
152
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
153
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DialogComponent, isStandalone: true, selector: "Dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
121
154
|
<ng-template #tpl>
|
|
122
155
|
<div
|
|
123
156
|
class="dialog-surface"
|
|
124
|
-
role="
|
|
157
|
+
[attr.role]="role()"
|
|
125
158
|
aria-modal="true"
|
|
126
|
-
[attr.aria-labelledby]="
|
|
127
|
-
[attr.aria-describedby]="
|
|
159
|
+
[attr.aria-labelledby]="resolvedLabelledBy()"
|
|
160
|
+
[attr.aria-describedby]="resolvedDescribedBy()"
|
|
128
161
|
[class]="surfaceClasses()"
|
|
129
162
|
[style.--radius-base]="radiusBase()"
|
|
130
|
-
[style.--spacing-base]="densityBase()"
|
|
163
|
+
[style.--spacing-base]="densityBase()"
|
|
164
|
+
>
|
|
131
165
|
@if (showCloseButton()) {
|
|
132
166
|
<button
|
|
133
167
|
type="button"
|
|
@@ -136,7 +170,8 @@ class DialogComponent {
|
|
|
136
170
|
size="icon-sm"
|
|
137
171
|
class="dialog-close-button absolute right-4 top-4 h-8 w-8 rounded-md p-0 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
|
|
138
172
|
[attr.aria-label]="closeButtonLabel()"
|
|
139
|
-
(click)="close()"
|
|
173
|
+
(click)="close()"
|
|
174
|
+
>
|
|
140
175
|
<span aria-hidden="true">X</span>
|
|
141
176
|
<span class="sr-only">{{ closeButtonLabel() }}</span>
|
|
142
177
|
</button>
|
|
@@ -144,25 +179,25 @@ class DialogComponent {
|
|
|
144
179
|
<ng-content />
|
|
145
180
|
</div>
|
|
146
181
|
</ng-template>
|
|
147
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[Button], a[Button]", inputs: ["variant", "size", "class", "radius", "density"] }]
|
|
182
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[Button], a[Button]", inputs: ["variant", "size", "class", "radius", "density"] }] });
|
|
148
183
|
}
|
|
149
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
184
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogComponent, decorators: [{
|
|
150
185
|
type: Component,
|
|
151
186
|
args: [{
|
|
152
187
|
selector: 'Dialog',
|
|
153
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
154
188
|
imports: [ButtonComponent],
|
|
155
189
|
template: `
|
|
156
190
|
<ng-template #tpl>
|
|
157
191
|
<div
|
|
158
192
|
class="dialog-surface"
|
|
159
|
-
role="
|
|
193
|
+
[attr.role]="role()"
|
|
160
194
|
aria-modal="true"
|
|
161
|
-
[attr.aria-labelledby]="
|
|
162
|
-
[attr.aria-describedby]="
|
|
195
|
+
[attr.aria-labelledby]="resolvedLabelledBy()"
|
|
196
|
+
[attr.aria-describedby]="resolvedDescribedBy()"
|
|
163
197
|
[class]="surfaceClasses()"
|
|
164
198
|
[style.--radius-base]="radiusBase()"
|
|
165
|
-
[style.--spacing-base]="densityBase()"
|
|
199
|
+
[style.--spacing-base]="densityBase()"
|
|
200
|
+
>
|
|
166
201
|
@if (showCloseButton()) {
|
|
167
202
|
<button
|
|
168
203
|
type="button"
|
|
@@ -171,7 +206,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
171
206
|
size="icon-sm"
|
|
172
207
|
class="dialog-close-button absolute right-4 top-4 h-8 w-8 rounded-md p-0 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
|
|
173
208
|
[attr.aria-label]="closeButtonLabel()"
|
|
174
|
-
(click)="close()"
|
|
209
|
+
(click)="close()"
|
|
210
|
+
>
|
|
175
211
|
<span aria-hidden="true">X</span>
|
|
176
212
|
<span class="sr-only">{{ closeButtonLabel() }}</span>
|
|
177
213
|
</button>
|
|
@@ -181,17 +217,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
181
217
|
</ng-template>
|
|
182
218
|
`,
|
|
183
219
|
}]
|
|
184
|
-
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
|
|
220
|
+
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
|
|
185
221
|
|
|
186
222
|
class DialogCloseDirective {
|
|
187
223
|
dialog = inject(DialogComponent);
|
|
188
224
|
closeDialog() {
|
|
189
225
|
this.dialog.close();
|
|
190
226
|
}
|
|
191
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
192
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.
|
|
227
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
228
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: DialogCloseDirective, isStandalone: true, selector: "button[DialogClose], a[DialogClose]", host: { listeners: { "click": "closeDialog()" } }, ngImport: i0 });
|
|
193
229
|
}
|
|
194
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogCloseDirective, decorators: [{
|
|
195
231
|
type: Directive,
|
|
196
232
|
args: [{
|
|
197
233
|
selector: 'button[DialogClose], a[DialogClose]',
|
|
@@ -206,65 +242,85 @@ class DialogHeaderComponent {
|
|
|
206
242
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
207
243
|
classes = computed(() => cn('flex flex-col gap-1.5 text-center sm:text-left', this.class()), /* @ts-ignore */
|
|
208
244
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
209
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
210
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
245
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
246
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogHeaderComponent, isStandalone: true, selector: "DialogHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
|
|
211
247
|
}
|
|
212
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
248
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogHeaderComponent, decorators: [{
|
|
213
249
|
type: Component,
|
|
214
250
|
args: [{
|
|
215
251
|
selector: 'DialogHeader',
|
|
216
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
217
252
|
host: { '[class]': 'classes()' },
|
|
218
253
|
template: `<ng-content />`,
|
|
219
254
|
}]
|
|
220
255
|
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
221
256
|
class DialogTitleComponent {
|
|
257
|
+
/** Explicit id override; when omitted a document-unique id is generated. */
|
|
258
|
+
id = input(null, /* @ts-ignore */
|
|
259
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
222
260
|
class = input('', /* @ts-ignore */
|
|
223
261
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
262
|
+
autoId = uniqueId('dialog-title');
|
|
263
|
+
dialog = inject(DialogComponent, { optional: true });
|
|
264
|
+
/** The id rendered on the element, used by the parent dialog for aria-labelledby. */
|
|
265
|
+
resolvedId = computed(() => this.id() ?? this.autoId, /* @ts-ignore */
|
|
266
|
+
...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
|
|
224
267
|
classes = computed(() => cn('text-lg font-semibold leading-none tracking-tight', this.class()), /* @ts-ignore */
|
|
225
268
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
226
|
-
|
|
227
|
-
|
|
269
|
+
constructor() {
|
|
270
|
+
effect(() => this.dialog?.registerTitleId(this.resolvedId()));
|
|
271
|
+
inject(DestroyRef).onDestroy(() => this.dialog?.unregisterTitleId(this.resolvedId()));
|
|
272
|
+
}
|
|
273
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
274
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogTitleComponent, isStandalone: true, selector: "DialogTitle, h2[DialogTitle]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
|
|
228
275
|
}
|
|
229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
276
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogTitleComponent, decorators: [{
|
|
230
277
|
type: Component,
|
|
231
278
|
args: [{
|
|
232
279
|
selector: 'DialogTitle, h2[DialogTitle]',
|
|
233
|
-
|
|
234
|
-
host: { '[class]': 'classes()' },
|
|
280
|
+
host: { '[class]': 'classes()', '[attr.id]': 'resolvedId()' },
|
|
235
281
|
template: `<ng-content />`,
|
|
236
282
|
}]
|
|
237
|
-
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
283
|
+
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
238
284
|
class DialogDescriptionComponent {
|
|
285
|
+
/** Explicit id override; when omitted a document-unique id is generated. */
|
|
286
|
+
id = input(null, /* @ts-ignore */
|
|
287
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
239
288
|
class = input('', /* @ts-ignore */
|
|
240
289
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
290
|
+
autoId = uniqueId('dialog-description');
|
|
291
|
+
dialog = inject(DialogComponent, { optional: true });
|
|
292
|
+
/** The id rendered on the element, used by the parent dialog for aria-describedby. */
|
|
293
|
+
resolvedId = computed(() => this.id() ?? this.autoId, /* @ts-ignore */
|
|
294
|
+
...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
|
|
241
295
|
classes = computed(() => cn('text-sm text-muted-foreground', this.class()), /* @ts-ignore */
|
|
242
296
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
243
|
-
|
|
244
|
-
|
|
297
|
+
constructor() {
|
|
298
|
+
effect(() => this.dialog?.registerDescriptionId(this.resolvedId()));
|
|
299
|
+
inject(DestroyRef).onDestroy(() => this.dialog?.unregisterDescriptionId(this.resolvedId()));
|
|
300
|
+
}
|
|
301
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
302
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogDescriptionComponent, isStandalone: true, selector: "DialogDescription, p[DialogDescription]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
|
|
245
303
|
}
|
|
246
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
304
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogDescriptionComponent, decorators: [{
|
|
247
305
|
type: Component,
|
|
248
306
|
args: [{
|
|
249
307
|
selector: 'DialogDescription, p[DialogDescription]',
|
|
250
|
-
|
|
251
|
-
host: { '[class]': 'classes()' },
|
|
308
|
+
host: { '[class]': 'classes()', '[attr.id]': 'resolvedId()' },
|
|
252
309
|
template: `<ng-content />`,
|
|
253
310
|
}]
|
|
254
|
-
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
311
|
+
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
255
312
|
class DialogContentComponent {
|
|
256
313
|
class = input('', /* @ts-ignore */
|
|
257
314
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
258
315
|
classes = computed(() => cn('grid gap-4', this.class()), /* @ts-ignore */
|
|
259
316
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
260
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
261
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
317
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
318
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogContentComponent, isStandalone: true, selector: "DialogContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
|
|
262
319
|
}
|
|
263
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
320
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogContentComponent, decorators: [{
|
|
264
321
|
type: Component,
|
|
265
322
|
args: [{
|
|
266
323
|
selector: 'DialogContent',
|
|
267
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
268
324
|
host: { '[class]': 'classes()' },
|
|
269
325
|
template: `<ng-content />`,
|
|
270
326
|
}]
|
|
@@ -274,14 +330,13 @@ class DialogFooterComponent {
|
|
|
274
330
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
275
331
|
classes = computed(() => cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2', this.class()), /* @ts-ignore */
|
|
276
332
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
277
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
278
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
333
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
334
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogFooterComponent, isStandalone: true, selector: "DialogFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
|
|
279
335
|
}
|
|
280
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
336
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogFooterComponent, decorators: [{
|
|
281
337
|
type: Component,
|
|
282
338
|
args: [{
|
|
283
339
|
selector: 'DialogFooter',
|
|
284
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
285
340
|
host: { '[class]': 'classes()' },
|
|
286
341
|
template: `<ng-content />`,
|
|
287
342
|
}]
|