@praxisui/cron-builder 8.0.0-beta.30 → 8.0.0-beta.32

package/fesm2022/praxisui-cron-builder.mjs

@@ -1181,16 +1181,16 @@ class PdxCronBuilderComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PdxCronBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PdxCronBuilderComponent, isStandalone: true, selector: "pdx-cron-builder", inputs: { metadata: "metadata" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PdxCronBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PdxCronBuilderComponent, isStandalone: true, selector: "pdx-cron-builder", inputs: { metadata: "metadata" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PdxCronBuilderComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"cron-builder-container\" (focusout)=\"onTouched()\">\n  @if (metadata.mode === 'both') {\n    <mat-tab-group\n      [selectedIndex]=\"selectedTabIndex\"\n      (selectedTabChange)=\"onTabChange($event)\"\n    >\n      <mat-tab label=\"Simple\"></mat-tab>\n      <mat-tab label=\"Advanced\"></mat-tab>\n    </mat-tab-group>\n  }\n\n  @if (value) {\n    <div class=\"cron-expression\">\n    <mat-form-field appearance=\"outline\" class=\"cron-expression-field\">\n      <mat-label>CRON Expression</mat-label>\n      <input matInput [value]=\"value\" readonly />\n      <button\n        mat-icon-button\n        matSuffix\n        (click)=\"copyCron()\"\n        [matTooltip]=\"'Copy to clipboard'\"\n        aria-label=\"Copy CRON expression\"\n      >\n        <mat-icon [praxisIcon]=\"'content_copy'\"></mat-icon>\n      </button>\n    </mat-form-field>\n    <button mat-button (click)=\"importCron()\">Import CRON</button>\n    </div>\n  }\n\n  @switch (activeTab) {\n    @case ('simple') {\n      <div [formGroup]=\"simpleForm\" class=\"simple-mode\">\n      <mat-form-field appearance=\"outline\" class=\"preset-select\">\n        <mat-label>Preset</mat-label>\n        <mat-select formControlName=\"type\">\n          <mat-option value=\"everyNMinutes\">A cada X min</mat-option>\n          <mat-option value=\"dailyAt\">Diariamente \u00E0s</mat-option>\n          <mat-option value=\"weekly\">Semanal (dias marcados) \u00E0s</mat-option>\n          <mat-option value=\"monthlyDay\">Mensal (dia N) \u00E0s</mat-option>\n          <mat-option value=\"monthlyNthWeekday\">\n            Mensal (N-\u00E9sima 2\u00AA-feira) \u00E0s\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n\n        @switch (simpleControls.type.value) {\n          @case ('everyNMinutes') {\n            <div class=\"preset-body\">\n          <mat-slider\n            min=\"1\"\n            max=\"60\"\n            step=\"1\"\n            thumbLabel\n          >\n            <input matSliderThumb formControlName=\"everyN\" />\n          </mat-slider>\n          <div class=\"cron-hint\">\n                A cada {{ simpleControls.everyN.value }} minutos\n          </div>\n            </div>\n          }\n\n          @case ('dailyAt') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"dailyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Diariamente \u00E0s {{ simpleControls.dailyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('weekly') {\n            <div class=\"preset-body\">\n          <mat-chip-listbox formControlName=\"weeklyDays\" multiple>\n              @for (day of weeklyDayOptions; track day) {\n                <mat-chip-option [value]=\"day\">\n                  {{ weekdayLabels[day] }}\n                </mat-chip-option>\n              }\n          </mat-chip-listbox>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"weeklyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Semanalmente \u00E0s {{ simpleControls.weeklyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('monthlyDay') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Dia</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              formControlName=\"monthlyDay\"\n              min=\"1\"\n              max=\"31\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"monthlyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Dia {{ simpleControls.monthlyDay.value }} \u00E0s\n                {{ simpleControls.monthlyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('monthlyNthWeekday') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>N-\u00E9sima</mat-label>\n            <mat-select formControlName=\"nth\">\n                @for (nth of nthOrderOptions; track nth) {\n                  <mat-option [value]=\"nth\">{{ nth }}\u00AA</mat-option>\n                }\n            </mat-select>\n          </mat-form-field>\n          <mat-chip-listbox formControlName=\"nthDay\">\n              @for (day of nthDayOptions; track day) {\n                <mat-chip-option [value]=\"day\">\n                  {{ weekdayLabels[day] }}\n                </mat-chip-option>\n              }\n          </mat-chip-listbox>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"nthTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                {{ simpleControls.nth.value }}\u00AA\n                {{ weekdayLabels[simpleControls.nthDay.value] }}\n                \u00E0s\n                {{ simpleControls.nthTime.value }}\n          </div>\n            </div>\n          }\n        }\n      </div>\n    }\n\n    @case ('advanced') {\n      <div [formGroup]=\"form\">\n        <div class=\"cron-fields\">\n          @if (metadata.fields?.minutes) {\n            <mat-form-field>\n              <mat-label>Minutes</mat-label>\n              <input matInput formControlName=\"minutes\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.hours) {\n            <mat-form-field>\n              <mat-label>Hours</mat-label>\n              <input matInput formControlName=\"hours\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.dom) {\n            <mat-form-field>\n              <mat-label>Day of Month</mat-label>\n              <input matInput formControlName=\"dayOfMonth\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.month) {\n            <mat-form-field>\n              <mat-label>Month</mat-label>\n              <input matInput formControlName=\"month\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.dow) {\n            <mat-form-field>\n              <mat-label>Day of Week</mat-label>\n              <input matInput formControlName=\"dayOfWeek\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.seconds) {\n            <mat-form-field>\n              <mat-label>Seconds</mat-label>\n              <input matInput formControlName=\"seconds\" />\n            </mat-form-field>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  <div class=\"cron-feedback\">\n    <mat-form-field appearance=\"outline\" class=\"timezone-field\">\n      <mat-label>Timezone</mat-label>\n      <mat-select [formControl]=\"timezoneControl\">\n        @for (tz of timezoneOptions; track tz) {\n          <mat-option [value]=\"tz\">\n            {{ tz }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    @if (humanized) {\n      <div class=\"humanized-description\" aria-live=\"polite\">\n        {{ humanized }}\n      <button\n        mat-icon-button\n        class=\"copy-humanized\"\n        (click)=\"copyHumanized()\"\n        [matTooltip]=\"'Copy description'\"\n        aria-label=\"Copy description\"\n      >\n        <mat-icon [praxisIcon]=\"'content_copy'\"></mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (error) {\n      <div class=\"cron-error\">{{ error }}</div>\n    }\n\n    @if (preview.length > 0) {\n      <div class=\"preview-section\">\n        <h4>Next Occurrences:</h4>\n        <mat-list>\n          @for (date of preview; track $index) {\n            <mat-list-item>\n              {{\n                date\n                  | date\n                    : \"full\"\n                    : timezoneControl.value\n                    : metadata.locale || \"pt-BR\"\n              }}\n            </mat-list-item>\n          }\n        </mat-list>\n      </div>\n    }\n  </div>\n\n  @if (metadata.hint) {\n    <div class=\"cron-hint\">{{ metadata.hint }}</div>\n  }\n</div>\n", styles: [":host{display:block}.cron-expression-field{width:100%}.cron-expression{margin-bottom:1rem}.simple-mode{display:flex;flex-direction:column;gap:1rem}.preset-body{display:flex;flex-direction:column;gap:.5rem}.cron-feedback{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.humanized-description{display:flex;align-items:center;gap:.5rem}.timezone-field{width:250px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i9.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i9.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i10.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i10.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"cron-builder-container\" (focusout)=\"onTouched()\">\n  @if (metadata.mode === 'both') {\n    <mat-tab-group\n      [selectedIndex]=\"selectedTabIndex\"\n      (selectedTabChange)=\"onTabChange($event)\"\n    >\n      <mat-tab label=\"Simple\"></mat-tab>\n      <mat-tab label=\"Advanced\"></mat-tab>\n    </mat-tab-group>\n  }\n\n  @if (value) {\n    <div class=\"cron-expression\">\n    <mat-form-field appearance=\"outline\" class=\"cron-expression-field\">\n      <mat-label>CRON Expression</mat-label>\n      <input matInput [value]=\"value\" readonly />\n      <button\n        mat-icon-button\n        matSuffix\n        (click)=\"copyCron()\"\n        [matTooltip]=\"'Copy to clipboard'\"\n        aria-label=\"Copy CRON expression\"\n      >\n        <mat-icon [praxisIcon]=\"'content_copy'\"></mat-icon>\n      </button>\n    </mat-form-field>\n    <button mat-button (click)=\"importCron()\">Import CRON</button>\n    </div>\n  }\n\n  @switch (activeTab) {\n    @case ('simple') {\n      <div [formGroup]=\"simpleForm\" class=\"simple-mode\">\n      <mat-form-field appearance=\"outline\" class=\"preset-select\">\n        <mat-label>Preset</mat-label>\n        <mat-select formControlName=\"type\">\n          <mat-option value=\"everyNMinutes\">A cada X min</mat-option>\n          <mat-option value=\"dailyAt\">Diariamente \u00E0s</mat-option>\n          <mat-option value=\"weekly\">Semanal (dias marcados) \u00E0s</mat-option>\n          <mat-option value=\"monthlyDay\">Mensal (dia N) \u00E0s</mat-option>\n          <mat-option value=\"monthlyNthWeekday\">\n            Mensal (N-\u00E9sima 2\u00AA-feira) \u00E0s\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n\n        @switch (simpleControls.type.value) {\n          @case ('everyNMinutes') {\n            <div class=\"preset-body\">\n          <mat-slider\n            min=\"1\"\n            max=\"60\"\n            step=\"1\"\n            thumbLabel\n          >\n            <input matSliderThumb formControlName=\"everyN\" />\n          </mat-slider>\n          <div class=\"cron-hint\">\n                A cada {{ simpleControls.everyN.value }} minutos\n          </div>\n            </div>\n          }\n\n          @case ('dailyAt') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"dailyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Diariamente \u00E0s {{ simpleControls.dailyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('weekly') {\n            <div class=\"preset-body\">\n          <mat-chip-listbox formControlName=\"weeklyDays\" multiple>\n              @for (day of weeklyDayOptions; track day) {\n                <mat-chip-option [value]=\"day\">\n                  {{ weekdayLabels[day] }}\n                </mat-chip-option>\n              }\n          </mat-chip-listbox>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"weeklyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Semanalmente \u00E0s {{ simpleControls.weeklyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('monthlyDay') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Dia</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              formControlName=\"monthlyDay\"\n              min=\"1\"\n              max=\"31\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"monthlyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Dia {{ simpleControls.monthlyDay.value }} \u00E0s\n                {{ simpleControls.monthlyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('monthlyNthWeekday') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>N-\u00E9sima</mat-label>\n            <mat-select formControlName=\"nth\">\n                @for (nth of nthOrderOptions; track nth) {\n                  <mat-option [value]=\"nth\">{{ nth }}\u00AA</mat-option>\n                }\n            </mat-select>\n          </mat-form-field>\n          <mat-chip-listbox formControlName=\"nthDay\">\n              @for (day of nthDayOptions; track day) {\n                <mat-chip-option [value]=\"day\">\n                  {{ weekdayLabels[day] }}\n                </mat-chip-option>\n              }\n          </mat-chip-listbox>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"nthTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                {{ simpleControls.nth.value }}\u00AA\n                {{ weekdayLabels[simpleControls.nthDay.value] }}\n                \u00E0s\n                {{ simpleControls.nthTime.value }}\n          </div>\n            </div>\n          }\n        }\n      </div>\n    }\n\n    @case ('advanced') {\n      <div [formGroup]=\"form\">\n        <div class=\"cron-fields\">\n          @if (metadata.fields?.minutes) {\n            <mat-form-field>\n              <mat-label>Minutes</mat-label>\n              <input matInput formControlName=\"minutes\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.hours) {\n            <mat-form-field>\n              <mat-label>Hours</mat-label>\n              <input matInput formControlName=\"hours\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.dom) {\n            <mat-form-field>\n              <mat-label>Day of Month</mat-label>\n              <input matInput formControlName=\"dayOfMonth\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.month) {\n            <mat-form-field>\n              <mat-label>Month</mat-label>\n              <input matInput formControlName=\"month\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.dow) {\n            <mat-form-field>\n              <mat-label>Day of Week</mat-label>\n              <input matInput formControlName=\"dayOfWeek\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.seconds) {\n            <mat-form-field>\n              <mat-label>Seconds</mat-label>\n              <input matInput formControlName=\"seconds\" />\n            </mat-form-field>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  <div class=\"cron-feedback\">\n    <mat-form-field appearance=\"outline\" class=\"timezone-field\">\n      <mat-label>Timezone</mat-label>\n      <mat-select [formControl]=\"timezoneControl\">\n        @for (tz of timezoneOptions; track tz) {\n          <mat-option [value]=\"tz\">\n            {{ tz }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    @if (humanized) {\n      <div class=\"humanized-description\" aria-live=\"polite\">\n        {{ humanized }}\n      <button\n        mat-icon-button\n        class=\"copy-humanized\"\n        (click)=\"copyHumanized()\"\n        [matTooltip]=\"'Copy description'\"\n        aria-label=\"Copy description\"\n      >\n        <mat-icon [praxisIcon]=\"'content_copy'\"></mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (error) {\n      <div class=\"cron-error\">{{ error }}</div>\n    }\n\n    @if (preview.length > 0) {\n      <div class=\"preview-section\">\n        <h4>Next Occurrences:</h4>\n        <mat-list>\n          @for (date of preview; track $index) {\n            <mat-list-item>\n              {{\n                date\n                  | date\n                    : \"full\"\n                    : timezoneControl.value\n                    : metadata.locale || \"pt-BR\"\n              }}\n            </mat-list-item>\n          }\n        </mat-list>\n      </div>\n    }\n  </div>\n\n  @if (metadata.hint) {\n    <div class=\"cron-hint\">{{ metadata.hint }}</div>\n  }\n</div>\n", styles: [":host{display:block}.cron-expression-field{width:100%}.cron-expression{margin-bottom:1rem}.simple-mode{display:flex;flex-direction:column;gap:1rem}.preset-body{display:flex;flex-direction:column;gap:.5rem}.cron-feedback{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.humanized-description{display:flex;align-items:center;gap:.5rem}.timezone-field{width:250px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i9.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i9.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i10.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i10.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PdxCronBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PdxCronBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdx-cron-builder', standalone: true, imports: [
                         CommonModule,

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@praxisui/cron-builder",
-  "version": "8.0.0-beta.30",
+  "version": "8.0.0-beta.32",
   "description": "Cron expression builder utilities and components for Praxis UI.",
   "peerDependencies": {
-    "@angular/common": "^20.1.0",
-    "@angular/core": "^20.1.0",
-    "@angular/forms": "^20.1.0",
-    "@angular/cdk": "^20.1.0",
-    "@angular/material": "^20.1.0",
-    "@praxisui/core": "^8.0.0-beta.30",
-    "@praxisui/ai": "^8.0.0-beta.30",
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/cdk": "^21.0.0",
+    "@angular/material": "^21.0.0",
+    "@praxisui/core": "^8.0.0-beta.32",
+    "@praxisui/ai": "^8.0.0-beta.32",
     "rxjs": "~7.8.0"
   },
   "dependencies": {
@@ -41,14 +41,15 @@
   ],
   "sideEffects": false,
   "module": "fesm2022/praxisui-cron-builder.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/praxisui-cron-builder.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/praxisui-cron-builder.d.ts",
       "default": "./fesm2022/praxisui-cron-builder.mjs"
     }
-  }
+  },
+  "type": "module"
 }

package/{index.d.ts → types/praxisui-cron-builder.d.ts}

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { OnInit, OnDestroy } from '@angular/core';
 import { ControlValueAccessor, FormGroup, FormControl } from '@angular/forms';
 import { MatTabChangeEvent } from '@angular/material/tabs';
-import { AiCapabilityCategory, AiValueKind, AiCapability, AiCapabilityCatalog, ComponentAuthoringManifest } from '@praxisui/core';
+import { AiCapabilityCatalog, AiCapability, AiCapabilityCategory, AiValueKind, ComponentAuthoringManifest } from '@praxisui/core';
 
 declare const SCHEDULE_AUTHORING_CONFIG_VERSION: "v1";
 type ScheduleAuthoringConfigVersion = typeof SCHEDULE_AUTHORING_CONFIG_VERSION;