tickera-angular-components 0.0.1-dev.6 → 0.0.1-dev.8
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.
|
@@ -1392,11 +1392,11 @@ class AppButtonComponent {
|
|
|
1392
1392
|
.join(' ');
|
|
1393
1393
|
}
|
|
1394
1394
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1395
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppButtonComponent, isStandalone: true, selector: "app-button", inputs: { disabled: "disabled", loading: "loading", type: "type", variant: "variant", text: "text", size: "size", loadingText: "loadingText", icon: "icon" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n [type]=\"type\"\n [disabled]=\"loading || disabled\"\n [class]=\"buttonClasses\"\n (click)=\"handleClick()\"\n>\n @if (icon && !loading) {\n <i class=\"btn-icon\" [ngClass]=\"icon\"></i>\n }\n\n @if (loading) {\n <i class=\"btn-icon btn-icon-spin ri-refresh-line\"></i>\n }\n\n {{ loading ? loadingText : text }}\n</button>\n", styles: ["
|
|
1395
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppButtonComponent, isStandalone: true, selector: "app-button", inputs: { disabled: "disabled", loading: "loading", type: "type", variant: "variant", text: "text", size: "size", loadingText: "loadingText", icon: "icon" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n [type]=\"type\"\n [disabled]=\"loading || disabled\"\n [class]=\"buttonClasses\"\n (click)=\"handleClick()\"\n>\n @if (icon && !loading) {\n <i class=\"btn-icon\" [ngClass]=\"icon\"></i>\n }\n\n @if (loading) {\n <i class=\"btn-icon btn-icon-spin ri-refresh-line\"></i>\n }\n\n {{ loading ? loadingText : text }}\n</button>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;font-weight:500;outline:none}.btn:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px #4f46e5}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1396
1396
|
}
|
|
1397
1397
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppButtonComponent, decorators: [{
|
|
1398
1398
|
type: Component,
|
|
1399
|
-
args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], template: "<button\n [type]=\"type\"\n [disabled]=\"loading || disabled\"\n [class]=\"buttonClasses\"\n (click)=\"handleClick()\"\n>\n @if (icon && !loading) {\n <i class=\"btn-icon\" [ngClass]=\"icon\"></i>\n }\n\n @if (loading) {\n <i class=\"btn-icon btn-icon-spin ri-refresh-line\"></i>\n }\n\n {{ loading ? loadingText : text }}\n</button>\n", styles: ["
|
|
1399
|
+
args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], template: "<button\n [type]=\"type\"\n [disabled]=\"loading || disabled\"\n [class]=\"buttonClasses\"\n (click)=\"handleClick()\"\n>\n @if (icon && !loading) {\n <i class=\"btn-icon\" [ngClass]=\"icon\"></i>\n }\n\n @if (loading) {\n <i class=\"btn-icon btn-icon-spin ri-refresh-line\"></i>\n }\n\n {{ loading ? loadingText : text }}\n</button>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;font-weight:500;outline:none}.btn:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px #4f46e5}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
1400
1400
|
}], propDecorators: { clicked: [{
|
|
1401
1401
|
type: Output
|
|
1402
1402
|
}], disabled: [{
|
|
@@ -1440,11 +1440,11 @@ class AppLinkButtonComponent {
|
|
|
1440
1440
|
.join(' ');
|
|
1441
1441
|
}
|
|
1442
1442
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppLinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1443
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppLinkButtonComponent, isStandalone: true, selector: "app-link-button", inputs: { disabled: "disabled", loading: "loading", target: "target", text: "text", icon: "icon", loadingText: "loadingText", route: "route", queryParams: "queryParams", size: "size", variant: "variant" }, ngImport: i0, template: "<a\n class=\"{{ buttonClasses }}\"\n [routerLink]=\"!disabled ? route : null\"\n [queryParams]=\"queryParams\"\n [target]=\"target\"\n>\n @if (icon) {\n <i [class]=\"icon\"></i>\n }\n\n {{ loading ? loadingText : text }}\n</a>\n", styles: ["
|
|
1443
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppLinkButtonComponent, isStandalone: true, selector: "app-link-button", inputs: { disabled: "disabled", loading: "loading", target: "target", text: "text", icon: "icon", loadingText: "loadingText", route: "route", queryParams: "queryParams", size: "size", variant: "variant" }, ngImport: i0, template: "<a\n class=\"{{ buttonClasses }}\"\n [routerLink]=\"!disabled ? route : null\"\n [queryParams]=\"queryParams\"\n [target]=\"target\"\n>\n @if (icon) {\n <i [class]=\"icon\"></i>\n }\n\n {{ loading ? loadingText : text }}\n</a>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;font-weight:500;outline:none}.btn:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px #4f46e5}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslocoModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1444
1444
|
}
|
|
1445
1445
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppLinkButtonComponent, decorators: [{
|
|
1446
1446
|
type: Component,
|
|
1447
|
-
args: [{ selector: 'app-link-button', standalone: true, imports: [CommonModule, RouterLink, RouterModule, TranslocoModule], encapsulation: ViewEncapsulation.None, template: "<a\n class=\"{{ buttonClasses }}\"\n [routerLink]=\"!disabled ? route : null\"\n [queryParams]=\"queryParams\"\n [target]=\"target\"\n>\n @if (icon) {\n <i [class]=\"icon\"></i>\n }\n\n {{ loading ? loadingText : text }}\n</a>\n", styles: ["
|
|
1447
|
+
args: [{ selector: 'app-link-button', standalone: true, imports: [CommonModule, RouterLink, RouterModule, TranslocoModule], encapsulation: ViewEncapsulation.None, template: "<a\n class=\"{{ buttonClasses }}\"\n [routerLink]=\"!disabled ? route : null\"\n [queryParams]=\"queryParams\"\n [target]=\"target\"\n>\n @if (icon) {\n <i [class]=\"icon\"></i>\n }\n\n {{ loading ? loadingText : text }}\n</a>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;font-weight:500;outline:none}.btn:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px #4f46e5}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
1448
1448
|
}], propDecorators: { disabled: [{
|
|
1449
1449
|
type: Input
|
|
1450
1450
|
}], loading: [{
|
|
@@ -1832,11 +1832,11 @@ class LanguageSwitcherComponent {
|
|
|
1832
1832
|
setStoredLanguage(lang);
|
|
1833
1833
|
}
|
|
1834
1834
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LanguageSwitcherComponent, deps: [{ token: i2$1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1835
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: LanguageSwitcherComponent, isStandalone: true, selector: "language-switcher", ngImport: i0, template: "<div class=\"lang-switcher\">\n @for (lang of availableLangs; track lang) {\n <button\n (click)=\"switchLang(lang)\"\n class=\"lang-switcher-btn\"\n [class.active]=\"activeLang === lang\"\n [class.inactive]=\"activeLang !== lang\"\n >\n {{ lang | uppercase }}\n </button>\n }\n</div>\n", styles: ["
|
|
1835
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: LanguageSwitcherComponent, isStandalone: true, selector: "language-switcher", ngImport: i0, template: "<div class=\"lang-switcher\">\n @for (lang of availableLangs; track lang) {\n <button\n (click)=\"switchLang(lang)\"\n class=\"lang-switcher-btn\"\n [class.active]=\"activeLang === lang\"\n [class.inactive]=\"activeLang !== lang\"\n >\n {{ lang | uppercase }}\n </button>\n }\n</div>\n", styles: [".lang-switcher{display:flex;align-items:center;gap:.25rem}.lang-switcher-btn{cursor:pointer;padding:.25rem .5rem;font-size:.75rem;font-weight:500;border-radius:.125rem;transition:all .15s ease-in-out;border:none;background:transparent}.lang-switcher-btn.active{background-color:#1f2937;color:#fff}@media(prefers-color-scheme:dark){.lang-switcher-btn.active{background-color:#374151}}.lang-switcher-btn.inactive{color:#9ca3af}.lang-switcher-btn.inactive:hover{color:#fff}@media(prefers-color-scheme:dark){.lang-switcher-btn.inactive{color:#6b7280}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }] });
|
|
1836
1836
|
}
|
|
1837
1837
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LanguageSwitcherComponent, decorators: [{
|
|
1838
1838
|
type: Component,
|
|
1839
|
-
args: [{ selector: 'language-switcher', standalone: true, imports: [CommonModule, TranslocoModule], template: "<div class=\"lang-switcher\">\n @for (lang of availableLangs; track lang) {\n <button\n (click)=\"switchLang(lang)\"\n class=\"lang-switcher-btn\"\n [class.active]=\"activeLang === lang\"\n [class.inactive]=\"activeLang !== lang\"\n >\n {{ lang | uppercase }}\n </button>\n }\n</div>\n", styles: ["
|
|
1839
|
+
args: [{ selector: 'language-switcher', standalone: true, imports: [CommonModule, TranslocoModule], template: "<div class=\"lang-switcher\">\n @for (lang of availableLangs; track lang) {\n <button\n (click)=\"switchLang(lang)\"\n class=\"lang-switcher-btn\"\n [class.active]=\"activeLang === lang\"\n [class.inactive]=\"activeLang !== lang\"\n >\n {{ lang | uppercase }}\n </button>\n }\n</div>\n", styles: [".lang-switcher{display:flex;align-items:center;gap:.25rem}.lang-switcher-btn{cursor:pointer;padding:.25rem .5rem;font-size:.75rem;font-weight:500;border-radius:.125rem;transition:all .15s ease-in-out;border:none;background:transparent}.lang-switcher-btn.active{background-color:#1f2937;color:#fff}@media(prefers-color-scheme:dark){.lang-switcher-btn.active{background-color:#374151}}.lang-switcher-btn.inactive{color:#9ca3af}.lang-switcher-btn.inactive:hover{color:#fff}@media(prefers-color-scheme:dark){.lang-switcher-btn.inactive{color:#6b7280}}\n"] }]
|
|
1840
1840
|
}], ctorParameters: () => [{ type: i2$1.TranslocoService }] });
|
|
1841
1841
|
|
|
1842
1842
|
class FormSelectComponent {
|
|
@@ -2299,11 +2299,11 @@ class ColorPickerComponent {
|
|
|
2299
2299
|
return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
|
|
2300
2300
|
}
|
|
2301
2301
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2302
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ColorPickerComponent, isStandalone: true, selector: "color-picker", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", fieldGroupClass: "fieldGroupClass", showPreview: "showPreview", presetColors: "presetColors" }, outputs: { colorChange: "colorChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n @if (label) {\n <label [for]=\"inputId\" class=\"color-picker-label\">\n {{ label }}\n\n @if (required) {\n <span class=\"color-picker-required\">*</span>\n }\n </label>\n }\n\n <div class=\"relative\">\n <div class=\"color-picker-row\">\n <!-- Color Input -->\n <div class=\"color-picker-input-wrapper\">\n <input\n type=\"text\"\n [id]=\"inputId\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onInputColorChange($event)\"\n (blur)=\"onTouched()\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n class=\"color-picker-input\"\n [class.disabled]=\"readonly\"\n [class.error]=\"showError\"\n pattern=\"^#[0-9A-Fa-f]{6}$\"\n />\n\n <!-- Native Color Picker (Hidden) -->\n <input\n type=\"color\"\n class=\"color-picker-native-input\"\n [disabled]=\"disabled || readonly\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onColorChange($event)\"\n />\n </div>\n\n <!-- Color Preview -->\n @if (showPreview) {\n <div class=\"color-picker-preview-wrapper\">\n <div\n class=\"color-picker-swatch\"\n [style.background-color]=\"value\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled || readonly\"\n ></div>\n </div>\n }\n </div>\n\n <!-- Color Presets Dropdown -->\n @if (isDropdownOpen && !disabled && !readonly) {\n <div class=\"color-picker-dropdown\">\n <div class=\"color-picker-presets\">\n @for (color of presetColors; track color) {\n <button\n type=\"button\"\n class=\"color-picker-preset-button\"\n [style.background-color]=\"color\"\n (click)=\"selectPresetColor(color)\"\n [attr.aria-label]=\"`Select color ${color}`\"\n ></button>\n }\n </div>\n\n <!-- Custom Color Input -->\n <div class=\"color-picker-custom\">\n <label class=\"color-picker-custom-label\">Custom color:</label>\n <input\n type=\"color\"\n class=\"color-picker-custom-input\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onColorChange($event)\"\n />\n </div>\n </div>\n }\n </div>\n\n @if (showError) {\n <div class=\"color-picker-error-message\">Please enter a valid hex color (e.g., #FF5733)</div>\n }\n</div>\n", styles: ["
|
|
2302
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ColorPickerComponent, isStandalone: true, selector: "color-picker", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", fieldGroupClass: "fieldGroupClass", showPreview: "showPreview", presetColors: "presetColors" }, outputs: { colorChange: "colorChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n @if (label) {\n <label [for]=\"inputId\" class=\"color-picker-label\">\n {{ label }}\n\n @if (required) {\n <span class=\"color-picker-required\">*</span>\n }\n </label>\n }\n\n <div class=\"relative\">\n <div class=\"color-picker-row\">\n <!-- Color Input -->\n <div class=\"color-picker-input-wrapper\">\n <input\n type=\"text\"\n [id]=\"inputId\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onInputColorChange($event)\"\n (blur)=\"onTouched()\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n class=\"color-picker-input\"\n [class.disabled]=\"readonly\"\n [class.error]=\"showError\"\n pattern=\"^#[0-9A-Fa-f]{6}$\"\n />\n\n <!-- Native Color Picker (Hidden) -->\n <input\n type=\"color\"\n class=\"color-picker-native-input\"\n [disabled]=\"disabled || readonly\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onColorChange($event)\"\n />\n </div>\n\n <!-- Color Preview -->\n @if (showPreview) {\n <div class=\"color-picker-preview-wrapper\">\n <div\n class=\"color-picker-swatch\"\n [style.background-color]=\"value\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled || readonly\"\n ></div>\n </div>\n }\n </div>\n\n <!-- Color Presets Dropdown -->\n @if (isDropdownOpen && !disabled && !readonly) {\n <div class=\"color-picker-dropdown\">\n <div class=\"color-picker-presets\">\n @for (color of presetColors; track color) {\n <button\n type=\"button\"\n class=\"color-picker-preset-button\"\n [style.background-color]=\"color\"\n (click)=\"selectPresetColor(color)\"\n [attr.aria-label]=\"`Select color ${color}`\"\n ></button>\n }\n </div>\n\n <!-- Custom Color Input -->\n <div class=\"color-picker-custom\">\n <label class=\"color-picker-custom-label\">Custom color:</label>\n <input\n type=\"color\"\n class=\"color-picker-custom-input\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onColorChange($event)\"\n />\n </div>\n </div>\n }\n </div>\n\n @if (showError) {\n <div class=\"color-picker-error-message\">Please enter a valid hex color (e.g., #FF5733)</div>\n }\n</div>\n", styles: [".color-picker-label{color:#374151;display:block;font-size:.875rem;font-weight:600;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.color-picker-label{color:#d1d5db}}.color-picker-required{color:#ef4444}.color-picker-row{display:flex;align-items:center;gap:.5rem}.color-picker-input-wrapper{position:relative;flex:1}.color-picker-input{background-color:#fff;border:1px solid #d1d5db;border-radius:.375rem;color:#111827;display:block;padding:.375rem .75rem;outline:1px solid #d1d5db;outline-offset:1px;width:100%}.color-picker-input::placeholder{color:#9ca3af}.color-picker-input:focus{outline:2px solid #4f46e5;outline-offset:2px}.color-picker-input.error{outline-color:#ef4444}@media(prefers-color-scheme:dark){.color-picker-input.error{background-color:#374151;color:#fff;outline-color:#ef4444}}.color-picker-input.disabled{background-color:#e5e7eb;color:#6b7280;cursor:not-allowed}@media(prefers-color-scheme:dark){.color-picker-input.disabled{background-color:#374151;color:#d1d5db}}.color-picker-native-input{position:absolute;inset:0;opacity:0;cursor:pointer}.color-picker-preview-wrapper{display:flex;align-items:center}.color-picker-swatch{width:37px;height:37px;border-radius:.375rem;border:1px solid #d1d5db;cursor:pointer;transition:all .15s ease-in-out}.color-picker-swatch:hover{transform:scale(1.05)}.color-picker-swatch.disabled{cursor:not-allowed;opacity:.5}.color-picker-dropdown{position:absolute;z-index:50;margin-top:.5rem;padding:.75rem;background-color:#fff;border:1px solid #e5e7eb;border-radius:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;animation:dropdownFadeIn .15s ease-out}@media(prefers-color-scheme:dark){.color-picker-dropdown{background-color:#1f2937;border-color:#374151}}.color-picker-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;min-width:200px}.color-picker-preset-button{width:2rem;height:2rem;border-radius:.375rem;border:2px solid #d1d5db;cursor:pointer;transition:all .15s ease-in-out}.color-picker-preset-button:hover{border-color:#9ca3af;transform:scale(1.1)}.color-picker-preset-button:focus{outline:none;box-shadow:0 0 0 2px #6366f1}.color-picker-custom{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #e5e7eb}@media(prefers-color-scheme:dark){.color-picker-custom{border-color:#374151}}.color-picker-custom-label{display:block;font-size:.75rem;color:#4b5563;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.color-picker-custom-label{color:#9ca3af}}.color-picker-custom-input{width:100%;height:2rem;border-radius:.375rem;cursor:pointer}.color-picker-error-message{color:#ef4444;font-size:.75rem;margin-top:.25rem}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
2303
2303
|
}
|
|
2304
2304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
2305
2305
|
type: Component,
|
|
2306
|
-
args: [{ selector: 'color-picker', standalone: true, imports: [FormsModule, CommonModule, ReactiveFormsModule], template: "<div [class]=\"fieldGroupClasses\">\n @if (label) {\n <label [for]=\"inputId\" class=\"color-picker-label\">\n {{ label }}\n\n @if (required) {\n <span class=\"color-picker-required\">*</span>\n }\n </label>\n }\n\n <div class=\"relative\">\n <div class=\"color-picker-row\">\n <!-- Color Input -->\n <div class=\"color-picker-input-wrapper\">\n <input\n type=\"text\"\n [id]=\"inputId\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onInputColorChange($event)\"\n (blur)=\"onTouched()\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n class=\"color-picker-input\"\n [class.disabled]=\"readonly\"\n [class.error]=\"showError\"\n pattern=\"^#[0-9A-Fa-f]{6}$\"\n />\n\n <!-- Native Color Picker (Hidden) -->\n <input\n type=\"color\"\n class=\"color-picker-native-input\"\n [disabled]=\"disabled || readonly\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onColorChange($event)\"\n />\n </div>\n\n <!-- Color Preview -->\n @if (showPreview) {\n <div class=\"color-picker-preview-wrapper\">\n <div\n class=\"color-picker-swatch\"\n [style.background-color]=\"value\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled || readonly\"\n ></div>\n </div>\n }\n </div>\n\n <!-- Color Presets Dropdown -->\n @if (isDropdownOpen && !disabled && !readonly) {\n <div class=\"color-picker-dropdown\">\n <div class=\"color-picker-presets\">\n @for (color of presetColors; track color) {\n <button\n type=\"button\"\n class=\"color-picker-preset-button\"\n [style.background-color]=\"color\"\n (click)=\"selectPresetColor(color)\"\n [attr.aria-label]=\"`Select color ${color}`\"\n ></button>\n }\n </div>\n\n <!-- Custom Color Input -->\n <div class=\"color-picker-custom\">\n <label class=\"color-picker-custom-label\">Custom color:</label>\n <input\n type=\"color\"\n class=\"color-picker-custom-input\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onColorChange($event)\"\n />\n </div>\n </div>\n }\n </div>\n\n @if (showError) {\n <div class=\"color-picker-error-message\">Please enter a valid hex color (e.g., #FF5733)</div>\n }\n</div>\n", styles: ["
|
|
2306
|
+
args: [{ selector: 'color-picker', standalone: true, imports: [FormsModule, CommonModule, ReactiveFormsModule], template: "<div [class]=\"fieldGroupClasses\">\n @if (label) {\n <label [for]=\"inputId\" class=\"color-picker-label\">\n {{ label }}\n\n @if (required) {\n <span class=\"color-picker-required\">*</span>\n }\n </label>\n }\n\n <div class=\"relative\">\n <div class=\"color-picker-row\">\n <!-- Color Input -->\n <div class=\"color-picker-input-wrapper\">\n <input\n type=\"text\"\n [id]=\"inputId\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onInputColorChange($event)\"\n (blur)=\"onTouched()\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n class=\"color-picker-input\"\n [class.disabled]=\"readonly\"\n [class.error]=\"showError\"\n pattern=\"^#[0-9A-Fa-f]{6}$\"\n />\n\n <!-- Native Color Picker (Hidden) -->\n <input\n type=\"color\"\n class=\"color-picker-native-input\"\n [disabled]=\"disabled || readonly\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onColorChange($event)\"\n />\n </div>\n\n <!-- Color Preview -->\n @if (showPreview) {\n <div class=\"color-picker-preview-wrapper\">\n <div\n class=\"color-picker-swatch\"\n [style.background-color]=\"value\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled || readonly\"\n ></div>\n </div>\n }\n </div>\n\n <!-- Color Presets Dropdown -->\n @if (isDropdownOpen && !disabled && !readonly) {\n <div class=\"color-picker-dropdown\">\n <div class=\"color-picker-presets\">\n @for (color of presetColors; track color) {\n <button\n type=\"button\"\n class=\"color-picker-preset-button\"\n [style.background-color]=\"color\"\n (click)=\"selectPresetColor(color)\"\n [attr.aria-label]=\"`Select color ${color}`\"\n ></button>\n }\n </div>\n\n <!-- Custom Color Input -->\n <div class=\"color-picker-custom\">\n <label class=\"color-picker-custom-label\">Custom color:</label>\n <input\n type=\"color\"\n class=\"color-picker-custom-input\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onColorChange($event)\"\n />\n </div>\n </div>\n }\n </div>\n\n @if (showError) {\n <div class=\"color-picker-error-message\">Please enter a valid hex color (e.g., #FF5733)</div>\n }\n</div>\n", styles: [".color-picker-label{color:#374151;display:block;font-size:.875rem;font-weight:600;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.color-picker-label{color:#d1d5db}}.color-picker-required{color:#ef4444}.color-picker-row{display:flex;align-items:center;gap:.5rem}.color-picker-input-wrapper{position:relative;flex:1}.color-picker-input{background-color:#fff;border:1px solid #d1d5db;border-radius:.375rem;color:#111827;display:block;padding:.375rem .75rem;outline:1px solid #d1d5db;outline-offset:1px;width:100%}.color-picker-input::placeholder{color:#9ca3af}.color-picker-input:focus{outline:2px solid #4f46e5;outline-offset:2px}.color-picker-input.error{outline-color:#ef4444}@media(prefers-color-scheme:dark){.color-picker-input.error{background-color:#374151;color:#fff;outline-color:#ef4444}}.color-picker-input.disabled{background-color:#e5e7eb;color:#6b7280;cursor:not-allowed}@media(prefers-color-scheme:dark){.color-picker-input.disabled{background-color:#374151;color:#d1d5db}}.color-picker-native-input{position:absolute;inset:0;opacity:0;cursor:pointer}.color-picker-preview-wrapper{display:flex;align-items:center}.color-picker-swatch{width:37px;height:37px;border-radius:.375rem;border:1px solid #d1d5db;cursor:pointer;transition:all .15s ease-in-out}.color-picker-swatch:hover{transform:scale(1.05)}.color-picker-swatch.disabled{cursor:not-allowed;opacity:.5}.color-picker-dropdown{position:absolute;z-index:50;margin-top:.5rem;padding:.75rem;background-color:#fff;border:1px solid #e5e7eb;border-radius:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;animation:dropdownFadeIn .15s ease-out}@media(prefers-color-scheme:dark){.color-picker-dropdown{background-color:#1f2937;border-color:#374151}}.color-picker-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;min-width:200px}.color-picker-preset-button{width:2rem;height:2rem;border-radius:.375rem;border:2px solid #d1d5db;cursor:pointer;transition:all .15s ease-in-out}.color-picker-preset-button:hover{border-color:#9ca3af;transform:scale(1.1)}.color-picker-preset-button:focus{outline:none;box-shadow:0 0 0 2px #6366f1}.color-picker-custom{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #e5e7eb}@media(prefers-color-scheme:dark){.color-picker-custom{border-color:#374151}}.color-picker-custom-label{display:block;font-size:.75rem;color:#4b5563;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.color-picker-custom-label{color:#9ca3af}}.color-picker-custom-input{width:100%;height:2rem;border-radius:.375rem;cursor:pointer}.color-picker-error-message{color:#ef4444;font-size:.75rem;margin-top:.25rem}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
2307
2307
|
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
2308
2308
|
type: Self
|
|
2309
2309
|
}, {
|
|
@@ -2529,11 +2529,11 @@ class ToggleSwitchComponent {
|
|
|
2529
2529
|
return baseClasses;
|
|
2530
2530
|
}
|
|
2531
2531
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ToggleSwitchComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2532
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ToggleSwitchComponent, isStandalone: true, selector: "toggle-switch", inputs: { label: "label", name: "name", id: "id", required: "required", disabled: "disabled", size: "size", fieldGroupClass: "fieldGroupClass", description: "description" }, outputs: { toggleClick: "toggleClick" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n @if (label) {\n <label [for]=\"inputId\" class=\"toggle-label\">\n {{ label }}\n\n @if (required) {\n <span class=\"toggle-required\">*</span>\n }\n </label>\n }\n\n <div class=\"toggle-container\">\n <button\n type=\"button\"\n role=\"switch\"\n [id]=\"inputId\"\n [name]=\"name\"\n [attr.aria-checked]=\"value\"\n [attr.aria-required]=\"required\"\n [disabled]=\"disabled\"\n [class]=\"\n 'toggle-switch ' +\n size +\n (value ? ' checked' : ' unchecked') +\n (disabled ? ' disabled' : '')\n \"\n (click)=\"onToggle()\"\n >\n <span\n [class]=\"\n 'toggle-thumb ' +\n size +\n (value ? ' checked' : ' unchecked') +\n (disabled ? ' disabled' : '')\n \"\n ></span>\n </button>\n\n @if (description) {\n <span class=\"toggle-description\">{{ description }}</span>\n }\n </div>\n\n <!-- Hidden checkbox for form submission and accessibility -->\n <input\n type=\"checkbox\"\n [id]=\"inputId + '-hidden'\"\n [name]=\"name\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n class=\"toggle-hidden\"\n (change)=\"onToggle()\"\n />\n</div>\n", styles: ["
|
|
2532
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ToggleSwitchComponent, isStandalone: true, selector: "toggle-switch", inputs: { label: "label", name: "name", id: "id", required: "required", disabled: "disabled", size: "size", fieldGroupClass: "fieldGroupClass", description: "description" }, outputs: { toggleClick: "toggleClick" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n @if (label) {\n <label [for]=\"inputId\" class=\"toggle-label\">\n {{ label }}\n\n @if (required) {\n <span class=\"toggle-required\">*</span>\n }\n </label>\n }\n\n <div class=\"toggle-container\">\n <button\n type=\"button\"\n role=\"switch\"\n [id]=\"inputId\"\n [name]=\"name\"\n [attr.aria-checked]=\"value\"\n [attr.aria-required]=\"required\"\n [disabled]=\"disabled\"\n [class]=\"\n 'toggle-switch ' +\n size +\n (value ? ' checked' : ' unchecked') +\n (disabled ? ' disabled' : '')\n \"\n (click)=\"onToggle()\"\n >\n <span\n [class]=\"\n 'toggle-thumb ' +\n size +\n (value ? ' checked' : ' unchecked') +\n (disabled ? ' disabled' : '')\n \"\n ></span>\n </button>\n\n @if (description) {\n <span class=\"toggle-description\">{{ description }}</span>\n }\n </div>\n\n <!-- Hidden checkbox for form submission and accessibility -->\n <input\n type=\"checkbox\"\n [id]=\"inputId + '-hidden'\"\n [name]=\"name\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n class=\"toggle-hidden\"\n (change)=\"onToggle()\"\n />\n</div>\n", styles: [".toggle-label{display:block;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.toggle-label{color:#d1d5db}}.toggle-required{color:#ef4444}.toggle-container{display:flex;align-items:center}.toggle-description{margin-left:.75rem;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;color:#6b7280}@media(prefers-color-scheme:dark){.toggle-description{color:#9ca3af}}.toggle-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.toggle-switch{display:inline-flex;flex-shrink:0;position:relative;border:2px solid transparent;border-radius:9999px;cursor:pointer;transition:background-color .2s ease-in-out;outline:none}.toggle-switch:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px #4f46e5}.toggle-switch.checked:not(.disabled){background-color:#4f46e5}.toggle-switch.unchecked:not(.disabled){background-color:#e5e7eb}.toggle-switch.disabled{background-color:#d1d5db;cursor:not-allowed;opacity:.5}.toggle-switch.sm{height:1rem;width:1.75rem;padding:0 2px;box-sizing:border-box}.toggle-switch.sm .toggle-thumb{height:calc(1rem - 6px);width:calc(1rem - 6px)}.toggle-switch.sm .toggle-thumb.checked{transform:translate(calc(.75rem - 2px))}.toggle-switch.md{height:1.25rem;width:2.25rem;padding:0 2px;box-sizing:border-box}.toggle-switch.md .toggle-thumb{height:calc(1.25rem - 6px);width:calc(1.25rem - 6px)}.toggle-switch.md .toggle-thumb.checked{transform:translate(calc(1rem - 2px))}.toggle-switch.lg{height:1.75rem;width:3.5rem;padding:0 2px;box-sizing:border-box}.toggle-switch.lg .toggle-thumb{height:calc(1.75rem - 6px);width:calc(1.75rem - 6px)}.toggle-switch.lg .toggle-thumb.checked{transform:translate(calc(1.75rem - 2px))}.toggle-thumb{pointer-events:none;display:inline-block;border-radius:9999px;background-color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;transition:transform .2s ease-in-out;margin:auto 0}.disabled .toggle-thumb{background-color:#9ca3af}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
2533
2533
|
}
|
|
2534
2534
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
|
|
2535
2535
|
type: Component,
|
|
2536
|
-
args: [{ selector: 'toggle-switch', standalone: true, imports: [FormsModule, CommonModule, ReactiveFormsModule], template: "<div [class]=\"fieldGroupClasses\">\n @if (label) {\n <label [for]=\"inputId\" class=\"toggle-label\">\n {{ label }}\n\n @if (required) {\n <span class=\"toggle-required\">*</span>\n }\n </label>\n }\n\n <div class=\"toggle-container\">\n <button\n type=\"button\"\n role=\"switch\"\n [id]=\"inputId\"\n [name]=\"name\"\n [attr.aria-checked]=\"value\"\n [attr.aria-required]=\"required\"\n [disabled]=\"disabled\"\n [class]=\"\n 'toggle-switch ' +\n size +\n (value ? ' checked' : ' unchecked') +\n (disabled ? ' disabled' : '')\n \"\n (click)=\"onToggle()\"\n >\n <span\n [class]=\"\n 'toggle-thumb ' +\n size +\n (value ? ' checked' : ' unchecked') +\n (disabled ? ' disabled' : '')\n \"\n ></span>\n </button>\n\n @if (description) {\n <span class=\"toggle-description\">{{ description }}</span>\n }\n </div>\n\n <!-- Hidden checkbox for form submission and accessibility -->\n <input\n type=\"checkbox\"\n [id]=\"inputId + '-hidden'\"\n [name]=\"name\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n class=\"toggle-hidden\"\n (change)=\"onToggle()\"\n />\n</div>\n", styles: ["
|
|
2536
|
+
args: [{ selector: 'toggle-switch', standalone: true, imports: [FormsModule, CommonModule, ReactiveFormsModule], template: "<div [class]=\"fieldGroupClasses\">\n @if (label) {\n <label [for]=\"inputId\" class=\"toggle-label\">\n {{ label }}\n\n @if (required) {\n <span class=\"toggle-required\">*</span>\n }\n </label>\n }\n\n <div class=\"toggle-container\">\n <button\n type=\"button\"\n role=\"switch\"\n [id]=\"inputId\"\n [name]=\"name\"\n [attr.aria-checked]=\"value\"\n [attr.aria-required]=\"required\"\n [disabled]=\"disabled\"\n [class]=\"\n 'toggle-switch ' +\n size +\n (value ? ' checked' : ' unchecked') +\n (disabled ? ' disabled' : '')\n \"\n (click)=\"onToggle()\"\n >\n <span\n [class]=\"\n 'toggle-thumb ' +\n size +\n (value ? ' checked' : ' unchecked') +\n (disabled ? ' disabled' : '')\n \"\n ></span>\n </button>\n\n @if (description) {\n <span class=\"toggle-description\">{{ description }}</span>\n }\n </div>\n\n <!-- Hidden checkbox for form submission and accessibility -->\n <input\n type=\"checkbox\"\n [id]=\"inputId + '-hidden'\"\n [name]=\"name\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n class=\"toggle-hidden\"\n (change)=\"onToggle()\"\n />\n</div>\n", styles: [".toggle-label{display:block;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.toggle-label{color:#d1d5db}}.toggle-required{color:#ef4444}.toggle-container{display:flex;align-items:center}.toggle-description{margin-left:.75rem;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;color:#6b7280}@media(prefers-color-scheme:dark){.toggle-description{color:#9ca3af}}.toggle-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.toggle-switch{display:inline-flex;flex-shrink:0;position:relative;border:2px solid transparent;border-radius:9999px;cursor:pointer;transition:background-color .2s ease-in-out;outline:none}.toggle-switch:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px #4f46e5}.toggle-switch.checked:not(.disabled){background-color:#4f46e5}.toggle-switch.unchecked:not(.disabled){background-color:#e5e7eb}.toggle-switch.disabled{background-color:#d1d5db;cursor:not-allowed;opacity:.5}.toggle-switch.sm{height:1rem;width:1.75rem;padding:0 2px;box-sizing:border-box}.toggle-switch.sm .toggle-thumb{height:calc(1rem - 6px);width:calc(1rem - 6px)}.toggle-switch.sm .toggle-thumb.checked{transform:translate(calc(.75rem - 2px))}.toggle-switch.md{height:1.25rem;width:2.25rem;padding:0 2px;box-sizing:border-box}.toggle-switch.md .toggle-thumb{height:calc(1.25rem - 6px);width:calc(1.25rem - 6px)}.toggle-switch.md .toggle-thumb.checked{transform:translate(calc(1rem - 2px))}.toggle-switch.lg{height:1.75rem;width:3.5rem;padding:0 2px;box-sizing:border-box}.toggle-switch.lg .toggle-thumb{height:calc(1.75rem - 6px);width:calc(1.75rem - 6px)}.toggle-switch.lg .toggle-thumb.checked{transform:translate(calc(1.75rem - 2px))}.toggle-thumb{pointer-events:none;display:inline-block;border-radius:9999px;background-color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;transition:transform .2s ease-in-out;margin:auto 0}.disabled .toggle-thumb{background-color:#9ca3af}\n"] }]
|
|
2537
2537
|
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
2538
2538
|
type: Self
|
|
2539
2539
|
}, {
|
|
@@ -2615,11 +2615,11 @@ class FileUploadPreviewComponent {
|
|
|
2615
2615
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
2616
2616
|
}
|
|
2617
2617
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2618
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FileUploadPreviewComponent, isStandalone: true, selector: "file-upload-preview", inputs: { file: "file" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"file-preview-item\">\n <div class=\"file-preview-content\">\n <!-- File Preview/Icon -->\n <div class=\"file-preview-icon-wrapper\">\n @if (file.preview) {\n <img [src]=\"file.preview\" [alt]=\"file.name\" class=\"file-preview-image\" />\n } @else {\n <div class=\"file-preview-icon-placeholder\">\n <i [class]=\"getFileTypeIcon(file) + ' file-preview-icon'\"></i>\n </div>\n }\n </div>\n\n <!-- File Info -->\n <div class=\"file-preview-info\">\n <p class=\"file-preview-name\">\n {{ file.name }}\n </p>\n <p class=\"file-preview-meta\">\n @if (!!file.size) {\n {{ formatFileSize(file.size) }}\n }\n @if (file.extension) {\n \u2022 {{ file.extension.toUpperCase() }}\n }\n </p>\n </div>\n </div>\n\n <!-- Actions -->\n <div class=\"file-preview-actions\">\n <app-button\n icon=\"ri-delete-bin-line\"\n (clicked)=\"removeFile()\"\n variant=\"primary\"\n size=\"xs\"\n title=\"Eliminar archivo\"\n />\n </div>\n</div>\n", styles: ["
|
|
2618
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FileUploadPreviewComponent, isStandalone: true, selector: "file-upload-preview", inputs: { file: "file" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"file-preview-item\">\n <div class=\"file-preview-content\">\n <!-- File Preview/Icon -->\n <div class=\"file-preview-icon-wrapper\">\n @if (file.preview) {\n <img [src]=\"file.preview\" [alt]=\"file.name\" class=\"file-preview-image\" />\n } @else {\n <div class=\"file-preview-icon-placeholder\">\n <i [class]=\"getFileTypeIcon(file) + ' file-preview-icon'\"></i>\n </div>\n }\n </div>\n\n <!-- File Info -->\n <div class=\"file-preview-info\">\n <p class=\"file-preview-name\">\n {{ file.name }}\n </p>\n <p class=\"file-preview-meta\">\n @if (!!file.size) {\n {{ formatFileSize(file.size) }}\n }\n @if (file.extension) {\n \u2022 {{ file.extension.toUpperCase() }}\n }\n </p>\n </div>\n </div>\n\n <!-- Actions -->\n <div class=\"file-preview-actions\">\n <app-button\n icon=\"ri-delete-bin-line\"\n (clicked)=\"removeFile()\"\n variant=\"primary\"\n size=\"xs\"\n title=\"Eliminar archivo\"\n />\n </div>\n</div>\n", styles: [".file-preview-item{align-items:center;background-color:#f9fafb;border-radius:.5rem;border:1px solid #e5e7eb;box-sizing:border-box;display:flex;justify-content:space-between;padding:.75rem;width:100%;transition:all .2s ease-in-out}.file-preview-item:hover{background-color:#f3f4f6;border-color:#d1d5db}@media(prefers-color-scheme:dark){.file-preview-item{background-color:#1f2937;border-color:#374151}.file-preview-item:hover{background-color:#111827;border-color:#4b5563}}.file-preview-content{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.file-preview-icon-wrapper{flex-shrink:0}.file-preview-image{width:2.5rem;height:2.5rem;object-fit:cover;border-radius:.375rem}.file-preview-icon-placeholder{width:2.5rem;height:2.5rem;background-color:#e5e7eb;border-radius:.375rem;display:flex;align-items:center;justify-content:center}@media(prefers-color-scheme:dark){.file-preview-icon-placeholder{background-color:#374151}}.file-preview-icon{color:#4b5563;font-size:1.125rem}@media(prefers-color-scheme:dark){.file-preview-icon{color:#9ca3af}}.file-preview-info{flex:1;min-width:0}.file-preview-name{color:#111827;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;font-weight:500;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(prefers-color-scheme:dark){.file-preview-name{color:#f3f4f6}}.file-preview-meta{color:#6b7280;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;margin:0}@media(prefers-color-scheme:dark){.file-preview-meta{color:#9ca3af}}.file-preview-actions{display:flex;align-items:center;gap:.5rem;margin-left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }] });
|
|
2619
2619
|
}
|
|
2620
2620
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadPreviewComponent, decorators: [{
|
|
2621
2621
|
type: Component,
|
|
2622
|
-
args: [{ selector: 'file-upload-preview', standalone: true, imports: [FormsModule, CommonModule, ReactiveFormsModule, AppButtonComponent], template: "<div class=\"file-preview-item\">\n <div class=\"file-preview-content\">\n <!-- File Preview/Icon -->\n <div class=\"file-preview-icon-wrapper\">\n @if (file.preview) {\n <img [src]=\"file.preview\" [alt]=\"file.name\" class=\"file-preview-image\" />\n } @else {\n <div class=\"file-preview-icon-placeholder\">\n <i [class]=\"getFileTypeIcon(file) + ' file-preview-icon'\"></i>\n </div>\n }\n </div>\n\n <!-- File Info -->\n <div class=\"file-preview-info\">\n <p class=\"file-preview-name\">\n {{ file.name }}\n </p>\n <p class=\"file-preview-meta\">\n @if (!!file.size) {\n {{ formatFileSize(file.size) }}\n }\n @if (file.extension) {\n \u2022 {{ file.extension.toUpperCase() }}\n }\n </p>\n </div>\n </div>\n\n <!-- Actions -->\n <div class=\"file-preview-actions\">\n <app-button\n icon=\"ri-delete-bin-line\"\n (clicked)=\"removeFile()\"\n variant=\"primary\"\n size=\"xs\"\n title=\"Eliminar archivo\"\n />\n </div>\n</div>\n", styles: ["
|
|
2622
|
+
args: [{ selector: 'file-upload-preview', standalone: true, imports: [FormsModule, CommonModule, ReactiveFormsModule, AppButtonComponent], template: "<div class=\"file-preview-item\">\n <div class=\"file-preview-content\">\n <!-- File Preview/Icon -->\n <div class=\"file-preview-icon-wrapper\">\n @if (file.preview) {\n <img [src]=\"file.preview\" [alt]=\"file.name\" class=\"file-preview-image\" />\n } @else {\n <div class=\"file-preview-icon-placeholder\">\n <i [class]=\"getFileTypeIcon(file) + ' file-preview-icon'\"></i>\n </div>\n }\n </div>\n\n <!-- File Info -->\n <div class=\"file-preview-info\">\n <p class=\"file-preview-name\">\n {{ file.name }}\n </p>\n <p class=\"file-preview-meta\">\n @if (!!file.size) {\n {{ formatFileSize(file.size) }}\n }\n @if (file.extension) {\n \u2022 {{ file.extension.toUpperCase() }}\n }\n </p>\n </div>\n </div>\n\n <!-- Actions -->\n <div class=\"file-preview-actions\">\n <app-button\n icon=\"ri-delete-bin-line\"\n (clicked)=\"removeFile()\"\n variant=\"primary\"\n size=\"xs\"\n title=\"Eliminar archivo\"\n />\n </div>\n</div>\n", styles: [".file-preview-item{align-items:center;background-color:#f9fafb;border-radius:.5rem;border:1px solid #e5e7eb;box-sizing:border-box;display:flex;justify-content:space-between;padding:.75rem;width:100%;transition:all .2s ease-in-out}.file-preview-item:hover{background-color:#f3f4f6;border-color:#d1d5db}@media(prefers-color-scheme:dark){.file-preview-item{background-color:#1f2937;border-color:#374151}.file-preview-item:hover{background-color:#111827;border-color:#4b5563}}.file-preview-content{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.file-preview-icon-wrapper{flex-shrink:0}.file-preview-image{width:2.5rem;height:2.5rem;object-fit:cover;border-radius:.375rem}.file-preview-icon-placeholder{width:2.5rem;height:2.5rem;background-color:#e5e7eb;border-radius:.375rem;display:flex;align-items:center;justify-content:center}@media(prefers-color-scheme:dark){.file-preview-icon-placeholder{background-color:#374151}}.file-preview-icon{color:#4b5563;font-size:1.125rem}@media(prefers-color-scheme:dark){.file-preview-icon{color:#9ca3af}}.file-preview-info{flex:1;min-width:0}.file-preview-name{color:#111827;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;font-weight:500;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(prefers-color-scheme:dark){.file-preview-name{color:#f3f4f6}}.file-preview-meta{color:#6b7280;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;margin:0}@media(prefers-color-scheme:dark){.file-preview-meta{color:#9ca3af}}.file-preview-actions{display:flex;align-items:center;gap:.5rem;margin-left:1rem}\n"] }]
|
|
2623
2623
|
}], propDecorators: { file: [{
|
|
2624
2624
|
type: Input,
|
|
2625
2625
|
args: [{ required: true }]
|
|
@@ -2855,7 +2855,7 @@ class FileUploadComponent {
|
|
|
2855
2855
|
return baseClasses;
|
|
2856
2856
|
}
|
|
2857
2857
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i2$1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2858
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FileUploadComponent, isStandalone: true, selector: "file-upload", inputs: { label: "label", name: "name", id: "id", required: "required", readonly: "readonly", fieldGroupClass: "fieldGroupClass", config: "config", accept: "accept" }, outputs: { fileSelected: "fileSelected", fileRemoved: "fileRemoved", validationError: "validationError" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n @if (label) {\n <label [for]=\"inputId\" class=\"file-upload-label\">\n {{ label }}\n\n @if (required) {\n <span class=\"file-upload-required\">*</span>\n }\n </label>\n }\n\n <!-- Upload Area -->\n <div\n class=\"file-upload-container\"\n (drop)=\"onDrop($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n >\n <div [class]=\"uploadAreaClasses\" (click)=\"!disabled && triggerFileInput()\">\n <input\n [id]=\"inputId\"\n [name]=\"name\"\n type=\"file\"\n [accept]=\"accept\"\n [multiple]=\"config.multiple\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelect($event)\"\n (blur)=\"onTouched()\"\n class=\"file-upload-hidden\"\n />\n\n <div class=\"file-upload-content\">\n <i class=\"ri-upload-cloud-2-line file-upload-icon\"></i>\n <div class=\"file-upload-text\">\n <p class=\"file-upload-primary-text\">\n @if (config.multiple) {\n {{ 'fileUpload.dropMultiple' | transloco }}\n } @else {\n {{ 'fileUpload.dropSingle' | transloco }}\n }\n </p>\n <p class=\"file-upload-secondary-text\">\n @if (config.allowedExtensions && config.allowedExtensions.length > 0) {\n {{ 'fileUpload.allowedExtensions' | transloco }}\n {{ config.allowedExtensions.join(', ') }}\n }\n @if (config.maxFileSize) {\n \u2022 {{ 'fileUpload.maxSize' | transloco }} {{ formatFileSize(config.maxFileSize) }}\n }\n </p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Files Preview -->\n @if (files.length > 0) {\n <div class=\"file-upload-list\">\n @for (file of files; track file; let i = $index) {\n <file-upload-preview [file]=\"file\" (remove)=\"removeFile(i)\" />\n }\n </div>\n }\n\n <!-- Validation Error -->\n @if (showError) {\n <div class=\"file-upload-error\">\n {{ errorMessage }}\n </div>\n }\n\n <!-- File Type Legend -->\n @if (files.length === 0) {\n <div class=\"file-upload-legend\">\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-image-line file-upload-legend-icon-blue\"></i>\n <span>{{ 'fileUpload.fileTypeImages' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-pdf-line file-upload-legend-icon-red\"></i>\n <span>PDF</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-excel-line file-upload-legend-icon-green\"></i>\n <span>{{ 'fileUpload.fileTypeExcel' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-word-line file-upload-legend-icon-word\"></i>\n <span>{{ 'fileUpload.fileTypeWord' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-text-line file-upload-legend-icon-gray\"></i>\n <span>{{ 'fileUpload.fileTypeText' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-line file-upload-legend-icon-muted\"></i>\n <span>{{ 'fileUpload.fileTypeOther' | transloco }}</span>\n </div>\n </div>\n }\n</div>\n", styles: ["
|
|
2858
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FileUploadComponent, isStandalone: true, selector: "file-upload", inputs: { label: "label", name: "name", id: "id", required: "required", readonly: "readonly", fieldGroupClass: "fieldGroupClass", config: "config", accept: "accept" }, outputs: { fileSelected: "fileSelected", fileRemoved: "fileRemoved", validationError: "validationError" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n @if (label) {\n <label [for]=\"inputId\" class=\"file-upload-label\">\n {{ label }}\n\n @if (required) {\n <span class=\"file-upload-required\">*</span>\n }\n </label>\n }\n\n <!-- Upload Area -->\n <div\n class=\"file-upload-container\"\n (drop)=\"onDrop($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n >\n <div [class]=\"uploadAreaClasses\" (click)=\"!disabled && triggerFileInput()\">\n <input\n [id]=\"inputId\"\n [name]=\"name\"\n type=\"file\"\n [accept]=\"accept\"\n [multiple]=\"config.multiple\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelect($event)\"\n (blur)=\"onTouched()\"\n class=\"file-upload-hidden\"\n />\n\n <div class=\"file-upload-content\">\n <i class=\"ri-upload-cloud-2-line file-upload-icon\"></i>\n <div class=\"file-upload-text\">\n <p class=\"file-upload-primary-text\">\n @if (config.multiple) {\n {{ 'fileUpload.dropMultiple' | transloco }}\n } @else {\n {{ 'fileUpload.dropSingle' | transloco }}\n }\n </p>\n <p class=\"file-upload-secondary-text\">\n @if (config.allowedExtensions && config.allowedExtensions.length > 0) {\n {{ 'fileUpload.allowedExtensions' | transloco }}\n {{ config.allowedExtensions.join(', ') }}\n }\n @if (config.maxFileSize) {\n \u2022 {{ 'fileUpload.maxSize' | transloco }} {{ formatFileSize(config.maxFileSize) }}\n }\n </p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Files Preview -->\n @if (files.length > 0) {\n <div class=\"file-upload-list\">\n @for (file of files; track file; let i = $index) {\n <file-upload-preview [file]=\"file\" (remove)=\"removeFile(i)\" />\n }\n </div>\n }\n\n <!-- Validation Error -->\n @if (showError) {\n <div class=\"file-upload-error\">\n {{ errorMessage }}\n </div>\n }\n\n <!-- File Type Legend -->\n @if (files.length === 0) {\n <div class=\"file-upload-legend\">\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-image-line file-upload-legend-icon-blue\"></i>\n <span>{{ 'fileUpload.fileTypeImages' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-pdf-line file-upload-legend-icon-red\"></i>\n <span>PDF</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-excel-line file-upload-legend-icon-green\"></i>\n <span>{{ 'fileUpload.fileTypeExcel' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-word-line file-upload-legend-icon-word\"></i>\n <span>{{ 'fileUpload.fileTypeWord' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-text-line file-upload-legend-icon-gray\"></i>\n <span>{{ 'fileUpload.fileTypeText' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-line file-upload-legend-icon-muted\"></i>\n <span>{{ 'fileUpload.fileTypeOther' | transloco }}</span>\n </div>\n </div>\n }\n</div>\n", styles: [".file-upload-label{display:block;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.file-upload-label{color:#d1d5db}}.file-upload-required{color:#ef4444}.file-upload-container{position:relative;width:100%}.file-upload-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.file-upload-content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.file-upload-icon{font-size:1.875rem;color:#9ca3af}.file-upload-text{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;color:#4b5563}.file-upload-primary-text{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:500;margin:0}.file-upload-secondary-text{color:#6b7280;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;margin-top:.25rem;margin-bottom:0}.file-upload-area{border:2px dashed #d1d5db;border-radius:.5rem;padding:1.5rem;text-align:center;transition:all .2s ease-in-out;cursor:pointer}.file-upload-area:hover:not(.disabled):not(.drag-over){border-color:#9ca3af;background-color:#f9fafb}.file-upload-area.drag-over{border-color:#60a5fa;background-color:#eff6ff}.file-upload-area.disabled{border-color:#e5e7eb;background-color:#f9fafb;cursor:not-allowed}.file-upload-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.file-upload-error{color:#ef4444;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;margin-top:.25rem}.file-upload-legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.75rem;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;color:#6b7280}@media(prefers-color-scheme:dark){.file-upload-legend{color:#9ca3af}}.file-upload-legend-item{display:flex;align-items:center;gap:.25rem}.file-upload-legend-icon-blue{color:#3b82f6}.file-upload-legend-icon-red{color:#ef4444}.file-upload-legend-icon-green{color:#10b981}.file-upload-legend-icon-word{color:#2563eb}.file-upload-legend-icon-gray{color:#6b7280}.file-upload-legend-icon-muted{color:#9ca3af}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.file-upload-drag-active{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.file-upload-file-list{max-height:15rem;overflow-y:auto}.file-upload-file-list::-webkit-scrollbar{width:.5rem}.file-upload-file-list::-webkit-scrollbar-track{background-color:#f3f4f6;border-radius:9999px}.file-upload-file-list::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:9999px}.file-upload-file-list::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}.file-type-icon--image{color:#3b82f6}.file-type-icon--pdf{color:#ef4444}.file-type-icon--excel{color:#10b981}.file-type-icon--word{color:#2563eb}.file-type-icon--text{color:#6b7280}.file-type-icon--default{color:#9ca3af}@media(max-width:640px){.file-upload-area{padding:1rem}.file-upload-icon{font-size:1.25rem}.file-upload-text{font-size:.75rem}}@media(prefers-color-scheme:dark){.file-upload-area{border-color:#4b5563;background-color:#1f2937}.file-upload-area:hover:not(.disabled):not(.drag-over){border-color:#6b7280;background-color:#374151}.file-upload-area.drag-over{border-color:#60a5fa;background-color:#eff6ff}.file-upload-area.disabled{border-color:#374151;background-color:#111827}.file-upload-text{color:#d1d5db}.file-upload-primary-text{color:#f3f4f6}.file-upload-secondary-text{color:#9ca3af}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: FileUploadPreviewComponent, selector: "file-upload-preview", inputs: ["file"], outputs: ["remove"] }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
|
|
2859
2859
|
}
|
|
2860
2860
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
2861
2861
|
type: Component,
|
|
@@ -2865,7 +2865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2865
2865
|
ReactiveFormsModule,
|
|
2866
2866
|
TranslocoModule,
|
|
2867
2867
|
FileUploadPreviewComponent,
|
|
2868
|
-
], template: "<div [class]=\"fieldGroupClasses\">\n @if (label) {\n <label [for]=\"inputId\" class=\"file-upload-label\">\n {{ label }}\n\n @if (required) {\n <span class=\"file-upload-required\">*</span>\n }\n </label>\n }\n\n <!-- Upload Area -->\n <div\n class=\"file-upload-container\"\n (drop)=\"onDrop($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n >\n <div [class]=\"uploadAreaClasses\" (click)=\"!disabled && triggerFileInput()\">\n <input\n [id]=\"inputId\"\n [name]=\"name\"\n type=\"file\"\n [accept]=\"accept\"\n [multiple]=\"config.multiple\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelect($event)\"\n (blur)=\"onTouched()\"\n class=\"file-upload-hidden\"\n />\n\n <div class=\"file-upload-content\">\n <i class=\"ri-upload-cloud-2-line file-upload-icon\"></i>\n <div class=\"file-upload-text\">\n <p class=\"file-upload-primary-text\">\n @if (config.multiple) {\n {{ 'fileUpload.dropMultiple' | transloco }}\n } @else {\n {{ 'fileUpload.dropSingle' | transloco }}\n }\n </p>\n <p class=\"file-upload-secondary-text\">\n @if (config.allowedExtensions && config.allowedExtensions.length > 0) {\n {{ 'fileUpload.allowedExtensions' | transloco }}\n {{ config.allowedExtensions.join(', ') }}\n }\n @if (config.maxFileSize) {\n \u2022 {{ 'fileUpload.maxSize' | transloco }} {{ formatFileSize(config.maxFileSize) }}\n }\n </p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Files Preview -->\n @if (files.length > 0) {\n <div class=\"file-upload-list\">\n @for (file of files; track file; let i = $index) {\n <file-upload-preview [file]=\"file\" (remove)=\"removeFile(i)\" />\n }\n </div>\n }\n\n <!-- Validation Error -->\n @if (showError) {\n <div class=\"file-upload-error\">\n {{ errorMessage }}\n </div>\n }\n\n <!-- File Type Legend -->\n @if (files.length === 0) {\n <div class=\"file-upload-legend\">\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-image-line file-upload-legend-icon-blue\"></i>\n <span>{{ 'fileUpload.fileTypeImages' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-pdf-line file-upload-legend-icon-red\"></i>\n <span>PDF</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-excel-line file-upload-legend-icon-green\"></i>\n <span>{{ 'fileUpload.fileTypeExcel' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-word-line file-upload-legend-icon-word\"></i>\n <span>{{ 'fileUpload.fileTypeWord' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-text-line file-upload-legend-icon-gray\"></i>\n <span>{{ 'fileUpload.fileTypeText' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-line file-upload-legend-icon-muted\"></i>\n <span>{{ 'fileUpload.fileTypeOther' | transloco }}</span>\n </div>\n </div>\n }\n</div>\n", styles: ["
|
|
2868
|
+
], template: "<div [class]=\"fieldGroupClasses\">\n @if (label) {\n <label [for]=\"inputId\" class=\"file-upload-label\">\n {{ label }}\n\n @if (required) {\n <span class=\"file-upload-required\">*</span>\n }\n </label>\n }\n\n <!-- Upload Area -->\n <div\n class=\"file-upload-container\"\n (drop)=\"onDrop($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n >\n <div [class]=\"uploadAreaClasses\" (click)=\"!disabled && triggerFileInput()\">\n <input\n [id]=\"inputId\"\n [name]=\"name\"\n type=\"file\"\n [accept]=\"accept\"\n [multiple]=\"config.multiple\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelect($event)\"\n (blur)=\"onTouched()\"\n class=\"file-upload-hidden\"\n />\n\n <div class=\"file-upload-content\">\n <i class=\"ri-upload-cloud-2-line file-upload-icon\"></i>\n <div class=\"file-upload-text\">\n <p class=\"file-upload-primary-text\">\n @if (config.multiple) {\n {{ 'fileUpload.dropMultiple' | transloco }}\n } @else {\n {{ 'fileUpload.dropSingle' | transloco }}\n }\n </p>\n <p class=\"file-upload-secondary-text\">\n @if (config.allowedExtensions && config.allowedExtensions.length > 0) {\n {{ 'fileUpload.allowedExtensions' | transloco }}\n {{ config.allowedExtensions.join(', ') }}\n }\n @if (config.maxFileSize) {\n \u2022 {{ 'fileUpload.maxSize' | transloco }} {{ formatFileSize(config.maxFileSize) }}\n }\n </p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Files Preview -->\n @if (files.length > 0) {\n <div class=\"file-upload-list\">\n @for (file of files; track file; let i = $index) {\n <file-upload-preview [file]=\"file\" (remove)=\"removeFile(i)\" />\n }\n </div>\n }\n\n <!-- Validation Error -->\n @if (showError) {\n <div class=\"file-upload-error\">\n {{ errorMessage }}\n </div>\n }\n\n <!-- File Type Legend -->\n @if (files.length === 0) {\n <div class=\"file-upload-legend\">\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-image-line file-upload-legend-icon-blue\"></i>\n <span>{{ 'fileUpload.fileTypeImages' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-pdf-line file-upload-legend-icon-red\"></i>\n <span>PDF</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-excel-line file-upload-legend-icon-green\"></i>\n <span>{{ 'fileUpload.fileTypeExcel' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-word-line file-upload-legend-icon-word\"></i>\n <span>{{ 'fileUpload.fileTypeWord' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-text-line file-upload-legend-icon-gray\"></i>\n <span>{{ 'fileUpload.fileTypeText' | transloco }}</span>\n </div>\n <div class=\"file-upload-legend-item\">\n <i class=\"ri-file-line file-upload-legend-icon-muted\"></i>\n <span>{{ 'fileUpload.fileTypeOther' | transloco }}</span>\n </div>\n </div>\n }\n</div>\n", styles: [".file-upload-label{display:block;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.file-upload-label{color:#d1d5db}}.file-upload-required{color:#ef4444}.file-upload-container{position:relative;width:100%}.file-upload-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.file-upload-content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.file-upload-icon{font-size:1.875rem;color:#9ca3af}.file-upload-text{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;color:#4b5563}.file-upload-primary-text{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:500;margin:0}.file-upload-secondary-text{color:#6b7280;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;margin-top:.25rem;margin-bottom:0}.file-upload-area{border:2px dashed #d1d5db;border-radius:.5rem;padding:1.5rem;text-align:center;transition:all .2s ease-in-out;cursor:pointer}.file-upload-area:hover:not(.disabled):not(.drag-over){border-color:#9ca3af;background-color:#f9fafb}.file-upload-area.drag-over{border-color:#60a5fa;background-color:#eff6ff}.file-upload-area.disabled{border-color:#e5e7eb;background-color:#f9fafb;cursor:not-allowed}.file-upload-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.file-upload-error{color:#ef4444;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;margin-top:.25rem}.file-upload-legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.75rem;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;color:#6b7280}@media(prefers-color-scheme:dark){.file-upload-legend{color:#9ca3af}}.file-upload-legend-item{display:flex;align-items:center;gap:.25rem}.file-upload-legend-icon-blue{color:#3b82f6}.file-upload-legend-icon-red{color:#ef4444}.file-upload-legend-icon-green{color:#10b981}.file-upload-legend-icon-word{color:#2563eb}.file-upload-legend-icon-gray{color:#6b7280}.file-upload-legend-icon-muted{color:#9ca3af}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.file-upload-drag-active{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.file-upload-file-list{max-height:15rem;overflow-y:auto}.file-upload-file-list::-webkit-scrollbar{width:.5rem}.file-upload-file-list::-webkit-scrollbar-track{background-color:#f3f4f6;border-radius:9999px}.file-upload-file-list::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:9999px}.file-upload-file-list::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}.file-type-icon--image{color:#3b82f6}.file-type-icon--pdf{color:#ef4444}.file-type-icon--excel{color:#10b981}.file-type-icon--word{color:#2563eb}.file-type-icon--text{color:#6b7280}.file-type-icon--default{color:#9ca3af}@media(max-width:640px){.file-upload-area{padding:1rem}.file-upload-icon{font-size:1.25rem}.file-upload-text{font-size:.75rem}}@media(prefers-color-scheme:dark){.file-upload-area{border-color:#4b5563;background-color:#1f2937}.file-upload-area:hover:not(.disabled):not(.drag-over){border-color:#6b7280;background-color:#374151}.file-upload-area.drag-over{border-color:#60a5fa;background-color:#eff6ff}.file-upload-area.disabled{border-color:#374151;background-color:#111827}.file-upload-text{color:#d1d5db}.file-upload-primary-text{color:#f3f4f6}.file-upload-secondary-text{color:#9ca3af}}\n"] }]
|
|
2869
2869
|
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
2870
2870
|
type: Self
|
|
2871
2871
|
}, {
|
|
@@ -3251,11 +3251,11 @@ class AdminSelectComponent {
|
|
|
3251
3251
|
return false;
|
|
3252
3252
|
}
|
|
3253
3253
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdminSelectComponent, deps: [{ token: PLATFORM_ID }, { token: AdminService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3254
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: AdminSelectComponent, isStandalone: true, selector: "admin-select", inputs: { label: "label", placeholder: "placeholder", name: "name", required: "required", readonly: "readonly", showError: "showError", customClass: "customClass", control: "control" }, outputs: { adminChange: "adminChange" }, ngImport: i0, template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name || 'country_id'\"\n [class]=\"customClass\"\n [options]=\"admins()\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onAdminSelected($event)\"\n/>\n", styles: ["
|
|
3254
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: AdminSelectComponent, isStandalone: true, selector: "admin-select", inputs: { label: "label", placeholder: "placeholder", name: "name", required: "required", readonly: "readonly", showError: "showError", customClass: "customClass", control: "control" }, outputs: { adminChange: "adminChange" }, ngImport: i0, template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name || 'country_id'\"\n [class]=\"customClass\"\n [options]=\"admins()\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onAdminSelected($event)\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormSelectComponent, selector: "form-select", inputs: ["label", "name", "id", "placeholder", "required", "disabled", "readonly", "options", "fieldGroupClass", "showDefaultOption", "defaultOptionLabel"] }] });
|
|
3255
3255
|
}
|
|
3256
3256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdminSelectComponent, decorators: [{
|
|
3257
3257
|
type: Component,
|
|
3258
|
-
args: [{ selector: 'admin-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormSelectComponent], template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name || 'country_id'\"\n [class]=\"customClass\"\n [options]=\"admins()\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onAdminSelected($event)\"\n/>\n"
|
|
3258
|
+
args: [{ selector: 'admin-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormSelectComponent], template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name || 'country_id'\"\n [class]=\"customClass\"\n [options]=\"admins()\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onAdminSelected($event)\"\n/>\n" }]
|
|
3259
3259
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3260
3260
|
type: Inject,
|
|
3261
3261
|
args: [PLATFORM_ID]
|
|
@@ -3388,7 +3388,7 @@ class CitySelectComponent {
|
|
|
3388
3388
|
useExisting: forwardRef(() => CitySelectComponent),
|
|
3389
3389
|
multi: true,
|
|
3390
3390
|
},
|
|
3391
|
-
], usesOnChanges: true, ngImport: i0, template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name\"\n [class]=\"customClass\"\n [required]=\"required\"\n [options]=\"cities()\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onCitySelected($event)\"\n/>\n", styles: ["
|
|
3391
|
+
], usesOnChanges: true, ngImport: i0, template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name\"\n [class]=\"customClass\"\n [required]=\"required\"\n [options]=\"cities()\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onCitySelected($event)\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormSelectComponent, selector: "form-select", inputs: ["label", "name", "id", "placeholder", "required", "disabled", "readonly", "options", "fieldGroupClass", "showDefaultOption", "defaultOptionLabel"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3392
3392
|
}
|
|
3393
3393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CitySelectComponent, decorators: [{
|
|
3394
3394
|
type: Component,
|
|
@@ -3403,7 +3403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
3403
3403
|
useExisting: forwardRef(() => CitySelectComponent),
|
|
3404
3404
|
multi: true,
|
|
3405
3405
|
},
|
|
3406
|
-
], template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name\"\n [class]=\"customClass\"\n [required]=\"required\"\n [options]=\"cities()\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onCitySelected($event)\"\n/>\n"
|
|
3406
|
+
], template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name\"\n [class]=\"customClass\"\n [required]=\"required\"\n [options]=\"cities()\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onCitySelected($event)\"\n/>\n" }]
|
|
3407
3407
|
}], ctorParameters: () => [{ type: CitiesService }], propDecorators: { label: [{
|
|
3408
3408
|
type: Input
|
|
3409
3409
|
}], name: [{
|
|
@@ -3519,11 +3519,11 @@ class CountrySelectComponent {
|
|
|
3519
3519
|
return false;
|
|
3520
3520
|
}
|
|
3521
3521
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CountrySelectComponent, deps: [{ token: PLATFORM_ID }, { token: CountryService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3522
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: CountrySelectComponent, isStandalone: true, selector: "country-select", inputs: { label: "label", placeholder: "placeholder", name: "name", required: "required", readonly: "readonly", showError: "showError", customClass: "customClass", control: "control" }, outputs: { countryChange: "countryChange" }, ngImport: i0, template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name || 'country_id'\"\n [class]=\"customClass\"\n [options]=\"countries()\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onCountrySelected($event)\"\n></form-select>\n", styles: ["
|
|
3522
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: CountrySelectComponent, isStandalone: true, selector: "country-select", inputs: { label: "label", placeholder: "placeholder", name: "name", required: "required", readonly: "readonly", showError: "showError", customClass: "customClass", control: "control" }, outputs: { countryChange: "countryChange" }, ngImport: i0, template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name || 'country_id'\"\n [class]=\"customClass\"\n [options]=\"countries()\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onCountrySelected($event)\"\n></form-select>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormSelectComponent, selector: "form-select", inputs: ["label", "name", "id", "placeholder", "required", "disabled", "readonly", "options", "fieldGroupClass", "showDefaultOption", "defaultOptionLabel"] }] });
|
|
3523
3523
|
}
|
|
3524
3524
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CountrySelectComponent, decorators: [{
|
|
3525
3525
|
type: Component,
|
|
3526
|
-
args: [{ selector: 'country-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormSelectComponent], template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name || 'country_id'\"\n [class]=\"customClass\"\n [options]=\"countries()\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onCountrySelected($event)\"\n></form-select>\n"
|
|
3526
|
+
args: [{ selector: 'country-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormSelectComponent], template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name || 'country_id'\"\n [class]=\"customClass\"\n [options]=\"countries()\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onCountrySelected($event)\"\n></form-select>\n" }]
|
|
3527
3527
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3528
3528
|
type: Inject,
|
|
3529
3529
|
args: [PLATFORM_ID]
|
|
@@ -3650,7 +3650,7 @@ class StateSelectComponent {
|
|
|
3650
3650
|
useExisting: forwardRef(() => StateSelectComponent),
|
|
3651
3651
|
multi: true,
|
|
3652
3652
|
},
|
|
3653
|
-
], usesOnChanges: true, ngImport: i0, template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name || 'state_id'\"\n [class]=\"customClass\"\n [options]=\"states()\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onStateSelected($event)\"\n></form-select>\n", styles: ["
|
|
3653
|
+
], usesOnChanges: true, ngImport: i0, template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name || 'state_id'\"\n [class]=\"customClass\"\n [options]=\"states()\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onStateSelected($event)\"\n></form-select>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormSelectComponent, selector: "form-select", inputs: ["label", "name", "id", "placeholder", "required", "disabled", "readonly", "options", "fieldGroupClass", "showDefaultOption", "defaultOptionLabel"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3654
3654
|
}
|
|
3655
3655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: StateSelectComponent, decorators: [{
|
|
3656
3656
|
type: Component,
|
|
@@ -3665,7 +3665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
3665
3665
|
useExisting: forwardRef(() => StateSelectComponent),
|
|
3666
3666
|
multi: true,
|
|
3667
3667
|
},
|
|
3668
|
-
], template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name || 'state_id'\"\n [class]=\"customClass\"\n [options]=\"states()\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onStateSelected($event)\"\n></form-select>\n"
|
|
3668
|
+
], template: "<form-select\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [name]=\"name || 'state_id'\"\n [class]=\"customClass\"\n [options]=\"states()\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [formControl]=\"formControl\"\n (change)=\"onStateSelected($event)\"\n></form-select>\n" }]
|
|
3669
3669
|
}], ctorParameters: () => [{ type: StatesService }], propDecorators: { label: [{
|
|
3670
3670
|
type: Input
|
|
3671
3671
|
}], name: [{
|