skcr-autechre 1.0.49 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/skcr-autechre.mjs +621 -377
- package/fesm2022/skcr-autechre.mjs.map +1 -1
- package/package.json +10 -9
- package/types/skcr-autechre.d.ts +14 -10
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, model, signal, computed, inject, ElementRef, viewChild, effect, Component, output, untracked,
|
|
2
|
+
import { input, model, signal, computed, inject, ElementRef, viewChild, effect, ChangeDetectionStrategy, Component, output, untracked, Renderer2, HostListener, Directive, contentChild, contentChildren, booleanAttribute, HostBinding, ViewEncapsulation, Injectable, ChangeDetectorRef } from '@angular/core';
|
|
3
3
|
import { trigger, transition, style, animate, group, query, animateChild } from '@angular/animations';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
@@ -37,6 +37,7 @@ var EConfirmLevelVariant;
|
|
|
37
37
|
EConfirmLevelVariant["Danger"] = "danger";
|
|
38
38
|
EConfirmLevelVariant["Info"] = "info";
|
|
39
39
|
EConfirmLevelVariant["Success"] = "success";
|
|
40
|
+
EConfirmLevelVariant["Warning"] = "warning";
|
|
40
41
|
})(EConfirmLevelVariant || (EConfirmLevelVariant = {}));
|
|
41
42
|
|
|
42
43
|
var EModalCloseCondition;
|
|
@@ -47,23 +48,40 @@ var EModalCloseCondition;
|
|
|
47
48
|
|
|
48
49
|
class MultiSelectComponent {
|
|
49
50
|
constructor() {
|
|
50
|
-
this.options = input.required(
|
|
51
|
-
|
|
52
|
-
this.
|
|
53
|
-
|
|
54
|
-
this.
|
|
55
|
-
|
|
56
|
-
this.
|
|
57
|
-
|
|
58
|
-
this.
|
|
59
|
-
|
|
60
|
-
this.
|
|
61
|
-
|
|
62
|
-
this.
|
|
63
|
-
|
|
64
|
-
this.
|
|
65
|
-
|
|
66
|
-
this.
|
|
51
|
+
this.options = input.required(/* @ts-ignore */
|
|
52
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
53
|
+
this.label = input('', /* @ts-ignore */
|
|
54
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
55
|
+
this.placeholder = input('', /* @ts-ignore */
|
|
56
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
57
|
+
this.searchPlaceholder = input('', /* @ts-ignore */
|
|
58
|
+
...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
59
|
+
this.isInvalid = input(false, /* @ts-ignore */
|
|
60
|
+
...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
|
|
61
|
+
this.isDisabled = input(false, /* @ts-ignore */
|
|
62
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
63
|
+
this.isSearchDisplayed = input(false, /* @ts-ignore */
|
|
64
|
+
...(ngDevMode ? [{ debugName: "isSearchDisplayed" }] : /* istanbul ignore next */ []));
|
|
65
|
+
this.isOptional = input(false, /* @ts-ignore */
|
|
66
|
+
...(ngDevMode ? [{ debugName: "isOptional" }] : /* istanbul ignore next */ []));
|
|
67
|
+
this.isFullWidth = input(false, /* @ts-ignore */
|
|
68
|
+
...(ngDevMode ? [{ debugName: "isFullWidth" }] : /* istanbul ignore next */ []));
|
|
69
|
+
this.areValueDisplayedOutside = input(false, /* @ts-ignore */
|
|
70
|
+
...(ngDevMode ? [{ debugName: "areValueDisplayedOutside" }] : /* istanbul ignore next */ []));
|
|
71
|
+
this.tooltipText = input('', /* @ts-ignore */
|
|
72
|
+
...(ngDevMode ? [{ debugName: "tooltipText" }] : /* istanbul ignore next */ []));
|
|
73
|
+
this.value = model([], /* @ts-ignore */
|
|
74
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
75
|
+
this.searchTerm = signal('', /* @ts-ignore */
|
|
76
|
+
...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
77
|
+
this.isOpen = signal(false, /* @ts-ignore */
|
|
78
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
79
|
+
this.dropdownTop = signal(0, /* @ts-ignore */
|
|
80
|
+
...(ngDevMode ? [{ debugName: "dropdownTop" }] : /* istanbul ignore next */ []));
|
|
81
|
+
this.dropdownLeft = signal(0, /* @ts-ignore */
|
|
82
|
+
...(ngDevMode ? [{ debugName: "dropdownLeft" }] : /* istanbul ignore next */ []));
|
|
83
|
+
this.dropdownWidth = signal(0, /* @ts-ignore */
|
|
84
|
+
...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
|
|
67
85
|
this.formattedOptions = computed(() => {
|
|
68
86
|
let formattedOptions = this.options() || [];
|
|
69
87
|
if (formattedOptions[0]?.value === undefined) {
|
|
@@ -75,24 +93,29 @@ class MultiSelectComponent {
|
|
|
75
93
|
});
|
|
76
94
|
}
|
|
77
95
|
return formattedOptions;
|
|
78
|
-
},
|
|
96
|
+
}, /* @ts-ignore */
|
|
97
|
+
...(ngDevMode ? [{ debugName: "formattedOptions" }] : /* istanbul ignore next */ []));
|
|
79
98
|
this.filteredOptions = computed(() => {
|
|
80
99
|
const normalizedQuery = this.normalizeString(this.searchTerm());
|
|
81
100
|
return this.formattedOptions().filter(option => {
|
|
82
101
|
return this.normalizeString(option.name).includes(normalizedQuery);
|
|
83
102
|
});
|
|
84
|
-
},
|
|
103
|
+
}, /* @ts-ignore */
|
|
104
|
+
...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
85
105
|
this.selectedOptions = computed(() => {
|
|
86
106
|
return this.formattedOptions().filter(option => this.value().includes(option.value));
|
|
87
|
-
},
|
|
107
|
+
}, /* @ts-ignore */
|
|
108
|
+
...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
|
|
88
109
|
this.selectedOptionsText = computed(() => {
|
|
89
110
|
return this.selectedOptions()
|
|
90
111
|
.map(option => option.name)
|
|
91
112
|
.join(', ');
|
|
92
|
-
},
|
|
113
|
+
}, /* @ts-ignore */
|
|
114
|
+
...(ngDevMode ? [{ debugName: "selectedOptionsText" }] : /* istanbul ignore next */ []));
|
|
93
115
|
this.elRef = inject(ElementRef);
|
|
94
116
|
this.resizeObserver = null;
|
|
95
|
-
this.searchInputEl = viewChild('searchInput',
|
|
117
|
+
this.searchInputEl = viewChild('searchInput', /* @ts-ignore */
|
|
118
|
+
...(ngDevMode ? [{ debugName: "searchInputEl" }] : /* istanbul ignore next */ []));
|
|
96
119
|
this.resizeHandler = () => {
|
|
97
120
|
if (this.isOpen()) {
|
|
98
121
|
this.updateDropdownPosition();
|
|
@@ -212,17 +235,17 @@ class MultiSelectComponent {
|
|
|
212
235
|
trackByValue(index, item) {
|
|
213
236
|
return item.value;
|
|
214
237
|
}
|
|
215
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
216
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
238
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
239
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MultiSelectComponent, isStandalone: true, selector: "skcr-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isSearchDisplayed: { classPropertyName: "isSearchDisplayed", publicName: "isSearchDisplayed", isSignal: true, isRequired: false, transformFunction: null }, isOptional: { classPropertyName: "isOptional", publicName: "isOptional", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, areValueDisplayedOutside: { classPropertyName: "areValueDisplayedOutside", publicName: "areValueDisplayedOutside", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n @if (label()) {\n <label\n class=\"flex items-center justify-between mb-1\"\n id=\"multiselect-label\"\n >\n <div class=\"flex items-center gap-2\">\n {{ label() }}\n\n @if (isOptional()) {\n <span class=\"text-xs text-slate-500\">Optional</span>\n }\n </div>\n\n @if (tooltipText()) {\n <div class=\"flex items-center has-tooltip\">\n <ng-icon\n class=\"size-4\"\n name=\"heroQuestionMarkCircle\"\n />\n\n <div class=\"tooltip bg-gray-800 text-white -left-50 top-4 p-2 rounded text-xs max-w-md whitespace-normal\">\n {{ tooltipText() }}\n </div>\n </div>\n }\n </label>\n }\n\n <div class=\"relative\">\n <button\n class=\"grid w-full min-h-9 cursor-default grid-cols-1 rounded-md shadow-sm py-2 px-3 text-left outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary sm:text-body-small/6\"\n (click)=\"toggleSelect($event)\"\n [disabled]=\"isDisabled() || !options().length\"\n [ngClass]=\"{\n 'outline-destructive focus:outline-destructive focus:ring-destructive': isInvalid(),\n 'focus:outline-primary focus:ring-primary': !isInvalid(),\n 'cursor-not-allowed bg-slate-50': isDisabled() || !options().length,\n 'cursor-pointer bg-white': !isDisabled() && !!options().length,\n }\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-haspopup=\"listbox\"\n aria-labelledby=\"multiselect-label\"\n >\n <div class=\"col-start-1 row-start-1 block gap-2 truncate pr-12\">\n @if (!selectedOptions()!.length || areValueDisplayedOutside()) {\n <span class=\"h-5 text-slate-500\">\n {{ placeholder() }}\n </span>\n } @else {\n <div class=\"flex flex-wrap gap-1 max-h-[4rem] overflow-auto scrollbar-hide relative\">\n @for (selectedOption of selectedOptions(); track selectedOption.value) {\n <span\n class=\"px-2 py-0.5 bg-primary-50 text-primary-800 rounded-lg text-caption font-medium flex items-center gap-1\"\n >\n {{ selectedOption.name }}\n\n <span\n class=\"cursor-pointer text-primary-800 flex items-center\"\n (mousedown)=\"removeOption(selectedOption, $event)\"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n >\n <ng-icon\n class=\"size-4\"\n name=\"heroXMark\"\n />\n </span>\n </span>\n }\n </div>\n }\n </div>\n\n <span class=\"col-start-1 row-start-1 flex items-center gap-2 self-center justify-self-end text-slate-500\">\n <span class=\"size-5 sm:size-4\">\n <ng-icon name=\"heroChevronUpDown\" />\n </span>\n </span>\n </button>\n\n @if (isOpen()) {\n <div\n class=\"fixed z-50 w-full rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-body-small overflow-hidden\"\n [style.top.px]=\"dropdownTop()\"\n [style.left.px]=\"dropdownLeft()\"\n [style.width.px]=\"dropdownWidth()\"\n @AnimationTrigger0\n role=\"listbox\"\n aria-labelledby=\"multiselect-label\"\n >\n @if (isSearchDisplayed()) {\n <div class=\"relative cursor-default py-2 px-3 shadow-sm select-none\">\n <div class=\"pointer-events-none absolute inset-y-0 left-1 flex items-center pl-3\">\n <span class=\"flex items-center\">\n <ng-icon name=\"heroMagnifyingGlass\" />\n </span>\n </div>\n\n <input\n class=\"block rounded-md w-full pl-6 pr-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary placeholder:text-slate-500\"\n #searchInput\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n [(ngModel)]=\"searchTerm\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <cdk-virtual-scroll-viewport\n class=\"w-full\"\n [itemSize]=\"40\"\n [style.height.px]=\"Math.min(filteredOptions().length * 40, 224)\"\n >\n <div\n class=\"relative cursor-default py-2 px-2 mx-1 select-none\"\n *cdkVirtualFor=\"let option of filteredOptions(); trackBy: trackByValue; let i = index\"\n (click)=\"handleOptionClick(option)\"\n [class.bg-primary-50]=\"isItemSelected(option)\"\n [class.bg-slate-50]=\"!!option.isDisabled\"\n [class.hover:bg-primary-50]=\"!option.isDisabled\"\n [id]=\"'listbox-option-' + i\"\n role=\"option\"\n >\n <span class=\"block truncate\">\n {{ option.name }}\n </span>\n\n @if (isItemSelected(option)) {\n <span class=\"absolute inset-y-0 right-0 flex items-center pr-4 text-primary\">\n <ng-icon name=\"heroCheck\" />\n </span>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], animations: [
|
|
217
240
|
trigger('AnimationTrigger0', [
|
|
218
241
|
transition(':leave', [
|
|
219
242
|
style({ opacity: 1 }),
|
|
220
243
|
animate('200ms ease-in-out', style({ opacity: 0 })),
|
|
221
244
|
]),
|
|
222
245
|
]),
|
|
223
|
-
] }); }
|
|
246
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
224
247
|
}
|
|
225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
248
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
226
249
|
type: Component,
|
|
227
250
|
args: [{ selector: 'skcr-multi-select', animations: [
|
|
228
251
|
trigger('AnimationTrigger0', [
|
|
@@ -231,7 +254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
231
254
|
animate('200ms ease-in-out', style({ opacity: 0 })),
|
|
232
255
|
]),
|
|
233
256
|
]),
|
|
234
|
-
], imports: [
|
|
257
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
235
258
|
FormsModule,
|
|
236
259
|
NgClass,
|
|
237
260
|
NgIcon,
|
|
@@ -241,24 +264,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
241
264
|
|
|
242
265
|
class MultiSelectAsyncComponent {
|
|
243
266
|
constructor() {
|
|
244
|
-
this.options = input.required(
|
|
245
|
-
|
|
246
|
-
this.
|
|
247
|
-
|
|
248
|
-
this.
|
|
249
|
-
|
|
250
|
-
this.
|
|
251
|
-
|
|
252
|
-
this.
|
|
253
|
-
|
|
254
|
-
this.
|
|
267
|
+
this.options = input.required(/* @ts-ignore */
|
|
268
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
269
|
+
this.label = input('', /* @ts-ignore */
|
|
270
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
271
|
+
this.placeholder = input('', /* @ts-ignore */
|
|
272
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
273
|
+
this.searchPlaceholder = input('', /* @ts-ignore */
|
|
274
|
+
...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
275
|
+
this.isInvalid = input(false, /* @ts-ignore */
|
|
276
|
+
...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
|
|
277
|
+
this.isDisabled = input(false, /* @ts-ignore */
|
|
278
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
279
|
+
this.isOptional = input(false, /* @ts-ignore */
|
|
280
|
+
...(ngDevMode ? [{ debugName: "isOptional" }] : /* istanbul ignore next */ []));
|
|
281
|
+
this.isFullWidth = input(false, /* @ts-ignore */
|
|
282
|
+
...(ngDevMode ? [{ debugName: "isFullWidth" }] : /* istanbul ignore next */ []));
|
|
283
|
+
this.areValueDisplayedOutside = input(false, /* @ts-ignore */
|
|
284
|
+
...(ngDevMode ? [{ debugName: "areValueDisplayedOutside" }] : /* istanbul ignore next */ []));
|
|
285
|
+
this.tooltipText = input('', /* @ts-ignore */
|
|
286
|
+
...(ngDevMode ? [{ debugName: "tooltipText" }] : /* istanbul ignore next */ []));
|
|
287
|
+
this.isLoading = input(false, /* @ts-ignore */
|
|
288
|
+
...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
|
|
255
289
|
this.searchChange = output();
|
|
256
|
-
this.value = model([],
|
|
257
|
-
|
|
258
|
-
this.
|
|
259
|
-
|
|
260
|
-
this.
|
|
261
|
-
|
|
290
|
+
this.value = model([], /* @ts-ignore */
|
|
291
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
292
|
+
this.searchTerm = signal('', /* @ts-ignore */
|
|
293
|
+
...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
294
|
+
this.isOpen = signal(false, /* @ts-ignore */
|
|
295
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
296
|
+
this.dropdownTop = signal(0, /* @ts-ignore */
|
|
297
|
+
...(ngDevMode ? [{ debugName: "dropdownTop" }] : /* istanbul ignore next */ []));
|
|
298
|
+
this.dropdownLeft = signal(0, /* @ts-ignore */
|
|
299
|
+
...(ngDevMode ? [{ debugName: "dropdownLeft" }] : /* istanbul ignore next */ []));
|
|
300
|
+
this.dropdownWidth = signal(0, /* @ts-ignore */
|
|
301
|
+
...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
|
|
262
302
|
this.formattedOptions = computed(() => {
|
|
263
303
|
let formattedOptions = this.options() || [];
|
|
264
304
|
if (formattedOptions[0]?.value === undefined) {
|
|
@@ -270,17 +310,22 @@ class MultiSelectAsyncComponent {
|
|
|
270
310
|
});
|
|
271
311
|
}
|
|
272
312
|
return formattedOptions;
|
|
273
|
-
},
|
|
274
|
-
|
|
275
|
-
this.
|
|
313
|
+
}, /* @ts-ignore */
|
|
314
|
+
...(ngDevMode ? [{ debugName: "formattedOptions" }] : /* istanbul ignore next */ []));
|
|
315
|
+
this.filteredOptions = computed(() => this.formattedOptions(), /* @ts-ignore */
|
|
316
|
+
...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
317
|
+
this.selectedOptionsCache = signal([], /* @ts-ignore */
|
|
318
|
+
...(ngDevMode ? [{ debugName: "selectedOptionsCache" }] : /* istanbul ignore next */ []));
|
|
276
319
|
this.selectedOptions = computed(() => {
|
|
277
320
|
const currentValues = this.value() || [];
|
|
278
321
|
const cache = this.selectedOptionsCache();
|
|
279
322
|
return cache.filter(option => currentValues.includes(option.value));
|
|
280
|
-
},
|
|
323
|
+
}, /* @ts-ignore */
|
|
324
|
+
...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
|
|
281
325
|
this.elRef = inject(ElementRef);
|
|
282
326
|
this.resizeObserver = null;
|
|
283
|
-
this.searchInputEl = viewChild('searchInput',
|
|
327
|
+
this.searchInputEl = viewChild('searchInput', /* @ts-ignore */
|
|
328
|
+
...(ngDevMode ? [{ debugName: "searchInputEl" }] : /* istanbul ignore next */ []));
|
|
284
329
|
this.resizeHandler = () => {
|
|
285
330
|
if (this.isOpen()) {
|
|
286
331
|
this.updateDropdownPosition();
|
|
@@ -398,17 +443,17 @@ class MultiSelectAsyncComponent {
|
|
|
398
443
|
trackByValue(index, item) {
|
|
399
444
|
return item.value;
|
|
400
445
|
}
|
|
401
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
402
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
446
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectAsyncComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
447
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MultiSelectAsyncComponent, isStandalone: true, selector: "skcr-multi-select-async", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isOptional: { classPropertyName: "isOptional", publicName: "isOptional", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, areValueDisplayedOutside: { classPropertyName: "areValueDisplayedOutside", publicName: "areValueDisplayedOutside", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange", value: "valueChange" }, viewQueries: [{ propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n @if (label()) {\n <label\n class=\"flex items-center justify-between mb-1\"\n id=\"multiselect-async-label\"\n >\n <div class=\"flex items-center gap-2\">\n {{ label() }}\n\n @if (isOptional()) {\n <span class=\"text-xs text-slate-500\">Optional</span>\n }\n </div>\n\n @if (tooltipText()) {\n <div class=\"flex items-center has-tooltip\">\n <ng-icon\n class=\"size-4\"\n name=\"heroQuestionMarkCircle\"\n />\n\n <div class=\"tooltip bg-gray-800 text-white -left-50 top-4 p-2 rounded text-xs max-w-md whitespace-normal\">\n {{ tooltipText() }}\n </div>\n </div>\n }\n </label>\n }\n\n <div class=\"relative\">\n <button\n class=\"grid w-full min-h-9 cursor-default grid-cols-1 rounded-md shadow-sm py-2 px-3 text-left outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary sm:text-body-small/6\"\n (click)=\"toggleSelect($event)\"\n [disabled]=\"isDisabled() || !options().length\"\n [ngClass]=\"{\n 'outline-destructive focus:outline-destructive focus:ring-destructive': isInvalid(),\n 'focus:outline-primary focus:ring-primary': !isInvalid(),\n 'cursor-not-allowed bg-slate-50': isDisabled() || !options().length,\n 'cursor-pointer bg-white': !isDisabled() && !!options().length,\n }\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-haspopup=\"listbox\"\n aria-labelledby=\"multiselect-async-label\"\n >\n <div class=\"col-start-1 row-start-1 block gap-2 truncate pr-12\">\n @if (!selectedOptions()!.length || !!areValueDisplayedOutside()) {\n <span class=\"h-5\">\n {{ placeholder() }}\n </span>\n } @else {\n <div class=\"flex flex-wrap gap-1 max-h-[4rem] overflow-auto scrollbar-hide relative\">\n @for (selectedOption of selectedOptions(); track selectedOption.value) {\n <span\n class=\"px-2 py-0.5 bg-primary-50 text-primary-800 rounded-lg text-caption font-medium flex items-center gap-1\"\n >\n {{ selectedOption.name }}\n\n <span\n class=\"cursor-pointer text-primary-800 flex items-center\"\n (mousedown)=\"removeOption(selectedOption, $event)\"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n >\n <ng-icon\n class=\"size-4\"\n name=\"heroXMark\"\n />\n </span>\n </span>\n }\n </div>\n }\n </div>\n\n <span class=\"col-start-1 row-start-1 flex items-center gap-2 self-center justify-self-end text-slate-500\">\n <span class=\"size-5 sm:size-4\">\n <ng-icon name=\"heroChevronUpDown\" />\n </span>\n </span>\n </button>\n\n @if (isOpen()) {\n <div\n class=\"fixed z-50 w-full rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-body-small overflow-hidden\"\n [style.top.px]=\"dropdownTop()\"\n [style.left.px]=\"dropdownLeft()\"\n [style.width.px]=\"dropdownWidth()\"\n @AnimationTrigger0\n role=\"listbox\"\n aria-labelledby=\"multiselect-async-label\"\n >\n <div class=\"relative cursor-default py-2 px-3 shadow-sm select-none\">\n <div class=\"pointer-events-none absolute inset-y-0 left-1 flex items-center pl-3\">\n <span class=\"flex items-center\">\n <ng-icon name=\"heroMagnifyingGlass\" />\n </span>\n </div>\n\n <input\n class=\"block rounded-md w-full pl-6 pr-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary placeholder:text-slate-500\"\n #searchInput\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchTerm()\"\n (input)=\"onSearchInput($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n\n @if (isLoading()) {\n <div class=\"flex items-center justify-center py-4\">\n <div class=\"animate-spin rounded-full h-5 w-5 border-2 border-primary border-t-transparent\"></div>\n </div>\n }\n\n @if (!isLoading() && filteredOptions().length === 0) {\n <div class=\"py-4 px-3 text-center text-slate-500 text-body-small\">\n Aucun resultat\n </div>\n }\n\n @if (!isLoading() && filteredOptions().length > 0) {\n <cdk-virtual-scroll-viewport\n class=\"w-full\"\n [itemSize]=\"40\"\n [style.height.px]=\"Math.min(filteredOptions().length * 40, 224)\"\n >\n <div\n class=\"relative cursor-default py-2 px-2 mx-1 select-none\"\n *cdkVirtualFor=\"let option of filteredOptions(); trackBy: trackByValue; let i = index\"\n (click)=\"handleOptionClick(option)\"\n [class.bg-primary-50]=\"isItemSelected(option)\"\n [class.bg-slate-50]=\"!!option.isDisabled\"\n [class.hover:bg-primary-50]=\"!option.isDisabled\"\n [id]=\"'listbox-option-' + i\"\n role=\"option\"\n >\n <span class=\"block truncate\">\n {{ option.name }}\n </span>\n\n @if (isItemSelected(option)) {\n <span class=\"absolute inset-y-0 right-0 flex items-center pr-4 text-primary\">\n <ng-icon name=\"heroCheck\" />\n </span>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], animations: [
|
|
403
448
|
trigger('AnimationTrigger0', [
|
|
404
449
|
transition(':leave', [
|
|
405
450
|
style({ opacity: 1 }),
|
|
406
451
|
animate('200ms ease-in-out', style({ opacity: 0 })),
|
|
407
452
|
]),
|
|
408
453
|
]),
|
|
409
|
-
] }); }
|
|
454
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
410
455
|
}
|
|
411
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
456
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectAsyncComponent, decorators: [{
|
|
412
457
|
type: Component,
|
|
413
458
|
args: [{ selector: 'skcr-multi-select-async', animations: [
|
|
414
459
|
trigger('AnimationTrigger0', [
|
|
@@ -417,7 +462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
417
462
|
animate('200ms ease-in-out', style({ opacity: 0 })),
|
|
418
463
|
]),
|
|
419
464
|
]),
|
|
420
|
-
], imports: [
|
|
465
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
421
466
|
NgClass,
|
|
422
467
|
NgIcon,
|
|
423
468
|
ScrollingModule,
|
|
@@ -426,16 +471,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
426
471
|
|
|
427
472
|
class InputComponent {
|
|
428
473
|
constructor() {
|
|
429
|
-
this.id = input('',
|
|
430
|
-
|
|
431
|
-
this.
|
|
432
|
-
|
|
433
|
-
this.
|
|
434
|
-
|
|
435
|
-
this.
|
|
436
|
-
|
|
437
|
-
this.
|
|
438
|
-
|
|
474
|
+
this.id = input('', /* @ts-ignore */
|
|
475
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
476
|
+
this.type = input('text', /* @ts-ignore */
|
|
477
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
478
|
+
this.label = input('', /* @ts-ignore */
|
|
479
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
480
|
+
this.placeholder = input('', /* @ts-ignore */
|
|
481
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
482
|
+
this.isOptional = input(false, /* @ts-ignore */
|
|
483
|
+
...(ngDevMode ? [{ debugName: "isOptional" }] : /* istanbul ignore next */ []));
|
|
484
|
+
this.isSearchInput = input(false, /* @ts-ignore */
|
|
485
|
+
...(ngDevMode ? [{ debugName: "isSearchInput" }] : /* istanbul ignore next */ []));
|
|
486
|
+
this.isInvalid = input(false, /* @ts-ignore */
|
|
487
|
+
...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
|
|
488
|
+
this.isDisabled = input(false, /* @ts-ignore */
|
|
489
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
490
|
+
this.maxLength = input(undefined, /* @ts-ignore */
|
|
491
|
+
...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
492
|
+
this.value = model(/* @ts-ignore */
|
|
493
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
439
494
|
}
|
|
440
495
|
handleChange(event) {
|
|
441
496
|
const inputElement = event.target;
|
|
@@ -447,12 +502,12 @@ class InputComponent {
|
|
|
447
502
|
this.value.set(newValue);
|
|
448
503
|
}
|
|
449
504
|
}
|
|
450
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
451
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
505
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
506
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: InputComponent, isStandalone: true, selector: "skcr-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isOptional: { classPropertyName: "isOptional", publicName: "isOptional", isSignal: true, isRequired: false, transformFunction: null }, isSearchInput: { classPropertyName: "isSearchInput", publicName: "isSearchInput", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div>\n @if (label()) {\n <label\n class=\"mb-1 flex items-center gap-2\"\n [for]=\"id()\"\n >\n {{ label() }}\n\n @if (isOptional()) {\n <span class=\"text-slate-500\"> Optional </span>\n }\n </label>\n }\n\n <div class=\"relative\">\n @if (isSearchInput()) {\n <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3\">\n <span class=\"flex items-center\">\n <ng-icon name=\"heroMagnifyingGlass\" />\n </span>\n </div>\n }\n\n <input\n class=\"block w-full rounded-md px-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary placeholder:text-slate-500\"\n [id]=\"id() || label()\"\n [name]=\"id()\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"value()\"\n (input)=\"handleChange($event)\"\n [ngClass]=\"{\n 'pl-10': isSearchInput(),\n 'outline-destructive placeholder-destructive focus:outline-destructive focus:ring-destructive': isInvalid(),\n 'outline-lightGrey focus:outline-primary focus:ring-primary': !isInvalid(),\n 'cursor-not-allowed bg-slate-50': isDisabled(),\n }\"\n />\n </div>\n</div>\n", styles: ["input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
452
507
|
}
|
|
453
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
508
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputComponent, decorators: [{
|
|
454
509
|
type: Component,
|
|
455
|
-
args: [{ selector: 'skcr-input', imports: [
|
|
510
|
+
args: [{ selector: 'skcr-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
456
511
|
FormsModule,
|
|
457
512
|
NgClass,
|
|
458
513
|
NgIcon
|
|
@@ -461,14 +516,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
461
516
|
|
|
462
517
|
class InputNumberComponent {
|
|
463
518
|
constructor() {
|
|
464
|
-
this.name = input('',
|
|
465
|
-
|
|
466
|
-
this.
|
|
467
|
-
|
|
468
|
-
this.
|
|
469
|
-
|
|
470
|
-
this.
|
|
471
|
-
|
|
519
|
+
this.name = input('', /* @ts-ignore */
|
|
520
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
521
|
+
this.label = input('', /* @ts-ignore */
|
|
522
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
523
|
+
this.placeholder = input('', /* @ts-ignore */
|
|
524
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
525
|
+
this.maxFractionDigits = input(0, /* @ts-ignore */
|
|
526
|
+
...(ngDevMode ? [{ debugName: "maxFractionDigits" }] : /* istanbul ignore next */ []));
|
|
527
|
+
this.isInvalid = input(false, /* @ts-ignore */
|
|
528
|
+
...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
|
|
529
|
+
this.tooltipText = input('', /* @ts-ignore */
|
|
530
|
+
...(ngDevMode ? [{ debugName: "tooltipText" }] : /* istanbul ignore next */ []));
|
|
531
|
+
this.value = model(/* @ts-ignore */
|
|
532
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
533
|
+
this.inputPattern = computed(() => `^\\d+\\.?\\d{0,${this.maxFractionDigits()}}$`, /* @ts-ignore */
|
|
534
|
+
...(ngDevMode ? [{ debugName: "inputPattern" }] : /* istanbul ignore next */ []));
|
|
472
535
|
}
|
|
473
536
|
handleKeyDown(event) {
|
|
474
537
|
const allowedKeys = [
|
|
@@ -493,12 +556,12 @@ class InputNumberComponent {
|
|
|
493
556
|
const value = event.target.value.replace(',', '.');
|
|
494
557
|
this.value.set(value === '' ? null : +value);
|
|
495
558
|
}
|
|
496
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
497
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
559
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
560
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: InputNumberComponent, isStandalone: true, selector: "skcr-input-number", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxFractionDigits: { classPropertyName: "maxFractionDigits", publicName: "maxFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div>\n @if (label()) {\n <label\n class=\"mb-1 flex items-center justify-between\"\n [for]=\"name()\"\n >\n <div class=\"flex items-center gap-2\">\n {{ label() }}\n </div>\n\n @if (tooltipText()) {\n <div class=\"flex items-center has-tooltip\">\n <ng-icon\n class=\"size-4\"\n name=\"heroQuestionMarkCircle\"\n />\n\n <div class=\"tooltip bg-gray-800 text-white -left-50 top-4 p-2 rounded text-xs max-w-md whitespace-normal\">\n {{ tooltipText() }}\n </div>\n </div>\n }\n </label>\n }\n\n <input\n class=\"block w-full rounded-md px-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary placeholder:text-slate-500\"\n [id]=\"name()\"\n [name]=\"name()\"\n type=\"number\"\n inputmode=\"numeric\"\n [pattern]=\"inputPattern()\"\n [placeholder]=\"placeholder()\"\n (keydown)=\"handleKeyDown($event)\"\n [(ngModel)]=\"value\"\n (input)=\"handleChange($event)\"\n [ngClass]=\"{\n 'outline-destructive placeholder-destructive focus:outline-destructive focus:ring-destructive': isInvalid(),\n 'outline-lightGrey focus:outline-primary focus:ring-primary': !isInvalid(),\n }\"\n />\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
498
561
|
}
|
|
499
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
562
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
500
563
|
type: Component,
|
|
501
|
-
args: [{ selector: 'skcr-input-number', imports: [
|
|
564
|
+
args: [{ selector: 'skcr-input-number', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
502
565
|
NgClass,
|
|
503
566
|
FormsModule,
|
|
504
567
|
NgIcon,
|
|
@@ -507,14 +570,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
507
570
|
|
|
508
571
|
class SubmitButtonComponent {
|
|
509
572
|
constructor() {
|
|
510
|
-
this.label = input('',
|
|
511
|
-
|
|
512
|
-
this.
|
|
513
|
-
|
|
514
|
-
this.
|
|
515
|
-
|
|
573
|
+
this.label = input('', /* @ts-ignore */
|
|
574
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
575
|
+
this.isLoading = input(false, /* @ts-ignore */
|
|
576
|
+
...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
|
|
577
|
+
this.isFullWidth = input(false, /* @ts-ignore */
|
|
578
|
+
...(ngDevMode ? [{ debugName: "isFullWidth" }] : /* istanbul ignore next */ []));
|
|
579
|
+
this.isDisabled = input(false, /* @ts-ignore */
|
|
580
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
581
|
+
this.isSuccess = input(false, /* @ts-ignore */
|
|
582
|
+
...(ngDevMode ? [{ debugName: "isSuccess" }] : /* istanbul ignore next */ []));
|
|
583
|
+
this.colorVariant = input(EButtonColorVariant.Primary, /* @ts-ignore */
|
|
584
|
+
...(ngDevMode ? [{ debugName: "colorVariant" }] : /* istanbul ignore next */ []));
|
|
516
585
|
this.submitClicked = output();
|
|
517
|
-
this.isSuccessIconDisplayed = signal(false,
|
|
586
|
+
this.isSuccessIconDisplayed = signal(false, /* @ts-ignore */
|
|
587
|
+
...(ngDevMode ? [{ debugName: "isSuccessIconDisplayed" }] : /* istanbul ignore next */ []));
|
|
518
588
|
effect(() => {
|
|
519
589
|
if (this.isSuccess()) {
|
|
520
590
|
this.isSuccessIconDisplayed.set(true);
|
|
@@ -527,12 +597,12 @@ class SubmitButtonComponent {
|
|
|
527
597
|
handleCLick() {
|
|
528
598
|
this.submitClicked.emit();
|
|
529
599
|
}
|
|
530
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
531
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
600
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SubmitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
601
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SubmitButtonComponent, isStandalone: true, selector: "skcr-submit-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isSuccess: { classPropertyName: "isSuccess", publicName: "isSuccess", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitClicked: "submitClicked" }, ngImport: i0, template: "<button\n class=\"btn btn-large w-full\"\n type=\"button\"\n [class]=\"colorVariant()\"\n [ngClass]=\"{\n 'btn-success': isSuccessIconDisplayed(),\n 'btn-full': isFullWidth(),\n }\"\n [disabled]=\"isLoading() || isSuccessIconDisplayed() || isDisabled()\"\n (click)=\"handleCLick()\"\n>\n @if (isLoading()) {\n <span class=\"spinner\"></span>\n }\n\n @if (isSuccessIconDisplayed()) {\n <span class=\"flex items-center justify-center text-inherit\">\n <ng-icon\n name=\"heroCheck\"\n size=\"20px\"\n />\n </span>\n }\n\n @if (!isLoading() && !isSuccessIconDisplayed()) {\n {{ label() }}\n }\n</button>\n", styles: [".spinner{display:inline-block;border-radius:50%;width:1em;height:1em;border:.215em solid transparent;vertical-align:middle;font-size:16px;border-top-color:#fff;animation:spin 1s cubic-bezier(.55,.15,.45,.85) infinite}.btn.btn-success{line-height:0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
532
602
|
}
|
|
533
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
603
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SubmitButtonComponent, decorators: [{
|
|
534
604
|
type: Component,
|
|
535
|
-
args: [{ selector: 'skcr-submit-button', imports: [
|
|
605
|
+
args: [{ selector: 'skcr-submit-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
536
606
|
NgClass,
|
|
537
607
|
NgIcon,
|
|
538
608
|
], template: "<button\n class=\"btn btn-large w-full\"\n type=\"button\"\n [class]=\"colorVariant()\"\n [ngClass]=\"{\n 'btn-success': isSuccessIconDisplayed(),\n 'btn-full': isFullWidth(),\n }\"\n [disabled]=\"isLoading() || isSuccessIconDisplayed() || isDisabled()\"\n (click)=\"handleCLick()\"\n>\n @if (isLoading()) {\n <span class=\"spinner\"></span>\n }\n\n @if (isSuccessIconDisplayed()) {\n <span class=\"flex items-center justify-center text-inherit\">\n <ng-icon\n name=\"heroCheck\"\n size=\"20px\"\n />\n </span>\n }\n\n @if (!isLoading() && !isSuccessIconDisplayed()) {\n {{ label() }}\n }\n</button>\n", styles: [".spinner{display:inline-block;border-radius:50%;width:1em;height:1em;border:.215em solid transparent;vertical-align:middle;font-size:16px;border-top-color:#fff;animation:spin 1s cubic-bezier(.55,.15,.45,.85) infinite}.btn.btn-success{line-height:0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
@@ -540,69 +610,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
540
610
|
|
|
541
611
|
class CheckboxComponent {
|
|
542
612
|
constructor() {
|
|
543
|
-
this.name = input('',
|
|
544
|
-
|
|
545
|
-
this.
|
|
546
|
-
|
|
547
|
-
this.
|
|
548
|
-
|
|
549
|
-
this.
|
|
613
|
+
this.name = input('', /* @ts-ignore */
|
|
614
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
615
|
+
this.label = input('', /* @ts-ignore */
|
|
616
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
617
|
+
this.subLabel = input('', /* @ts-ignore */
|
|
618
|
+
...(ngDevMode ? [{ debugName: "subLabel" }] : /* istanbul ignore next */ []));
|
|
619
|
+
this.isDisabled = input(false, /* @ts-ignore */
|
|
620
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
621
|
+
this.isWithFullSpace = input(false, /* @ts-ignore */
|
|
622
|
+
...(ngDevMode ? [{ debugName: "isWithFullSpace" }] : /* istanbul ignore next */ []));
|
|
623
|
+
this.isLabelLeft = input(false, /* @ts-ignore */
|
|
624
|
+
...(ngDevMode ? [{ debugName: "isLabelLeft" }] : /* istanbul ignore next */ []));
|
|
625
|
+
this.checked = model(false, /* @ts-ignore */
|
|
626
|
+
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
550
627
|
}
|
|
551
628
|
handleToggleClick() {
|
|
552
629
|
if (!this.isDisabled()) {
|
|
553
630
|
this.checked.update(currentValue => !currentValue);
|
|
554
631
|
}
|
|
555
632
|
}
|
|
556
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
557
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
633
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
634
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CheckboxComponent, isStandalone: true, selector: "skcr-checkbox", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isWithFullSpace: { classPropertyName: "isWithFullSpace", publicName: "isWithFullSpace", isSignal: true, isRequired: false, transformFunction: null }, isLabelLeft: { classPropertyName: "isLabelLeft", publicName: "isLabelLeft", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<div\n class=\"flex items-center gap-2\"\n [class.flex-row-reverse]=\"!isLabelLeft()\"\n [ngClass]=\"{\n 'justify-between': isWithFullSpace(),\n }\"\n>\n <div class=\"flex flex-col gap-1\">\n <label\n [ngClass]=\"{\n 'opacity-50': isDisabled(),\n 'cursor-pointer': !isDisabled(),\n }\"\n [for]=\"name()\"\n >\n {{ label() }}\n </label>\n\n @if (subLabel()) {\n <p class=\"text-slate-500\">\n {{ subLabel() }}\n </p>\n }\n </div>\n\n <button\n class=\"relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-hidden\"\n type=\"button\"\n [ngClass]=\"{\n 'bg-primary': checked(),\n 'bg-slate-200': !checked(),\n 'opacity-50 cursor-not-allowed': isDisabled(),\n }\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n (click)=\"handleToggleClick()\"\n [id]=\"name()\"\n >\n <span class=\"sr-only\">\n {{ label() }}\n </span>\n\n <span\n [class]=\"\n 'pointer-events-none inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out ' +\n (checked() ? 'translate-x-5' : 'translate-x-0')\n \"\n aria-hidden=\"true\"\n ></span>\n </button>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
558
635
|
}
|
|
559
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
636
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
560
637
|
type: Component,
|
|
561
|
-
args: [{ selector: 'skcr-checkbox', imports: [
|
|
638
|
+
args: [{ selector: 'skcr-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
562
639
|
NgClass,
|
|
563
640
|
], template: "<div\n class=\"flex items-center gap-2\"\n [class.flex-row-reverse]=\"!isLabelLeft()\"\n [ngClass]=\"{\n 'justify-between': isWithFullSpace(),\n }\"\n>\n <div class=\"flex flex-col gap-1\">\n <label\n [ngClass]=\"{\n 'opacity-50': isDisabled(),\n 'cursor-pointer': !isDisabled(),\n }\"\n [for]=\"name()\"\n >\n {{ label() }}\n </label>\n\n @if (subLabel()) {\n <p class=\"text-slate-500\">\n {{ subLabel() }}\n </p>\n }\n </div>\n\n <button\n class=\"relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-hidden\"\n type=\"button\"\n [ngClass]=\"{\n 'bg-primary': checked(),\n 'bg-slate-200': !checked(),\n 'opacity-50 cursor-not-allowed': isDisabled(),\n }\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n (click)=\"handleToggleClick()\"\n [id]=\"name()\"\n >\n <span class=\"sr-only\">\n {{ label() }}\n </span>\n\n <span\n [class]=\"\n 'pointer-events-none inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out ' +\n (checked() ? 'translate-x-5' : 'translate-x-0')\n \"\n aria-hidden=\"true\"\n ></span>\n </button>\n</div>\n" }]
|
|
564
641
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isWithFullSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "isWithFullSpace", required: false }] }], isLabelLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLabelLeft", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
|
|
565
642
|
|
|
566
643
|
class CheckboxClassicComponent {
|
|
567
644
|
constructor() {
|
|
568
|
-
this.name = input('',
|
|
569
|
-
|
|
570
|
-
this.
|
|
571
|
-
|
|
645
|
+
this.name = input('', /* @ts-ignore */
|
|
646
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
647
|
+
this.label = input('', /* @ts-ignore */
|
|
648
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
649
|
+
this.isDisabled = input(false, /* @ts-ignore */
|
|
650
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
651
|
+
this.checked = model(false, /* @ts-ignore */
|
|
652
|
+
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
572
653
|
}
|
|
573
654
|
handleToggleClick() {
|
|
574
655
|
if (!this.isDisabled()) {
|
|
575
656
|
this.checked.set(!this.checked());
|
|
576
657
|
}
|
|
577
658
|
}
|
|
578
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
579
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
659
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckboxClassicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
660
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: CheckboxClassicComponent, isStandalone: true, selector: "skcr-checkbox-classic", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<div\n class=\"flex items-center\"\n (click)=\"handleToggleClick()\"\n [class.gap-1.5]=\"!!label()\"\n>\n <div class=\"group grid size-4 grid-cols-1\">\n <input\n class=\"col-start-1 cursor-pointer row-start-1 appearance-none rounded-sm border border-border-color bg-white checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:border-border-color disabled:bg-slate-50 disabled:checked:bg-slate-50\"\n type=\"checkbox\"\n [id]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n />\n\n <svg\n class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-slate-950/25 dark:group-has-disabled:stroke-white/25\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n class=\"opacity-0 group-has-checked:opacity-100\"\n d=\"M3 8L6 11L11 3.5\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n class=\"opacity-0 group-has-indeterminate:opacity-100\"\n d=\"M3 7H11\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n\n <label\n class=\"leading-none cursor-pointer\"\n [class.cursor-not-allowed]=\"isDisabled()\"\n [class.opacity-50]=\"isDisabled()\"\n >\n {{ label() }}\n </label>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
580
661
|
}
|
|
581
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
662
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckboxClassicComponent, decorators: [{
|
|
582
663
|
type: Component,
|
|
583
|
-
args: [{ selector: 'skcr-checkbox-classic', template: "<div\n class=\"flex items-center\"\n (click)=\"handleToggleClick()\"\n [class.gap-1.5]=\"!!label()\"\n>\n <div class=\"group grid size-4 grid-cols-1\">\n <input\n class=\"col-start-1 cursor-pointer row-start-1 appearance-none rounded-sm border border-border-color bg-white checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:border-border-color disabled:bg-slate-50 disabled:checked:bg-slate-50\"\n type=\"checkbox\"\n [id]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n />\n\n <svg\n class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-slate-950/25 dark:group-has-disabled:stroke-white/25\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n class=\"opacity-0 group-has-checked:opacity-100\"\n d=\"M3 8L6 11L11 3.5\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n class=\"opacity-0 group-has-indeterminate:opacity-100\"\n d=\"M3 7H11\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n\n <label\n class=\"leading-none cursor-pointer\"\n [class.cursor-not-allowed]=\"isDisabled()\"\n [class.opacity-50]=\"isDisabled()\"\n >\n {{ label() }}\n </label>\n</div>\n" }]
|
|
664
|
+
args: [{ selector: 'skcr-checkbox-classic', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"flex items-center\"\n (click)=\"handleToggleClick()\"\n [class.gap-1.5]=\"!!label()\"\n>\n <div class=\"group grid size-4 grid-cols-1\">\n <input\n class=\"col-start-1 cursor-pointer row-start-1 appearance-none rounded-sm border border-border-color bg-white checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:border-border-color disabled:bg-slate-50 disabled:checked:bg-slate-50\"\n type=\"checkbox\"\n [id]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n />\n\n <svg\n class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-slate-950/25 dark:group-has-disabled:stroke-white/25\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n class=\"opacity-0 group-has-checked:opacity-100\"\n d=\"M3 8L6 11L11 3.5\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n class=\"opacity-0 group-has-indeterminate:opacity-100\"\n d=\"M3 7H11\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n\n <label\n class=\"leading-none cursor-pointer\"\n [class.cursor-not-allowed]=\"isDisabled()\"\n [class.opacity-50]=\"isDisabled()\"\n >\n {{ label() }}\n </label>\n</div>\n" }]
|
|
584
665
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
|
|
585
666
|
|
|
586
667
|
class ComboboxMultiComponent {
|
|
587
668
|
constructor() {
|
|
588
|
-
this.value = model([],
|
|
589
|
-
|
|
590
|
-
this.
|
|
591
|
-
|
|
592
|
-
this.
|
|
593
|
-
|
|
594
|
-
this.
|
|
595
|
-
|
|
596
|
-
this.
|
|
669
|
+
this.value = model([], /* @ts-ignore */
|
|
670
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
671
|
+
this.options = input.required(/* @ts-ignore */
|
|
672
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
673
|
+
this.label = input('', /* @ts-ignore */
|
|
674
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
675
|
+
this.placeholder = input('Search...', /* @ts-ignore */
|
|
676
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
677
|
+
this.isInvalid = input(false, /* @ts-ignore */
|
|
678
|
+
...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
|
|
679
|
+
this.isDisabled = input(false, /* @ts-ignore */
|
|
680
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
681
|
+
this.isOptional = input(false, /* @ts-ignore */
|
|
682
|
+
...(ngDevMode ? [{ debugName: "isOptional" }] : /* istanbul ignore next */ []));
|
|
683
|
+
this.isFullWidth = input(true, /* @ts-ignore */
|
|
684
|
+
...(ngDevMode ? [{ debugName: "isFullWidth" }] : /* istanbul ignore next */ []));
|
|
685
|
+
this.isStateless = input(false, /* @ts-ignore */
|
|
686
|
+
...(ngDevMode ? [{ debugName: "isStateless" }] : /* istanbul ignore next */ []));
|
|
597
687
|
this.optionSelected = output();
|
|
598
|
-
this.searchTerm = signal('',
|
|
688
|
+
this.searchTerm = signal('', /* @ts-ignore */
|
|
689
|
+
...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
599
690
|
this.searchField = form(this.searchTerm, (p) => {
|
|
600
691
|
disabled(p, () => this.isDisabled());
|
|
601
692
|
});
|
|
602
|
-
this.isOpen = signal(false,
|
|
603
|
-
|
|
604
|
-
this.
|
|
605
|
-
|
|
693
|
+
this.isOpen = signal(false, /* @ts-ignore */
|
|
694
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
695
|
+
this.dropdownTop = signal(0, /* @ts-ignore */
|
|
696
|
+
...(ngDevMode ? [{ debugName: "dropdownTop" }] : /* istanbul ignore next */ []));
|
|
697
|
+
this.dropdownLeft = signal(0, /* @ts-ignore */
|
|
698
|
+
...(ngDevMode ? [{ debugName: "dropdownLeft" }] : /* istanbul ignore next */ []));
|
|
699
|
+
this.dropdownWidth = signal(0, /* @ts-ignore */
|
|
700
|
+
...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
|
|
606
701
|
this.formattedOptions = computed(() => {
|
|
607
702
|
let formattedOptions = this.options() || [];
|
|
608
703
|
if (formattedOptions[0]?.value === undefined) {
|
|
@@ -614,16 +709,19 @@ class ComboboxMultiComponent {
|
|
|
614
709
|
});
|
|
615
710
|
}
|
|
616
711
|
return formattedOptions;
|
|
617
|
-
},
|
|
712
|
+
}, /* @ts-ignore */
|
|
713
|
+
...(ngDevMode ? [{ debugName: "formattedOptions" }] : /* istanbul ignore next */ []));
|
|
618
714
|
this.filteredOptions = computed(() => {
|
|
619
715
|
const normalizedQuery = this.normalizeString(this.searchTerm());
|
|
620
716
|
return this.formattedOptions().filter(option => {
|
|
621
717
|
return this.normalizeString(option.name).includes(normalizedQuery);
|
|
622
718
|
});
|
|
623
|
-
},
|
|
719
|
+
}, /* @ts-ignore */
|
|
720
|
+
...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
624
721
|
this.selectedOptions = computed(() => {
|
|
625
722
|
return this.formattedOptions().filter(option => this.value().includes(option.value));
|
|
626
|
-
},
|
|
723
|
+
}, /* @ts-ignore */
|
|
724
|
+
...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
|
|
627
725
|
this.elRef = inject(ElementRef);
|
|
628
726
|
this.resizeObserver = null;
|
|
629
727
|
this.previousSearchTerm = '';
|
|
@@ -729,17 +827,17 @@ class ComboboxMultiComponent {
|
|
|
729
827
|
this.resizeObserver?.disconnect();
|
|
730
828
|
this.resizeObserver = null;
|
|
731
829
|
}
|
|
732
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
733
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
830
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ComboboxMultiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
831
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ComboboxMultiComponent, isStandalone: true, selector: "skcr-combobox-multi", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isOptional: { classPropertyName: "isOptional", publicName: "isOptional", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, isStateless: { classPropertyName: "isStateless", publicName: "isStateless", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, ngImport: i0, template: "<div>\n @if (label()) {\n <label\n class=\"mb-1 flex items-center gap-2\"\n >\n {{ label() }}\n\n @if (isOptional()) {\n <span class=\"text-xs text-slate-500\"> Optional </span>\n }\n </label>\n }\n\n <div\n class=\"relative\"\n [ngClass]=\"{\n 'w-fit': !isFullWidth(),\n 'w-full': isFullWidth(),\n }\"\n >\n <div class=\"grid w-full min-h-9 cursor-text grid-cols-1 rounded-md shadow-sm py-2 px-3 text-left outline-1 -outline-offset-1 outline-border-color focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary sm:text-body-small/6 bg-white\"\n [ngClass]=\"{\n 'outline-destructive focus-within:outline-destructive': isInvalid(),\n 'cursor-not-allowed bg-slate-50': isDisabled(),\n }\"\n >\n <div class=\"col-start-1 row-start-1 flex items-center gap-2 pr-8\">\n <div class=\"pointer-events-none flex items-center\">\n <ng-icon name=\"heroMagnifyingGlass\" />\n </div>\n\n @if (selectedOptions().length > 0) {\n <div class=\"flex flex-wrap gap-1 max-h-[4rem] overflow-auto scrollbar-hide\">\n @for (selectedOption of selectedOptions(); track selectedOption.value) {\n <span\n class=\"px-2 py-0.5 bg-primary-50 text-primary-800 rounded-lg text-caption font-medium flex items-center gap-1\"\n >\n {{ selectedOption.name }}\n\n <span\n class=\"cursor-pointer text-primary-800 flex items-center\"\n (mousedown)=\"removeOption(selectedOption, $event)\"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n >\n <ng-icon\n class=\"size-4\"\n name=\"heroXMark\"\n />\n </span>\n </span>\n }\n </div>\n }\n\n <input\n class=\"min-w-0 flex-1 border-0 bg-transparent p-0 text-body-small placeholder:text-slate-500 focus:outline-none focus:ring-0\"\n type=\"text\"\n [placeholder]=\"selectedOptions().length > 0 ? '' : placeholder()\"\n [formField]=\"searchField\"\n (focus)=\"onInputFocus()\"\n />\n </div>\n </div>\n\n @if (isOpen() && filteredOptions().length > 0) {\n <ul\n class=\"fixed min-w-fit z-50 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-body-small\"\n [style.top.px]=\"dropdownTop()\"\n [style.left.px]=\"dropdownLeft()\"\n [style.width.px]=\"dropdownWidth()\"\n @AnimationTrigger0\n role=\"listbox\"\n >\n @for (option of filteredOptions(); track optionByValue(option); let i = $index) {\n <li\n class=\"relative cursor-pointer select-none py-2 px-2 mx-1 text-left hover:bg-primary-50\"\n [class.bg-primary-50]=\"isItemSelected(option)\"\n (click)=\"handleOptionClick(option, $event)\"\n [id]=\"'listbox-option-' + i\"\n role=\"option\"\n [attr.aria-selected]=\"isItemSelected(option)\"\n >\n <span\n class=\"flex items-center gap-2 min-w-0\"\n [ngClass]=\"{\n 'font-semibold': isItemSelected(option),\n 'font-normal': !isItemSelected(option),\n }\"\n >\n <span class=\"truncate\">\n {{ option.name }}\n </span>\n\n @if (option.icon) {\n <img\n class=\"size-4\"\n [src]=\"'assets/icons/' + option.icon + '.svg'\"\n alt=\"\"\n />\n }\n </span>\n\n @if (isItemSelected(option)) {\n <span class=\"absolute inset-y-0 right-0 flex items-center pr-4 text-primary\">\n <ng-icon name=\"heroCheck\"/>\n </span>\n }\n </li>\n }\n </ul>\n }\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }], animations: [
|
|
734
832
|
trigger('AnimationTrigger0', [
|
|
735
833
|
transition(':leave', [
|
|
736
834
|
style({ opacity: 1 }),
|
|
737
835
|
animate('200ms ease-in-out', style({ opacity: 0 })),
|
|
738
836
|
]),
|
|
739
837
|
]),
|
|
740
|
-
] }); }
|
|
838
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
741
839
|
}
|
|
742
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
840
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ComboboxMultiComponent, decorators: [{
|
|
743
841
|
type: Component,
|
|
744
842
|
args: [{ selector: 'skcr-combobox-multi', animations: [
|
|
745
843
|
trigger('AnimationTrigger0', [
|
|
@@ -748,7 +846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
748
846
|
animate('200ms ease-in-out', style({ opacity: 0 })),
|
|
749
847
|
]),
|
|
750
848
|
]),
|
|
751
|
-
], imports: [
|
|
849
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
752
850
|
NgClass,
|
|
753
851
|
NgIcon,
|
|
754
852
|
FormField,
|
|
@@ -757,25 +855,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
757
855
|
|
|
758
856
|
class SelectComponent {
|
|
759
857
|
constructor() {
|
|
760
|
-
this.
|
|
761
|
-
|
|
762
|
-
this.
|
|
763
|
-
|
|
764
|
-
this.
|
|
765
|
-
|
|
766
|
-
this.
|
|
767
|
-
|
|
768
|
-
this.
|
|
769
|
-
|
|
770
|
-
this.
|
|
771
|
-
|
|
858
|
+
this.searchInput = viewChild('searchInput', /* @ts-ignore */
|
|
859
|
+
...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
|
|
860
|
+
this.value = model(/* @ts-ignore */
|
|
861
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
862
|
+
this.options = input.required(/* @ts-ignore */
|
|
863
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
864
|
+
this.label = input('', /* @ts-ignore */
|
|
865
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
866
|
+
this.placeholder = input('', /* @ts-ignore */
|
|
867
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
868
|
+
this.isInvalid = input(false, /* @ts-ignore */
|
|
869
|
+
...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
|
|
870
|
+
this.isSearchDisplayed = input(false, /* @ts-ignore */
|
|
871
|
+
...(ngDevMode ? [{ debugName: "isSearchDisplayed" }] : /* istanbul ignore next */ []));
|
|
872
|
+
this.isDisabled = input(false, /* @ts-ignore */
|
|
873
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
874
|
+
this.isOptional = input(false, /* @ts-ignore */
|
|
875
|
+
...(ngDevMode ? [{ debugName: "isOptional" }] : /* istanbul ignore next */ []));
|
|
876
|
+
this.isFullWidth = input(false, /* @ts-ignore */
|
|
877
|
+
...(ngDevMode ? [{ debugName: "isFullWidth" }] : /* istanbul ignore next */ []));
|
|
878
|
+
this.isResetDisplayed = input(false, /* @ts-ignore */
|
|
879
|
+
...(ngDevMode ? [{ debugName: "isResetDisplayed" }] : /* istanbul ignore next */ []));
|
|
880
|
+
this.isStateless = input(false, /* @ts-ignore */
|
|
881
|
+
...(ngDevMode ? [{ debugName: "isStateless" }] : /* istanbul ignore next */ []));
|
|
882
|
+
this.isOptionsToTheLeft = input(false, /* @ts-ignore */
|
|
883
|
+
...(ngDevMode ? [{ debugName: "isOptionsToTheLeft" }] : /* istanbul ignore next */ []));
|
|
772
884
|
this.optionSelected = output();
|
|
773
|
-
this.searchTerm = signal('',
|
|
774
|
-
|
|
775
|
-
this.
|
|
776
|
-
|
|
777
|
-
this.
|
|
778
|
-
|
|
885
|
+
this.searchTerm = signal('', /* @ts-ignore */
|
|
886
|
+
...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
887
|
+
this.isOpen = signal(false, /* @ts-ignore */
|
|
888
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
889
|
+
this.dropdownTop = signal(0, /* @ts-ignore */
|
|
890
|
+
...(ngDevMode ? [{ debugName: "dropdownTop" }] : /* istanbul ignore next */ []));
|
|
891
|
+
this.dropdownLeft = signal(0, /* @ts-ignore */
|
|
892
|
+
...(ngDevMode ? [{ debugName: "dropdownLeft" }] : /* istanbul ignore next */ []));
|
|
893
|
+
this.dropdownRight = signal(0, /* @ts-ignore */
|
|
894
|
+
...(ngDevMode ? [{ debugName: "dropdownRight" }] : /* istanbul ignore next */ []));
|
|
895
|
+
this.dropdownWidth = signal(0, /* @ts-ignore */
|
|
896
|
+
...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
|
|
779
897
|
this.formattedOptions = computed(() => {
|
|
780
898
|
let formattedOptions = this.options() || [];
|
|
781
899
|
if (formattedOptions[0]?.value === undefined) {
|
|
@@ -787,7 +905,8 @@ class SelectComponent {
|
|
|
787
905
|
});
|
|
788
906
|
}
|
|
789
907
|
return formattedOptions;
|
|
790
|
-
},
|
|
908
|
+
}, /* @ts-ignore */
|
|
909
|
+
...(ngDevMode ? [{ debugName: "formattedOptions" }] : /* istanbul ignore next */ []));
|
|
791
910
|
this.displayedValue = computed(() => {
|
|
792
911
|
let displayedValue;
|
|
793
912
|
if (this.value() !== null && this.value() !== undefined) {
|
|
@@ -805,13 +924,15 @@ class SelectComponent {
|
|
|
805
924
|
}
|
|
806
925
|
}
|
|
807
926
|
return displayedValue;
|
|
808
|
-
},
|
|
927
|
+
}, /* @ts-ignore */
|
|
928
|
+
...(ngDevMode ? [{ debugName: "displayedValue" }] : /* istanbul ignore next */ []));
|
|
809
929
|
this.filteredOptions = computed(() => {
|
|
810
930
|
const normalizedQuery = this.normalizeString(this.searchTerm());
|
|
811
931
|
return this.formattedOptions().filter(option => {
|
|
812
932
|
return this.normalizeString(option.name).includes(normalizedQuery);
|
|
813
933
|
});
|
|
814
|
-
},
|
|
934
|
+
}, /* @ts-ignore */
|
|
935
|
+
...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
815
936
|
this.elRef = inject(ElementRef);
|
|
816
937
|
this.clickOutsideHandler = (e) => {
|
|
817
938
|
if (!this.elRef.nativeElement.contains(e.target) && this.isOpen()) {
|
|
@@ -836,7 +957,7 @@ class SelectComponent {
|
|
|
836
957
|
window.addEventListener('scroll', this.resizeHandler, true);
|
|
837
958
|
setTimeout(() => {
|
|
838
959
|
if (this.isSearchDisplayed()) {
|
|
839
|
-
this.searchInput
|
|
960
|
+
this.searchInput()?.nativeElement.focus();
|
|
840
961
|
}
|
|
841
962
|
});
|
|
842
963
|
}
|
|
@@ -902,17 +1023,17 @@ class SelectComponent {
|
|
|
902
1023
|
}
|
|
903
1024
|
}
|
|
904
1025
|
}
|
|
905
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
906
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1026
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1027
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SelectComponent, isStandalone: true, selector: "skcr-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isSearchDisplayed: { classPropertyName: "isSearchDisplayed", publicName: "isSearchDisplayed", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isOptional: { classPropertyName: "isOptional", publicName: "isOptional", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, isResetDisplayed: { classPropertyName: "isResetDisplayed", publicName: "isResetDisplayed", isSignal: true, isRequired: false, transformFunction: null }, isStateless: { classPropertyName: "isStateless", publicName: "isStateless", isSignal: true, isRequired: false, transformFunction: null }, isOptionsToTheLeft: { classPropertyName: "isOptionsToTheLeft", publicName: "isOptionsToTheLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n @if (label()) {\n <label class=\"flex items-center gap-2 mb-1\">\n {{ label() }}\n\n @if (isOptional()) {\n <span class=\"text-xs text-slate-500\">\n {{ 'Optional' }}\n </span>\n }\n </label>\n }\n\n <div\n class=\"relative\"\n [ngClass]=\"{\n 'w-fit': !isFullWidth(),\n 'w-full': isFullWidth(),\n }\"\n >\n <button\n class=\"grid w-full min-h-9 cursor-default grid-cols-1 rounded-md shadow-sm py-2 px-3 text-left outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary sm:text-body-small/6\"\n (click)=\"toggleSelect()\"\n [disabled]=\"isDisabled() || !options().length\"\n [ngClass]=\"{\n 'outline-destructive focus:outline-destructive focus:ring-destructive': isInvalid(),\n 'focus:outline-primary focus:ring-primary': !isInvalid(),\n 'cursor-not-allowed bg-slate-50': isDisabled() || !options().length,\n 'cursor-pointer bg-white': !isDisabled() && !!options().length,\n }\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-haspopup=\"listbox\"\n aria-labelledby=\"multiselect-label\"\n >\n <span\n class=\"col-start-1 row-start-1 items-center gap-2 truncate pr-6 h-5\"\n [ngClass]=\"{\n 'text-slate-400': !this.value(),\n }\"\n >\n {{ this.displayedValue() }}\n </span>\n\n <span class=\"col-start-1 row-start-1 flex items-center gap-2 self-center justify-self-end text-slate-500\">\n @if (isResetDisplayed() && value() !== null && value() !== undefined) {\n <span\n class=\"size-5 sm:size-4 cursor-pointer\"\n (click)=\"clearSelection($event)\"\n >\n <ng-icon name=\"heroXMark\"/>\n </span>\n }\n <span class=\"size-5 sm:size-4\">\n <ng-icon name=\"heroChevronUpDown\"/>\n </span>\n </span>\n </button>\n\n @if (isOpen()) {\n <ul\n class=\"fixed min-w-fit z-50 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-body-small\"\n [style.top.px]=\"dropdownTop()\"\n [style.left.px]=\"isOptionsToTheLeft() ? null : dropdownLeft()\"\n [style.right.px]=\"isOptionsToTheLeft() ? dropdownRight() : null\"\n [style.width.px]=\"dropdownWidth() || null\"\n @AnimationTrigger0\n role=\"listbox\"\n >\n @if (isSearchDisplayed()) {\n <li class=\"relative cursor-default py-2 px-3 shadow-sm select-none\">\n <div class=\"pointer-events-none absolute inset-y-0 left-1 flex items-center pl-3\">\n <span class=\"flex items-center\">\n <ng-icon name=\"heroMagnifyingGlass\"/>\n </span>\n </div>\n\n <input\n class=\"block rounded-md w-full pl-6 pr-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary placeholder:text-slate-500\"\n #searchInput\n type=\"text\"\n [value]=\"searchTerm()\"\n (input)=\"onSearchTermInput($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </li>\n }\n\n @for (option of filteredOptions(); track optionByValue(i, option); let i = $index) {\n <li\n class=\"relative cursor-pointer select-none py-2 px-2 mx-1 text-left hover:bg-primary-50\"\n [class.bg-primary-50]=\"isItemSelected(option)\"\n (click)=\"handleOptionClick(option, $event)\"\n [id]=\"'listbox-option-' + i\"\n role=\"option\"\n [attr.aria-selected]=\"isItemSelected(option)\"\n >\n <span\n class=\"flex items-center gap-2 min-w-0\"\n [ngClass]=\"{\n 'font-semibold': isItemSelected(option),\n 'font-normal': !isItemSelected(option),\n }\"\n >\n <span class=\"truncate\">\n {{ option.name }}\n </span>\n\n @if (option.icon) {\n <img\n class=\"size-4\"\n [src]=\"'assets/icons/' + option.icon + '.svg'\"\n alt=\"\"\n />\n }\n </span>\n\n @if (isItemSelected(option)) {\n <span class=\"absolute inset-y-0 right-0 flex items-center pr-4 text-primary\">\n <ng-icon name=\"heroCheck\"/>\n </span>\n }\n </li>\n }\n </ul>\n }\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: FormsModule }], animations: [
|
|
907
1028
|
trigger('AnimationTrigger0', [
|
|
908
1029
|
transition(':leave', [
|
|
909
1030
|
style({ opacity: 1 }),
|
|
910
1031
|
animate('200ms ease-in-out', style({ opacity: 0 })),
|
|
911
1032
|
]),
|
|
912
1033
|
]),
|
|
913
|
-
] }); }
|
|
1034
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
914
1035
|
}
|
|
915
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1036
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectComponent, decorators: [{
|
|
916
1037
|
type: Component,
|
|
917
1038
|
args: [{ selector: 'skcr-select', animations: [
|
|
918
1039
|
trigger('AnimationTrigger0', [
|
|
@@ -921,34 +1042,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
921
1042
|
animate('200ms ease-in-out', style({ opacity: 0 })),
|
|
922
1043
|
]),
|
|
923
1044
|
]),
|
|
924
|
-
], imports: [
|
|
1045
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
925
1046
|
NgClass,
|
|
926
1047
|
NgIcon,
|
|
927
1048
|
FormsModule,
|
|
928
1049
|
], template: "<div>\n @if (label()) {\n <label class=\"flex items-center gap-2 mb-1\">\n {{ label() }}\n\n @if (isOptional()) {\n <span class=\"text-xs text-slate-500\">\n {{ 'Optional' }}\n </span>\n }\n </label>\n }\n\n <div\n class=\"relative\"\n [ngClass]=\"{\n 'w-fit': !isFullWidth(),\n 'w-full': isFullWidth(),\n }\"\n >\n <button\n class=\"grid w-full min-h-9 cursor-default grid-cols-1 rounded-md shadow-sm py-2 px-3 text-left outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary sm:text-body-small/6\"\n (click)=\"toggleSelect()\"\n [disabled]=\"isDisabled() || !options().length\"\n [ngClass]=\"{\n 'outline-destructive focus:outline-destructive focus:ring-destructive': isInvalid(),\n 'focus:outline-primary focus:ring-primary': !isInvalid(),\n 'cursor-not-allowed bg-slate-50': isDisabled() || !options().length,\n 'cursor-pointer bg-white': !isDisabled() && !!options().length,\n }\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-haspopup=\"listbox\"\n aria-labelledby=\"multiselect-label\"\n >\n <span\n class=\"col-start-1 row-start-1 items-center gap-2 truncate pr-6 h-5\"\n [ngClass]=\"{\n 'text-slate-400': !this.value(),\n }\"\n >\n {{ this.displayedValue() }}\n </span>\n\n <span class=\"col-start-1 row-start-1 flex items-center gap-2 self-center justify-self-end text-slate-500\">\n @if (isResetDisplayed() && value() !== null && value() !== undefined) {\n <span\n class=\"size-5 sm:size-4 cursor-pointer\"\n (click)=\"clearSelection($event)\"\n >\n <ng-icon name=\"heroXMark\"/>\n </span>\n }\n <span class=\"size-5 sm:size-4\">\n <ng-icon name=\"heroChevronUpDown\"/>\n </span>\n </span>\n </button>\n\n @if (isOpen()) {\n <ul\n class=\"fixed min-w-fit z-50 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-body-small\"\n [style.top.px]=\"dropdownTop()\"\n [style.left.px]=\"isOptionsToTheLeft() ? null : dropdownLeft()\"\n [style.right.px]=\"isOptionsToTheLeft() ? dropdownRight() : null\"\n [style.width.px]=\"dropdownWidth() || null\"\n @AnimationTrigger0\n role=\"listbox\"\n >\n @if (isSearchDisplayed()) {\n <li class=\"relative cursor-default py-2 px-3 shadow-sm select-none\">\n <div class=\"pointer-events-none absolute inset-y-0 left-1 flex items-center pl-3\">\n <span class=\"flex items-center\">\n <ng-icon name=\"heroMagnifyingGlass\"/>\n </span>\n </div>\n\n <input\n class=\"block rounded-md w-full pl-6 pr-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary placeholder:text-slate-500\"\n #searchInput\n type=\"text\"\n [value]=\"searchTerm()\"\n (input)=\"onSearchTermInput($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </li>\n }\n\n @for (option of filteredOptions(); track optionByValue(i, option); let i = $index) {\n <li\n class=\"relative cursor-pointer select-none py-2 px-2 mx-1 text-left hover:bg-primary-50\"\n [class.bg-primary-50]=\"isItemSelected(option)\"\n (click)=\"handleOptionClick(option, $event)\"\n [id]=\"'listbox-option-' + i\"\n role=\"option\"\n [attr.aria-selected]=\"isItemSelected(option)\"\n >\n <span\n class=\"flex items-center gap-2 min-w-0\"\n [ngClass]=\"{\n 'font-semibold': isItemSelected(option),\n 'font-normal': !isItemSelected(option),\n }\"\n >\n <span class=\"truncate\">\n {{ option.name }}\n </span>\n\n @if (option.icon) {\n <img\n class=\"size-4\"\n [src]=\"'assets/icons/' + option.icon + '.svg'\"\n alt=\"\"\n />\n }\n </span>\n\n @if (isItemSelected(option)) {\n <span class=\"absolute inset-y-0 right-0 flex items-center pr-4 text-primary\">\n <ng-icon name=\"heroCheck\"/>\n </span>\n }\n </li>\n }\n </ul>\n }\n </div>\n</div>\n" }]
|
|
929
|
-
}], propDecorators: { searchInput: [{
|
|
930
|
-
type: ViewChild,
|
|
931
|
-
args: ['searchInput']
|
|
932
|
-
}], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], isSearchDisplayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSearchDisplayed", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isOptional: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOptional", required: false }] }], isFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFullWidth", required: false }] }], isResetDisplayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isResetDisplayed", required: false }] }], isStateless: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStateless", required: false }] }], isOptionsToTheLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOptionsToTheLeft", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }] } });
|
|
1050
|
+
}], propDecorators: { searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], isSearchDisplayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSearchDisplayed", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isOptional: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOptional", required: false }] }], isFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFullWidth", required: false }] }], isResetDisplayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isResetDisplayed", required: false }] }], isStateless: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStateless", required: false }] }], isOptionsToTheLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOptionsToTheLeft", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }] } });
|
|
933
1051
|
|
|
934
1052
|
class LoaderComponent {
|
|
935
1053
|
constructor() {
|
|
936
|
-
this.size = input('xl',
|
|
937
|
-
|
|
1054
|
+
this.size = input('xl', /* @ts-ignore */
|
|
1055
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1056
|
+
this.isNotAbsolute = input(false, /* @ts-ignore */
|
|
1057
|
+
...(ngDevMode ? [{ debugName: "isNotAbsolute" }] : /* istanbul ignore next */ []));
|
|
938
1058
|
}
|
|
939
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
940
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1059
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1060
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: LoaderComponent, isStandalone: true, selector: "skcr-loader", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isNotAbsolute: { classPropertyName: "isNotAbsolute", publicName: "isNotAbsolute", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"'loader ' + size()\"></div>\n", styles: [".loader{aspect-ratio:1;display:grid;border:4px solid rgba(0,0,0,0);border-radius:50%;border-right-color:var(--color-primary);animation:l15 1s infinite linear}.loader.xl{width:100px}.loader.sm{width:50px}.loader.xs{width:35px}.loader:before,.loader:after{content:\"\";grid-area:1/1;margin:2px;border:inherit;border-radius:50%;animation:l15 2s infinite}.loader:after{margin:8px;animation-duration:3s}@keyframes l15{to{transform:rotate(1turn)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
941
1061
|
}
|
|
942
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1062
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
943
1063
|
type: Component,
|
|
944
|
-
args: [{ selector: 'skcr-loader', template: "<div [class]=\"'loader ' + size()\"></div>\n", styles: [".loader{aspect-ratio:1;display:grid;border:4px solid rgba(0,0,0,0);border-radius:50%;border-right-color:var(--color-primary);animation:l15 1s infinite linear}.loader.xl{width:100px}.loader.sm{width:50px}.loader.xs{width:35px}.loader:before,.loader:after{content:\"\";grid-area:1/1;margin:2px;border:inherit;border-radius:50%;animation:l15 2s infinite}.loader:after{margin:8px;animation-duration:3s}@keyframes l15{to{transform:rotate(1turn)}}\n"] }]
|
|
1064
|
+
args: [{ selector: 'skcr-loader', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'loader ' + size()\"></div>\n", styles: [".loader{aspect-ratio:1;display:grid;border:4px solid rgba(0,0,0,0);border-radius:50%;border-right-color:var(--color-primary);animation:l15 1s infinite linear}.loader.xl{width:100px}.loader.sm{width:50px}.loader.xs{width:35px}.loader:before,.loader:after{content:\"\";grid-area:1/1;margin:2px;border:inherit;border-radius:50%;animation:l15 2s infinite}.loader:after{margin:8px;animation-duration:3s}@keyframes l15{to{transform:rotate(1turn)}}\n"] }]
|
|
945
1065
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isNotAbsolute: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNotAbsolute", required: false }] }] } });
|
|
946
1066
|
|
|
947
1067
|
class TooltipDirective {
|
|
948
1068
|
constructor() {
|
|
949
|
-
this.skcrTooltip = input('',
|
|
950
|
-
|
|
951
|
-
this.
|
|
1069
|
+
this.skcrTooltip = input('', /* @ts-ignore */
|
|
1070
|
+
...(ngDevMode ? [{ debugName: "skcrTooltip" }] : /* istanbul ignore next */ []));
|
|
1071
|
+
this.skcrTooltipIsLeftSide = input(false, /* @ts-ignore */
|
|
1072
|
+
...(ngDevMode ? [{ debugName: "skcrTooltipIsLeftSide" }] : /* istanbul ignore next */ []));
|
|
1073
|
+
this.skcrTooltipContainer = input(null, /* @ts-ignore */
|
|
1074
|
+
...(ngDevMode ? [{ debugName: "skcrTooltipContainer" }] : /* istanbul ignore next */ []));
|
|
952
1075
|
this.renderer = inject(Renderer2);
|
|
953
1076
|
this.document = inject(DOCUMENT);
|
|
954
1077
|
this.activeTooltip = null;
|
|
@@ -1012,10 +1135,10 @@ class TooltipDirective {
|
|
|
1012
1135
|
}
|
|
1013
1136
|
this.renderer.setStyle(tooltip, 'top', `${event.clientY - 30}px`);
|
|
1014
1137
|
}
|
|
1015
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1016
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1138
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1139
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TooltipDirective, isStandalone: true, selector: "[skcrTooltip]", inputs: { skcrTooltip: { classPropertyName: "skcrTooltip", publicName: "skcrTooltip", isSignal: true, isRequired: false, transformFunction: null }, skcrTooltipIsLeftSide: { classPropertyName: "skcrTooltipIsLeftSide", publicName: "skcrTooltipIsLeftSide", isSignal: true, isRequired: false, transformFunction: null }, skcrTooltipContainer: { classPropertyName: "skcrTooltipContainer", publicName: "skcrTooltipContainer", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "handleMouseEnter($event)", "mouseleave": "handleMouseLeave()", "mousemove": "handleMouseMove($event)" } }, ngImport: i0 }); }
|
|
1017
1140
|
}
|
|
1018
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
1019
1142
|
type: Directive,
|
|
1020
1143
|
args: [{
|
|
1021
1144
|
selector: '[skcrTooltip]',
|
|
@@ -1034,23 +1157,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1034
1157
|
|
|
1035
1158
|
class TableHeaderCellComponent {
|
|
1036
1159
|
constructor() {
|
|
1037
|
-
this.name = input.required(
|
|
1038
|
-
|
|
1039
|
-
this.
|
|
1040
|
-
|
|
1041
|
-
this.
|
|
1042
|
-
|
|
1043
|
-
this.
|
|
1160
|
+
this.name = input.required(/* @ts-ignore */
|
|
1161
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1162
|
+
this.sortDirection = input(ESortDirection.None, /* @ts-ignore */
|
|
1163
|
+
...(ngDevMode ? [{ debugName: "sortDirection" }] : /* istanbul ignore next */ []));
|
|
1164
|
+
this.isDisabled = input(false, /* @ts-ignore */
|
|
1165
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
1166
|
+
this.isOrderByDisplayed = input(false, /* @ts-ignore */
|
|
1167
|
+
...(ngDevMode ? [{ debugName: "isOrderByDisplayed" }] : /* istanbul ignore next */ []));
|
|
1168
|
+
this.isInFixedCol = input(false, /* @ts-ignore */
|
|
1169
|
+
...(ngDevMode ? [{ debugName: "isInFixedCol" }] : /* istanbul ignore next */ []));
|
|
1170
|
+
this.disabledText = input('Sorting is possible on this value only for query with less than 10000 results.', /* @ts-ignore */
|
|
1171
|
+
...(ngDevMode ? [{ debugName: "disabledText" }] : /* istanbul ignore next */ []));
|
|
1172
|
+
this.tooltipText = input(/* @ts-ignore */
|
|
1173
|
+
...(ngDevMode ? [undefined, { debugName: "tooltipText" }] : /* istanbul ignore next */ []));
|
|
1044
1174
|
this.clickEvent = output();
|
|
1045
1175
|
this.hasTooltipToDisplay = computed(() => {
|
|
1046
1176
|
return this.isDisabled() || !!this.tooltipText();
|
|
1047
|
-
},
|
|
1177
|
+
}, /* @ts-ignore */
|
|
1178
|
+
...(ngDevMode ? [{ debugName: "hasTooltipToDisplay" }] : /* istanbul ignore next */ []));
|
|
1048
1179
|
this.tooltipContent = computed(() => {
|
|
1049
1180
|
if (!this.hasTooltipToDisplay()) {
|
|
1050
1181
|
return '';
|
|
1051
1182
|
}
|
|
1052
1183
|
return this.isDisabled() ? this.disabledText() : (this.tooltipText() ?? '');
|
|
1053
|
-
},
|
|
1184
|
+
}, /* @ts-ignore */
|
|
1185
|
+
...(ngDevMode ? [{ debugName: "tooltipContent" }] : /* istanbul ignore next */ []));
|
|
1054
1186
|
this.ESortDirection = ESortDirection;
|
|
1055
1187
|
}
|
|
1056
1188
|
emitClickEvent() {
|
|
@@ -1058,22 +1190,22 @@ class TableHeaderCellComponent {
|
|
|
1058
1190
|
this.clickEvent.emit();
|
|
1059
1191
|
}
|
|
1060
1192
|
}
|
|
1061
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1062
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1193
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1194
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TableHeaderCellComponent, isStandalone: true, selector: "skcr-table-header-cell", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isOrderByDisplayed: { classPropertyName: "isOrderByDisplayed", publicName: "isOrderByDisplayed", isSignal: true, isRequired: false, transformFunction: null }, isInFixedCol: { classPropertyName: "isInFixedCol", publicName: "isInFixedCol", isSignal: true, isRequired: false, transformFunction: null }, disabledText: { classPropertyName: "disabledText", publicName: "disabledText", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div>\n <button\n class=\"flex cursor-pointer items-center gap-1.5 text-start text-caption font-medium text-slate-500\"\n type=\"button\"\n [class.cursor-not-allowed]=\"isDisabled()\"\n [class.opacity-50]=\"isDisabled()\"\n (click)=\"!isDisabled() && emitClickEvent()\"\n [skcrTooltip]=\"tooltipContent()\"\n >\n <span\n class=\"inline-block whitespace-normal break-words leading-tight\"\n [class.w-[150px]]=\"isInFixedCol() && isOrderByDisplayed()\"\n [class.w-[144px]]=\"isInFixedCol() && !isOrderByDisplayed()\"\n >\n <ng-content></ng-content>\n </span>\n\n @if (isOrderByDisplayed()) {\n <div class=\"shrink-0 flex items-center\">\n <div class=\"shrink-0 flex items-center relative\">\n @switch (sortDirection()) {\n @case (ESortDirection.Ascending) {\n <ng-icon\n class=\"absolute transition-opacity duration-300\"\n name=\"heroChevronUp\"\n @fadeIn\n aria-hidden=\"true\"\n ></ng-icon>\n }\n @case (ESortDirection.Descending) {\n <ng-icon\n class=\"absolute transition-opacity duration-300\"\n name=\"heroChevronDown\"\n @fadeIn\n aria-hidden=\"true\"\n ></ng-icon>\n }\n @case (ESortDirection.None) {\n <ng-icon\n class=\"absolute transition-opacity duration-300\"\n name=\"heroChevronUpDown\"\n @fadeIn\n aria-hidden=\"true\"\n ></ng-icon>\n }\n }\n </div>\n </div>\n }\n </button>\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: TooltipDirective, selector: "[skcrTooltip]", inputs: ["skcrTooltip", "skcrTooltipIsLeftSide", "skcrTooltipContainer"] }], animations: [
|
|
1063
1195
|
trigger('fadeIn', [
|
|
1064
1196
|
transition(':enter', [
|
|
1065
1197
|
style({ opacity: 0 }),
|
|
1066
1198
|
animate('300ms', style({ opacity: 1 })),
|
|
1067
1199
|
]),
|
|
1068
1200
|
]),
|
|
1069
|
-
] }); }
|
|
1201
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1070
1202
|
}
|
|
1071
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TableHeaderCellComponent, decorators: [{
|
|
1072
1204
|
type: Component,
|
|
1073
1205
|
args: [{ selector: 'skcr-table-header-cell', imports: [
|
|
1074
1206
|
NgIcon,
|
|
1075
1207
|
TooltipDirective,
|
|
1076
|
-
], animations: [
|
|
1208
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
1077
1209
|
trigger('fadeIn', [
|
|
1078
1210
|
transition(':enter', [
|
|
1079
1211
|
style({ opacity: 0 }),
|
|
@@ -1085,19 +1217,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1085
1217
|
|
|
1086
1218
|
class TableComponent {
|
|
1087
1219
|
constructor() {
|
|
1088
|
-
this.
|
|
1089
|
-
|
|
1090
|
-
this.
|
|
1091
|
-
|
|
1092
|
-
this.
|
|
1093
|
-
|
|
1094
|
-
this.
|
|
1095
|
-
|
|
1096
|
-
this.
|
|
1220
|
+
this.viewPort = viewChild(CdkVirtualScrollViewport, /* @ts-ignore */
|
|
1221
|
+
...(ngDevMode ? [{ debugName: "viewPort" }] : /* istanbul ignore next */ []));
|
|
1222
|
+
this.itemsList = input.required(/* @ts-ignore */
|
|
1223
|
+
...(ngDevMode ? [{ debugName: "itemsList" }] : /* istanbul ignore next */ []));
|
|
1224
|
+
this.isContentLoading = input(false, /* @ts-ignore */
|
|
1225
|
+
...(ngDevMode ? [{ debugName: "isContentLoading" }] : /* istanbul ignore next */ []));
|
|
1226
|
+
this.columns = input.required(/* @ts-ignore */
|
|
1227
|
+
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
1228
|
+
this.columnCategories = input(/* @ts-ignore */
|
|
1229
|
+
...(ngDevMode ? [undefined, { debugName: "columnCategories" }] : /* istanbul ignore next */ []));
|
|
1230
|
+
this.noRowsMessage = input('', /* @ts-ignore */
|
|
1231
|
+
...(ngDevMode ? [{ debugName: "noRowsMessage" }] : /* istanbul ignore next */ []));
|
|
1232
|
+
this.title = input('', /* @ts-ignore */
|
|
1233
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
1234
|
+
this.fixedColumnsCount = input(0, /* @ts-ignore */
|
|
1235
|
+
...(ngDevMode ? [{ debugName: "fixedColumnsCount" }] : /* istanbul ignore next */ []));
|
|
1236
|
+
this.idKey = input('id', /* @ts-ignore */
|
|
1237
|
+
...(ngDevMode ? [{ debugName: "idKey" }] : /* istanbul ignore next */ []));
|
|
1238
|
+
this.selectedItemIds = input(/* @ts-ignore */
|
|
1239
|
+
...(ngDevMode ? [undefined, { debugName: "selectedItemIds" }] : /* istanbul ignore next */ []));
|
|
1097
1240
|
this.tableEndClose = output();
|
|
1098
|
-
this.headerCellTemplateRef = contentChild('headerCell',
|
|
1099
|
-
|
|
1100
|
-
this.
|
|
1241
|
+
this.headerCellTemplateRef = contentChild('headerCell', /* @ts-ignore */
|
|
1242
|
+
...(ngDevMode ? [{ debugName: "headerCellTemplateRef" }] : /* istanbul ignore next */ []));
|
|
1243
|
+
this.rowCellTemplateRef = contentChild('rowCell', /* @ts-ignore */
|
|
1244
|
+
...(ngDevMode ? [{ debugName: "rowCellTemplateRef" }] : /* istanbul ignore next */ []));
|
|
1245
|
+
this.sortButtons = contentChildren(TableHeaderCellComponent, /* @ts-ignore */
|
|
1246
|
+
...(ngDevMode ? [{ debugName: "sortButtons" }] : /* istanbul ignore next */ []));
|
|
1101
1247
|
this.sortingItem = computed(() => {
|
|
1102
1248
|
const sortButtons = this.sortButtons();
|
|
1103
1249
|
const sortingButton = sortButtons.find(button => button.sortDirection() !== ESortDirection.None);
|
|
@@ -1107,13 +1253,15 @@ class TableComponent {
|
|
|
1107
1253
|
direction: sortingButton.sortDirection(),
|
|
1108
1254
|
}
|
|
1109
1255
|
: null;
|
|
1110
|
-
},
|
|
1256
|
+
}, /* @ts-ignore */
|
|
1257
|
+
...(ngDevMode ? [{ debugName: "sortingItem" }] : /* istanbul ignore next */ []));
|
|
1111
1258
|
}
|
|
1112
1259
|
get inverseOfTranslation() {
|
|
1113
|
-
|
|
1260
|
+
const viewPort = this.viewPort();
|
|
1261
|
+
if (!viewPort || !viewPort['_renderedContentOffset']) {
|
|
1114
1262
|
return '-0px';
|
|
1115
1263
|
}
|
|
1116
|
-
let offset =
|
|
1264
|
+
let offset = viewPort['_renderedContentOffset'];
|
|
1117
1265
|
return `-${offset}px`;
|
|
1118
1266
|
}
|
|
1119
1267
|
onScroll(index) {
|
|
@@ -1123,13 +1271,14 @@ class TableComponent {
|
|
|
1123
1271
|
}
|
|
1124
1272
|
}
|
|
1125
1273
|
scrollToTop() {
|
|
1126
|
-
this.viewPort
|
|
1274
|
+
this.viewPort()?.scrollToIndex(0);
|
|
1127
1275
|
}
|
|
1128
1276
|
refreshViewport() {
|
|
1129
|
-
|
|
1130
|
-
|
|
1277
|
+
const viewPort = this.viewPort();
|
|
1278
|
+
if (viewPort) {
|
|
1279
|
+
viewPort.checkViewportSize();
|
|
1131
1280
|
setTimeout(() => {
|
|
1132
|
-
|
|
1281
|
+
viewPort.checkViewportSize();
|
|
1133
1282
|
}, 100);
|
|
1134
1283
|
}
|
|
1135
1284
|
}
|
|
@@ -1157,29 +1306,29 @@ class TableComponent {
|
|
|
1157
1306
|
}
|
|
1158
1307
|
return false;
|
|
1159
1308
|
}
|
|
1160
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1161
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1309
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1310
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TableComponent, isStandalone: true, selector: "skcr-table", inputs: { itemsList: { classPropertyName: "itemsList", publicName: "itemsList", isSignal: true, isRequired: true, transformFunction: null }, isContentLoading: { classPropertyName: "isContentLoading", publicName: "isContentLoading", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, columnCategories: { classPropertyName: "columnCategories", publicName: "columnCategories", isSignal: true, isRequired: false, transformFunction: null }, noRowsMessage: { classPropertyName: "noRowsMessage", publicName: "noRowsMessage", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, fixedColumnsCount: { classPropertyName: "fixedColumnsCount", publicName: "fixedColumnsCount", isSignal: true, isRequired: false, transformFunction: null }, idKey: { classPropertyName: "idKey", publicName: "idKey", isSignal: true, isRequired: false, transformFunction: null }, selectedItemIds: { classPropertyName: "selectedItemIds", publicName: "selectedItemIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableEndClose: "tableEndClose" }, queries: [{ propertyName: "headerCellTemplateRef", first: true, predicate: ["headerCell"], descendants: true, isSignal: true }, { propertyName: "rowCellTemplateRef", first: true, predicate: ["rowCell"], descendants: true, isSignal: true }, { propertyName: "sortButtons", predicate: TableHeaderCellComponent, isSignal: true }], viewQueries: [{ propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"border-collapse overflow-hidden w-full mb-6 flex flex-col h-full\">\n @if (!!itemsList().length) {\n <cdk-virtual-scroll-viewport\n class=\"block overflow-y-auto overflow-x-auto flex-grow\"\n (scrolledIndexChange)=\"onScroll($event)\"\n itemSize=\"50\"\n\n >\n <table class=\"w-full relative table-auto whitespace-nowrap\">\n <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n <tbody>\n <tr\n class=\"h-[50px] border-b border-slate-200\"\n *cdkVirtualFor=\"let item of itemsList(); let index = index\"\n >\n @for (column of columns(); track column; let isFirst = $first; let islast = $last; let i = $index) {\n <td\n class=\"py-2 px-3 text-body-small whitespace-nowrap\"\n [ngClass]=\"{\n 'pr-5': islast,\n 'sticky z-[1]': i < fixedColumnsCount(),\n 'border-l border-slate-200': i > 0 && isCategoryStart(i),\n 'bg-white': !isRowSelected(item),\n 'bg-slate-100': isRowSelected(item),\n }\"\n [class.text-end]=\"column === 'actions'\"\n [style.left]=\"i < fixedColumnsCount() ? getColumnLeftPosition(i) : null\"\n >\n <span\n [style.width]=\"i < fixedColumnsCount() ? '150px' : 'auto'\"\n class=\"inline-block whitespace-normal break-words leading-tight\"\n >\n <ng-container\n *ngTemplateOutlet=\"rowCellTemplateRef()!; context: { column, item, index: i }\"\n ></ng-container>\n </span>\n </td>\n }\n </tr>\n\n @if (isContentLoading()) {\n <tr class=\"h-[100px]\">\n <td [attr.colspan]=\"columns().length\" class=\"text-center\">\n <skcr-loader [isNotAbsolute]=\"true\"></skcr-loader>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div class=\"block overflow-x-auto flex-none\">\n <table class=\"w-full relative table-auto whitespace-nowrap\">\n <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n </table>\n </div>\n\n @if (isContentLoading() && !itemsList().length) {\n <div class=\"bg-white flex-grow flex items-center justify-center min-h-[400px]\">\n <skcr-loader [isNotAbsolute]=\"true\"></skcr-loader>\n </div>\n } @else {\n <div class=\"bg-white flex-grow flex items-center justify-center min-h-[400px]\">\n <span class=\"text-slate-500\"> No results </span>\n </div>\n }\n }\n</div>\n\n<ng-template #tableHeader>\n <thead\n class=\"bg-white sticky top-0 z-10 before:content-[''] before:absolute before:bottom-0 before:left-0 before:right-0 before:h-[1px] before:bg-slate-200\"\n [style.top]=\"inverseOfTranslation\"\n >\n @if (columnCategories()) {\n <tr>\n @for (category of columnCategories(); track $index; let i = $index) {\n <th\n class=\"py-2 p-3 text-left text-caption text-slate-500\"\n style=\"box-shadow: inset 0 -1px 0 0 rgb(226 232 240)\"\n scope=\"colgroup\"\n [attr.colspan]=\"category.colspan\"\n [style.left]=\"i < fixedColumnsCount() ? getColumnLeftPosition(i) : null\"\n [ngClass]=\"{\n 'pl-5': i === 0,\n 'sticky z-[1] bg-white': i === 0,\n 'border-l border-slate-200': i > 0,\n }\"\n >\n {{ category.label }}\n </th>\n }\n </tr>\n }\n <tr>\n @for (column of columns(); track column; let isLast = $last; let i = $index) {\n <th\n class=\"p-3 text-left text-caption font-medium text-slate-500\"\n style=\"box-shadow: inset 0 -1px 0 0 rgb(226 232 240)\"\n scope=\"col\"\n [attr.aria-sort]=\"sortingItem()?.column === column ? sortingItem()!.direction : null\"\n [ngClass]=\"{\n 'pr-5': isLast,\n 'sticky z-[1] bg-white': i < fixedColumnsCount(),\n 'border-l border-slate-200': i > 0 && isCategoryStart(i),\n }\"\n [style.left]=\"i < fixedColumnsCount() ? getColumnLeftPosition(i) : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerCellTemplateRef()!; context: { column, index: i }\"\n ></ng-container>\n </th>\n }\n </tr>\n </thead>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: LoaderComponent, selector: "skcr-loader", inputs: ["size", "isNotAbsolute"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1162
1311
|
}
|
|
1163
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1312
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TableComponent, decorators: [{
|
|
1164
1313
|
type: Component,
|
|
1165
|
-
args: [{ selector: 'skcr-table', imports: [
|
|
1314
|
+
args: [{ selector: 'skcr-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1166
1315
|
NgClass,
|
|
1167
1316
|
NgTemplateOutlet,
|
|
1168
1317
|
ScrollingModule,
|
|
1169
1318
|
LoaderComponent,
|
|
1170
1319
|
], template: "<div class=\"border-collapse overflow-hidden w-full mb-6 flex flex-col h-full\">\n @if (!!itemsList().length) {\n <cdk-virtual-scroll-viewport\n class=\"block overflow-y-auto overflow-x-auto flex-grow\"\n (scrolledIndexChange)=\"onScroll($event)\"\n itemSize=\"50\"\n\n >\n <table class=\"w-full relative table-auto whitespace-nowrap\">\n <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n <tbody>\n <tr\n class=\"h-[50px] border-b border-slate-200\"\n *cdkVirtualFor=\"let item of itemsList(); let index = index\"\n >\n @for (column of columns(); track column; let isFirst = $first; let islast = $last; let i = $index) {\n <td\n class=\"py-2 px-3 text-body-small whitespace-nowrap\"\n [ngClass]=\"{\n 'pr-5': islast,\n 'sticky z-[1]': i < fixedColumnsCount(),\n 'border-l border-slate-200': i > 0 && isCategoryStart(i),\n 'bg-white': !isRowSelected(item),\n 'bg-slate-100': isRowSelected(item),\n }\"\n [class.text-end]=\"column === 'actions'\"\n [style.left]=\"i < fixedColumnsCount() ? getColumnLeftPosition(i) : null\"\n >\n <span\n [style.width]=\"i < fixedColumnsCount() ? '150px' : 'auto'\"\n class=\"inline-block whitespace-normal break-words leading-tight\"\n >\n <ng-container\n *ngTemplateOutlet=\"rowCellTemplateRef()!; context: { column, item, index: i }\"\n ></ng-container>\n </span>\n </td>\n }\n </tr>\n\n @if (isContentLoading()) {\n <tr class=\"h-[100px]\">\n <td [attr.colspan]=\"columns().length\" class=\"text-center\">\n <skcr-loader [isNotAbsolute]=\"true\"></skcr-loader>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div class=\"block overflow-x-auto flex-none\">\n <table class=\"w-full relative table-auto whitespace-nowrap\">\n <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n </table>\n </div>\n\n @if (isContentLoading() && !itemsList().length) {\n <div class=\"bg-white flex-grow flex items-center justify-center min-h-[400px]\">\n <skcr-loader [isNotAbsolute]=\"true\"></skcr-loader>\n </div>\n } @else {\n <div class=\"bg-white flex-grow flex items-center justify-center min-h-[400px]\">\n <span class=\"text-slate-500\"> No results </span>\n </div>\n }\n }\n</div>\n\n<ng-template #tableHeader>\n <thead\n class=\"bg-white sticky top-0 z-10 before:content-[''] before:absolute before:bottom-0 before:left-0 before:right-0 before:h-[1px] before:bg-slate-200\"\n [style.top]=\"inverseOfTranslation\"\n >\n @if (columnCategories()) {\n <tr>\n @for (category of columnCategories(); track $index; let i = $index) {\n <th\n class=\"py-2 p-3 text-left text-caption text-slate-500\"\n style=\"box-shadow: inset 0 -1px 0 0 rgb(226 232 240)\"\n scope=\"colgroup\"\n [attr.colspan]=\"category.colspan\"\n [style.left]=\"i < fixedColumnsCount() ? getColumnLeftPosition(i) : null\"\n [ngClass]=\"{\n 'pl-5': i === 0,\n 'sticky z-[1] bg-white': i === 0,\n 'border-l border-slate-200': i > 0,\n }\"\n >\n {{ category.label }}\n </th>\n }\n </tr>\n }\n <tr>\n @for (column of columns(); track column; let isLast = $last; let i = $index) {\n <th\n class=\"p-3 text-left text-caption font-medium text-slate-500\"\n style=\"box-shadow: inset 0 -1px 0 0 rgb(226 232 240)\"\n scope=\"col\"\n [attr.aria-sort]=\"sortingItem()?.column === column ? sortingItem()!.direction : null\"\n [ngClass]=\"{\n 'pr-5': isLast,\n 'sticky z-[1] bg-white': i < fixedColumnsCount(),\n 'border-l border-slate-200': i > 0 && isCategoryStart(i),\n }\"\n [style.left]=\"i < fixedColumnsCount() ? getColumnLeftPosition(i) : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerCellTemplateRef()!; context: { column, index: i }\"\n ></ng-container>\n </th>\n }\n </tr>\n </thead>\n</ng-template>\n" }]
|
|
1171
|
-
}], propDecorators: { viewPort: [{
|
|
1172
|
-
type: ViewChild,
|
|
1173
|
-
args: [CdkVirtualScrollViewport, { static: false }]
|
|
1174
|
-
}], itemsList: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsList", required: true }] }], isContentLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isContentLoading", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], columnCategories: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnCategories", required: false }] }], noRowsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noRowsMessage", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], fixedColumnsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedColumnsCount", required: false }] }], idKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "idKey", required: false }] }], selectedItemIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemIds", required: false }] }], tableEndClose: [{ type: i0.Output, args: ["tableEndClose"] }], headerCellTemplateRef: [{ type: i0.ContentChild, args: ['headerCell', { isSignal: true }] }], rowCellTemplateRef: [{ type: i0.ContentChild, args: ['rowCell', { isSignal: true }] }], sortButtons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableHeaderCellComponent), { isSignal: true }] }] } });
|
|
1320
|
+
}], propDecorators: { viewPort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], itemsList: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsList", required: true }] }], isContentLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isContentLoading", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], columnCategories: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnCategories", required: false }] }], noRowsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noRowsMessage", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], fixedColumnsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedColumnsCount", required: false }] }], idKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "idKey", required: false }] }], selectedItemIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemIds", required: false }] }], tableEndClose: [{ type: i0.Output, args: ["tableEndClose"] }], headerCellTemplateRef: [{ type: i0.ContentChild, args: ['headerCell', { isSignal: true }] }], rowCellTemplateRef: [{ type: i0.ContentChild, args: ['rowCell', { isSignal: true }] }], sortButtons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableHeaderCellComponent), { isSignal: true }] }] } });
|
|
1175
1321
|
|
|
1176
1322
|
class DialogComponent {
|
|
1177
1323
|
constructor() {
|
|
1178
1324
|
this.hasAnimation = true;
|
|
1179
|
-
this.isLarge = input(false,
|
|
1180
|
-
|
|
1325
|
+
this.isLarge = input(false, /* @ts-ignore */
|
|
1326
|
+
...(ngDevMode ? [{ debugName: "isLarge" }] : /* istanbul ignore next */ []));
|
|
1327
|
+
this.isWidthFixed = input(false, /* @ts-ignore */
|
|
1328
|
+
...(ngDevMode ? [{ debugName: "isWidthFixed" }] : /* istanbul ignore next */ []));
|
|
1181
1329
|
this.isOpen = input(true, { ...(ngDevMode ? { debugName: "isOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1182
|
-
this.isClickOutsideCloseDialog = input(false,
|
|
1330
|
+
this.isClickOutsideCloseDialog = input(false, /* @ts-ignore */
|
|
1331
|
+
...(ngDevMode ? [{ debugName: "isClickOutsideCloseDialog" }] : /* istanbul ignore next */ []));
|
|
1183
1332
|
this.isCloseAnimDone = output();
|
|
1184
1333
|
this.dialogClasses = computed(() => {
|
|
1185
1334
|
const maxWidth = this.isLarge() ? 'max-w-5xl' : 'max-w-2xl';
|
|
@@ -1187,22 +1336,26 @@ class DialogComponent {
|
|
|
1187
1336
|
return maxWidth;
|
|
1188
1337
|
const width = this.isLarge() ? 'w-5xl' : 'w-2xl';
|
|
1189
1338
|
return `${width} ${maxWidth}`;
|
|
1190
|
-
},
|
|
1339
|
+
}, /* @ts-ignore */
|
|
1340
|
+
...(ngDevMode ? [{ debugName: "dialogClasses" }] : /* istanbul ignore next */ []));
|
|
1191
1341
|
this.escapeKeyListener = null;
|
|
1192
|
-
this.
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
dialogElement.
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1342
|
+
this.dialogElementRef = viewChild('dialog', /* @ts-ignore */
|
|
1343
|
+
...(ngDevMode ? [{ debugName: "dialogElementRef" }] : /* istanbul ignore next */ []));
|
|
1344
|
+
this.dialogElement = signal(null, /* @ts-ignore */
|
|
1345
|
+
...(ngDevMode ? [{ debugName: "dialogElement" }] : /* istanbul ignore next */ []));
|
|
1346
|
+
effect(() => {
|
|
1347
|
+
const dialogElement = this.dialogElementRef();
|
|
1348
|
+
if (dialogElement) {
|
|
1349
|
+
this.dialogElement.set(dialogElement);
|
|
1350
|
+
dialogElement.nativeElement.show();
|
|
1351
|
+
this.escapeKeyListener = (event) => {
|
|
1352
|
+
if (event.key === 'Escape') {
|
|
1353
|
+
this.isCloseAnimDone.emit();
|
|
1354
|
+
}
|
|
1355
|
+
};
|
|
1356
|
+
dialogElement.nativeElement.addEventListener('keydown', this.escapeKeyListener);
|
|
1357
|
+
}
|
|
1358
|
+
});
|
|
1206
1359
|
}
|
|
1207
1360
|
onBackdropClick() {
|
|
1208
1361
|
if (this.isClickOutsideCloseDialog()) {
|
|
@@ -1221,8 +1374,8 @@ class DialogComponent {
|
|
|
1221
1374
|
this.isCloseAnimDone.emit();
|
|
1222
1375
|
}
|
|
1223
1376
|
}
|
|
1224
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1225
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1377
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1378
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DialogComponent, isStandalone: true, selector: "skcr-dialog", inputs: { isLarge: { classPropertyName: "isLarge", publicName: "isLarge", isSignal: true, isRequired: false, transformFunction: null }, isWidthFixed: { classPropertyName: "isWidthFixed", publicName: "isWidthFixed", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isClickOutsideCloseDialog: { classPropertyName: "isClickOutsideCloseDialog", publicName: "isClickOutsideCloseDialog", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCloseAnimDone: "isCloseAnimDone" }, host: { properties: { "@ModalTrigger": "this.hasAnimation" } }, viewQueries: [{ propertyName: "dialogElementRef", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isOpen()) {\n <div\n class=\"fixed inset-0 z-50 bg-slate-500/75 transition-opacity\"\n [@BackdropTrigger]\n (click)=\"onBackdropClick()\"\n ></div>\n\n <dialog\n class=\"z-[60] fixed inset-0 m-auto rounded-lg shadow-xl backdrop:hidden max-h-[90vh] flex flex-col overflow-hidden scrollbar-hide\"\n [class]=\"dialogClasses()\"\n #dialog\n (cancel)=\"$event.preventDefault()\"\n [@DialogTrigger]\n (@DialogTrigger.done)=\"onDialogAnimDone($event)\"\n >\n <ng-content></ng-content>\n </dialog>\n}\n", animations: [
|
|
1226
1379
|
trigger('DialogTrigger', [
|
|
1227
1380
|
transition(':enter', [
|
|
1228
1381
|
style({ opacity: 0, transform: 'translateY(1rem)' }),
|
|
@@ -1257,11 +1410,11 @@ class DialogComponent {
|
|
|
1257
1410
|
]),
|
|
1258
1411
|
]),
|
|
1259
1412
|
]),
|
|
1260
|
-
] }); }
|
|
1413
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1261
1414
|
}
|
|
1262
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogComponent, decorators: [{
|
|
1263
1416
|
type: Component,
|
|
1264
|
-
args: [{ selector: 'skcr-dialog', animations: [
|
|
1417
|
+
args: [{ selector: 'skcr-dialog', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
1265
1418
|
trigger('DialogTrigger', [
|
|
1266
1419
|
transition(':enter', [
|
|
1267
1420
|
style({ opacity: 0, transform: 'translateY(1rem)' }),
|
|
@@ -1297,36 +1450,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1297
1450
|
]),
|
|
1298
1451
|
]),
|
|
1299
1452
|
], template: "@if (isOpen()) {\n <div\n class=\"fixed inset-0 z-50 bg-slate-500/75 transition-opacity\"\n [@BackdropTrigger]\n (click)=\"onBackdropClick()\"\n ></div>\n\n <dialog\n class=\"z-[60] fixed inset-0 m-auto rounded-lg shadow-xl backdrop:hidden max-h-[90vh] flex flex-col overflow-hidden scrollbar-hide\"\n [class]=\"dialogClasses()\"\n #dialog\n (cancel)=\"$event.preventDefault()\"\n [@DialogTrigger]\n (@DialogTrigger.done)=\"onDialogAnimDone($event)\"\n >\n <ng-content></ng-content>\n </dialog>\n}\n" }]
|
|
1300
|
-
}], propDecorators: { hasAnimation: [{
|
|
1453
|
+
}], ctorParameters: () => [], propDecorators: { hasAnimation: [{
|
|
1301
1454
|
type: HostBinding,
|
|
1302
1455
|
args: ['@ModalTrigger']
|
|
1303
|
-
}], isLarge: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLarge", required: false }] }], isWidthFixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isWidthFixed", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], isClickOutsideCloseDialog: [{ type: i0.Input, args: [{ isSignal: true, alias: "isClickOutsideCloseDialog", required: false }] }], isCloseAnimDone: [{ type: i0.Output, args: ["isCloseAnimDone"] }],
|
|
1304
|
-
type: ViewChild,
|
|
1305
|
-
args: ['dialog', { static: false }]
|
|
1306
|
-
}] } });
|
|
1456
|
+
}], isLarge: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLarge", required: false }] }], isWidthFixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isWidthFixed", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], isClickOutsideCloseDialog: [{ type: i0.Input, args: [{ isSignal: true, alias: "isClickOutsideCloseDialog", required: false }] }], isCloseAnimDone: [{ type: i0.Output, args: ["isCloseAnimDone"] }], dialogElementRef: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }] } });
|
|
1307
1457
|
|
|
1308
1458
|
class ModalComponent {
|
|
1309
1459
|
constructor() {
|
|
1310
|
-
this.submitLabel = input('',
|
|
1311
|
-
|
|
1312
|
-
this.
|
|
1313
|
-
|
|
1314
|
-
this.
|
|
1315
|
-
|
|
1316
|
-
this.
|
|
1317
|
-
|
|
1318
|
-
this.
|
|
1319
|
-
|
|
1320
|
-
this.
|
|
1460
|
+
this.submitLabel = input('', /* @ts-ignore */
|
|
1461
|
+
...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
|
|
1462
|
+
this.isSubmitting = input(false, /* @ts-ignore */
|
|
1463
|
+
...(ngDevMode ? [{ debugName: "isSubmitting" }] : /* istanbul ignore next */ []));
|
|
1464
|
+
this.isSuccess = input(false, /* @ts-ignore */
|
|
1465
|
+
...(ngDevMode ? [{ debugName: "isSuccess" }] : /* istanbul ignore next */ []));
|
|
1466
|
+
this.isLarge = input(false, /* @ts-ignore */
|
|
1467
|
+
...(ngDevMode ? [{ debugName: "isLarge" }] : /* istanbul ignore next */ []));
|
|
1468
|
+
this.form = input(null, /* @ts-ignore */
|
|
1469
|
+
...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
|
|
1470
|
+
this.submitColorVariant = input(EButtonColorVariant.Primary, /* @ts-ignore */
|
|
1471
|
+
...(ngDevMode ? [{ debugName: "submitColorVariant" }] : /* istanbul ignore next */ []));
|
|
1472
|
+
this.closingCondition = input(EModalCloseCondition.Close, /* @ts-ignore */
|
|
1473
|
+
...(ngDevMode ? [{ debugName: "closingCondition" }] : /* istanbul ignore next */ []));
|
|
1474
|
+
this.isCancelButtonVisible = input(false, /* @ts-ignore */
|
|
1475
|
+
...(ngDevMode ? [{ debugName: "isCancelButtonVisible" }] : /* istanbul ignore next */ []));
|
|
1476
|
+
this.cancelLabel = input('', /* @ts-ignore */
|
|
1477
|
+
...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
|
|
1478
|
+
this.isCrossButtonVisible = input(false, /* @ts-ignore */
|
|
1479
|
+
...(ngDevMode ? [{ debugName: "isCrossButtonVisible" }] : /* istanbul ignore next */ []));
|
|
1480
|
+
this.isFooterInvisible = input(false, /* @ts-ignore */
|
|
1481
|
+
...(ngDevMode ? [{ debugName: "isFooterInvisible" }] : /* istanbul ignore next */ []));
|
|
1321
1482
|
this.closeEvent = output();
|
|
1322
1483
|
this.submitEvent = output();
|
|
1323
|
-
this.isOpen = signal(true,
|
|
1484
|
+
this.isOpen = signal(true, /* @ts-ignore */
|
|
1485
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
1324
1486
|
this.bodyClasses = computed(() => {
|
|
1325
1487
|
const padding = this.isCrossButtonVisible() ? 'px-9' : 'px-4 sm:px-6';
|
|
1326
1488
|
const width = this.isLarge() ? 'max-w-5xl w-5xl' : 'max-w-2xl w-2xl';
|
|
1327
1489
|
return `${padding} ${width}`;
|
|
1328
|
-
},
|
|
1329
|
-
|
|
1490
|
+
}, /* @ts-ignore */
|
|
1491
|
+
...(ngDevMode ? [{ debugName: "bodyClasses" }] : /* istanbul ignore next */ []));
|
|
1492
|
+
this.footerClasses = computed(() => this.isCancelButtonVisible() ? 'grid grid-flow-row-dense grid-cols-2' : 'w-full', /* @ts-ignore */
|
|
1493
|
+
...(ngDevMode ? [{ debugName: "footerClasses" }] : /* istanbul ignore next */ []));
|
|
1330
1494
|
effect(() => {
|
|
1331
1495
|
const closingCondition = this.closingCondition();
|
|
1332
1496
|
const isSuccess = this.isSuccess();
|
|
@@ -1346,12 +1510,12 @@ class ModalComponent {
|
|
|
1346
1510
|
emitSubmitEvent() {
|
|
1347
1511
|
this.submitEvent.emit();
|
|
1348
1512
|
}
|
|
1349
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1350
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1513
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1514
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ModalComponent, isStandalone: true, selector: "skcr-modal", inputs: { submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, isSubmitting: { classPropertyName: "isSubmitting", publicName: "isSubmitting", isSignal: true, isRequired: false, transformFunction: null }, isSuccess: { classPropertyName: "isSuccess", publicName: "isSuccess", isSignal: true, isRequired: false, transformFunction: null }, isLarge: { classPropertyName: "isLarge", publicName: "isLarge", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, submitColorVariant: { classPropertyName: "submitColorVariant", publicName: "submitColorVariant", isSignal: true, isRequired: false, transformFunction: null }, closingCondition: { classPropertyName: "closingCondition", publicName: "closingCondition", isSignal: true, isRequired: false, transformFunction: null }, isCancelButtonVisible: { classPropertyName: "isCancelButtonVisible", publicName: "isCancelButtonVisible", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, isCrossButtonVisible: { classPropertyName: "isCrossButtonVisible", publicName: "isCrossButtonVisible", isSignal: true, isRequired: false, transformFunction: null }, isFooterInvisible: { classPropertyName: "isFooterInvisible", publicName: "isFooterInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent", submitEvent: "submitEvent" }, ngImport: i0, template: "<skcr-dialog\n [isOpen]=\"isOpen()\"\n (isCloseAnimDone)=\"emitCloseEvent()\"\n [isLarge]=\"isLarge()\"\n>\n <div\n class=\"relative flex flex-col h-full overflow-hidden py-4 sm:py-6\"\n [class]=\"bodyClasses()\"\n >\n @if (isCrossButtonVisible()) {\n <div class=\"absolute right-0 top-0 pr-4 pt-4\">\n <button\n class=\"cursor-pointer rounded-md bg-white text-slate-950\"\n type=\"button\"\n [disabled]=\"isSubmitting() || isSuccess() || !isOpen()\"\n (click)=\"handleCloseClick()\"\n >\n <span class=\"sr-only\"> Close </span>\n\n <ng-icon\n name=\"heroXMark\"\n size=\"20px\"\n />\n </button>\n </div>\n }\n\n <div class=\"flex-1 px-1 overflow-y-auto scrollbar-hide\">\n <ng-content></ng-content>\n </div>\n\n @if (!isFooterInvisible()) {\n <div\n class=\"mt-6 flex flex-col justify-center gap-3 pb-1\"\n [class]=\"footerClasses()\"\n >\n <skcr-submit-button\n [label]=\"submitLabel()\"\n [isLoading]=\"isSubmitting()\"\n [isSuccess]=\"isSuccess()\"\n [colorVariant]=\"submitColorVariant()\"\n (submitClicked)=\"emitSubmitEvent()\"\n [isFullWidth]=\"true\"\n [class.col-start-2]=\"isCancelButtonVisible()\"\n ></skcr-submit-button>\n\n @if (isCancelButtonVisible()) {\n <button\n class=\"btn btn-neutral max-w-full\"\n type=\"button\"\n [disabled]=\"isSubmitting() || isSuccess() || !isOpen()\"\n (click)=\"handleCloseClick()\"\n >\n {{ cancelLabel() || 'Cancel' }}\n </button>\n }\n </div>\n }\n </div>\n</skcr-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "skcr-dialog", inputs: ["isLarge", "isWidthFixed", "isOpen", "isClickOutsideCloseDialog"], outputs: ["isCloseAnimDone"] }, { kind: "component", type: SubmitButtonComponent, selector: "skcr-submit-button", inputs: ["label", "isLoading", "isFullWidth", "isDisabled", "isSuccess", "colorVariant"], outputs: ["submitClicked"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1351
1515
|
}
|
|
1352
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ModalComponent, decorators: [{
|
|
1353
1517
|
type: Component,
|
|
1354
|
-
args: [{ selector: 'skcr-modal', imports: [
|
|
1518
|
+
args: [{ selector: 'skcr-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1355
1519
|
DialogComponent,
|
|
1356
1520
|
SubmitButtonComponent,
|
|
1357
1521
|
NgIcon,
|
|
@@ -1361,27 +1525,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1361
1525
|
class ConfirmationModalComponent {
|
|
1362
1526
|
constructor() {
|
|
1363
1527
|
this.class = 'absolute';
|
|
1364
|
-
this.submitLabel = input.required(
|
|
1365
|
-
|
|
1366
|
-
this.
|
|
1367
|
-
|
|
1368
|
-
this.
|
|
1369
|
-
|
|
1370
|
-
this.
|
|
1371
|
-
|
|
1528
|
+
this.submitLabel = input.required(/* @ts-ignore */
|
|
1529
|
+
...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
|
|
1530
|
+
this.isSubmitting = input(false, /* @ts-ignore */
|
|
1531
|
+
...(ngDevMode ? [{ debugName: "isSubmitting" }] : /* istanbul ignore next */ []));
|
|
1532
|
+
this.isSuccess = input(false, /* @ts-ignore */
|
|
1533
|
+
...(ngDevMode ? [{ debugName: "isSuccess" }] : /* istanbul ignore next */ []));
|
|
1534
|
+
this.form = input(null, /* @ts-ignore */
|
|
1535
|
+
...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
|
|
1536
|
+
this.isCloseButtonVisible = input(false, /* @ts-ignore */
|
|
1537
|
+
...(ngDevMode ? [{ debugName: "isCloseButtonVisible" }] : /* istanbul ignore next */ []));
|
|
1538
|
+
this.cancelLabel = input('', /* @ts-ignore */
|
|
1539
|
+
...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
|
|
1540
|
+
this.levelVariant = input(EConfirmLevelVariant.Info, /* @ts-ignore */
|
|
1541
|
+
...(ngDevMode ? [{ debugName: "levelVariant" }] : /* istanbul ignore next */ []));
|
|
1542
|
+
this.closingCondition = input(EModalCloseCondition.SubmitSuccess, /* @ts-ignore */
|
|
1543
|
+
...(ngDevMode ? [{ debugName: "closingCondition" }] : /* istanbul ignore next */ []));
|
|
1372
1544
|
this.closeEvent = output();
|
|
1373
1545
|
this.submitEvent = output();
|
|
1374
1546
|
this.iconKey = computed(() => {
|
|
1375
1547
|
return this.levelVariant() === EConfirmLevelVariant.Success ? 'heroCheckCircle' : 'heroExclamationTriangle';
|
|
1376
|
-
},
|
|
1548
|
+
}, /* @ts-ignore */
|
|
1549
|
+
...(ngDevMode ? [{ debugName: "iconKey" }] : /* istanbul ignore next */ []));
|
|
1377
1550
|
this.submitColorVariant = computed(() => {
|
|
1378
1551
|
return this.levelVariant() === EConfirmLevelVariant.Danger
|
|
1379
1552
|
? EButtonColorVariant.Danger
|
|
1380
1553
|
: EButtonColorVariant.Primary;
|
|
1381
|
-
},
|
|
1554
|
+
}, /* @ts-ignore */
|
|
1555
|
+
...(ngDevMode ? [{ debugName: "submitColorVariant" }] : /* istanbul ignore next */ []));
|
|
1382
1556
|
this.iconColorVariant = computed(() => {
|
|
1383
1557
|
return this.levelVariant() === EConfirmLevelVariant.Danger ? 'text-red-500' : 'text-primary';
|
|
1384
|
-
},
|
|
1558
|
+
}, /* @ts-ignore */
|
|
1559
|
+
...(ngDevMode ? [{ debugName: "iconColorVariant" }] : /* istanbul ignore next */ []));
|
|
1385
1560
|
}
|
|
1386
1561
|
emitCloseEvent() {
|
|
1387
1562
|
this.closeEvent.emit();
|
|
@@ -1389,12 +1564,12 @@ class ConfirmationModalComponent {
|
|
|
1389
1564
|
emitSubmitEvent() {
|
|
1390
1565
|
this.submitEvent.emit();
|
|
1391
1566
|
}
|
|
1392
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1393
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1567
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1568
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ConfirmationModalComponent, isStandalone: true, selector: "skcr-confirmation-modal", inputs: { submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: true, transformFunction: null }, isSubmitting: { classPropertyName: "isSubmitting", publicName: "isSubmitting", isSignal: true, isRequired: false, transformFunction: null }, isSuccess: { classPropertyName: "isSuccess", publicName: "isSuccess", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, isCloseButtonVisible: { classPropertyName: "isCloseButtonVisible", publicName: "isCloseButtonVisible", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, levelVariant: { classPropertyName: "levelVariant", publicName: "levelVariant", isSignal: true, isRequired: false, transformFunction: null }, closingCondition: { classPropertyName: "closingCondition", publicName: "closingCondition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent", submitEvent: "submitEvent" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<skcr-modal\n [submitColorVariant]=\"submitColorVariant()\"\n [submitLabel]=\"submitLabel()\"\n [isSubmitting]=\"isSubmitting()\"\n [isSuccess]=\"isSuccess()\"\n [closingCondition]=\"closingCondition()\"\n [isCancelButtonVisible]=\"isCloseButtonVisible()\"\n (submitEvent)=\"emitSubmitEvent()\"\n (closeEvent)=\"emitCloseEvent()\"\n>\n <div class=\"flex max-w-xl flex-col gap-3\">\n @if (iconKey()) {\n <div [class]=\"'mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full ' + iconColorVariant()\">\n <ng-icon\n [name]=\"iconKey()!\"\n size=\"48px\"\n />\n </div>\n }\n\n <div class=\"flex flex-col gap-8\">\n <ng-content select=\"[title]\"></ng-content>\n\n <ng-content select=\"[content]\"></ng-content>\n </div>\n </div>\n</skcr-modal>\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "skcr-modal", inputs: ["submitLabel", "isSubmitting", "isSuccess", "isLarge", "form", "submitColorVariant", "closingCondition", "isCancelButtonVisible", "cancelLabel", "isCrossButtonVisible", "isFooterInvisible"], outputs: ["closeEvent", "submitEvent"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1394
1569
|
}
|
|
1395
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1570
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
|
|
1396
1571
|
type: Component,
|
|
1397
|
-
args: [{ selector: 'skcr-confirmation-modal', imports: [
|
|
1572
|
+
args: [{ selector: 'skcr-confirmation-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1398
1573
|
ModalComponent,
|
|
1399
1574
|
NgIcon,
|
|
1400
1575
|
], template: "<skcr-modal\n [submitColorVariant]=\"submitColorVariant()\"\n [submitLabel]=\"submitLabel()\"\n [isSubmitting]=\"isSubmitting()\"\n [isSuccess]=\"isSuccess()\"\n [closingCondition]=\"closingCondition()\"\n [isCancelButtonVisible]=\"isCloseButtonVisible()\"\n (submitEvent)=\"emitSubmitEvent()\"\n (closeEvent)=\"emitCloseEvent()\"\n>\n <div class=\"flex max-w-xl flex-col gap-3\">\n @if (iconKey()) {\n <div [class]=\"'mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full ' + iconColorVariant()\">\n <ng-icon\n [name]=\"iconKey()!\"\n size=\"48px\"\n />\n </div>\n }\n\n <div class=\"flex flex-col gap-8\">\n <ng-content select=\"[title]\"></ng-content>\n\n <ng-content select=\"[content]\"></ng-content>\n </div>\n </div>\n</skcr-modal>\n" }]
|
|
@@ -1405,15 +1580,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1405
1580
|
|
|
1406
1581
|
class DropdownMenuComponent {
|
|
1407
1582
|
constructor() {
|
|
1408
|
-
this.
|
|
1409
|
-
|
|
1410
|
-
this.
|
|
1583
|
+
this.dropdownMenu = viewChild('dropdownMenu', /* @ts-ignore */
|
|
1584
|
+
...(ngDevMode ? [{ debugName: "dropdownMenu" }] : /* istanbul ignore next */ []));
|
|
1585
|
+
this.toggleButton = viewChild.required('toggleButton', /* @ts-ignore */
|
|
1586
|
+
...(ngDevMode ? [{ debugName: "toggleButton" }] : /* istanbul ignore next */ []));
|
|
1587
|
+
this.label = input(/* @ts-ignore */
|
|
1588
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1589
|
+
this.labelIcon = input(/* @ts-ignore */
|
|
1590
|
+
...(ngDevMode ? [undefined, { debugName: "labelIcon" }] : /* istanbul ignore next */ []));
|
|
1591
|
+
this.isOpeningOnLeft = input(false, /* @ts-ignore */
|
|
1592
|
+
...(ngDevMode ? [{ debugName: "isOpeningOnLeft" }] : /* istanbul ignore next */ []));
|
|
1411
1593
|
this.menuClosed = output();
|
|
1412
|
-
this.isMenuOpen = signal(false,
|
|
1594
|
+
this.isMenuOpen = signal(false, /* @ts-ignore */
|
|
1595
|
+
...(ngDevMode ? [{ debugName: "isMenuOpen" }] : /* istanbul ignore next */ []));
|
|
1413
1596
|
this.clickOutsideHandler = (e) => {
|
|
1414
1597
|
const target = e.target;
|
|
1415
|
-
const isClickInDropdown = this.dropdownMenu?.nativeElement.contains(target);
|
|
1416
|
-
const isClickInToggleButton = this.toggleButton
|
|
1598
|
+
const isClickInDropdown = this.dropdownMenu()?.nativeElement.contains(target);
|
|
1599
|
+
const isClickInToggleButton = this.toggleButton().nativeElement.contains(target);
|
|
1417
1600
|
if (!isClickInDropdown && !isClickInToggleButton) {
|
|
1418
1601
|
this.closeMenu();
|
|
1419
1602
|
}
|
|
@@ -1433,8 +1616,8 @@ class DropdownMenuComponent {
|
|
|
1433
1616
|
document.removeEventListener('click', this.clickOutsideHandler);
|
|
1434
1617
|
this.menuClosed.emit();
|
|
1435
1618
|
}
|
|
1436
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1437
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1619
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1620
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DropdownMenuComponent, isStandalone: true, selector: "skcr-dropdown-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelIcon: { classPropertyName: "labelIcon", publicName: "labelIcon", isSignal: true, isRequired: false, transformFunction: null }, isOpeningOnLeft: { classPropertyName: "isOpeningOnLeft", publicName: "isOpeningOnLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuClosed: "menuClosed" }, viewQueries: [{ propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true, isSignal: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative h-fit inline-block text-left\">\n <button\n class=\"cursor-pointer inline-flex items-center rounded-md gap-1 h-full items-center border-b-2 border-transparent px-3 py-2 hover:bg-slate-100\"\n #toggleButton\n type=\"button\"\n (click)=\"toggleMenu()\"\n >\n {{ label() }}\n\n <ng-icon\n [name]=\"labelIcon() ?? 'heroChevronDown'\"\n [size]=\"labelIcon() ? '1.25rem' : '1rem'\"\n ></ng-icon>\n </button>\n\n @if (isMenuOpen()) {\n <div\n class=\"absolute z-10 mt-1 min-w-[180px] origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-hidden\"\n #dropdownMenu\n role=\"menu\"\n tabindex=\"-1\"\n @dropdownAnimation\n [class.left-0]=\"!isOpeningOnLeft()\"\n [class.right-0]=\"isOpeningOnLeft()\"\n aria-orientation=\"vertical\"\n aria-labelledby=\"menu-button\"\n >\n <div\n class=\"flex flex-col py-1\"\n role=\"none\"\n (click)=\"closeMenu()\"\n >\n <ng-content />\n </div>\n </div>\n }\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], animations: [
|
|
1438
1621
|
trigger('dropdownAnimation', [
|
|
1439
1622
|
transition(':enter', [
|
|
1440
1623
|
style({ opacity: 0, transform: 'translateY(-10px)' }),
|
|
@@ -1445,13 +1628,13 @@ class DropdownMenuComponent {
|
|
|
1445
1628
|
animate('200ms ease-in', style({ opacity: 0, transform: 'translateY(-10px)' })),
|
|
1446
1629
|
]),
|
|
1447
1630
|
]),
|
|
1448
|
-
] }); }
|
|
1631
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1449
1632
|
}
|
|
1450
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1633
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownMenuComponent, decorators: [{
|
|
1451
1634
|
type: Component,
|
|
1452
1635
|
args: [{ selector: 'skcr-dropdown-menu', imports: [
|
|
1453
1636
|
NgIcon,
|
|
1454
|
-
], animations: [
|
|
1637
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
1455
1638
|
trigger('dropdownAnimation', [
|
|
1456
1639
|
transition(':enter', [
|
|
1457
1640
|
style({ opacity: 0, transform: 'translateY(-10px)' }),
|
|
@@ -1463,13 +1646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1463
1646
|
]),
|
|
1464
1647
|
]),
|
|
1465
1648
|
], template: "<div class=\"relative h-fit inline-block text-left\">\n <button\n class=\"cursor-pointer inline-flex items-center rounded-md gap-1 h-full items-center border-b-2 border-transparent px-3 py-2 hover:bg-slate-100\"\n #toggleButton\n type=\"button\"\n (click)=\"toggleMenu()\"\n >\n {{ label() }}\n\n <ng-icon\n [name]=\"labelIcon() ?? 'heroChevronDown'\"\n [size]=\"labelIcon() ? '1.25rem' : '1rem'\"\n ></ng-icon>\n </button>\n\n @if (isMenuOpen()) {\n <div\n class=\"absolute z-10 mt-1 min-w-[180px] origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-hidden\"\n #dropdownMenu\n role=\"menu\"\n tabindex=\"-1\"\n @dropdownAnimation\n [class.left-0]=\"!isOpeningOnLeft()\"\n [class.right-0]=\"isOpeningOnLeft()\"\n aria-orientation=\"vertical\"\n aria-labelledby=\"menu-button\"\n >\n <div\n class=\"flex flex-col py-1\"\n role=\"none\"\n (click)=\"closeMenu()\"\n >\n <ng-content />\n </div>\n </div>\n }\n</div>\n" }]
|
|
1466
|
-
}], propDecorators: { dropdownMenu: [{
|
|
1467
|
-
type: ViewChild,
|
|
1468
|
-
args: ['dropdownMenu']
|
|
1469
|
-
}], toggleButton: [{
|
|
1470
|
-
type: ViewChild,
|
|
1471
|
-
args: ['toggleButton']
|
|
1472
|
-
}], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelIcon", required: false }] }], isOpeningOnLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpeningOnLeft", required: false }] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }] } });
|
|
1649
|
+
}], propDecorators: { dropdownMenu: [{ type: i0.ViewChild, args: ['dropdownMenu', { isSignal: true }] }], toggleButton: [{ type: i0.ViewChild, args: ['toggleButton', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelIcon", required: false }] }], isOpeningOnLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpeningOnLeft", required: false }] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }] } });
|
|
1473
1650
|
|
|
1474
1651
|
const DD_MM_YYYY_FORMAT = {
|
|
1475
1652
|
parse: {
|
|
@@ -1487,12 +1664,18 @@ const DD_MM_YYYY_FORMAT = {
|
|
|
1487
1664
|
};
|
|
1488
1665
|
class DatePickerComponent {
|
|
1489
1666
|
constructor() {
|
|
1490
|
-
this.name = input('',
|
|
1491
|
-
|
|
1492
|
-
this.
|
|
1493
|
-
|
|
1494
|
-
this.
|
|
1495
|
-
|
|
1667
|
+
this.name = input('', /* @ts-ignore */
|
|
1668
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1669
|
+
this.label = input('', /* @ts-ignore */
|
|
1670
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1671
|
+
this.placeholder = input('dd/mm/yyyy', /* @ts-ignore */
|
|
1672
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1673
|
+
this.isInvalid = input(false, /* @ts-ignore */
|
|
1674
|
+
...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
|
|
1675
|
+
this.isDisabled = input(false, /* @ts-ignore */
|
|
1676
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
1677
|
+
this.value = model(/* @ts-ignore */
|
|
1678
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1496
1679
|
this.dateAdapter = inject((DateAdapter));
|
|
1497
1680
|
this.dateAdapter.setLocale('fr-FR');
|
|
1498
1681
|
}
|
|
@@ -1547,18 +1730,18 @@ class DatePickerComponent {
|
|
|
1547
1730
|
const date = this.parseDate(formattedValue);
|
|
1548
1731
|
this.value.set(date);
|
|
1549
1732
|
}
|
|
1550
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1551
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1733
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1734
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: DatePickerComponent, isStandalone: true, selector: "skcr-date-picker", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
|
|
1552
1735
|
{ provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_FORMAT },
|
|
1553
1736
|
{ provide: MAT_DATE_LOCALE, useValue: 'fr-FR' },
|
|
1554
|
-
], ngImport: i0, template: "<div>\n <label\n class=\"mb-1 block\"\n [for]=\"name()\"\n >\n {{ label() }}\n </label>\n\n <div class=\"relative\">\n <input\n class=\"block w-full rounded-md px-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 placeholder:text-slate-500\"\n [id]=\"name()\"\n [name]=\"name()\"\n type=\"text\"\n [placeholder]=\"placeholder()\"\n [matDatepicker]=\"picker\"\n [value]=\"value()\"\n [attr.value]=\"value() ? formatDate(value()) : ''\"\n (dateChange)=\"onDateChange($event.value)\"\n (input)=\"onInputChange($event)\"\n [disabled]=\"isDisabled()\"\n [ngClass]=\"{\n 'border-destructive placeholder-destructive focus:border-destructive focus:ring-destructive': isInvalid(),\n 'border-lightGrey focus:border-primary focus:ring-primaryBlue': !isInvalid(),\n 'cursor-not-allowed bg-slate-50': isDisabled(),\n }\"\n />\n\n <button\n class=\"absolute right-2 top-1/2 -translate-y-1/2\"\n type=\"button\"\n (click)=\"picker.open()\"\n [disabled]=\"isDisabled()\"\n >\n <svg\n class=\"h-5 w-5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n />\n </svg>\n </button>\n </div>\n\n <mat-datepicker\n #picker\n [startAt]=\"value()\"\n [disabled]=\"isDisabled()\"\n ></mat-datepicker>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
|
|
1737
|
+
], ngImport: i0, template: "<div>\n <label\n class=\"mb-1 block\"\n [for]=\"name()\"\n >\n {{ label() }}\n </label>\n\n <div class=\"relative\">\n <input\n class=\"block w-full rounded-md px-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 placeholder:text-slate-500\"\n [id]=\"name()\"\n [name]=\"name()\"\n type=\"text\"\n [placeholder]=\"placeholder()\"\n [matDatepicker]=\"picker\"\n [value]=\"value()\"\n [attr.value]=\"value() ? formatDate(value()) : ''\"\n (dateChange)=\"onDateChange($event.value)\"\n (input)=\"onInputChange($event)\"\n [disabled]=\"isDisabled()\"\n [ngClass]=\"{\n 'border-destructive placeholder-destructive focus:border-destructive focus:ring-destructive': isInvalid(),\n 'border-lightGrey focus:border-primary focus:ring-primaryBlue': !isInvalid(),\n 'cursor-not-allowed bg-slate-50': isDisabled(),\n }\"\n />\n\n <button\n class=\"absolute right-2 top-1/2 -translate-y-1/2\"\n type=\"button\"\n (click)=\"picker.open()\"\n [disabled]=\"isDisabled()\"\n >\n <svg\n class=\"h-5 w-5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n />\n </svg>\n </button>\n </div>\n\n <mat-datepicker\n #picker\n [startAt]=\"value()\"\n [disabled]=\"isDisabled()\"\n ></mat-datepicker>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatNativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1555
1738
|
}
|
|
1556
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1739
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
1557
1740
|
type: Component,
|
|
1558
1741
|
args: [{ selector: 'skcr-date-picker', providers: [
|
|
1559
1742
|
{ provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_FORMAT },
|
|
1560
1743
|
{ provide: MAT_DATE_LOCALE, useValue: 'fr-FR' },
|
|
1561
|
-
], imports: [
|
|
1744
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1562
1745
|
NgClass,
|
|
1563
1746
|
FormsModule,
|
|
1564
1747
|
MatDatepickerModule,
|
|
@@ -1586,16 +1769,26 @@ const DD_MM_YYYY_HH_MM_FORMAT = {
|
|
|
1586
1769
|
};
|
|
1587
1770
|
class DatetimePickerComponent {
|
|
1588
1771
|
constructor() {
|
|
1589
|
-
this.name = input('',
|
|
1590
|
-
|
|
1591
|
-
this.
|
|
1592
|
-
|
|
1593
|
-
this.
|
|
1594
|
-
|
|
1595
|
-
this.
|
|
1596
|
-
|
|
1597
|
-
this.
|
|
1598
|
-
|
|
1772
|
+
this.name = input('', /* @ts-ignore */
|
|
1773
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1774
|
+
this.label = input('', /* @ts-ignore */
|
|
1775
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1776
|
+
this.placeholder = input('dd/mm/yyyy', /* @ts-ignore */
|
|
1777
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1778
|
+
this.timePlaceholder = input('hh:mm', /* @ts-ignore */
|
|
1779
|
+
...(ngDevMode ? [{ debugName: "timePlaceholder" }] : /* istanbul ignore next */ []));
|
|
1780
|
+
this.interval = input('5m', /* @ts-ignore */
|
|
1781
|
+
...(ngDevMode ? [{ debugName: "interval" }] : /* istanbul ignore next */ []));
|
|
1782
|
+
this.isInvalid = input(false, /* @ts-ignore */
|
|
1783
|
+
...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
|
|
1784
|
+
this.isDisabled = input(false, /* @ts-ignore */
|
|
1785
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
1786
|
+
this.value = model(/* @ts-ignore */
|
|
1787
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1788
|
+
this.dateValue = computed(() => this.value() ?? null, /* @ts-ignore */
|
|
1789
|
+
...(ngDevMode ? [{ debugName: "dateValue" }] : /* istanbul ignore next */ []));
|
|
1790
|
+
this.timeValue = computed(() => this.value() ?? null, /* @ts-ignore */
|
|
1791
|
+
...(ngDevMode ? [{ debugName: "timeValue" }] : /* istanbul ignore next */ []));
|
|
1599
1792
|
this.dateAdapter = inject((DateAdapter));
|
|
1600
1793
|
this.dateAdapter.setLocale('fr-FR');
|
|
1601
1794
|
}
|
|
@@ -1695,18 +1888,18 @@ class DatetimePickerComponent {
|
|
|
1695
1888
|
const merged = new Date(base.getFullYear(), base.getMonth(), base.getDate(), parsed.hours, parsed.minutes);
|
|
1696
1889
|
this.value.set(merged);
|
|
1697
1890
|
}
|
|
1698
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1699
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1891
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1892
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: DatetimePickerComponent, isStandalone: true, selector: "skcr-datetime-picker", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, timePlaceholder: { classPropertyName: "timePlaceholder", publicName: "timePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
|
|
1700
1893
|
{ provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_HH_MM_FORMAT },
|
|
1701
1894
|
{ provide: MAT_DATE_LOCALE, useValue: 'fr-FR' },
|
|
1702
|
-
], ngImport: i0, template: "<div>\n <label\n class=\"mb-1 block\"\n [for]=\"name()\"\n >\n {{ label() }}\n </label>\n\n <div class=\"flex gap-2\">\n <div class=\"relative flex-1\">\n <input\n class=\"block w-full rounded-md px-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 placeholder:text-slate-500\"\n [id]=\"name()\"\n [name]=\"name()\"\n type=\"text\"\n [placeholder]=\"placeholder()\"\n [matDatepicker]=\"picker\"\n [value]=\"dateValue()\"\n [attr.value]=\"value() ? formatDate(value()) : ''\"\n (dateChange)=\"onDateChange($event.value)\"\n (input)=\"onDateInputChange($event)\"\n [disabled]=\"isDisabled()\"\n [ngClass]=\"{\n 'outline-destructive placeholder-destructive focus:outline-destructive focus:ring-destructive': isInvalid(),\n 'focus:outline-primary focus:ring-primaryBlue': !isInvalid(),\n 'cursor-not-allowed bg-slate-50': isDisabled(),\n 'bg-white': !isDisabled(),\n }\"\n />\n\n <button\n class=\"absolute right-2 top-1/2 -translate-y-1/2\"\n type=\"button\"\n (click)=\"picker.open()\"\n [disabled]=\"isDisabled()\"\n >\n <svg\n class=\"h-5 w-5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n />\n </svg>\n </button>\n </div>\n\n <div class=\"relative w-28\">\n <input\n class=\"block w-full rounded-md px-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 placeholder:text-slate-500\"\n [name]=\"name() + '-time'\"\n type=\"text\"\n [placeholder]=\"timePlaceholder()\"\n [matTimepicker]=\"timer\"\n [value]=\"timeValue()\"\n [attr.value]=\"value() ? formatTime(value()) : ''\"\n (valueChange)=\"onTimeChange($event)\"\n (input)=\"onTimeInputChange($event)\"\n [disabled]=\"isDisabled()\"\n [ngClass]=\"{\n 'outline-destructive placeholder-destructive focus:outline-destructive focus:ring-destructive': isInvalid(),\n 'focus:outline-primary focus:ring-primaryBlue': !isInvalid(),\n 'cursor-not-allowed bg-slate-50': isDisabled(),\n 'bg-white': !isDisabled(),\n }\"\n />\n\n <button\n class=\"absolute right-2 top-1/2 -translate-y-1/2\"\n type=\"button\"\n (click)=\"timer.open()\"\n [disabled]=\"isDisabled()\"\n >\n <svg\n class=\"h-5 w-5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M12 8v4l3 2m6-2a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n </button>\n </div>\n </div>\n\n <mat-datepicker\n #picker\n [startAt]=\"value()\"\n [disabled]=\"isDisabled()\"\n ></mat-datepicker>\n\n <mat-timepicker\n #timer\n [interval]=\"interval()\"\n ></mat-timepicker>\n</div>\n", styles: [".mat-timepicker-panel{--mat-timepicker-container-background-color: white;background-color:#fff!important}.mat-timepicker-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:500!important;color:var(--color-slate-950, #020617)!important}.mat-timepicker-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled){background-color:var(--color-primary-50, #eff6ff)!important}.mat-timepicker-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:var(--color-primary-50, #eff6ff)!important}.mat-timepicker-panel .mat-mdc-option .mat-pseudo-checkbox-minimal{--mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--color-primary, #2563eb);transform:scale(.7)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i2.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i2.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatNativeDateModule }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1895
|
+
], ngImport: i0, template: "<div>\n <label\n class=\"mb-1 block\"\n [for]=\"name()\"\n >\n {{ label() }}\n </label>\n\n <div class=\"flex gap-2\">\n <div class=\"relative flex-1\">\n <input\n class=\"block w-full rounded-md px-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 placeholder:text-slate-500\"\n [id]=\"name()\"\n [name]=\"name()\"\n type=\"text\"\n [placeholder]=\"placeholder()\"\n [matDatepicker]=\"picker\"\n [value]=\"dateValue()\"\n [attr.value]=\"value() ? formatDate(value()) : ''\"\n (dateChange)=\"onDateChange($event.value)\"\n (input)=\"onDateInputChange($event)\"\n [disabled]=\"isDisabled()\"\n [ngClass]=\"{\n 'outline-destructive placeholder-destructive focus:outline-destructive focus:ring-destructive': isInvalid(),\n 'focus:outline-primary focus:ring-primaryBlue': !isInvalid(),\n 'cursor-not-allowed bg-slate-50': isDisabled(),\n 'bg-white': !isDisabled(),\n }\"\n />\n\n <button\n class=\"absolute right-2 top-1/2 -translate-y-1/2\"\n type=\"button\"\n (click)=\"picker.open()\"\n [disabled]=\"isDisabled()\"\n >\n <svg\n class=\"h-5 w-5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n />\n </svg>\n </button>\n </div>\n\n <div class=\"relative w-28\">\n <input\n class=\"block w-full rounded-md px-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 placeholder:text-slate-500\"\n [name]=\"name() + '-time'\"\n type=\"text\"\n [placeholder]=\"timePlaceholder()\"\n [matTimepicker]=\"timer\"\n [value]=\"timeValue()\"\n [attr.value]=\"value() ? formatTime(value()) : ''\"\n (valueChange)=\"onTimeChange($event)\"\n (input)=\"onTimeInputChange($event)\"\n [disabled]=\"isDisabled()\"\n [ngClass]=\"{\n 'outline-destructive placeholder-destructive focus:outline-destructive focus:ring-destructive': isInvalid(),\n 'focus:outline-primary focus:ring-primaryBlue': !isInvalid(),\n 'cursor-not-allowed bg-slate-50': isDisabled(),\n 'bg-white': !isDisabled(),\n }\"\n />\n\n <button\n class=\"absolute right-2 top-1/2 -translate-y-1/2\"\n type=\"button\"\n (click)=\"timer.open()\"\n [disabled]=\"isDisabled()\"\n >\n <svg\n class=\"h-5 w-5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M12 8v4l3 2m6-2a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n </button>\n </div>\n </div>\n\n <mat-datepicker\n #picker\n [startAt]=\"value()\"\n [disabled]=\"isDisabled()\"\n ></mat-datepicker>\n\n <mat-timepicker\n #timer\n [interval]=\"interval()\"\n ></mat-timepicker>\n</div>\n", styles: [".mat-timepicker-panel{--mat-timepicker-container-background-color: white;background-color:#fff!important}.mat-timepicker-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:500!important;color:var(--color-slate-950, #020617)!important}.mat-timepicker-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled){background-color:var(--color-primary-50, #eff6ff)!important}.mat-timepicker-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:var(--color-primary-50, #eff6ff)!important}.mat-timepicker-panel .mat-mdc-option .mat-pseudo-checkbox-minimal{--mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--color-primary, #2563eb);transform:scale(.7)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i2.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i2.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatNativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1703
1896
|
}
|
|
1704
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1897
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DatetimePickerComponent, decorators: [{
|
|
1705
1898
|
type: Component,
|
|
1706
1899
|
args: [{ selector: 'skcr-datetime-picker', encapsulation: ViewEncapsulation.None, providers: [
|
|
1707
1900
|
{ provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_HH_MM_FORMAT },
|
|
1708
1901
|
{ provide: MAT_DATE_LOCALE, useValue: 'fr-FR' },
|
|
1709
|
-
], imports: [
|
|
1902
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1710
1903
|
NgClass,
|
|
1711
1904
|
FormsModule,
|
|
1712
1905
|
MatDatepickerModule,
|
|
@@ -1720,21 +1913,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1720
1913
|
let nextUniqueId = 0;
|
|
1721
1914
|
class RadioButtonComponent {
|
|
1722
1915
|
constructor() {
|
|
1723
|
-
this.options = input([],
|
|
1724
|
-
|
|
1725
|
-
this.
|
|
1726
|
-
|
|
1916
|
+
this.options = input([], /* @ts-ignore */
|
|
1917
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
1918
|
+
this.label = input('', /* @ts-ignore */
|
|
1919
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1920
|
+
this.isDisabled = input(false, /* @ts-ignore */
|
|
1921
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
1922
|
+
this.value = model(/* @ts-ignore */
|
|
1923
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1727
1924
|
this.uid = `skcr-radio-${nextUniqueId++}`;
|
|
1728
1925
|
}
|
|
1729
1926
|
onRadioChange(value) {
|
|
1730
1927
|
this.value.set(value);
|
|
1731
1928
|
}
|
|
1732
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1733
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1929
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1930
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RadioButtonComponent, isStandalone: true, selector: "skcr-radio-button", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<fieldset class=\"flex items-center gap-4 flex-row\">\n <legend class=\"mb-1\">\n {{ label() }}\n </legend>\n\n <div class=\"flex gap-4 min-h-9\">\n @for (option of options(); track option.value; let i = $index) {\n <div class=\"flex items-center\">\n <input\n class=\"relative size-4 appearance-none rounded-full border border-border-color bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-primary checked:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:border-border-color disabled:bg-slate-100 disabled:before:bg-slate-400 forced-colors:appearance-auto forced-colors:before:hidden\"\n [id]=\"uid + '-' + i\"\n type=\"radio\"\n [name]=\"uid\"\n [checked]=\"value() === option.value\"\n [disabled]=\"isDisabled()\"\n (change)=\"onRadioChange(option.value)\"\n />\n\n <label\n class=\"ml-3 block\"\n [for]=\"uid + '-' + i\"\n >\n {{ option.name }}\n </label\n >\n </div>\n }\n </div>\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1734
1931
|
}
|
|
1735
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1932
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
1736
1933
|
type: Component,
|
|
1737
|
-
args: [{ selector: 'skcr-radio-button', imports: [
|
|
1934
|
+
args: [{ selector: 'skcr-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1738
1935
|
FormsModule,
|
|
1739
1936
|
ReactiveFormsModule,
|
|
1740
1937
|
], template: "<fieldset class=\"flex items-center gap-4 flex-row\">\n <legend class=\"mb-1\">\n {{ label() }}\n </legend>\n\n <div class=\"flex gap-4 min-h-9\">\n @for (option of options(); track option.value; let i = $index) {\n <div class=\"flex items-center\">\n <input\n class=\"relative size-4 appearance-none rounded-full border border-border-color bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-primary checked:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:border-border-color disabled:bg-slate-100 disabled:before:bg-slate-400 forced-colors:appearance-auto forced-colors:before:hidden\"\n [id]=\"uid + '-' + i\"\n type=\"radio\"\n [name]=\"uid\"\n [checked]=\"value() === option.value\"\n [disabled]=\"isDisabled()\"\n (change)=\"onRadioChange(option.value)\"\n />\n\n <label\n class=\"ml-3 block\"\n [for]=\"uid + '-' + i\"\n >\n {{ option.name }}\n </label\n >\n </div>\n }\n </div>\n</fieldset>\n" }]
|
|
@@ -1750,10 +1947,13 @@ class ToastService {
|
|
|
1750
1947
|
success(message, title) {
|
|
1751
1948
|
this.newToastEvent$.next({ message, title, variant: EConfirmLevelVariant.Success });
|
|
1752
1949
|
}
|
|
1753
|
-
|
|
1754
|
-
|
|
1950
|
+
warning(message, title) {
|
|
1951
|
+
this.newToastEvent$.next({ message, title, variant: EConfirmLevelVariant.Warning });
|
|
1952
|
+
}
|
|
1953
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1954
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ToastService, providedIn: 'root' }); }
|
|
1755
1955
|
}
|
|
1756
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1956
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ToastService, decorators: [{
|
|
1757
1957
|
type: Injectable,
|
|
1758
1958
|
args: [{
|
|
1759
1959
|
providedIn: 'root',
|
|
@@ -1788,10 +1988,10 @@ class TooltipService {
|
|
|
1788
1988
|
this.activeTooltip.style.top = event.clientY - 30 + 'px';
|
|
1789
1989
|
}
|
|
1790
1990
|
}
|
|
1791
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1792
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1991
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1992
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipService, providedIn: 'root' }); }
|
|
1793
1993
|
}
|
|
1794
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1994
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipService, decorators: [{
|
|
1795
1995
|
type: Injectable,
|
|
1796
1996
|
args: [{
|
|
1797
1997
|
providedIn: 'root',
|
|
@@ -1800,16 +2000,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1800
2000
|
|
|
1801
2001
|
class ToastComponent {
|
|
1802
2002
|
constructor() {
|
|
1803
|
-
this.toast = input.required(
|
|
2003
|
+
this.toast = input.required(/* @ts-ignore */
|
|
2004
|
+
...(ngDevMode ? [{ debugName: "toast" }] : /* istanbul ignore next */ []));
|
|
1804
2005
|
this.disposeEvent = output();
|
|
1805
|
-
this.isCopied = signal(false,
|
|
1806
|
-
|
|
1807
|
-
this.
|
|
1808
|
-
|
|
1809
|
-
this.
|
|
1810
|
-
|
|
1811
|
-
this.
|
|
1812
|
-
|
|
2006
|
+
this.isCopied = signal(false, /* @ts-ignore */
|
|
2007
|
+
...(ngDevMode ? [{ debugName: "isCopied" }] : /* istanbul ignore next */ []));
|
|
2008
|
+
this.variant = computed(() => this.toast().variant ?? EConfirmLevelVariant.Danger, /* @ts-ignore */
|
|
2009
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2010
|
+
this.iconKey = computed(() => this.config().icon, /* @ts-ignore */
|
|
2011
|
+
...(ngDevMode ? [{ debugName: "iconKey" }] : /* istanbul ignore next */ []));
|
|
2012
|
+
this.colorClass = computed(() => this.config().color, /* @ts-ignore */
|
|
2013
|
+
...(ngDevMode ? [{ debugName: "colorClass" }] : /* istanbul ignore next */ []));
|
|
2014
|
+
this.borderClass = computed(() => this.config().border, /* @ts-ignore */
|
|
2015
|
+
...(ngDevMode ? [{ debugName: "borderClass" }] : /* istanbul ignore next */ []));
|
|
2016
|
+
this.title = computed(() => this.toast().title ?? this.config().title, /* @ts-ignore */
|
|
2017
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
2018
|
+
this.showCopy = computed(() => this.variant() === EConfirmLevelVariant.Danger, /* @ts-ignore */
|
|
2019
|
+
...(ngDevMode ? [{ debugName: "showCopy" }] : /* istanbul ignore next */ []));
|
|
2020
|
+
this.variantConfig = {
|
|
2021
|
+
[EConfirmLevelVariant.Danger]: {
|
|
2022
|
+
icon: 'heroXCircle',
|
|
2023
|
+
color: 'text-destructive',
|
|
2024
|
+
border: 'border-destructive',
|
|
2025
|
+
title: 'An error occured',
|
|
2026
|
+
},
|
|
2027
|
+
[EConfirmLevelVariant.Success]: {
|
|
2028
|
+
icon: 'heroCheckCircle',
|
|
2029
|
+
color: 'text-primary',
|
|
2030
|
+
border: 'border-primary',
|
|
2031
|
+
title: 'Success',
|
|
2032
|
+
},
|
|
2033
|
+
[EConfirmLevelVariant.Warning]: {
|
|
2034
|
+
icon: 'heroExclamationTriangle',
|
|
2035
|
+
color: 'text-amber-500',
|
|
2036
|
+
border: 'border-amber-500',
|
|
2037
|
+
title: 'Warning',
|
|
2038
|
+
},
|
|
2039
|
+
[EConfirmLevelVariant.Info]: {
|
|
2040
|
+
icon: 'heroInformationCircle',
|
|
2041
|
+
color: 'text-primary',
|
|
2042
|
+
border: 'border-primary',
|
|
2043
|
+
title: 'Information',
|
|
2044
|
+
},
|
|
2045
|
+
};
|
|
2046
|
+
this.config = computed(() => this.variantConfig[this.variant()], /* @ts-ignore */
|
|
2047
|
+
...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
|
|
1813
2048
|
this.autoCloseDuration = 5000;
|
|
1814
2049
|
this.timeoutId = null;
|
|
1815
2050
|
this.remaining = this.autoCloseDuration;
|
|
@@ -1846,8 +2081,8 @@ class ToastComponent {
|
|
|
1846
2081
|
setTimeout(() => this.isCopied.set(false), 2000);
|
|
1847
2082
|
});
|
|
1848
2083
|
}
|
|
1849
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1850
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2084
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2085
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ToastComponent, isStandalone: true, selector: "app-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { disposeEvent: "disposeEvent" }, host: { classAttribute: "flex w-full flex-col items-center space-y-4 sm:items-end" }, ngImport: i0, template: "<div\n class=\"ring-opacity/5 pointer-events-auto w-full max-w-sm overflow-hidden rounded-md border-l-4 bg-white shadow-lg\"\n [class]=\"borderClass()\"\n @AnimationTrigger0\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <div class=\"flex items-center justify-between gap-4 p-4\">\n <div class=\"flex-1\">\n <div class=\"flex items-center gap-2\">\n <ng-icon\n class=\"shrink-0\"\n [class]=\"colorClass()\"\n [name]=\"iconKey()\"\n />\n <p [class]=\"colorClass()\">{{ title() }}</p>\n </div>\n\n @if (!!toast().message || !!toast().key) {\n <p class=\"mt-1 text-body-small text-slate-500\">\n {{ toast().message }}\n </p>\n }\n </div>\n\n @if (showCopy()) {\n <button\n class=\"flex shrink-0 items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-600 transition-colors hover:bg-slate-50\"\n (click)=\"copyMessage()\"\n >\n <ng-icon [name]=\"isCopied() ? 'heroCheck' : 'heroDocumentDuplicate'\" class=\"text-sm\" />\n {{ isCopied() ? 'Copied !' : 'Copy' }}\n </button>\n }\n </div>\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], animations: [
|
|
1851
2086
|
trigger('AnimationTrigger0', [
|
|
1852
2087
|
transition(':enter', [
|
|
1853
2088
|
style({ transform: 'translateY(0.5rem)', opacity: 0 }),
|
|
@@ -1858,9 +2093,9 @@ class ToastComponent {
|
|
|
1858
2093
|
animate('100ms ease-in', style({ opacity: 0 })),
|
|
1859
2094
|
]),
|
|
1860
2095
|
]),
|
|
1861
|
-
] }); }
|
|
2096
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1862
2097
|
}
|
|
1863
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2098
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ToastComponent, decorators: [{
|
|
1864
2099
|
type: Component,
|
|
1865
2100
|
args: [{ selector: 'app-toast', host: {
|
|
1866
2101
|
class: 'flex w-full flex-col items-center space-y-4 sm:items-end',
|
|
@@ -1875,7 +2110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1875
2110
|
animate('100ms ease-in', style({ opacity: 0 })),
|
|
1876
2111
|
]),
|
|
1877
2112
|
]),
|
|
1878
|
-
], imports: [
|
|
2113
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1879
2114
|
NgIcon,
|
|
1880
2115
|
], template: "<div\n class=\"ring-opacity/5 pointer-events-auto w-full max-w-sm overflow-hidden rounded-md border-l-4 bg-white shadow-lg\"\n [class]=\"borderClass()\"\n @AnimationTrigger0\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <div class=\"flex items-center justify-between gap-4 p-4\">\n <div class=\"flex-1\">\n <div class=\"flex items-center gap-2\">\n <ng-icon\n class=\"shrink-0\"\n [class]=\"colorClass()\"\n [name]=\"iconKey()\"\n />\n <p [class]=\"colorClass()\">{{ title() }}</p>\n </div>\n\n @if (!!toast().message || !!toast().key) {\n <p class=\"mt-1 text-body-small text-slate-500\">\n {{ toast().message }}\n </p>\n }\n </div>\n\n @if (showCopy()) {\n <button\n class=\"flex shrink-0 items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-600 transition-colors hover:bg-slate-50\"\n (click)=\"copyMessage()\"\n >\n <ng-icon [name]=\"isCopied() ? 'heroCheck' : 'heroDocumentDuplicate'\" class=\"text-sm\" />\n {{ isCopied() ? 'Copied !' : 'Copy' }}\n </button>\n }\n </div>\n</div>\n" }]
|
|
1881
2116
|
}], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], disposeEvent: [{ type: i0.Output, args: ["disposeEvent"] }] } });
|
|
@@ -1907,10 +2142,10 @@ class ToasterComponent {
|
|
|
1907
2142
|
this.currentToasts.splice(toastIndex, 1);
|
|
1908
2143
|
this.cdr.detectChanges();
|
|
1909
2144
|
}
|
|
1910
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1911
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2145
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2146
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ToasterComponent, isStandalone: true, selector: "skcr-toaster", ngImport: i0, template: "<div class=\"fixed end-0 top-0 z-100 m-16 px-3 py-2\">\n <div\n class=\"pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6\"\n aria-live=\"assertive\"\n >\n <div class=\"flex w-full flex-col items-center space-y-4 sm:items-end\">\n @for (toast of currentToasts; track toast; let i = $index) {\n <app-toast\n [toast]=\"toast\"\n (disposeEvent)=\"dispose($event)\"\n ></app-toast>\n }\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: ToastComponent, selector: "app-toast", inputs: ["toast"], outputs: ["disposeEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1912
2147
|
}
|
|
1913
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2148
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ToasterComponent, decorators: [{
|
|
1914
2149
|
type: Component,
|
|
1915
2150
|
args: [{ selector: 'skcr-toaster', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1916
2151
|
ToastComponent,
|
|
@@ -1922,14 +2157,22 @@ class SelectGroupedComponent {
|
|
|
1922
2157
|
this.overlay = overlay;
|
|
1923
2158
|
this.positionBuilder = positionBuilder;
|
|
1924
2159
|
this.vcr = vcr;
|
|
1925
|
-
this.value = model(
|
|
1926
|
-
|
|
1927
|
-
this.
|
|
1928
|
-
|
|
1929
|
-
this.
|
|
1930
|
-
|
|
1931
|
-
this.
|
|
1932
|
-
|
|
2160
|
+
this.value = model(/* @ts-ignore */
|
|
2161
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2162
|
+
this.options = input.required(/* @ts-ignore */
|
|
2163
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
2164
|
+
this.placeholder = input('', /* @ts-ignore */
|
|
2165
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
2166
|
+
this.isInvalid = input(false, /* @ts-ignore */
|
|
2167
|
+
...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
|
|
2168
|
+
this.isDisabled = input(false, /* @ts-ignore */
|
|
2169
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
2170
|
+
this.isOptional = input(false, /* @ts-ignore */
|
|
2171
|
+
...(ngDevMode ? [{ debugName: "isOptional" }] : /* istanbul ignore next */ []));
|
|
2172
|
+
this.isFullWidth = input(false, /* @ts-ignore */
|
|
2173
|
+
...(ngDevMode ? [{ debugName: "isFullWidth" }] : /* istanbul ignore next */ []));
|
|
2174
|
+
this.label = input('', /* @ts-ignore */
|
|
2175
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1933
2176
|
this.formattedOptions = computed(() => {
|
|
1934
2177
|
let options = this.options();
|
|
1935
2178
|
if (options[0]?.value === undefined) {
|
|
@@ -1941,7 +2184,8 @@ class SelectGroupedComponent {
|
|
|
1941
2184
|
});
|
|
1942
2185
|
}
|
|
1943
2186
|
return options;
|
|
1944
|
-
},
|
|
2187
|
+
}, /* @ts-ignore */
|
|
2188
|
+
...(ngDevMode ? [{ debugName: "formattedOptions" }] : /* istanbul ignore next */ []));
|
|
1945
2189
|
this.groupedOptions = computed(() => {
|
|
1946
2190
|
return this.formattedOptions().reduce((acc, option) => {
|
|
1947
2191
|
const name = option.group || 'Other';
|
|
@@ -1957,7 +2201,8 @@ class SelectGroupedComponent {
|
|
|
1957
2201
|
}
|
|
1958
2202
|
return acc;
|
|
1959
2203
|
}, []);
|
|
1960
|
-
},
|
|
2204
|
+
}, /* @ts-ignore */
|
|
2205
|
+
...(ngDevMode ? [{ debugName: "groupedOptions" }] : /* istanbul ignore next */ []));
|
|
1961
2206
|
this.displayedValue = computed(() => {
|
|
1962
2207
|
let displayedValue;
|
|
1963
2208
|
if (this.value() !== null && this.value() !== undefined) {
|
|
@@ -1975,9 +2220,14 @@ class SelectGroupedComponent {
|
|
|
1975
2220
|
}
|
|
1976
2221
|
}
|
|
1977
2222
|
return displayedValue;
|
|
1978
|
-
},
|
|
2223
|
+
}, /* @ts-ignore */
|
|
2224
|
+
...(ngDevMode ? [{ debugName: "displayedValue" }] : /* istanbul ignore next */ []));
|
|
1979
2225
|
this.childMenuStyle = {};
|
|
1980
2226
|
this.triggerWidth = 0;
|
|
2227
|
+
this.triggerBtn = viewChild.required('triggerBtn', /* @ts-ignore */
|
|
2228
|
+
...(ngDevMode ? [{ debugName: "triggerBtn" }] : /* istanbul ignore next */ []));
|
|
2229
|
+
this.overlayMenu = viewChild.required('overlayMenu', /* @ts-ignore */
|
|
2230
|
+
...(ngDevMode ? [{ debugName: "overlayMenu" }] : /* istanbul ignore next */ []));
|
|
1981
2231
|
}
|
|
1982
2232
|
onParentOptionHover(event) {
|
|
1983
2233
|
const rect = event.target.getBoundingClientRect();
|
|
@@ -1990,9 +2240,9 @@ class SelectGroupedComponent {
|
|
|
1990
2240
|
if (this.overlayRef) {
|
|
1991
2241
|
this.closeMenu();
|
|
1992
2242
|
}
|
|
1993
|
-
const triggerWidth = this.triggerBtn.nativeElement.offsetWidth;
|
|
2243
|
+
const triggerWidth = this.triggerBtn().nativeElement.offsetWidth;
|
|
1994
2244
|
const positionStrategy = this.positionBuilder
|
|
1995
|
-
.flexibleConnectedTo(this.triggerBtn.nativeElement)
|
|
2245
|
+
.flexibleConnectedTo(this.triggerBtn().nativeElement)
|
|
1996
2246
|
.withPositions([
|
|
1997
2247
|
{
|
|
1998
2248
|
originX: 'start',
|
|
@@ -2008,7 +2258,7 @@ class SelectGroupedComponent {
|
|
|
2008
2258
|
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
2009
2259
|
});
|
|
2010
2260
|
this.triggerWidth = triggerWidth;
|
|
2011
|
-
this.overlayRef.attach(new TemplatePortal(this.overlayMenu, this.vcr));
|
|
2261
|
+
this.overlayRef.attach(new TemplatePortal(this.overlayMenu(), this.vcr));
|
|
2012
2262
|
this.overlayRef.backdropClick().subscribe(() => this.closeMenu());
|
|
2013
2263
|
}
|
|
2014
2264
|
closeMenu() {
|
|
@@ -2042,8 +2292,8 @@ class SelectGroupedComponent {
|
|
|
2042
2292
|
isItemSelected(item) {
|
|
2043
2293
|
return this.value() === item.value;
|
|
2044
2294
|
}
|
|
2045
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2046
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2295
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectGroupedComponent, deps: [{ token: i1$3.Overlay }, { token: i1$3.OverlayPositionBuilder }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2296
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SelectGroupedComponent, isStandalone: true, selector: "skcr-select-grouped", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isOptional: { classPropertyName: "isOptional", publicName: "isOptional", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }, { propertyName: "overlayMenu", first: true, predicate: ["overlayMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n <label\n class=\"flex items-center gap-2\"\n id=\"multiselect-label\"\n >\n {{ label() }}\n\n @if (isOptional()) {\n <span class=\"text-xs text-subtitle\">Optionnal</span>\n }\n </label>\n\n <div class=\"relative mt-1\">\n <button\n class=\"grid w-full min-h-9 cursor-default grid-cols-1 rounded-md shadow-sm py-2 px-3 text-left outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary sm:text-body-small/6\"\n #triggerBtn\n (click)=\"toggleSelect($event)\"\n [disabled]=\"isDisabled() || !options().length\"\n [ngClass]=\"{\n 'outline-destructive focus:outline-destructive focus:ring-destructive': isInvalid(),\n 'outline-border-color focus:outline-primaryBlue focus:ring-primaryBlue': !isInvalid(),\n 'cursor-not-allowed bg-slate-50': isDisabled() || !options().length,\n 'cursor-pointer bg-white': !isDisabled() && !!options().length,\n }\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-haspopup=\"listbox\"\n aria-labelledby=\"multiselect-label\"\n >\n <div class=\"col-start-1 row-start-1 block gap-2 truncate pr-12\">\n @if (!value()) {\n {{ placeholder() }}\n } @else {\n <span\n class=\"col-start-1 row-start-1 items-center gap-2 truncate pr-6 h-5\"\n [ngClass]=\"{\n 'text-slate-400': !this.value(),\n }\"\n >\n {{ this.displayedValue() }}\n </span>\n }\n </div>\n\n <span class=\"col-start-1 row-start-1 flex items-center gap-2 self-center justify-self-end text-subtitle\">\n <span class=\"size-5 sm:size-4\">\n <ng-icon name=\"heroChevronUpDown\"/>\n </span>\n </span>\n </button>\n\n <ng-template #overlayMenu>\n <div\n class=\"z-50 mt-1 w-full rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-body-small\"\n [style.maxWidth.px]=\"triggerWidth\"\n [style.width.px]=\"triggerWidth\"\n @AnimationTrigger0\n role=\"listbox\"\n aria-labelledby=\"multiselect-label\"\n >\n <ul class=\"max-h-60 overflow-y-auto scrollbar-hide\">\n @for (optionGroup of groupedOptions(); track optionGroup.name; let i = $index) {\n <li\n class=\"flex justify-between relative group cursor-default py-2 pr-3 pl-3 select-none\"\n [id]=\"'listbox-option-' + i\"\n role=\"option\"\n (mouseenter)=\"onParentOptionHover($event)\"\n >\n <span class=\"block truncate\">\n {{ optionGroup.name }}\n </span>\n\n <ng-icon\n name=\"heroChevronRight\"\n ></ng-icon>\n <ul\n class=\"fixed top-0 left-full z-30 w-48 hidden rounded-md bg-white py-1 text-body-small shadow-lg ring-1 ring-black/5 border border-border-color group-hover:block\"\n [ngStyle]=\"childMenuStyle\"\n >\n @for (option of optionGroup.options; track option.id) {\n <li\n class=\"relative cursor-default py-2 pr-9 pl-3 select-none hover:bg-primary-50\"\n (click)=\"handleOptionClick(option); $event.stopPropagation()\"\n >\n <span class=\"block truncate\">\n {{ option.name }}\n </span>\n\n @if (isItemSelected(option)) {\n <span class=\"absolute inset-y-0 right-0 flex items-center pr-4 text-primary\">\n <ng-icon name=\"heroCheck\"/>\n </span>\n }\n </li>\n }\n </ul>\n </li>\n }\n </ul>\n </div>\n </ng-template>\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
|
|
2047
2297
|
trigger('AnimationTrigger0', [
|
|
2048
2298
|
transition(':leave', [
|
|
2049
2299
|
style({ opacity: 1 }),
|
|
@@ -2052,7 +2302,7 @@ class SelectGroupedComponent {
|
|
|
2052
2302
|
]),
|
|
2053
2303
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2054
2304
|
}
|
|
2055
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2305
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectGroupedComponent, decorators: [{
|
|
2056
2306
|
type: Component,
|
|
2057
2307
|
args: [{ selector: 'skcr-select-grouped', animations: [
|
|
2058
2308
|
trigger('AnimationTrigger0', [
|
|
@@ -2067,13 +2317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
2067
2317
|
NgIcon,
|
|
2068
2318
|
NgStyle,
|
|
2069
2319
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n <label\n class=\"flex items-center gap-2\"\n id=\"multiselect-label\"\n >\n {{ label() }}\n\n @if (isOptional()) {\n <span class=\"text-xs text-subtitle\">Optionnal</span>\n }\n </label>\n\n <div class=\"relative mt-1\">\n <button\n class=\"grid w-full min-h-9 cursor-default grid-cols-1 rounded-md shadow-sm py-2 px-3 text-left outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary sm:text-body-small/6\"\n #triggerBtn\n (click)=\"toggleSelect($event)\"\n [disabled]=\"isDisabled() || !options().length\"\n [ngClass]=\"{\n 'outline-destructive focus:outline-destructive focus:ring-destructive': isInvalid(),\n 'outline-border-color focus:outline-primaryBlue focus:ring-primaryBlue': !isInvalid(),\n 'cursor-not-allowed bg-slate-50': isDisabled() || !options().length,\n 'cursor-pointer bg-white': !isDisabled() && !!options().length,\n }\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-haspopup=\"listbox\"\n aria-labelledby=\"multiselect-label\"\n >\n <div class=\"col-start-1 row-start-1 block gap-2 truncate pr-12\">\n @if (!value()) {\n {{ placeholder() }}\n } @else {\n <span\n class=\"col-start-1 row-start-1 items-center gap-2 truncate pr-6 h-5\"\n [ngClass]=\"{\n 'text-slate-400': !this.value(),\n }\"\n >\n {{ this.displayedValue() }}\n </span>\n }\n </div>\n\n <span class=\"col-start-1 row-start-1 flex items-center gap-2 self-center justify-self-end text-subtitle\">\n <span class=\"size-5 sm:size-4\">\n <ng-icon name=\"heroChevronUpDown\"/>\n </span>\n </span>\n </button>\n\n <ng-template #overlayMenu>\n <div\n class=\"z-50 mt-1 w-full rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-body-small\"\n [style.maxWidth.px]=\"triggerWidth\"\n [style.width.px]=\"triggerWidth\"\n @AnimationTrigger0\n role=\"listbox\"\n aria-labelledby=\"multiselect-label\"\n >\n <ul class=\"max-h-60 overflow-y-auto scrollbar-hide\">\n @for (optionGroup of groupedOptions(); track optionGroup.name; let i = $index) {\n <li\n class=\"flex justify-between relative group cursor-default py-2 pr-3 pl-3 select-none\"\n [id]=\"'listbox-option-' + i\"\n role=\"option\"\n (mouseenter)=\"onParentOptionHover($event)\"\n >\n <span class=\"block truncate\">\n {{ optionGroup.name }}\n </span>\n\n <ng-icon\n name=\"heroChevronRight\"\n ></ng-icon>\n <ul\n class=\"fixed top-0 left-full z-30 w-48 hidden rounded-md bg-white py-1 text-body-small shadow-lg ring-1 ring-black/5 border border-border-color group-hover:block\"\n [ngStyle]=\"childMenuStyle\"\n >\n @for (option of optionGroup.options; track option.id) {\n <li\n class=\"relative cursor-default py-2 pr-9 pl-3 select-none hover:bg-primary-50\"\n (click)=\"handleOptionClick(option); $event.stopPropagation()\"\n >\n <span class=\"block truncate\">\n {{ option.name }}\n </span>\n\n @if (isItemSelected(option)) {\n <span class=\"absolute inset-y-0 right-0 flex items-center pr-4 text-primary\">\n <ng-icon name=\"heroCheck\"/>\n </span>\n }\n </li>\n }\n </ul>\n </li>\n }\n </ul>\n </div>\n </ng-template>\n </div>\n</div>\n" }]
|
|
2070
|
-
}], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i1$3.OverlayPositionBuilder }, { type: i0.ViewContainerRef }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isOptional: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOptional", required: false }] }], isFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFullWidth", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], triggerBtn: [{
|
|
2071
|
-
type: ViewChild,
|
|
2072
|
-
args: ['triggerBtn', { static: false }]
|
|
2073
|
-
}], overlayMenu: [{
|
|
2074
|
-
type: ViewChild,
|
|
2075
|
-
args: ['overlayMenu']
|
|
2076
|
-
}] } });
|
|
2320
|
+
}], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i1$3.OverlayPositionBuilder }, { type: i0.ViewContainerRef }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isOptional: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOptional", required: false }] }], isFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFullWidth", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], triggerBtn: [{ type: i0.ViewChild, args: ['triggerBtn', { isSignal: true }] }], overlayMenu: [{ type: i0.ViewChild, args: ['overlayMenu', { isSignal: true }] }] } });
|
|
2077
2321
|
|
|
2078
2322
|
/**
|
|
2079
2323
|
* Generated bundle index. Do not edit.
|