@acorex/components 20.2.0-next.9 → 20.2.1

package/fesm2022/acorex-components-rrule.mjs

@@ -1,10 +1,16 @@
+import * as i1 from '@acorex/components/label';
+import { AXLabelModule } from '@acorex/components/label';
+import * as i2 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+import * as i9 from '@angular/common';
+import { DatePipe, AsyncPipe, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, input, inject, signal, computed, effect, Component, model, output, untracked } from '@angular/core';
 import * as i8 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i2 from '@acorex/components/datetime-box';
+import * as i2$1 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
 import { AXFormModule } from '@acorex/components/form';
-import * as i6 from '@acorex/components/label';
-import { AXLabelModule } from '@acorex/components/label';
 import * as i4 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
 import * as i7 from '@acorex/components/search-box';
@@ -13,15 +19,143 @@ import * as i5 from '@acorex/components/select-box';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i3 from '@acorex/components/selection-list';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
-import * as i10 from '@acorex/core/translation';
-import { AXTranslationModule } from '@acorex/core/translation';
-import * as i9 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, model, output, signal, computed, inject, effect, untracked, Component } from '@angular/core';
-import * as i1 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
+class AXRruleService {
+    async rruleFromOptions(options) {
+        // eslint-disable-next-line @nx/enforce-module-boundaries
+        const { RRule } = await import('rrule');
+        return new RRule(options);
+    }
+    async rruleFromString(ruleString) {
+        // eslint-disable-next-line @nx/enforce-module-boundaries
+        const { RRule } = await import('rrule');
+        return RRule.fromString(ruleString);
+    }
+    async rruleFromText(ruleText) {
+        // eslint-disable-next-line @nx/enforce-module-boundaries
+        const { RRule } = await import('rrule');
+        return RRule.fromText(ruleText);
+    }
+    rruleToOptions(rule) {
+        return rule.options;
+    }
+    rruleToString(rule) {
+        return rule.toString();
+    }
+    rruleToText(rule) {
+        return rule.toText();
+    }
+    rruleGetAll(rule, limit = 500) {
+        return rule.all((d, l) => l < limit);
+    }
+    rruleGetBetween(rule, after, before, inclusive = false) {
+        return rule.between(after, before, inclusive);
+    }
+    rruleGetBefore(rule, date, inclusive = false) {
+        return rule.before(date, inclusive);
+    }
+    rruleGetAfter(rule, date, inclusive = false) {
+        return rule.after(date, inclusive);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRruleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRruleService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRruleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AXRrulePreviewComponent {
+    constructor() {
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.repeat = input(100, ...(ngDevMode ? [{ debugName: "repeat" }] : []));
+        this.format = input('yyyy-MM-dd HH:mm:ss', ...(ngDevMode ? [{ debugName: "format" }] : []));
+        this.rruleService = inject(AXRruleService);
+        this.rrule = signal(null, ...(ngDevMode ? [{ debugName: "rrule" }] : []));
+        this.timeZone = signal(null, ...(ngDevMode ? [{ debugName: "timeZone" }] : []));
+        this.text = computed(() => (this.rrule() ? this.rruleService.rruleToText(this.rrule()) : ''), ...(ngDevMode ? [{ debugName: "text" }] : []));
+        this.string = computed(() => (this.rrule() ? this.rruleService.rruleToString(this.rrule()) : ''), ...(ngDevMode ? [{ debugName: "string" }] : []));
+        this.dates = computed(() => (this.rrule() ? this.rruleService.rruleGetAll(this.rrule(), this.repeat()) : []), ...(ngDevMode ? [{ debugName: "dates" }] : []));
+        this.options = computed(() => (this.rrule() ? this.rruleService.rruleToOptions(this.rrule()) : {}), ...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.eff = effect(async () => {
+            if (this.value()) {
+                this.rrule.set(await this.rruleService.rruleFromString(this.value()));
+            }
+        }, ...(ngDevMode ? [{ debugName: "eff" }] : []));
+    }
+    ngOnInit() {
+        this.timeZone.set(Intl.DateTimeFormat().resolvedOptions().timeZone);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRrulePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXRrulePreviewComponent, isStandalone: true, selector: "ax-rrule-preview", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, repeat: { classPropertyName: "repeat", publicName: "repeat", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="ax-flex ax-flex-col ax-gap-4 ax-rounded-md ax-border ax-p-4">
+      <div>
+        <ax-label>{{ 'rrule.text' | translate: { scope: 'common' } | async }}</ax-label>
+        <code class="ax-mt-2 ax-block ax-rounded ax-bg-surface ax-p-2">
+          {{ text() }}
+        </code>
+      </div>
+      <div>
+        <ax-label>{{ 'rrule.string' | translate: { scope: 'common' } | async }}</ax-label>
+        <code class="ax-mt-2 ax-block ax-rounded ax-bg-surface ax-p-2">
+          {{ string() }}
+        </code>
+      </div>
+      <div>
+        <ax-label>{{
+          'rrule.occurrences' | translate: { scope: 'common', params: { repeat: repeat() } } | async
+        }}</ax-label>
+        <div class="ax-mt-2 ax-max-h-64 ax-overflow-y-auto">
+          @for (date of dates(); track $index) {
+            <code class="ax-block ax-bg-surface ax-p-1 even:ax-bg-lighter">
+              {{ date | date: format() : timeZone() }}
+            </code>
+          }
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRrulePreviewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-rrule-preview',
+                    template: `
+    <div class="ax-flex ax-flex-col ax-gap-4 ax-rounded-md ax-border ax-p-4">
+      <div>
+        <ax-label>{{ 'rrule.text' | translate: { scope: 'common' } | async }}</ax-label>
+        <code class="ax-mt-2 ax-block ax-rounded ax-bg-surface ax-p-2">
+          {{ text() }}
+        </code>
+      </div>
+      <div>
+        <ax-label>{{ 'rrule.string' | translate: { scope: 'common' } | async }}</ax-label>
+        <code class="ax-mt-2 ax-block ax-rounded ax-bg-surface ax-p-2">
+          {{ string() }}
+        </code>
+      </div>
+      <div>
+        <ax-label>{{
+          'rrule.occurrences' | translate: { scope: 'common', params: { repeat: repeat() } } | async
+        }}</ax-label>
+        <div class="ax-mt-2 ax-max-h-64 ax-overflow-y-auto">
+          @for (date of dates(); track $index) {
+            <code class="ax-block ax-bg-surface ax-p-1 even:ax-bg-lighter">
+              {{ date | date: format() : timeZone() }}
+            </code>
+          }
+        </div>
+      </div>
+    </div>
+  `,
+                    imports: [AXLabelModule, DatePipe, AXTranslationModule, AsyncPipe],
+                }]
+        }] });
+
 const freqs = [
     { text: 'Yearly', value: 0 },
     { text: 'Monthly', value: 1 },
@@ -70,53 +204,6 @@ const setpos = [
     ...Array.from({ length: 366 }, (_, i) => i + 1),
 ];
 
-class AXRruleService {
-    async rruleFromOptions(options) {
-        // eslint-disable-next-line @nx/enforce-module-boundaries
-        const { RRule } = await import('rrule');
-        return new RRule(options);
-    }
-    async rruleFromString(ruleString) {
-        // eslint-disable-next-line @nx/enforce-module-boundaries
-        const { RRule } = await import('rrule');
-        return RRule.fromString(ruleString);
-    }
-    async rruleFromText(ruleText) {
-        // eslint-disable-next-line @nx/enforce-module-boundaries
-        const { RRule } = await import('rrule');
-        return RRule.fromText(ruleText);
-    }
-    rruleToOptions(rule) {
-        return rule.options;
-    }
-    rruleToString(rule) {
-        return rule.toString();
-    }
-    rruleToText(rule) {
-        return rule.toText();
-    }
-    rruleGetAll(rule, limit = 500) {
-        return rule.all((d, l) => l < limit);
-    }
-    rruleGetBetween(rule, after, before, inclusive = false) {
-        return rule.between(after, before, inclusive);
-    }
-    rruleGetBefore(rule, date, inclusive = false) {
-        return rule.before(date, inclusive);
-    }
-    rruleGetAfter(rule, date, inclusive = false) {
-        return rule.after(date, inclusive);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXRruleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXRruleService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXRruleService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 const defaultOptions = {
     freq: 2,
     dtstart: null,
@@ -166,45 +253,83 @@ class AXRruleComponent {
         // public all = computed(() => this.rruleService.rruleGetAll(this.rrule()));
         this.rruleService = inject(AXRruleService);
         this._isUpdating = false;
-        this.#valueEffect = effect(async () => {
-            const value = this.value();
-            console.log('valueEffect', value);
-            if (value) {
-                if (this._isUpdating) {
-                    this._isUpdating = false;
-                    return;
+        this._applyToken = 0;
+        this.#valueEffect = effect(() => {
+            const incoming = this.value();
+            if (this._isUpdating) {
+                this._isUpdating = false;
+                return;
+            }
+            this._scheduleApplyIncoming(incoming);
+        }, ...(ngDevMode ? [{ debugName: "#valueEffect" }] : []));
+    }
+    #valueEffect;
+    _scheduleApplyIncoming(incoming) {
+        const token = ++this._applyToken;
+        // Defer to microtask to avoid doing async work directly inside effect
+        Promise.resolve().then(() => this._applyIncomingAsync(incoming, token));
+    }
+    async _applyIncomingAsync(incoming, token) {
+        try {
+            let rrule;
+            let newOptions;
+            if (incoming) {
+                if (typeof incoming === 'string') {
+                    rrule = await this.rruleService.rruleFromString(incoming);
+                    newOptions = this._clearOptions({ ...rrule.options }, incoming);
+                }
+                else {
+                    rrule = await this.rruleService.rruleFromOptions(incoming);
+                    newOptions = { ...rrule.options };
                 }
-                untracked(async () => {
-                    if (typeof value === 'string') {
-                        const rrule = await this.rruleService.rruleFromString(value);
-                        this.rrule.set(rrule);
-                        const newOptions = this._clearOptions({ ...rrule.options }, value);
-                        this.options.set(newOptions);
-                    }
-                    else {
-                        const rrule = await this.rruleService.rruleFromOptions(value);
-                        this.rrule.set(rrule);
-                        this.options.set({ ...rrule.options });
-                    }
-                });
             }
             else {
-                const rrule = await this.rruleService.rruleFromString(defaultRrule);
+                rrule = await this.rruleService.rruleFromString(defaultRrule);
+                newOptions = this._clearOptions({ ...rrule.options }, defaultRrule);
+            }
+            // Only apply the latest scheduled update
+            if (token !== this._applyToken)
+                return;
+            untracked(() => {
                 this.rrule.set(rrule);
-                const newOptions = this._clearOptions({ ...rrule.options }, defaultRrule);
                 this.options.set(newOptions);
+                this._emitAll();
+            });
+        }
+        catch {
+            // Swallow errors to avoid breaking the reactive graph; consider surfacing via output events if needed
+        }
+    }
+    _emitAll() {
+        this.rruleChange.emit(this.rrule());
+        this.optionsChange.emit(this.options());
+        this.stringChange.emit(this.string());
+        this.textChange.emit(this.text());
+    }
+    _areOptionValuesEqual(a, b) {
+        if (a === b)
+            return true;
+        if (a == null || b == null)
+            return a === b;
+        // Compare Date
+        if (a instanceof Date && b instanceof Date)
+            return a.getTime() === b.getTime();
+        // Compare arrays of primitives
+        if (Array.isArray(a) && Array.isArray(b)) {
+            if (a.length !== b.length)
+                return false;
+            for (let i = 0; i < a.length; i++) {
+                if (a[i] !== b[i])
+                    return false;
             }
-            this.rruleChange.emit(this.rrule());
-            this.optionsChange.emit(this.options());
-            this.stringChange.emit(this.string());
-            this.textChange.emit(this.text());
-        }, ...(ngDevMode ? [{ debugName: "#valueEffect" }] : []));
+            return true;
+        }
+        return false;
     }
-    #valueEffect;
     _clearOptions(options, rule) {
         const upperCaseRule = rule.toUpperCase();
         if (!upperCaseRule.includes('DTSTART')) {
-            options.dtstart = new Date();
+            options.dtstart = this.options().dtstart ?? new Date();
         }
         if (!upperCaseRule.includes('BYHOUR')) {
             options.byhour = [];
@@ -225,15 +350,16 @@ class AXRruleComponent {
             options.byweekday = [];
         }
         if (!upperCaseRule.includes('TZID')) {
-            const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-            options.tzid = userTimeZone;
+            const currentTz = this.options().tzid;
+            const userTimeZone = Intl?.DateTimeFormat?.().resolvedOptions?.().timeZone;
+            options.tzid = currentTz ?? userTimeZone ?? null;
         }
         return options;
     }
     async updateOption(key, value) {
-        if (this.options()[key] === value)
+        const current = this.options()[key];
+        if (this._areOptionValuesEqual(current, value))
             return;
-        console.log('updateOption', key, value);
         this.options.update((opts) => ({ ...opts, [key]: value }));
         const newRrule = await this.rruleService.rruleFromOptions(this.options());
         this.rrule.set(newRrule);
@@ -244,10 +370,7 @@ class AXRruleComponent {
         else {
             this.value.set(this.options());
         }
-        this.rruleChange.emit(newRrule);
-        this.optionsChange.emit(this.options());
-        this.stringChange.emit(this.string());
-        this.textChange.emit(this.text());
+        this._emitAll();
     }
     async resetOptions() {
         this.options.set({ ...defaultOptions });
@@ -260,15 +383,12 @@ class AXRruleComponent {
         else {
             this.value.set(this.options());
         }
-        this.rruleChange.emit(newRrule);
-        this.optionsChange.emit(this.options());
-        this.stringChange.emit(this.string());
-        this.textChange.emit(this.text());
+        this._emitAll();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXRruleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: AXRruleComponent, isStandalone: true, selector: "ax-rrule", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rruleChange: "rruleChange", optionsChange: "optionsChange", stringChange: "stringChange", textChange: "textChange" }, ngImport: i0, template: "<div class=\"ax-rrule-container ax-grid ax-grid-cols-1 ax-gap-4 md:ax-grid-cols-2 lg:ax-grid-cols-3\">\n  <!-- General -->\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-rounded-md ax-border ax-p-4\">\n    <div class=\"ax-text-lg ax-font-semibold\">{{ 'rrule.general' | translate: { scope: 'common' } | async }}</div>\n\n    <div>\n      <ax-label>{{ 'rrule.freq' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-selection-list\n        valueField=\"value\"\n        textField=\"text\"\n        name=\"freq\"\n        [items]=\"freqs\"\n        [ngModel]=\"options().freq\"\n        (ngModelChange)=\"updateOption('freq', $event)\"\n      ></ax-selection-list>\n    </div>\n\n    <div>\n      <ax-label>{{ 'rrule.dtstart' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-datetime-box\n        name=\"dtstart\"\n        [ngModel]=\"options().dtstart\"\n        (ngModelChange)=\"updateOption('dtstart', $event)\"\n      ></ax-datetime-box>\n    </div>\n\n    <div>\n      <ax-label>{{ 'rrule.until' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-datetime-box\n        name=\"until\"\n        [ngModel]=\"options().until\"\n        (ngModelChange)=\"updateOption('until', $event)\"\n      ></ax-datetime-box>\n    </div>\n\n    <div>\n      <ax-label>{{ 'rrule.count' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-number-box\n        name=\"count\"\n        [ngModel]=\"options().count\"\n        (ngModelChange)=\"updateOption('count', $event)\"\n        [minValue]=\"1\"\n      ></ax-number-box>\n    </div>\n\n    <div>\n      <ax-label>{{ 'rrule.interval' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-number-box\n        name=\"interval\"\n        [ngModel]=\"options().interval\"\n        (ngModelChange)=\"updateOption('interval', $event)\"\n        [minValue]=\"1\"\n      ></ax-number-box>\n    </div>\n\n    <div>\n      <ax-label>{{ 'rrule.tzid' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"tzid\"\n        [dataSource]=\"timezones\"\n        [ngModel]=\"options().tzid\"\n        (ngModelChange)=\"updateOption('tzid', $event)\"\n      >\n        <ax-search-box></ax-search-box>\n      </ax-select-box>\n    </div>\n  </div>\n\n  <!-- By Weekday -->\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-rounded-md ax-border ax-p-4\">\n    <div class=\"ax-text-lg ax-font-semibold\">{{ 'rrule.by-weekday' | translate: { scope: 'common' } | async }}</div>\n    <div>\n      <ax-label>{{ 'rrule.wkst' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-selection-list\n        valueField=\"value\"\n        textField=\"text\"\n        name=\"wkst\"\n        [items]=\"weekdays\"\n        [ngModel]=\"options().wkst\"\n        (ngModelChange)=\"updateOption('wkst', $event)\"\n      ></ax-selection-list>\n    </div>\n    <div>\n      <ax-label>{{ 'rrule.by-weekday-rule' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-selection-list\n        valueField=\"value\"\n        textField=\"text\"\n        name=\"byweekday\"\n        [items]=\"weekdays\"\n        multiple=\"true\"\n        [ngModel]=\"options().byweekday\"\n        (ngModelChange)=\"updateOption('byweekday', $event)\"\n      ></ax-selection-list>\n    </div>\n  </div>\n\n  <!-- By Month -->\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-rounded-md ax-border ax-p-4\">\n    <div class=\"ax-text-lg ax-font-semibold\">{{ 'rrule.by-month' | translate: { scope: 'common' } | async }}</div>\n    <div>\n      <ax-label>{{ 'rrule.by-month-rule' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-selection-list\n        valueField=\"value\"\n        textField=\"text\"\n        name=\"bymonth\"\n        [items]=\"months\"\n        multiple=\"true\"\n        [ngModel]=\"options().bymonth\"\n        (ngModelChange)=\"updateOption('bymonth', $event)\"\n      ></ax-selection-list>\n    </div>\n    <div>\n      <ax-label>{{ 'rrule.by-month-day' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"bymonthday\"\n        [dataSource]=\"monthdays\"\n        multiple=\"true\"\n        [ngModel]=\"options().bymonthday\"\n        (ngModelChange)=\"updateOption('bymonthday', $event)\"\n      >\n      </ax-select-box>\n    </div>\n    <!-- <div>\n      <ax-label>By Negative Month Day (BYNMONTHDAY)</ax-label>\n      <ax-select-box\n        name=\"bynmonthday\"\n        [dataSource]=\"nmonthdays\"\n        multiple=\"true\"\n        [ngModel]=\"options().bynmonthday\"\n        (ngModelChange)=\"updateOption('bynmonthday', $event)\"\n      >\n      </ax-select-box>\n    </div> -->\n  </div>\n\n  <!-- By Year -->\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-rounded-md ax-border ax-p-4\">\n    <div class=\"ax-text-lg ax-font-semibold\">{{ 'rrule.by-year' | translate: { scope: 'common' } | async }}</div>\n    <div>\n      <ax-label>{{ 'rrule.by-year-day' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"byyearday\"\n        [dataSource]=\"yeardays\"\n        multiple=\"true\"\n        [ngModel]=\"options().byyearday\"\n        (ngModelChange)=\"updateOption('byyearday', $event)\"\n      >\n      </ax-select-box>\n    </div>\n    <div>\n      <ax-label>{{ 'rrule.by-week-no' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"byweekno\"\n        [dataSource]=\"weeknos\"\n        multiple=\"true\"\n        [ngModel]=\"options().byweekno\"\n        (ngModelChange)=\"updateOption('byweekno', $event)\"\n      >\n      </ax-select-box>\n    </div>\n  </div>\n\n  <!-- By Time -->\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-rounded-md ax-border ax-p-4\">\n    <div class=\"ax-text-lg ax-font-semibold\">{{ 'rrule.by-time' | translate: { scope: 'common' } | async }}</div>\n    <div>\n      <ax-label>{{ 'rrule.by-hour' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"byhour\"\n        [dataSource]=\"hours\"\n        multiple=\"true\"\n        [ngModel]=\"options().byhour\"\n        (ngModelChange)=\"updateOption('byhour', $event)\"\n      >\n      </ax-select-box>\n    </div>\n    <div>\n      <ax-label>{{ 'rrule.by-minute' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"byminute\"\n        [dataSource]=\"minutes\"\n        multiple=\"true\"\n        [ngModel]=\"options().byminute\"\n        (ngModelChange)=\"updateOption('byminute', $event)\"\n      >\n      </ax-select-box>\n    </div>\n    <div>\n      <ax-label>{{ 'rrule.by-second' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"bysecond\"\n        [dataSource]=\"seconds\"\n        multiple=\"true\"\n        [ngModel]=\"options().bysecond\"\n        (ngModelChange)=\"updateOption('bysecond', $event)\"\n      >\n      </ax-select-box>\n    </div>\n  </div>\n\n  <!-- Advanced -->\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-rounded-md ax-border ax-p-4\">\n    <div class=\"ax-text-lg ax-font-semibold\">{{ 'rrule.advanced' | translate: { scope: 'common' } | async }}</div>\n    <div>\n      <ax-label>{{ 'rrule.by-set-pos' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"bysetpos\"\n        [dataSource]=\"setpos\"\n        multiple=\"true\"\n        [ngModel]=\"options().bysetpos\"\n        (ngModelChange)=\"updateOption('bysetpos', $event)\"\n        [disabled]=\"true\"\n      >\n      </ax-select-box>\n    </div>\n  </div>\n</div>\n\n<div class=\"ax-flex ax-justify-end ax-py-4\">\n  <ax-button [text]=\"'rrule.reset' | translate: { scope: 'common' } | async\" (click)=\"resetOptions()\"></ax-button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i2.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "calendar", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i3.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i4.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i6.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i7.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i8.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRruleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXRruleComponent, isStandalone: true, selector: "ax-rrule", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rruleChange: "rruleChange", optionsChange: "optionsChange", stringChange: "stringChange", textChange: "textChange" }, ngImport: i0, template: "<div class=\"ax-rrule-container ax-grid ax-grid-cols-1 ax-gap-4 md:ax-grid-cols-2 lg:ax-grid-cols-3\">\n  <!-- General -->\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-rounded-md ax-border ax-p-4\">\n    <div class=\"ax-text-lg ax-font-semibold\">{{ 'rrule.general' | translate: { scope: 'common' } | async }}</div>\n\n    <div>\n      <ax-label>{{ 'rrule.freq' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-selection-list\n        valueField=\"value\"\n        textField=\"text\"\n        name=\"freq\"\n        [items]=\"freqs\"\n        [ngModel]=\"options().freq\"\n        (ngModelChange)=\"updateOption('freq', $event)\"\n      ></ax-selection-list>\n    </div>\n\n    <div>\n      <ax-label>{{ 'rrule.dtstart' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-datetime-box\n        name=\"dtstart\"\n        [ngModel]=\"options().dtstart\"\n        (ngModelChange)=\"updateOption('dtstart', $event)\"\n      ></ax-datetime-box>\n    </div>\n\n    <div>\n      <ax-label>{{ 'rrule.until' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-datetime-box\n        name=\"until\"\n        [ngModel]=\"options().until\"\n        (ngModelChange)=\"updateOption('until', $event)\"\n      ></ax-datetime-box>\n    </div>\n\n    <div>\n      <ax-label>{{ 'rrule.count' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-number-box\n        name=\"count\"\n        [ngModel]=\"options().count\"\n        (ngModelChange)=\"updateOption('count', $event)\"\n        [minValue]=\"1\"\n      ></ax-number-box>\n    </div>\n\n    <div>\n      <ax-label>{{ 'rrule.interval' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-number-box\n        name=\"interval\"\n        [ngModel]=\"options().interval\"\n        (ngModelChange)=\"updateOption('interval', $event)\"\n        [minValue]=\"1\"\n      ></ax-number-box>\n    </div>\n\n    <div>\n      <ax-label>{{ 'rrule.tzid' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"tzid\"\n        [dataSource]=\"timezones\"\n        [ngModel]=\"options().tzid\"\n        (ngModelChange)=\"updateOption('tzid', $event)\"\n      >\n        <ax-search-box></ax-search-box>\n      </ax-select-box>\n    </div>\n  </div>\n\n  <!-- By Weekday -->\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-rounded-md ax-border ax-p-4\">\n    <div class=\"ax-text-lg ax-font-semibold\">{{ 'rrule.by-weekday' | translate: { scope: 'common' } | async }}</div>\n    <div>\n      <ax-label>{{ 'rrule.wkst' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-selection-list\n        valueField=\"value\"\n        textField=\"text\"\n        name=\"wkst\"\n        [items]=\"weekdays\"\n        [ngModel]=\"options().wkst\"\n        (ngModelChange)=\"updateOption('wkst', $event)\"\n      ></ax-selection-list>\n    </div>\n    <div>\n      <ax-label>{{ 'rrule.by-weekday-rule' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-selection-list\n        valueField=\"value\"\n        textField=\"text\"\n        name=\"byweekday\"\n        [items]=\"weekdays\"\n        multiple=\"true\"\n        [ngModel]=\"options().byweekday\"\n        (ngModelChange)=\"updateOption('byweekday', $event)\"\n      ></ax-selection-list>\n    </div>\n  </div>\n\n  <!-- By Month -->\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-rounded-md ax-border ax-p-4\">\n    <div class=\"ax-text-lg ax-font-semibold\">{{ 'rrule.by-month' | translate: { scope: 'common' } | async }}</div>\n    <div>\n      <ax-label>{{ 'rrule.by-month-rule' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-selection-list\n        valueField=\"value\"\n        textField=\"text\"\n        name=\"bymonth\"\n        [items]=\"months\"\n        multiple=\"true\"\n        [ngModel]=\"options().bymonth\"\n        (ngModelChange)=\"updateOption('bymonth', $event)\"\n      ></ax-selection-list>\n    </div>\n    <div>\n      <ax-label>{{ 'rrule.by-month-day' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"bymonthday\"\n        [dataSource]=\"monthdays\"\n        multiple=\"true\"\n        [ngModel]=\"options().bymonthday\"\n        (ngModelChange)=\"updateOption('bymonthday', $event)\"\n      >\n      </ax-select-box>\n    </div>\n    <!-- <div>\n      <ax-label>By Negative Month Day (BYNMONTHDAY)</ax-label>\n      <ax-select-box\n        name=\"bynmonthday\"\n        [dataSource]=\"nmonthdays\"\n        multiple=\"true\"\n        [ngModel]=\"options().bynmonthday\"\n        (ngModelChange)=\"updateOption('bynmonthday', $event)\"\n      >\n      </ax-select-box>\n    </div> -->\n  </div>\n\n  <!-- By Year -->\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-rounded-md ax-border ax-p-4\">\n    <div class=\"ax-text-lg ax-font-semibold\">{{ 'rrule.by-year' | translate: { scope: 'common' } | async }}</div>\n    <div>\n      <ax-label>{{ 'rrule.by-year-day' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"byyearday\"\n        [dataSource]=\"yeardays\"\n        multiple=\"true\"\n        [ngModel]=\"options().byyearday\"\n        (ngModelChange)=\"updateOption('byyearday', $event)\"\n      >\n      </ax-select-box>\n    </div>\n    <div>\n      <ax-label>{{ 'rrule.by-week-no' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"byweekno\"\n        [dataSource]=\"weeknos\"\n        multiple=\"true\"\n        [ngModel]=\"options().byweekno\"\n        (ngModelChange)=\"updateOption('byweekno', $event)\"\n      >\n      </ax-select-box>\n    </div>\n  </div>\n\n  <!-- By Time -->\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-rounded-md ax-border ax-p-4\">\n    <div class=\"ax-text-lg ax-font-semibold\">{{ 'rrule.by-time' | translate: { scope: 'common' } | async }}</div>\n    <div>\n      <ax-label>{{ 'rrule.by-hour' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"byhour\"\n        [dataSource]=\"hours\"\n        multiple=\"true\"\n        [ngModel]=\"options().byhour\"\n        (ngModelChange)=\"updateOption('byhour', $event)\"\n      >\n      </ax-select-box>\n    </div>\n    <div>\n      <ax-label>{{ 'rrule.by-minute' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"byminute\"\n        [dataSource]=\"minutes\"\n        multiple=\"true\"\n        [ngModel]=\"options().byminute\"\n        (ngModelChange)=\"updateOption('byminute', $event)\"\n      >\n      </ax-select-box>\n    </div>\n    <div>\n      <ax-label>{{ 'rrule.by-second' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"bysecond\"\n        [dataSource]=\"seconds\"\n        multiple=\"true\"\n        [ngModel]=\"options().bysecond\"\n        (ngModelChange)=\"updateOption('bysecond', $event)\"\n      >\n      </ax-select-box>\n    </div>\n  </div>\n\n  <!-- Advanced -->\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-rounded-md ax-border ax-p-4\">\n    <div class=\"ax-text-lg ax-font-semibold\">{{ 'rrule.advanced' | translate: { scope: 'common' } | async }}</div>\n    <div>\n      <ax-label>{{ 'rrule.by-set-pos' | translate: { scope: 'common' } | async }}</ax-label>\n      <ax-select-box\n        name=\"bysetpos\"\n        [dataSource]=\"setpos\"\n        multiple=\"true\"\n        [ngModel]=\"options().bysetpos\"\n        (ngModelChange)=\"updateOption('bysetpos', $event)\"\n        [disabled]=\"true\"\n      >\n      </ax-select-box>\n    </div>\n  </div>\n</div>\n\n<div class=\"ax-flex ax-justify-end ax-py-4\">\n  <ax-button [text]=\"'rrule.reset' | translate: { scope: 'common' } | async\" (click)=\"resetOptions()\"></ax-button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i2$1.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i3.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i4.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i7.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i8.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXRruleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRruleComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'ax-rrule', imports: [
                         CommonModule,
@@ -289,5 +409,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXRruleComponent, AXRruleService, defaultOptions, defaultRrule };
+export { AXRruleComponent, AXRrulePreviewComponent, AXRruleService, defaultOptions, defaultRrule };
 //# sourceMappingURL=acorex-components-rrule.mjs.map