@acorex/components 21.0.2-next.40 → 21.0.2-next.42

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.
Files changed (15) hide show
  1. package/fesm2022/acorex-components-avatar.mjs +4 -3
  2. package/fesm2022/acorex-components-avatar.mjs.map +1 -1
  3. package/fesm2022/acorex-components-calendar.mjs +72 -14
  4. package/fesm2022/acorex-components-calendar.mjs.map +1 -1
  5. package/fesm2022/acorex-components-data-pager.mjs +2 -2
  6. package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
  7. package/fesm2022/acorex-components-datetime-picker.mjs +1 -1
  8. package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
  9. package/fesm2022/acorex-components-otp.mjs +36 -12
  10. package/fesm2022/acorex-components-otp.mjs.map +1 -1
  11. package/fesm2022/acorex-components-scheduler.mjs +1 -1
  12. package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
  13. package/package.json +3 -3
  14. package/types/acorex-components-calendar.d.ts +27 -6
  15. package/types/acorex-components-otp.d.ts +18 -1
package/fesm2022/acorex-components-otp.mjs CHANGED
@@ -18,6 +18,13 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
18
18
  constructor() {
19
19
  super();
20
20
  this.type = input('number', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
21
+ /**
22
+ * Controls how entered digits are displayed in each input.
23
+ * - `number`: shows the actual digit
24
+ * - `dot`: shows a dot character
25
+ * - `star`: shows an asterisk character
26
+ */
27
+ this.mode = input('number', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
21
28
  /**
22
29
  * Holds the length of the OTP input field.
23
30
  */
@@ -64,12 +71,12 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
64
71
  reset() {
65
72
  this.inputValues = [];
66
73
  for (let index = 0; index < this.length(); index++) {
67
- this.inputValues.push(' ');
74
+ this.inputValues.push('');
68
75
  }
69
76
  }
70
77
  /** @ignore */
71
78
  _handleOnInput(event, i) {
72
- const inputs = this.getHostElement().querySelectorAll('.ax-input');
79
+ const inputs = this.getHostElement().querySelectorAll('ax-otp .ax-input');
73
80
  if (this.type() === 'number') {
74
81
  const numberRegex = /^\d+$/;
75
82
  if (!numberRegex.test(event.target.value)) {
@@ -96,14 +103,31 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
96
103
  return value;
97
104
  }
98
105
  /** @ignore */
106
+ displayValue(i) {
107
+ const val = this.inputValues[i];
108
+ return val && val.trim() ? val : '';
109
+ }
110
+ /** @ignore */
111
+ isMasked() {
112
+ return this.mode() !== 'number';
113
+ }
114
+ /** @ignore */
115
+ hasValue(i) {
116
+ return !!this.displayValue(i);
117
+ }
118
+ /** @ignore */
119
+ _maskCharacter() {
120
+ return this.mode() === 'dot' ? '•' : '*';
121
+ }
122
+ /** @ignore */
99
123
  calcFontSize() {
100
- const size = this.getHostElement().querySelector('.ax-input')?.clientWidth;
124
+ const size = this.getHostElement().querySelector('ax-otp .ax-input')?.clientWidth;
101
125
  const fontSize = size * 0.5;
102
126
  this.getHostElement().style.setProperty('--font-size', fontSize + 'px');
103
127
  }
104
128
  /** @ignore */
105
129
  _handleOnKeyDown(event, i) {
106
- const inputs = this.getHostElement().querySelectorAll('.ax-input');
130
+ const inputs = this.getHostElement().querySelectorAll('ax-otp .ax-input');
107
131
  switch (event.key) {
108
132
  case 'Backspace':
109
133
  if (this.readonly || this.disabled)
@@ -113,7 +137,7 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
113
137
  inputs[i - 1].focus();
114
138
  event.preventDefault();
115
139
  }
116
- this.inputValues[i] = ' ';
140
+ this.inputValues[i] = '';
117
141
  this.commitValue(this.inputValues.join(''), true);
118
142
  inputs[i].value = '';
119
143
  break;
@@ -145,7 +169,7 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
145
169
  }
146
170
  /** @ignore */
147
171
  _handleOnPaste(event) {
148
- const inputs = this.getHostElement().querySelectorAll('.ax-input');
172
+ const inputs = this.getHostElement().querySelectorAll('ax-otp .ax-input');
149
173
  const data = event.clipboardData.getData('text');
150
174
  const isNumber = /\d+/;
151
175
  if (isNumber.test(data)) {
@@ -160,14 +184,14 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
160
184
  }
161
185
  /** @ignore */
162
186
  _handleFocus(i) {
163
- const inputs = this.getHostElement().querySelectorAll('.ax-input');
187
+ const inputs = this.getHostElement().querySelectorAll('ax-otp .ax-input');
164
188
  inputs[i].select();
165
189
  }
166
190
  /** @ignore */
167
191
  _emitOnComplete() {
168
192
  // TODO: Check Value delay
169
193
  setTimeout(() => {
170
- const filteredValues = this.inputValues.filter((c) => c && c !== ' ');
194
+ const filteredValues = this.inputValues.filter((c) => !!c);
171
195
  const value = filteredValues.join('').trim();
172
196
  this.commitValue(value, true);
173
197
  this.onCompleted.emit({
@@ -178,7 +202,7 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
178
202
  });
179
203
  }
180
204
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
181
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXOtpComponent, isStandalone: true, selector: "ax-otp", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", disabledChange: "disabledChange", length: "lengthChange", onCompleted: "onCompleted" }, providers: [
205
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXOtpComponent, isStandalone: true, selector: "ax-otp", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", disabledChange: "disabledChange", length: "lengthChange", onCompleted: "onCompleted" }, providers: [
182
206
  {
183
207
  provide: NG_VALUE_ACCESSOR,
184
208
  useExisting: forwardRef(() => AXOtpComponent),
@@ -190,7 +214,7 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
190
214
  },
191
215
  { provide: AXValuableComponent, useExisting: AXOtpComponent },
192
216
  { provide: AXFocusableComponent, useExisting: AXOtpComponent },
193
- ], usesInheritance: true, ngImport: i0, template: "<div\n dir=\"ltr\"\n (paste)=\"_handleOnPaste($event)\"\n class=\"ax-otp-input-container ax-editor-container ax-default {{ look }}\"\n [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n @for (input of inputs(); let i = $index; track i) {\n <input\n [name]=\"name\"\n [type]=\"type()\"\n maxlength=\"1\"\n class=\"ax-input\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (focus)=\"_handleFocus(i)\"\n [ngModel]=\"inputValues[i]\"\n [attr.disabled]=\"disabled\"\n (input)=\"_handleOnInput($event, i)\"\n [class.ax-state-disabled]=\"disabled\"\n (keydown)=\"_handleOnKeyDown($event, i)\"\n [class.ax-state-error]=\"state === 'error'\"\n [class.ax-state-success]=\"state === 'success'\"\n />\n }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}ax-otp input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}ax-otp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-otp input[type=number]{-moz-appearance:textfield}ax-otp .ax-editor-container{padding-inline:0!important;display:grid!important}ax-otp input{text-align:center;font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));padding:0}:is(ax-otp .ax-solid,ax-otp .ax-outline) input{border-color:var(--color-border-default);text-align:center}:is(ax-otp .ax-solid,ax-otp .ax-outline) input:not(:last-child){border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
217
+ ], usesInheritance: true, ngImport: i0, template: "<div\n dir=\"ltr\"\n (paste)=\"_handleOnPaste($event)\"\n class=\"ax-otp-input-container\"\n [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n @for (input of inputs(); let i = $index; track i) {\n <div\n class=\"ax-otp-input-cell ax-editor-container ax-default {{ look }}\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-error]=\"state === 'error'\"\n [class.ax-state-success]=\"state === 'success'\"\n >\n <input\n [name]=\"name\"\n [type]=\"type()\"\n maxlength=\"1\"\n class=\"ax-input\"\n [class.ax-otp-masked]=\"isMasked()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (focus)=\"_handleFocus(i)\"\n [ngModel]=\"displayValue(i)\"\n [attr.disabled]=\"disabled\"\n (input)=\"_handleOnInput($event, i)\"\n [class.ax-state-disabled]=\"disabled\"\n (keydown)=\"_handleOnKeyDown($event, i)\"\n [class.ax-state-error]=\"state === 'error'\"\n [class.ax-state-success]=\"state === 'success'\"\n />\n @if (isMasked() && hasValue(i)) {\n <span\n class=\"ax-otp-mask\"\n [class.ax-otp-mask-dot]=\"mode() === 'dot'\"\n [class.ax-otp-mask-star]=\"mode() === 'star'\"\n aria-hidden=\"true\"\n >{{ _maskCharacter() }}</span>\n }\n </div>\n }\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-otp{display:block}ax-otp .ax-otp-input-container{gap:.5rem;display:grid;position:relative}ax-otp .ax-otp-input-cell{display:block;position:relative}ax-otp .ax-otp-input-cell.ax-editor-container{height:auto;min-height:0;overflow:initial;padding:0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-otp-mask{font-size:var(--font-size,2rem);pointer-events:none;place-items:center;line-height:1;display:grid;position:absolute;top:0;right:0;bottom:0;left:0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-otp-mask.ax-otp-mask-star{font-size:calc(var(--font-size,2rem) * .85);transform:translateY(.12em)}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input{aspect-ratio:1;text-align:center;width:100%;font-size:var(--font-size,2rem);padding:0;overflow:hidden}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input.ax-otp-masked{color:#0000;caret-color:#0000}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input.ax-otp-masked::selection{color:#0000;background:0 0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input:read-only{cursor:text;opacity:.75}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input:disabled{cursor:not-allowed;opacity:.5}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input[type=number]{-webkit-appearance:textfield;appearance:textfield}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
194
218
  }
195
219
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOtpComponent, decorators: [{
196
220
  type: Component,
@@ -206,8 +230,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
206
230
  },
207
231
  { provide: AXValuableComponent, useExisting: AXOtpComponent },
208
232
  { provide: AXFocusableComponent, useExisting: AXOtpComponent },
209
- ], imports: [NgStyle, FormsModule], template: "<div\n dir=\"ltr\"\n (paste)=\"_handleOnPaste($event)\"\n class=\"ax-otp-input-container ax-editor-container ax-default {{ look }}\"\n [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n @for (input of inputs(); let i = $index; track i) {\n <input\n [name]=\"name\"\n [type]=\"type()\"\n maxlength=\"1\"\n class=\"ax-input\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (focus)=\"_handleFocus(i)\"\n [ngModel]=\"inputValues[i]\"\n [attr.disabled]=\"disabled\"\n (input)=\"_handleOnInput($event, i)\"\n [class.ax-state-disabled]=\"disabled\"\n (keydown)=\"_handleOnKeyDown($event, i)\"\n [class.ax-state-error]=\"state === 'error'\"\n [class.ax-state-success]=\"state === 'success'\"\n />\n }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}ax-otp input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}ax-otp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-otp input[type=number]{-moz-appearance:textfield}ax-otp .ax-editor-container{padding-inline:0!important;display:grid!important}ax-otp input{text-align:center;font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));padding:0}:is(ax-otp .ax-solid,ax-otp .ax-outline) input{border-color:var(--color-border-default);text-align:center}:is(ax-otp .ax-solid,ax-otp .ax-outline) input:not(:last-child){border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
210
- }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }, { type: i0.Output, args: ["lengthChange"] }], onCompleted: [{ type: i0.Output, args: ["onCompleted"] }] } });
233
+ ], imports: [NgStyle, FormsModule], template: "<div\n dir=\"ltr\"\n (paste)=\"_handleOnPaste($event)\"\n class=\"ax-otp-input-container\"\n [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n @for (input of inputs(); let i = $index; track i) {\n <div\n class=\"ax-otp-input-cell ax-editor-container ax-default {{ look }}\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-error]=\"state === 'error'\"\n [class.ax-state-success]=\"state === 'success'\"\n >\n <input\n [name]=\"name\"\n [type]=\"type()\"\n maxlength=\"1\"\n class=\"ax-input\"\n [class.ax-otp-masked]=\"isMasked()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (focus)=\"_handleFocus(i)\"\n [ngModel]=\"displayValue(i)\"\n [attr.disabled]=\"disabled\"\n (input)=\"_handleOnInput($event, i)\"\n [class.ax-state-disabled]=\"disabled\"\n (keydown)=\"_handleOnKeyDown($event, i)\"\n [class.ax-state-error]=\"state === 'error'\"\n [class.ax-state-success]=\"state === 'success'\"\n />\n @if (isMasked() && hasValue(i)) {\n <span\n class=\"ax-otp-mask\"\n [class.ax-otp-mask-dot]=\"mode() === 'dot'\"\n [class.ax-otp-mask-star]=\"mode() === 'star'\"\n aria-hidden=\"true\"\n >{{ _maskCharacter() }}</span>\n }\n </div>\n }\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-otp{display:block}ax-otp .ax-otp-input-container{gap:.5rem;display:grid;position:relative}ax-otp .ax-otp-input-cell{display:block;position:relative}ax-otp .ax-otp-input-cell.ax-editor-container{height:auto;min-height:0;overflow:initial;padding:0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-otp-mask{font-size:var(--font-size,2rem);pointer-events:none;place-items:center;line-height:1;display:grid;position:absolute;top:0;right:0;bottom:0;left:0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-otp-mask.ax-otp-mask-star{font-size:calc(var(--font-size,2rem) * .85);transform:translateY(.12em)}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input{aspect-ratio:1;text-align:center;width:100%;font-size:var(--font-size,2rem);padding:0;overflow:hidden}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input.ax-otp-masked{color:#0000;caret-color:#0000}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input.ax-otp-masked::selection{color:#0000;background:0 0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input:read-only{cursor:text;opacity:.75}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input:disabled{cursor:not-allowed;opacity:.5}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input[type=number]{-webkit-appearance:textfield;appearance:textfield}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"] }]
234
+ }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }, { type: i0.Output, args: ["lengthChange"] }], onCompleted: [{ type: i0.Output, args: ["onCompleted"] }] } });
211
235
 
212
236
  class AXOtpModule {
213
237
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
package/fesm2022/acorex-components-otp.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"acorex-components-otp.mjs","sources":["../../../../packages/components/otp/src/lib/otp.class.ts","../../../../packages/components/otp/src/lib/otp.component.ts","../../../../packages/components/otp/src/lib/otp.component.html","../../../../packages/components/otp/src/lib/otp.module.ts","../../../../packages/components/otp/src/acorex-components-otp.ts"],"sourcesContent":["import { AXEvent } from '@acorex/cdk/common';\n\nexport class AXOtpCompletedEvent extends AXEvent {\n value: string;\n isCompleted: boolean;\n}\n","import {\n AXComponent,\n AXFocusableComponent,\n AXValuableComponent,\n MXLookComponent,\n MXValueComponent,\n} from '@acorex/cdk/common';\nimport { NgStyle } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n afterNextRender,\n computed,\n forwardRef,\n input,\n model,\n output,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\nimport { AXOtpCompletedEvent } from './otp.class';\n\n/**\n * @category\n * A component for OTP input fields with state management and custom styling support.\n */\n@Component({\n selector: 'ax-otp',\n templateUrl: './otp.component.html',\n styleUrls: ['./otp.component.compiled.css'],\n inputs: ['state', 'disabled', 'readonly', 'look', 'name'],\n outputs: ['stateChange', 'disabledChange'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AXOtpComponent),\n multi: true,\n },\n {\n provide: AXComponent,\n useExisting: AXOtpComponent,\n },\n { provide: AXValuableComponent, useExisting: AXOtpComponent },\n { provide: AXFocusableComponent, useExisting: AXOtpComponent },\n ],\n imports: [NgStyle, FormsModule],\n})\nexport class AXOtpComponent extends classes(MXValueComponent<string>, MXLookComponent) {\n type = input<'number' | 'text'>('number');\n\n /**\n * Holds the length of the OTP input field.\n */\n length = model<number>();\n\n /**\n * @event\n * Emits an event when the OTP input is completed.\n */\n onCompleted = output<AXOtpCompletedEvent>();\n\n /**\n * Stores the values entered in the OTP input fields.\n */\n protected inputValues: string[] = [];\n\n /**\n * Holds the input values as a signal.\n */\n protected inputs = computed(() => {\n this.calcFontSize();\n //\n return Array(this.length())\n .fill(1)\n .map((x, i) => i);\n });\n\n /** @ignore */\n constructor() {\n super();\n afterNextRender(() => {\n this.calcFontSize();\n this.mapValueToInputs();\n });\n }\n\n /**\n * Converts the value string to input values and updates the inputValues array.\n */\n mapValueToInputs() {\n this._emitOnComplete();\n if (!this.value) {\n return;\n }\n this.value.split('').map((v, i) => {\n this.inputValues[i] = v;\n });\n }\n\n /**\n * Resets the input values to an empty array.\n */\n override reset() {\n this.inputValues = [];\n for (let index = 0; index < this.length(); index++) {\n this.inputValues.push(' ');\n }\n }\n\n /** @ignore */\n protected _handleOnInput(event: any, i: number) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n if (this.type() === 'number') {\n const numberRegex = /^\\d+$/;\n if (!numberRegex.test(event.target.value)) {\n event.target.value = '';\n return;\n }\n }\n if (event.target.value.length > 1) {\n const currentValue = event.target.value;\n event.target.value = '';\n event.target.value = currentValue.slice(-1);\n }\n if (inputs[i + 1]) {\n inputs[i + 1].select();\n }\n this.inputValues[i] = event.target.value;\n this._emitOnComplete();\n }\n\n /** @ignore */\n override internalSetValue(value: any): string {\n if (value) {\n this.inputValues = value?.toString().split('') as any;\n }\n return value;\n }\n\n /** @ignore */\n protected calcFontSize() {\n const size = this.getHostElement().querySelector<HTMLInputElement>('.ax-input')?.clientWidth;\n const fontSize = size * 0.5;\n this.getHostElement().style.setProperty('--font-size', fontSize + 'px');\n }\n\n /** @ignore */\n protected _handleOnKeyDown(event: KeyboardEvent, i: number) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n switch (event.key) {\n case 'Backspace':\n if (this.readonly || this.disabled) return;\n inputs[i].value = '';\n if (inputs[i - 1]) {\n inputs[i - 1].focus();\n event.preventDefault();\n }\n this.inputValues[i] = ' ';\n this.commitValue(this.inputValues.join(''), true);\n inputs[i].value = '';\n break;\n\n case 'ArrowRight':\n if (inputs[i + 1]) {\n event.preventDefault();\n inputs[i + 1].select();\n }\n break;\n\n case 'ArrowLeft':\n if (inputs[i - 1]) {\n event.preventDefault();\n inputs[i - 1].select();\n }\n break;\n\n case 'Home':\n event.preventDefault();\n inputs[0].select();\n break;\n\n case 'End':\n event.preventDefault();\n inputs[this.length() - 1].select();\n break;\n\n case 'ArrowUp':\n case 'ArrowDown':\n event.preventDefault();\n break;\n }\n }\n\n /** @ignore */\n protected _handleOnPaste(event: ClipboardEvent) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n const data = event.clipboardData.getData('text');\n const isNumber = /\\d+/;\n\n if (isNumber.test(data)) {\n inputs[inputs.length - 1].focus();\n this.inputValues = [];\n for (let i = 0; i < inputs.length; i++) {\n this.inputValues[i] = data[i];\n }\n this._emitOnComplete();\n }\n\n event.preventDefault();\n }\n\n /** @ignore */\n protected _handleFocus(i) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n inputs[i].select();\n }\n\n /** @ignore */\n protected _emitOnComplete() {\n // TODO: Check Value delay\n setTimeout(() => {\n const filteredValues = this.inputValues.filter((c) => c && c !== ' ');\n const value = filteredValues.join('').trim();\n this.commitValue(value, true);\n this.onCompleted.emit({\n component: AXOtpComponent,\n value,\n isCompleted: filteredValues.length === this.length(),\n });\n });\n }\n}\n","<div\n dir=\"ltr\"\n (paste)=\"_handleOnPaste($event)\"\n class=\"ax-otp-input-container ax-editor-container ax-default {{ look }}\"\n [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n @for (input of inputs(); let i = $index; track i) {\n <input\n [name]=\"name\"\n [type]=\"type()\"\n maxlength=\"1\"\n class=\"ax-input\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (focus)=\"_handleFocus(i)\"\n [ngModel]=\"inputValues[i]\"\n [attr.disabled]=\"disabled\"\n (input)=\"_handleOnInput($event, i)\"\n [class.ax-state-disabled]=\"disabled\"\n (keydown)=\"_handleOnKeyDown($event, i)\"\n [class.ax-state-error]=\"state === 'error'\"\n [class.ax-state-success]=\"state === 'success'\"\n />\n }\n</div>\n","import { NgModule } from '@angular/core';\nimport { AXOtpComponent } from './otp.component';\n\n@NgModule({\n imports: [AXOtpComponent],\n exports: [AXOtpComponent],\n})\nexport class AXOtpModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"acorex-components-otp.mjs","sources":["../../../../packages/components/otp/src/lib/otp.class.ts","../../../../packages/components/otp/src/lib/otp.component.ts","../../../../packages/components/otp/src/lib/otp.component.html","../../../../packages/components/otp/src/lib/otp.module.ts","../../../../packages/components/otp/src/acorex-components-otp.ts"],"sourcesContent":["import { AXEvent } from '@acorex/cdk/common';\n\nexport type AXOtpMode = 'number' | 'dot' | 'star';\n\nexport class AXOtpCompletedEvent extends AXEvent {\n value: string;\n isCompleted: boolean;\n}\n","import {\n AXComponent,\n AXFocusableComponent,\n AXValuableComponent,\n MXLookComponent,\n MXValueComponent,\n} from '@acorex/cdk/common';\nimport { NgStyle } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n afterNextRender,\n computed,\n forwardRef,\n input,\n model,\n output,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\nimport { AXOtpCompletedEvent, AXOtpMode } from './otp.class';\n\n/**\n * @category\n * A component for OTP input fields with state management and custom styling support.\n */\n@Component({\n selector: 'ax-otp',\n templateUrl: './otp.component.html',\n styleUrls: ['./otp.component.compiled.css'],\n inputs: ['state', 'disabled', 'readonly', 'look', 'name'],\n outputs: ['stateChange', 'disabledChange'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AXOtpComponent),\n multi: true,\n },\n {\n provide: AXComponent,\n useExisting: AXOtpComponent,\n },\n { provide: AXValuableComponent, useExisting: AXOtpComponent },\n { provide: AXFocusableComponent, useExisting: AXOtpComponent },\n ],\n imports: [NgStyle, FormsModule],\n})\nexport class AXOtpComponent extends classes(MXValueComponent<string>, MXLookComponent) {\n type = input<'number' | 'text'>('number');\n\n /**\n * Controls how entered digits are displayed in each input.\n * - `number`: shows the actual digit\n * - `dot`: shows a dot character\n * - `star`: shows an asterisk character\n */\n mode = input<AXOtpMode>('number');\n\n /**\n * Holds the length of the OTP input field.\n */\n length = model<number>();\n\n /**\n * @event\n * Emits an event when the OTP input is completed.\n */\n onCompleted = output<AXOtpCompletedEvent>();\n\n /**\n * Stores the values entered in the OTP input fields.\n */\n protected inputValues: string[] = [];\n\n /**\n * Holds the input values as a signal.\n */\n protected inputs = computed(() => {\n this.calcFontSize();\n //\n return Array(this.length())\n .fill(1)\n .map((x, i) => i);\n });\n\n /** @ignore */\n constructor() {\n super();\n afterNextRender(() => {\n this.calcFontSize();\n this.mapValueToInputs();\n });\n }\n\n /**\n * Converts the value string to input values and updates the inputValues array.\n */\n mapValueToInputs() {\n this._emitOnComplete();\n if (!this.value) {\n return;\n }\n this.value.split('').map((v, i) => {\n this.inputValues[i] = v;\n });\n }\n\n /**\n * Resets the input values to an empty array.\n */\n override reset() {\n this.inputValues = [];\n for (let index = 0; index < this.length(); index++) {\n this.inputValues.push('');\n }\n }\n\n /** @ignore */\n protected _handleOnInput(event: any, i: number) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('ax-otp .ax-input');\n if (this.type() === 'number') {\n const numberRegex = /^\\d+$/;\n if (!numberRegex.test(event.target.value)) {\n event.target.value = '';\n return;\n }\n }\n if (event.target.value.length > 1) {\n const currentValue = event.target.value;\n event.target.value = '';\n event.target.value = currentValue.slice(-1);\n }\n if (inputs[i + 1]) {\n inputs[i + 1].select();\n }\n this.inputValues[i] = event.target.value;\n this._emitOnComplete();\n }\n\n /** @ignore */\n override internalSetValue(value: any): string {\n if (value) {\n this.inputValues = value?.toString().split('') as any;\n }\n return value;\n }\n\n /** @ignore */\n protected displayValue(i: number): string {\n const val = this.inputValues[i];\n return val && val.trim() ? val : '';\n }\n\n /** @ignore */\n protected isMasked(): boolean {\n return this.mode() !== 'number';\n }\n\n /** @ignore */\n protected hasValue(i: number): boolean {\n return !!this.displayValue(i);\n }\n\n /** @ignore */\n protected _maskCharacter(): string {\n return this.mode() === 'dot' ? '•' : '*';\n }\n\n /** @ignore */\n protected calcFontSize() {\n const size = this.getHostElement().querySelector<HTMLInputElement>('ax-otp .ax-input')?.clientWidth;\n const fontSize = size * 0.5;\n this.getHostElement().style.setProperty('--font-size', fontSize + 'px');\n }\n\n /** @ignore */\n protected _handleOnKeyDown(event: KeyboardEvent, i: number) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('ax-otp .ax-input');\n switch (event.key) {\n case 'Backspace':\n if (this.readonly || this.disabled) return;\n inputs[i].value = '';\n if (inputs[i - 1]) {\n inputs[i - 1].focus();\n event.preventDefault();\n }\n this.inputValues[i] = '';\n this.commitValue(this.inputValues.join(''), true);\n inputs[i].value = '';\n break;\n\n case 'ArrowRight':\n if (inputs[i + 1]) {\n event.preventDefault();\n inputs[i + 1].select();\n }\n break;\n\n case 'ArrowLeft':\n if (inputs[i - 1]) {\n event.preventDefault();\n inputs[i - 1].select();\n }\n break;\n\n case 'Home':\n event.preventDefault();\n inputs[0].select();\n break;\n\n case 'End':\n event.preventDefault();\n inputs[this.length() - 1].select();\n break;\n\n case 'ArrowUp':\n case 'ArrowDown':\n event.preventDefault();\n break;\n }\n }\n\n /** @ignore */\n protected _handleOnPaste(event: ClipboardEvent) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('ax-otp .ax-input');\n const data = event.clipboardData.getData('text');\n const isNumber = /\\d+/;\n\n if (isNumber.test(data)) {\n inputs[inputs.length - 1].focus();\n this.inputValues = [];\n for (let i = 0; i < inputs.length; i++) {\n this.inputValues[i] = data[i];\n }\n this._emitOnComplete();\n }\n\n event.preventDefault();\n }\n\n /** @ignore */\n protected _handleFocus(i) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('ax-otp .ax-input');\n inputs[i].select();\n }\n\n /** @ignore */\n protected _emitOnComplete() {\n // TODO: Check Value delay\n setTimeout(() => {\n const filteredValues = this.inputValues.filter((c) => !!c);\n const value = filteredValues.join('').trim();\n this.commitValue(value, true);\n this.onCompleted.emit({\n component: AXOtpComponent,\n value,\n isCompleted: filteredValues.length === this.length(),\n });\n });\n }\n}\n","<div\n dir=\"ltr\"\n (paste)=\"_handleOnPaste($event)\"\n class=\"ax-otp-input-container\"\n [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n @for (input of inputs(); let i = $index; track i) {\n <div\n class=\"ax-otp-input-cell ax-editor-container ax-default {{ look }}\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-error]=\"state === 'error'\"\n [class.ax-state-success]=\"state === 'success'\"\n >\n <input\n [name]=\"name\"\n [type]=\"type()\"\n maxlength=\"1\"\n class=\"ax-input\"\n [class.ax-otp-masked]=\"isMasked()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (focus)=\"_handleFocus(i)\"\n [ngModel]=\"displayValue(i)\"\n [attr.disabled]=\"disabled\"\n (input)=\"_handleOnInput($event, i)\"\n [class.ax-state-disabled]=\"disabled\"\n (keydown)=\"_handleOnKeyDown($event, i)\"\n [class.ax-state-error]=\"state === 'error'\"\n [class.ax-state-success]=\"state === 'success'\"\n />\n @if (isMasked() && hasValue(i)) {\n <span\n class=\"ax-otp-mask\"\n [class.ax-otp-mask-dot]=\"mode() === 'dot'\"\n [class.ax-otp-mask-star]=\"mode() === 'star'\"\n aria-hidden=\"true\"\n >{{ _maskCharacter() }}</span>\n }\n </div>\n }\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n<div class=\"ax-error-container\"></div>\n","import { NgModule } from '@angular/core';\nimport { AXOtpComponent } from './otp.component';\n\n@NgModule({\n imports: [AXOtpComponent],\n exports: [AXOtpComponent],\n})\nexport class AXOtpModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm2022/acorex-components-scheduler.mjs CHANGED
@@ -5118,7 +5118,7 @@ class AXSchedulerComponent extends NXComponent {
5118
5118
  this.onDataLoaded.emit();
5119
5119
  }
5120
5120
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
5121
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSchedulerComponent, isStandalone: true, selector: "ax-scheduler", inputs: { calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, startingDate: { classPropertyName: "startingDate", publicName: "startingDate", isSignal: true, isRequired: false, transformFunction: null }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: false, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: false, transformFunction: null }, hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, allowFullScreen: { classPropertyName: "allowFullScreen", publicName: "allowFullScreen", isSignal: true, isRequired: false, transformFunction: null }, multiDayViewDaysCount: { classPropertyName: "multiDayViewDaysCount", publicName: "multiDayViewDaysCount", isSignal: true, isRequired: false, transformFunction: null }, showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, resourceTemplate: { classPropertyName: "resourceTemplate", publicName: "resourceTemplate", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, holidays: { classPropertyName: "holidays", publicName: "holidays", isSignal: true, isRequired: false, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedView: "selectedViewChange", onDataLoaded: "onDataLoaded", onRangeChanged: "onRangeChanged", onSlotClicked: "onSlotClicked", onSlotDblClicked: "onSlotDblClicked", onSlotRightClick: "onSlotRightClick", onAppointmentDrop: "onAppointmentDrop", onActionClick: "onActionClick", onAppointmentClicked: "onAppointmentClicked", onAppointmentDblClicked: "onAppointmentDblClicked", onAppointmentRightClick: "onAppointmentRightClick" }, host: { properties: { "class.ax-rtl": "rtl()" } }, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXSchedulerComponent }], viewQueries: [{ propertyName: "viewModeSelectbox", first: true, predicate: AXSelectBoxComponent, descendants: true, isSignal: true }, { propertyName: "calendarPopover", first: true, predicate: ["calendarPopover"], descendants: true, isSignal: true }, { propertyName: "_calendarDayCellTemplate", first: true, predicate: ["calendarDayCellTemplate"], descendants: true, isSignal: true }, { propertyName: "_calendarMonthCellTemplate", first: true, predicate: ["calendarMonthCellTemplate"], descendants: true, isSignal: true }, { propertyName: "_calendarYearCellTemplate", first: true, predicate: ["calendarYearCellTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-container\">\n @if (hasHeader()) {\n <div class=\"ax-scheduler-header\">\n <div class=\"ax-scheduler-date\">\n <ax-button look=\"blank\" (onClick)=\"prevClick()\">\n <ax-icon\n class=\"ax-icon text-xl\"\n [class.ax-icon-chevron-left]=\"!rtl()\"\n [class.ax-icon-chevron-right]=\"rtl()\"\n ></ax-icon>\n </ax-button>\n <ax-button look=\"blank\" [text]=\"currentDateText()\" #date></ax-button>\n <ax-button look=\"blank\" (onClick)=\"nextClick()\">\n <ax-icon\n class=\"ax-icon text-xl\"\n [class.ax-icon-chevron-right]=\"!rtl()\"\n [class.ax-icon-chevron-left]=\"rtl()\"\n ></ax-icon>\n </ax-button>\n <ax-popover [target]=\"date\" #calendarPopover>\n <ax-calendar\n [type]=\"calendarType()\"\n [depth]=\"calendarDepth()\"\n [ngModel]=\"currentDate()\"\n [dayCellTemplate]=\"calendarDayCellTemplateRef\"\n [monthCellTemplate]=\"calendarMonthCellTemplateRef\"\n [yearCellTemplate]=\"calendarYearCellTemplateRef\"\n (onValueChanged)=\"calendarDateChanged($event)\"\n ></ax-calendar>\n </ax-popover>\n </div>\n <div class=\"ax-scheduler-actions\">\n <ax-select-box\n [dropdownWidth]=\"'200px'\"\n [ngModel]=\"selectedView()\"\n [dataSource]=\"viewsDataSource()\"\n (onValueChanged)=\"viewChanged($event)\"\n ></ax-select-box>\n\n @if (allowFullScreen()) {\n <ax-button look=\"blank\" (onClick)=\"handleFullScreen()\">\n <ax-icon>\n <i class=\"fa-solid\" [class.fa-compress]=\"isFullScreen()\" [class.fa-expand]=\"!isFullScreen()\"></i>\n </ax-icon>\n </ax-button>\n }\n </div>\n </div>\n }\n <div class=\"ax-scheduler-views-container\">\n @switch (selectedView()) {\n @case ('day') {\n <ax-scheduler-day-view\n [rtl]=\"rtl()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-day-view>\n }\n @case ('week') {\n <ax-scheduler-week-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-week-view>\n }\n @case ('month') {\n <ax-scheduler-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-month-view>\n }\n @case ('timeline-day') {\n <ax-scheduler-timeline-day-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-day-view>\n }\n @case ('timeline-weekly') {\n <ax-scheduler-timeline-weekly-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-weekly-view>\n }\n @case ('timeline-month') {\n <ax-scheduler-timeline-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-month-view>\n }\n @case ('timeline-year') {\n <ax-scheduler-timeline-year-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-year-view>\n }\n @case ('agenda') {\n <ax-scheduler-agenda-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-agenda-view>\n }\n }\n </div>\n</div>\n<ng-template #calendarDayCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"flex flex-col items-center justify-between gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsOnDate(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n<ng-template #calendarMonthCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"flex flex-col items-center justify-between gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsInMonth(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n<ng-template #calendarYearCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"flex flex-col items-center justify-between gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsInYear(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-content:\"\"}}}@layer base{:root{--ax-comp-scheduler-width:57.5rem;--ax-comp-scheduler-basic-view-blocks-height:3rem;--ax-comp-scheduler-basic-view-blocks-width:3.5rem;--ax-comp-scheduler-timeline-view-blocks-width:20rem;--ax-comp-scheduler-timeline-view-blocks-height:3rem}}@layer components{ax-scheduler{width:100%;height:100%;display:block}ax-scheduler .ax-scheduler-primary-periority{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}ax-scheduler .ax-scheduler-highest-periority{background-color:rgba(var(--ax-sys-color-danger-dark-surface));color:rgba(var(--ax-sys-color-on-danger-dark-surface))}ax-scheduler .ax-scheduler-high-periority{background-color:rgba(var(--ax-sys-color-danger-surface));color:rgba(var(--ax-sys-color-on-danger-surface))}ax-scheduler .ax-scheduler-medium-periority{background-color:rgba(var(--ax-sys-color-warning-surface));color:rgba(var(--ax-sys-color-on-warning-surface))}ax-scheduler .ax-scheduler-low-periority{background-color:rgba(var(--ax-sys-color-success-light-surface));color:rgba(var(--ax-sys-color-on-success-light-surface))}ax-scheduler .ax-scheduler-lowest-periority{background-color:rgba(var(--ax-sys-color-success-lightest-surface));color:rgba(var(--ax-sys-color-on-success-lightest-surface))}ax-scheduler{background-color:inherit;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));-webkit-user-select:none;user-select:none}ax-scheduler.ax-full-screen-container{z-index:61;width:100vw;height:100vh;position:fixed;top:0;left:0}ax-scheduler .ax-scheduler-container{border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);background-color:inherit;border-width:1px;flex-direction:column;height:100%;display:flex;overflow:hidden}ax-scheduler .ax-scheduler-container .ax-scheduler-header{border-bottom-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 4);border-bottom-width:1px;justify-content:space-between;align-items:center;display:flex;overflow:auto hidden}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{min-width:calc(var(--spacing,.25rem) * 82);justify-content:space-between;align-items:center;display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{min-width:calc(var(--spacing,.25rem) * 40);text-align:center;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);margin:0}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 3);display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{background-color:inherit;height:100%;overflow:auto}.ax-overlay-pane.ax-scheduler-popover{max-height:calc(var(--spacing,.25rem) * 40);gap:var(--spacing,.25rem);border-radius:var(--ax-sys-border-radius);display:grid;overflow:auto}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-primary-periority{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-highest-periority{background-color:rgba(var(--ax-sys-color-danger-dark-surface));color:rgba(var(--ax-sys-color-on-danger-dark-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-high-periority{background-color:rgba(var(--ax-sys-color-danger-surface));color:rgba(var(--ax-sys-color-on-danger-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-medium-periority{background-color:rgba(var(--ax-sys-color-warning-surface));color:rgba(var(--ax-sys-color-on-warning-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-low-periority{background-color:rgba(var(--ax-sys-color-success-light-surface));color:rgba(var(--ax-sys-color-on-success-light-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-lowest-periority{background-color:rgba(var(--ax-sys-color-success-lightest-surface));color:rgba(var(--ax-sys-color-on-success-lightest-surface))}.ax-overlay-pane.ax-scheduler-popover{padding:var(--spacing,.25rem);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.ax-overlay-pane.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface));padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);color:rgba(var(--ax-sys-color-on-primary-surface));-webkit-user-select:none;user-select:none;flex-direction:column;display:flex;overflow:hidden}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment ax-subtitle{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.ax-overlay-pane.ax-scheduler-popover ax-title,.ax-overlay-pane.ax-scheduler-popover .ax-appointment-chip-title{justify-content:space-between;display:flex}:is(.ax-overlay-pane.ax-scheduler-popover ax-title,.ax-overlay-pane.ax-scheduler-popover .ax-appointment-chip-title) .ax-scheduler-action-icon{cursor:pointer;width:auto}.ax-scheduler-current-time-line{pointer-events:none;z-index:7;--tw-shadow:0 0 6px var(--tw-shadow-color,#ef4444cc);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:#ef4444;position:absolute}.ax-scheduler-current-time-line:before{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3);border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));--tw-shadow:0 0 8px var(--tw-shadow-color,#ef4444e6);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-content:\"\";content:var(--tw-content);background-color:#ef4444;border-radius:3.40282e38px;position:absolute}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: 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: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "dayCellTemplate", "monthCellTemplate", "yearCellTemplate", "cellClass", "showNavigation", "count", "id", "weekend", "weekdays", "look", "yearRange"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { kind: "component", type: 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", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSchedulerDayViewComponent, selector: "ax-scheduler-day-view", inputs: ["rtl", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "appointments", "tooltipTemplate", "selectedAppointmentId"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "appointments", "tooltipTemplate", "selectedAppointmentId"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "appointments", "firstDayOfWeek", "selectedAppointmentId", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerAgendaViewComponent, selector: "ax-scheduler-agenda-view", inputs: ["daysCount", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "appointments", "tooltipTemplate", "selectedAppointmentId"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "endDayHour", "selectedAppointmentId", "startDayHour", "showUnassignedAppointments", "resources", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMonthViewComponent, selector: "ax-scheduler-timeline-month-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "showUnassignedAppointments", "selectedAppointmentId", "resources", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineWeeklyViewComponent, selector: "ax-scheduler-timeline-weekly-view", inputs: ["daysCount", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "endDayHour", "selectedAppointmentId", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "startDayHour", "showUnassignedAppointments", "resources", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineYearViewComponent, selector: "ax-scheduler-timeline-year-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "showUnassignedAppointments", "selectedAppointmentId", "resources", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
5121
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSchedulerComponent, isStandalone: true, selector: "ax-scheduler", inputs: { calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, startingDate: { classPropertyName: "startingDate", publicName: "startingDate", isSignal: true, isRequired: false, transformFunction: null }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: false, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: false, transformFunction: null }, hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, allowFullScreen: { classPropertyName: "allowFullScreen", publicName: "allowFullScreen", isSignal: true, isRequired: false, transformFunction: null }, multiDayViewDaysCount: { classPropertyName: "multiDayViewDaysCount", publicName: "multiDayViewDaysCount", isSignal: true, isRequired: false, transformFunction: null }, showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, resourceTemplate: { classPropertyName: "resourceTemplate", publicName: "resourceTemplate", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, holidays: { classPropertyName: "holidays", publicName: "holidays", isSignal: true, isRequired: false, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedView: "selectedViewChange", onDataLoaded: "onDataLoaded", onRangeChanged: "onRangeChanged", onSlotClicked: "onSlotClicked", onSlotDblClicked: "onSlotDblClicked", onSlotRightClick: "onSlotRightClick", onAppointmentDrop: "onAppointmentDrop", onActionClick: "onActionClick", onAppointmentClicked: "onAppointmentClicked", onAppointmentDblClicked: "onAppointmentDblClicked", onAppointmentRightClick: "onAppointmentRightClick" }, host: { properties: { "class.ax-rtl": "rtl()" } }, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXSchedulerComponent }], viewQueries: [{ propertyName: "viewModeSelectbox", first: true, predicate: AXSelectBoxComponent, descendants: true, isSignal: true }, { propertyName: "calendarPopover", first: true, predicate: ["calendarPopover"], descendants: true, isSignal: true }, { propertyName: "_calendarDayCellTemplate", first: true, predicate: ["calendarDayCellTemplate"], descendants: true, isSignal: true }, { propertyName: "_calendarMonthCellTemplate", first: true, predicate: ["calendarMonthCellTemplate"], descendants: true, isSignal: true }, { propertyName: "_calendarYearCellTemplate", first: true, predicate: ["calendarYearCellTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-container\">\n @if (hasHeader()) {\n <div class=\"ax-scheduler-header\">\n <div class=\"ax-scheduler-date\">\n <ax-button look=\"blank\" (onClick)=\"prevClick()\">\n <ax-icon\n class=\"ax-icon text-xl\"\n [class.ax-icon-chevron-left]=\"!rtl()\"\n [class.ax-icon-chevron-right]=\"rtl()\"\n ></ax-icon>\n </ax-button>\n <ax-button look=\"blank\" [text]=\"currentDateText()\" #date></ax-button>\n <ax-button look=\"blank\" (onClick)=\"nextClick()\">\n <ax-icon\n class=\"ax-icon text-xl\"\n [class.ax-icon-chevron-right]=\"!rtl()\"\n [class.ax-icon-chevron-left]=\"rtl()\"\n ></ax-icon>\n </ax-button>\n <ax-popover [target]=\"date\" #calendarPopover>\n <ax-calendar\n [type]=\"calendarType()\"\n [depth]=\"calendarDepth()\"\n [ngModel]=\"currentDate()\"\n [dayCellTemplate]=\"calendarDayCellTemplateRef\"\n [monthCellTemplate]=\"calendarMonthCellTemplateRef\"\n [yearCellTemplate]=\"calendarYearCellTemplateRef\"\n (onValueChanged)=\"calendarDateChanged($event)\"\n ></ax-calendar>\n </ax-popover>\n </div>\n <div class=\"ax-scheduler-actions\">\n <ax-select-box\n [dropdownWidth]=\"'200px'\"\n [ngModel]=\"selectedView()\"\n [dataSource]=\"viewsDataSource()\"\n (onValueChanged)=\"viewChanged($event)\"\n ></ax-select-box>\n\n @if (allowFullScreen()) {\n <ax-button look=\"blank\" (onClick)=\"handleFullScreen()\">\n <ax-icon>\n <i class=\"fa-solid\" [class.fa-compress]=\"isFullScreen()\" [class.fa-expand]=\"!isFullScreen()\"></i>\n </ax-icon>\n </ax-button>\n }\n </div>\n </div>\n }\n <div class=\"ax-scheduler-views-container\">\n @switch (selectedView()) {\n @case ('day') {\n <ax-scheduler-day-view\n [rtl]=\"rtl()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-day-view>\n }\n @case ('week') {\n <ax-scheduler-week-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-week-view>\n }\n @case ('month') {\n <ax-scheduler-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-month-view>\n }\n @case ('timeline-day') {\n <ax-scheduler-timeline-day-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-day-view>\n }\n @case ('timeline-weekly') {\n <ax-scheduler-timeline-weekly-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-weekly-view>\n }\n @case ('timeline-month') {\n <ax-scheduler-timeline-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-month-view>\n }\n @case ('timeline-year') {\n <ax-scheduler-timeline-year-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-year-view>\n }\n @case ('agenda') {\n <ax-scheduler-agenda-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-agenda-view>\n }\n }\n </div>\n</div>\n<ng-template #calendarDayCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"flex flex-col items-center justify-between gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsOnDate(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n<ng-template #calendarMonthCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"flex flex-col items-center justify-between gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsInMonth(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n<ng-template #calendarYearCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"flex flex-col items-center justify-between gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsInYear(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-content:\"\"}}}@layer base{:root{--ax-comp-scheduler-width:57.5rem;--ax-comp-scheduler-basic-view-blocks-height:3rem;--ax-comp-scheduler-basic-view-blocks-width:3.5rem;--ax-comp-scheduler-timeline-view-blocks-width:20rem;--ax-comp-scheduler-timeline-view-blocks-height:3rem}}@layer components{ax-scheduler{width:100%;height:100%;display:block}ax-scheduler .ax-scheduler-primary-periority{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}ax-scheduler .ax-scheduler-highest-periority{background-color:rgba(var(--ax-sys-color-danger-dark-surface));color:rgba(var(--ax-sys-color-on-danger-dark-surface))}ax-scheduler .ax-scheduler-high-periority{background-color:rgba(var(--ax-sys-color-danger-surface));color:rgba(var(--ax-sys-color-on-danger-surface))}ax-scheduler .ax-scheduler-medium-periority{background-color:rgba(var(--ax-sys-color-warning-surface));color:rgba(var(--ax-sys-color-on-warning-surface))}ax-scheduler .ax-scheduler-low-periority{background-color:rgba(var(--ax-sys-color-success-light-surface));color:rgba(var(--ax-sys-color-on-success-light-surface))}ax-scheduler .ax-scheduler-lowest-periority{background-color:rgba(var(--ax-sys-color-success-lightest-surface));color:rgba(var(--ax-sys-color-on-success-lightest-surface))}ax-scheduler{background-color:inherit;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));-webkit-user-select:none;user-select:none}ax-scheduler.ax-full-screen-container{z-index:61;width:100vw;height:100vh;position:fixed;top:0;left:0}ax-scheduler .ax-scheduler-container{border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);background-color:inherit;border-width:1px;flex-direction:column;height:100%;display:flex;overflow:hidden}ax-scheduler .ax-scheduler-container .ax-scheduler-header{border-bottom-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 4);border-bottom-width:1px;justify-content:space-between;align-items:center;display:flex;overflow:auto hidden}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{min-width:calc(var(--spacing,.25rem) * 82);justify-content:space-between;align-items:center;display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{min-width:calc(var(--spacing,.25rem) * 40);text-align:center;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);margin:0}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 3);display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{background-color:inherit;height:100%;overflow:auto}.ax-overlay-pane.ax-scheduler-popover{max-height:calc(var(--spacing,.25rem) * 40);gap:var(--spacing,.25rem);border-radius:var(--ax-sys-border-radius);display:grid;overflow:auto}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-primary-periority{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-highest-periority{background-color:rgba(var(--ax-sys-color-danger-dark-surface));color:rgba(var(--ax-sys-color-on-danger-dark-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-high-periority{background-color:rgba(var(--ax-sys-color-danger-surface));color:rgba(var(--ax-sys-color-on-danger-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-medium-periority{background-color:rgba(var(--ax-sys-color-warning-surface));color:rgba(var(--ax-sys-color-on-warning-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-low-periority{background-color:rgba(var(--ax-sys-color-success-light-surface));color:rgba(var(--ax-sys-color-on-success-light-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-lowest-periority{background-color:rgba(var(--ax-sys-color-success-lightest-surface));color:rgba(var(--ax-sys-color-on-success-lightest-surface))}.ax-overlay-pane.ax-scheduler-popover{padding:var(--spacing,.25rem);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.ax-overlay-pane.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface));padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);color:rgba(var(--ax-sys-color-on-primary-surface));-webkit-user-select:none;user-select:none;flex-direction:column;display:flex;overflow:hidden}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment ax-subtitle{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.ax-overlay-pane.ax-scheduler-popover ax-title,.ax-overlay-pane.ax-scheduler-popover .ax-appointment-chip-title{justify-content:space-between;display:flex}:is(.ax-overlay-pane.ax-scheduler-popover ax-title,.ax-overlay-pane.ax-scheduler-popover .ax-appointment-chip-title) .ax-scheduler-action-icon{cursor:pointer;width:auto}.ax-scheduler-current-time-line{pointer-events:none;z-index:7;--tw-shadow:0 0 6px var(--tw-shadow-color,#ef4444cc);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:#ef4444;position:absolute}.ax-scheduler-current-time-line:before{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3);border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));--tw-shadow:0 0 8px var(--tw-shadow-color,#ef4444e6);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-content:\"\";content:var(--tw-content);background-color:#ef4444;border-radius:3.40282e38px;position:absolute}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: 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: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "dayCellTemplate", "monthCellTemplate", "yearCellTemplate", "cellClass", "showNavigation", "count", "id", "weekend", "weekdays", "look", "yearRange", "holidays"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { kind: "component", type: 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", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSchedulerDayViewComponent, selector: "ax-scheduler-day-view", inputs: ["rtl", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "appointments", "tooltipTemplate", "selectedAppointmentId"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "appointments", "tooltipTemplate", "selectedAppointmentId"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "appointments", "firstDayOfWeek", "selectedAppointmentId", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerAgendaViewComponent, selector: "ax-scheduler-agenda-view", inputs: ["daysCount", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "appointments", "tooltipTemplate", "selectedAppointmentId"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "endDayHour", "selectedAppointmentId", "startDayHour", "showUnassignedAppointments", "resources", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMonthViewComponent, selector: "ax-scheduler-timeline-month-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "showUnassignedAppointments", "selectedAppointmentId", "resources", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineWeeklyViewComponent, selector: "ax-scheduler-timeline-weekly-view", inputs: ["daysCount", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "endDayHour", "selectedAppointmentId", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "startDayHour", "showUnassignedAppointments", "resources", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineYearViewComponent, selector: "ax-scheduler-timeline-year-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "showUnassignedAppointments", "selectedAppointmentId", "resources", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
5122
5122
  }
5123
5123
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerComponent, decorators: [{
5124
5124
  type: Component,