@frame-kit/ui-ng 0.1.4 → 0.1.5
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.
|
@@ -1008,7 +1008,7 @@ class AutocompleteComponent {
|
|
|
1008
1008
|
provide: FIELD_CONTROL,
|
|
1009
1009
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
1010
1010
|
},
|
|
1011
|
-
], queries: [{ propertyName: "optionTpl", first: true, predicate: FK_AUTOCOMPLETE_OPTION_TPL, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fk-autocomplete__wrapper\">\n <input\n #inputEl\n type=\"text\"\n class=\"fk-autocomplete__native\"\n [attr.id]=\"id\"\n [attr.placeholder]=\"placeholder()\"\n [attr.aria-describedby]=\"\n describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n \"\n [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n [attr.aria-required]=\"isRequired() || null\"\n [attr.aria-expanded]=\"showDropdown()\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.role]=\"'combobox'\"\n [disabled]=\"isDisabledSignal()\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n @if (showDropdown()) {\n <ul class=\"fk-autocomplete__dropdown\" role=\"listbox\">\n @if (loading()) {\n <li class=\"fk-autocomplete__status\" aria-disabled=\"true\">Loading\u2026</li>\n } @else if (visibleOptions().length > 0) {\n @for (option of visibleOptions(); track option.value; let i = $index) {\n <li\n class=\"fk-autocomplete__option\"\n [class.fk-autocomplete__option--active]=\"i === activeIndex()\"\n role=\"option\"\n [attr.aria-selected]=\"i === activeIndex()\"\n (mousedown)=\"selectOption(option)\"\n >\n @if (optionTpl()) {\n <ng-container\n [ngTemplateOutlet]=\"optionTpl()!.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n />\n } @else {\n {{ option.label }}\n }\n </li>\n }\n } @else {\n <li class=\"fk-autocomplete__status\" aria-disabled=\"true\">\n No results found\n </li>\n }\n </ul>\n }\n</div>\n", styles: [":host{display:block}.fk-autocomplete__wrapper{position:relative}.fk-autocomplete__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, .5rem .75rem);font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-autocomplete__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-autocomplete__native:hover:not(:disabled){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-autocomplete__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-autocomplete__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:200px;margin:4px 0 0;padding:4px 0;list-style:none;overflow-y:auto;background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));box-shadow:var(--fk-autocomplete-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, .1))}.fk-autocomplete__option{padding:var(--fk-input-padding, .5rem .75rem);font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));cursor:pointer;transition:background .1s ease}.fk-autocomplete__option:hover,.fk-autocomplete__option--active{background:var(--fk-color-surface-muted, #f7f9fb)}.fk-autocomplete__status{padding:var(--fk-input-padding, .5rem .75rem);font-size:var(--fk-input-font-size, .875rem);color:var(--fk-color-muted, #8a98a8);font-style:italic;list-style:none}:host-context(.fk-form-field--invalid) .fk-autocomplete__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-autocomplete__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1011
|
+
], queries: [{ propertyName: "optionTpl", first: true, predicate: FK_AUTOCOMPLETE_OPTION_TPL, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fk-autocomplete__wrapper\">\n <input\n #inputEl\n type=\"text\"\n class=\"fk-autocomplete__native\"\n [attr.id]=\"id\"\n [attr.placeholder]=\"placeholder()\"\n [attr.aria-describedby]=\"\n describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n \"\n [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n [attr.aria-required]=\"isRequired() || null\"\n [attr.aria-expanded]=\"showDropdown()\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.role]=\"'combobox'\"\n [disabled]=\"isDisabledSignal()\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n @if (showDropdown()) {\n <ul class=\"fk-autocomplete__dropdown\" role=\"listbox\">\n @if (loading()) {\n <li class=\"fk-autocomplete__status\" aria-disabled=\"true\">Loading\u2026</li>\n } @else if (visibleOptions().length > 0) {\n @for (option of visibleOptions(); track option.value; let i = $index) {\n <li\n class=\"fk-autocomplete__option\"\n [class.fk-autocomplete__option--active]=\"i === activeIndex()\"\n role=\"option\"\n [attr.aria-selected]=\"i === activeIndex()\"\n (mousedown)=\"selectOption(option)\"\n >\n @if (optionTpl()) {\n <ng-container\n [ngTemplateOutlet]=\"optionTpl()!.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n />\n } @else {\n {{ option.label }}\n }\n </li>\n }\n } @else {\n <li class=\"fk-autocomplete__status\" aria-disabled=\"true\">\n No results found\n </li>\n }\n </ul>\n }\n</div>\n", styles: [":host{display:block}.fk-autocomplete__wrapper{position:relative}.fk-autocomplete__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, .5rem .75rem);font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-autocomplete__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-autocomplete__native:hover:not(:disabled){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-autocomplete__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-autocomplete__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:200px;margin:4px 0 0;padding:4px 0;list-style:none;overflow-y:auto;background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));box-shadow:var(--fk-autocomplete-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, .1))}.fk-autocomplete__option{padding:var(--fk-input-padding, .5rem .75rem);font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));cursor:pointer;transition:background .1s ease}.fk-autocomplete__option:hover,.fk-autocomplete__option--active{background:var(--fk-color-surface-muted, #f7f9fb)}.fk-autocomplete__status{padding:var(--fk-input-padding, .5rem .75rem);font-size:var(--fk-input-font-size, .875rem);color:var(--fk-color-muted, #8a98a8);font-style:italic;list-style:none}:host-context(.fk-form-field--has-prefix) .fk-autocomplete__native{padding-left:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--has-suffix) .fk-autocomplete__native{padding-right:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--invalid) .fk-autocomplete__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-autocomplete__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1012
1012
|
}
|
|
1013
1013
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
1014
1014
|
type: Component,
|
|
@@ -1017,7 +1017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1017
1017
|
provide: FIELD_CONTROL,
|
|
1018
1018
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
1019
1019
|
},
|
|
1020
|
-
], template: "<div class=\"fk-autocomplete__wrapper\">\n <input\n #inputEl\n type=\"text\"\n class=\"fk-autocomplete__native\"\n [attr.id]=\"id\"\n [attr.placeholder]=\"placeholder()\"\n [attr.aria-describedby]=\"\n describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n \"\n [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n [attr.aria-required]=\"isRequired() || null\"\n [attr.aria-expanded]=\"showDropdown()\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.role]=\"'combobox'\"\n [disabled]=\"isDisabledSignal()\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n @if (showDropdown()) {\n <ul class=\"fk-autocomplete__dropdown\" role=\"listbox\">\n @if (loading()) {\n <li class=\"fk-autocomplete__status\" aria-disabled=\"true\">Loading\u2026</li>\n } @else if (visibleOptions().length > 0) {\n @for (option of visibleOptions(); track option.value; let i = $index) {\n <li\n class=\"fk-autocomplete__option\"\n [class.fk-autocomplete__option--active]=\"i === activeIndex()\"\n role=\"option\"\n [attr.aria-selected]=\"i === activeIndex()\"\n (mousedown)=\"selectOption(option)\"\n >\n @if (optionTpl()) {\n <ng-container\n [ngTemplateOutlet]=\"optionTpl()!.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n />\n } @else {\n {{ option.label }}\n }\n </li>\n }\n } @else {\n <li class=\"fk-autocomplete__status\" aria-disabled=\"true\">\n No results found\n </li>\n }\n </ul>\n }\n</div>\n", styles: [":host{display:block}.fk-autocomplete__wrapper{position:relative}.fk-autocomplete__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, .5rem .75rem);font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-autocomplete__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-autocomplete__native:hover:not(:disabled){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-autocomplete__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-autocomplete__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:200px;margin:4px 0 0;padding:4px 0;list-style:none;overflow-y:auto;background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));box-shadow:var(--fk-autocomplete-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, .1))}.fk-autocomplete__option{padding:var(--fk-input-padding, .5rem .75rem);font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));cursor:pointer;transition:background .1s ease}.fk-autocomplete__option:hover,.fk-autocomplete__option--active{background:var(--fk-color-surface-muted, #f7f9fb)}.fk-autocomplete__status{padding:var(--fk-input-padding, .5rem .75rem);font-size:var(--fk-input-font-size, .875rem);color:var(--fk-color-muted, #8a98a8);font-style:italic;list-style:none}:host-context(.fk-form-field--invalid) .fk-autocomplete__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-autocomplete__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
|
|
1020
|
+
], template: "<div class=\"fk-autocomplete__wrapper\">\n <input\n #inputEl\n type=\"text\"\n class=\"fk-autocomplete__native\"\n [attr.id]=\"id\"\n [attr.placeholder]=\"placeholder()\"\n [attr.aria-describedby]=\"\n describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n \"\n [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n [attr.aria-required]=\"isRequired() || null\"\n [attr.aria-expanded]=\"showDropdown()\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.role]=\"'combobox'\"\n [disabled]=\"isDisabledSignal()\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n @if (showDropdown()) {\n <ul class=\"fk-autocomplete__dropdown\" role=\"listbox\">\n @if (loading()) {\n <li class=\"fk-autocomplete__status\" aria-disabled=\"true\">Loading\u2026</li>\n } @else if (visibleOptions().length > 0) {\n @for (option of visibleOptions(); track option.value; let i = $index) {\n <li\n class=\"fk-autocomplete__option\"\n [class.fk-autocomplete__option--active]=\"i === activeIndex()\"\n role=\"option\"\n [attr.aria-selected]=\"i === activeIndex()\"\n (mousedown)=\"selectOption(option)\"\n >\n @if (optionTpl()) {\n <ng-container\n [ngTemplateOutlet]=\"optionTpl()!.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n />\n } @else {\n {{ option.label }}\n }\n </li>\n }\n } @else {\n <li class=\"fk-autocomplete__status\" aria-disabled=\"true\">\n No results found\n </li>\n }\n </ul>\n }\n</div>\n", styles: [":host{display:block}.fk-autocomplete__wrapper{position:relative}.fk-autocomplete__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, .5rem .75rem);font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-autocomplete__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-autocomplete__native:hover:not(:disabled){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-autocomplete__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-autocomplete__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:200px;margin:4px 0 0;padding:4px 0;list-style:none;overflow-y:auto;background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));box-shadow:var(--fk-autocomplete-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, .1))}.fk-autocomplete__option{padding:var(--fk-input-padding, .5rem .75rem);font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));cursor:pointer;transition:background .1s ease}.fk-autocomplete__option:hover,.fk-autocomplete__option--active{background:var(--fk-color-surface-muted, #f7f9fb)}.fk-autocomplete__status{padding:var(--fk-input-padding, .5rem .75rem);font-size:var(--fk-input-font-size, .875rem);color:var(--fk-color-muted, #8a98a8);font-style:italic;list-style:none}:host-context(.fk-form-field--has-prefix) .fk-autocomplete__native{padding-left:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--has-suffix) .fk-autocomplete__native{padding-right:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--invalid) .fk-autocomplete__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-autocomplete__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
|
|
1021
1021
|
}], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_AUTOCOMPLETE_OPTION_TPL), { isSignal: true }] }], hostClass: [{
|
|
1022
1022
|
type: HostBinding,
|
|
1023
1023
|
args: ['class']
|
|
@@ -1244,7 +1244,7 @@ class DateInputComponent {
|
|
|
1244
1244
|
provide: FIELD_CONTROL,
|
|
1245
1245
|
useExisting: forwardRef(() => DateInputComponent),
|
|
1246
1246
|
},
|
|
1247
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n #inputEl\n type=\"date\"\n class=\"fk-date-input__native\"\n [attr.id]=\"id\"\n [attr.aria-describedby]=\"\n describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n \"\n [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n [attr.aria-required]=\"isRequired() || null\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.readonly]=\"isReadonly() || null\"\n [disabled]=\"isDisabledSignal()\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n/>\n", styles: [":host{display:block}.fk-date-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-date-input__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-date-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-date-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-date-input__native:read-only{cursor:default}:host-context(.fk-form-field--invalid) .fk-date-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-date-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1247
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n #inputEl\n type=\"date\"\n class=\"fk-date-input__native\"\n [attr.id]=\"id\"\n [attr.aria-describedby]=\"\n describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n \"\n [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n [attr.aria-required]=\"isRequired() || null\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.readonly]=\"isReadonly() || null\"\n [disabled]=\"isDisabledSignal()\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n/>\n", styles: [":host{display:block}.fk-date-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-date-input__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-date-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-date-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-date-input__native:read-only{cursor:default}:host-context(.fk-form-field--has-prefix) .fk-date-input__native{padding-left:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--has-suffix) .fk-date-input__native{padding-right:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--invalid) .fk-date-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-date-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1248
1248
|
}
|
|
1249
1249
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
1250
1250
|
type: Component,
|
|
@@ -1253,7 +1253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1253
1253
|
provide: FIELD_CONTROL,
|
|
1254
1254
|
useExisting: forwardRef(() => DateInputComponent),
|
|
1255
1255
|
},
|
|
1256
|
-
], template: "<input\n #inputEl\n type=\"date\"\n class=\"fk-date-input__native\"\n [attr.id]=\"id\"\n [attr.aria-describedby]=\"\n describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n \"\n [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n [attr.aria-required]=\"isRequired() || null\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.readonly]=\"isReadonly() || null\"\n [disabled]=\"isDisabledSignal()\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n/>\n", styles: [":host{display:block}.fk-date-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-date-input__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-date-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-date-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-date-input__native:read-only{cursor:default}:host-context(.fk-form-field--invalid) .fk-date-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-date-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
|
|
1256
|
+
], template: "<input\n #inputEl\n type=\"date\"\n class=\"fk-date-input__native\"\n [attr.id]=\"id\"\n [attr.aria-describedby]=\"\n describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n \"\n [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n [attr.aria-required]=\"isRequired() || null\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.readonly]=\"isReadonly() || null\"\n [disabled]=\"isDisabledSignal()\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n/>\n", styles: [":host{display:block}.fk-date-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-date-input__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-date-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-date-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-date-input__native:read-only{cursor:default}:host-context(.fk-form-field--has-prefix) .fk-date-input__native{padding-left:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--has-suffix) .fk-date-input__native{padding-right:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--invalid) .fk-date-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-date-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
|
|
1257
1257
|
}], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], hostClass: [{
|
|
1258
1258
|
type: HostBinding,
|
|
1259
1259
|
args: ['class']
|
|
@@ -2140,7 +2140,7 @@ class SelectComponent {
|
|
|
2140
2140
|
provide: FIELD_CONTROL,
|
|
2141
2141
|
useExisting: forwardRef(() => SelectComponent),
|
|
2142
2142
|
},
|
|
2143
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fk-select__wrapper\">\n <select\n #inputEl\n class=\"fk-select__native\"\n [attr.id]=\"id\"\n [attr.aria-describedby]=\"\n describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n \"\n [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n [attr.aria-required]=\"isRequired() || null\"\n [disabled]=\"isDisabledSignal()\"\n (change)=\"onSelectionChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n >\n @if (placeholder()) {\n <option value=\"\" disabled [selected]=\"!value\">\n {{ placeholder() }}\n </option>\n }\n @for (option of options(); track option.value) {\n <option\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n [selected]=\"option.value === value\"\n >\n {{ option.label }}\n </option>\n }\n </select>\n <svg\n class=\"fk-select__arrow\"\n viewBox=\"0 0 12 8\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"1 1.5 6 6.5 11 1.5\" />\n </svg>\n</div>\n", styles: [":host{display:block}.fk-select__wrapper{position:relative;display:flex;align-items:center}.fk-select__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));padding-right:2.25rem;font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;appearance:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.fk-select__native:hover:not(:disabled){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-select__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-select__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-select__arrow{position:absolute;right:.75rem;width:.75rem;height:.75rem;color:var(--fk-color-muted, #8a98a8);pointer-events:none}:host-context(.fk-form-field--invalid) .fk-select__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field:not(.fk-form-field--filled)) .fk-select__native{color:var(--fk-select-placeholder-color, var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8)))}:host-context(.fk-form-field--filled) .fk-select__native{color:var(--fk-input-color, var(--fk-color-text, #1f2d3d))}:host-context(.fk-form-field--has-prefix) .fk-select__native{padding-left:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--has-suffix) .fk-select__native{padding-right:calc(var(--fk-input-affix-width, 2.25rem) + 1.5rem)}:host-context(.fk-form-field--has-suffix) .fk-select__arrow{right:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--invalid) .fk-select__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2143
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fk-select__wrapper\">\n <select\n #inputEl\n class=\"fk-select__native\"\n [attr.id]=\"id\"\n [attr.aria-describedby]=\"\n describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n \"\n [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n [attr.aria-required]=\"isRequired() || null\"\n [disabled]=\"isDisabledSignal()\"\n (change)=\"onSelectionChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n >\n @if (placeholder()) {\n <option value=\"\" disabled [selected]=\"!value\">\n {{ placeholder() }}\n </option>\n }\n @for (option of options(); track option.value) {\n <option\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n [selected]=\"option.value === value\"\n >\n {{ option.label }}\n </option>\n }\n </select>\n <svg\n class=\"fk-select__arrow\"\n viewBox=\"0 0 12 8\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"1 1.5 6 6.5 11 1.5\" />\n </svg>\n</div>\n", styles: [":host{display:block}.fk-select__wrapper{position:relative;display:flex;align-items:center}.fk-select__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));padding-right:2.25rem;font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;appearance:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.fk-select__native:hover:not(:disabled){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-select__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-select__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-select__arrow{position:absolute;right:.75rem;width:.75rem;height:.75rem;color:var(--fk-select-arrow-color, var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8)));pointer-events:none}:host-context(.fk-form-field--invalid) .fk-select__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field:not(.fk-form-field--filled)) .fk-select__native{color:var(--fk-select-placeholder-color, var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8)))}:host-context(.fk-form-field--filled) .fk-select__native{color:var(--fk-input-color, var(--fk-color-text, #1f2d3d))}:host-context(.fk-form-field--has-prefix) .fk-select__native{padding-left:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--has-suffix) .fk-select__native{padding-right:calc(var(--fk-input-affix-width, 2.25rem) + 1.5rem)}:host-context(.fk-form-field--has-suffix) .fk-select__arrow{right:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--invalid) .fk-select__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2144
2144
|
}
|
|
2145
2145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectComponent, decorators: [{
|
|
2146
2146
|
type: Component,
|
|
@@ -2149,7 +2149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2149
2149
|
provide: FIELD_CONTROL,
|
|
2150
2150
|
useExisting: forwardRef(() => SelectComponent),
|
|
2151
2151
|
},
|
|
2152
|
-
], template: "<div class=\"fk-select__wrapper\">\n <select\n #inputEl\n class=\"fk-select__native\"\n [attr.id]=\"id\"\n [attr.aria-describedby]=\"\n describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n \"\n [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n [attr.aria-required]=\"isRequired() || null\"\n [disabled]=\"isDisabledSignal()\"\n (change)=\"onSelectionChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n >\n @if (placeholder()) {\n <option value=\"\" disabled [selected]=\"!value\">\n {{ placeholder() }}\n </option>\n }\n @for (option of options(); track option.value) {\n <option\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n [selected]=\"option.value === value\"\n >\n {{ option.label }}\n </option>\n }\n </select>\n <svg\n class=\"fk-select__arrow\"\n viewBox=\"0 0 12 8\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"1 1.5 6 6.5 11 1.5\" />\n </svg>\n</div>\n", styles: [":host{display:block}.fk-select__wrapper{position:relative;display:flex;align-items:center}.fk-select__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));padding-right:2.25rem;font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;appearance:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.fk-select__native:hover:not(:disabled){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-select__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-select__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-select__arrow{position:absolute;right:.75rem;width:.75rem;height:.75rem;color:var(--fk-color-muted, #8a98a8);pointer-events:none}:host-context(.fk-form-field--invalid) .fk-select__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field:not(.fk-form-field--filled)) .fk-select__native{color:var(--fk-select-placeholder-color, var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8)))}:host-context(.fk-form-field--filled) .fk-select__native{color:var(--fk-input-color, var(--fk-color-text, #1f2d3d))}:host-context(.fk-form-field--has-prefix) .fk-select__native{padding-left:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--has-suffix) .fk-select__native{padding-right:calc(var(--fk-input-affix-width, 2.25rem) + 1.5rem)}:host-context(.fk-form-field--has-suffix) .fk-select__arrow{right:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--invalid) .fk-select__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
|
|
2152
|
+
], template: "<div class=\"fk-select__wrapper\">\n <select\n #inputEl\n class=\"fk-select__native\"\n [attr.id]=\"id\"\n [attr.aria-describedby]=\"\n describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n \"\n [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n [attr.aria-required]=\"isRequired() || null\"\n [disabled]=\"isDisabledSignal()\"\n (change)=\"onSelectionChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n >\n @if (placeholder()) {\n <option value=\"\" disabled [selected]=\"!value\">\n {{ placeholder() }}\n </option>\n }\n @for (option of options(); track option.value) {\n <option\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n [selected]=\"option.value === value\"\n >\n {{ option.label }}\n </option>\n }\n </select>\n <svg\n class=\"fk-select__arrow\"\n viewBox=\"0 0 12 8\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"1 1.5 6 6.5 11 1.5\" />\n </svg>\n</div>\n", styles: [":host{display:block}.fk-select__wrapper{position:relative;display:flex;align-items:center}.fk-select__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));padding-right:2.25rem;font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;appearance:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.fk-select__native:hover:not(:disabled){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-select__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-select__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-select__arrow{position:absolute;right:.75rem;width:.75rem;height:.75rem;color:var(--fk-select-arrow-color, var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8)));pointer-events:none}:host-context(.fk-form-field--invalid) .fk-select__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field:not(.fk-form-field--filled)) .fk-select__native{color:var(--fk-select-placeholder-color, var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8)))}:host-context(.fk-form-field--filled) .fk-select__native{color:var(--fk-input-color, var(--fk-color-text, #1f2d3d))}:host-context(.fk-form-field--has-prefix) .fk-select__native{padding-left:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--has-suffix) .fk-select__native{padding-right:calc(var(--fk-input-affix-width, 2.25rem) + 1.5rem)}:host-context(.fk-form-field--has-suffix) .fk-select__arrow{right:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--invalid) .fk-select__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
|
|
2153
2153
|
}], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hostClass: [{
|
|
2154
2154
|
type: HostBinding,
|
|
2155
2155
|
args: ['class']
|