ng-hub-ui-forms 22.35.2 → 22.37.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -30
- package/fesm2022/ng-hub-ui-forms.mjs +424 -15
- package/fesm2022/ng-hub-ui-forms.mjs.map +1 -1
- package/package.json +5 -5
- package/styles/_field.scss +9 -0
- package/styles/_tokens.scss +65 -11
- package/types/ng-hub-ui-forms.d.ts +133 -5
|
@@ -2182,14 +2182,14 @@ class HubInputComponent extends HubFieldControl {
|
|
|
2182
2182
|
return value ? [value] : [];
|
|
2183
2183
|
}
|
|
2184
2184
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2185
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubInputComponent, isStandalone: true, selector: "hub-input", inputs: { passwordRevealed: { classPropertyName: "passwordRevealed", publicName: "passwordRevealed", isSignal: true, isRequired: false, transformFunction: null }, passwordToggle: { classPropertyName: "passwordToggle", publicName: "passwordToggle", isSignal: true, isRequired: false, transformFunction: null }, hideOnBlur: { classPropertyName: "hideOnBlur", publicName: "hideOnBlur", isSignal: true, isRequired: false, transformFunction: null }, capsLockWarning: { classPropertyName: "capsLockWarning", publicName: "capsLockWarning", isSignal: true, isRequired: false, transformFunction: null }, passwordStrength: { classPropertyName: "passwordStrength", publicName: "passwordStrength", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, plaintext: { classPropertyName: "plaintext", publicName: "plaintext", isSignal: true, isRequired: false, transformFunction: null }, prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, unmaskValue: { classPropertyName: "unmaskValue", publicName: "unmaskValue", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null }, allowCustomColor: { classPropertyName: "allowCustomColor", publicName: "allowCustomColor", isSignal: true, isRequired: false, transformFunction: null }, customColorLabel: { classPropertyName: "customColorLabel", publicName: "customColorLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { passwordRevealed: "passwordRevealedChange", labelType: "labelTypeChange", placeholder: "placeholderChange", min: "minChange", max: "maxChange", indeterminate: "indeterminateChange", valueChange: "valueChange", enter: "enter", search: "search" }, host: { properties: { "class": "classlist()", "class.hub-input-host": "true" } }, queries: [{ propertyName: "prefixDir", first: true, predicate: HubInputPrefixDirective, descendants: true, isSignal: true }, { propertyName: "suffixDir", first: true, predicate: HubInputSuffixDirective, descendants: true, isSignal: true }, { propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_appendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "swatchList", first: true, predicate: ["swatchList"], descendants: true, isSignal: true }, { propertyName: "customColorInput", first: true, predicate: ["customColorInput"], descendants: true, isSignal: true }, { propertyName: "classicColorInput", first: true, predicate: ["classicColorInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-input\"\n\t[class.hub-field--horizontal]=\"!isCheckable() && (labelType() === _labelTypes.Horizontal || (!label() && required()))\"\n\t[class.hub-input--checkable]=\"isCheckable()\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly() && !plaintext()\"\n\t[class.hub-field--plaintext]=\"plaintext()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (isCheckable()) {\n\t\t@if (showsFormTextTooltip()) {\n\t\t\t<!--\n\t\t\t\tThe mark has to sit OUTSIDE the check's `<label>`, which here wraps the control\n\t\t\t\titself: nested in it, activating the mark would toggle the switch \u2014 and a switch\n\t\t\t\tcarrying a two-sentence warning is exactly the one that must not flip because\n\t\t\t\tsomebody asked what it does.\n\t\t\t-->\n\t\t\t<div class=\"hub-field__label-row\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubCheckTpl\" />\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t\t></button>\n\t\t\t</div>\n\t\t} @else {\n\t\t\t<ng-container [ngTemplateOutlet]=\"hubCheckTpl\" />\n\t\t}\n\n\t\t<ng-template #hubCheckTpl>\n\t\t\t<label class=\"hub-input__check\" [class.hub-input__check--switch]=\"type() === _inputFormats.Switch\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tclass=\"hub-input__check-input\"\n\t\t\t\t\t[class.hub-input__check-input--switch]=\"type() === _inputFormats.Switch\"\n\t\t\t\t\t[class.hub-input__check-input--invalid]=\"isInvalid\"\n\t\t\t\t\t[attr.role]=\"type() === _inputFormats.Switch ? 'switch' : null\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[checked]=\"$any(_value())\"\n\t\t\t\t\t[indeterminate]=\"isIndeterminate()\"\n\t\t\t\t\t(change)=\"setValue($event)\"\n\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t/>\n\t\t\t\t@if (label() || required()) {\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"hub-input__check-label\"\n\t\t\t\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t</label>\n\t\t</ng-template>\n\t} @else {\n\t\t@if (showsFormTextTooltip()) {\n\t\t\t<!--\n\t\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t\t-->\n\t\t\t<div class=\"hub-field__label-row\">\n\t\t\t\t@if ((label() || required()) && (labelType() !== _labelTypes.Floating || type() === _inputFormats.Color)) {\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t\t}\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t\t></button>\n\t\t\t</div>\n\t\t} @else if ((label() || required()) && (labelType() !== _labelTypes.Floating || type() === _inputFormats.Color)) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t}\n\n\t\t<ng-template #hubFieldLabelTpl>\n\t\t\t<!--\n\t\t\t\tA swatch grid is a radio group, which a `<label for>` cannot label: it names the\n\t\t\t\tgroup through `aria-labelledby` instead, hence the id.\n\t\t\t-->\n\t\t\t<label\n\t\t\t\t[attr.for]=\"showsSwatches() ? null : id\"\n\t\t\t\t[id]=\"id + '-label'\"\n\t\t\t\tclass=\"hub-field__label\"\n\t\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t\t>\n\t\t\t\t{{ label() }}\n\t\t\t\t@if (required()) {\n\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t}\n\t\t\t</label>\n\t\t</ng-template>\n\n\t\t<div class=\"hub-field__body hub-input__row\">\n\t\t\t@switch (type()) {\n\t\t\t\t@case (_inputFormats.Counter) {\n\t\t\t\t\t<div class=\"hub-input__group hub-input__counter\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly() || (min() != null && $any(_value()) <= $any(min()))\"\n\t\t\t\t\t\t\taria-label=\"Decrease\"\n\t\t\t\t\t\t\t(click)=\"subtract()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t−\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--counter\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"_isReadonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly() || (max() != null && $any(_value()) >= $any(max()))\"\n\t\t\t\t\t\t\taria-label=\"Increase\"\n\t\t\t\t\t\t\t(click)=\"add()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.Color) {\n\t\t\t\t\t@if (showsSwatches()) {\n\t\t\t\t\t\t<!--\n\t\t\t\t\t\t\tOne value out of a set: a radio group, with one Tab stop and arrows to move.\n\t\t\t\t\t\t\tThe box is the field's own control skin, so a row of swatches reads as one\n\t\t\t\t\t\t\tmore input in the column; it drops the box once the cells wrap.\n\t\t\t\t\t\t-->\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t#swatchList\n\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__swatches\"\n\t\t\t\t\t\t\t[class.hub-input__swatches--wrapped]=\"swatchesWrapped()\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\trole=\"radiogroup\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[attr.aria-labelledby]=\"label() ? id + '-label' : null\"\n\t\t\t\t\t\t\t[attr.aria-required]=\"required() ? true : null\"\n\t\t\t\t\t\t\t[attr.aria-disabled]=\"disabled() || null\"\n\t\t\t\t\t\t\t[attr.aria-readonly]=\"_isReadonly() || null\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@for (swatch of _swatches(); track $index) {\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__swatch\"\n\t\t\t\t\t\t\t\t\trole=\"radio\"\n\t\t\t\t\t\t\t\t\t[attr.aria-checked]=\"checkedSwatch() === $index\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"swatch.label\"\n\t\t\t\t\t\t\t\t\t[attr.aria-disabled]=\"disabled() || null\"\n\t\t\t\t\t\t\t\t\t[attr.title]=\"swatch.label\"\n\t\t\t\t\t\t\t\t\t[attr.tabindex]=\"disabled() ? null : tabbableSwatch() === $index ? 0 : -1\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-color]=\"swatch.value\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-ink]=\"swatch.ink\"\n\t\t\t\t\t\t\t\t\t(click)=\"activateSwatch($index)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleSwatchKeydown($event, $index)\"\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t@if (allowCustomColor()) {\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__swatch hub-input__swatch--custom\"\n\t\t\t\t\t\t\t\t\trole=\"radio\"\n\t\t\t\t\t\t\t\t\t[attr.aria-checked]=\"customChecked()\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"customSwatchName()\"\n\t\t\t\t\t\t\t\t\t[attr.aria-disabled]=\"disabled() || null\"\n\t\t\t\t\t\t\t\t\t[attr.title]=\"customSwatchName()\"\n\t\t\t\t\t\t\t\t\t[attr.tabindex]=\"disabled() ? null : tabbableSwatch() === _swatches().length ? 0 : -1\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-color]=\"customValue() || null\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-ink]=\"customInk()\"\n\t\t\t\t\t\t\t\t\t(click)=\"activateSwatch(_swatches().length)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleSwatchKeydown($event, _swatches().length)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<!-- Out of the tab order and the accessibility tree: the cell is the control, this only hosts the picker. -->\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t#customColorInput\n\t\t\t\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-input__swatch-native\"\n\t\t\t\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t[value]=\"customHex()\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t\t\t\t\t\t(input)=\"pickNativeColor($event)\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<!--\n\t\t\t\t\t\t\tNo palette: a text field for the hex code, with the colour it holds in a square\n\t\t\t\t\t\t\tat its start. The square comes first so Tab meets it where the eye does; it opens\n\t\t\t\t\t\t\tthe browser's picker, which sits hidden under it so the dialog opens there.\n\t\t\t\t\t\t-->\n\t\t\t\t\t\t<div class=\"hub-input__color\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__color-swatch\"\n\t\t\t\t\t\t\t\t[style.--hub-input-swatch-color]=\"classicHex() || null\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"pickerLabel\"\n\t\t\t\t\t\t\t\t[attr.aria-disabled]=\"_isReadonly() || null\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t(click)=\"openClassicPicker()\"\n\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t#classicColorInput\n\t\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__color-native\"\n\t\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t[value]=\"classicHex() || '#000000'\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t\t\t\t(input)=\"pickNativeColor($event)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--color\"\n\t\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t\t[value]=\"colorText()\"\n\t\t\t\t\t\t\t\t(input)=\"typeColorText($event)\"\n\t\t\t\t\t\t\t\t(blur)=\"commitColorText($event)\"\n\t\t\t\t\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t\t\t\t\tmaxlength=\"7\"\n\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t[readonly]=\"_isReadonly()\"\n\t\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.File) {\n\t\t\t\t\t<div class=\"hub-input__file\" [class.hub-input__file--invalid]=\"isInvalid\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t#fileInput\n\t\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-native\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t(change)=\"setFileValue($event)\"\n\t\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-button\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t\t\t(click)=\"triggerFile()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ buttonLabel() }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<span class=\"hub-input__file-name\">{{ fileLabel() || placeholder() }}</span>\n\t\t\t\t\t\t@if (fileLabel() && !disabled() && !_isReadonly()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__file-clear\" aria-label=\"Clear\" (click)=\"clearFile()\">\n\t\t\t\t\t\t\t\t×\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@default {\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-input__group\"\n\t\t\t\t\t\t[class.hub-input__group--floating]=\"labelType() === _labelTypes.Floating\"\n\t\t\t\t\t\t[class.hub-input__group--has-prefix]=\"hasPrefix()\"\n\t\t\t\t\t\t[class.hub-input__group--has-suffix]=\"hasSuffix()\"\n\t\t\t\t\t\t[class.hub-input__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-toggle]=\"showsPasswordToggle()\"\n\t\t\t\t\t\t(focusout)=\"handleGroupFocusOut($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--prepend\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<span class=\"hub-input__affix hub-input__affix--prefix\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<ng-content select=\"[hubInputPrefix]\"></ng-content>\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass=\"hub-field__control\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[type]=\"resolvedType()\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t(keyup.enter)=\"enter.emit(_value())\"\n\t\t\t\t\t\t\t(keydown)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t(keyup)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? placeholder() || ' ' : placeholder()\"\n\t\t\t\t\t\t\t[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"_isReadonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[attr.autocomplete]=\"autocomplete() || null\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t@if (showClear()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__clear\" aria-label=\"Clear\" (click)=\"clear()\"></button>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<span class=\"hub-input__affix hub-input__affix--suffix\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<ng-content select=\"[hubInputSuffix]\"></ng-content>\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--append\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<!-- Attached content goes last: addons label the field, an action acts on it. -->\n\t\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--append\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (showsPasswordToggle()) {\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__password-toggle\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"\n\t\t\t\t\t\t\t\t\tpasswordRevealed() ? _passwordLabels.hidePasswordLabel : _passwordLabels.showPasswordLabel\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[attr.aria-pressed]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__password-icon\"\n\t\t\t\t\t\t\t\t\t[class.hub-input__password-icon--visible]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (labelType() === _labelTypes.Floating && (label() || required())) {\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-input__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (showsCapsLock()) {\n\t\t<div class=\"hub-field__form-text hub-input__capslock\" role=\"status\">{{ _passwordLabels.capsLockWarning }}</div>\n\t}\n\n\t@if (showsStrength()) {\n\t\t<div class=\"hub-input__strength\" [attr.data-level]=\"strengthScore()\">\n\t\t\t<div class=\"hub-input__strength-bar\" role=\"presentation\">\n\t\t\t\t@for (segment of _strengthSegments; track segment) {\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"hub-input__strength-segment\"\n\t\t\t\t\t\t[class.hub-input__strength-segment--active]=\"strengthScore() >= segment\"\n\t\t\t\t\t></span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<span class=\"hub-input__strength-label\" aria-live=\"polite\">{{ strengthLabel() }}</span>\n\t\t</div>\n\t}\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-input{display:block;font-family:var(--hub-input-font-family)}hub-input.hidden-control{display:none!important}.hub-input__row{display:flex;align-items:stretch;gap:var(--hub-ref-space-2, .5rem)}.hub-input__group{flex:1 1 auto;position:relative}.hub-input__affix{position:absolute;inset-block:0;display:flex;align-items:center;color:var(--hub-input-icon-color);--hub-icon-color: var(--hub-input-icon-color);--hub-icon-size: var(--hub-input-icon-size);pointer-events:none;z-index:2}.hub-input__affix--prefix{inset-inline-start:var(--hub-input-affix-inset)}.hub-input__affix--suffix{inset-inline-end:var(--hub-input-affix-inset)}.hub-input__affix-content{pointer-events:auto}.hub-input__clear{position:absolute;inset-block:0;inset-inline-end:var(--hub-input-affix-inset);margin-block:auto;display:inline-flex;inline-size:var(--hub-input-clear-size);block-size:var(--hub-input-clear-size);padding:0;border:0;background-color:var(--hub-input-clear-color);-webkit-mask:var(--hub-input-clear-icon) center/contain no-repeat;mask:var(--hub-input-clear-icon) center/contain no-repeat;cursor:pointer;z-index:3;transition:background-color .15s ease}.hub-input__clear:hover,.hub-input__clear:focus-visible{background-color:var(--hub-input-clear-hover-color)}.hub-input__group--has-prefix>.hub-field__control{padding-inline-start:calc(var(--hub-input-affix-inset) + var(--hub-input-icon-size) + var(--hub-input-affix-gap))}.hub-input__group--has-suffix>.hub-field__control{padding-inline-end:calc(var(--hub-input-affix-inset) + var(--hub-input-icon-size) + var(--hub-input-affix-gap))}.hub-input__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + var(--hub-field-floating-inset));padding-bottom:var(--hub-input-padding-y)}.hub-input__group--floating .hub-input__label--floating{font-size:var(--hub-input-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-input__group--floating .hub-input__label--floating{transform-origin:100% 0}.hub-input__group--floating .hub-input__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-input__group--floating .hub-field__control:focus~.hub-input__label--floating,.hub-input__group--floating .hub-field__control:not(:placeholder-shown)~.hub-input__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.hub-input__counter{display:flex;align-items:stretch}.hub-input__counter-btn{flex:0 0 var(--hub-input-counter-button-width);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;color:var(--hub-input-counter-button-color);background:var(--hub-input-counter-button-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);cursor:pointer}.hub-input__counter-btn:first-child{border-inline-end:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-inline-start:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__counter-btn:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__control--counter{border-radius:0;text-align:center;appearance:textfield}.hub-input__control--counter::-webkit-outer-spin-button,.hub-input__control--counter::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hub-input__color{position:relative;flex:1 1 auto;min-inline-size:0}.hub-input .hub-input__color>.hub-input__control--color{padding-inline-start:calc(var(--hub-input-color-size) + var(--hub-input-padding-x));font-variant-numeric:tabular-nums}.hub-input__color-swatch{position:absolute;inset-block:var(--hub-input-border-width);inset-inline-start:var(--hub-input-border-width);z-index:1;inline-size:var(--hub-input-color-size);margin:0;padding:0;border:0;border-inline-end:var(--hub-input-border-width) solid var(--hub-input-swatch-border-color);border-start-start-radius:calc(var(--hub-input-border-radius) - var(--hub-input-border-width));border-end-start-radius:calc(var(--hub-input-border-radius) - var(--hub-input-border-width));background:var(--hub-input-swatch-color, var(--hub-input-swatch-custom-bg));cursor:pointer}.hub-input__color-swatch:focus-visible{outline:var(--hub-input-swatch-ring-width) solid var(--hub-input-swatch-focus-ring-color);outline-offset:calc(-1 * var(--hub-input-swatch-ring-width))}.hub-input__color-swatch:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-field--readonly .hub-input__color-swatch,.hub-field--plaintext .hub-input__color-swatch{cursor:default}.hub-input__color-native{position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--hub-input-color-size);block-size:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}.hub-input__swatches.hub-field__control{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--hub-input-swatch-min-width),1fr));grid-auto-rows:var(--hub-input-swatch-size);gap:var(--hub-input-swatch-gap);padding:var(--hub-input-padding-y)}.hub-input__swatches--wrapped.hub-field__control{border-color:var(--hub-input-swatch-wrapped-border-color);background-color:var(--hub-input-swatch-wrapped-bg)}.hub-input__swatch{position:relative;min-inline-size:0;border-radius:var(--hub-input-swatch-radius);background:var(--hub-input-swatch-color);box-shadow:inset 0 0 0 var(--hub-input-border-width) var(--hub-input-swatch-border-color);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__swatch:focus-visible{outline:var(--hub-input-swatch-ring-width) solid var(--hub-input-swatch-focus-ring-color);outline-offset:var(--hub-input-swatch-ring-offset)}.hub-input__swatch[aria-checked=true]{box-shadow:inset 0 0 0 var(--hub-input-border-width) var(--hub-input-swatch-border-color),0 0 0 var(--hub-input-swatch-ring-offset) var(--hub-input-bg),0 0 0 calc(var(--hub-input-swatch-ring-offset) + var(--hub-input-swatch-ring-width)) var(--hub-input-swatch-ring-color)}.hub-input__swatch[aria-checked=true]:after{content:\"\";position:absolute;inset:0;background-color:var(--hub-input-swatch-mark-color, var(--hub-input-swatch-ink));-webkit-mask:var(--hub-input-swatch-mark-icon) center/var(--hub-input-swatch-mark-size) no-repeat;mask:var(--hub-input-swatch-mark-icon) center/var(--hub-input-swatch-mark-size) no-repeat;pointer-events:none}.hub-input__swatch--custom{background:var(--hub-input-swatch-color, var(--hub-input-swatch-custom-bg))}.hub-input__swatch-native{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}.hub-field--disabled .hub-input__swatches{opacity:var(--hub-form-disabled-opacity)}.hub-field--disabled .hub-input__swatch{cursor:not-allowed}.hub-field--readonly .hub-input__swatch,.hub-field--plaintext .hub-input__swatch{cursor:default}.hub-input__file{position:relative;display:flex;align-items:stretch;width:100%;background:var(--hub-input-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);overflow:hidden}.hub-input__file--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__file-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hub-input__file-button{flex:0 0 auto;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:0;border-inline-end:var(--hub-input-border-width) solid var(--hub-input-border-color);font-size:var(--hub-input-font-size);white-space:nowrap;cursor:pointer}.hub-input__file-button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__file-name{flex:1 1 auto;min-width:0;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-placeholder-color);font-size:var(--hub-input-font-size);line-height:var(--hub-input-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hub-input__file-clear{flex:0 0 auto;width:2rem;color:var(--hub-input-placeholder-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-input__file-clear:hover{color:var(--hub-form-invalid-color)}.hub-input__password-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--hub-input-password-toggle-width);padding:0;color:var(--hub-input-icon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);border-inline-start:0;border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius);border-start-start-radius:0;border-end-start-radius:0;cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-field--invalid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-invalid-border-color)}.hub-field--valid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-valid-border-color)}.hub-input__group--has-toggle>.hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__addon--append{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__clear,.hub-input__group--has-toggle>.hub-input__affix--suffix{inset-inline-end:calc(var(--hub-input-affix-inset) + var(--hub-input-password-toggle-width))}.hub-input__password-icon{display:block;width:1.1rem;height:1.1rem;background-color:currentColor;--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\");-webkit-mask:var(--hub-input-eye-mask) center/contain no-repeat;mask:var(--hub-input-eye-mask) center/contain no-repeat}.hub-input__password-icon--visible{--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\")}.hub-input__capslock{color:var(--hub-input-capslock-color)}.hub-input__strength{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);margin-top:var(--hub-ref-space-1, .25rem)}.hub-input__strength[data-level=\"1\"]{--hub-input-strength-color: var(--hub-input-strength-1)}.hub-input__strength[data-level=\"2\"]{--hub-input-strength-color: var(--hub-input-strength-2)}.hub-input__strength[data-level=\"3\"]{--hub-input-strength-color: var(--hub-input-strength-3)}.hub-input__strength[data-level=\"4\"]{--hub-input-strength-color: var(--hub-input-strength-4)}.hub-input__strength-bar{display:flex;flex:1 1 auto;gap:var(--hub-input-strength-gap)}.hub-input__strength-segment{flex:1 1 0;height:var(--hub-input-strength-height);border-radius:calc(var(--hub-input-strength-height) / 2);background:var(--hub-input-strength-track)}.hub-input__strength-segment--active{background:var(--hub-input-strength-color, var(--hub-input-strength-1))}.hub-input__strength-label{font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-sys-text-muted, #6c757d)}.hub-input--checkable .hub-input__check{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-input__check-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;appearance:none;background:var(--hub-check-input-bg);border:var(--hub-check-input-border-width) solid var(--hub-check-input-border-color);border-radius:var(--hub-check-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__check-input:checked{background:var(--hub-check-input-checked-bg) var(--hub-check-input-checked-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-checked-border-color)}.hub-input__check-input:indeterminate{background:var(--hub-check-input-indeterminate-bg) var(--hub-check-input-indeterminate-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-indeterminate-border-color)}.hub-input__check-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-input__check-input--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__check-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__check-input--switch{position:relative;width:var(--hub-switch-width);height:var(--hub-switch-height);border:0;border-radius:var(--hub-ref-radius-pill, 50rem);background:var(--hub-switch-track-off)}.hub-input__check-input--switch:after{content:\"\";position:absolute;top:50%;inset-inline-start:.125rem;width:calc(var(--hub-switch-height) - .25rem);height:calc(var(--hub-switch-height) - .25rem);border-radius:50%;background:var(--hub-switch-thumb);transform:translateY(-50%);transition:inset-inline-start .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{inset-inline-start:calc(100% - var(--hub-switch-height) + .125rem)}.hub-input__check-label{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-input-color);font-size:var(--hub-input-font-size)}.hub-input--checkable.hub-field--disabled .hub-input__check-label{opacity:var(--hub-form-disabled-opacity)}.hub-input__group{display:flex;align-items:stretch;min-width:0}.hub-input__group>.hub-input__control,.hub-input__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-input__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-input-padding-x, var(--hub-input-padding-x));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-input-border-width, var(--hub-input-border-width)) solid var(--hub-input-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));font-size:var(--hub-input-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-input__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-input__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-input-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-input__attached.hub-input__attached>*{padding-block:0;padding-inline:var(--hub-input-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-input-min-height, auto);border:var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-input-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-input__attached.hub-input__attached>*:hover,.hub-input__attached.hub-input__attached>*:focus-visible{z-index:1}.hub-input__attached.hub-input__attached>*:not(:hover):not(:focus-visible){border-color:var(--hub-input-group-attached-border-color, var(--hub-input-group-attached-border-color))}.hub-input__attached.hub-input__attached--prepend>*{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-input__attached.hub-input__attached--append>*{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached>hub-input,.hub-input__attached.hub-input__attached>hub-select,.hub-input__attached.hub-input__attached>hub-textarea,.hub-input__attached.hub-input__attached>hub-datepicker,.hub-input__attached.hub-input__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--prepend>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-input__attached.hub-input__attached--append>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--append>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached--append>hub-input:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-textarea:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-input__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-input__attached)>button,:where(.hub-input__attached)>a,:where(.hub-input__attached)>[role=button],:where(.hub-input__attached)>[role=link],:where(.hub-input__attached)>[tabindex]{background:var(--hub-input-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-input-group-action-color, var(--hub-input-group-action-color))}.hub-input__group--has-prepend .hub-input__control,.hub-input__group--has-prepend .hub-field__control,.hub-input__group--has-prepend .hub-input__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group--has-append .hub-input__control,.hub-input__group--has-append .hub-field__control,.hub-input__group--has-append .hub-input__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group>.hub-input__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-input__group>.hub-input__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: HubTooltipDirective, selector: "[hubTooltip]", inputs: ["hubTooltip", "hubTooltipPlacement", "hubTooltipDelay", "hubTooltipOffset"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2185
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubInputComponent, isStandalone: true, selector: "hub-input", inputs: { passwordRevealed: { classPropertyName: "passwordRevealed", publicName: "passwordRevealed", isSignal: true, isRequired: false, transformFunction: null }, passwordToggle: { classPropertyName: "passwordToggle", publicName: "passwordToggle", isSignal: true, isRequired: false, transformFunction: null }, hideOnBlur: { classPropertyName: "hideOnBlur", publicName: "hideOnBlur", isSignal: true, isRequired: false, transformFunction: null }, capsLockWarning: { classPropertyName: "capsLockWarning", publicName: "capsLockWarning", isSignal: true, isRequired: false, transformFunction: null }, passwordStrength: { classPropertyName: "passwordStrength", publicName: "passwordStrength", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, plaintext: { classPropertyName: "plaintext", publicName: "plaintext", isSignal: true, isRequired: false, transformFunction: null }, prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, unmaskValue: { classPropertyName: "unmaskValue", publicName: "unmaskValue", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null }, allowCustomColor: { classPropertyName: "allowCustomColor", publicName: "allowCustomColor", isSignal: true, isRequired: false, transformFunction: null }, customColorLabel: { classPropertyName: "customColorLabel", publicName: "customColorLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { passwordRevealed: "passwordRevealedChange", labelType: "labelTypeChange", placeholder: "placeholderChange", min: "minChange", max: "maxChange", indeterminate: "indeterminateChange", valueChange: "valueChange", enter: "enter", search: "search" }, host: { properties: { "class": "classlist()", "class.hub-input-host": "true" } }, queries: [{ propertyName: "prefixDir", first: true, predicate: HubInputPrefixDirective, descendants: true, isSignal: true }, { propertyName: "suffixDir", first: true, predicate: HubInputSuffixDirective, descendants: true, isSignal: true }, { propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_appendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "swatchList", first: true, predicate: ["swatchList"], descendants: true, isSignal: true }, { propertyName: "customColorInput", first: true, predicate: ["customColorInput"], descendants: true, isSignal: true }, { propertyName: "classicColorInput", first: true, predicate: ["classicColorInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-input\"\n\t[class.hub-field--horizontal]=\"!isCheckable() && (labelType() === _labelTypes.Horizontal || (!label() && required()))\"\n\t[class.hub-input--checkable]=\"isCheckable()\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly() && !plaintext()\"\n\t[class.hub-field--plaintext]=\"plaintext()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (isCheckable()) {\n\t\t@if (showsFormTextTooltip()) {\n\t\t\t<!--\n\t\t\t\tThe mark has to sit OUTSIDE the check's `<label>`, which here wraps the control\n\t\t\t\titself: nested in it, activating the mark would toggle the switch \u2014 and a switch\n\t\t\t\tcarrying a two-sentence warning is exactly the one that must not flip because\n\t\t\t\tsomebody asked what it does.\n\t\t\t-->\n\t\t\t<div class=\"hub-field__label-row\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubCheckTpl\" />\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t\t></button>\n\t\t\t</div>\n\t\t} @else {\n\t\t\t<ng-container [ngTemplateOutlet]=\"hubCheckTpl\" />\n\t\t}\n\n\t\t<ng-template #hubCheckTpl>\n\t\t\t<label class=\"hub-input__check\" [class.hub-input__check--switch]=\"type() === _inputFormats.Switch\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tclass=\"hub-input__check-input\"\n\t\t\t\t\t[class.hub-input__check-input--switch]=\"type() === _inputFormats.Switch\"\n\t\t\t\t\t[class.hub-input__check-input--invalid]=\"isInvalid\"\n\t\t\t\t\t[attr.role]=\"type() === _inputFormats.Switch ? 'switch' : null\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[checked]=\"$any(_value())\"\n\t\t\t\t\t[indeterminate]=\"isIndeterminate()\"\n\t\t\t\t\t(change)=\"setValue($event)\"\n\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t/>\n\t\t\t\t@if (label() || required()) {\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"hub-input__check-label\"\n\t\t\t\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t</label>\n\t\t</ng-template>\n\t} @else {\n\t\t@if (showsFormTextTooltip()) {\n\t\t\t<!--\n\t\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t\t-->\n\t\t\t<div class=\"hub-field__label-row\">\n\t\t\t\t@if ((label() || required()) && (labelType() !== _labelTypes.Floating || type() === _inputFormats.Color)) {\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t\t}\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t\t></button>\n\t\t\t</div>\n\t\t} @else if ((label() || required()) && (labelType() !== _labelTypes.Floating || type() === _inputFormats.Color)) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t}\n\n\t\t<ng-template #hubFieldLabelTpl>\n\t\t\t<!--\n\t\t\t\tA swatch grid is a radio group, which a `<label for>` cannot label: it names the\n\t\t\t\tgroup through `aria-labelledby` instead, hence the id.\n\t\t\t-->\n\t\t\t<label\n\t\t\t\t[attr.for]=\"showsSwatches() ? null : id\"\n\t\t\t\t[id]=\"id + '-label'\"\n\t\t\t\tclass=\"hub-field__label\"\n\t\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t\t>\n\t\t\t\t{{ label() }}\n\t\t\t\t@if (required()) {\n\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t}\n\t\t\t</label>\n\t\t</ng-template>\n\n\t\t<div class=\"hub-field__body hub-input__row\">\n\t\t\t@switch (type()) {\n\t\t\t\t@case (_inputFormats.Counter) {\n\t\t\t\t\t<div class=\"hub-input__group hub-input__counter\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly() || (min() != null && $any(_value()) <= $any(min()))\"\n\t\t\t\t\t\t\taria-label=\"Decrease\"\n\t\t\t\t\t\t\t(click)=\"subtract()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t−\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--counter\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"_isReadonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly() || (max() != null && $any(_value()) >= $any(max()))\"\n\t\t\t\t\t\t\taria-label=\"Increase\"\n\t\t\t\t\t\t\t(click)=\"add()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.Color) {\n\t\t\t\t\t@if (showsSwatches()) {\n\t\t\t\t\t\t<!--\n\t\t\t\t\t\t\tOne value out of a set: a radio group, with one Tab stop and arrows to move.\n\t\t\t\t\t\t\tThe box is the field's own control skin, so a row of swatches reads as one\n\t\t\t\t\t\t\tmore input in the column; it drops the box once the cells wrap.\n\t\t\t\t\t\t-->\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t#swatchList\n\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__swatches\"\n\t\t\t\t\t\t\t[class.hub-input__swatches--wrapped]=\"swatchesWrapped()\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\trole=\"radiogroup\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[attr.aria-labelledby]=\"label() ? id + '-label' : null\"\n\t\t\t\t\t\t\t[attr.aria-required]=\"required() ? true : null\"\n\t\t\t\t\t\t\t[attr.aria-disabled]=\"disabled() || null\"\n\t\t\t\t\t\t\t[attr.aria-readonly]=\"_isReadonly() || null\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@for (swatch of _swatches(); track $index) {\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__swatch\"\n\t\t\t\t\t\t\t\t\trole=\"radio\"\n\t\t\t\t\t\t\t\t\t[attr.aria-checked]=\"checkedSwatch() === $index\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"swatch.label\"\n\t\t\t\t\t\t\t\t\t[attr.aria-disabled]=\"disabled() || null\"\n\t\t\t\t\t\t\t\t\t[attr.title]=\"swatch.label\"\n\t\t\t\t\t\t\t\t\t[attr.tabindex]=\"disabled() ? null : tabbableSwatch() === $index ? 0 : -1\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-color]=\"swatch.value\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-ink]=\"swatch.ink\"\n\t\t\t\t\t\t\t\t\t(click)=\"activateSwatch($index)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleSwatchKeydown($event, $index)\"\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t@if (allowCustomColor()) {\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__swatch hub-input__swatch--custom\"\n\t\t\t\t\t\t\t\t\trole=\"radio\"\n\t\t\t\t\t\t\t\t\t[attr.aria-checked]=\"customChecked()\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"customSwatchName()\"\n\t\t\t\t\t\t\t\t\t[attr.aria-disabled]=\"disabled() || null\"\n\t\t\t\t\t\t\t\t\t[attr.title]=\"customSwatchName()\"\n\t\t\t\t\t\t\t\t\t[attr.tabindex]=\"disabled() ? null : tabbableSwatch() === _swatches().length ? 0 : -1\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-color]=\"customValue() || null\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-ink]=\"customInk()\"\n\t\t\t\t\t\t\t\t\t(click)=\"activateSwatch(_swatches().length)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleSwatchKeydown($event, _swatches().length)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<!-- Out of the tab order and the accessibility tree: the cell is the control, this only hosts the picker. -->\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t#customColorInput\n\t\t\t\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-input__swatch-native\"\n\t\t\t\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t[value]=\"customHex()\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t\t\t\t\t\t(input)=\"pickNativeColor($event)\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<!--\n\t\t\t\t\t\t\tNo palette: a text field for the hex code, with the colour it holds in a square\n\t\t\t\t\t\t\tat its start. The square comes first so Tab meets it where the eye does; it opens\n\t\t\t\t\t\t\tthe browser's picker, which sits hidden under it so the dialog opens there.\n\t\t\t\t\t\t-->\n\t\t\t\t\t\t<div class=\"hub-input__color\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__color-swatch\"\n\t\t\t\t\t\t\t\t[style.--hub-input-swatch-color]=\"classicHex() || null\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"pickerLabel\"\n\t\t\t\t\t\t\t\t[attr.aria-disabled]=\"_isReadonly() || null\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t(click)=\"openClassicPicker()\"\n\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t#classicColorInput\n\t\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__color-native\"\n\t\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t[value]=\"classicHex() || '#000000'\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t\t\t\t(input)=\"pickNativeColor($event)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--color\"\n\t\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t\t[value]=\"colorText()\"\n\t\t\t\t\t\t\t\t(input)=\"typeColorText($event)\"\n\t\t\t\t\t\t\t\t(blur)=\"commitColorText($event)\"\n\t\t\t\t\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t\t\t\t\tmaxlength=\"7\"\n\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t[readonly]=\"_isReadonly()\"\n\t\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.File) {\n\t\t\t\t\t<div class=\"hub-input__file\" [class.hub-input__file--invalid]=\"isInvalid\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t#fileInput\n\t\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-native\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t(change)=\"setFileValue($event)\"\n\t\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-button\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t\t\t(click)=\"triggerFile()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ buttonLabel() }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<span class=\"hub-input__file-name\">{{ fileLabel() || placeholder() }}</span>\n\t\t\t\t\t\t@if (fileLabel() && !disabled() && !_isReadonly()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__file-clear\" aria-label=\"Clear\" (click)=\"clearFile()\">\n\t\t\t\t\t\t\t\t×\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@default {\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-input__group\"\n\t\t\t\t\t\t[class.hub-input__group--floating]=\"labelType() === _labelTypes.Floating\"\n\t\t\t\t\t\t[class.hub-input__group--has-prefix]=\"hasPrefix()\"\n\t\t\t\t\t\t[class.hub-input__group--has-suffix]=\"hasSuffix()\"\n\t\t\t\t\t\t[class.hub-input__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-toggle]=\"showsPasswordToggle()\"\n\t\t\t\t\t\t(focusout)=\"handleGroupFocusOut($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--prepend\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<span class=\"hub-input__affix hub-input__affix--prefix\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<ng-content select=\"[hubInputPrefix]\"></ng-content>\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass=\"hub-field__control\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[type]=\"resolvedType()\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t(keyup.enter)=\"enter.emit(_value())\"\n\t\t\t\t\t\t\t(keydown)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t(keyup)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? placeholder() || ' ' : placeholder()\"\n\t\t\t\t\t\t\t[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"_isReadonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[attr.autocomplete]=\"autocomplete() || null\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t@if (showClear()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__clear\" aria-label=\"Clear\" (click)=\"clear()\"></button>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<span class=\"hub-input__affix hub-input__affix--suffix\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<ng-content select=\"[hubInputSuffix]\"></ng-content>\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--append\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<!-- Attached content goes last: addons label the field, an action acts on it. -->\n\t\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--append\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (showsPasswordToggle()) {\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__password-toggle\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"\n\t\t\t\t\t\t\t\t\tpasswordRevealed() ? _passwordLabels.hidePasswordLabel : _passwordLabels.showPasswordLabel\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[attr.aria-pressed]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__password-icon\"\n\t\t\t\t\t\t\t\t\t[class.hub-input__password-icon--visible]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (labelType() === _labelTypes.Floating && (label() || required())) {\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-input__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (showsCapsLock()) {\n\t\t<div class=\"hub-field__form-text hub-input__capslock\" role=\"status\">{{ _passwordLabels.capsLockWarning }}</div>\n\t}\n\n\t@if (showsStrength()) {\n\t\t<div class=\"hub-input__strength\" [attr.data-level]=\"strengthScore()\">\n\t\t\t<div class=\"hub-input__strength-bar\" role=\"presentation\">\n\t\t\t\t@for (segment of _strengthSegments; track segment) {\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"hub-input__strength-segment\"\n\t\t\t\t\t\t[class.hub-input__strength-segment--active]=\"strengthScore() >= segment\"\n\t\t\t\t\t></span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<span class=\"hub-input__strength-label\" aria-live=\"polite\">{{ strengthLabel() }}</span>\n\t\t</div>\n\t}\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-input{display:block;font-family:var(--hub-input-font-family)}hub-input.hidden-control{display:none!important}.hub-input__row{display:flex;align-items:stretch;gap:var(--hub-ref-space-2, .5rem)}.hub-input__group{flex:1 1 auto;position:relative}.hub-input__affix{position:absolute;inset-block:0;display:flex;align-items:center;color:var(--hub-input-icon-color);--hub-icon-color: var(--hub-input-icon-color);--hub-icon-size: var(--hub-input-icon-size);pointer-events:none;z-index:2}.hub-input__affix--prefix{inset-inline-start:var(--hub-input-affix-inset)}.hub-input__affix--suffix{inset-inline-end:var(--hub-input-affix-inset)}.hub-input__affix-content{pointer-events:auto}.hub-input__clear{position:absolute;inset-block:0;inset-inline-end:var(--hub-input-affix-inset);margin-block:auto;display:inline-flex;inline-size:var(--hub-input-clear-size);block-size:var(--hub-input-clear-size);padding:0;border:0;background-color:var(--hub-input-clear-color);-webkit-mask:var(--hub-input-clear-icon) center/contain no-repeat;mask:var(--hub-input-clear-icon) center/contain no-repeat;cursor:pointer;z-index:3;transition:background-color .15s ease}.hub-input__clear:hover,.hub-input__clear:focus-visible{background-color:var(--hub-input-clear-hover-color)}.hub-input__group--has-prefix>.hub-field__control{padding-inline-start:calc(var(--hub-input-affix-inset) + var(--hub-input-icon-size) + var(--hub-input-affix-gap))}.hub-input__group--has-suffix>.hub-field__control{padding-inline-end:calc(var(--hub-input-affix-inset) + var(--hub-input-icon-size) + var(--hub-input-affix-gap))}.hub-input__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + var(--hub-field-floating-inset));padding-bottom:var(--hub-input-padding-y)}.hub-input__group--floating .hub-input__label--floating{font-size:var(--hub-input-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-input__group--floating .hub-input__label--floating{transform-origin:100% 0}.hub-input__group--floating .hub-input__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-input__group--floating .hub-field__control:focus~.hub-input__label--floating,.hub-input__group--floating .hub-field__control:not(:placeholder-shown)~.hub-input__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.hub-input__counter{display:flex;align-items:stretch}.hub-input__counter-btn{flex:0 0 var(--hub-input-counter-button-width);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;color:var(--hub-input-counter-button-color);background:var(--hub-input-counter-button-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);cursor:pointer}.hub-input__counter-btn:first-child{border-inline-end:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-inline-start:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__counter-btn:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__control--counter{border-radius:0;text-align:center;appearance:textfield}.hub-input__control--counter::-webkit-outer-spin-button,.hub-input__control--counter::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hub-input__color{position:relative;flex:1 1 auto;min-inline-size:0}.hub-input .hub-input__color>.hub-input__control--color{padding-inline-start:calc(var(--hub-input-color-size) + var(--hub-input-padding-x));font-variant-numeric:tabular-nums}.hub-input__color-swatch{position:absolute;inset-block:var(--hub-input-border-width);inset-inline-start:var(--hub-input-border-width);z-index:1;inline-size:var(--hub-input-color-size);margin:0;padding:0;border:0;border-inline-end:var(--hub-input-border-width) solid var(--hub-input-swatch-border-color);border-start-start-radius:calc(var(--hub-input-border-radius) - var(--hub-input-border-width));border-end-start-radius:calc(var(--hub-input-border-radius) - var(--hub-input-border-width));background:var(--hub-input-swatch-color, var(--hub-input-swatch-custom-bg));cursor:pointer}.hub-input__color-swatch:focus-visible{outline:var(--hub-input-swatch-ring-width) solid var(--hub-input-swatch-focus-ring-color);outline-offset:calc(-1 * var(--hub-input-swatch-ring-width))}.hub-input__color-swatch:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-field--readonly .hub-input__color-swatch,.hub-field--plaintext .hub-input__color-swatch{cursor:default}.hub-input__color-native{position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--hub-input-color-size);block-size:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}.hub-input__swatches.hub-field__control{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--hub-input-swatch-min-width),1fr));grid-auto-rows:var(--hub-input-swatch-size);gap:var(--hub-input-swatch-gap);padding:var(--hub-input-padding-y)}.hub-input__swatches--wrapped.hub-field__control{border-color:var(--hub-input-swatch-wrapped-border-color);background-color:var(--hub-input-swatch-wrapped-bg)}.hub-input__swatch{position:relative;min-inline-size:0;border-radius:var(--hub-input-swatch-radius);background:var(--hub-input-swatch-color);box-shadow:inset 0 0 0 var(--hub-input-border-width) var(--hub-input-swatch-border-color);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__swatch:focus-visible{outline:var(--hub-input-swatch-ring-width) solid var(--hub-input-swatch-focus-ring-color);outline-offset:var(--hub-input-swatch-ring-offset)}.hub-input__swatch[aria-checked=true]{box-shadow:inset 0 0 0 var(--hub-input-border-width) var(--hub-input-swatch-border-color),0 0 0 var(--hub-input-swatch-ring-offset) var(--hub-input-bg),0 0 0 calc(var(--hub-input-swatch-ring-offset) + var(--hub-input-swatch-ring-width)) var(--hub-input-swatch-ring-color)}.hub-input__swatch[aria-checked=true]:after{content:\"\";position:absolute;inset:0;background-color:var(--hub-input-swatch-mark-color, var(--hub-input-swatch-ink));-webkit-mask:var(--hub-input-swatch-mark-icon) center/var(--hub-input-swatch-mark-size) no-repeat;mask:var(--hub-input-swatch-mark-icon) center/var(--hub-input-swatch-mark-size) no-repeat;pointer-events:none}.hub-input__swatch--custom{background:var(--hub-input-swatch-color, var(--hub-input-swatch-custom-bg))}.hub-input__swatch-native{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}.hub-field--disabled .hub-input__swatches{opacity:var(--hub-form-disabled-opacity)}.hub-field--disabled .hub-input__swatch{cursor:not-allowed}.hub-field--readonly .hub-input__swatch,.hub-field--plaintext .hub-input__swatch{cursor:default}.hub-input__file{position:relative;display:flex;align-items:stretch;width:100%;background:var(--hub-input-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);overflow:hidden}.hub-input__file--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__file-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hub-input__file-button{flex:0 0 auto;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:0;border-inline-end:var(--hub-input-border-width) solid var(--hub-input-border-color);font-size:var(--hub-input-font-size);white-space:nowrap;cursor:pointer}.hub-input__file-button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__file-name{flex:1 1 auto;min-width:0;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-placeholder-color);font-size:var(--hub-input-font-size);line-height:var(--hub-input-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hub-input__file-clear{flex:0 0 auto;width:2rem;color:var(--hub-input-placeholder-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-input__file-clear:hover{color:var(--hub-form-invalid-color)}.hub-input__password-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--hub-input-password-toggle-width);padding:0;color:var(--hub-input-icon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);border-inline-start:0;border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius);border-start-start-radius:0;border-end-start-radius:0;cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-field--invalid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-invalid-border-color)}.hub-field--valid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-valid-border-color)}.hub-input__group--has-toggle>.hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__addon--append{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__clear,.hub-input__group--has-toggle>.hub-input__affix--suffix{inset-inline-end:calc(var(--hub-input-affix-inset) + var(--hub-input-password-toggle-width))}.hub-input__password-icon{display:block;width:1.1rem;height:1.1rem;background-color:currentColor;--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\");-webkit-mask:var(--hub-input-eye-mask) center/contain no-repeat;mask:var(--hub-input-eye-mask) center/contain no-repeat}.hub-input__password-icon--visible{--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\")}.hub-input__capslock{color:var(--hub-input-capslock-color)}.hub-input__strength{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);margin-top:var(--hub-ref-space-1, .25rem)}.hub-input__strength[data-level=\"1\"]{--hub-input-strength-color: var(--hub-input-strength-1)}.hub-input__strength[data-level=\"2\"]{--hub-input-strength-color: var(--hub-input-strength-2)}.hub-input__strength[data-level=\"3\"]{--hub-input-strength-color: var(--hub-input-strength-3)}.hub-input__strength[data-level=\"4\"]{--hub-input-strength-color: var(--hub-input-strength-4)}.hub-input__strength-bar{display:flex;flex:1 1 auto;gap:var(--hub-input-strength-gap)}.hub-input__strength-segment{flex:1 1 0;height:var(--hub-input-strength-height);border-radius:calc(var(--hub-input-strength-height) / 2);background:var(--hub-input-strength-track)}.hub-input__strength-segment--active{background:var(--hub-input-strength-color, var(--hub-input-strength-1))}.hub-input__strength-label{font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-sys-text-muted, #6c757d)}.hub-input--checkable .hub-input__check{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-input__check-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;appearance:none;background:var(--hub-check-input-bg);border:var(--hub-check-input-border-width) solid var(--hub-check-input-border-color);border-radius:var(--hub-check-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__check-input:checked{background:var(--hub-check-input-checked-bg) var(--hub-check-input-checked-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-checked-border-color)}.hub-input__check-input:indeterminate{background:var(--hub-check-input-indeterminate-bg) var(--hub-check-input-indeterminate-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-indeterminate-border-color)}.hub-input__check-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-input__check-input--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__check-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__check-input--switch{position:relative;width:var(--hub-switch-width);height:var(--hub-switch-height);border:0;border-radius:var(--hub-ref-radius-pill, 50rem);background:var(--hub-switch-track-off)}.hub-input__check-input--switch:after{content:\"\";position:absolute;top:50%;inset-inline-start:.125rem;width:calc(var(--hub-switch-height) - .25rem);height:calc(var(--hub-switch-height) - .25rem);border-radius:50%;background:var(--hub-switch-thumb);transform:translateY(-50%);transition:inset-inline-start .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{inset-inline-start:calc(100% - var(--hub-switch-height) + .125rem)}.hub-input__check-label{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-input-color);font-size:var(--hub-input-font-size)}.hub-input--checkable.hub-field--disabled .hub-input__check-label{opacity:var(--hub-form-disabled-opacity)}.hub-input__group{display:flex;align-items:stretch;min-width:0}.hub-input__group>.hub-input__control,.hub-input__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-input__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-input-padding-x, var(--hub-input-padding-x));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-input-border-width, var(--hub-input-border-width)) solid var(--hub-input-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));font-size:var(--hub-input-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-input__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-input__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-input-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-input__attached.hub-input__attached>*{padding-block:0;padding-inline:var(--hub-input-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-input-min-height, auto);border:var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-input-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-input__attached.hub-input__attached>*:hover,.hub-input__attached.hub-input__attached>*:focus-visible{z-index:1}.hub-input__attached.hub-input__attached>*:not(:hover):not(:focus-visible){border-color:var(--hub-input-group-attached-border-color, var(--hub-input-group-attached-border-color))}.hub-input__attached.hub-input__attached--prepend>*{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-input__attached.hub-input__attached--append>*{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached>hub-input,.hub-input__attached.hub-input__attached>hub-select,.hub-input__attached.hub-input__attached>hub-textarea,.hub-input__attached.hub-input__attached>hub-datepicker,.hub-input__attached.hub-input__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--prepend>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-input__attached.hub-input__attached--append>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--append>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached--append>hub-input:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-textarea:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-input__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-input__attached)>button,:where(.hub-input__attached)>a,:where(.hub-input__attached)>[role=button],:where(.hub-input__attached)>[role=link],:where(.hub-input__attached)>[tabindex]{background:var(--hub-input-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-input-group-action-color, var(--hub-input-group-action-color))}.hub-input__group--has-prepend .hub-input__control,.hub-input__group--has-prepend .hub-field__control,.hub-input__group--has-prepend .hub-input__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group--has-append .hub-input__control,.hub-input__group--has-append .hub-field__control,.hub-input__group--has-append .hub-input__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group>.hub-input__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-input__group>.hub-input__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: HubTooltipDirective, selector: "[hubTooltip]", inputs: ["hubTooltip", "hubTooltipPlacement", "hubTooltipDelay", "hubTooltipOffset"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2186
2186
|
}
|
|
2187
2187
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubInputComponent, decorators: [{
|
|
2188
2188
|
type: Component,
|
|
2189
2189
|
args: [{ selector: 'hub-input', imports: [NgTemplateOutlet, KeyValuePipe, FormsModule, HubTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
2190
2190
|
'[class]': 'classlist()',
|
|
2191
2191
|
'[class.hub-input-host]': 'true'
|
|
2192
|
-
}, template: "<div\n\tclass=\"hub-field hub-input\"\n\t[class.hub-field--horizontal]=\"!isCheckable() && (labelType() === _labelTypes.Horizontal || (!label() && required()))\"\n\t[class.hub-input--checkable]=\"isCheckable()\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly() && !plaintext()\"\n\t[class.hub-field--plaintext]=\"plaintext()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (isCheckable()) {\n\t\t@if (showsFormTextTooltip()) {\n\t\t\t<!--\n\t\t\t\tThe mark has to sit OUTSIDE the check's `<label>`, which here wraps the control\n\t\t\t\titself: nested in it, activating the mark would toggle the switch \u2014 and a switch\n\t\t\t\tcarrying a two-sentence warning is exactly the one that must not flip because\n\t\t\t\tsomebody asked what it does.\n\t\t\t-->\n\t\t\t<div class=\"hub-field__label-row\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubCheckTpl\" />\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t\t></button>\n\t\t\t</div>\n\t\t} @else {\n\t\t\t<ng-container [ngTemplateOutlet]=\"hubCheckTpl\" />\n\t\t}\n\n\t\t<ng-template #hubCheckTpl>\n\t\t\t<label class=\"hub-input__check\" [class.hub-input__check--switch]=\"type() === _inputFormats.Switch\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tclass=\"hub-input__check-input\"\n\t\t\t\t\t[class.hub-input__check-input--switch]=\"type() === _inputFormats.Switch\"\n\t\t\t\t\t[class.hub-input__check-input--invalid]=\"isInvalid\"\n\t\t\t\t\t[attr.role]=\"type() === _inputFormats.Switch ? 'switch' : null\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[checked]=\"$any(_value())\"\n\t\t\t\t\t[indeterminate]=\"isIndeterminate()\"\n\t\t\t\t\t(change)=\"setValue($event)\"\n\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t/>\n\t\t\t\t@if (label() || required()) {\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"hub-input__check-label\"\n\t\t\t\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t</label>\n\t\t</ng-template>\n\t} @else {\n\t\t@if (showsFormTextTooltip()) {\n\t\t\t<!--\n\t\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t\t-->\n\t\t\t<div class=\"hub-field__label-row\">\n\t\t\t\t@if ((label() || required()) && (labelType() !== _labelTypes.Floating || type() === _inputFormats.Color)) {\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t\t}\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t\t></button>\n\t\t\t</div>\n\t\t} @else if ((label() || required()) && (labelType() !== _labelTypes.Floating || type() === _inputFormats.Color)) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t}\n\n\t\t<ng-template #hubFieldLabelTpl>\n\t\t\t<!--\n\t\t\t\tA swatch grid is a radio group, which a `<label for>` cannot label: it names the\n\t\t\t\tgroup through `aria-labelledby` instead, hence the id.\n\t\t\t-->\n\t\t\t<label\n\t\t\t\t[attr.for]=\"showsSwatches() ? null : id\"\n\t\t\t\t[id]=\"id + '-label'\"\n\t\t\t\tclass=\"hub-field__label\"\n\t\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t\t>\n\t\t\t\t{{ label() }}\n\t\t\t\t@if (required()) {\n\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t}\n\t\t\t</label>\n\t\t</ng-template>\n\n\t\t<div class=\"hub-field__body hub-input__row\">\n\t\t\t@switch (type()) {\n\t\t\t\t@case (_inputFormats.Counter) {\n\t\t\t\t\t<div class=\"hub-input__group hub-input__counter\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly() || (min() != null && $any(_value()) <= $any(min()))\"\n\t\t\t\t\t\t\taria-label=\"Decrease\"\n\t\t\t\t\t\t\t(click)=\"subtract()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t−\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--counter\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"_isReadonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly() || (max() != null && $any(_value()) >= $any(max()))\"\n\t\t\t\t\t\t\taria-label=\"Increase\"\n\t\t\t\t\t\t\t(click)=\"add()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.Color) {\n\t\t\t\t\t@if (showsSwatches()) {\n\t\t\t\t\t\t<!--\n\t\t\t\t\t\t\tOne value out of a set: a radio group, with one Tab stop and arrows to move.\n\t\t\t\t\t\t\tThe box is the field's own control skin, so a row of swatches reads as one\n\t\t\t\t\t\t\tmore input in the column; it drops the box once the cells wrap.\n\t\t\t\t\t\t-->\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t#swatchList\n\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__swatches\"\n\t\t\t\t\t\t\t[class.hub-input__swatches--wrapped]=\"swatchesWrapped()\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\trole=\"radiogroup\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[attr.aria-labelledby]=\"label() ? id + '-label' : null\"\n\t\t\t\t\t\t\t[attr.aria-required]=\"required() ? true : null\"\n\t\t\t\t\t\t\t[attr.aria-disabled]=\"disabled() || null\"\n\t\t\t\t\t\t\t[attr.aria-readonly]=\"_isReadonly() || null\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@for (swatch of _swatches(); track $index) {\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__swatch\"\n\t\t\t\t\t\t\t\t\trole=\"radio\"\n\t\t\t\t\t\t\t\t\t[attr.aria-checked]=\"checkedSwatch() === $index\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"swatch.label\"\n\t\t\t\t\t\t\t\t\t[attr.aria-disabled]=\"disabled() || null\"\n\t\t\t\t\t\t\t\t\t[attr.title]=\"swatch.label\"\n\t\t\t\t\t\t\t\t\t[attr.tabindex]=\"disabled() ? null : tabbableSwatch() === $index ? 0 : -1\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-color]=\"swatch.value\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-ink]=\"swatch.ink\"\n\t\t\t\t\t\t\t\t\t(click)=\"activateSwatch($index)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleSwatchKeydown($event, $index)\"\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t@if (allowCustomColor()) {\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__swatch hub-input__swatch--custom\"\n\t\t\t\t\t\t\t\t\trole=\"radio\"\n\t\t\t\t\t\t\t\t\t[attr.aria-checked]=\"customChecked()\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"customSwatchName()\"\n\t\t\t\t\t\t\t\t\t[attr.aria-disabled]=\"disabled() || null\"\n\t\t\t\t\t\t\t\t\t[attr.title]=\"customSwatchName()\"\n\t\t\t\t\t\t\t\t\t[attr.tabindex]=\"disabled() ? null : tabbableSwatch() === _swatches().length ? 0 : -1\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-color]=\"customValue() || null\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-ink]=\"customInk()\"\n\t\t\t\t\t\t\t\t\t(click)=\"activateSwatch(_swatches().length)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleSwatchKeydown($event, _swatches().length)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<!-- Out of the tab order and the accessibility tree: the cell is the control, this only hosts the picker. -->\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t#customColorInput\n\t\t\t\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-input__swatch-native\"\n\t\t\t\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t[value]=\"customHex()\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t\t\t\t\t\t(input)=\"pickNativeColor($event)\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<!--\n\t\t\t\t\t\t\tNo palette: a text field for the hex code, with the colour it holds in a square\n\t\t\t\t\t\t\tat its start. The square comes first so Tab meets it where the eye does; it opens\n\t\t\t\t\t\t\tthe browser's picker, which sits hidden under it so the dialog opens there.\n\t\t\t\t\t\t-->\n\t\t\t\t\t\t<div class=\"hub-input__color\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__color-swatch\"\n\t\t\t\t\t\t\t\t[style.--hub-input-swatch-color]=\"classicHex() || null\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"pickerLabel\"\n\t\t\t\t\t\t\t\t[attr.aria-disabled]=\"_isReadonly() || null\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t(click)=\"openClassicPicker()\"\n\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t#classicColorInput\n\t\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__color-native\"\n\t\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t[value]=\"classicHex() || '#000000'\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t\t\t\t(input)=\"pickNativeColor($event)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--color\"\n\t\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t\t[value]=\"colorText()\"\n\t\t\t\t\t\t\t\t(input)=\"typeColorText($event)\"\n\t\t\t\t\t\t\t\t(blur)=\"commitColorText($event)\"\n\t\t\t\t\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t\t\t\t\tmaxlength=\"7\"\n\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t[readonly]=\"_isReadonly()\"\n\t\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.File) {\n\t\t\t\t\t<div class=\"hub-input__file\" [class.hub-input__file--invalid]=\"isInvalid\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t#fileInput\n\t\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-native\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t(change)=\"setFileValue($event)\"\n\t\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-button\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t\t\t(click)=\"triggerFile()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ buttonLabel() }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<span class=\"hub-input__file-name\">{{ fileLabel() || placeholder() }}</span>\n\t\t\t\t\t\t@if (fileLabel() && !disabled() && !_isReadonly()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__file-clear\" aria-label=\"Clear\" (click)=\"clearFile()\">\n\t\t\t\t\t\t\t\t×\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@default {\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-input__group\"\n\t\t\t\t\t\t[class.hub-input__group--floating]=\"labelType() === _labelTypes.Floating\"\n\t\t\t\t\t\t[class.hub-input__group--has-prefix]=\"hasPrefix()\"\n\t\t\t\t\t\t[class.hub-input__group--has-suffix]=\"hasSuffix()\"\n\t\t\t\t\t\t[class.hub-input__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-toggle]=\"showsPasswordToggle()\"\n\t\t\t\t\t\t(focusout)=\"handleGroupFocusOut($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--prepend\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<span class=\"hub-input__affix hub-input__affix--prefix\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<ng-content select=\"[hubInputPrefix]\"></ng-content>\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass=\"hub-field__control\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[type]=\"resolvedType()\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t(keyup.enter)=\"enter.emit(_value())\"\n\t\t\t\t\t\t\t(keydown)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t(keyup)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? placeholder() || ' ' : placeholder()\"\n\t\t\t\t\t\t\t[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"_isReadonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[attr.autocomplete]=\"autocomplete() || null\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t@if (showClear()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__clear\" aria-label=\"Clear\" (click)=\"clear()\"></button>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<span class=\"hub-input__affix hub-input__affix--suffix\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<ng-content select=\"[hubInputSuffix]\"></ng-content>\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--append\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<!-- Attached content goes last: addons label the field, an action acts on it. -->\n\t\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--append\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (showsPasswordToggle()) {\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__password-toggle\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"\n\t\t\t\t\t\t\t\t\tpasswordRevealed() ? _passwordLabels.hidePasswordLabel : _passwordLabels.showPasswordLabel\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[attr.aria-pressed]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__password-icon\"\n\t\t\t\t\t\t\t\t\t[class.hub-input__password-icon--visible]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (labelType() === _labelTypes.Floating && (label() || required())) {\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-input__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (showsCapsLock()) {\n\t\t<div class=\"hub-field__form-text hub-input__capslock\" role=\"status\">{{ _passwordLabels.capsLockWarning }}</div>\n\t}\n\n\t@if (showsStrength()) {\n\t\t<div class=\"hub-input__strength\" [attr.data-level]=\"strengthScore()\">\n\t\t\t<div class=\"hub-input__strength-bar\" role=\"presentation\">\n\t\t\t\t@for (segment of _strengthSegments; track segment) {\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"hub-input__strength-segment\"\n\t\t\t\t\t\t[class.hub-input__strength-segment--active]=\"strengthScore() >= segment\"\n\t\t\t\t\t></span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<span class=\"hub-input__strength-label\" aria-live=\"polite\">{{ strengthLabel() }}</span>\n\t\t</div>\n\t}\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-input{display:block;font-family:var(--hub-input-font-family)}hub-input.hidden-control{display:none!important}.hub-input__row{display:flex;align-items:stretch;gap:var(--hub-ref-space-2, .5rem)}.hub-input__group{flex:1 1 auto;position:relative}.hub-input__affix{position:absolute;inset-block:0;display:flex;align-items:center;color:var(--hub-input-icon-color);--hub-icon-color: var(--hub-input-icon-color);--hub-icon-size: var(--hub-input-icon-size);pointer-events:none;z-index:2}.hub-input__affix--prefix{inset-inline-start:var(--hub-input-affix-inset)}.hub-input__affix--suffix{inset-inline-end:var(--hub-input-affix-inset)}.hub-input__affix-content{pointer-events:auto}.hub-input__clear{position:absolute;inset-block:0;inset-inline-end:var(--hub-input-affix-inset);margin-block:auto;display:inline-flex;inline-size:var(--hub-input-clear-size);block-size:var(--hub-input-clear-size);padding:0;border:0;background-color:var(--hub-input-clear-color);-webkit-mask:var(--hub-input-clear-icon) center/contain no-repeat;mask:var(--hub-input-clear-icon) center/contain no-repeat;cursor:pointer;z-index:3;transition:background-color .15s ease}.hub-input__clear:hover,.hub-input__clear:focus-visible{background-color:var(--hub-input-clear-hover-color)}.hub-input__group--has-prefix>.hub-field__control{padding-inline-start:calc(var(--hub-input-affix-inset) + var(--hub-input-icon-size) + var(--hub-input-affix-gap))}.hub-input__group--has-suffix>.hub-field__control{padding-inline-end:calc(var(--hub-input-affix-inset) + var(--hub-input-icon-size) + var(--hub-input-affix-gap))}.hub-input__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + var(--hub-field-floating-inset));padding-bottom:var(--hub-input-padding-y)}.hub-input__group--floating .hub-input__label--floating{font-size:var(--hub-input-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-input__group--floating .hub-input__label--floating{transform-origin:100% 0}.hub-input__group--floating .hub-input__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-input__group--floating .hub-field__control:focus~.hub-input__label--floating,.hub-input__group--floating .hub-field__control:not(:placeholder-shown)~.hub-input__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.hub-input__counter{display:flex;align-items:stretch}.hub-input__counter-btn{flex:0 0 var(--hub-input-counter-button-width);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;color:var(--hub-input-counter-button-color);background:var(--hub-input-counter-button-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);cursor:pointer}.hub-input__counter-btn:first-child{border-inline-end:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-inline-start:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__counter-btn:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__control--counter{border-radius:0;text-align:center;appearance:textfield}.hub-input__control--counter::-webkit-outer-spin-button,.hub-input__control--counter::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hub-input__color{position:relative;flex:1 1 auto;min-inline-size:0}.hub-input .hub-input__color>.hub-input__control--color{padding-inline-start:calc(var(--hub-input-color-size) + var(--hub-input-padding-x));font-variant-numeric:tabular-nums}.hub-input__color-swatch{position:absolute;inset-block:var(--hub-input-border-width);inset-inline-start:var(--hub-input-border-width);z-index:1;inline-size:var(--hub-input-color-size);margin:0;padding:0;border:0;border-inline-end:var(--hub-input-border-width) solid var(--hub-input-swatch-border-color);border-start-start-radius:calc(var(--hub-input-border-radius) - var(--hub-input-border-width));border-end-start-radius:calc(var(--hub-input-border-radius) - var(--hub-input-border-width));background:var(--hub-input-swatch-color, var(--hub-input-swatch-custom-bg));cursor:pointer}.hub-input__color-swatch:focus-visible{outline:var(--hub-input-swatch-ring-width) solid var(--hub-input-swatch-focus-ring-color);outline-offset:calc(-1 * var(--hub-input-swatch-ring-width))}.hub-input__color-swatch:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-field--readonly .hub-input__color-swatch,.hub-field--plaintext .hub-input__color-swatch{cursor:default}.hub-input__color-native{position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--hub-input-color-size);block-size:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}.hub-input__swatches.hub-field__control{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--hub-input-swatch-min-width),1fr));grid-auto-rows:var(--hub-input-swatch-size);gap:var(--hub-input-swatch-gap);padding:var(--hub-input-padding-y)}.hub-input__swatches--wrapped.hub-field__control{border-color:var(--hub-input-swatch-wrapped-border-color);background-color:var(--hub-input-swatch-wrapped-bg)}.hub-input__swatch{position:relative;min-inline-size:0;border-radius:var(--hub-input-swatch-radius);background:var(--hub-input-swatch-color);box-shadow:inset 0 0 0 var(--hub-input-border-width) var(--hub-input-swatch-border-color);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__swatch:focus-visible{outline:var(--hub-input-swatch-ring-width) solid var(--hub-input-swatch-focus-ring-color);outline-offset:var(--hub-input-swatch-ring-offset)}.hub-input__swatch[aria-checked=true]{box-shadow:inset 0 0 0 var(--hub-input-border-width) var(--hub-input-swatch-border-color),0 0 0 var(--hub-input-swatch-ring-offset) var(--hub-input-bg),0 0 0 calc(var(--hub-input-swatch-ring-offset) + var(--hub-input-swatch-ring-width)) var(--hub-input-swatch-ring-color)}.hub-input__swatch[aria-checked=true]:after{content:\"\";position:absolute;inset:0;background-color:var(--hub-input-swatch-mark-color, var(--hub-input-swatch-ink));-webkit-mask:var(--hub-input-swatch-mark-icon) center/var(--hub-input-swatch-mark-size) no-repeat;mask:var(--hub-input-swatch-mark-icon) center/var(--hub-input-swatch-mark-size) no-repeat;pointer-events:none}.hub-input__swatch--custom{background:var(--hub-input-swatch-color, var(--hub-input-swatch-custom-bg))}.hub-input__swatch-native{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}.hub-field--disabled .hub-input__swatches{opacity:var(--hub-form-disabled-opacity)}.hub-field--disabled .hub-input__swatch{cursor:not-allowed}.hub-field--readonly .hub-input__swatch,.hub-field--plaintext .hub-input__swatch{cursor:default}.hub-input__file{position:relative;display:flex;align-items:stretch;width:100%;background:var(--hub-input-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);overflow:hidden}.hub-input__file--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__file-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hub-input__file-button{flex:0 0 auto;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:0;border-inline-end:var(--hub-input-border-width) solid var(--hub-input-border-color);font-size:var(--hub-input-font-size);white-space:nowrap;cursor:pointer}.hub-input__file-button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__file-name{flex:1 1 auto;min-width:0;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-placeholder-color);font-size:var(--hub-input-font-size);line-height:var(--hub-input-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hub-input__file-clear{flex:0 0 auto;width:2rem;color:var(--hub-input-placeholder-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-input__file-clear:hover{color:var(--hub-form-invalid-color)}.hub-input__password-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--hub-input-password-toggle-width);padding:0;color:var(--hub-input-icon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);border-inline-start:0;border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius);border-start-start-radius:0;border-end-start-radius:0;cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-field--invalid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-invalid-border-color)}.hub-field--valid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-valid-border-color)}.hub-input__group--has-toggle>.hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__addon--append{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__clear,.hub-input__group--has-toggle>.hub-input__affix--suffix{inset-inline-end:calc(var(--hub-input-affix-inset) + var(--hub-input-password-toggle-width))}.hub-input__password-icon{display:block;width:1.1rem;height:1.1rem;background-color:currentColor;--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\");-webkit-mask:var(--hub-input-eye-mask) center/contain no-repeat;mask:var(--hub-input-eye-mask) center/contain no-repeat}.hub-input__password-icon--visible{--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\")}.hub-input__capslock{color:var(--hub-input-capslock-color)}.hub-input__strength{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);margin-top:var(--hub-ref-space-1, .25rem)}.hub-input__strength[data-level=\"1\"]{--hub-input-strength-color: var(--hub-input-strength-1)}.hub-input__strength[data-level=\"2\"]{--hub-input-strength-color: var(--hub-input-strength-2)}.hub-input__strength[data-level=\"3\"]{--hub-input-strength-color: var(--hub-input-strength-3)}.hub-input__strength[data-level=\"4\"]{--hub-input-strength-color: var(--hub-input-strength-4)}.hub-input__strength-bar{display:flex;flex:1 1 auto;gap:var(--hub-input-strength-gap)}.hub-input__strength-segment{flex:1 1 0;height:var(--hub-input-strength-height);border-radius:calc(var(--hub-input-strength-height) / 2);background:var(--hub-input-strength-track)}.hub-input__strength-segment--active{background:var(--hub-input-strength-color, var(--hub-input-strength-1))}.hub-input__strength-label{font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-sys-text-muted, #6c757d)}.hub-input--checkable .hub-input__check{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-input__check-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;appearance:none;background:var(--hub-check-input-bg);border:var(--hub-check-input-border-width) solid var(--hub-check-input-border-color);border-radius:var(--hub-check-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__check-input:checked{background:var(--hub-check-input-checked-bg) var(--hub-check-input-checked-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-checked-border-color)}.hub-input__check-input:indeterminate{background:var(--hub-check-input-indeterminate-bg) var(--hub-check-input-indeterminate-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-indeterminate-border-color)}.hub-input__check-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-input__check-input--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__check-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__check-input--switch{position:relative;width:var(--hub-switch-width);height:var(--hub-switch-height);border:0;border-radius:var(--hub-ref-radius-pill, 50rem);background:var(--hub-switch-track-off)}.hub-input__check-input--switch:after{content:\"\";position:absolute;top:50%;inset-inline-start:.125rem;width:calc(var(--hub-switch-height) - .25rem);height:calc(var(--hub-switch-height) - .25rem);border-radius:50%;background:var(--hub-switch-thumb);transform:translateY(-50%);transition:inset-inline-start .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{inset-inline-start:calc(100% - var(--hub-switch-height) + .125rem)}.hub-input__check-label{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-input-color);font-size:var(--hub-input-font-size)}.hub-input--checkable.hub-field--disabled .hub-input__check-label{opacity:var(--hub-form-disabled-opacity)}.hub-input__group{display:flex;align-items:stretch;min-width:0}.hub-input__group>.hub-input__control,.hub-input__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-input__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-input-padding-x, var(--hub-input-padding-x));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-input-border-width, var(--hub-input-border-width)) solid var(--hub-input-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));font-size:var(--hub-input-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-input__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-input__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-input-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-input__attached.hub-input__attached>*{padding-block:0;padding-inline:var(--hub-input-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-input-min-height, auto);border:var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-input-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-input__attached.hub-input__attached>*:hover,.hub-input__attached.hub-input__attached>*:focus-visible{z-index:1}.hub-input__attached.hub-input__attached>*:not(:hover):not(:focus-visible){border-color:var(--hub-input-group-attached-border-color, var(--hub-input-group-attached-border-color))}.hub-input__attached.hub-input__attached--prepend>*{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-input__attached.hub-input__attached--append>*{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached>hub-input,.hub-input__attached.hub-input__attached>hub-select,.hub-input__attached.hub-input__attached>hub-textarea,.hub-input__attached.hub-input__attached>hub-datepicker,.hub-input__attached.hub-input__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--prepend>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-input__attached.hub-input__attached--append>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--append>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached--append>hub-input:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-textarea:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-input__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-input__attached)>button,:where(.hub-input__attached)>a,:where(.hub-input__attached)>[role=button],:where(.hub-input__attached)>[role=link],:where(.hub-input__attached)>[tabindex]{background:var(--hub-input-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-input-group-action-color, var(--hub-input-group-action-color))}.hub-input__group--has-prepend .hub-input__control,.hub-input__group--has-prepend .hub-field__control,.hub-input__group--has-prepend .hub-input__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group--has-append .hub-input__control,.hub-input__group--has-append .hub-field__control,.hub-input__group--has-append .hub-input__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group>.hub-input__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-input__group>.hub-input__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\n"] }]
|
|
2192
|
+
}, template: "<div\n\tclass=\"hub-field hub-input\"\n\t[class.hub-field--horizontal]=\"!isCheckable() && (labelType() === _labelTypes.Horizontal || (!label() && required()))\"\n\t[class.hub-input--checkable]=\"isCheckable()\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly() && !plaintext()\"\n\t[class.hub-field--plaintext]=\"plaintext()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (isCheckable()) {\n\t\t@if (showsFormTextTooltip()) {\n\t\t\t<!--\n\t\t\t\tThe mark has to sit OUTSIDE the check's `<label>`, which here wraps the control\n\t\t\t\titself: nested in it, activating the mark would toggle the switch \u2014 and a switch\n\t\t\t\tcarrying a two-sentence warning is exactly the one that must not flip because\n\t\t\t\tsomebody asked what it does.\n\t\t\t-->\n\t\t\t<div class=\"hub-field__label-row\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubCheckTpl\" />\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t\t></button>\n\t\t\t</div>\n\t\t} @else {\n\t\t\t<ng-container [ngTemplateOutlet]=\"hubCheckTpl\" />\n\t\t}\n\n\t\t<ng-template #hubCheckTpl>\n\t\t\t<label class=\"hub-input__check\" [class.hub-input__check--switch]=\"type() === _inputFormats.Switch\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tclass=\"hub-input__check-input\"\n\t\t\t\t\t[class.hub-input__check-input--switch]=\"type() === _inputFormats.Switch\"\n\t\t\t\t\t[class.hub-input__check-input--invalid]=\"isInvalid\"\n\t\t\t\t\t[attr.role]=\"type() === _inputFormats.Switch ? 'switch' : null\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[checked]=\"$any(_value())\"\n\t\t\t\t\t[indeterminate]=\"isIndeterminate()\"\n\t\t\t\t\t(change)=\"setValue($event)\"\n\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t/>\n\t\t\t\t@if (label() || required()) {\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"hub-input__check-label\"\n\t\t\t\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t</label>\n\t\t</ng-template>\n\t} @else {\n\t\t@if (showsFormTextTooltip()) {\n\t\t\t<!--\n\t\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t\t-->\n\t\t\t<div class=\"hub-field__label-row\">\n\t\t\t\t@if ((label() || required()) && (labelType() !== _labelTypes.Floating || type() === _inputFormats.Color)) {\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t\t}\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t\t></button>\n\t\t\t</div>\n\t\t} @else if ((label() || required()) && (labelType() !== _labelTypes.Floating || type() === _inputFormats.Color)) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t}\n\n\t\t<ng-template #hubFieldLabelTpl>\n\t\t\t<!--\n\t\t\t\tA swatch grid is a radio group, which a `<label for>` cannot label: it names the\n\t\t\t\tgroup through `aria-labelledby` instead, hence the id.\n\t\t\t-->\n\t\t\t<label\n\t\t\t\t[attr.for]=\"showsSwatches() ? null : id\"\n\t\t\t\t[id]=\"id + '-label'\"\n\t\t\t\tclass=\"hub-field__label\"\n\t\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t\t>\n\t\t\t\t{{ label() }}\n\t\t\t\t@if (required()) {\n\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t}\n\t\t\t</label>\n\t\t</ng-template>\n\n\t\t<div class=\"hub-field__body hub-input__row\">\n\t\t\t@switch (type()) {\n\t\t\t\t@case (_inputFormats.Counter) {\n\t\t\t\t\t<div class=\"hub-input__group hub-input__counter\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly() || (min() != null && $any(_value()) <= $any(min()))\"\n\t\t\t\t\t\t\taria-label=\"Decrease\"\n\t\t\t\t\t\t\t(click)=\"subtract()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t−\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--counter\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"_isReadonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly() || (max() != null && $any(_value()) >= $any(max()))\"\n\t\t\t\t\t\t\taria-label=\"Increase\"\n\t\t\t\t\t\t\t(click)=\"add()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.Color) {\n\t\t\t\t\t@if (showsSwatches()) {\n\t\t\t\t\t\t<!--\n\t\t\t\t\t\t\tOne value out of a set: a radio group, with one Tab stop and arrows to move.\n\t\t\t\t\t\t\tThe box is the field's own control skin, so a row of swatches reads as one\n\t\t\t\t\t\t\tmore input in the column; it drops the box once the cells wrap.\n\t\t\t\t\t\t-->\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t#swatchList\n\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__swatches\"\n\t\t\t\t\t\t\t[class.hub-input__swatches--wrapped]=\"swatchesWrapped()\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\trole=\"radiogroup\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[attr.aria-labelledby]=\"label() ? id + '-label' : null\"\n\t\t\t\t\t\t\t[attr.aria-required]=\"required() ? true : null\"\n\t\t\t\t\t\t\t[attr.aria-disabled]=\"disabled() || null\"\n\t\t\t\t\t\t\t[attr.aria-readonly]=\"_isReadonly() || null\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@for (swatch of _swatches(); track $index) {\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__swatch\"\n\t\t\t\t\t\t\t\t\trole=\"radio\"\n\t\t\t\t\t\t\t\t\t[attr.aria-checked]=\"checkedSwatch() === $index\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"swatch.label\"\n\t\t\t\t\t\t\t\t\t[attr.aria-disabled]=\"disabled() || null\"\n\t\t\t\t\t\t\t\t\t[attr.title]=\"swatch.label\"\n\t\t\t\t\t\t\t\t\t[attr.tabindex]=\"disabled() ? null : tabbableSwatch() === $index ? 0 : -1\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-color]=\"swatch.value\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-ink]=\"swatch.ink\"\n\t\t\t\t\t\t\t\t\t(click)=\"activateSwatch($index)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleSwatchKeydown($event, $index)\"\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t@if (allowCustomColor()) {\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__swatch hub-input__swatch--custom\"\n\t\t\t\t\t\t\t\t\trole=\"radio\"\n\t\t\t\t\t\t\t\t\t[attr.aria-checked]=\"customChecked()\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"customSwatchName()\"\n\t\t\t\t\t\t\t\t\t[attr.aria-disabled]=\"disabled() || null\"\n\t\t\t\t\t\t\t\t\t[attr.title]=\"customSwatchName()\"\n\t\t\t\t\t\t\t\t\t[attr.tabindex]=\"disabled() ? null : tabbableSwatch() === _swatches().length ? 0 : -1\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-color]=\"customValue() || null\"\n\t\t\t\t\t\t\t\t\t[style.--hub-input-swatch-ink]=\"customInk()\"\n\t\t\t\t\t\t\t\t\t(click)=\"activateSwatch(_swatches().length)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleSwatchKeydown($event, _swatches().length)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<!-- Out of the tab order and the accessibility tree: the cell is the control, this only hosts the picker. -->\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t#customColorInput\n\t\t\t\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-input__swatch-native\"\n\t\t\t\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t[value]=\"customHex()\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t\t\t\t\t\t(input)=\"pickNativeColor($event)\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<!--\n\t\t\t\t\t\t\tNo palette: a text field for the hex code, with the colour it holds in a square\n\t\t\t\t\t\t\tat its start. The square comes first so Tab meets it where the eye does; it opens\n\t\t\t\t\t\t\tthe browser's picker, which sits hidden under it so the dialog opens there.\n\t\t\t\t\t\t-->\n\t\t\t\t\t\t<div class=\"hub-input__color\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__color-swatch\"\n\t\t\t\t\t\t\t\t[style.--hub-input-swatch-color]=\"classicHex() || null\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"pickerLabel\"\n\t\t\t\t\t\t\t\t[attr.aria-disabled]=\"_isReadonly() || null\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t(click)=\"openClassicPicker()\"\n\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t#classicColorInput\n\t\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__color-native\"\n\t\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t[value]=\"classicHex() || '#000000'\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t\t\t\t(input)=\"pickNativeColor($event)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--color\"\n\t\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t\t[value]=\"colorText()\"\n\t\t\t\t\t\t\t\t(input)=\"typeColorText($event)\"\n\t\t\t\t\t\t\t\t(blur)=\"commitColorText($event)\"\n\t\t\t\t\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t\t\t\t\tmaxlength=\"7\"\n\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t[readonly]=\"_isReadonly()\"\n\t\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.File) {\n\t\t\t\t\t<div class=\"hub-input__file\" [class.hub-input__file--invalid]=\"isInvalid\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t#fileInput\n\t\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-native\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t(change)=\"setFileValue($event)\"\n\t\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-button\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || _isReadonly()\"\n\t\t\t\t\t\t\t(click)=\"triggerFile()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ buttonLabel() }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<span class=\"hub-input__file-name\">{{ fileLabel() || placeholder() }}</span>\n\t\t\t\t\t\t@if (fileLabel() && !disabled() && !_isReadonly()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__file-clear\" aria-label=\"Clear\" (click)=\"clearFile()\">\n\t\t\t\t\t\t\t\t×\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@default {\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-input__group\"\n\t\t\t\t\t\t[class.hub-input__group--floating]=\"labelType() === _labelTypes.Floating\"\n\t\t\t\t\t\t[class.hub-input__group--has-prefix]=\"hasPrefix()\"\n\t\t\t\t\t\t[class.hub-input__group--has-suffix]=\"hasSuffix()\"\n\t\t\t\t\t\t[class.hub-input__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-toggle]=\"showsPasswordToggle()\"\n\t\t\t\t\t\t(focusout)=\"handleGroupFocusOut($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--prepend\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<span class=\"hub-input__affix hub-input__affix--prefix\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<ng-content select=\"[hubInputPrefix]\"></ng-content>\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass=\"hub-field__control\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[type]=\"resolvedType()\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t(keyup.enter)=\"enter.emit(_value())\"\n\t\t\t\t\t\t\t(keydown)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t(keyup)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? placeholder() || ' ' : placeholder()\"\n\t\t\t\t\t\t\t[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"_isReadonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[attr.autocomplete]=\"autocomplete() || null\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t@if (showClear()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__clear\" aria-label=\"Clear\" (click)=\"clear()\"></button>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<span class=\"hub-input__affix hub-input__affix--suffix\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<ng-content select=\"[hubInputSuffix]\"></ng-content>\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--append\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<!-- Attached content goes last: addons label the field, an action acts on it. -->\n\t\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--append\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (showsPasswordToggle()) {\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__password-toggle\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"\n\t\t\t\t\t\t\t\t\tpasswordRevealed() ? _passwordLabels.hidePasswordLabel : _passwordLabels.showPasswordLabel\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[attr.aria-pressed]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__password-icon\"\n\t\t\t\t\t\t\t\t\t[class.hub-input__password-icon--visible]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (labelType() === _labelTypes.Floating && (label() || required())) {\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-input__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (showsCapsLock()) {\n\t\t<div class=\"hub-field__form-text hub-input__capslock\" role=\"status\">{{ _passwordLabels.capsLockWarning }}</div>\n\t}\n\n\t@if (showsStrength()) {\n\t\t<div class=\"hub-input__strength\" [attr.data-level]=\"strengthScore()\">\n\t\t\t<div class=\"hub-input__strength-bar\" role=\"presentation\">\n\t\t\t\t@for (segment of _strengthSegments; track segment) {\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"hub-input__strength-segment\"\n\t\t\t\t\t\t[class.hub-input__strength-segment--active]=\"strengthScore() >= segment\"\n\t\t\t\t\t></span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<span class=\"hub-input__strength-label\" aria-live=\"polite\">{{ strengthLabel() }}</span>\n\t\t</div>\n\t}\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-input{display:block;font-family:var(--hub-input-font-family)}hub-input.hidden-control{display:none!important}.hub-input__row{display:flex;align-items:stretch;gap:var(--hub-ref-space-2, .5rem)}.hub-input__group{flex:1 1 auto;position:relative}.hub-input__affix{position:absolute;inset-block:0;display:flex;align-items:center;color:var(--hub-input-icon-color);--hub-icon-color: var(--hub-input-icon-color);--hub-icon-size: var(--hub-input-icon-size);pointer-events:none;z-index:2}.hub-input__affix--prefix{inset-inline-start:var(--hub-input-affix-inset)}.hub-input__affix--suffix{inset-inline-end:var(--hub-input-affix-inset)}.hub-input__affix-content{pointer-events:auto}.hub-input__clear{position:absolute;inset-block:0;inset-inline-end:var(--hub-input-affix-inset);margin-block:auto;display:inline-flex;inline-size:var(--hub-input-clear-size);block-size:var(--hub-input-clear-size);padding:0;border:0;background-color:var(--hub-input-clear-color);-webkit-mask:var(--hub-input-clear-icon) center/contain no-repeat;mask:var(--hub-input-clear-icon) center/contain no-repeat;cursor:pointer;z-index:3;transition:background-color .15s ease}.hub-input__clear:hover,.hub-input__clear:focus-visible{background-color:var(--hub-input-clear-hover-color)}.hub-input__group--has-prefix>.hub-field__control{padding-inline-start:calc(var(--hub-input-affix-inset) + var(--hub-input-icon-size) + var(--hub-input-affix-gap))}.hub-input__group--has-suffix>.hub-field__control{padding-inline-end:calc(var(--hub-input-affix-inset) + var(--hub-input-icon-size) + var(--hub-input-affix-gap))}.hub-input__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + var(--hub-field-floating-inset));padding-bottom:var(--hub-input-padding-y)}.hub-input__group--floating .hub-input__label--floating{font-size:var(--hub-input-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-input__group--floating .hub-input__label--floating{transform-origin:100% 0}.hub-input__group--floating .hub-input__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-input__group--floating .hub-field__control:focus~.hub-input__label--floating,.hub-input__group--floating .hub-field__control:not(:placeholder-shown)~.hub-input__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.hub-input__counter{display:flex;align-items:stretch}.hub-input__counter-btn{flex:0 0 var(--hub-input-counter-button-width);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;color:var(--hub-input-counter-button-color);background:var(--hub-input-counter-button-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);cursor:pointer}.hub-input__counter-btn:first-child{border-inline-end:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-inline-start:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__counter-btn:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__control--counter{border-radius:0;text-align:center;appearance:textfield}.hub-input__control--counter::-webkit-outer-spin-button,.hub-input__control--counter::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hub-input__color{position:relative;flex:1 1 auto;min-inline-size:0}.hub-input .hub-input__color>.hub-input__control--color{padding-inline-start:calc(var(--hub-input-color-size) + var(--hub-input-padding-x));font-variant-numeric:tabular-nums}.hub-input__color-swatch{position:absolute;inset-block:var(--hub-input-border-width);inset-inline-start:var(--hub-input-border-width);z-index:1;inline-size:var(--hub-input-color-size);margin:0;padding:0;border:0;border-inline-end:var(--hub-input-border-width) solid var(--hub-input-swatch-border-color);border-start-start-radius:calc(var(--hub-input-border-radius) - var(--hub-input-border-width));border-end-start-radius:calc(var(--hub-input-border-radius) - var(--hub-input-border-width));background:var(--hub-input-swatch-color, var(--hub-input-swatch-custom-bg));cursor:pointer}.hub-input__color-swatch:focus-visible{outline:var(--hub-input-swatch-ring-width) solid var(--hub-input-swatch-focus-ring-color);outline-offset:calc(-1 * var(--hub-input-swatch-ring-width))}.hub-input__color-swatch:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-field--readonly .hub-input__color-swatch,.hub-field--plaintext .hub-input__color-swatch{cursor:default}.hub-input__color-native{position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--hub-input-color-size);block-size:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}.hub-input__swatches.hub-field__control{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--hub-input-swatch-min-width),1fr));grid-auto-rows:var(--hub-input-swatch-size);gap:var(--hub-input-swatch-gap);padding:var(--hub-input-padding-y)}.hub-input__swatches--wrapped.hub-field__control{border-color:var(--hub-input-swatch-wrapped-border-color);background-color:var(--hub-input-swatch-wrapped-bg)}.hub-input__swatch{position:relative;min-inline-size:0;border-radius:var(--hub-input-swatch-radius);background:var(--hub-input-swatch-color);box-shadow:inset 0 0 0 var(--hub-input-border-width) var(--hub-input-swatch-border-color);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__swatch:focus-visible{outline:var(--hub-input-swatch-ring-width) solid var(--hub-input-swatch-focus-ring-color);outline-offset:var(--hub-input-swatch-ring-offset)}.hub-input__swatch[aria-checked=true]{box-shadow:inset 0 0 0 var(--hub-input-border-width) var(--hub-input-swatch-border-color),0 0 0 var(--hub-input-swatch-ring-offset) var(--hub-input-bg),0 0 0 calc(var(--hub-input-swatch-ring-offset) + var(--hub-input-swatch-ring-width)) var(--hub-input-swatch-ring-color)}.hub-input__swatch[aria-checked=true]:after{content:\"\";position:absolute;inset:0;background-color:var(--hub-input-swatch-mark-color, var(--hub-input-swatch-ink));-webkit-mask:var(--hub-input-swatch-mark-icon) center/var(--hub-input-swatch-mark-size) no-repeat;mask:var(--hub-input-swatch-mark-icon) center/var(--hub-input-swatch-mark-size) no-repeat;pointer-events:none}.hub-input__swatch--custom{background:var(--hub-input-swatch-color, var(--hub-input-swatch-custom-bg))}.hub-input__swatch-native{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}.hub-field--disabled .hub-input__swatches{opacity:var(--hub-form-disabled-opacity)}.hub-field--disabled .hub-input__swatch{cursor:not-allowed}.hub-field--readonly .hub-input__swatch,.hub-field--plaintext .hub-input__swatch{cursor:default}.hub-input__file{position:relative;display:flex;align-items:stretch;width:100%;background:var(--hub-input-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);overflow:hidden}.hub-input__file--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__file-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hub-input__file-button{flex:0 0 auto;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:0;border-inline-end:var(--hub-input-border-width) solid var(--hub-input-border-color);font-size:var(--hub-input-font-size);white-space:nowrap;cursor:pointer}.hub-input__file-button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__file-name{flex:1 1 auto;min-width:0;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-placeholder-color);font-size:var(--hub-input-font-size);line-height:var(--hub-input-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hub-input__file-clear{flex:0 0 auto;width:2rem;color:var(--hub-input-placeholder-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-input__file-clear:hover{color:var(--hub-form-invalid-color)}.hub-input__password-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--hub-input-password-toggle-width);padding:0;color:var(--hub-input-icon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);border-inline-start:0;border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius);border-start-start-radius:0;border-end-start-radius:0;cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-field--invalid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-invalid-border-color)}.hub-field--valid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-valid-border-color)}.hub-input__group--has-toggle>.hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__addon--append{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__clear,.hub-input__group--has-toggle>.hub-input__affix--suffix{inset-inline-end:calc(var(--hub-input-affix-inset) + var(--hub-input-password-toggle-width))}.hub-input__password-icon{display:block;width:1.1rem;height:1.1rem;background-color:currentColor;--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\");-webkit-mask:var(--hub-input-eye-mask) center/contain no-repeat;mask:var(--hub-input-eye-mask) center/contain no-repeat}.hub-input__password-icon--visible{--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\")}.hub-input__capslock{color:var(--hub-input-capslock-color)}.hub-input__strength{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);margin-top:var(--hub-ref-space-1, .25rem)}.hub-input__strength[data-level=\"1\"]{--hub-input-strength-color: var(--hub-input-strength-1)}.hub-input__strength[data-level=\"2\"]{--hub-input-strength-color: var(--hub-input-strength-2)}.hub-input__strength[data-level=\"3\"]{--hub-input-strength-color: var(--hub-input-strength-3)}.hub-input__strength[data-level=\"4\"]{--hub-input-strength-color: var(--hub-input-strength-4)}.hub-input__strength-bar{display:flex;flex:1 1 auto;gap:var(--hub-input-strength-gap)}.hub-input__strength-segment{flex:1 1 0;height:var(--hub-input-strength-height);border-radius:calc(var(--hub-input-strength-height) / 2);background:var(--hub-input-strength-track)}.hub-input__strength-segment--active{background:var(--hub-input-strength-color, var(--hub-input-strength-1))}.hub-input__strength-label{font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-sys-text-muted, #6c757d)}.hub-input--checkable .hub-input__check{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-input__check-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;appearance:none;background:var(--hub-check-input-bg);border:var(--hub-check-input-border-width) solid var(--hub-check-input-border-color);border-radius:var(--hub-check-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__check-input:checked{background:var(--hub-check-input-checked-bg) var(--hub-check-input-checked-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-checked-border-color)}.hub-input__check-input:indeterminate{background:var(--hub-check-input-indeterminate-bg) var(--hub-check-input-indeterminate-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-indeterminate-border-color)}.hub-input__check-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-input__check-input--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__check-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__check-input--switch{position:relative;width:var(--hub-switch-width);height:var(--hub-switch-height);border:0;border-radius:var(--hub-ref-radius-pill, 50rem);background:var(--hub-switch-track-off)}.hub-input__check-input--switch:after{content:\"\";position:absolute;top:50%;inset-inline-start:.125rem;width:calc(var(--hub-switch-height) - .25rem);height:calc(var(--hub-switch-height) - .25rem);border-radius:50%;background:var(--hub-switch-thumb);transform:translateY(-50%);transition:inset-inline-start .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{inset-inline-start:calc(100% - var(--hub-switch-height) + .125rem)}.hub-input__check-label{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-input-color);font-size:var(--hub-input-font-size)}.hub-input--checkable.hub-field--disabled .hub-input__check-label{opacity:var(--hub-form-disabled-opacity)}.hub-input__group{display:flex;align-items:stretch;min-width:0}.hub-input__group>.hub-input__control,.hub-input__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-input__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-input-padding-x, var(--hub-input-padding-x));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-input-border-width, var(--hub-input-border-width)) solid var(--hub-input-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));font-size:var(--hub-input-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-input__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-input__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-input-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-input__attached.hub-input__attached>*{padding-block:0;padding-inline:var(--hub-input-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-input-min-height, auto);border:var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-input-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-input__attached.hub-input__attached>*:hover,.hub-input__attached.hub-input__attached>*:focus-visible{z-index:1}.hub-input__attached.hub-input__attached>*:not(:hover):not(:focus-visible){border-color:var(--hub-input-group-attached-border-color, var(--hub-input-group-attached-border-color))}.hub-input__attached.hub-input__attached--prepend>*{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-input__attached.hub-input__attached--append>*{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached>hub-input,.hub-input__attached.hub-input__attached>hub-select,.hub-input__attached.hub-input__attached>hub-textarea,.hub-input__attached.hub-input__attached>hub-datepicker,.hub-input__attached.hub-input__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--prepend>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-input__attached.hub-input__attached--append>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--append>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached--append>hub-input:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-textarea:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-input__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-input__attached)>button,:where(.hub-input__attached)>a,:where(.hub-input__attached)>[role=button],:where(.hub-input__attached)>[role=link],:where(.hub-input__attached)>[tabindex]{background:var(--hub-input-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-input-group-action-color, var(--hub-input-group-action-color))}.hub-input__group--has-prepend .hub-input__control,.hub-input__group--has-prepend .hub-field__control,.hub-input__group--has-prepend .hub-input__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group--has-append .hub-input__control,.hub-input__group--has-append .hub-field__control,.hub-input__group--has-append .hub-input__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group>.hub-input__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-input__group>.hub-input__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\n"] }]
|
|
2193
2193
|
}], propDecorators: { passwordRevealed: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordRevealed", required: false }] }, { type: i0.Output, args: ["passwordRevealedChange"] }], passwordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordToggle", required: false }] }], hideOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnBlur", required: false }] }], capsLockWarning: [{ type: i0.Input, args: [{ isSignal: true, alias: "capsLockWarning", required: false }] }], passwordStrength: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordStrength", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }, { type: i0.Output, args: ["labelTypeChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }, { type: i0.Output, args: ["placeholderChange"] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }, { type: i0.Output, args: ["minChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }, { type: i0.Output, args: ["maxChange"] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], plaintext: [{ type: i0.Input, args: [{ isSignal: true, alias: "plaintext", required: false }] }], prepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepend", required: false }] }], append: [{ type: i0.Input, args: [{ isSignal: true, alias: "append", required: false }] }], prefixDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubInputPrefixDirective), { isSignal: true }] }], suffixDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubInputSuffixDirective), { isSignal: true }] }], _prependTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubPrependDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _appendTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubAppendDirective), { ...{ read: TemplateRef }, isSignal: true }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], unmaskValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmaskValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enter: [{ type: i0.Output, args: ["enter"] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], swatches: [{ type: i0.Input, args: [{ isSignal: true, alias: "swatches", required: false }] }], allowCustomColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomColor", required: false }] }], customColorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "customColorLabel", required: false }] }], swatchList: [{ type: i0.ViewChild, args: ['swatchList', { isSignal: true }] }], customColorInput: [{ type: i0.ViewChild, args: ['customColorInput', { isSignal: true }] }], classicColorInput: [{ type: i0.ViewChild, args: ['classicColorInput', { isSignal: true }] }] } });
|
|
2194
2194
|
|
|
2195
2195
|
/**
|
|
@@ -2696,14 +2696,14 @@ class HubTextareaComponent extends HubFieldControl {
|
|
|
2696
2696
|
this.valueChange.emit(value);
|
|
2697
2697
|
}
|
|
2698
2698
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2699
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubTextareaComponent, isStandalone: true, selector: "hub-textarea", inputs: { prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, autoresize: { classPropertyName: "autoresize", publicName: "autoresize", isSignal: true, isRequired: false, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, plaintext: { classPropertyName: "plaintext", publicName: "plaintext", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "classlist()", "class.hub-textarea-host": "true" } }, queries: [{ propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_appendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-textarea\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly() && !plaintext()\"\n\t[class.hub-field--plaintext]=\"plaintext()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if (label() || required()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if (label() || required()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\tclass=\"hub-textarea__group\"\n\t\t\t[class.hub-textarea__group--has-prepend]=\"hasPrepend()\"\n\t\t\t[class.hub-textarea__group--has-append]=\"hasAppend()\"\n\t\t>\n\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--prepend\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--prepend\">{{ addon }}</span>\n\t\t\t}\n\t\t\t<textarea\n\t\t\t\tclass=\"hub-field__control hub-textarea__control\"\n\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[hubAutoresize]=\"autoresize()\"\n\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t[attr.rows]=\"rows()\"\n\t\t\t\t[attr.cols]=\"cols()\"\n\t\t\t\t[attr.maxlength]=\"maxlength()\"\n\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[readonly]=\"readonly() || plaintext()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t[style.width]=\"cols() ? 'auto' : '100%'\"\n\t\t\t></textarea>\n\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--append\">{{ addon }}</span>\n\t\t\t}\n\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--append\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t<!-- A counter tells you how much room is left to type, which promises typing. -->\n\t@if (counter() && !plaintext()) {\n\t\t<div class=\"hub-textarea__counter\" [class.hub-field__form-text--disabled]=\"disabled()\">{{ counterText() }}</div>\n\t}\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-textarea{display:block}hub-textarea.hidden-control{display:none!important}.hub-textarea__control{min-height:var(--hub-textarea-min-height);padding:var(--hub-textarea-padding-y) var(--hub-textarea-padding-x);border-radius:var(--hub-textarea-border-radius);resize:vertical}.hub-textarea__counter{margin-top:var(--hub-form-text-margin-top);color:var(--hub-form-text-color);font-size:var(--hub-form-text-font-size);text-align:end}.hub-textarea__group{display:flex;align-items:stretch;min-width:0}.hub-textarea__group>.hub-textarea__control,.hub-textarea__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-textarea__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-textarea-padding-x, var(--hub-input-padding-x));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-textarea-border-width, var(--hub-input-border-width)) solid var(--hub-textarea-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));font-size:var(--hub-textarea-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-textarea__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__attached.hub-textarea__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-textarea-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-textarea__attached.hub-textarea__attached>*{padding-block:0;padding-inline:var(--hub-textarea-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-textarea-min-height, auto);border:var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-textarea-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-textarea__attached.hub-textarea__attached>*:hover,.hub-textarea__attached.hub-textarea__attached>*:focus-visible{z-index:1}.hub-textarea__attached.hub-textarea__attached>*:not(:hover):not(:focus-visible){border-color:var(--hub-textarea-group-attached-border-color, var(--hub-input-group-attached-border-color))}.hub-textarea__attached.hub-textarea__attached--prepend>*{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-textarea__attached.hub-textarea__attached--append>*{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached>hub-input,.hub-textarea__attached.hub-textarea__attached>hub-select,.hub-textarea__attached.hub-textarea__attached>hub-textarea,.hub-textarea__attached.hub-textarea__attached>hub-datepicker,.hub-textarea__attached.hub-textarea__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-textarea__attached.hub-textarea__attached--prepend>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--prepend>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-datepicker .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__attached.hub-textarea__attached--prepend>hub-input:first-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-textarea__attached.hub-textarea__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-textarea__attached.hub-textarea__attached--append>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--append>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-datepicker .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__attached.hub-textarea__attached--append>hub-input:last-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-textarea:last-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-datepicker:last-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-textarea__attached.hub-textarea__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-textarea__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-textarea__attached)>button,:where(.hub-textarea__attached)>a,:where(.hub-textarea__attached)>[role=button],:where(.hub-textarea__attached)>[role=link],:where(.hub-textarea__attached)>[tabindex]{background:var(--hub-textarea-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-textarea-group-action-color, var(--hub-input-group-action-color))}.hub-textarea__group--has-prepend .hub-textarea__control,.hub-textarea__group--has-prepend .hub-field__control,.hub-textarea__group--has-prepend .hub-textarea__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group--has-append .hub-textarea__control,.hub-textarea__group--has-append .hub-field__control,.hub-textarea__group--has-append .hub-textarea__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group>.hub-textarea__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__group>.hub-textarea__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: HubAutoresizeDirective, selector: "textarea[hubAutoresize]", inputs: ["hubAutoresize"] }, { kind: "directive", type: HubTooltipDirective, selector: "[hubTooltip]", inputs: ["hubTooltip", "hubTooltipPlacement", "hubTooltipDelay", "hubTooltipOffset"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2699
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubTextareaComponent, isStandalone: true, selector: "hub-textarea", inputs: { prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, autoresize: { classPropertyName: "autoresize", publicName: "autoresize", isSignal: true, isRequired: false, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, plaintext: { classPropertyName: "plaintext", publicName: "plaintext", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "classlist()", "class.hub-textarea-host": "true" } }, queries: [{ propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_appendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-textarea\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly() && !plaintext()\"\n\t[class.hub-field--plaintext]=\"plaintext()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if (label() || required()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if (label() || required()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\tclass=\"hub-textarea__group\"\n\t\t\t[class.hub-textarea__group--has-prepend]=\"hasPrepend()\"\n\t\t\t[class.hub-textarea__group--has-append]=\"hasAppend()\"\n\t\t>\n\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--prepend\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--prepend\">{{ addon }}</span>\n\t\t\t}\n\t\t\t<textarea\n\t\t\t\tclass=\"hub-field__control hub-textarea__control\"\n\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[hubAutoresize]=\"autoresize()\"\n\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t[attr.rows]=\"rows()\"\n\t\t\t\t[attr.cols]=\"cols()\"\n\t\t\t\t[attr.maxlength]=\"maxlength()\"\n\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[readonly]=\"readonly() || plaintext()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t[style.width]=\"cols() ? 'auto' : '100%'\"\n\t\t\t></textarea>\n\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--append\">{{ addon }}</span>\n\t\t\t}\n\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--append\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t<!-- A counter tells you how much room is left to type, which promises typing. -->\n\t@if (counter() && !plaintext()) {\n\t\t<div class=\"hub-textarea__counter\" [class.hub-field__form-text--disabled]=\"disabled()\">{{ counterText() }}</div>\n\t}\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-textarea{display:block}hub-textarea.hidden-control{display:none!important}.hub-textarea__control{min-height:var(--hub-textarea-min-height);padding:var(--hub-textarea-padding-y) var(--hub-textarea-padding-x);border-radius:var(--hub-textarea-border-radius);resize:vertical}.hub-textarea__counter{margin-top:var(--hub-form-text-margin-top);color:var(--hub-form-text-color);font-size:var(--hub-form-text-font-size);text-align:end}.hub-textarea__group{display:flex;align-items:stretch;min-width:0}.hub-textarea__group>.hub-textarea__control,.hub-textarea__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-textarea__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-textarea-padding-x, var(--hub-input-padding-x));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-textarea-border-width, var(--hub-input-border-width)) solid var(--hub-textarea-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));font-size:var(--hub-textarea-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-textarea__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__attached.hub-textarea__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-textarea-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-textarea__attached.hub-textarea__attached>*{padding-block:0;padding-inline:var(--hub-textarea-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-textarea-min-height, auto);border:var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-textarea-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-textarea__attached.hub-textarea__attached>*:hover,.hub-textarea__attached.hub-textarea__attached>*:focus-visible{z-index:1}.hub-textarea__attached.hub-textarea__attached>*:not(:hover):not(:focus-visible){border-color:var(--hub-textarea-group-attached-border-color, var(--hub-input-group-attached-border-color))}.hub-textarea__attached.hub-textarea__attached--prepend>*{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-textarea__attached.hub-textarea__attached--append>*{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached>hub-input,.hub-textarea__attached.hub-textarea__attached>hub-select,.hub-textarea__attached.hub-textarea__attached>hub-textarea,.hub-textarea__attached.hub-textarea__attached>hub-datepicker,.hub-textarea__attached.hub-textarea__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-textarea__attached.hub-textarea__attached--prepend>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--prepend>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-datepicker .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__attached.hub-textarea__attached--prepend>hub-input:first-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-textarea__attached.hub-textarea__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-textarea__attached.hub-textarea__attached--append>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--append>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-datepicker .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__attached.hub-textarea__attached--append>hub-input:last-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-textarea:last-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-datepicker:last-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-textarea__attached.hub-textarea__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-textarea__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-textarea__attached)>button,:where(.hub-textarea__attached)>a,:where(.hub-textarea__attached)>[role=button],:where(.hub-textarea__attached)>[role=link],:where(.hub-textarea__attached)>[tabindex]{background:var(--hub-textarea-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-textarea-group-action-color, var(--hub-input-group-action-color))}.hub-textarea__group--has-prepend .hub-textarea__control,.hub-textarea__group--has-prepend .hub-field__control,.hub-textarea__group--has-prepend .hub-textarea__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group--has-append .hub-textarea__control,.hub-textarea__group--has-append .hub-field__control,.hub-textarea__group--has-append .hub-textarea__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group>.hub-textarea__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__group>.hub-textarea__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: HubAutoresizeDirective, selector: "textarea[hubAutoresize]", inputs: ["hubAutoresize"] }, { kind: "directive", type: HubTooltipDirective, selector: "[hubTooltip]", inputs: ["hubTooltip", "hubTooltipPlacement", "hubTooltipDelay", "hubTooltipOffset"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2700
2700
|
}
|
|
2701
2701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubTextareaComponent, decorators: [{
|
|
2702
2702
|
type: Component,
|
|
2703
2703
|
args: [{ selector: 'hub-textarea', imports: [NgTemplateOutlet, KeyValuePipe, FormsModule, HubAutoresizeDirective, HubTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
2704
2704
|
'[class]': 'classlist()',
|
|
2705
2705
|
'[class.hub-textarea-host]': 'true'
|
|
2706
|
-
}, template: "<div\n\tclass=\"hub-field hub-textarea\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly() && !plaintext()\"\n\t[class.hub-field--plaintext]=\"plaintext()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if (label() || required()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if (label() || required()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\tclass=\"hub-textarea__group\"\n\t\t\t[class.hub-textarea__group--has-prepend]=\"hasPrepend()\"\n\t\t\t[class.hub-textarea__group--has-append]=\"hasAppend()\"\n\t\t>\n\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--prepend\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--prepend\">{{ addon }}</span>\n\t\t\t}\n\t\t\t<textarea\n\t\t\t\tclass=\"hub-field__control hub-textarea__control\"\n\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[hubAutoresize]=\"autoresize()\"\n\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t[attr.rows]=\"rows()\"\n\t\t\t\t[attr.cols]=\"cols()\"\n\t\t\t\t[attr.maxlength]=\"maxlength()\"\n\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[readonly]=\"readonly() || plaintext()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t[style.width]=\"cols() ? 'auto' : '100%'\"\n\t\t\t></textarea>\n\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--append\">{{ addon }}</span>\n\t\t\t}\n\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--append\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t<!-- A counter tells you how much room is left to type, which promises typing. -->\n\t@if (counter() && !plaintext()) {\n\t\t<div class=\"hub-textarea__counter\" [class.hub-field__form-text--disabled]=\"disabled()\">{{ counterText() }}</div>\n\t}\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-textarea{display:block}hub-textarea.hidden-control{display:none!important}.hub-textarea__control{min-height:var(--hub-textarea-min-height);padding:var(--hub-textarea-padding-y) var(--hub-textarea-padding-x);border-radius:var(--hub-textarea-border-radius);resize:vertical}.hub-textarea__counter{margin-top:var(--hub-form-text-margin-top);color:var(--hub-form-text-color);font-size:var(--hub-form-text-font-size);text-align:end}.hub-textarea__group{display:flex;align-items:stretch;min-width:0}.hub-textarea__group>.hub-textarea__control,.hub-textarea__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-textarea__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-textarea-padding-x, var(--hub-input-padding-x));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-textarea-border-width, var(--hub-input-border-width)) solid var(--hub-textarea-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));font-size:var(--hub-textarea-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-textarea__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__attached.hub-textarea__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-textarea-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-textarea__attached.hub-textarea__attached>*{padding-block:0;padding-inline:var(--hub-textarea-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-textarea-min-height, auto);border:var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-textarea-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-textarea__attached.hub-textarea__attached>*:hover,.hub-textarea__attached.hub-textarea__attached>*:focus-visible{z-index:1}.hub-textarea__attached.hub-textarea__attached>*:not(:hover):not(:focus-visible){border-color:var(--hub-textarea-group-attached-border-color, var(--hub-input-group-attached-border-color))}.hub-textarea__attached.hub-textarea__attached--prepend>*{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-textarea__attached.hub-textarea__attached--append>*{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached>hub-input,.hub-textarea__attached.hub-textarea__attached>hub-select,.hub-textarea__attached.hub-textarea__attached>hub-textarea,.hub-textarea__attached.hub-textarea__attached>hub-datepicker,.hub-textarea__attached.hub-textarea__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-textarea__attached.hub-textarea__attached--prepend>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--prepend>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-datepicker .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__attached.hub-textarea__attached--prepend>hub-input:first-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-textarea__attached.hub-textarea__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-textarea__attached.hub-textarea__attached--append>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--append>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-datepicker .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__attached.hub-textarea__attached--append>hub-input:last-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-textarea:last-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-datepicker:last-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-textarea__attached.hub-textarea__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-textarea__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-textarea__attached)>button,:where(.hub-textarea__attached)>a,:where(.hub-textarea__attached)>[role=button],:where(.hub-textarea__attached)>[role=link],:where(.hub-textarea__attached)>[tabindex]{background:var(--hub-textarea-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-textarea-group-action-color, var(--hub-input-group-action-color))}.hub-textarea__group--has-prepend .hub-textarea__control,.hub-textarea__group--has-prepend .hub-field__control,.hub-textarea__group--has-prepend .hub-textarea__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group--has-append .hub-textarea__control,.hub-textarea__group--has-append .hub-field__control,.hub-textarea__group--has-append .hub-textarea__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group>.hub-textarea__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__group>.hub-textarea__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\n"] }]
|
|
2706
|
+
}, template: "<div\n\tclass=\"hub-field hub-textarea\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly() && !plaintext()\"\n\t[class.hub-field--plaintext]=\"plaintext()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if (label() || required()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if (label() || required()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\tclass=\"hub-textarea__group\"\n\t\t\t[class.hub-textarea__group--has-prepend]=\"hasPrepend()\"\n\t\t\t[class.hub-textarea__group--has-append]=\"hasAppend()\"\n\t\t>\n\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--prepend\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--prepend\">{{ addon }}</span>\n\t\t\t}\n\t\t\t<textarea\n\t\t\t\tclass=\"hub-field__control hub-textarea__control\"\n\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[hubAutoresize]=\"autoresize()\"\n\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t[attr.rows]=\"rows()\"\n\t\t\t\t[attr.cols]=\"cols()\"\n\t\t\t\t[attr.maxlength]=\"maxlength()\"\n\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[readonly]=\"readonly() || plaintext()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t[style.width]=\"cols() ? 'auto' : '100%'\"\n\t\t\t></textarea>\n\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--append\">{{ addon }}</span>\n\t\t\t}\n\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--append\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t<!-- A counter tells you how much room is left to type, which promises typing. -->\n\t@if (counter() && !plaintext()) {\n\t\t<div class=\"hub-textarea__counter\" [class.hub-field__form-text--disabled]=\"disabled()\">{{ counterText() }}</div>\n\t}\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-textarea{display:block}hub-textarea.hidden-control{display:none!important}.hub-textarea__control{min-height:var(--hub-textarea-min-height);padding:var(--hub-textarea-padding-y) var(--hub-textarea-padding-x);border-radius:var(--hub-textarea-border-radius);resize:vertical}.hub-textarea__counter{margin-top:var(--hub-form-text-margin-top);color:var(--hub-form-text-color);font-size:var(--hub-form-text-font-size);text-align:end}.hub-textarea__group{display:flex;align-items:stretch;min-width:0}.hub-textarea__group>.hub-textarea__control,.hub-textarea__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-textarea__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-textarea-padding-x, var(--hub-input-padding-x));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-textarea-border-width, var(--hub-input-border-width)) solid var(--hub-textarea-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));font-size:var(--hub-textarea-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-textarea__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__attached.hub-textarea__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-textarea-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-textarea__attached.hub-textarea__attached>*{padding-block:0;padding-inline:var(--hub-textarea-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-textarea-min-height, auto);border:var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-textarea-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-textarea__attached.hub-textarea__attached>*:hover,.hub-textarea__attached.hub-textarea__attached>*:focus-visible{z-index:1}.hub-textarea__attached.hub-textarea__attached>*:not(:hover):not(:focus-visible){border-color:var(--hub-textarea-group-attached-border-color, var(--hub-input-group-attached-border-color))}.hub-textarea__attached.hub-textarea__attached--prepend>*{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-textarea__attached.hub-textarea__attached--append>*{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached>hub-input,.hub-textarea__attached.hub-textarea__attached>hub-select,.hub-textarea__attached.hub-textarea__attached>hub-textarea,.hub-textarea__attached.hub-textarea__attached>hub-datepicker,.hub-textarea__attached.hub-textarea__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-textarea__attached.hub-textarea__attached--prepend>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--prepend>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-datepicker .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__attached.hub-textarea__attached--prepend>hub-input:first-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-textarea__attached.hub-textarea__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-textarea__attached.hub-textarea__attached--append>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--append>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-datepicker .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__attached.hub-textarea__attached--append>hub-input:last-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-textarea:last-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-datepicker:last-child .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-textarea__attached.hub-textarea__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-textarea__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-textarea__attached)>button,:where(.hub-textarea__attached)>a,:where(.hub-textarea__attached)>[role=button],:where(.hub-textarea__attached)>[role=link],:where(.hub-textarea__attached)>[tabindex]{background:var(--hub-textarea-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-textarea-group-action-color, var(--hub-input-group-action-color))}.hub-textarea__group--has-prepend .hub-textarea__control,.hub-textarea__group--has-prepend .hub-field__control,.hub-textarea__group--has-prepend .hub-textarea__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group--has-append .hub-textarea__control,.hub-textarea__group--has-append .hub-field__control,.hub-textarea__group--has-append .hub-textarea__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group>.hub-textarea__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__group>.hub-textarea__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\n"] }]
|
|
2707
2707
|
}], propDecorators: { prepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepend", required: false }] }], append: [{ type: i0.Input, args: [{ isSignal: true, alias: "append", required: false }] }], _prependTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubPrependDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _appendTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubAppendDirective), { ...{ read: TemplateRef }, isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], autoresize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoresize", required: false }] }], counter: [{ type: i0.Input, args: [{ isSignal: true, alias: "counter", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], plaintext: [{ type: i0.Input, args: [{ isSignal: true, alias: "plaintext", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
2708
2708
|
|
|
2709
2709
|
/**
|
|
@@ -3126,13 +3126,13 @@ class HubSegmentedComponent extends HubFieldControl {
|
|
|
3126
3126
|
return Object.is(a, b);
|
|
3127
3127
|
}
|
|
3128
3128
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSegmentedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3129
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubSegmentedComponent, isStandalone: true, selector: "hub-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.hub-segmented-host": "true" } }, queries: [{ propertyName: "optionTpt", first: true, predicate: HubSegmentedOptionDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_buttons", predicate: ["optionButton"], descendants: true, isSignal: true }, { propertyName: "_bar", first: true, predicate: ["segmentedBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if (label() || required()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if (label() || required()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[style.--hub-segmented-accent]=\"accentVar()\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t[attr.aria-required]=\"multiple() ? null : required() ? 'true' : null\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t@if (optionTpt(); as tpt) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpt.template\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: option, selected: isSelected(option), index }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant]){--hub-segmented-selected-bg: var(--hub-segmented-accent);--hub-segmented-selected-color: oklch(from var(--hub-segmented-accent) clamp(0, (.62 - l) * 1000, 1) 0 h)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HubTooltipDirective, selector: "[hubTooltip]", inputs: ["hubTooltip", "hubTooltipPlacement", "hubTooltipDelay", "hubTooltipOffset"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3129
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubSegmentedComponent, isStandalone: true, selector: "hub-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.hub-segmented-host": "true" } }, queries: [{ propertyName: "optionTpt", first: true, predicate: HubSegmentedOptionDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_buttons", predicate: ["optionButton"], descendants: true, isSignal: true }, { propertyName: "_bar", first: true, predicate: ["segmentedBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if (label() || required()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if (label() || required()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[style.--hub-segmented-accent]=\"accentVar()\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t[attr.aria-required]=\"multiple() ? null : required() ? 'true' : null\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t@if (optionTpt(); as tpt) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpt.template\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: option, selected: isSelected(option), index }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-height:calc(var(--hub-segmented-min-height) - 2 * var(--hub-segmented-gap));padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{min-height:calc(var(--hub-segmented-min-height) - 2 * var(--hub-segmented-gap) - var(--hub-segmented-size-step));padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{min-height:calc(var(--hub-segmented-min-height) - 2 * var(--hub-segmented-gap) + var(--hub-segmented-size-step));padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant]){--hub-segmented-selected-bg: var(--hub-segmented-accent);--hub-segmented-selected-color: oklch(from var(--hub-segmented-accent) clamp(0, (.62 - l) * 1000, 1) 0 h)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HubTooltipDirective, selector: "[hubTooltip]", inputs: ["hubTooltip", "hubTooltipPlacement", "hubTooltipDelay", "hubTooltipOffset"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3130
3130
|
}
|
|
3131
3131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSegmentedComponent, decorators: [{
|
|
3132
3132
|
type: Component,
|
|
3133
3133
|
args: [{ selector: 'hub-segmented', standalone: true, imports: [NgTemplateOutlet, KeyValuePipe, HubTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
3134
3134
|
'[class.hub-segmented-host]': 'true'
|
|
3135
|
-
}, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if (label() || required()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if (label() || required()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[style.--hub-segmented-accent]=\"accentVar()\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t[attr.aria-required]=\"multiple() ? null : required() ? 'true' : null\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t@if (optionTpt(); as tpt) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpt.template\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: option, selected: isSelected(option), index }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant]){--hub-segmented-selected-bg: var(--hub-segmented-accent);--hub-segmented-selected-color: oklch(from var(--hub-segmented-accent) clamp(0, (.62 - l) * 1000, 1) 0 h)}\n"] }]
|
|
3135
|
+
}, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if (label() || required()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if (label() || required()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[style.--hub-segmented-accent]=\"accentVar()\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t[attr.aria-required]=\"multiple() ? null : required() ? 'true' : null\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t@if (optionTpt(); as tpt) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpt.template\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: option, selected: isSelected(option), index }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-height:calc(var(--hub-segmented-min-height) - 2 * var(--hub-segmented-gap));padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{min-height:calc(var(--hub-segmented-min-height) - 2 * var(--hub-segmented-gap) - var(--hub-segmented-size-step));padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{min-height:calc(var(--hub-segmented-min-height) - 2 * var(--hub-segmented-gap) + var(--hub-segmented-size-step));padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant]){--hub-segmented-selected-bg: var(--hub-segmented-accent);--hub-segmented-selected-color: oklch(from var(--hub-segmented-accent) clamp(0, (.62 - l) * 1000, 1) 0 h)}\n"] }]
|
|
3136
3136
|
}], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSegmentedOptionDirective), { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], _buttons: [{ type: i0.ViewChildren, args: ['optionButton', { isSignal: true }] }], _bar: [{ type: i0.ViewChild, args: ['segmentedBar', { isSignal: true }] }] } });
|
|
3137
3137
|
|
|
3138
3138
|
/**
|
|
@@ -6114,8 +6114,19 @@ class NgSelectComponent {
|
|
|
6114
6114
|
else {
|
|
6115
6115
|
tag = this._primitive ? this.searchTerm : { [this.bindLabel()]: this.searchTerm };
|
|
6116
6116
|
}
|
|
6117
|
-
|
|
6117
|
+
// Read once, up front: the panel may be closed before the promise resolves, and whether the
|
|
6118
|
+
// created item joins the list or stands alone is decided by the state the user acted in.
|
|
6119
|
+
const wasOpen = this.isOpen();
|
|
6120
|
+
const handleTag = (item) => this.typeahead()?.observed || !wasOpen ? this.itemsList.mapItem(item, null) : this.itemsList.addItem(item);
|
|
6118
6121
|
if (isPromise(tag)) {
|
|
6122
|
+
// The panel closes now rather than when the promise resolves, which is what the
|
|
6123
|
+
// synchronous branch has always done. An `addTag` that opens a dialog left the list
|
|
6124
|
+
// hanging over it — a panel appended to <body>, above the modal, covering the very
|
|
6125
|
+
// form the user had been sent to fill in — until the promise came back, or forever
|
|
6126
|
+
// if it resolved with nothing.
|
|
6127
|
+
if (this.closeOnSelect()) {
|
|
6128
|
+
this.close();
|
|
6129
|
+
}
|
|
6119
6130
|
// The same guard the synchronous branch has always had. An `addTag` that
|
|
6120
6131
|
// resolves with nothing is saying "there is nothing to add" — a creation
|
|
6121
6132
|
// dialog dismissed, a request refused — and selecting it anyway turned that
|
|
@@ -6986,6 +6997,13 @@ class HubSelectComponent extends HubFieldControl {
|
|
|
6986
6997
|
clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6987
6998
|
/** Whether the dropdown closes after a selection. */
|
|
6988
6999
|
closeOnSelect = input(true, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
7000
|
+
/**
|
|
7001
|
+
* Whether the search box empties after each selection. Left undefined so the engine keeps its
|
|
7002
|
+
* own rule — it falls back to `closeOnSelect`, which is right until the two are wanted apart:
|
|
7003
|
+
* a tag field that stays open to take the next value still has to clear the term it just used.
|
|
7004
|
+
*/
|
|
7005
|
+
clearSearchOnAdd = input(undefined, /* @ts-ignore */
|
|
7006
|
+
...(ngDevMode ? [{ debugName: "clearSearchOnAdd" }] : /* istanbul ignore next */ []));
|
|
6989
7007
|
/**
|
|
6990
7008
|
* Keep the placeholder visible even when a value is selected. Defaults to `false` (the
|
|
6991
7009
|
* placeholder hides on selection) — ng-select v23 defaults this to `true`, which is not the
|
|
@@ -7054,8 +7072,17 @@ class HubSelectComponent extends HubFieldControl {
|
|
|
7054
7072
|
return attrs;
|
|
7055
7073
|
}, /* @ts-ignore */
|
|
7056
7074
|
...(ngDevMode ? [{ debugName: "a11yInputAttrs" }] : /* istanbul ignore next */ []));
|
|
7057
|
-
/** Emits whenever the value changes. */
|
|
7075
|
+
/** Emits whenever the value changes. Carries the bound value, the one the form holds. */
|
|
7058
7076
|
valueChange = output();
|
|
7077
|
+
/**
|
|
7078
|
+
* Emits the selected ITEM — the whole object, not the bound value — whenever the selection
|
|
7079
|
+
* changes, which is what `ng-select` has always emitted under this name.
|
|
7080
|
+
*
|
|
7081
|
+
* It exists as a real output because otherwise `(change)` on `<hub-select>` is a DOM listener:
|
|
7082
|
+
* it caught whatever the inner search input happened to bubble, never fired for a value added
|
|
7083
|
+
* by an asynchronous `addTag`, and compiled without a word of warning either way.
|
|
7084
|
+
*/
|
|
7085
|
+
change = output();
|
|
7059
7086
|
/** Emits when the control gains focus (dropdown format). */
|
|
7060
7087
|
onFocus = output();
|
|
7061
7088
|
/** Emits when the control loses focus (dropdown format). */
|
|
@@ -7209,6 +7236,7 @@ class HubSelectComponent extends HubFieldControl {
|
|
|
7209
7236
|
current.push(value);
|
|
7210
7237
|
}
|
|
7211
7238
|
this.setValue(current);
|
|
7239
|
+
this.change.emit(this.#selectedItems());
|
|
7212
7240
|
return;
|
|
7213
7241
|
}
|
|
7214
7242
|
// Single selection: clicking the selected item clears it when clearable.
|
|
@@ -7218,6 +7246,20 @@ class HubSelectComponent extends HubFieldControl {
|
|
|
7218
7246
|
else {
|
|
7219
7247
|
this.setValue(value);
|
|
7220
7248
|
}
|
|
7249
|
+
this.change.emit(this.#selectedItems()[0]);
|
|
7250
|
+
}
|
|
7251
|
+
/**
|
|
7252
|
+
* The items the current value stands for, for the formats that have no engine to ask.
|
|
7253
|
+
*
|
|
7254
|
+
* The dropdown forwards the engine's own `change`, which already carries the items; the
|
|
7255
|
+
* button / checkbox / radio formats hold nothing but the value, so the items are found again
|
|
7256
|
+
* here. Keeping the payload the same across formats is the point: a consumer should not have
|
|
7257
|
+
* to know which one it is bound to.
|
|
7258
|
+
*
|
|
7259
|
+
* @returns The selected items, in the order the options were declared.
|
|
7260
|
+
*/
|
|
7261
|
+
#selectedItems() {
|
|
7262
|
+
return this.items().filter((item) => this.isSelected(item));
|
|
7221
7263
|
}
|
|
7222
7264
|
/**
|
|
7223
7265
|
* Normalizes an addon input to a list, dropping empties so `prepend=""` renders nothing
|
|
@@ -7233,7 +7275,7 @@ class HubSelectComponent extends HubFieldControl {
|
|
|
7233
7275
|
return value ? [value] : [];
|
|
7234
7276
|
}
|
|
7235
7277
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
7236
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubSelectComponent, isStandalone: true, selector: "hub-select", inputs: { prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, fixedPlaceholder: { classPropertyName: "fixedPlaceholder", publicName: "fixedPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, addTag: { classPropertyName: "addTag", publicName: "addTag", isSignal: true, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", onFocus: "onFocus", onBlur: "onBlur", onOpen: "onOpen", onClose: "onClose", onClear: "onClear", onSearch: "onSearch", onAdd: "onAdd", onRemove: "onRemove", scroll: "scroll", scrollToEnd: "scrollToEnd" }, host: { properties: { "class": "classlist()", "class.hub-select-host": "true" } }, queries: [{ propertyName: "_hubOptionTpl", first: true, predicate: HubSelectOptionDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngOptionTpl", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubOptgroupTpl", first: true, predicate: HubSelectOptgroupDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngOptgroupTpl", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubLabelTpl", first: true, predicate: HubSelectLabelDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngLabelTpl", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubMultiLabelTpl", first: true, predicate: HubSelectMultiLabelDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngMultiLabelTpl", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubHeaderTpl", first: true, predicate: HubSelectHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngHeaderTpl", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubFooterTpl", first: true, predicate: HubSelectFooterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngFooterTpl", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubNotFoundTpl", first: true, predicate: HubSelectNotFoundDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngNotFoundTpl", first: true, predicate: NgNotFoundTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubTypeToSearchTpl", first: true, predicate: HubSelectTypeToSearchDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngTypeToSearchTpl", first: true, predicate: NgTypeToSearchTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubLoadingTextTpl", first: true, predicate: HubSelectLoadingTextDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngLoadingTextTpl", first: true, predicate: NgLoadingTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubLoadingSpinnerTpl", first: true, predicate: HubSelectLoadingSpinnerDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngLoadingSpinnerTpl", first: true, predicate: NgLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubTagTpl", first: true, predicate: HubSelectTagDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngTagTpl", first: true, predicate: NgTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubClearButtonTpl", first: true, predicate: HubSelectClearButtonDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngClearButtonTpl", first: true, predicate: NgClearButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_legacySuffixTpl", first: true, predicate: HubSelectSuffixDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_genericAppendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-select\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if ((label() || required()) && !showsFloatingLabel()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if ((label() || required()) && !showsFloatingLabel()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t@switch (format()) {\n\t\t\t@case (_selectFormats.Dropdown) {\n\t\t\t\t<!-- [disabled] is claimed by the NgModel below (alias of its isDisabled input), not by\n\t\t\t\t ng-select \u2014 the engine's own `disabled` is a computed fed by setDisabledState.\n\t\t\t\t Dropping [ngModel] here would silently un-wire the disabled state. -->\n\t\t\t\t<!--\n\t\t\t\t\tThe control and its attached action are one field: the group is what makes\n\t\t\t\t\tthem share a line and a border, so a select with a button beside it does not\n\t\t\t\t\tread as two unrelated things that happen to be adjacent.\n\t\t\t\t-->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__group\"\n\t\t\t\t\t[class.hub-select__group--floating]=\"showsFloatingLabel()\"\n\t\t\t\t\t[class.hub-select__group--raised]=\"showsFloatingLabel() && isLabelRaised()\"\n\t\t\t\t\t[class.hub-select__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t[class.hub-select__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t>\n\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--prepend\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe floating label hangs off a zero-width anchor placed exactly where the\n\t\t\t\t\t\tcontrol starts, not off the group. A group can open with an addon or an\n\t\t\t\t\t\tattached button, and a label pinned to the group's own leading edge would\n\t\t\t\t\t\tprint on top of it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (showsFloatingLabel()) {\n\t\t\t\t\t\t<span class=\"hub-select__label-anchor\">\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-select__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t<ng-select\n\t\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t\t[searchFn]=\"$any(searchFn())\"\n\t\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[placeholder]=\"placeholder() ?? _ngSelectConfig.placeholder\"\n\t\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t\t[addTag]=\"$any(addTag())\"\n\t\t\t\t\t\t[addTagText]=\"addTagText()\"\n\t\t\t\t\t\t[minTermLength]=\"minTermLength()\"\n\t\t\t\t\t\t[typeahead]=\"$any(typeahead())\"\n\t\t\t\t\t\t[compareWith]=\"$any(compareWith())\"\n\t\t\t\t\t\t[inputAttrs]=\"a11yInputAttrs()\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t(focus)=\"handleControlFocus($event)\"\n\t\t\t\t\t\t(blur)=\"handleControlBlur($event)\"\n\t\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-option-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-optgroup-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_labelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, clear, label }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_multiLabelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ items, clear }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_headerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-header-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_footerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-footer-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_notFoundTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_typeToSearchTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-typetosearch-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingTextTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingSpinnerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingspinner-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_tagTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_clearButtonTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-clearbutton-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</ng-select>\n\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--append\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe action goes last, after any append addon, mirroring where hub-input puts\n\t\t\t\t\t\tits password toggle: addons label the field, the action acts on it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--append\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case (_selectFormats.Buttons) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__buttons\"\n\t\t\t\t\t[class.hub-select__buttons--vertical]=\"vertical()\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-select__button\"\n\t\t\t\t\t\t\t[class.hub-select__button--selected]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ itemLabel(item) }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__options\"\n\t\t\t\t\t[class.hub-select__options--vertical]=\"vertical()\"\n\t\t\t\t\t[attr.role]=\"format() === _selectFormats.Radio ? 'radiogroup' : 'group'\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<label class=\"hub-select__option\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"hub-select__option-input\"\n\t\t\t\t\t\t\t\t[type]=\"format() === _selectFormats.Radio ? 'radio' : 'checkbox'\"\n\t\t\t\t\t\t\t\t[name]=\"id\"\n\t\t\t\t\t\t\t\t[checked]=\"isSelected(item)\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t\t(change)=\"toggleItem(item)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class=\"hub-select__option-label\">{{ itemLabel(item) }}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-select{display:block}hub-select.hidden-control{display:none!important}.hub-select__group{display:flex;align-items:stretch;min-width:0}.hub-select__group>.hub-select__control,.hub-select__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-select__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-select-padding-x, var(--hub-input-padding-x));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-select-border-width, var(--hub-input-border-width)) solid var(--hub-select-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));font-size:var(--hub-select-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-select__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-select__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-select-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-select__attached.hub-select__attached>*{padding-block:0;padding-inline:var(--hub-select-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-select-min-height, auto);border:var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-select__attached.hub-select__attached>*:hover,.hub-select__attached.hub-select__attached>*:focus-visible{z-index:1}.hub-select__attached.hub-select__attached>*:not(:hover):not(:focus-visible){border-color:var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color))}.hub-select__attached.hub-select__attached--prepend>*{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-select__attached.hub-select__attached--append>*{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached>hub-input,.hub-select__attached.hub-select__attached>hub-select,.hub-select__attached.hub-select__attached>hub-textarea,.hub-select__attached.hub-select__attached>hub-datepicker,.hub-select__attached.hub-select__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--prepend>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__attached.hub-select__attached--append>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--append>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached--append>hub-input:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-textarea:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-select__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-select__attached)>button,:where(.hub-select__attached)>a,:where(.hub-select__attached)>[role=button],:where(.hub-select__attached)>[role=link],:where(.hub-select__attached)>[tabindex]{background:var(--hub-select-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-select-group-action-color, var(--hub-input-group-action-color))}.hub-select__group--has-prepend .hub-select__control,.hub-select__group--has-prepend .hub-field__control,.hub-select__group--has-prepend .hub-select__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group--has-append .hub-select__control,.hub-select__group--has-append .hub-field__control,.hub-select__group--has-append .hub-select__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group>.hub-select__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-select__group>.hub-select__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.hub-select__control.ng-select{font-size:var(--hub-select-font-size);color:var(--hub-select-color)}.hub-select__control.ng-select .ng-select-container{min-height:var(--hub-select-min-height);align-items:center;color:var(--hub-select-color);background:var(--hub-select-bg);border:var(--hub-select-border-width) solid var(--hub-select-border-color);border-radius:var(--hub-select-border-radius);transition:var(--hub-form-transition)}.hub-select__control.ng-select .ng-value-container{align-items:center;padding-inline-start:var(--hub-select-padding-x)}.hub-select__control.ng-select .ng-placeholder{color:var(--hub-select-placeholder-color)}.hub-select__control.ng-select.ng-has-value .ng-placeholder{display:none}.hub-select__control.ng-select.ng-select-single .ng-select-container{height:var(--hub-select-min-height)}.hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);padding-inline-start:var(--hub-select-padding-x);padding-inline-end:3rem}.hub-select__control.ng-select .ng-value{color:var(--hub-select-color)}.hub-select__control.ng-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,.hub-select__control.ng-select.ng-select-opened .ng-select-container{border-color:var(--hub-select-focus-border-color);box-shadow:var(--hub-select-focus-box-shadow)}.hub-select__control.ng-select.ng-select-multiple .ng-value-container{padding-top:0;padding-inline-start:var(--hub-select-padding-x);gap:.25rem}.hub-select__control.ng-select.ng-select-multiple .ng-placeholder{top:50%;transform:translateY(-50%);padding-bottom:0}.hub-select__control.ng-select.ng-select-multiple .ng-value{display:inline-flex;align-items:center;margin:0 0 .25rem;background:var(--hub-select-value-bg);color:var(--hub-select-value-color);border-radius:var(--hub-select-value-border-radius)}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-label{padding:.1rem .4rem}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon{padding:.1rem .4rem;cursor:pointer}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon:hover{opacity:.7}.hub-select__control.ng-select.ng-select-multiple .ng-input{padding-block:0 .2rem;padding-inline:.25rem 0}.hub-select__control.ng-select .ng-arrow-wrapper{padding-inline:var(--hub-select-arrow-gap)}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-style:solid;border-width:var(--hub-select-arrow-size) var(--hub-select-arrow-size) calc(var(--hub-select-arrow-size) / 2);border-color:var(--hub-select-arrow-color) transparent transparent}.hub-select__control.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{border-width:0 var(--hub-select-arrow-size) var(--hub-select-arrow-size);border-color:transparent transparent var(--hub-select-arrow-color)}.hub-select__control.ng-select .ng-clear-wrapper{color:var(--hub-select-clear-color)}.hub-select__control.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--hub-select-clear-hover-color)}.hub-select__control.ng-select.ng-select-disabled .ng-select-container{opacity:var(--hub-form-disabled-opacity)}.hub-select__control.ng-select.hub-select__control--invalid .ng-select-container{border-color:var(--hub-form-invalid-border-color)}.hub-select__control.ng-select.hub-select__control--invalid.ng-select-focused .ng-select-container{box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color)}.hub-select__group--floating .hub-select__label-anchor{position:relative;z-index:1002;flex:0 0 0;width:0;align-self:stretch}.hub-select__group--floating .hub-select__label--floating{font-size:var(--hub-select-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-select-padding-x);margin:0;color:var(--hub-select-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);white-space:nowrap;pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-select__group--floating .hub-select__label--floating{transform-origin:100% 0}.hub-select__group--floating .hub-select__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-select__group--floating .hub-select__control.ng-select .ng-select-container,.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container{height:auto;min-height:calc(var(--hub-select-min-height) + var(--hub-field-floating-inset))}.hub-select__group--floating .hub-select__control.ng-select .ng-value-container{padding-block-start:var(--hub-field-floating-inset)}.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:calc(50% + var(--hub-field-floating-inset) / 2)}.hub-select__group--floating:not(.hub-select__group--raised) .ng-placeholder{visibility:hidden}.hub-select__group--floating.hub-select__group--raised .hub-select__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.ng-dropdown-panel{background:var(--hub-select-dropdown-bg);border:var(--hub-select-border-width) solid var(--hub-select-dropdown-border-color);border-radius:var(--hub-select-dropdown-border-radius);box-shadow:var(--hub-select-dropdown-box-shadow)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-option-color);background:transparent}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:var(--hub-select-option-marked-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:var(--hub-select-option-selected-color);background:var(--hub-select-option-selected-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{opacity:var(--hub-form-disabled-opacity)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-optgroup-color);font-weight:var(--hub-ref-font-weight-medium, 500)}.hub-select__control .ng-dropdown-panel,.ng-dropdown-panel.hub-select__control{z-index:var(--hub-select-dropdown-zindex, var(--hub-select-dropdown-z-index))}.hub-select__buttons{display:inline-flex;flex-wrap:wrap}.hub-select__buttons--vertical{flex-direction:column;align-items:stretch}.hub-select__button{position:relative;padding:var(--hub-select-button-padding-y) var(--hub-select-button-padding-x);color:var(--hub-select-button-color);background:var(--hub-select-button-bg);border:var(--hub-select-border-width) solid var(--hub-select-button-border-color);border-radius:0;font-size:var(--hub-select-font-size);cursor:pointer;transition:var(--hub-form-transition)}.hub-select__button:not(:first-child){margin-inline-start:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}.hub-select__button:hover,.hub-select__button:focus-visible,.hub-select__button--selected{z-index:1}.hub-select__button:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__button--selected{color:var(--hub-select-button-selected-color);background:var(--hub-select-button-selected-bg);border-color:var(--hub-select-button-selected-border-color)}.hub-select__button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__buttons--vertical .hub-select__button:not(:first-child){margin-inline-start:0;margin-top:calc(-1 * var(--hub-select-border-width))}.hub-select__buttons--vertical .hub-select__button:first-child{border-radius:var(--hub-select-border-radius) var(--hub-select-border-radius) 0 0}.hub-select__buttons--vertical .hub-select__button:last-child{border-radius:0 0 var(--hub-select-border-radius) var(--hub-select-border-radius)}.hub-select__buttons--vertical .hub-select__button:not(:first-child):not(:last-child){border-radius:0}.hub-select__options{display:flex;flex-wrap:wrap;gap:var(--hub-select-button-gap) var(--hub-ref-space-4, 1.5rem)}.hub-select__options--vertical{flex-direction:column}.hub-select__option{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-select__option-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;accent-color:var(--hub-check-input-checked-bg);cursor:pointer}.hub-select__option-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__option-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__option-label{color:var(--hub-select-color);font-size:var(--hub-select-font-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: NgTagTemplateDirective, selector: "[ng-tag-tmp]" }, { kind: "directive", type: NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: HubTooltipDirective, selector: "[hubTooltip]", inputs: ["hubTooltip", "hubTooltipPlacement", "hubTooltipDelay", "hubTooltipOffset"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7278
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubSelectComponent, isStandalone: true, selector: "hub-select", inputs: { prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnAdd: { classPropertyName: "clearSearchOnAdd", publicName: "clearSearchOnAdd", isSignal: true, isRequired: false, transformFunction: null }, fixedPlaceholder: { classPropertyName: "fixedPlaceholder", publicName: "fixedPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, addTag: { classPropertyName: "addTag", publicName: "addTag", isSignal: true, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", change: "change", onFocus: "onFocus", onBlur: "onBlur", onOpen: "onOpen", onClose: "onClose", onClear: "onClear", onSearch: "onSearch", onAdd: "onAdd", onRemove: "onRemove", scroll: "scroll", scrollToEnd: "scrollToEnd" }, host: { properties: { "class": "classlist()", "class.hub-select-host": "true" } }, queries: [{ propertyName: "_hubOptionTpl", first: true, predicate: HubSelectOptionDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngOptionTpl", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubOptgroupTpl", first: true, predicate: HubSelectOptgroupDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngOptgroupTpl", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubLabelTpl", first: true, predicate: HubSelectLabelDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngLabelTpl", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubMultiLabelTpl", first: true, predicate: HubSelectMultiLabelDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngMultiLabelTpl", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubHeaderTpl", first: true, predicate: HubSelectHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngHeaderTpl", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubFooterTpl", first: true, predicate: HubSelectFooterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngFooterTpl", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubNotFoundTpl", first: true, predicate: HubSelectNotFoundDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngNotFoundTpl", first: true, predicate: NgNotFoundTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubTypeToSearchTpl", first: true, predicate: HubSelectTypeToSearchDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngTypeToSearchTpl", first: true, predicate: NgTypeToSearchTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubLoadingTextTpl", first: true, predicate: HubSelectLoadingTextDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngLoadingTextTpl", first: true, predicate: NgLoadingTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubLoadingSpinnerTpl", first: true, predicate: HubSelectLoadingSpinnerDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngLoadingSpinnerTpl", first: true, predicate: NgLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubTagTpl", first: true, predicate: HubSelectTagDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngTagTpl", first: true, predicate: NgTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubClearButtonTpl", first: true, predicate: HubSelectClearButtonDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngClearButtonTpl", first: true, predicate: NgClearButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_legacySuffixTpl", first: true, predicate: HubSelectSuffixDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_genericAppendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-select\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if ((label() || required()) && !showsFloatingLabel()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if ((label() || required()) && !showsFloatingLabel()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t@switch (format()) {\n\t\t\t@case (_selectFormats.Dropdown) {\n\t\t\t\t<!-- [disabled] is claimed by the NgModel below (alias of its isDisabled input), not by\n\t\t\t\t ng-select \u2014 the engine's own `disabled` is a computed fed by setDisabledState.\n\t\t\t\t Dropping [ngModel] here would silently un-wire the disabled state.\n\n\t\t\t\t It is declared standalone because it is: the value this field holds travels\n\t\t\t\t through the ControlValueAccessor on the host, and this inner binding only\n\t\t\t\t drives the engine. Left undeclared, Angular saw an ngModel under a form it\n\t\t\t\t cannot reach across the component boundary and warned (NG01354) once per\n\t\t\t\t control \u2014 eight lines of console for an eight-field dialog. -->\n\t\t\t\t<!--\n\t\t\t\t\tThe control and its attached action are one field: the group is what makes\n\t\t\t\t\tthem share a line and a border, so a select with a button beside it does not\n\t\t\t\t\tread as two unrelated things that happen to be adjacent.\n\t\t\t\t-->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__group\"\n\t\t\t\t\t[class.hub-select__group--floating]=\"showsFloatingLabel()\"\n\t\t\t\t\t[class.hub-select__group--raised]=\"showsFloatingLabel() && isLabelRaised()\"\n\t\t\t\t\t[class.hub-select__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t[class.hub-select__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t>\n\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--prepend\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe floating label hangs off a zero-width anchor placed exactly where the\n\t\t\t\t\t\tcontrol starts, not off the group. A group can open with an addon or an\n\t\t\t\t\t\tattached button, and a label pinned to the group's own leading edge would\n\t\t\t\t\t\tprint on top of it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (showsFloatingLabel()) {\n\t\t\t\t\t\t<span class=\"hub-select__label-anchor\">\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-select__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t<ng-select\n\t\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t\t[searchFn]=\"$any(searchFn())\"\n\t\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t\t[clearSearchOnAdd]=\"$any(clearSearchOnAdd())\"\n\t\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[placeholder]=\"placeholder() ?? _ngSelectConfig.placeholder\"\n\t\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t\t[addTag]=\"$any(addTag())\"\n\t\t\t\t\t\t[addTagText]=\"addTagText()\"\n\t\t\t\t\t\t[minTermLength]=\"minTermLength()\"\n\t\t\t\t\t\t[typeahead]=\"$any(typeahead())\"\n\t\t\t\t\t\t[compareWith]=\"$any(compareWith())\"\n\t\t\t\t\t\t[inputAttrs]=\"a11yInputAttrs()\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t(change)=\"change.emit($event)\"\n\t\t\t\t\t\t(focus)=\"handleControlFocus($event)\"\n\t\t\t\t\t\t(blur)=\"handleControlBlur($event)\"\n\t\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-option-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-optgroup-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_labelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, clear, label }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_multiLabelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ items, clear }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_headerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-header-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_footerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-footer-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_notFoundTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_typeToSearchTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-typetosearch-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingTextTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingSpinnerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingspinner-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_tagTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_clearButtonTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-clearbutton-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</ng-select>\n\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--append\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe action goes last, after any append addon, mirroring where hub-input puts\n\t\t\t\t\t\tits password toggle: addons label the field, the action acts on it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--append\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case (_selectFormats.Buttons) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__buttons\"\n\t\t\t\t\t[class.hub-select__buttons--vertical]=\"vertical()\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-select__button\"\n\t\t\t\t\t\t\t[class.hub-select__button--selected]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ itemLabel(item) }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__options\"\n\t\t\t\t\t[class.hub-select__options--vertical]=\"vertical()\"\n\t\t\t\t\t[attr.role]=\"format() === _selectFormats.Radio ? 'radiogroup' : 'group'\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<label class=\"hub-select__option\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"hub-select__option-input\"\n\t\t\t\t\t\t\t\t[type]=\"format() === _selectFormats.Radio ? 'radio' : 'checkbox'\"\n\t\t\t\t\t\t\t\t[name]=\"id\"\n\t\t\t\t\t\t\t\t[checked]=\"isSelected(item)\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t\t(change)=\"toggleItem(item)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class=\"hub-select__option-label\">{{ itemLabel(item) }}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-select{display:block}hub-select.hidden-control{display:none!important}.hub-select__group{display:flex;align-items:stretch;min-width:0}.hub-select__group>.hub-select__control,.hub-select__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-select__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-select-padding-x, var(--hub-input-padding-x));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-select-border-width, var(--hub-input-border-width)) solid var(--hub-select-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));font-size:var(--hub-select-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-select__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-select__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-select-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-select__attached.hub-select__attached>*{padding-block:0;padding-inline:var(--hub-select-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-select-min-height, auto);border:var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-select__attached.hub-select__attached>*:hover,.hub-select__attached.hub-select__attached>*:focus-visible{z-index:1}.hub-select__attached.hub-select__attached>*:not(:hover):not(:focus-visible){border-color:var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color))}.hub-select__attached.hub-select__attached--prepend>*{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-select__attached.hub-select__attached--append>*{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached>hub-input,.hub-select__attached.hub-select__attached>hub-select,.hub-select__attached.hub-select__attached>hub-textarea,.hub-select__attached.hub-select__attached>hub-datepicker,.hub-select__attached.hub-select__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--prepend>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__attached.hub-select__attached--append>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--append>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached--append>hub-input:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-textarea:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-select__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-select__attached)>button,:where(.hub-select__attached)>a,:where(.hub-select__attached)>[role=button],:where(.hub-select__attached)>[role=link],:where(.hub-select__attached)>[tabindex]{background:var(--hub-select-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-select-group-action-color, var(--hub-input-group-action-color))}.hub-select__group--has-prepend .hub-select__control,.hub-select__group--has-prepend .hub-field__control,.hub-select__group--has-prepend .hub-select__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group--has-append .hub-select__control,.hub-select__group--has-append .hub-field__control,.hub-select__group--has-append .hub-select__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group>.hub-select__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-select__group>.hub-select__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.hub-select__control.ng-select{font-size:var(--hub-select-font-size);color:var(--hub-select-color)}.hub-select__control.ng-select .ng-select-container{min-height:var(--hub-select-min-height);align-items:center;color:var(--hub-select-color);background:var(--hub-select-bg);border:var(--hub-select-border-width) solid var(--hub-select-border-color);border-radius:var(--hub-select-border-radius);transition:var(--hub-form-transition)}.hub-select__control.ng-select .ng-value-container{align-items:center;padding-inline-start:var(--hub-select-padding-x)}.hub-select__control.ng-select .ng-placeholder{color:var(--hub-select-placeholder-color)}.hub-select__control.ng-select.ng-has-value .ng-placeholder{display:none}.hub-select__control.ng-select.ng-select-single .ng-select-container{height:var(--hub-select-min-height)}.hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);padding-inline-start:var(--hub-select-padding-x);padding-inline-end:3rem}.hub-select__control.ng-select .ng-value{color:var(--hub-select-color)}.hub-select__control.ng-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,.hub-select__control.ng-select.ng-select-opened .ng-select-container{border-color:var(--hub-select-focus-border-color);box-shadow:var(--hub-select-focus-box-shadow)}.hub-select__control.ng-select.ng-select-multiple .ng-value-container{padding-top:0;padding-inline-start:var(--hub-select-padding-x);gap:.25rem}.hub-select__control.ng-select.ng-select-multiple .ng-placeholder{top:50%;transform:translateY(-50%);padding-bottom:0}.hub-select__control.ng-select.ng-select-multiple .ng-value{display:inline-flex;align-items:center;margin:0 0 .25rem;background:var(--hub-select-value-bg);color:var(--hub-select-value-color);border-radius:var(--hub-select-value-border-radius)}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-label{padding:.1rem .4rem}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon{padding:.1rem .4rem;cursor:pointer}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon:hover{opacity:.7}.hub-select__control.ng-select.ng-select-multiple .ng-input{padding-block:0 .2rem;padding-inline:.25rem 0}.hub-select__control.ng-select .ng-arrow-wrapper{padding-inline:var(--hub-select-arrow-gap)}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-style:solid;border-width:var(--hub-select-arrow-size) var(--hub-select-arrow-size) calc(var(--hub-select-arrow-size) / 2);border-color:var(--hub-select-arrow-color) transparent transparent}.hub-select__control.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{border-width:0 var(--hub-select-arrow-size) var(--hub-select-arrow-size);border-color:transparent transparent var(--hub-select-arrow-color)}.hub-select__control.ng-select .ng-clear-wrapper{color:var(--hub-select-clear-color)}.hub-select__control.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--hub-select-clear-hover-color)}.hub-select__control.ng-select.ng-select-disabled .ng-select-container{opacity:var(--hub-form-disabled-opacity)}.hub-select__control.ng-select.hub-select__control--invalid .ng-select-container{border-color:var(--hub-form-invalid-border-color)}.hub-select__control.ng-select.hub-select__control--invalid.ng-select-focused .ng-select-container{box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color)}.hub-select__group--floating .hub-select__label-anchor{position:relative;z-index:1002;flex:0 0 0;width:0;align-self:stretch}.hub-select__group--floating .hub-select__label--floating{font-size:var(--hub-select-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-select-padding-x);margin:0;color:var(--hub-select-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);white-space:nowrap;pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-select__group--floating .hub-select__label--floating{transform-origin:100% 0}.hub-select__group--floating .hub-select__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-select__group--floating .hub-select__control.ng-select .ng-select-container,.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container{height:auto;min-height:calc(var(--hub-select-min-height) + var(--hub-field-floating-inset))}.hub-select__group--floating .hub-select__control.ng-select .ng-value-container{padding-block-start:var(--hub-field-floating-inset)}.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:calc(50% + var(--hub-field-floating-inset) / 2)}.hub-select__group--floating:not(.hub-select__group--raised) .ng-placeholder{visibility:hidden}.hub-select__group--floating.hub-select__group--raised .hub-select__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.ng-dropdown-panel{background:var(--hub-select-dropdown-bg);border:var(--hub-select-border-width) solid var(--hub-select-dropdown-border-color);border-radius:var(--hub-select-dropdown-border-radius);box-shadow:var(--hub-select-dropdown-box-shadow)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-option-color);background:transparent}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:var(--hub-select-option-marked-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:var(--hub-select-option-selected-color);background:var(--hub-select-option-selected-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{opacity:var(--hub-form-disabled-opacity)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{margin-inline-end:.25em}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-optgroup-color);font-weight:var(--hub-ref-font-weight-medium, 500)}.hub-select__control .ng-dropdown-panel,.ng-dropdown-panel.hub-select__control{z-index:var(--hub-select-dropdown-zindex, var(--hub-select-dropdown-z-index))}.hub-select__buttons{display:inline-flex;flex-wrap:wrap}.hub-select__buttons--vertical{flex-direction:column;align-items:stretch}.hub-select__button{position:relative;padding:var(--hub-select-button-padding-y) var(--hub-select-button-padding-x);color:var(--hub-select-button-color);background:var(--hub-select-button-bg);border:var(--hub-select-border-width) solid var(--hub-select-button-border-color);border-radius:0;font-size:var(--hub-select-font-size);cursor:pointer;transition:var(--hub-form-transition)}.hub-select__button:not(:first-child){margin-inline-start:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}.hub-select__button:hover,.hub-select__button:focus-visible,.hub-select__button--selected{z-index:1}.hub-select__button:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__button--selected{color:var(--hub-select-button-selected-color);background:var(--hub-select-button-selected-bg);border-color:var(--hub-select-button-selected-border-color)}.hub-select__button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__buttons--vertical .hub-select__button:not(:first-child){margin-inline-start:0;margin-top:calc(-1 * var(--hub-select-border-width))}.hub-select__buttons--vertical .hub-select__button:first-child{border-radius:var(--hub-select-border-radius) var(--hub-select-border-radius) 0 0}.hub-select__buttons--vertical .hub-select__button:last-child{border-radius:0 0 var(--hub-select-border-radius) var(--hub-select-border-radius)}.hub-select__buttons--vertical .hub-select__button:not(:first-child):not(:last-child){border-radius:0}.hub-select__options{display:flex;flex-wrap:wrap;gap:var(--hub-select-button-gap) var(--hub-ref-space-4, 1.5rem)}.hub-select__options--vertical{flex-direction:column}.hub-select__option{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-select__option-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;accent-color:var(--hub-check-input-checked-bg);cursor:pointer}.hub-select__option-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__option-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__option-label{color:var(--hub-select-color);font-size:var(--hub-select-font-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: NgTagTemplateDirective, selector: "[ng-tag-tmp]" }, { kind: "directive", type: NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: HubTooltipDirective, selector: "[hubTooltip]", inputs: ["hubTooltip", "hubTooltipPlacement", "hubTooltipDelay", "hubTooltipOffset"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7237
7279
|
}
|
|
7238
7280
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectComponent, decorators: [{
|
|
7239
7281
|
type: Component,
|
|
@@ -7258,8 +7300,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
7258
7300
|
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
7259
7301
|
'[class]': 'classlist()',
|
|
7260
7302
|
'[class.hub-select-host]': 'true'
|
|
7261
|
-
}, template: "<div\n\tclass=\"hub-field hub-select\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if ((label() || required()) && !showsFloatingLabel()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if ((label() || required()) && !showsFloatingLabel()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t@switch (format()) {\n\t\t\t@case (_selectFormats.Dropdown) {\n\t\t\t\t<!-- [disabled] is claimed by the NgModel below (alias of its isDisabled input), not by\n\t\t\t\t ng-select \u2014 the engine's own `disabled` is a computed fed by setDisabledState.\n\t\t\t\t Dropping [ngModel] here would silently un-wire the disabled state. -->\n\t\t\t\t<!--\n\t\t\t\t\tThe control and its attached action are one field: the group is what makes\n\t\t\t\t\tthem share a line and a border, so a select with a button beside it does not\n\t\t\t\t\tread as two unrelated things that happen to be adjacent.\n\t\t\t\t-->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__group\"\n\t\t\t\t\t[class.hub-select__group--floating]=\"showsFloatingLabel()\"\n\t\t\t\t\t[class.hub-select__group--raised]=\"showsFloatingLabel() && isLabelRaised()\"\n\t\t\t\t\t[class.hub-select__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t[class.hub-select__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t>\n\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--prepend\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe floating label hangs off a zero-width anchor placed exactly where the\n\t\t\t\t\t\tcontrol starts, not off the group. A group can open with an addon or an\n\t\t\t\t\t\tattached button, and a label pinned to the group's own leading edge would\n\t\t\t\t\t\tprint on top of it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (showsFloatingLabel()) {\n\t\t\t\t\t\t<span class=\"hub-select__label-anchor\">\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-select__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t<ng-select\n\t\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t\t[searchFn]=\"$any(searchFn())\"\n\t\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[placeholder]=\"placeholder() ?? _ngSelectConfig.placeholder\"\n\t\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t\t[addTag]=\"$any(addTag())\"\n\t\t\t\t\t\t[addTagText]=\"addTagText()\"\n\t\t\t\t\t\t[minTermLength]=\"minTermLength()\"\n\t\t\t\t\t\t[typeahead]=\"$any(typeahead())\"\n\t\t\t\t\t\t[compareWith]=\"$any(compareWith())\"\n\t\t\t\t\t\t[inputAttrs]=\"a11yInputAttrs()\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t(focus)=\"handleControlFocus($event)\"\n\t\t\t\t\t\t(blur)=\"handleControlBlur($event)\"\n\t\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-option-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-optgroup-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_labelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, clear, label }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_multiLabelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ items, clear }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_headerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-header-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_footerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-footer-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_notFoundTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_typeToSearchTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-typetosearch-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingTextTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingSpinnerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingspinner-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_tagTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_clearButtonTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-clearbutton-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</ng-select>\n\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--append\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe action goes last, after any append addon, mirroring where hub-input puts\n\t\t\t\t\t\tits password toggle: addons label the field, the action acts on it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--append\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case (_selectFormats.Buttons) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__buttons\"\n\t\t\t\t\t[class.hub-select__buttons--vertical]=\"vertical()\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-select__button\"\n\t\t\t\t\t\t\t[class.hub-select__button--selected]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ itemLabel(item) }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__options\"\n\t\t\t\t\t[class.hub-select__options--vertical]=\"vertical()\"\n\t\t\t\t\t[attr.role]=\"format() === _selectFormats.Radio ? 'radiogroup' : 'group'\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<label class=\"hub-select__option\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"hub-select__option-input\"\n\t\t\t\t\t\t\t\t[type]=\"format() === _selectFormats.Radio ? 'radio' : 'checkbox'\"\n\t\t\t\t\t\t\t\t[name]=\"id\"\n\t\t\t\t\t\t\t\t[checked]=\"isSelected(item)\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t\t(change)=\"toggleItem(item)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class=\"hub-select__option-label\">{{ itemLabel(item) }}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-select{display:block}hub-select.hidden-control{display:none!important}.hub-select__group{display:flex;align-items:stretch;min-width:0}.hub-select__group>.hub-select__control,.hub-select__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-select__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-select-padding-x, var(--hub-input-padding-x));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-select-border-width, var(--hub-input-border-width)) solid var(--hub-select-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));font-size:var(--hub-select-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-select__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-select__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-select-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-select__attached.hub-select__attached>*{padding-block:0;padding-inline:var(--hub-select-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-select-min-height, auto);border:var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-select__attached.hub-select__attached>*:hover,.hub-select__attached.hub-select__attached>*:focus-visible{z-index:1}.hub-select__attached.hub-select__attached>*:not(:hover):not(:focus-visible){border-color:var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color))}.hub-select__attached.hub-select__attached--prepend>*{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-select__attached.hub-select__attached--append>*{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached>hub-input,.hub-select__attached.hub-select__attached>hub-select,.hub-select__attached.hub-select__attached>hub-textarea,.hub-select__attached.hub-select__attached>hub-datepicker,.hub-select__attached.hub-select__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--prepend>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__attached.hub-select__attached--append>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--append>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached--append>hub-input:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-textarea:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-select__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-select__attached)>button,:where(.hub-select__attached)>a,:where(.hub-select__attached)>[role=button],:where(.hub-select__attached)>[role=link],:where(.hub-select__attached)>[tabindex]{background:var(--hub-select-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-select-group-action-color, var(--hub-input-group-action-color))}.hub-select__group--has-prepend .hub-select__control,.hub-select__group--has-prepend .hub-field__control,.hub-select__group--has-prepend .hub-select__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group--has-append .hub-select__control,.hub-select__group--has-append .hub-field__control,.hub-select__group--has-append .hub-select__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group>.hub-select__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-select__group>.hub-select__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.hub-select__control.ng-select{font-size:var(--hub-select-font-size);color:var(--hub-select-color)}.hub-select__control.ng-select .ng-select-container{min-height:var(--hub-select-min-height);align-items:center;color:var(--hub-select-color);background:var(--hub-select-bg);border:var(--hub-select-border-width) solid var(--hub-select-border-color);border-radius:var(--hub-select-border-radius);transition:var(--hub-form-transition)}.hub-select__control.ng-select .ng-value-container{align-items:center;padding-inline-start:var(--hub-select-padding-x)}.hub-select__control.ng-select .ng-placeholder{color:var(--hub-select-placeholder-color)}.hub-select__control.ng-select.ng-has-value .ng-placeholder{display:none}.hub-select__control.ng-select.ng-select-single .ng-select-container{height:var(--hub-select-min-height)}.hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);padding-inline-start:var(--hub-select-padding-x);padding-inline-end:3rem}.hub-select__control.ng-select .ng-value{color:var(--hub-select-color)}.hub-select__control.ng-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,.hub-select__control.ng-select.ng-select-opened .ng-select-container{border-color:var(--hub-select-focus-border-color);box-shadow:var(--hub-select-focus-box-shadow)}.hub-select__control.ng-select.ng-select-multiple .ng-value-container{padding-top:0;padding-inline-start:var(--hub-select-padding-x);gap:.25rem}.hub-select__control.ng-select.ng-select-multiple .ng-placeholder{top:50%;transform:translateY(-50%);padding-bottom:0}.hub-select__control.ng-select.ng-select-multiple .ng-value{display:inline-flex;align-items:center;margin:0 0 .25rem;background:var(--hub-select-value-bg);color:var(--hub-select-value-color);border-radius:var(--hub-select-value-border-radius)}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-label{padding:.1rem .4rem}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon{padding:.1rem .4rem;cursor:pointer}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon:hover{opacity:.7}.hub-select__control.ng-select.ng-select-multiple .ng-input{padding-block:0 .2rem;padding-inline:.25rem 0}.hub-select__control.ng-select .ng-arrow-wrapper{padding-inline:var(--hub-select-arrow-gap)}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-style:solid;border-width:var(--hub-select-arrow-size) var(--hub-select-arrow-size) calc(var(--hub-select-arrow-size) / 2);border-color:var(--hub-select-arrow-color) transparent transparent}.hub-select__control.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{border-width:0 var(--hub-select-arrow-size) var(--hub-select-arrow-size);border-color:transparent transparent var(--hub-select-arrow-color)}.hub-select__control.ng-select .ng-clear-wrapper{color:var(--hub-select-clear-color)}.hub-select__control.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--hub-select-clear-hover-color)}.hub-select__control.ng-select.ng-select-disabled .ng-select-container{opacity:var(--hub-form-disabled-opacity)}.hub-select__control.ng-select.hub-select__control--invalid .ng-select-container{border-color:var(--hub-form-invalid-border-color)}.hub-select__control.ng-select.hub-select__control--invalid.ng-select-focused .ng-select-container{box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color)}.hub-select__group--floating .hub-select__label-anchor{position:relative;z-index:1002;flex:0 0 0;width:0;align-self:stretch}.hub-select__group--floating .hub-select__label--floating{font-size:var(--hub-select-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-select-padding-x);margin:0;color:var(--hub-select-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);white-space:nowrap;pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-select__group--floating .hub-select__label--floating{transform-origin:100% 0}.hub-select__group--floating .hub-select__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-select__group--floating .hub-select__control.ng-select .ng-select-container,.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container{height:auto;min-height:calc(var(--hub-select-min-height) + var(--hub-field-floating-inset))}.hub-select__group--floating .hub-select__control.ng-select .ng-value-container{padding-block-start:var(--hub-field-floating-inset)}.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:calc(50% + var(--hub-field-floating-inset) / 2)}.hub-select__group--floating:not(.hub-select__group--raised) .ng-placeholder{visibility:hidden}.hub-select__group--floating.hub-select__group--raised .hub-select__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.ng-dropdown-panel{background:var(--hub-select-dropdown-bg);border:var(--hub-select-border-width) solid var(--hub-select-dropdown-border-color);border-radius:var(--hub-select-dropdown-border-radius);box-shadow:var(--hub-select-dropdown-box-shadow)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-option-color);background:transparent}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:var(--hub-select-option-marked-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:var(--hub-select-option-selected-color);background:var(--hub-select-option-selected-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{opacity:var(--hub-form-disabled-opacity)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-optgroup-color);font-weight:var(--hub-ref-font-weight-medium, 500)}.hub-select__control .ng-dropdown-panel,.ng-dropdown-panel.hub-select__control{z-index:var(--hub-select-dropdown-zindex, var(--hub-select-dropdown-z-index))}.hub-select__buttons{display:inline-flex;flex-wrap:wrap}.hub-select__buttons--vertical{flex-direction:column;align-items:stretch}.hub-select__button{position:relative;padding:var(--hub-select-button-padding-y) var(--hub-select-button-padding-x);color:var(--hub-select-button-color);background:var(--hub-select-button-bg);border:var(--hub-select-border-width) solid var(--hub-select-button-border-color);border-radius:0;font-size:var(--hub-select-font-size);cursor:pointer;transition:var(--hub-form-transition)}.hub-select__button:not(:first-child){margin-inline-start:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}.hub-select__button:hover,.hub-select__button:focus-visible,.hub-select__button--selected{z-index:1}.hub-select__button:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__button--selected{color:var(--hub-select-button-selected-color);background:var(--hub-select-button-selected-bg);border-color:var(--hub-select-button-selected-border-color)}.hub-select__button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__buttons--vertical .hub-select__button:not(:first-child){margin-inline-start:0;margin-top:calc(-1 * var(--hub-select-border-width))}.hub-select__buttons--vertical .hub-select__button:first-child{border-radius:var(--hub-select-border-radius) var(--hub-select-border-radius) 0 0}.hub-select__buttons--vertical .hub-select__button:last-child{border-radius:0 0 var(--hub-select-border-radius) var(--hub-select-border-radius)}.hub-select__buttons--vertical .hub-select__button:not(:first-child):not(:last-child){border-radius:0}.hub-select__options{display:flex;flex-wrap:wrap;gap:var(--hub-select-button-gap) var(--hub-ref-space-4, 1.5rem)}.hub-select__options--vertical{flex-direction:column}.hub-select__option{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-select__option-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;accent-color:var(--hub-check-input-checked-bg);cursor:pointer}.hub-select__option-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__option-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__option-label{color:var(--hub-select-color);font-size:var(--hub-select-font-size)}\n"] }]
|
|
7262
|
-
}], propDecorators: { _hubOptionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectOptionDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngOptionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubOptgroupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectOptgroupDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngOptgroupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptgroupTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectLabelDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubMultiLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectMultiLabelDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngMultiLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgMultiLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubHeaderTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectHeaderDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngHeaderTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubFooterTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectFooterDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngFooterTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubNotFoundTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectNotFoundDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngNotFoundTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgNotFoundTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubTypeToSearchTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectTypeToSearchDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngTypeToSearchTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgTypeToSearchTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubLoadingTextTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectLoadingTextDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngLoadingTextTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLoadingTextTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubLoadingSpinnerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectLoadingSpinnerDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngLoadingSpinnerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLoadingSpinnerTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubTagTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectTagDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngTagTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgTagTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubClearButtonTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectClearButtonDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngClearButtonTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgClearButtonTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _legacySuffixTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectSuffixDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _prependTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubPrependDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _genericAppendTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubAppendDirective), { ...{ read: TemplateRef }, isSignal: true }] }], prepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepend", required: false }] }], append: [{ type: i0.Input, args: [{ isSignal: true, alias: "append", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], fixedPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedPlaceholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], addTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTag", required: false }] }], addTagText: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTagText", required: false }] }], minTermLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTermLength", required: false }] }], typeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeahead", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onOpen: [{ type: i0.Output, args: ["onOpen"] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onAdd: [{ type: i0.Output, args: ["onAdd"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], scroll: [{ type: i0.Output, args: ["scroll"] }], scrollToEnd: [{ type: i0.Output, args: ["scrollToEnd"] }] } });
|
|
7303
|
+
}, template: "<div\n\tclass=\"hub-field hub-select\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if ((label() || required()) && !showsFloatingLabel()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if ((label() || required()) && !showsFloatingLabel()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t@switch (format()) {\n\t\t\t@case (_selectFormats.Dropdown) {\n\t\t\t\t<!-- [disabled] is claimed by the NgModel below (alias of its isDisabled input), not by\n\t\t\t\t ng-select \u2014 the engine's own `disabled` is a computed fed by setDisabledState.\n\t\t\t\t Dropping [ngModel] here would silently un-wire the disabled state.\n\n\t\t\t\t It is declared standalone because it is: the value this field holds travels\n\t\t\t\t through the ControlValueAccessor on the host, and this inner binding only\n\t\t\t\t drives the engine. Left undeclared, Angular saw an ngModel under a form it\n\t\t\t\t cannot reach across the component boundary and warned (NG01354) once per\n\t\t\t\t control \u2014 eight lines of console for an eight-field dialog. -->\n\t\t\t\t<!--\n\t\t\t\t\tThe control and its attached action are one field: the group is what makes\n\t\t\t\t\tthem share a line and a border, so a select with a button beside it does not\n\t\t\t\t\tread as two unrelated things that happen to be adjacent.\n\t\t\t\t-->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__group\"\n\t\t\t\t\t[class.hub-select__group--floating]=\"showsFloatingLabel()\"\n\t\t\t\t\t[class.hub-select__group--raised]=\"showsFloatingLabel() && isLabelRaised()\"\n\t\t\t\t\t[class.hub-select__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t[class.hub-select__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t>\n\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--prepend\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe floating label hangs off a zero-width anchor placed exactly where the\n\t\t\t\t\t\tcontrol starts, not off the group. A group can open with an addon or an\n\t\t\t\t\t\tattached button, and a label pinned to the group's own leading edge would\n\t\t\t\t\t\tprint on top of it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (showsFloatingLabel()) {\n\t\t\t\t\t\t<span class=\"hub-select__label-anchor\">\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-select__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t<ng-select\n\t\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t\t[searchFn]=\"$any(searchFn())\"\n\t\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t\t[clearSearchOnAdd]=\"$any(clearSearchOnAdd())\"\n\t\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[placeholder]=\"placeholder() ?? _ngSelectConfig.placeholder\"\n\t\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t\t[addTag]=\"$any(addTag())\"\n\t\t\t\t\t\t[addTagText]=\"addTagText()\"\n\t\t\t\t\t\t[minTermLength]=\"minTermLength()\"\n\t\t\t\t\t\t[typeahead]=\"$any(typeahead())\"\n\t\t\t\t\t\t[compareWith]=\"$any(compareWith())\"\n\t\t\t\t\t\t[inputAttrs]=\"a11yInputAttrs()\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t(change)=\"change.emit($event)\"\n\t\t\t\t\t\t(focus)=\"handleControlFocus($event)\"\n\t\t\t\t\t\t(blur)=\"handleControlBlur($event)\"\n\t\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-option-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-optgroup-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_labelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, clear, label }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_multiLabelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ items, clear }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_headerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-header-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_footerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-footer-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_notFoundTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_typeToSearchTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-typetosearch-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingTextTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingSpinnerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingspinner-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_tagTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_clearButtonTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-clearbutton-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</ng-select>\n\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--append\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe action goes last, after any append addon, mirroring where hub-input puts\n\t\t\t\t\t\tits password toggle: addons label the field, the action acts on it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--append\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case (_selectFormats.Buttons) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__buttons\"\n\t\t\t\t\t[class.hub-select__buttons--vertical]=\"vertical()\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-select__button\"\n\t\t\t\t\t\t\t[class.hub-select__button--selected]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ itemLabel(item) }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__options\"\n\t\t\t\t\t[class.hub-select__options--vertical]=\"vertical()\"\n\t\t\t\t\t[attr.role]=\"format() === _selectFormats.Radio ? 'radiogroup' : 'group'\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<label class=\"hub-select__option\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"hub-select__option-input\"\n\t\t\t\t\t\t\t\t[type]=\"format() === _selectFormats.Radio ? 'radio' : 'checkbox'\"\n\t\t\t\t\t\t\t\t[name]=\"id\"\n\t\t\t\t\t\t\t\t[checked]=\"isSelected(item)\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t\t(change)=\"toggleItem(item)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class=\"hub-select__option-label\">{{ itemLabel(item) }}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-select{display:block}hub-select.hidden-control{display:none!important}.hub-select__group{display:flex;align-items:stretch;min-width:0}.hub-select__group>.hub-select__control,.hub-select__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-select__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-select-padding-x, var(--hub-input-padding-x));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-select-border-width, var(--hub-input-border-width)) solid var(--hub-select-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));font-size:var(--hub-select-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-select__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-select__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-select-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-select__attached.hub-select__attached>*{padding-block:0;padding-inline:var(--hub-select-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-select-min-height, auto);border:var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-select__attached.hub-select__attached>*:hover,.hub-select__attached.hub-select__attached>*:focus-visible{z-index:1}.hub-select__attached.hub-select__attached>*:not(:hover):not(:focus-visible){border-color:var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color))}.hub-select__attached.hub-select__attached--prepend>*{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-select__attached.hub-select__attached--append>*{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached>hub-input,.hub-select__attached.hub-select__attached>hub-select,.hub-select__attached.hub-select__attached>hub-textarea,.hub-select__attached.hub-select__attached>hub-datepicker,.hub-select__attached.hub-select__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--prepend>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__attached.hub-select__attached--append>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--append>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached--append>hub-input:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-textarea:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-select__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-select__attached)>button,:where(.hub-select__attached)>a,:where(.hub-select__attached)>[role=button],:where(.hub-select__attached)>[role=link],:where(.hub-select__attached)>[tabindex]{background:var(--hub-select-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-select-group-action-color, var(--hub-input-group-action-color))}.hub-select__group--has-prepend .hub-select__control,.hub-select__group--has-prepend .hub-field__control,.hub-select__group--has-prepend .hub-select__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group--has-append .hub-select__control,.hub-select__group--has-append .hub-field__control,.hub-select__group--has-append .hub-select__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group>.hub-select__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-select__group>.hub-select__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.hub-select__control.ng-select{font-size:var(--hub-select-font-size);color:var(--hub-select-color)}.hub-select__control.ng-select .ng-select-container{min-height:var(--hub-select-min-height);align-items:center;color:var(--hub-select-color);background:var(--hub-select-bg);border:var(--hub-select-border-width) solid var(--hub-select-border-color);border-radius:var(--hub-select-border-radius);transition:var(--hub-form-transition)}.hub-select__control.ng-select .ng-value-container{align-items:center;padding-inline-start:var(--hub-select-padding-x)}.hub-select__control.ng-select .ng-placeholder{color:var(--hub-select-placeholder-color)}.hub-select__control.ng-select.ng-has-value .ng-placeholder{display:none}.hub-select__control.ng-select.ng-select-single .ng-select-container{height:var(--hub-select-min-height)}.hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);padding-inline-start:var(--hub-select-padding-x);padding-inline-end:3rem}.hub-select__control.ng-select .ng-value{color:var(--hub-select-color)}.hub-select__control.ng-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,.hub-select__control.ng-select.ng-select-opened .ng-select-container{border-color:var(--hub-select-focus-border-color);box-shadow:var(--hub-select-focus-box-shadow)}.hub-select__control.ng-select.ng-select-multiple .ng-value-container{padding-top:0;padding-inline-start:var(--hub-select-padding-x);gap:.25rem}.hub-select__control.ng-select.ng-select-multiple .ng-placeholder{top:50%;transform:translateY(-50%);padding-bottom:0}.hub-select__control.ng-select.ng-select-multiple .ng-value{display:inline-flex;align-items:center;margin:0 0 .25rem;background:var(--hub-select-value-bg);color:var(--hub-select-value-color);border-radius:var(--hub-select-value-border-radius)}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-label{padding:.1rem .4rem}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon{padding:.1rem .4rem;cursor:pointer}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon:hover{opacity:.7}.hub-select__control.ng-select.ng-select-multiple .ng-input{padding-block:0 .2rem;padding-inline:.25rem 0}.hub-select__control.ng-select .ng-arrow-wrapper{padding-inline:var(--hub-select-arrow-gap)}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-style:solid;border-width:var(--hub-select-arrow-size) var(--hub-select-arrow-size) calc(var(--hub-select-arrow-size) / 2);border-color:var(--hub-select-arrow-color) transparent transparent}.hub-select__control.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{border-width:0 var(--hub-select-arrow-size) var(--hub-select-arrow-size);border-color:transparent transparent var(--hub-select-arrow-color)}.hub-select__control.ng-select .ng-clear-wrapper{color:var(--hub-select-clear-color)}.hub-select__control.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--hub-select-clear-hover-color)}.hub-select__control.ng-select.ng-select-disabled .ng-select-container{opacity:var(--hub-form-disabled-opacity)}.hub-select__control.ng-select.hub-select__control--invalid .ng-select-container{border-color:var(--hub-form-invalid-border-color)}.hub-select__control.ng-select.hub-select__control--invalid.ng-select-focused .ng-select-container{box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color)}.hub-select__group--floating .hub-select__label-anchor{position:relative;z-index:1002;flex:0 0 0;width:0;align-self:stretch}.hub-select__group--floating .hub-select__label--floating{font-size:var(--hub-select-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-select-padding-x);margin:0;color:var(--hub-select-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);white-space:nowrap;pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-select__group--floating .hub-select__label--floating{transform-origin:100% 0}.hub-select__group--floating .hub-select__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-select__group--floating .hub-select__control.ng-select .ng-select-container,.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container{height:auto;min-height:calc(var(--hub-select-min-height) + var(--hub-field-floating-inset))}.hub-select__group--floating .hub-select__control.ng-select .ng-value-container{padding-block-start:var(--hub-field-floating-inset)}.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:calc(50% + var(--hub-field-floating-inset) / 2)}.hub-select__group--floating:not(.hub-select__group--raised) .ng-placeholder{visibility:hidden}.hub-select__group--floating.hub-select__group--raised .hub-select__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.ng-dropdown-panel{background:var(--hub-select-dropdown-bg);border:var(--hub-select-border-width) solid var(--hub-select-dropdown-border-color);border-radius:var(--hub-select-dropdown-border-radius);box-shadow:var(--hub-select-dropdown-box-shadow)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-option-color);background:transparent}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:var(--hub-select-option-marked-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:var(--hub-select-option-selected-color);background:var(--hub-select-option-selected-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{opacity:var(--hub-form-disabled-opacity)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{margin-inline-end:.25em}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-optgroup-color);font-weight:var(--hub-ref-font-weight-medium, 500)}.hub-select__control .ng-dropdown-panel,.ng-dropdown-panel.hub-select__control{z-index:var(--hub-select-dropdown-zindex, var(--hub-select-dropdown-z-index))}.hub-select__buttons{display:inline-flex;flex-wrap:wrap}.hub-select__buttons--vertical{flex-direction:column;align-items:stretch}.hub-select__button{position:relative;padding:var(--hub-select-button-padding-y) var(--hub-select-button-padding-x);color:var(--hub-select-button-color);background:var(--hub-select-button-bg);border:var(--hub-select-border-width) solid var(--hub-select-button-border-color);border-radius:0;font-size:var(--hub-select-font-size);cursor:pointer;transition:var(--hub-form-transition)}.hub-select__button:not(:first-child){margin-inline-start:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}.hub-select__button:hover,.hub-select__button:focus-visible,.hub-select__button--selected{z-index:1}.hub-select__button:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__button--selected{color:var(--hub-select-button-selected-color);background:var(--hub-select-button-selected-bg);border-color:var(--hub-select-button-selected-border-color)}.hub-select__button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__buttons--vertical .hub-select__button:not(:first-child){margin-inline-start:0;margin-top:calc(-1 * var(--hub-select-border-width))}.hub-select__buttons--vertical .hub-select__button:first-child{border-radius:var(--hub-select-border-radius) var(--hub-select-border-radius) 0 0}.hub-select__buttons--vertical .hub-select__button:last-child{border-radius:0 0 var(--hub-select-border-radius) var(--hub-select-border-radius)}.hub-select__buttons--vertical .hub-select__button:not(:first-child):not(:last-child){border-radius:0}.hub-select__options{display:flex;flex-wrap:wrap;gap:var(--hub-select-button-gap) var(--hub-ref-space-4, 1.5rem)}.hub-select__options--vertical{flex-direction:column}.hub-select__option{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-select__option-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;accent-color:var(--hub-check-input-checked-bg);cursor:pointer}.hub-select__option-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__option-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__option-label{color:var(--hub-select-color);font-size:var(--hub-select-font-size)}\n"] }]
|
|
7304
|
+
}], propDecorators: { _hubOptionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectOptionDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngOptionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubOptgroupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectOptgroupDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngOptgroupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptgroupTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectLabelDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubMultiLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectMultiLabelDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngMultiLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgMultiLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubHeaderTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectHeaderDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngHeaderTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubFooterTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectFooterDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngFooterTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubNotFoundTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectNotFoundDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngNotFoundTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgNotFoundTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubTypeToSearchTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectTypeToSearchDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngTypeToSearchTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgTypeToSearchTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubLoadingTextTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectLoadingTextDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngLoadingTextTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLoadingTextTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubLoadingSpinnerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectLoadingSpinnerDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngLoadingSpinnerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLoadingSpinnerTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubTagTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectTagDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngTagTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgTagTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubClearButtonTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectClearButtonDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngClearButtonTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgClearButtonTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _legacySuffixTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectSuffixDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _prependTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubPrependDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _genericAppendTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubAppendDirective), { ...{ read: TemplateRef }, isSignal: true }] }], prepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepend", required: false }] }], append: [{ type: i0.Input, args: [{ isSignal: true, alias: "append", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], clearSearchOnAdd: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnAdd", required: false }] }], fixedPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedPlaceholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], addTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTag", required: false }] }], addTagText: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTagText", required: false }] }], minTermLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTermLength", required: false }] }], typeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeahead", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], change: [{ type: i0.Output, args: ["change"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onOpen: [{ type: i0.Output, args: ["onOpen"] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onAdd: [{ type: i0.Output, args: ["onAdd"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], scroll: [{ type: i0.Output, args: ["scroll"] }], scrollToEnd: [{ type: i0.Output, args: ["scrollToEnd"] }] } });
|
|
7263
7305
|
|
|
7264
7306
|
/**
|
|
7265
7307
|
* Minimal native-`Date` helpers for the calendar. Keeps the library free of a date dependency.
|
|
@@ -10009,6 +10051,22 @@ class HubFileInputComponent extends HubFieldControl {
|
|
|
10009
10051
|
*/
|
|
10010
10052
|
preview = input('list', /* @ts-ignore */
|
|
10011
10053
|
...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
|
|
10054
|
+
/**
|
|
10055
|
+
* How much room the empty field takes: the tall dropzone, or one row.
|
|
10056
|
+
*
|
|
10057
|
+
* `compact` is for the field that is not the point of the screen — a logo among four text
|
|
10058
|
+
* inputs, where the panel and its glyph took half a dialog for one small file. It drops the
|
|
10059
|
+
* glyph and the drag copy and keeps the browse control and the constraints; the drop still
|
|
10060
|
+
* works, so the copy is what goes, not the behaviour. An inline grid's add tile is unaffected:
|
|
10061
|
+
* it is already a tile and has no panel to shrink.
|
|
10062
|
+
*
|
|
10063
|
+
* It is the answer for a field that only picks. A field that has to SHOW what it holds gets
|
|
10064
|
+
* its height from `preview="inline"` instead, which needs room for the picture and is sized
|
|
10065
|
+
* through its own `--hub-file-input-inline-*` tokens — the avatar in the inline example is the
|
|
10066
|
+
* compact version of that shape. Asking for both leaves the inline geometry in charge.
|
|
10067
|
+
*/
|
|
10068
|
+
appearance = input('dropzone', /* @ts-ignore */
|
|
10069
|
+
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
10012
10070
|
/**
|
|
10013
10071
|
* The files the record already has, shown by `preview="inline"` among the picked ones: a URL,
|
|
10014
10072
|
* whose name and type are read from the URL itself, a {@link HubCurrentFile} when the URL does not
|
|
@@ -10130,6 +10188,9 @@ class HubFileInputComponent extends HubFieldControl {
|
|
|
10130
10188
|
/** Whether the user may remove what the field holds. */
|
|
10131
10189
|
_canRemove = computed(() => this._canChange() && this.clearable(), /* @ts-ignore */
|
|
10132
10190
|
...(ngDevMode ? [{ debugName: "_canRemove" }] : /* istanbul ignore next */ []));
|
|
10191
|
+
/** Whether the empty field is drawn as one row rather than as a panel. */
|
|
10192
|
+
_isCompact = computed(() => this.appearance() === 'compact', /* @ts-ignore */
|
|
10193
|
+
...(ngDevMode ? [{ debugName: "_isCompact" }] : /* istanbul ignore next */ []));
|
|
10133
10194
|
/** Whether the files sit inside the field (`preview="inline"`), single or multiple. */
|
|
10134
10195
|
_isInline = computed(() => this.preview() === 'inline', /* @ts-ignore */
|
|
10135
10196
|
...(ngDevMode ? [{ debugName: "_isInline" }] : /* istanbul ignore next */ []));
|
|
@@ -11007,7 +11068,7 @@ class HubFileInputComponent extends HubFieldControl {
|
|
|
11007
11068
|
this.announcement.set(this.announcement() === message ? `${message}\u200b` : message);
|
|
11008
11069
|
}
|
|
11009
11070
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubFileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
11010
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubFileInputComponent, isStandalone: true, selector: "hub-file-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxTotalSize: { classPropertyName: "maxTotalSize", publicName: "maxTotalSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, dragDrop: { classPropertyName: "dragDrop", publicName: "dragDrop", isSignal: true, isRequired: false, transformFunction: null }, paste: { classPropertyName: "paste", publicName: "paste", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, currentFile: { classPropertyName: "currentFile", publicName: "currentFile", isSignal: true, isRequired: false, transformFunction: null }, imagePreview: { classPropertyName: "imagePreview", publicName: "imagePreview", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, capture: { classPropertyName: "capture", publicName: "capture", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, dropText: { classPropertyName: "dropText", publicName: "dropText", isSignal: true, isRequired: false, transformFunction: null }, dropSubtext: { classPropertyName: "dropSubtext", publicName: "dropSubtext", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", rejected: "rejected", fileRemoved: "fileRemoved", currentFileRemoved: "currentFileRemoved", uploadStateChange: "uploadStateChange" }, host: { listeners: { "paste": "handlePaste($event)" }, properties: { "class": "classlist()", "class.hub-file-input-host": "true" } }, queries: [{ propertyName: "iconTpt", first: true, predicate: HubFileIconDirective, descendants: true, isSignal: true }, { propertyName: "previewTpt", first: true, predicate: HubFilePreviewDirective, descendants: true, isSignal: true }, { propertyName: "noticeTpt", first: true, predicate: HubFileDropzoneNoticeDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }, { propertyName: "viewer", first: true, predicate: ["viewer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-file-input\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if (label() || required()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if (label() || required()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div\n\t\tclass=\"hub-field__body\"\n\t\t[class.hub-file-input__body--inline]=\"_inlineSingle()\"\n\t\t[class.hub-file-input__body--inline-multiple]=\"_inlineMultiple()\"\n\t>\n\t\t<!-- The frame listens for the drag, so a drop lands anywhere on the field, tiles included. -->\n\t\t<div\n\t\t\tclass=\"hub-file-input__frame\"\n\t\t\t[class.hub-file-input__frame--dragover]=\"isDragging()\"\n\t\t\t(dragenter)=\"handleDragEnter($event)\"\n\t\t\t(dragover)=\"handleDragOver($event)\"\n\t\t\t(dragleave)=\"handleDragLeave($event)\"\n\t\t\t(drop)=\"handleDrop($event)\"\n\t\t>\n\t\t\t@if (_dropzone() === 'zone') {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"dropzoneTpl\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n\t\t\t}\n\n\t\t\t@if (_tiles().length > 0) {\n\t\t\t\t<ul class=\"hub-file-input__tiles\" [class.hub-file-input__tiles--single]=\"_inlineSingle()\">\n\t\t\t\t\t@for (tile of _tiles(); track tile.key; let index = $index) {\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tclass=\"hub-file-input__tile\"\n\t\t\t\t\t\t\t[class.hub-file-input__tile--changeable]=\"_canChange() && tile.item?.status !== 'uploading'\"\n\t\t\t\t\t\t\t[attr.data-file-kind]=\"tile.kind\"\n\t\t\t\t\t\t\t[attr.data-status]=\"tile.item?.status ?? null\"\n\t\t\t\t\t\t\t[attr.title]=\"tile.name\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<!--\n\t\t\t\t\t\t\t\tActivating a tile opens its file: a stored one is a link to its URL, in a new tab;\n\t\t\t\t\t\t\t\ta picked image opens enlarged; any other picked file opens in a new tab. Replacing\n\t\t\t\t\t\t\t\thas its own button, the pill, so one gesture never means two things.\n\t\t\t\t\t\t\t-->\n\t\t\t\t\t\t\t@if (tile.current) {\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__tile-open\"\n\t\t\t\t\t\t\t\t\t[href]=\"tile.current.url\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().open(tile.name)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleTileKeydown($event, tile, index)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tileBodyTpl\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: tile }\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__tile-open\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().open(tile.name)\"\n\t\t\t\t\t\t\t\t\t(click)=\"openTile(tile, $event)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleTileKeydown($event, tile, index)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tileBodyTpl\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: tile }\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@if (_canChange() && tile.item?.status !== 'uploading') {\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__tile-veil\" aria-hidden=\"true\"></span>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__tile-replace\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().replaceFile(tile.name)\"\n\t\t\t\t\t\t\t\t\t(click)=\"replaceTile(tile)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{{ labels().replace }}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@if (tile.item?.status === 'uploading') {\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress hub-file-input__tile-progress\"\n\t\t\t\t\t\t\t\t\t[class.hub-file-input__progress--indeterminate]=\"tile.item?.progress === null\"\n\t\t\t\t\t\t\t\t\trole=\"progressbar\"\n\t\t\t\t\t\t\t\t\taria-valuemin=\"0\"\n\t\t\t\t\t\t\t\t\taria-valuemax=\"100\"\n\t\t\t\t\t\t\t\t\t[attr.aria-valuenow]=\"tile.item?.progress\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress-bar\"\n\t\t\t\t\t\t\t\t\t\t[style.--hub-file-input-progress-value]=\"tile.item?.progress ?? 0\"\n\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@if (tile.item?.status === 'error') {\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__tile-error\">{{ errorText(tile.item!) }}</span>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__tile-actions\">\n\t\t\t\t\t\t\t\t@if (tile.item?.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t@if (hasUploader) {\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--cancel\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().cancel\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"cancel(tile.item!.id)\"\n\t\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t@if (tile.item?.status === 'error') {\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--retry\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().retry\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"retry(tile.item!.id)\"\n\t\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@if (_canRemove()) {\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--remove\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().removeFile(tile.name)\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"removeTile(tile, index)\"\n\t\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (_dropzone() === 'add') {\n\t\t\t\t\t\t<li class=\"hub-file-input__tile hub-file-input__tile--add\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"dropzoneTpl\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ul>\n\t\t\t}\n\n\t\t\t@if (_isInline()) {\n\t\t\t\t<!--\n\t\t\t\t\tInline keeps the native input out of the label, after the tiles: it is never re-created\n\t\t\t\t\twhen the field fills or empties, focus can always return to it, and its place in the tab\n\t\t\t\t\torder is the add tile's.\n\t\t\t\t-->\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"nativeTpl\" />\n\t\t\t}\n\n\t\t\t@if (_showCount()) {\n\t\t\t\t<p class=\"hub-file-input__count\" [id]=\"id + '-count'\">{{ labels().count(_heldCount(), maxFiles()!) }}</p>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (_listPreview() && _items().length > 0) {\n\t\t\t<ul class=\"hub-file-input__list\" [class.hub-file-input__list--grid]=\"_listPreview() === 'grid'\">\n\t\t\t\t@for (item of _items(); track item.id) {\n\t\t\t\t\t<li class=\"hub-file-input__item\" [attr.data-status]=\"item.status\">\n\t\t\t\t\t\t@if (previewTpt(); as tpt) {\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpt.template\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"previewContext(item)\"\n\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<span class=\"hub-file-input__thumb\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t@if (item.previewUrl) {\n\t\t\t\t\t\t\t\t\t<img class=\"hub-file-input__image\" [src]=\"item.previewUrl\" alt=\"\" />\n\t\t\t\t\t\t\t\t} @else if (iconTpt(); as icon) {\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"icon.template\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item }\"\n\t\t\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__file-icon\"></span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__meta\">\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__name\" [title]=\"item.file.name\">{{ item.file.name }}</span>\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__size\">{{ labels().formatSize(item.file.size) }}</span>\n\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-file-input__progress--indeterminate]=\"item.progress === null\"\n\t\t\t\t\t\t\t\t\t\trole=\"progressbar\"\n\t\t\t\t\t\t\t\t\t\taria-valuemin=\"0\"\n\t\t\t\t\t\t\t\t\t\taria-valuemax=\"100\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-valuenow]=\"item.progress\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress-bar\"\n\t\t\t\t\t\t\t\t\t\t\t[style.--hub-file-input-progress-value]=\"item.progress ?? 0\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__error\">{{ errorText(item) }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__actions\">\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--cancel\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().cancel\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"cancel(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--retry\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().retry\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"retry(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (_canRemove() && item.status !== 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--remove\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().remove\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"remove(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\n\t\t\t@if (_items().length > 1 && _canRemove()) {\n\t\t\t\t<button type=\"button\" class=\"hub-file-input__clear\" (click)=\"clear()\">{{ labels().clear }}</button>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n\n\t<span class=\"hub-file-input__live\" aria-live=\"polite\">{{ announcement() }}</span>\n\n\t<!--\n\t\tThe enlarged image. A native modal <dialog> does the hard parts: Escape closes it, the page\n\t\tbehind turns inert so focus stays inside, and it sits in the top layer above any stacking\n\t\tcontext. Focus goes back to the tile on close, whichever way it closes.\n\t-->\n\t<dialog\n\t\t#viewer\n\t\tclass=\"hub-file-input__viewer\"\n\t\t[attr.aria-label]=\"_viewing()?.name ?? null\"\n\t\t(close)=\"handleViewerClose()\"\n\t\t(click)=\"handleViewerClick($event)\"\n\t>\n\t\t@if (_viewing(); as viewing) {\n\t\t\t<figure class=\"hub-file-input__viewer-figure\">\n\t\t\t\t<img class=\"hub-file-input__viewer-image\" [src]=\"viewing.src\" [alt]=\"viewing.name\" />\n\t\t\t\t<figcaption class=\"hub-file-input__viewer-caption\">{{ viewing.name }}</figcaption>\n\t\t\t</figure>\n\t\t}\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--close\"\n\t\t\t[attr.aria-label]=\"labels().close\"\n\t\t\t(click)=\"closeViewer()\"\n\t\t\tautofocus\n\t\t></button>\n\t</dialog>\n</div>\n\n<!--\n\tThe dropzone is a <label> bound to the hidden native input: clicking or activating it with the\n\tkeyboard opens the file dialog through the platform, so no role, tabindex or key handler is\n\tneeded. The \"browse\" affordance is a <span>, not a <button>, because a button inside a label would\n\topen the dialog twice. As the add tile it keeps only the glyph and the browse text.\n-->\n<ng-template #dropzoneTpl let-add>\n\t<label\n\t\tclass=\"hub-file-input__dropzone\"\n\t\t[for]=\"id\"\n\t\t[class.hub-file-input__dropzone--add]=\"add\"\n\t\t[class.hub-file-input__dropzone--dragover]=\"isDragging()\"\n\t\t[class.hub-file-input__dropzone--no-drop]=\"!dragDrop()\"\n\t\t[class.hub-file-input__dropzone--invalid]=\"isInvalid\"\n\t\t[class.hub-file-input__dropzone--readonly]=\"readonly()\"\n\t>\n\t\t@if (!_isInline()) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"nativeTpl\" />\n\t\t}\n\n\t\t<span class=\"hub-file-input__icon\" aria-hidden=\"true\"></span>\n\n\t\t@if (add) {\n\t\t\t<span class=\"hub-file-input__browse\">{{ browseLabel() }}</span>\n\t\t} @else {\n\t\t\t@if (noticeTpt(); as notice) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"notice.template\"></ng-container>\n\t\t\t}\n\n\t\t\t<span class=\"hub-file-input__prompt\">\n\t\t\t\t@if (dragDrop()) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-text\">{{ dropTextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t@if (dropSubtextLabel()) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-subtext\">{{ dropSubtextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t<span class=\"hub-file-input__browse\">{{ browseLabel() }}</span>\n\t\t\t</span>\n\t\t}\n\n\t\t@if (constraintsHint()) {\n\t\t\t<span class=\"hub-file-input__hint\" [class.hub-file-input__hint--hidden]=\"add\" [id]=\"id + '-hint'\">{{\n\t\t\t\tconstraintsHint()\n\t\t\t}}</span>\n\t\t}\n\t</label>\n</ng-template>\n\n<ng-template #nativeTpl>\n\t<input\n\t\t#nativeInput\n\t\ttype=\"file\"\n\t\tclass=\"hub-file-input__native\"\n\t\t[id]=\"id\"\n\t\t[accept]=\"accept()\"\n\t\t[multiple]=\"multiple()\"\n\t\t[disabled]=\"disabled()\"\n\t\t[attr.capture]=\"capture()\"\n\t\t[attr.tabindex]=\"_dropzone() === 'none' ? -1 : null\"\n\t\t[attr.aria-required]=\"required() ? 'true' : null\"\n\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t[attr.aria-describedby]=\"_describedBy()\"\n\t\t(click)=\"guardNativeClick($event)\"\n\t\t(cancel)=\"cancelReplace()\"\n\t\t(change)=\"handleNativeChange($event)\"\n\t\t(blur)=\"handleBlur($event)\"\n\t/>\n</ng-template>\n\n<ng-template #tileBodyTpl let-tile>\n\t@if (tile.src) {\n\t\t<img class=\"hub-file-input__tile-image\" [src]=\"tile.src\" alt=\"\" (error)=\"markBroken(tile.src)\" />\n\t} @else {\n\t\t<span class=\"hub-file-input__tile-file\">\n\t\t\t<span class=\"hub-file-input__kind-icon\" aria-hidden=\"true\"></span>\n\t\t\t<span class=\"hub-file-input__tile-name\">\n\t\t\t\t<span class=\"hub-file-input__tile-stem\">{{ tile.stem }}</span>\n\t\t\t\t@if (tile.ext) {\n\t\t\t\t\t<span class=\"hub-file-input__tile-ext\">{{ tile.ext }}</span>\n\t\t\t\t}\n\t\t\t</span>\n\t\t</span>\n\t}\n</ng-template>\n", styles: [".hub-file-input__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--hub-file-input-gap);min-height:var(--hub-file-input-min-height);padding:var(--hub-file-input-padding-y) var(--hub-file-input-padding-x);color:var(--hub-file-input-color);background-color:var(--hub-file-input-bg);border:var(--hub-file-input-border-width) var(--hub-file-input-border-style) var(--hub-file-input-border-color);border-radius:var(--hub-file-input-border-radius);text-align:center;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__dropzone:hover{background-color:var(--hub-file-input-hover-bg);border-color:var(--hub-file-input-hover-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:focus-visible){border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__dropzone--dragover,.hub-file-input__dropzone--dragover:hover{background-color:var(--hub-file-input-dragover-bg);border-color:var(--hub-file-input-dragover-border-color)}.hub-file-input__dropzone--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:disabled){cursor:not-allowed}.hub-file-input__dropzone:has(.hub-file-input__native:disabled):hover{background-color:var(--hub-file-input-bg);border-color:var(--hub-file-input-border-color)}.hub-file-input__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.hub-file-input__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:var(--hub-file-input-icon-chip-size);height:var(--hub-file-input-icon-chip-size);background-color:var(--hub-file-input-icon-bg);border-radius:var(--hub-file-input-icon-chip-radius)}.hub-file-input__icon:before{content:\"\";width:var(--hub-file-input-icon-size);height:var(--hub-file-input-icon-size);background-color:var(--hub-file-input-icon-color);-webkit-mask:var(--hub-file-input-icon) center/contain no-repeat;mask:var(--hub-file-input-icon) center/contain no-repeat}.hub-file-input__prompt{display:flex;flex-direction:var(--hub-file-input-prompt-direction);flex-wrap:wrap;align-items:var(--hub-file-input-prompt-align);justify-content:center;gap:var(--hub-file-input-prompt-gap);color:var(--hub-file-input-prompt-color);font-size:var(--hub-file-input-prompt-font-size)}.hub-file-input__drop-text{color:var(--hub-file-input-drop-text-color);font-size:var(--hub-file-input-drop-text-font-size);font-weight:var(--hub-file-input-drop-text-font-weight)}.hub-file-input__drop-subtext{color:var(--hub-file-input-drop-subtext-color);font-size:var(--hub-file-input-drop-subtext-font-size)}.hub-file-input__browse{display:inline-flex;align-items:center;gap:var(--hub-file-input-browse-gap);margin-top:var(--hub-file-input-browse-margin-top);padding:var(--hub-file-input-browse-padding-y) var(--hub-file-input-browse-padding-x);color:var(--hub-file-input-browse-color);font-size:var(--hub-file-input-browse-font-size);font-weight:var(--hub-file-input-browse-font-weight);text-decoration:var(--hub-file-input-browse-text-decoration);background-color:var(--hub-file-input-browse-bg);border-radius:var(--hub-file-input-browse-radius);transition:var(--hub-file-input-transition)}.hub-file-input__browse:before{content:\"\";display:var(--hub-file-input-browse-icon-display);flex:0 0 auto;width:var(--hub-file-input-browse-icon-size);height:var(--hub-file-input-browse-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-browse-icon) center/contain no-repeat;mask:var(--hub-file-input-browse-icon) center/contain no-repeat}.hub-file-input__dropzone:hover .hub-file-input__browse{background-color:var(--hub-file-input-browse-hover-bg)}.hub-file-input__hint{color:var(--hub-file-input-hint-color);font-size:var(--hub-file-input-hint-font-size)}.hub-file-input__list{display:flex;flex-direction:column;gap:var(--hub-file-input-list-gap);margin:var(--hub-file-input-list-margin-top) 0 0;padding:0;list-style:none}.hub-file-input__list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--hub-file-input-grid-min-width),1fr));gap:var(--hub-file-input-grid-gap)}.hub-file-input__item{display:flex;align-items:center;gap:var(--hub-file-input-item-gap);padding:var(--hub-file-input-item-padding-y) var(--hub-file-input-item-padding-x);color:var(--hub-file-input-item-color);background-color:var(--hub-file-input-item-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-item-border-color);border-radius:var(--hub-file-input-item-border-radius);min-width:0}.hub-file-input__item[data-status=error]{border-color:var(--hub-file-input-error-color)}.hub-file-input__item[data-status=done]{border-color:var(--hub-file-input-done-color)}.hub-file-input__thumb{display:flex;flex:none;align-items:center;justify-content:center;width:var(--hub-file-input-thumb-size);height:var(--hub-file-input-thumb-size);overflow:hidden;background-color:var(--hub-file-input-thumb-bg);border-radius:var(--hub-file-input-thumb-radius)}.hub-file-input__image{width:100%;height:100%;object-fit:cover}.hub-file-input__file-icon{display:block;width:var(--hub-file-input-file-icon-size);height:var(--hub-file-input-file-icon-size);background-color:var(--hub-file-input-file-icon-color);-webkit-mask:var(--hub-file-input-file-icon) center/contain no-repeat;mask:var(--hub-file-input-file-icon) center/contain no-repeat}.hub-file-input__meta{display:flex;flex:1 1 auto;flex-direction:column;gap:.125rem;min-width:0}.hub-file-input__name{overflow:hidden;font-size:var(--hub-file-input-name-font-size);text-overflow:ellipsis;white-space:nowrap}.hub-file-input__size{color:var(--hub-file-input-size-color);font-size:var(--hub-file-input-size-font-size)}.hub-file-input__error{color:var(--hub-file-input-error-color);font-size:var(--hub-file-input-error-font-size)}.hub-file-input__progress{display:block;width:100%;height:var(--hub-file-input-progress-height);overflow:hidden;background-color:var(--hub-file-input-progress-track-bg);border-radius:var(--hub-file-input-progress-radius)}.hub-file-input__progress-bar{display:block;width:calc(var(--hub-file-input-progress-value, 0) * 1%);height:100%;background-color:var(--hub-file-input-progress-bar-bg);border-radius:inherit;transition:width .15s linear}.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{width:33%;animation:hub-file-input-indeterminate var(--hub-file-input-progress-indeterminate-duration) ease-in-out infinite}.hub-file-input__actions{display:flex;flex:none;align-items:center;gap:.25rem}.hub-file-input__action{display:block;width:var(--hub-file-input-action-size);height:var(--hub-file-input-action-size);padding:0;background-color:var(--hub-file-input-action-color);border:0;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__action:hover{background-color:var(--hub-file-input-action-hover-color)}.hub-file-input__action--remove{-webkit-mask:var(--hub-file-input-remove-icon) center/contain no-repeat;mask:var(--hub-file-input-remove-icon) center/contain no-repeat}.hub-file-input__action--remove:hover{background-color:var(--hub-file-input-remove-hover-color)}.hub-file-input__action--cancel{-webkit-mask:var(--hub-file-input-cancel-icon) center/contain no-repeat;mask:var(--hub-file-input-cancel-icon) center/contain no-repeat}.hub-file-input__action--retry{-webkit-mask:var(--hub-file-input-retry-icon) center/contain no-repeat;mask:var(--hub-file-input-retry-icon) center/contain no-repeat}.hub-file-input__clear{align-self:flex-start;margin-top:var(--hub-file-input-list-margin-top);padding:0;color:var(--hub-file-input-clear-color);font-size:var(--hub-file-input-clear-font-size);background:none;border:0;text-decoration:underline;cursor:pointer}.hub-file-input__item[data-status=done] .hub-file-input__size:after{display:inline-block;width:.75em;height:.75em;margin-inline-start:.375em;background-color:var(--hub-file-input-done-color);-webkit-mask:var(--hub-file-input-done-icon) center/contain no-repeat;mask:var(--hub-file-input-done-icon) center/contain no-repeat;content:\"\"}.hub-file-input__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-file-input__frame{position:relative}.hub-file-input__body--inline .hub-file-input__frame{width:var(--hub-file-input-inline-width);max-width:100%}.hub-file-input__body--inline .hub-file-input__dropzone{min-height:var(--hub-file-input-inline-min-height);aspect-ratio:var(--hub-file-input-inline-aspect-ratio);border-radius:var(--hub-file-input-tile-radius)}.hub-file-input__frame:has(>.hub-file-input__native:focus-visible) .hub-file-input__dropzone{border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__frame:has(>.hub-file-input__native:disabled) .hub-file-input__dropzone{cursor:not-allowed}.hub-file-input__tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--hub-file-input-grid-min-width),1fr));gap:var(--hub-file-input-grid-gap);margin:0;padding:0;list-style:none}.hub-file-input__dropzone+.hub-file-input__tiles{margin-top:var(--hub-file-input-list-margin-top)}.hub-file-input__tiles--single{display:block}.hub-file-input__tile{position:relative;display:flex;min-width:0;height:var(--hub-file-input-grid-thumb-height);overflow:hidden;color:var(--hub-file-input-color);background-color:var(--hub-file-input-tile-bg);border:var(--hub-file-input-border-width) var(--hub-file-input-tile-border-style) var(--hub-file-input-tile-border-color);border-radius:var(--hub-file-input-tile-radius);transition:var(--hub-file-input-transition)}.hub-file-input__tile[data-status=error]{border-color:var(--hub-file-input-error-color)}.hub-file-input__tile[data-status=done]{border-color:var(--hub-file-input-done-color)}.hub-file-input__tiles--single .hub-file-input__tile{height:auto;min-height:var(--hub-file-input-inline-min-height);aspect-ratio:var(--hub-file-input-inline-aspect-ratio)}.hub-file-input__tile--add{overflow:visible;background:none;border:0}.hub-file-input__dropzone--add{flex:1 1 auto;min-height:0;padding:var(--hub-file-input-tile-padding);border-radius:var(--hub-file-input-tile-radius)}.hub-file-input__tile-open{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;gap:var(--hub-file-input-gap);min-width:0;padding:var(--hub-file-input-tile-padding);color:inherit;font:inherit;text-decoration:none;background:none;border:0;cursor:pointer}.hub-file-input__tile-open:focus-visible{outline:none}.hub-file-input__tile:has(>.hub-file-input__tile-open:focus-visible){border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow)}.hub-file-input__tile-image{position:absolute;inset:0;width:100%;height:100%;padding:var(--hub-file-input-tile-padding);box-sizing:border-box;object-fit:var(--hub-file-input-tile-fit)}.hub-file-input__tile-file{display:flex;flex-direction:column;align-items:center;gap:var(--hub-file-input-gap);max-width:100%;min-width:0}.hub-file-input__kind-icon{display:block;flex:none;width:var(--hub-file-input-kind-icon-size);height:var(--hub-file-input-kind-icon-size);background-color:var(--hub-file-input-kind-icon-color);-webkit-mask:var(--hub-file-input-kind-generic-icon) center/contain no-repeat;mask:var(--hub-file-input-kind-generic-icon) center/contain no-repeat}.hub-file-input__tile[data-file-kind=pdf] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-pdf-icon);mask-image:var(--hub-file-input-kind-pdf-icon)}.hub-file-input__tile[data-file-kind=document] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-document-icon);mask-image:var(--hub-file-input-kind-document-icon)}.hub-file-input__tile[data-file-kind=spreadsheet] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-spreadsheet-icon);mask-image:var(--hub-file-input-kind-spreadsheet-icon)}.hub-file-input__tile[data-file-kind=presentation] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-presentation-icon);mask-image:var(--hub-file-input-kind-presentation-icon)}.hub-file-input__tile[data-file-kind=archive] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-archive-icon);mask-image:var(--hub-file-input-kind-archive-icon)}.hub-file-input__tile[data-file-kind=audio] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-audio-icon);mask-image:var(--hub-file-input-kind-audio-icon)}.hub-file-input__tile[data-file-kind=video] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-video-icon);mask-image:var(--hub-file-input-kind-video-icon)}.hub-file-input__tile[data-file-kind=code] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-code-icon);mask-image:var(--hub-file-input-kind-code-icon)}.hub-file-input__tile[data-file-kind=image] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-image-icon);mask-image:var(--hub-file-input-kind-image-icon)}.hub-file-input__tile-name{display:flex;max-width:100%;min-width:0;color:var(--hub-file-input-tile-name-color);font-size:var(--hub-file-input-tile-name-font-size)}.hub-file-input__tile-stem{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-file-input__tile-ext{flex:none;white-space:nowrap}.hub-file-input__tile-veil{position:absolute;inset:0;background-color:var(--hub-file-input-tile-veil-bg);opacity:0;pointer-events:none;transition:var(--hub-file-input-transition)}.hub-file-input__tile-replace{position:absolute;inset:0;display:inline-flex;align-items:center;gap:var(--hub-file-input-tile-replace-gap);width:fit-content;max-width:calc(100% - 2 * var(--hub-file-input-tile-padding));height:fit-content;margin:auto;padding:var(--hub-file-input-tile-replace-padding-y) var(--hub-file-input-tile-replace-padding-x);overflow:hidden;color:var(--hub-file-input-tile-replace-color);font-family:inherit;font-size:var(--hub-file-input-tile-replace-font-size);font-weight:var(--hub-file-input-browse-font-weight);line-height:1.5;white-space:nowrap;background-color:var(--hub-file-input-tile-replace-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-tile-replace-border-color);border-radius:var(--hub-file-input-tile-replace-radius);box-shadow:var(--hub-file-input-tile-replace-shadow);cursor:pointer;opacity:0;pointer-events:none;transition:var(--hub-file-input-transition)}.hub-file-input__tile-replace:before{content:\"\";flex:none;width:var(--hub-file-input-tile-replace-icon-size);height:var(--hub-file-input-tile-replace-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-tile-replace-icon) center/contain no-repeat;mask:var(--hub-file-input-tile-replace-icon) center/contain no-repeat}.hub-file-input__tile-replace:focus-visible{border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__tile--changeable:hover .hub-file-input__tile-veil{opacity:1}.hub-file-input__tile--changeable:hover .hub-file-input__tile-replace{opacity:1;pointer-events:auto}.hub-file-input__tile--changeable:has(:focus-visible) .hub-file-input__tile-veil{opacity:1}.hub-file-input__tile--changeable:has(:focus-visible) .hub-file-input__tile-replace{opacity:1;pointer-events:auto}.hub-file-input__frame--dragover .hub-file-input__tiles--single .hub-file-input__tile--changeable .hub-file-input__tile-veil,.hub-file-input__frame--dragover .hub-file-input__tiles--single .hub-file-input__tile--changeable .hub-file-input__tile-replace{opacity:1}.hub-file-input__tile--changeable:hover .hub-file-input__tile-file{opacity:0}.hub-file-input__tile--changeable:has(:focus-visible) .hub-file-input__tile-file{opacity:0}.hub-file-input__frame--dragover .hub-file-input__tiles--single .hub-file-input__tile--changeable .hub-file-input__tile-file{opacity:0}.hub-file-input__tile-progress{position:absolute;inset-inline:var(--hub-file-input-tile-padding);inset-block-end:var(--hub-file-input-tile-padding);width:auto}.hub-file-input__tile-error{position:absolute;inset-inline:0;inset-block-end:0;padding:var(--hub-ref-space-1, .25rem) var(--hub-file-input-tile-padding);overflow:hidden;color:var(--hub-file-input-error-color);font-size:var(--hub-file-input-error-font-size);text-overflow:ellipsis;white-space:nowrap;background-color:var(--hub-file-input-tile-error-bg)}.hub-file-input__tile-actions{position:absolute;inset-block-start:var(--hub-file-input-tile-action-inset);inset-inline-end:var(--hub-file-input-tile-action-inset);display:flex;gap:var(--hub-file-input-tile-action-gap)}.hub-file-input__chip{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-file-input-tile-action-size);height:var(--hub-file-input-tile-action-size);padding:0;color:var(--hub-file-input-tile-action-color);background-color:var(--hub-file-input-tile-action-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-tile-action-border-color);border-radius:var(--hub-file-input-tile-action-radius);box-shadow:var(--hub-file-input-tile-action-shadow);cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__chip:before{content:\"\";width:var(--hub-file-input-tile-action-icon-size);height:var(--hub-file-input-tile-action-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-remove-icon) center/contain no-repeat;mask:var(--hub-file-input-remove-icon) center/contain no-repeat}.hub-file-input__chip:hover{color:var(--hub-file-input-tile-action-hover-color)}.hub-file-input__chip:focus-visible{border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__chip--remove:hover{color:var(--hub-file-input-tile-remove-hover-color)}.hub-file-input__chip--cancel:before{-webkit-mask-image:var(--hub-file-input-cancel-icon);mask-image:var(--hub-file-input-cancel-icon)}.hub-file-input__chip--retry:before{-webkit-mask-image:var(--hub-file-input-retry-icon);mask-image:var(--hub-file-input-retry-icon)}.hub-file-input__count{margin:var(--hub-file-input-list-margin-top) 0 0;color:var(--hub-file-input-count-color);font-size:var(--hub-file-input-count-font-size)}.hub-file-input__viewer{max-width:var(--hub-file-input-viewer-max-width);max-height:var(--hub-file-input-viewer-max-height);padding:var(--hub-file-input-viewer-padding);color:var(--hub-file-input-viewer-color);background-color:var(--hub-file-input-viewer-bg);border:0;border-radius:var(--hub-file-input-viewer-radius)}.hub-file-input__viewer::backdrop{background-color:var(--hub-file-input-viewer-backdrop, rgba(0, 0, 0, .7))}.hub-file-input__viewer .hub-file-input__chip--close{position:absolute;inset-block-start:var(--hub-file-input-tile-action-inset);inset-inline-end:var(--hub-file-input-tile-action-inset)}.hub-file-input__viewer-figure{display:flex;flex-direction:column;align-items:center;gap:var(--hub-file-input-gap);margin:0}.hub-file-input__viewer-image{display:block;max-width:100%;max-height:calc(var(--hub-file-input-viewer-max-height) - 5rem);object-fit:contain}.hub-file-input__viewer-caption{max-width:100%;padding-inline-end:var(--hub-file-input-tile-action-size);overflow:hidden;font-size:var(--hub-file-input-viewer-caption-font-size);text-overflow:ellipsis;white-space:nowrap}.hub-file-input__hint--hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-file-input__dropzone--readonly{cursor:default}.hub-file-input__dropzone--readonly:hover{background-color:var(--hub-file-input-bg);border-color:var(--hub-file-input-border-color)}.hub-file-input__list--grid .hub-file-input__item{flex-direction:column;align-items:stretch}.hub-file-input__list--grid .hub-file-input__thumb{width:100%;height:var(--hub-file-input-grid-thumb-height)}.hub-file-input__list--grid .hub-file-input__actions{justify-content:flex-end}@keyframes hub-file-input-indeterminate{0%{transform:translate(-100%)}to{transform:translate(300%)}}@media(prefers-reduced-motion:reduce){.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{animation:none;width:100%;opacity:.5}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HubTooltipDirective, selector: "[hubTooltip]", inputs: ["hubTooltip", "hubTooltipPlacement", "hubTooltipDelay", "hubTooltipOffset"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11071
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubFileInputComponent, isStandalone: true, selector: "hub-file-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxTotalSize: { classPropertyName: "maxTotalSize", publicName: "maxTotalSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, dragDrop: { classPropertyName: "dragDrop", publicName: "dragDrop", isSignal: true, isRequired: false, transformFunction: null }, paste: { classPropertyName: "paste", publicName: "paste", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, currentFile: { classPropertyName: "currentFile", publicName: "currentFile", isSignal: true, isRequired: false, transformFunction: null }, imagePreview: { classPropertyName: "imagePreview", publicName: "imagePreview", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, capture: { classPropertyName: "capture", publicName: "capture", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, dropText: { classPropertyName: "dropText", publicName: "dropText", isSignal: true, isRequired: false, transformFunction: null }, dropSubtext: { classPropertyName: "dropSubtext", publicName: "dropSubtext", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", rejected: "rejected", fileRemoved: "fileRemoved", currentFileRemoved: "currentFileRemoved", uploadStateChange: "uploadStateChange" }, host: { listeners: { "paste": "handlePaste($event)" }, properties: { "class": "classlist()", "class.hub-file-input-host": "true" } }, queries: [{ propertyName: "iconTpt", first: true, predicate: HubFileIconDirective, descendants: true, isSignal: true }, { propertyName: "previewTpt", first: true, predicate: HubFilePreviewDirective, descendants: true, isSignal: true }, { propertyName: "noticeTpt", first: true, predicate: HubFileDropzoneNoticeDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }, { propertyName: "viewer", first: true, predicate: ["viewer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-file-input\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if (label() || required()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if (label() || required()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div\n\t\tclass=\"hub-field__body\"\n\t\t[class.hub-file-input__body--inline]=\"_inlineSingle()\"\n\t\t[class.hub-file-input__body--inline-multiple]=\"_inlineMultiple()\"\n\t>\n\t\t<!-- The frame listens for the drag, so a drop lands anywhere on the field, tiles included. -->\n\t\t<div\n\t\t\tclass=\"hub-file-input__frame\"\n\t\t\t[class.hub-file-input__frame--dragover]=\"isDragging()\"\n\t\t\t(dragenter)=\"handleDragEnter($event)\"\n\t\t\t(dragover)=\"handleDragOver($event)\"\n\t\t\t(dragleave)=\"handleDragLeave($event)\"\n\t\t\t(drop)=\"handleDrop($event)\"\n\t\t>\n\t\t\t@if (_dropzone() === 'zone') {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"dropzoneTpl\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n\t\t\t}\n\n\t\t\t@if (_tiles().length > 0) {\n\t\t\t\t<ul class=\"hub-file-input__tiles\" [class.hub-file-input__tiles--single]=\"_inlineSingle()\">\n\t\t\t\t\t@for (tile of _tiles(); track tile.key; let index = $index) {\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tclass=\"hub-file-input__tile\"\n\t\t\t\t\t\t\t[class.hub-file-input__tile--changeable]=\"_canChange() && tile.item?.status !== 'uploading'\"\n\t\t\t\t\t\t\t[attr.data-file-kind]=\"tile.kind\"\n\t\t\t\t\t\t\t[attr.data-status]=\"tile.item?.status ?? null\"\n\t\t\t\t\t\t\t[attr.title]=\"tile.name\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<!--\n\t\t\t\t\t\t\t\tActivating a tile opens its file: a stored one is a link to its URL, in a new tab;\n\t\t\t\t\t\t\t\ta picked image opens enlarged; any other picked file opens in a new tab. Replacing\n\t\t\t\t\t\t\t\thas its own button, the pill, so one gesture never means two things.\n\t\t\t\t\t\t\t-->\n\t\t\t\t\t\t\t@if (tile.current) {\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__tile-open\"\n\t\t\t\t\t\t\t\t\t[href]=\"tile.current.url\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().open(tile.name)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleTileKeydown($event, tile, index)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tileBodyTpl\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: tile }\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__tile-open\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().open(tile.name)\"\n\t\t\t\t\t\t\t\t\t(click)=\"openTile(tile, $event)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleTileKeydown($event, tile, index)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tileBodyTpl\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: tile }\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@if (_canChange() && tile.item?.status !== 'uploading') {\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__tile-veil\" aria-hidden=\"true\"></span>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__tile-replace\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().replaceFile(tile.name)\"\n\t\t\t\t\t\t\t\t\t(click)=\"replaceTile(tile)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{{ labels().replace }}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@if (tile.item?.status === 'uploading') {\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress hub-file-input__tile-progress\"\n\t\t\t\t\t\t\t\t\t[class.hub-file-input__progress--indeterminate]=\"tile.item?.progress === null\"\n\t\t\t\t\t\t\t\t\trole=\"progressbar\"\n\t\t\t\t\t\t\t\t\taria-valuemin=\"0\"\n\t\t\t\t\t\t\t\t\taria-valuemax=\"100\"\n\t\t\t\t\t\t\t\t\t[attr.aria-valuenow]=\"tile.item?.progress\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress-bar\"\n\t\t\t\t\t\t\t\t\t\t[style.--hub-file-input-progress-value]=\"tile.item?.progress ?? 0\"\n\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@if (tile.item?.status === 'error') {\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__tile-error\">{{ errorText(tile.item!) }}</span>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__tile-actions\">\n\t\t\t\t\t\t\t\t@if (tile.item?.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t@if (hasUploader) {\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--cancel\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().cancel\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"cancel(tile.item!.id)\"\n\t\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t@if (tile.item?.status === 'error') {\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--retry\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().retry\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"retry(tile.item!.id)\"\n\t\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@if (_canRemove()) {\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--remove\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().removeFile(tile.name)\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"removeTile(tile, index)\"\n\t\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (_dropzone() === 'add') {\n\t\t\t\t\t\t<li class=\"hub-file-input__tile hub-file-input__tile--add\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"dropzoneTpl\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ul>\n\t\t\t}\n\n\t\t\t@if (_isInline()) {\n\t\t\t\t<!--\n\t\t\t\t\tInline keeps the native input out of the label, after the tiles: it is never re-created\n\t\t\t\t\twhen the field fills or empties, focus can always return to it, and its place in the tab\n\t\t\t\t\torder is the add tile's.\n\t\t\t\t-->\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"nativeTpl\" />\n\t\t\t}\n\n\t\t\t@if (_showCount()) {\n\t\t\t\t<p class=\"hub-file-input__count\" [id]=\"id + '-count'\">{{ labels().count(_heldCount(), maxFiles()!) }}</p>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (_listPreview() && _items().length > 0) {\n\t\t\t<ul class=\"hub-file-input__list\" [class.hub-file-input__list--grid]=\"_listPreview() === 'grid'\">\n\t\t\t\t@for (item of _items(); track item.id) {\n\t\t\t\t\t<li class=\"hub-file-input__item\" [attr.data-status]=\"item.status\">\n\t\t\t\t\t\t@if (previewTpt(); as tpt) {\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpt.template\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"previewContext(item)\"\n\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<span class=\"hub-file-input__thumb\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t@if (item.previewUrl) {\n\t\t\t\t\t\t\t\t\t<img class=\"hub-file-input__image\" [src]=\"item.previewUrl\" alt=\"\" />\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t<!--\n\t\t\t\t\t\t\t\t\t\tA nested @if rather than `@else if (iconTpt(); as icon)`: an `as` on an\n\t\t\t\t\t\t\t\t\t\t@else if is only accepted from Angular 20.2, and this package supports\n\t\t\t\t\t\t\t\t\t\tolder ones.\n\t\t\t\t\t\t\t\t\t-->\n\t\t\t\t\t\t\t\t\t@if (iconTpt(); as icon) {\n\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"icon.template\"\n\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item }\"\n\t\t\t\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__file-icon\"></span>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__meta\">\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__name\" [title]=\"item.file.name\">{{ item.file.name }}</span>\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__size\">{{ labels().formatSize(item.file.size) }}</span>\n\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-file-input__progress--indeterminate]=\"item.progress === null\"\n\t\t\t\t\t\t\t\t\t\trole=\"progressbar\"\n\t\t\t\t\t\t\t\t\t\taria-valuemin=\"0\"\n\t\t\t\t\t\t\t\t\t\taria-valuemax=\"100\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-valuenow]=\"item.progress\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress-bar\"\n\t\t\t\t\t\t\t\t\t\t\t[style.--hub-file-input-progress-value]=\"item.progress ?? 0\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__error\">{{ errorText(item) }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__actions\">\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--cancel\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().cancel\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"cancel(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--retry\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().retry\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"retry(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (_canRemove() && item.status !== 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--remove\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().remove\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"remove(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\n\t\t\t@if (_items().length > 1 && _canRemove()) {\n\t\t\t\t<button type=\"button\" class=\"hub-file-input__clear\" (click)=\"clear()\">{{ labels().clear }}</button>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n\n\t<span class=\"hub-file-input__live\" aria-live=\"polite\">{{ announcement() }}</span>\n\n\t<!--\n\t\tThe enlarged image. A native modal <dialog> does the hard parts: Escape closes it, the page\n\t\tbehind turns inert so focus stays inside, and it sits in the top layer above any stacking\n\t\tcontext. Focus goes back to the tile on close, whichever way it closes.\n\t-->\n\t<dialog\n\t\t#viewer\n\t\tclass=\"hub-file-input__viewer\"\n\t\t[attr.aria-label]=\"_viewing()?.name ?? null\"\n\t\t(close)=\"handleViewerClose()\"\n\t\t(click)=\"handleViewerClick($event)\"\n\t>\n\t\t@if (_viewing(); as viewing) {\n\t\t\t<figure class=\"hub-file-input__viewer-figure\">\n\t\t\t\t<img class=\"hub-file-input__viewer-image\" [src]=\"viewing.src\" [alt]=\"viewing.name\" />\n\t\t\t\t<figcaption class=\"hub-file-input__viewer-caption\">{{ viewing.name }}</figcaption>\n\t\t\t</figure>\n\t\t}\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--close\"\n\t\t\t[attr.aria-label]=\"labels().close\"\n\t\t\t(click)=\"closeViewer()\"\n\t\t\tautofocus\n\t\t></button>\n\t</dialog>\n</div>\n\n<!--\n\tThe dropzone is a <label> bound to the hidden native input: clicking or activating it with the\n\tkeyboard opens the file dialog through the platform, so no role, tabindex or key handler is\n\tneeded. The \"browse\" affordance is a <span>, not a <button>, because a button inside a label would\n\topen the dialog twice. As the add tile it keeps only the glyph and the browse text.\n-->\n<ng-template #dropzoneTpl let-add>\n\t<label\n\t\tclass=\"hub-file-input__dropzone\"\n\t\t[for]=\"id\"\n\t\t[class.hub-file-input__dropzone--add]=\"add\"\n\t\t[class.hub-file-input__dropzone--compact]=\"_isCompact() && !add\"\n\t\t[class.hub-file-input__dropzone--dragover]=\"isDragging()\"\n\t\t[class.hub-file-input__dropzone--no-drop]=\"!dragDrop()\"\n\t\t[class.hub-file-input__dropzone--invalid]=\"isInvalid\"\n\t\t[class.hub-file-input__dropzone--readonly]=\"readonly()\"\n\t>\n\t\t@if (!_isInline()) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"nativeTpl\" />\n\t\t}\n\n\t\t@if (!_isCompact() || add) {\n\t\t\t<span class=\"hub-file-input__icon\" aria-hidden=\"true\"></span>\n\t\t}\n\n\t\t@if (add) {\n\t\t\t<span class=\"hub-file-input__browse\">{{ browseLabel() }}</span>\n\t\t} @else {\n\t\t\t@if (noticeTpt(); as notice) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"notice.template\"></ng-container>\n\t\t\t}\n\n\t\t\t<span class=\"hub-file-input__prompt\">\n\t\t\t\t<!--\n\t\t\t\t\tThe drag copy is the panel's, not the field's: a compact row invites a click, and\n\t\t\t\t\tthe drop keeps working whether or not anything says so. A projected notice and an\n\t\t\t\t\texplicit dropSubtext are the consumer's words and stay.\n\t\t\t\t-->\n\t\t\t\t@if (dragDrop() && !_isCompact()) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-text\">{{ dropTextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t@if (dropSubtextLabel() && (!_isCompact() || dropSubtext())) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-subtext\">{{ dropSubtextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t<span class=\"hub-file-input__browse\">{{ browseLabel() }}</span>\n\t\t\t</span>\n\t\t}\n\n\t\t@if (constraintsHint()) {\n\t\t\t<span class=\"hub-file-input__hint\" [class.hub-file-input__hint--hidden]=\"add\" [id]=\"id + '-hint'\">{{\n\t\t\t\tconstraintsHint()\n\t\t\t}}</span>\n\t\t}\n\t</label>\n</ng-template>\n\n<ng-template #nativeTpl>\n\t<input\n\t\t#nativeInput\n\t\ttype=\"file\"\n\t\tclass=\"hub-file-input__native\"\n\t\t[id]=\"id\"\n\t\t[accept]=\"accept()\"\n\t\t[multiple]=\"multiple()\"\n\t\t[disabled]=\"disabled()\"\n\t\t[attr.capture]=\"capture()\"\n\t\t[attr.tabindex]=\"_dropzone() === 'none' ? -1 : null\"\n\t\t[attr.aria-required]=\"required() ? 'true' : null\"\n\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t[attr.aria-describedby]=\"_describedBy()\"\n\t\t(click)=\"guardNativeClick($event)\"\n\t\t(cancel)=\"cancelReplace()\"\n\t\t(change)=\"handleNativeChange($event)\"\n\t\t(blur)=\"handleBlur($event)\"\n\t/>\n</ng-template>\n\n<ng-template #tileBodyTpl let-tile>\n\t@if (tile.src) {\n\t\t<img class=\"hub-file-input__tile-image\" [src]=\"tile.src\" alt=\"\" (error)=\"markBroken(tile.src)\" />\n\t} @else {\n\t\t<span class=\"hub-file-input__tile-file\">\n\t\t\t<span class=\"hub-file-input__kind-icon\" aria-hidden=\"true\"></span>\n\t\t\t<span class=\"hub-file-input__tile-name\">\n\t\t\t\t<span class=\"hub-file-input__tile-stem\">{{ tile.stem }}</span>\n\t\t\t\t@if (tile.ext) {\n\t\t\t\t\t<span class=\"hub-file-input__tile-ext\">{{ tile.ext }}</span>\n\t\t\t\t}\n\t\t\t</span>\n\t\t</span>\n\t}\n</ng-template>\n", styles: [".hub-file-input__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--hub-file-input-gap);min-height:var(--hub-file-input-min-height);padding:var(--hub-file-input-padding-y) var(--hub-file-input-padding-x);color:var(--hub-file-input-color);background-color:var(--hub-file-input-bg);border:var(--hub-file-input-border-width) var(--hub-file-input-border-style) var(--hub-file-input-border-color);border-radius:var(--hub-file-input-border-radius);text-align:center;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__dropzone:hover{background-color:var(--hub-file-input-hover-bg);border-color:var(--hub-file-input-hover-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:focus-visible){border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__dropzone--compact{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--hub-file-input-compact-gap);min-height:var(--hub-file-input-compact-min-height);padding:var(--hub-file-input-compact-padding-y) var(--hub-file-input-compact-padding-x);text-align:start}.hub-file-input__dropzone--compact .hub-file-input__prompt{flex-direction:row;align-items:center;justify-content:flex-start}.hub-file-input__dropzone--dragover,.hub-file-input__dropzone--dragover:hover{background-color:var(--hub-file-input-dragover-bg);border-color:var(--hub-file-input-dragover-border-color)}.hub-file-input__dropzone--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:disabled){cursor:not-allowed}.hub-file-input__dropzone:has(.hub-file-input__native:disabled):hover{background-color:var(--hub-file-input-bg);border-color:var(--hub-file-input-border-color)}.hub-file-input__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.hub-file-input__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:var(--hub-file-input-icon-chip-size);height:var(--hub-file-input-icon-chip-size);background-color:var(--hub-file-input-icon-bg);border-radius:var(--hub-file-input-icon-chip-radius)}.hub-file-input__icon:before{content:\"\";width:var(--hub-file-input-icon-size);height:var(--hub-file-input-icon-size);background-color:var(--hub-file-input-icon-color);-webkit-mask:var(--hub-file-input-icon) center/contain no-repeat;mask:var(--hub-file-input-icon) center/contain no-repeat}.hub-file-input__prompt{display:flex;flex-direction:var(--hub-file-input-prompt-direction);flex-wrap:wrap;align-items:var(--hub-file-input-prompt-align);justify-content:center;gap:var(--hub-file-input-prompt-gap);color:var(--hub-file-input-prompt-color);font-size:var(--hub-file-input-prompt-font-size)}.hub-file-input__drop-text{color:var(--hub-file-input-drop-text-color);font-size:var(--hub-file-input-drop-text-font-size);font-weight:var(--hub-file-input-drop-text-font-weight)}.hub-file-input__drop-subtext{color:var(--hub-file-input-drop-subtext-color);font-size:var(--hub-file-input-drop-subtext-font-size)}.hub-file-input__browse{display:inline-flex;align-items:center;gap:var(--hub-file-input-browse-gap);margin-top:var(--hub-file-input-browse-margin-top);padding:var(--hub-file-input-browse-padding-y) var(--hub-file-input-browse-padding-x);color:var(--hub-file-input-browse-color);font-size:var(--hub-file-input-browse-font-size);font-weight:var(--hub-file-input-browse-font-weight);text-decoration:var(--hub-file-input-browse-text-decoration);background-color:var(--hub-file-input-browse-bg);border-radius:var(--hub-file-input-browse-radius);transition:var(--hub-file-input-transition)}.hub-file-input__browse:before{content:\"\";display:var(--hub-file-input-browse-icon-display);flex:0 0 auto;width:var(--hub-file-input-browse-icon-size);height:var(--hub-file-input-browse-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-browse-icon) center/contain no-repeat;mask:var(--hub-file-input-browse-icon) center/contain no-repeat}.hub-file-input__dropzone:hover .hub-file-input__browse{background-color:var(--hub-file-input-browse-hover-bg)}.hub-file-input__hint{color:var(--hub-file-input-hint-color);font-size:var(--hub-file-input-hint-font-size)}.hub-file-input__list{display:flex;flex-direction:column;gap:var(--hub-file-input-list-gap);margin:var(--hub-file-input-list-margin-top) 0 0;padding:0;list-style:none}.hub-file-input__list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--hub-file-input-grid-min-width),1fr));gap:var(--hub-file-input-grid-gap)}.hub-file-input__item{display:flex;align-items:center;gap:var(--hub-file-input-item-gap);padding:var(--hub-file-input-item-padding-y) var(--hub-file-input-item-padding-x);color:var(--hub-file-input-item-color);background-color:var(--hub-file-input-item-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-item-border-color);border-radius:var(--hub-file-input-item-border-radius);min-width:0}.hub-file-input__item[data-status=error]{border-color:var(--hub-file-input-error-color)}.hub-file-input__item[data-status=done]{border-color:var(--hub-file-input-done-color)}.hub-file-input__thumb{display:flex;flex:none;align-items:center;justify-content:center;width:var(--hub-file-input-thumb-size);height:var(--hub-file-input-thumb-size);overflow:hidden;background-color:var(--hub-file-input-thumb-bg);border-radius:var(--hub-file-input-thumb-radius)}.hub-file-input__image{width:100%;height:100%;object-fit:cover}.hub-file-input__file-icon{display:block;width:var(--hub-file-input-file-icon-size);height:var(--hub-file-input-file-icon-size);background-color:var(--hub-file-input-file-icon-color);-webkit-mask:var(--hub-file-input-file-icon) center/contain no-repeat;mask:var(--hub-file-input-file-icon) center/contain no-repeat}.hub-file-input__meta{display:flex;flex:1 1 auto;flex-direction:column;gap:.125rem;min-width:0}.hub-file-input__name{overflow:hidden;font-size:var(--hub-file-input-name-font-size);text-overflow:ellipsis;white-space:nowrap}.hub-file-input__size{color:var(--hub-file-input-size-color);font-size:var(--hub-file-input-size-font-size)}.hub-file-input__error{color:var(--hub-file-input-error-color);font-size:var(--hub-file-input-error-font-size)}.hub-file-input__progress{display:block;width:100%;height:var(--hub-file-input-progress-height);overflow:hidden;background-color:var(--hub-file-input-progress-track-bg);border-radius:var(--hub-file-input-progress-radius)}.hub-file-input__progress-bar{display:block;width:calc(var(--hub-file-input-progress-value, 0) * 1%);height:100%;background-color:var(--hub-file-input-progress-bar-bg);border-radius:inherit;transition:width .15s linear}.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{width:33%;animation:hub-file-input-indeterminate var(--hub-file-input-progress-indeterminate-duration) ease-in-out infinite}.hub-file-input__actions{display:flex;flex:none;align-items:center;gap:.25rem}.hub-file-input__action{display:block;width:var(--hub-file-input-action-size);height:var(--hub-file-input-action-size);padding:0;background-color:var(--hub-file-input-action-color);border:0;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__action:hover{background-color:var(--hub-file-input-action-hover-color)}.hub-file-input__action--remove{-webkit-mask:var(--hub-file-input-remove-icon) center/contain no-repeat;mask:var(--hub-file-input-remove-icon) center/contain no-repeat}.hub-file-input__action--remove:hover{background-color:var(--hub-file-input-remove-hover-color)}.hub-file-input__action--cancel{-webkit-mask:var(--hub-file-input-cancel-icon) center/contain no-repeat;mask:var(--hub-file-input-cancel-icon) center/contain no-repeat}.hub-file-input__action--retry{-webkit-mask:var(--hub-file-input-retry-icon) center/contain no-repeat;mask:var(--hub-file-input-retry-icon) center/contain no-repeat}.hub-file-input__clear{align-self:flex-start;margin-top:var(--hub-file-input-list-margin-top);padding:0;color:var(--hub-file-input-clear-color);font-size:var(--hub-file-input-clear-font-size);background:none;border:0;text-decoration:underline;cursor:pointer}.hub-file-input__item[data-status=done] .hub-file-input__size:after{display:inline-block;width:.75em;height:.75em;margin-inline-start:.375em;background-color:var(--hub-file-input-done-color);-webkit-mask:var(--hub-file-input-done-icon) center/contain no-repeat;mask:var(--hub-file-input-done-icon) center/contain no-repeat;content:\"\"}.hub-file-input__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-file-input__frame{position:relative}.hub-file-input__body--inline .hub-file-input__frame{width:var(--hub-file-input-inline-width);max-width:100%}.hub-file-input__body--inline .hub-file-input__dropzone{min-height:var(--hub-file-input-inline-min-height);aspect-ratio:var(--hub-file-input-inline-aspect-ratio);border-radius:var(--hub-file-input-tile-radius)}.hub-file-input__frame:has(>.hub-file-input__native:focus-visible) .hub-file-input__dropzone{border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__frame:has(>.hub-file-input__native:disabled) .hub-file-input__dropzone{cursor:not-allowed}.hub-file-input__tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--hub-file-input-grid-min-width),1fr));gap:var(--hub-file-input-grid-gap);margin:0;padding:0;list-style:none}.hub-file-input__dropzone+.hub-file-input__tiles{margin-top:var(--hub-file-input-list-margin-top)}.hub-file-input__tiles--single{display:block}.hub-file-input__tile{position:relative;display:flex;min-width:0;height:var(--hub-file-input-grid-thumb-height);overflow:hidden;color:var(--hub-file-input-color);background-color:var(--hub-file-input-tile-bg);border:var(--hub-file-input-border-width) var(--hub-file-input-tile-border-style) var(--hub-file-input-tile-border-color);border-radius:var(--hub-file-input-tile-radius);transition:var(--hub-file-input-transition)}.hub-file-input__tile[data-status=error]{border-color:var(--hub-file-input-error-color)}.hub-file-input__tile[data-status=done]{border-color:var(--hub-file-input-done-color)}.hub-file-input__tiles--single .hub-file-input__tile{height:auto;min-height:var(--hub-file-input-inline-min-height);aspect-ratio:var(--hub-file-input-inline-aspect-ratio)}.hub-file-input__tile--add{overflow:visible;background:none;border:0}.hub-file-input__dropzone--add{flex:1 1 auto;min-height:0;padding:var(--hub-file-input-tile-padding);border-radius:var(--hub-file-input-tile-radius)}.hub-file-input__tile-open{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;gap:var(--hub-file-input-gap);min-width:0;padding:var(--hub-file-input-tile-padding);color:inherit;font:inherit;text-decoration:none;background:none;border:0;cursor:pointer}.hub-file-input__tile-open:focus-visible{outline:none}.hub-file-input__tile:has(>.hub-file-input__tile-open:focus-visible){border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow)}.hub-file-input__tile-image{position:absolute;inset:0;width:100%;height:100%;padding:var(--hub-file-input-tile-padding);box-sizing:border-box;object-fit:var(--hub-file-input-tile-fit)}.hub-file-input__tile-file{display:flex;flex-direction:column;align-items:center;gap:var(--hub-file-input-gap);max-width:100%;min-width:0}.hub-file-input__kind-icon{display:block;flex:none;width:var(--hub-file-input-kind-icon-size);height:var(--hub-file-input-kind-icon-size);background-color:var(--hub-file-input-kind-icon-color);-webkit-mask:var(--hub-file-input-kind-generic-icon) center/contain no-repeat;mask:var(--hub-file-input-kind-generic-icon) center/contain no-repeat}.hub-file-input__tile[data-file-kind=pdf] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-pdf-icon);mask-image:var(--hub-file-input-kind-pdf-icon)}.hub-file-input__tile[data-file-kind=document] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-document-icon);mask-image:var(--hub-file-input-kind-document-icon)}.hub-file-input__tile[data-file-kind=spreadsheet] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-spreadsheet-icon);mask-image:var(--hub-file-input-kind-spreadsheet-icon)}.hub-file-input__tile[data-file-kind=presentation] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-presentation-icon);mask-image:var(--hub-file-input-kind-presentation-icon)}.hub-file-input__tile[data-file-kind=archive] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-archive-icon);mask-image:var(--hub-file-input-kind-archive-icon)}.hub-file-input__tile[data-file-kind=audio] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-audio-icon);mask-image:var(--hub-file-input-kind-audio-icon)}.hub-file-input__tile[data-file-kind=video] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-video-icon);mask-image:var(--hub-file-input-kind-video-icon)}.hub-file-input__tile[data-file-kind=code] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-code-icon);mask-image:var(--hub-file-input-kind-code-icon)}.hub-file-input__tile[data-file-kind=image] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-image-icon);mask-image:var(--hub-file-input-kind-image-icon)}.hub-file-input__tile-name{display:flex;max-width:100%;min-width:0;color:var(--hub-file-input-tile-name-color);font-size:var(--hub-file-input-tile-name-font-size)}.hub-file-input__tile-stem{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-file-input__tile-ext{flex:none;white-space:nowrap}.hub-file-input__tile-veil{position:absolute;inset:0;background-color:var(--hub-file-input-tile-veil-bg);opacity:0;pointer-events:none;transition:var(--hub-file-input-transition)}.hub-file-input__tile-replace{position:absolute;inset:0;display:inline-flex;align-items:center;gap:var(--hub-file-input-tile-replace-gap);width:fit-content;max-width:calc(100% - 2 * var(--hub-file-input-tile-padding));height:fit-content;margin:auto;padding:var(--hub-file-input-tile-replace-padding-y) var(--hub-file-input-tile-replace-padding-x);overflow:hidden;color:var(--hub-file-input-tile-replace-color);font-family:inherit;font-size:var(--hub-file-input-tile-replace-font-size);font-weight:var(--hub-file-input-browse-font-weight);line-height:1.5;white-space:nowrap;background-color:var(--hub-file-input-tile-replace-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-tile-replace-border-color);border-radius:var(--hub-file-input-tile-replace-radius);box-shadow:var(--hub-file-input-tile-replace-shadow);cursor:pointer;opacity:0;pointer-events:none;transition:var(--hub-file-input-transition)}.hub-file-input__tile-replace:before{content:\"\";flex:none;width:var(--hub-file-input-tile-replace-icon-size);height:var(--hub-file-input-tile-replace-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-tile-replace-icon) center/contain no-repeat;mask:var(--hub-file-input-tile-replace-icon) center/contain no-repeat}.hub-file-input__tile-replace:focus-visible{border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__tile--changeable:hover .hub-file-input__tile-veil{opacity:1}.hub-file-input__tile--changeable:hover .hub-file-input__tile-replace{opacity:1;pointer-events:auto}.hub-file-input__tile--changeable:has(:focus-visible) .hub-file-input__tile-veil{opacity:1}.hub-file-input__tile--changeable:has(:focus-visible) .hub-file-input__tile-replace{opacity:1;pointer-events:auto}.hub-file-input__frame--dragover .hub-file-input__tiles--single .hub-file-input__tile--changeable .hub-file-input__tile-veil,.hub-file-input__frame--dragover .hub-file-input__tiles--single .hub-file-input__tile--changeable .hub-file-input__tile-replace{opacity:1}.hub-file-input__tile--changeable:hover .hub-file-input__tile-file{opacity:0}.hub-file-input__tile--changeable:has(:focus-visible) .hub-file-input__tile-file{opacity:0}.hub-file-input__frame--dragover .hub-file-input__tiles--single .hub-file-input__tile--changeable .hub-file-input__tile-file{opacity:0}.hub-file-input__tile-progress{position:absolute;inset-inline:var(--hub-file-input-tile-padding);inset-block-end:var(--hub-file-input-tile-padding);width:auto}.hub-file-input__tile-error{position:absolute;inset-inline:0;inset-block-end:0;padding:var(--hub-ref-space-1, .25rem) var(--hub-file-input-tile-padding);overflow:hidden;color:var(--hub-file-input-error-color);font-size:var(--hub-file-input-error-font-size);text-overflow:ellipsis;white-space:nowrap;background-color:var(--hub-file-input-tile-error-bg)}.hub-file-input__tile-actions{position:absolute;inset-block-start:var(--hub-file-input-tile-action-inset);inset-inline-end:var(--hub-file-input-tile-action-inset);display:flex;gap:var(--hub-file-input-tile-action-gap)}.hub-file-input__chip{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-file-input-tile-action-size);height:var(--hub-file-input-tile-action-size);padding:0;color:var(--hub-file-input-tile-action-color);background-color:var(--hub-file-input-tile-action-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-tile-action-border-color);border-radius:var(--hub-file-input-tile-action-radius);box-shadow:var(--hub-file-input-tile-action-shadow);cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__chip:before{content:\"\";width:var(--hub-file-input-tile-action-icon-size);height:var(--hub-file-input-tile-action-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-remove-icon) center/contain no-repeat;mask:var(--hub-file-input-remove-icon) center/contain no-repeat}.hub-file-input__chip:hover{color:var(--hub-file-input-tile-action-hover-color)}.hub-file-input__chip:focus-visible{border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__chip--remove:hover{color:var(--hub-file-input-tile-remove-hover-color)}.hub-file-input__chip--cancel:before{-webkit-mask-image:var(--hub-file-input-cancel-icon);mask-image:var(--hub-file-input-cancel-icon)}.hub-file-input__chip--retry:before{-webkit-mask-image:var(--hub-file-input-retry-icon);mask-image:var(--hub-file-input-retry-icon)}.hub-file-input__count{margin:var(--hub-file-input-list-margin-top) 0 0;color:var(--hub-file-input-count-color);font-size:var(--hub-file-input-count-font-size)}.hub-file-input__viewer{max-width:var(--hub-file-input-viewer-max-width);max-height:var(--hub-file-input-viewer-max-height);padding:var(--hub-file-input-viewer-padding);color:var(--hub-file-input-viewer-color);background-color:var(--hub-file-input-viewer-bg);border:0;border-radius:var(--hub-file-input-viewer-radius)}.hub-file-input__viewer::backdrop{background-color:var(--hub-file-input-viewer-backdrop, rgba(0, 0, 0, .7))}.hub-file-input__viewer .hub-file-input__chip--close{position:absolute;inset-block-start:var(--hub-file-input-tile-action-inset);inset-inline-end:var(--hub-file-input-tile-action-inset)}.hub-file-input__viewer-figure{display:flex;flex-direction:column;align-items:center;gap:var(--hub-file-input-gap);margin:0}.hub-file-input__viewer-image{display:block;max-width:100%;max-height:calc(var(--hub-file-input-viewer-max-height) - 5rem);object-fit:contain}.hub-file-input__viewer-caption{max-width:100%;padding-inline-end:var(--hub-file-input-tile-action-size);overflow:hidden;font-size:var(--hub-file-input-viewer-caption-font-size);text-overflow:ellipsis;white-space:nowrap}.hub-file-input__hint--hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-file-input__dropzone--readonly{cursor:default}.hub-file-input__dropzone--readonly:hover{background-color:var(--hub-file-input-bg);border-color:var(--hub-file-input-border-color)}.hub-file-input__list--grid .hub-file-input__item{flex-direction:column;align-items:stretch}.hub-file-input__list--grid .hub-file-input__thumb{width:100%;height:var(--hub-file-input-grid-thumb-height)}.hub-file-input__list--grid .hub-file-input__actions{justify-content:flex-end}@keyframes hub-file-input-indeterminate{0%{transform:translate(-100%)}to{transform:translate(300%)}}@media(prefers-reduced-motion:reduce){.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{animation:none;width:100%;opacity:.5}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HubTooltipDirective, selector: "[hubTooltip]", inputs: ["hubTooltip", "hubTooltipPlacement", "hubTooltipDelay", "hubTooltipOffset"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11011
11072
|
}
|
|
11012
11073
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubFileInputComponent, decorators: [{
|
|
11013
11074
|
type: Component,
|
|
@@ -11015,8 +11076,356 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
11015
11076
|
'[class]': 'classlist()',
|
|
11016
11077
|
'[class.hub-file-input-host]': 'true',
|
|
11017
11078
|
'(paste)': 'handlePaste($event)'
|
|
11018
|
-
}, template: "<div\n\tclass=\"hub-field hub-file-input\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if (label() || required()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if (label() || required()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div\n\t\tclass=\"hub-field__body\"\n\t\t[class.hub-file-input__body--inline]=\"_inlineSingle()\"\n\t\t[class.hub-file-input__body--inline-multiple]=\"_inlineMultiple()\"\n\t>\n\t\t<!-- The frame listens for the drag, so a drop lands anywhere on the field, tiles included. -->\n\t\t<div\n\t\t\tclass=\"hub-file-input__frame\"\n\t\t\t[class.hub-file-input__frame--dragover]=\"isDragging()\"\n\t\t\t(dragenter)=\"handleDragEnter($event)\"\n\t\t\t(dragover)=\"handleDragOver($event)\"\n\t\t\t(dragleave)=\"handleDragLeave($event)\"\n\t\t\t(drop)=\"handleDrop($event)\"\n\t\t>\n\t\t\t@if (_dropzone() === 'zone') {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"dropzoneTpl\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n\t\t\t}\n\n\t\t\t@if (_tiles().length > 0) {\n\t\t\t\t<ul class=\"hub-file-input__tiles\" [class.hub-file-input__tiles--single]=\"_inlineSingle()\">\n\t\t\t\t\t@for (tile of _tiles(); track tile.key; let index = $index) {\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tclass=\"hub-file-input__tile\"\n\t\t\t\t\t\t\t[class.hub-file-input__tile--changeable]=\"_canChange() && tile.item?.status !== 'uploading'\"\n\t\t\t\t\t\t\t[attr.data-file-kind]=\"tile.kind\"\n\t\t\t\t\t\t\t[attr.data-status]=\"tile.item?.status ?? null\"\n\t\t\t\t\t\t\t[attr.title]=\"tile.name\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<!--\n\t\t\t\t\t\t\t\tActivating a tile opens its file: a stored one is a link to its URL, in a new tab;\n\t\t\t\t\t\t\t\ta picked image opens enlarged; any other picked file opens in a new tab. Replacing\n\t\t\t\t\t\t\t\thas its own button, the pill, so one gesture never means two things.\n\t\t\t\t\t\t\t-->\n\t\t\t\t\t\t\t@if (tile.current) {\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__tile-open\"\n\t\t\t\t\t\t\t\t\t[href]=\"tile.current.url\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().open(tile.name)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleTileKeydown($event, tile, index)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tileBodyTpl\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: tile }\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__tile-open\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().open(tile.name)\"\n\t\t\t\t\t\t\t\t\t(click)=\"openTile(tile, $event)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleTileKeydown($event, tile, index)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tileBodyTpl\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: tile }\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@if (_canChange() && tile.item?.status !== 'uploading') {\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__tile-veil\" aria-hidden=\"true\"></span>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__tile-replace\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().replaceFile(tile.name)\"\n\t\t\t\t\t\t\t\t\t(click)=\"replaceTile(tile)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{{ labels().replace }}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@if (tile.item?.status === 'uploading') {\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress hub-file-input__tile-progress\"\n\t\t\t\t\t\t\t\t\t[class.hub-file-input__progress--indeterminate]=\"tile.item?.progress === null\"\n\t\t\t\t\t\t\t\t\trole=\"progressbar\"\n\t\t\t\t\t\t\t\t\taria-valuemin=\"0\"\n\t\t\t\t\t\t\t\t\taria-valuemax=\"100\"\n\t\t\t\t\t\t\t\t\t[attr.aria-valuenow]=\"tile.item?.progress\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress-bar\"\n\t\t\t\t\t\t\t\t\t\t[style.--hub-file-input-progress-value]=\"tile.item?.progress ?? 0\"\n\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@if (tile.item?.status === 'error') {\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__tile-error\">{{ errorText(tile.item!) }}</span>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__tile-actions\">\n\t\t\t\t\t\t\t\t@if (tile.item?.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t@if (hasUploader) {\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--cancel\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().cancel\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"cancel(tile.item!.id)\"\n\t\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t@if (tile.item?.status === 'error') {\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--retry\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().retry\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"retry(tile.item!.id)\"\n\t\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@if (_canRemove()) {\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--remove\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().removeFile(tile.name)\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"removeTile(tile, index)\"\n\t\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (_dropzone() === 'add') {\n\t\t\t\t\t\t<li class=\"hub-file-input__tile hub-file-input__tile--add\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"dropzoneTpl\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ul>\n\t\t\t}\n\n\t\t\t@if (_isInline()) {\n\t\t\t\t<!--\n\t\t\t\t\tInline keeps the native input out of the label, after the tiles: it is never re-created\n\t\t\t\t\twhen the field fills or empties, focus can always return to it, and its place in the tab\n\t\t\t\t\torder is the add tile's.\n\t\t\t\t-->\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"nativeTpl\" />\n\t\t\t}\n\n\t\t\t@if (_showCount()) {\n\t\t\t\t<p class=\"hub-file-input__count\" [id]=\"id + '-count'\">{{ labels().count(_heldCount(), maxFiles()!) }}</p>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (_listPreview() && _items().length > 0) {\n\t\t\t<ul class=\"hub-file-input__list\" [class.hub-file-input__list--grid]=\"_listPreview() === 'grid'\">\n\t\t\t\t@for (item of _items(); track item.id) {\n\t\t\t\t\t<li class=\"hub-file-input__item\" [attr.data-status]=\"item.status\">\n\t\t\t\t\t\t@if (previewTpt(); as tpt) {\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpt.template\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"previewContext(item)\"\n\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<span class=\"hub-file-input__thumb\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t@if (item.previewUrl) {\n\t\t\t\t\t\t\t\t\t<img class=\"hub-file-input__image\" [src]=\"item.previewUrl\" alt=\"\" />\n\t\t\t\t\t\t\t\t} @else if (iconTpt(); as icon) {\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"icon.template\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item }\"\n\t\t\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__file-icon\"></span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__meta\">\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__name\" [title]=\"item.file.name\">{{ item.file.name }}</span>\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__size\">{{ labels().formatSize(item.file.size) }}</span>\n\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-file-input__progress--indeterminate]=\"item.progress === null\"\n\t\t\t\t\t\t\t\t\t\trole=\"progressbar\"\n\t\t\t\t\t\t\t\t\t\taria-valuemin=\"0\"\n\t\t\t\t\t\t\t\t\t\taria-valuemax=\"100\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-valuenow]=\"item.progress\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress-bar\"\n\t\t\t\t\t\t\t\t\t\t\t[style.--hub-file-input-progress-value]=\"item.progress ?? 0\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__error\">{{ errorText(item) }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__actions\">\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--cancel\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().cancel\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"cancel(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--retry\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().retry\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"retry(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (_canRemove() && item.status !== 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--remove\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().remove\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"remove(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\n\t\t\t@if (_items().length > 1 && _canRemove()) {\n\t\t\t\t<button type=\"button\" class=\"hub-file-input__clear\" (click)=\"clear()\">{{ labels().clear }}</button>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n\n\t<span class=\"hub-file-input__live\" aria-live=\"polite\">{{ announcement() }}</span>\n\n\t<!--\n\t\tThe enlarged image. A native modal <dialog> does the hard parts: Escape closes it, the page\n\t\tbehind turns inert so focus stays inside, and it sits in the top layer above any stacking\n\t\tcontext. Focus goes back to the tile on close, whichever way it closes.\n\t-->\n\t<dialog\n\t\t#viewer\n\t\tclass=\"hub-file-input__viewer\"\n\t\t[attr.aria-label]=\"_viewing()?.name ?? null\"\n\t\t(close)=\"handleViewerClose()\"\n\t\t(click)=\"handleViewerClick($event)\"\n\t>\n\t\t@if (_viewing(); as viewing) {\n\t\t\t<figure class=\"hub-file-input__viewer-figure\">\n\t\t\t\t<img class=\"hub-file-input__viewer-image\" [src]=\"viewing.src\" [alt]=\"viewing.name\" />\n\t\t\t\t<figcaption class=\"hub-file-input__viewer-caption\">{{ viewing.name }}</figcaption>\n\t\t\t</figure>\n\t\t}\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--close\"\n\t\t\t[attr.aria-label]=\"labels().close\"\n\t\t\t(click)=\"closeViewer()\"\n\t\t\tautofocus\n\t\t></button>\n\t</dialog>\n</div>\n\n<!--\n\tThe dropzone is a <label> bound to the hidden native input: clicking or activating it with the\n\tkeyboard opens the file dialog through the platform, so no role, tabindex or key handler is\n\tneeded. The \"browse\" affordance is a <span>, not a <button>, because a button inside a label would\n\topen the dialog twice. As the add tile it keeps only the glyph and the browse text.\n-->\n<ng-template #dropzoneTpl let-add>\n\t<label\n\t\tclass=\"hub-file-input__dropzone\"\n\t\t[for]=\"id\"\n\t\t[class.hub-file-input__dropzone--add]=\"add\"\n\t\t[class.hub-file-input__dropzone--dragover]=\"isDragging()\"\n\t\t[class.hub-file-input__dropzone--no-drop]=\"!dragDrop()\"\n\t\t[class.hub-file-input__dropzone--invalid]=\"isInvalid\"\n\t\t[class.hub-file-input__dropzone--readonly]=\"readonly()\"\n\t>\n\t\t@if (!_isInline()) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"nativeTpl\" />\n\t\t}\n\n\t\t<span class=\"hub-file-input__icon\" aria-hidden=\"true\"></span>\n\n\t\t@if (add) {\n\t\t\t<span class=\"hub-file-input__browse\">{{ browseLabel() }}</span>\n\t\t} @else {\n\t\t\t@if (noticeTpt(); as notice) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"notice.template\"></ng-container>\n\t\t\t}\n\n\t\t\t<span class=\"hub-file-input__prompt\">\n\t\t\t\t@if (dragDrop()) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-text\">{{ dropTextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t@if (dropSubtextLabel()) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-subtext\">{{ dropSubtextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t<span class=\"hub-file-input__browse\">{{ browseLabel() }}</span>\n\t\t\t</span>\n\t\t}\n\n\t\t@if (constraintsHint()) {\n\t\t\t<span class=\"hub-file-input__hint\" [class.hub-file-input__hint--hidden]=\"add\" [id]=\"id + '-hint'\">{{\n\t\t\t\tconstraintsHint()\n\t\t\t}}</span>\n\t\t}\n\t</label>\n</ng-template>\n\n<ng-template #nativeTpl>\n\t<input\n\t\t#nativeInput\n\t\ttype=\"file\"\n\t\tclass=\"hub-file-input__native\"\n\t\t[id]=\"id\"\n\t\t[accept]=\"accept()\"\n\t\t[multiple]=\"multiple()\"\n\t\t[disabled]=\"disabled()\"\n\t\t[attr.capture]=\"capture()\"\n\t\t[attr.tabindex]=\"_dropzone() === 'none' ? -1 : null\"\n\t\t[attr.aria-required]=\"required() ? 'true' : null\"\n\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t[attr.aria-describedby]=\"_describedBy()\"\n\t\t(click)=\"guardNativeClick($event)\"\n\t\t(cancel)=\"cancelReplace()\"\n\t\t(change)=\"handleNativeChange($event)\"\n\t\t(blur)=\"handleBlur($event)\"\n\t/>\n</ng-template>\n\n<ng-template #tileBodyTpl let-tile>\n\t@if (tile.src) {\n\t\t<img class=\"hub-file-input__tile-image\" [src]=\"tile.src\" alt=\"\" (error)=\"markBroken(tile.src)\" />\n\t} @else {\n\t\t<span class=\"hub-file-input__tile-file\">\n\t\t\t<span class=\"hub-file-input__kind-icon\" aria-hidden=\"true\"></span>\n\t\t\t<span class=\"hub-file-input__tile-name\">\n\t\t\t\t<span class=\"hub-file-input__tile-stem\">{{ tile.stem }}</span>\n\t\t\t\t@if (tile.ext) {\n\t\t\t\t\t<span class=\"hub-file-input__tile-ext\">{{ tile.ext }}</span>\n\t\t\t\t}\n\t\t\t</span>\n\t\t</span>\n\t}\n</ng-template>\n", styles: [".hub-file-input__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--hub-file-input-gap);min-height:var(--hub-file-input-min-height);padding:var(--hub-file-input-padding-y) var(--hub-file-input-padding-x);color:var(--hub-file-input-color);background-color:var(--hub-file-input-bg);border:var(--hub-file-input-border-width) var(--hub-file-input-border-style) var(--hub-file-input-border-color);border-radius:var(--hub-file-input-border-radius);text-align:center;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__dropzone:hover{background-color:var(--hub-file-input-hover-bg);border-color:var(--hub-file-input-hover-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:focus-visible){border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__dropzone--dragover,.hub-file-input__dropzone--dragover:hover{background-color:var(--hub-file-input-dragover-bg);border-color:var(--hub-file-input-dragover-border-color)}.hub-file-input__dropzone--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:disabled){cursor:not-allowed}.hub-file-input__dropzone:has(.hub-file-input__native:disabled):hover{background-color:var(--hub-file-input-bg);border-color:var(--hub-file-input-border-color)}.hub-file-input__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.hub-file-input__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:var(--hub-file-input-icon-chip-size);height:var(--hub-file-input-icon-chip-size);background-color:var(--hub-file-input-icon-bg);border-radius:var(--hub-file-input-icon-chip-radius)}.hub-file-input__icon:before{content:\"\";width:var(--hub-file-input-icon-size);height:var(--hub-file-input-icon-size);background-color:var(--hub-file-input-icon-color);-webkit-mask:var(--hub-file-input-icon) center/contain no-repeat;mask:var(--hub-file-input-icon) center/contain no-repeat}.hub-file-input__prompt{display:flex;flex-direction:var(--hub-file-input-prompt-direction);flex-wrap:wrap;align-items:var(--hub-file-input-prompt-align);justify-content:center;gap:var(--hub-file-input-prompt-gap);color:var(--hub-file-input-prompt-color);font-size:var(--hub-file-input-prompt-font-size)}.hub-file-input__drop-text{color:var(--hub-file-input-drop-text-color);font-size:var(--hub-file-input-drop-text-font-size);font-weight:var(--hub-file-input-drop-text-font-weight)}.hub-file-input__drop-subtext{color:var(--hub-file-input-drop-subtext-color);font-size:var(--hub-file-input-drop-subtext-font-size)}.hub-file-input__browse{display:inline-flex;align-items:center;gap:var(--hub-file-input-browse-gap);margin-top:var(--hub-file-input-browse-margin-top);padding:var(--hub-file-input-browse-padding-y) var(--hub-file-input-browse-padding-x);color:var(--hub-file-input-browse-color);font-size:var(--hub-file-input-browse-font-size);font-weight:var(--hub-file-input-browse-font-weight);text-decoration:var(--hub-file-input-browse-text-decoration);background-color:var(--hub-file-input-browse-bg);border-radius:var(--hub-file-input-browse-radius);transition:var(--hub-file-input-transition)}.hub-file-input__browse:before{content:\"\";display:var(--hub-file-input-browse-icon-display);flex:0 0 auto;width:var(--hub-file-input-browse-icon-size);height:var(--hub-file-input-browse-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-browse-icon) center/contain no-repeat;mask:var(--hub-file-input-browse-icon) center/contain no-repeat}.hub-file-input__dropzone:hover .hub-file-input__browse{background-color:var(--hub-file-input-browse-hover-bg)}.hub-file-input__hint{color:var(--hub-file-input-hint-color);font-size:var(--hub-file-input-hint-font-size)}.hub-file-input__list{display:flex;flex-direction:column;gap:var(--hub-file-input-list-gap);margin:var(--hub-file-input-list-margin-top) 0 0;padding:0;list-style:none}.hub-file-input__list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--hub-file-input-grid-min-width),1fr));gap:var(--hub-file-input-grid-gap)}.hub-file-input__item{display:flex;align-items:center;gap:var(--hub-file-input-item-gap);padding:var(--hub-file-input-item-padding-y) var(--hub-file-input-item-padding-x);color:var(--hub-file-input-item-color);background-color:var(--hub-file-input-item-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-item-border-color);border-radius:var(--hub-file-input-item-border-radius);min-width:0}.hub-file-input__item[data-status=error]{border-color:var(--hub-file-input-error-color)}.hub-file-input__item[data-status=done]{border-color:var(--hub-file-input-done-color)}.hub-file-input__thumb{display:flex;flex:none;align-items:center;justify-content:center;width:var(--hub-file-input-thumb-size);height:var(--hub-file-input-thumb-size);overflow:hidden;background-color:var(--hub-file-input-thumb-bg);border-radius:var(--hub-file-input-thumb-radius)}.hub-file-input__image{width:100%;height:100%;object-fit:cover}.hub-file-input__file-icon{display:block;width:var(--hub-file-input-file-icon-size);height:var(--hub-file-input-file-icon-size);background-color:var(--hub-file-input-file-icon-color);-webkit-mask:var(--hub-file-input-file-icon) center/contain no-repeat;mask:var(--hub-file-input-file-icon) center/contain no-repeat}.hub-file-input__meta{display:flex;flex:1 1 auto;flex-direction:column;gap:.125rem;min-width:0}.hub-file-input__name{overflow:hidden;font-size:var(--hub-file-input-name-font-size);text-overflow:ellipsis;white-space:nowrap}.hub-file-input__size{color:var(--hub-file-input-size-color);font-size:var(--hub-file-input-size-font-size)}.hub-file-input__error{color:var(--hub-file-input-error-color);font-size:var(--hub-file-input-error-font-size)}.hub-file-input__progress{display:block;width:100%;height:var(--hub-file-input-progress-height);overflow:hidden;background-color:var(--hub-file-input-progress-track-bg);border-radius:var(--hub-file-input-progress-radius)}.hub-file-input__progress-bar{display:block;width:calc(var(--hub-file-input-progress-value, 0) * 1%);height:100%;background-color:var(--hub-file-input-progress-bar-bg);border-radius:inherit;transition:width .15s linear}.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{width:33%;animation:hub-file-input-indeterminate var(--hub-file-input-progress-indeterminate-duration) ease-in-out infinite}.hub-file-input__actions{display:flex;flex:none;align-items:center;gap:.25rem}.hub-file-input__action{display:block;width:var(--hub-file-input-action-size);height:var(--hub-file-input-action-size);padding:0;background-color:var(--hub-file-input-action-color);border:0;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__action:hover{background-color:var(--hub-file-input-action-hover-color)}.hub-file-input__action--remove{-webkit-mask:var(--hub-file-input-remove-icon) center/contain no-repeat;mask:var(--hub-file-input-remove-icon) center/contain no-repeat}.hub-file-input__action--remove:hover{background-color:var(--hub-file-input-remove-hover-color)}.hub-file-input__action--cancel{-webkit-mask:var(--hub-file-input-cancel-icon) center/contain no-repeat;mask:var(--hub-file-input-cancel-icon) center/contain no-repeat}.hub-file-input__action--retry{-webkit-mask:var(--hub-file-input-retry-icon) center/contain no-repeat;mask:var(--hub-file-input-retry-icon) center/contain no-repeat}.hub-file-input__clear{align-self:flex-start;margin-top:var(--hub-file-input-list-margin-top);padding:0;color:var(--hub-file-input-clear-color);font-size:var(--hub-file-input-clear-font-size);background:none;border:0;text-decoration:underline;cursor:pointer}.hub-file-input__item[data-status=done] .hub-file-input__size:after{display:inline-block;width:.75em;height:.75em;margin-inline-start:.375em;background-color:var(--hub-file-input-done-color);-webkit-mask:var(--hub-file-input-done-icon) center/contain no-repeat;mask:var(--hub-file-input-done-icon) center/contain no-repeat;content:\"\"}.hub-file-input__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-file-input__frame{position:relative}.hub-file-input__body--inline .hub-file-input__frame{width:var(--hub-file-input-inline-width);max-width:100%}.hub-file-input__body--inline .hub-file-input__dropzone{min-height:var(--hub-file-input-inline-min-height);aspect-ratio:var(--hub-file-input-inline-aspect-ratio);border-radius:var(--hub-file-input-tile-radius)}.hub-file-input__frame:has(>.hub-file-input__native:focus-visible) .hub-file-input__dropzone{border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__frame:has(>.hub-file-input__native:disabled) .hub-file-input__dropzone{cursor:not-allowed}.hub-file-input__tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--hub-file-input-grid-min-width),1fr));gap:var(--hub-file-input-grid-gap);margin:0;padding:0;list-style:none}.hub-file-input__dropzone+.hub-file-input__tiles{margin-top:var(--hub-file-input-list-margin-top)}.hub-file-input__tiles--single{display:block}.hub-file-input__tile{position:relative;display:flex;min-width:0;height:var(--hub-file-input-grid-thumb-height);overflow:hidden;color:var(--hub-file-input-color);background-color:var(--hub-file-input-tile-bg);border:var(--hub-file-input-border-width) var(--hub-file-input-tile-border-style) var(--hub-file-input-tile-border-color);border-radius:var(--hub-file-input-tile-radius);transition:var(--hub-file-input-transition)}.hub-file-input__tile[data-status=error]{border-color:var(--hub-file-input-error-color)}.hub-file-input__tile[data-status=done]{border-color:var(--hub-file-input-done-color)}.hub-file-input__tiles--single .hub-file-input__tile{height:auto;min-height:var(--hub-file-input-inline-min-height);aspect-ratio:var(--hub-file-input-inline-aspect-ratio)}.hub-file-input__tile--add{overflow:visible;background:none;border:0}.hub-file-input__dropzone--add{flex:1 1 auto;min-height:0;padding:var(--hub-file-input-tile-padding);border-radius:var(--hub-file-input-tile-radius)}.hub-file-input__tile-open{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;gap:var(--hub-file-input-gap);min-width:0;padding:var(--hub-file-input-tile-padding);color:inherit;font:inherit;text-decoration:none;background:none;border:0;cursor:pointer}.hub-file-input__tile-open:focus-visible{outline:none}.hub-file-input__tile:has(>.hub-file-input__tile-open:focus-visible){border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow)}.hub-file-input__tile-image{position:absolute;inset:0;width:100%;height:100%;padding:var(--hub-file-input-tile-padding);box-sizing:border-box;object-fit:var(--hub-file-input-tile-fit)}.hub-file-input__tile-file{display:flex;flex-direction:column;align-items:center;gap:var(--hub-file-input-gap);max-width:100%;min-width:0}.hub-file-input__kind-icon{display:block;flex:none;width:var(--hub-file-input-kind-icon-size);height:var(--hub-file-input-kind-icon-size);background-color:var(--hub-file-input-kind-icon-color);-webkit-mask:var(--hub-file-input-kind-generic-icon) center/contain no-repeat;mask:var(--hub-file-input-kind-generic-icon) center/contain no-repeat}.hub-file-input__tile[data-file-kind=pdf] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-pdf-icon);mask-image:var(--hub-file-input-kind-pdf-icon)}.hub-file-input__tile[data-file-kind=document] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-document-icon);mask-image:var(--hub-file-input-kind-document-icon)}.hub-file-input__tile[data-file-kind=spreadsheet] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-spreadsheet-icon);mask-image:var(--hub-file-input-kind-spreadsheet-icon)}.hub-file-input__tile[data-file-kind=presentation] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-presentation-icon);mask-image:var(--hub-file-input-kind-presentation-icon)}.hub-file-input__tile[data-file-kind=archive] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-archive-icon);mask-image:var(--hub-file-input-kind-archive-icon)}.hub-file-input__tile[data-file-kind=audio] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-audio-icon);mask-image:var(--hub-file-input-kind-audio-icon)}.hub-file-input__tile[data-file-kind=video] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-video-icon);mask-image:var(--hub-file-input-kind-video-icon)}.hub-file-input__tile[data-file-kind=code] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-code-icon);mask-image:var(--hub-file-input-kind-code-icon)}.hub-file-input__tile[data-file-kind=image] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-image-icon);mask-image:var(--hub-file-input-kind-image-icon)}.hub-file-input__tile-name{display:flex;max-width:100%;min-width:0;color:var(--hub-file-input-tile-name-color);font-size:var(--hub-file-input-tile-name-font-size)}.hub-file-input__tile-stem{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-file-input__tile-ext{flex:none;white-space:nowrap}.hub-file-input__tile-veil{position:absolute;inset:0;background-color:var(--hub-file-input-tile-veil-bg);opacity:0;pointer-events:none;transition:var(--hub-file-input-transition)}.hub-file-input__tile-replace{position:absolute;inset:0;display:inline-flex;align-items:center;gap:var(--hub-file-input-tile-replace-gap);width:fit-content;max-width:calc(100% - 2 * var(--hub-file-input-tile-padding));height:fit-content;margin:auto;padding:var(--hub-file-input-tile-replace-padding-y) var(--hub-file-input-tile-replace-padding-x);overflow:hidden;color:var(--hub-file-input-tile-replace-color);font-family:inherit;font-size:var(--hub-file-input-tile-replace-font-size);font-weight:var(--hub-file-input-browse-font-weight);line-height:1.5;white-space:nowrap;background-color:var(--hub-file-input-tile-replace-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-tile-replace-border-color);border-radius:var(--hub-file-input-tile-replace-radius);box-shadow:var(--hub-file-input-tile-replace-shadow);cursor:pointer;opacity:0;pointer-events:none;transition:var(--hub-file-input-transition)}.hub-file-input__tile-replace:before{content:\"\";flex:none;width:var(--hub-file-input-tile-replace-icon-size);height:var(--hub-file-input-tile-replace-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-tile-replace-icon) center/contain no-repeat;mask:var(--hub-file-input-tile-replace-icon) center/contain no-repeat}.hub-file-input__tile-replace:focus-visible{border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__tile--changeable:hover .hub-file-input__tile-veil{opacity:1}.hub-file-input__tile--changeable:hover .hub-file-input__tile-replace{opacity:1;pointer-events:auto}.hub-file-input__tile--changeable:has(:focus-visible) .hub-file-input__tile-veil{opacity:1}.hub-file-input__tile--changeable:has(:focus-visible) .hub-file-input__tile-replace{opacity:1;pointer-events:auto}.hub-file-input__frame--dragover .hub-file-input__tiles--single .hub-file-input__tile--changeable .hub-file-input__tile-veil,.hub-file-input__frame--dragover .hub-file-input__tiles--single .hub-file-input__tile--changeable .hub-file-input__tile-replace{opacity:1}.hub-file-input__tile--changeable:hover .hub-file-input__tile-file{opacity:0}.hub-file-input__tile--changeable:has(:focus-visible) .hub-file-input__tile-file{opacity:0}.hub-file-input__frame--dragover .hub-file-input__tiles--single .hub-file-input__tile--changeable .hub-file-input__tile-file{opacity:0}.hub-file-input__tile-progress{position:absolute;inset-inline:var(--hub-file-input-tile-padding);inset-block-end:var(--hub-file-input-tile-padding);width:auto}.hub-file-input__tile-error{position:absolute;inset-inline:0;inset-block-end:0;padding:var(--hub-ref-space-1, .25rem) var(--hub-file-input-tile-padding);overflow:hidden;color:var(--hub-file-input-error-color);font-size:var(--hub-file-input-error-font-size);text-overflow:ellipsis;white-space:nowrap;background-color:var(--hub-file-input-tile-error-bg)}.hub-file-input__tile-actions{position:absolute;inset-block-start:var(--hub-file-input-tile-action-inset);inset-inline-end:var(--hub-file-input-tile-action-inset);display:flex;gap:var(--hub-file-input-tile-action-gap)}.hub-file-input__chip{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-file-input-tile-action-size);height:var(--hub-file-input-tile-action-size);padding:0;color:var(--hub-file-input-tile-action-color);background-color:var(--hub-file-input-tile-action-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-tile-action-border-color);border-radius:var(--hub-file-input-tile-action-radius);box-shadow:var(--hub-file-input-tile-action-shadow);cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__chip:before{content:\"\";width:var(--hub-file-input-tile-action-icon-size);height:var(--hub-file-input-tile-action-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-remove-icon) center/contain no-repeat;mask:var(--hub-file-input-remove-icon) center/contain no-repeat}.hub-file-input__chip:hover{color:var(--hub-file-input-tile-action-hover-color)}.hub-file-input__chip:focus-visible{border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__chip--remove:hover{color:var(--hub-file-input-tile-remove-hover-color)}.hub-file-input__chip--cancel:before{-webkit-mask-image:var(--hub-file-input-cancel-icon);mask-image:var(--hub-file-input-cancel-icon)}.hub-file-input__chip--retry:before{-webkit-mask-image:var(--hub-file-input-retry-icon);mask-image:var(--hub-file-input-retry-icon)}.hub-file-input__count{margin:var(--hub-file-input-list-margin-top) 0 0;color:var(--hub-file-input-count-color);font-size:var(--hub-file-input-count-font-size)}.hub-file-input__viewer{max-width:var(--hub-file-input-viewer-max-width);max-height:var(--hub-file-input-viewer-max-height);padding:var(--hub-file-input-viewer-padding);color:var(--hub-file-input-viewer-color);background-color:var(--hub-file-input-viewer-bg);border:0;border-radius:var(--hub-file-input-viewer-radius)}.hub-file-input__viewer::backdrop{background-color:var(--hub-file-input-viewer-backdrop, rgba(0, 0, 0, .7))}.hub-file-input__viewer .hub-file-input__chip--close{position:absolute;inset-block-start:var(--hub-file-input-tile-action-inset);inset-inline-end:var(--hub-file-input-tile-action-inset)}.hub-file-input__viewer-figure{display:flex;flex-direction:column;align-items:center;gap:var(--hub-file-input-gap);margin:0}.hub-file-input__viewer-image{display:block;max-width:100%;max-height:calc(var(--hub-file-input-viewer-max-height) - 5rem);object-fit:contain}.hub-file-input__viewer-caption{max-width:100%;padding-inline-end:var(--hub-file-input-tile-action-size);overflow:hidden;font-size:var(--hub-file-input-viewer-caption-font-size);text-overflow:ellipsis;white-space:nowrap}.hub-file-input__hint--hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-file-input__dropzone--readonly{cursor:default}.hub-file-input__dropzone--readonly:hover{background-color:var(--hub-file-input-bg);border-color:var(--hub-file-input-border-color)}.hub-file-input__list--grid .hub-file-input__item{flex-direction:column;align-items:stretch}.hub-file-input__list--grid .hub-file-input__thumb{width:100%;height:var(--hub-file-input-grid-thumb-height)}.hub-file-input__list--grid .hub-file-input__actions{justify-content:flex-end}@keyframes hub-file-input-indeterminate{0%{transform:translate(-100%)}to{transform:translate(300%)}}@media(prefers-reduced-motion:reduce){.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{animation:none;width:100%;opacity:.5}}\n"] }]
|
|
11019
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxTotalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTotalSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], dragDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDrop", required: false }] }], paste: [{ type: i0.Input, args: [{ isSignal: true, alias: "paste", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], currentFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFile", required: false }] }], imagePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "imagePreview", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], capture: [{ type: i0.Input, args: [{ isSignal: true, alias: "capture", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], dropText: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropText", required: false }] }], dropSubtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropSubtext", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], currentFileRemoved: [{ type: i0.Output, args: ["currentFileRemoved"] }], uploadStateChange: [{ type: i0.Output, args: ["uploadStateChange"] }], nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], viewer: [{ type: i0.ViewChild, args: ['viewer', { isSignal: true }] }], iconTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFileIconDirective), { isSignal: true }] }], previewTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFilePreviewDirective), { isSignal: true }] }], noticeTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFileDropzoneNoticeDirective), { isSignal: true }] }] } });
|
|
11079
|
+
}, template: "<div\n\tclass=\"hub-field hub-file-input\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if (label() || required()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if (label() || required()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div\n\t\tclass=\"hub-field__body\"\n\t\t[class.hub-file-input__body--inline]=\"_inlineSingle()\"\n\t\t[class.hub-file-input__body--inline-multiple]=\"_inlineMultiple()\"\n\t>\n\t\t<!-- The frame listens for the drag, so a drop lands anywhere on the field, tiles included. -->\n\t\t<div\n\t\t\tclass=\"hub-file-input__frame\"\n\t\t\t[class.hub-file-input__frame--dragover]=\"isDragging()\"\n\t\t\t(dragenter)=\"handleDragEnter($event)\"\n\t\t\t(dragover)=\"handleDragOver($event)\"\n\t\t\t(dragleave)=\"handleDragLeave($event)\"\n\t\t\t(drop)=\"handleDrop($event)\"\n\t\t>\n\t\t\t@if (_dropzone() === 'zone') {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"dropzoneTpl\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n\t\t\t}\n\n\t\t\t@if (_tiles().length > 0) {\n\t\t\t\t<ul class=\"hub-file-input__tiles\" [class.hub-file-input__tiles--single]=\"_inlineSingle()\">\n\t\t\t\t\t@for (tile of _tiles(); track tile.key; let index = $index) {\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tclass=\"hub-file-input__tile\"\n\t\t\t\t\t\t\t[class.hub-file-input__tile--changeable]=\"_canChange() && tile.item?.status !== 'uploading'\"\n\t\t\t\t\t\t\t[attr.data-file-kind]=\"tile.kind\"\n\t\t\t\t\t\t\t[attr.data-status]=\"tile.item?.status ?? null\"\n\t\t\t\t\t\t\t[attr.title]=\"tile.name\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<!--\n\t\t\t\t\t\t\t\tActivating a tile opens its file: a stored one is a link to its URL, in a new tab;\n\t\t\t\t\t\t\t\ta picked image opens enlarged; any other picked file opens in a new tab. Replacing\n\t\t\t\t\t\t\t\thas its own button, the pill, so one gesture never means two things.\n\t\t\t\t\t\t\t-->\n\t\t\t\t\t\t\t@if (tile.current) {\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__tile-open\"\n\t\t\t\t\t\t\t\t\t[href]=\"tile.current.url\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().open(tile.name)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleTileKeydown($event, tile, index)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tileBodyTpl\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: tile }\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__tile-open\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().open(tile.name)\"\n\t\t\t\t\t\t\t\t\t(click)=\"openTile(tile, $event)\"\n\t\t\t\t\t\t\t\t\t(keydown)=\"handleTileKeydown($event, tile, index)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tileBodyTpl\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: tile }\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@if (_canChange() && tile.item?.status !== 'uploading') {\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__tile-veil\" aria-hidden=\"true\"></span>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__tile-replace\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().replaceFile(tile.name)\"\n\t\t\t\t\t\t\t\t\t(click)=\"replaceTile(tile)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{{ labels().replace }}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@if (tile.item?.status === 'uploading') {\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress hub-file-input__tile-progress\"\n\t\t\t\t\t\t\t\t\t[class.hub-file-input__progress--indeterminate]=\"tile.item?.progress === null\"\n\t\t\t\t\t\t\t\t\trole=\"progressbar\"\n\t\t\t\t\t\t\t\t\taria-valuemin=\"0\"\n\t\t\t\t\t\t\t\t\taria-valuemax=\"100\"\n\t\t\t\t\t\t\t\t\t[attr.aria-valuenow]=\"tile.item?.progress\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress-bar\"\n\t\t\t\t\t\t\t\t\t\t[style.--hub-file-input-progress-value]=\"tile.item?.progress ?? 0\"\n\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@if (tile.item?.status === 'error') {\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__tile-error\">{{ errorText(tile.item!) }}</span>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__tile-actions\">\n\t\t\t\t\t\t\t\t@if (tile.item?.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t@if (hasUploader) {\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--cancel\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().cancel\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"cancel(tile.item!.id)\"\n\t\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t@if (tile.item?.status === 'error') {\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--retry\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().retry\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"retry(tile.item!.id)\"\n\t\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@if (_canRemove()) {\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--remove\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().removeFile(tile.name)\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"removeTile(tile, index)\"\n\t\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (_dropzone() === 'add') {\n\t\t\t\t\t\t<li class=\"hub-file-input__tile hub-file-input__tile--add\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"dropzoneTpl\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ul>\n\t\t\t}\n\n\t\t\t@if (_isInline()) {\n\t\t\t\t<!--\n\t\t\t\t\tInline keeps the native input out of the label, after the tiles: it is never re-created\n\t\t\t\t\twhen the field fills or empties, focus can always return to it, and its place in the tab\n\t\t\t\t\torder is the add tile's.\n\t\t\t\t-->\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"nativeTpl\" />\n\t\t\t}\n\n\t\t\t@if (_showCount()) {\n\t\t\t\t<p class=\"hub-file-input__count\" [id]=\"id + '-count'\">{{ labels().count(_heldCount(), maxFiles()!) }}</p>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (_listPreview() && _items().length > 0) {\n\t\t\t<ul class=\"hub-file-input__list\" [class.hub-file-input__list--grid]=\"_listPreview() === 'grid'\">\n\t\t\t\t@for (item of _items(); track item.id) {\n\t\t\t\t\t<li class=\"hub-file-input__item\" [attr.data-status]=\"item.status\">\n\t\t\t\t\t\t@if (previewTpt(); as tpt) {\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpt.template\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"previewContext(item)\"\n\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<span class=\"hub-file-input__thumb\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t@if (item.previewUrl) {\n\t\t\t\t\t\t\t\t\t<img class=\"hub-file-input__image\" [src]=\"item.previewUrl\" alt=\"\" />\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t<!--\n\t\t\t\t\t\t\t\t\t\tA nested @if rather than `@else if (iconTpt(); as icon)`: an `as` on an\n\t\t\t\t\t\t\t\t\t\t@else if is only accepted from Angular 20.2, and this package supports\n\t\t\t\t\t\t\t\t\t\tolder ones.\n\t\t\t\t\t\t\t\t\t-->\n\t\t\t\t\t\t\t\t\t@if (iconTpt(); as icon) {\n\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"icon.template\"\n\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item }\"\n\t\t\t\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__file-icon\"></span>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__meta\">\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__name\" [title]=\"item.file.name\">{{ item.file.name }}</span>\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__size\">{{ labels().formatSize(item.file.size) }}</span>\n\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-file-input__progress--indeterminate]=\"item.progress === null\"\n\t\t\t\t\t\t\t\t\t\trole=\"progressbar\"\n\t\t\t\t\t\t\t\t\t\taria-valuemin=\"0\"\n\t\t\t\t\t\t\t\t\t\taria-valuemax=\"100\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-valuenow]=\"item.progress\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress-bar\"\n\t\t\t\t\t\t\t\t\t\t\t[style.--hub-file-input-progress-value]=\"item.progress ?? 0\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__error\">{{ errorText(item) }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__actions\">\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--cancel\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().cancel\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"cancel(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--retry\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().retry\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"retry(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (_canRemove() && item.status !== 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--remove\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().remove\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"remove(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\n\t\t\t@if (_items().length > 1 && _canRemove()) {\n\t\t\t\t<button type=\"button\" class=\"hub-file-input__clear\" (click)=\"clear()\">{{ labels().clear }}</button>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n\n\t<span class=\"hub-file-input__live\" aria-live=\"polite\">{{ announcement() }}</span>\n\n\t<!--\n\t\tThe enlarged image. A native modal <dialog> does the hard parts: Escape closes it, the page\n\t\tbehind turns inert so focus stays inside, and it sits in the top layer above any stacking\n\t\tcontext. Focus goes back to the tile on close, whichever way it closes.\n\t-->\n\t<dialog\n\t\t#viewer\n\t\tclass=\"hub-file-input__viewer\"\n\t\t[attr.aria-label]=\"_viewing()?.name ?? null\"\n\t\t(close)=\"handleViewerClose()\"\n\t\t(click)=\"handleViewerClick($event)\"\n\t>\n\t\t@if (_viewing(); as viewing) {\n\t\t\t<figure class=\"hub-file-input__viewer-figure\">\n\t\t\t\t<img class=\"hub-file-input__viewer-image\" [src]=\"viewing.src\" [alt]=\"viewing.name\" />\n\t\t\t\t<figcaption class=\"hub-file-input__viewer-caption\">{{ viewing.name }}</figcaption>\n\t\t\t</figure>\n\t\t}\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-file-input__chip hub-file-input__chip--close\"\n\t\t\t[attr.aria-label]=\"labels().close\"\n\t\t\t(click)=\"closeViewer()\"\n\t\t\tautofocus\n\t\t></button>\n\t</dialog>\n</div>\n\n<!--\n\tThe dropzone is a <label> bound to the hidden native input: clicking or activating it with the\n\tkeyboard opens the file dialog through the platform, so no role, tabindex or key handler is\n\tneeded. The \"browse\" affordance is a <span>, not a <button>, because a button inside a label would\n\topen the dialog twice. As the add tile it keeps only the glyph and the browse text.\n-->\n<ng-template #dropzoneTpl let-add>\n\t<label\n\t\tclass=\"hub-file-input__dropzone\"\n\t\t[for]=\"id\"\n\t\t[class.hub-file-input__dropzone--add]=\"add\"\n\t\t[class.hub-file-input__dropzone--compact]=\"_isCompact() && !add\"\n\t\t[class.hub-file-input__dropzone--dragover]=\"isDragging()\"\n\t\t[class.hub-file-input__dropzone--no-drop]=\"!dragDrop()\"\n\t\t[class.hub-file-input__dropzone--invalid]=\"isInvalid\"\n\t\t[class.hub-file-input__dropzone--readonly]=\"readonly()\"\n\t>\n\t\t@if (!_isInline()) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"nativeTpl\" />\n\t\t}\n\n\t\t@if (!_isCompact() || add) {\n\t\t\t<span class=\"hub-file-input__icon\" aria-hidden=\"true\"></span>\n\t\t}\n\n\t\t@if (add) {\n\t\t\t<span class=\"hub-file-input__browse\">{{ browseLabel() }}</span>\n\t\t} @else {\n\t\t\t@if (noticeTpt(); as notice) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"notice.template\"></ng-container>\n\t\t\t}\n\n\t\t\t<span class=\"hub-file-input__prompt\">\n\t\t\t\t<!--\n\t\t\t\t\tThe drag copy is the panel's, not the field's: a compact row invites a click, and\n\t\t\t\t\tthe drop keeps working whether or not anything says so. A projected notice and an\n\t\t\t\t\texplicit dropSubtext are the consumer's words and stay.\n\t\t\t\t-->\n\t\t\t\t@if (dragDrop() && !_isCompact()) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-text\">{{ dropTextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t@if (dropSubtextLabel() && (!_isCompact() || dropSubtext())) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-subtext\">{{ dropSubtextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t<span class=\"hub-file-input__browse\">{{ browseLabel() }}</span>\n\t\t\t</span>\n\t\t}\n\n\t\t@if (constraintsHint()) {\n\t\t\t<span class=\"hub-file-input__hint\" [class.hub-file-input__hint--hidden]=\"add\" [id]=\"id + '-hint'\">{{\n\t\t\t\tconstraintsHint()\n\t\t\t}}</span>\n\t\t}\n\t</label>\n</ng-template>\n\n<ng-template #nativeTpl>\n\t<input\n\t\t#nativeInput\n\t\ttype=\"file\"\n\t\tclass=\"hub-file-input__native\"\n\t\t[id]=\"id\"\n\t\t[accept]=\"accept()\"\n\t\t[multiple]=\"multiple()\"\n\t\t[disabled]=\"disabled()\"\n\t\t[attr.capture]=\"capture()\"\n\t\t[attr.tabindex]=\"_dropzone() === 'none' ? -1 : null\"\n\t\t[attr.aria-required]=\"required() ? 'true' : null\"\n\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t[attr.aria-describedby]=\"_describedBy()\"\n\t\t(click)=\"guardNativeClick($event)\"\n\t\t(cancel)=\"cancelReplace()\"\n\t\t(change)=\"handleNativeChange($event)\"\n\t\t(blur)=\"handleBlur($event)\"\n\t/>\n</ng-template>\n\n<ng-template #tileBodyTpl let-tile>\n\t@if (tile.src) {\n\t\t<img class=\"hub-file-input__tile-image\" [src]=\"tile.src\" alt=\"\" (error)=\"markBroken(tile.src)\" />\n\t} @else {\n\t\t<span class=\"hub-file-input__tile-file\">\n\t\t\t<span class=\"hub-file-input__kind-icon\" aria-hidden=\"true\"></span>\n\t\t\t<span class=\"hub-file-input__tile-name\">\n\t\t\t\t<span class=\"hub-file-input__tile-stem\">{{ tile.stem }}</span>\n\t\t\t\t@if (tile.ext) {\n\t\t\t\t\t<span class=\"hub-file-input__tile-ext\">{{ tile.ext }}</span>\n\t\t\t\t}\n\t\t\t</span>\n\t\t</span>\n\t}\n</ng-template>\n", styles: [".hub-file-input__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--hub-file-input-gap);min-height:var(--hub-file-input-min-height);padding:var(--hub-file-input-padding-y) var(--hub-file-input-padding-x);color:var(--hub-file-input-color);background-color:var(--hub-file-input-bg);border:var(--hub-file-input-border-width) var(--hub-file-input-border-style) var(--hub-file-input-border-color);border-radius:var(--hub-file-input-border-radius);text-align:center;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__dropzone:hover{background-color:var(--hub-file-input-hover-bg);border-color:var(--hub-file-input-hover-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:focus-visible){border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__dropzone--compact{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--hub-file-input-compact-gap);min-height:var(--hub-file-input-compact-min-height);padding:var(--hub-file-input-compact-padding-y) var(--hub-file-input-compact-padding-x);text-align:start}.hub-file-input__dropzone--compact .hub-file-input__prompt{flex-direction:row;align-items:center;justify-content:flex-start}.hub-file-input__dropzone--dragover,.hub-file-input__dropzone--dragover:hover{background-color:var(--hub-file-input-dragover-bg);border-color:var(--hub-file-input-dragover-border-color)}.hub-file-input__dropzone--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:disabled){cursor:not-allowed}.hub-file-input__dropzone:has(.hub-file-input__native:disabled):hover{background-color:var(--hub-file-input-bg);border-color:var(--hub-file-input-border-color)}.hub-file-input__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.hub-file-input__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:var(--hub-file-input-icon-chip-size);height:var(--hub-file-input-icon-chip-size);background-color:var(--hub-file-input-icon-bg);border-radius:var(--hub-file-input-icon-chip-radius)}.hub-file-input__icon:before{content:\"\";width:var(--hub-file-input-icon-size);height:var(--hub-file-input-icon-size);background-color:var(--hub-file-input-icon-color);-webkit-mask:var(--hub-file-input-icon) center/contain no-repeat;mask:var(--hub-file-input-icon) center/contain no-repeat}.hub-file-input__prompt{display:flex;flex-direction:var(--hub-file-input-prompt-direction);flex-wrap:wrap;align-items:var(--hub-file-input-prompt-align);justify-content:center;gap:var(--hub-file-input-prompt-gap);color:var(--hub-file-input-prompt-color);font-size:var(--hub-file-input-prompt-font-size)}.hub-file-input__drop-text{color:var(--hub-file-input-drop-text-color);font-size:var(--hub-file-input-drop-text-font-size);font-weight:var(--hub-file-input-drop-text-font-weight)}.hub-file-input__drop-subtext{color:var(--hub-file-input-drop-subtext-color);font-size:var(--hub-file-input-drop-subtext-font-size)}.hub-file-input__browse{display:inline-flex;align-items:center;gap:var(--hub-file-input-browse-gap);margin-top:var(--hub-file-input-browse-margin-top);padding:var(--hub-file-input-browse-padding-y) var(--hub-file-input-browse-padding-x);color:var(--hub-file-input-browse-color);font-size:var(--hub-file-input-browse-font-size);font-weight:var(--hub-file-input-browse-font-weight);text-decoration:var(--hub-file-input-browse-text-decoration);background-color:var(--hub-file-input-browse-bg);border-radius:var(--hub-file-input-browse-radius);transition:var(--hub-file-input-transition)}.hub-file-input__browse:before{content:\"\";display:var(--hub-file-input-browse-icon-display);flex:0 0 auto;width:var(--hub-file-input-browse-icon-size);height:var(--hub-file-input-browse-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-browse-icon) center/contain no-repeat;mask:var(--hub-file-input-browse-icon) center/contain no-repeat}.hub-file-input__dropzone:hover .hub-file-input__browse{background-color:var(--hub-file-input-browse-hover-bg)}.hub-file-input__hint{color:var(--hub-file-input-hint-color);font-size:var(--hub-file-input-hint-font-size)}.hub-file-input__list{display:flex;flex-direction:column;gap:var(--hub-file-input-list-gap);margin:var(--hub-file-input-list-margin-top) 0 0;padding:0;list-style:none}.hub-file-input__list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--hub-file-input-grid-min-width),1fr));gap:var(--hub-file-input-grid-gap)}.hub-file-input__item{display:flex;align-items:center;gap:var(--hub-file-input-item-gap);padding:var(--hub-file-input-item-padding-y) var(--hub-file-input-item-padding-x);color:var(--hub-file-input-item-color);background-color:var(--hub-file-input-item-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-item-border-color);border-radius:var(--hub-file-input-item-border-radius);min-width:0}.hub-file-input__item[data-status=error]{border-color:var(--hub-file-input-error-color)}.hub-file-input__item[data-status=done]{border-color:var(--hub-file-input-done-color)}.hub-file-input__thumb{display:flex;flex:none;align-items:center;justify-content:center;width:var(--hub-file-input-thumb-size);height:var(--hub-file-input-thumb-size);overflow:hidden;background-color:var(--hub-file-input-thumb-bg);border-radius:var(--hub-file-input-thumb-radius)}.hub-file-input__image{width:100%;height:100%;object-fit:cover}.hub-file-input__file-icon{display:block;width:var(--hub-file-input-file-icon-size);height:var(--hub-file-input-file-icon-size);background-color:var(--hub-file-input-file-icon-color);-webkit-mask:var(--hub-file-input-file-icon) center/contain no-repeat;mask:var(--hub-file-input-file-icon) center/contain no-repeat}.hub-file-input__meta{display:flex;flex:1 1 auto;flex-direction:column;gap:.125rem;min-width:0}.hub-file-input__name{overflow:hidden;font-size:var(--hub-file-input-name-font-size);text-overflow:ellipsis;white-space:nowrap}.hub-file-input__size{color:var(--hub-file-input-size-color);font-size:var(--hub-file-input-size-font-size)}.hub-file-input__error{color:var(--hub-file-input-error-color);font-size:var(--hub-file-input-error-font-size)}.hub-file-input__progress{display:block;width:100%;height:var(--hub-file-input-progress-height);overflow:hidden;background-color:var(--hub-file-input-progress-track-bg);border-radius:var(--hub-file-input-progress-radius)}.hub-file-input__progress-bar{display:block;width:calc(var(--hub-file-input-progress-value, 0) * 1%);height:100%;background-color:var(--hub-file-input-progress-bar-bg);border-radius:inherit;transition:width .15s linear}.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{width:33%;animation:hub-file-input-indeterminate var(--hub-file-input-progress-indeterminate-duration) ease-in-out infinite}.hub-file-input__actions{display:flex;flex:none;align-items:center;gap:.25rem}.hub-file-input__action{display:block;width:var(--hub-file-input-action-size);height:var(--hub-file-input-action-size);padding:0;background-color:var(--hub-file-input-action-color);border:0;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__action:hover{background-color:var(--hub-file-input-action-hover-color)}.hub-file-input__action--remove{-webkit-mask:var(--hub-file-input-remove-icon) center/contain no-repeat;mask:var(--hub-file-input-remove-icon) center/contain no-repeat}.hub-file-input__action--remove:hover{background-color:var(--hub-file-input-remove-hover-color)}.hub-file-input__action--cancel{-webkit-mask:var(--hub-file-input-cancel-icon) center/contain no-repeat;mask:var(--hub-file-input-cancel-icon) center/contain no-repeat}.hub-file-input__action--retry{-webkit-mask:var(--hub-file-input-retry-icon) center/contain no-repeat;mask:var(--hub-file-input-retry-icon) center/contain no-repeat}.hub-file-input__clear{align-self:flex-start;margin-top:var(--hub-file-input-list-margin-top);padding:0;color:var(--hub-file-input-clear-color);font-size:var(--hub-file-input-clear-font-size);background:none;border:0;text-decoration:underline;cursor:pointer}.hub-file-input__item[data-status=done] .hub-file-input__size:after{display:inline-block;width:.75em;height:.75em;margin-inline-start:.375em;background-color:var(--hub-file-input-done-color);-webkit-mask:var(--hub-file-input-done-icon) center/contain no-repeat;mask:var(--hub-file-input-done-icon) center/contain no-repeat;content:\"\"}.hub-file-input__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-file-input__frame{position:relative}.hub-file-input__body--inline .hub-file-input__frame{width:var(--hub-file-input-inline-width);max-width:100%}.hub-file-input__body--inline .hub-file-input__dropzone{min-height:var(--hub-file-input-inline-min-height);aspect-ratio:var(--hub-file-input-inline-aspect-ratio);border-radius:var(--hub-file-input-tile-radius)}.hub-file-input__frame:has(>.hub-file-input__native:focus-visible) .hub-file-input__dropzone{border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__frame:has(>.hub-file-input__native:disabled) .hub-file-input__dropzone{cursor:not-allowed}.hub-file-input__tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--hub-file-input-grid-min-width),1fr));gap:var(--hub-file-input-grid-gap);margin:0;padding:0;list-style:none}.hub-file-input__dropzone+.hub-file-input__tiles{margin-top:var(--hub-file-input-list-margin-top)}.hub-file-input__tiles--single{display:block}.hub-file-input__tile{position:relative;display:flex;min-width:0;height:var(--hub-file-input-grid-thumb-height);overflow:hidden;color:var(--hub-file-input-color);background-color:var(--hub-file-input-tile-bg);border:var(--hub-file-input-border-width) var(--hub-file-input-tile-border-style) var(--hub-file-input-tile-border-color);border-radius:var(--hub-file-input-tile-radius);transition:var(--hub-file-input-transition)}.hub-file-input__tile[data-status=error]{border-color:var(--hub-file-input-error-color)}.hub-file-input__tile[data-status=done]{border-color:var(--hub-file-input-done-color)}.hub-file-input__tiles--single .hub-file-input__tile{height:auto;min-height:var(--hub-file-input-inline-min-height);aspect-ratio:var(--hub-file-input-inline-aspect-ratio)}.hub-file-input__tile--add{overflow:visible;background:none;border:0}.hub-file-input__dropzone--add{flex:1 1 auto;min-height:0;padding:var(--hub-file-input-tile-padding);border-radius:var(--hub-file-input-tile-radius)}.hub-file-input__tile-open{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;gap:var(--hub-file-input-gap);min-width:0;padding:var(--hub-file-input-tile-padding);color:inherit;font:inherit;text-decoration:none;background:none;border:0;cursor:pointer}.hub-file-input__tile-open:focus-visible{outline:none}.hub-file-input__tile:has(>.hub-file-input__tile-open:focus-visible){border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow)}.hub-file-input__tile-image{position:absolute;inset:0;width:100%;height:100%;padding:var(--hub-file-input-tile-padding);box-sizing:border-box;object-fit:var(--hub-file-input-tile-fit)}.hub-file-input__tile-file{display:flex;flex-direction:column;align-items:center;gap:var(--hub-file-input-gap);max-width:100%;min-width:0}.hub-file-input__kind-icon{display:block;flex:none;width:var(--hub-file-input-kind-icon-size);height:var(--hub-file-input-kind-icon-size);background-color:var(--hub-file-input-kind-icon-color);-webkit-mask:var(--hub-file-input-kind-generic-icon) center/contain no-repeat;mask:var(--hub-file-input-kind-generic-icon) center/contain no-repeat}.hub-file-input__tile[data-file-kind=pdf] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-pdf-icon);mask-image:var(--hub-file-input-kind-pdf-icon)}.hub-file-input__tile[data-file-kind=document] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-document-icon);mask-image:var(--hub-file-input-kind-document-icon)}.hub-file-input__tile[data-file-kind=spreadsheet] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-spreadsheet-icon);mask-image:var(--hub-file-input-kind-spreadsheet-icon)}.hub-file-input__tile[data-file-kind=presentation] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-presentation-icon);mask-image:var(--hub-file-input-kind-presentation-icon)}.hub-file-input__tile[data-file-kind=archive] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-archive-icon);mask-image:var(--hub-file-input-kind-archive-icon)}.hub-file-input__tile[data-file-kind=audio] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-audio-icon);mask-image:var(--hub-file-input-kind-audio-icon)}.hub-file-input__tile[data-file-kind=video] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-video-icon);mask-image:var(--hub-file-input-kind-video-icon)}.hub-file-input__tile[data-file-kind=code] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-code-icon);mask-image:var(--hub-file-input-kind-code-icon)}.hub-file-input__tile[data-file-kind=image] .hub-file-input__kind-icon{-webkit-mask-image:var(--hub-file-input-kind-image-icon);mask-image:var(--hub-file-input-kind-image-icon)}.hub-file-input__tile-name{display:flex;max-width:100%;min-width:0;color:var(--hub-file-input-tile-name-color);font-size:var(--hub-file-input-tile-name-font-size)}.hub-file-input__tile-stem{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-file-input__tile-ext{flex:none;white-space:nowrap}.hub-file-input__tile-veil{position:absolute;inset:0;background-color:var(--hub-file-input-tile-veil-bg);opacity:0;pointer-events:none;transition:var(--hub-file-input-transition)}.hub-file-input__tile-replace{position:absolute;inset:0;display:inline-flex;align-items:center;gap:var(--hub-file-input-tile-replace-gap);width:fit-content;max-width:calc(100% - 2 * var(--hub-file-input-tile-padding));height:fit-content;margin:auto;padding:var(--hub-file-input-tile-replace-padding-y) var(--hub-file-input-tile-replace-padding-x);overflow:hidden;color:var(--hub-file-input-tile-replace-color);font-family:inherit;font-size:var(--hub-file-input-tile-replace-font-size);font-weight:var(--hub-file-input-browse-font-weight);line-height:1.5;white-space:nowrap;background-color:var(--hub-file-input-tile-replace-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-tile-replace-border-color);border-radius:var(--hub-file-input-tile-replace-radius);box-shadow:var(--hub-file-input-tile-replace-shadow);cursor:pointer;opacity:0;pointer-events:none;transition:var(--hub-file-input-transition)}.hub-file-input__tile-replace:before{content:\"\";flex:none;width:var(--hub-file-input-tile-replace-icon-size);height:var(--hub-file-input-tile-replace-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-tile-replace-icon) center/contain no-repeat;mask:var(--hub-file-input-tile-replace-icon) center/contain no-repeat}.hub-file-input__tile-replace:focus-visible{border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__tile--changeable:hover .hub-file-input__tile-veil{opacity:1}.hub-file-input__tile--changeable:hover .hub-file-input__tile-replace{opacity:1;pointer-events:auto}.hub-file-input__tile--changeable:has(:focus-visible) .hub-file-input__tile-veil{opacity:1}.hub-file-input__tile--changeable:has(:focus-visible) .hub-file-input__tile-replace{opacity:1;pointer-events:auto}.hub-file-input__frame--dragover .hub-file-input__tiles--single .hub-file-input__tile--changeable .hub-file-input__tile-veil,.hub-file-input__frame--dragover .hub-file-input__tiles--single .hub-file-input__tile--changeable .hub-file-input__tile-replace{opacity:1}.hub-file-input__tile--changeable:hover .hub-file-input__tile-file{opacity:0}.hub-file-input__tile--changeable:has(:focus-visible) .hub-file-input__tile-file{opacity:0}.hub-file-input__frame--dragover .hub-file-input__tiles--single .hub-file-input__tile--changeable .hub-file-input__tile-file{opacity:0}.hub-file-input__tile-progress{position:absolute;inset-inline:var(--hub-file-input-tile-padding);inset-block-end:var(--hub-file-input-tile-padding);width:auto}.hub-file-input__tile-error{position:absolute;inset-inline:0;inset-block-end:0;padding:var(--hub-ref-space-1, .25rem) var(--hub-file-input-tile-padding);overflow:hidden;color:var(--hub-file-input-error-color);font-size:var(--hub-file-input-error-font-size);text-overflow:ellipsis;white-space:nowrap;background-color:var(--hub-file-input-tile-error-bg)}.hub-file-input__tile-actions{position:absolute;inset-block-start:var(--hub-file-input-tile-action-inset);inset-inline-end:var(--hub-file-input-tile-action-inset);display:flex;gap:var(--hub-file-input-tile-action-gap)}.hub-file-input__chip{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-file-input-tile-action-size);height:var(--hub-file-input-tile-action-size);padding:0;color:var(--hub-file-input-tile-action-color);background-color:var(--hub-file-input-tile-action-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-tile-action-border-color);border-radius:var(--hub-file-input-tile-action-radius);box-shadow:var(--hub-file-input-tile-action-shadow);cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__chip:before{content:\"\";width:var(--hub-file-input-tile-action-icon-size);height:var(--hub-file-input-tile-action-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-remove-icon) center/contain no-repeat;mask:var(--hub-file-input-remove-icon) center/contain no-repeat}.hub-file-input__chip:hover{color:var(--hub-file-input-tile-action-hover-color)}.hub-file-input__chip:focus-visible{border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__chip--remove:hover{color:var(--hub-file-input-tile-remove-hover-color)}.hub-file-input__chip--cancel:before{-webkit-mask-image:var(--hub-file-input-cancel-icon);mask-image:var(--hub-file-input-cancel-icon)}.hub-file-input__chip--retry:before{-webkit-mask-image:var(--hub-file-input-retry-icon);mask-image:var(--hub-file-input-retry-icon)}.hub-file-input__count{margin:var(--hub-file-input-list-margin-top) 0 0;color:var(--hub-file-input-count-color);font-size:var(--hub-file-input-count-font-size)}.hub-file-input__viewer{max-width:var(--hub-file-input-viewer-max-width);max-height:var(--hub-file-input-viewer-max-height);padding:var(--hub-file-input-viewer-padding);color:var(--hub-file-input-viewer-color);background-color:var(--hub-file-input-viewer-bg);border:0;border-radius:var(--hub-file-input-viewer-radius)}.hub-file-input__viewer::backdrop{background-color:var(--hub-file-input-viewer-backdrop, rgba(0, 0, 0, .7))}.hub-file-input__viewer .hub-file-input__chip--close{position:absolute;inset-block-start:var(--hub-file-input-tile-action-inset);inset-inline-end:var(--hub-file-input-tile-action-inset)}.hub-file-input__viewer-figure{display:flex;flex-direction:column;align-items:center;gap:var(--hub-file-input-gap);margin:0}.hub-file-input__viewer-image{display:block;max-width:100%;max-height:calc(var(--hub-file-input-viewer-max-height) - 5rem);object-fit:contain}.hub-file-input__viewer-caption{max-width:100%;padding-inline-end:var(--hub-file-input-tile-action-size);overflow:hidden;font-size:var(--hub-file-input-viewer-caption-font-size);text-overflow:ellipsis;white-space:nowrap}.hub-file-input__hint--hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-file-input__dropzone--readonly{cursor:default}.hub-file-input__dropzone--readonly:hover{background-color:var(--hub-file-input-bg);border-color:var(--hub-file-input-border-color)}.hub-file-input__list--grid .hub-file-input__item{flex-direction:column;align-items:stretch}.hub-file-input__list--grid .hub-file-input__thumb{width:100%;height:var(--hub-file-input-grid-thumb-height)}.hub-file-input__list--grid .hub-file-input__actions{justify-content:flex-end}@keyframes hub-file-input-indeterminate{0%{transform:translate(-100%)}to{transform:translate(300%)}}@media(prefers-reduced-motion:reduce){.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{animation:none;width:100%;opacity:.5}}\n"] }]
|
|
11080
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxTotalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTotalSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], dragDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDrop", required: false }] }], paste: [{ type: i0.Input, args: [{ isSignal: true, alias: "paste", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], currentFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFile", required: false }] }], imagePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "imagePreview", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], capture: [{ type: i0.Input, args: [{ isSignal: true, alias: "capture", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], dropText: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropText", required: false }] }], dropSubtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropSubtext", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], currentFileRemoved: [{ type: i0.Output, args: ["currentFileRemoved"] }], uploadStateChange: [{ type: i0.Output, args: ["uploadStateChange"] }], nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], viewer: [{ type: i0.ViewChild, args: ['viewer', { isSignal: true }] }], iconTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFileIconDirective), { isSignal: true }] }], previewTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFilePreviewDirective), { isSignal: true }] }], noticeTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFileDropzoneNoticeDirective), { isSignal: true }] }] } });
|
|
11081
|
+
|
|
11082
|
+
/**
|
|
11083
|
+
* The card a {@link HubFileDropDirective} raises while files are being dragged over its target.
|
|
11084
|
+
*
|
|
11085
|
+
* Created by the directive rather than written by the consumer, so turning a page into a drop
|
|
11086
|
+
* zone stays one attribute. It is `aria-hidden` on purpose: dragging a file is a pointer gesture
|
|
11087
|
+
* and there is nothing here for a screen reader to do — the file field the drop feeds is what
|
|
11088
|
+
* answers to the keyboard, and it is still there.
|
|
11089
|
+
*/
|
|
11090
|
+
class HubFileDropOverlayComponent {
|
|
11091
|
+
/** Whether a drag is currently over the target. */
|
|
11092
|
+
visible = input(false, /* @ts-ignore */
|
|
11093
|
+
...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
11094
|
+
/** Whether the card covers the viewport (window scope) rather than its container. */
|
|
11095
|
+
fixed = input(false, /* @ts-ignore */
|
|
11096
|
+
...(ngDevMode ? [{ debugName: "fixed" }] : /* istanbul ignore next */ []));
|
|
11097
|
+
/** The invitation. */
|
|
11098
|
+
text = input('', /* @ts-ignore */
|
|
11099
|
+
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
11100
|
+
/** The second line, usually the restrictions. */
|
|
11101
|
+
subtext = input('', /* @ts-ignore */
|
|
11102
|
+
...(ngDevMode ? [{ debugName: "subtext" }] : /* istanbul ignore next */ []));
|
|
11103
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubFileDropOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11104
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubFileDropOverlayComponent, isStandalone: true, selector: "hub-file-drop-overlay", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class.hub-file-drop__overlay--fixed": "fixed()", "class.hub-file-drop__overlay--visible": "visible()" }, classAttribute: "hub-file-drop__overlay" }, ngImport: i0, template: `
|
|
11105
|
+
<div class="hub-file-drop__card">
|
|
11106
|
+
<span class="hub-file-drop__icon" aria-hidden="true"></span>
|
|
11107
|
+
<span class="hub-file-drop__text">{{ text() }}</span>
|
|
11108
|
+
@if (subtext()) {
|
|
11109
|
+
<span class="hub-file-drop__subtext">{{ subtext() }}</span>
|
|
11110
|
+
}
|
|
11111
|
+
</div>
|
|
11112
|
+
`, isInline: true, styles: [".hub-file-drop__overlay{position:absolute;inset:0;z-index:var(--hub-file-drop-zindex);display:flex;align-items:center;justify-content:center;padding:var(--hub-file-drop-padding);background-color:var(--hub-file-drop-veil-bg);opacity:0;visibility:hidden;transition:opacity var(--hub-file-drop-transition);pointer-events:none}.hub-file-drop__overlay--fixed{position:fixed}.hub-file-drop__overlay--visible{opacity:1;visibility:visible}@media(prefers-reduced-motion:reduce){.hub-file-drop__overlay{transition:none}}.hub-file-drop__card{display:flex;flex-direction:column;align-items:center;gap:var(--hub-file-drop-gap);max-width:var(--hub-file-drop-card-max-width);padding:var(--hub-file-drop-card-padding);color:var(--hub-file-drop-color);background-color:var(--hub-file-drop-card-bg);border:var(--hub-file-drop-border-width) var(--hub-file-drop-border-style) var(--hub-file-drop-border-color);border-radius:var(--hub-file-drop-radius);box-shadow:var(--hub-file-drop-card-shadow);text-align:center}.hub-file-drop__icon{width:var(--hub-file-drop-icon-size);height:var(--hub-file-drop-icon-size);background-color:var(--hub-file-drop-icon-color);-webkit-mask:var(--hub-file-drop-icon) center/contain no-repeat;mask:var(--hub-file-drop-icon) center/contain no-repeat}.hub-file-drop__text{color:var(--hub-file-drop-text-color);font-size:var(--hub-file-drop-text-font-size);font-weight:var(--hub-file-drop-text-font-weight)}.hub-file-drop__subtext{color:var(--hub-file-drop-subtext-color);font-size:var(--hub-file-drop-subtext-font-size)}.hub-file-drop{position:relative}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11113
|
+
}
|
|
11114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubFileDropOverlayComponent, decorators: [{
|
|
11115
|
+
type: Component,
|
|
11116
|
+
args: [{ selector: 'hub-file-drop-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
11117
|
+
class: 'hub-file-drop__overlay',
|
|
11118
|
+
'aria-hidden': 'true',
|
|
11119
|
+
'[class.hub-file-drop__overlay--fixed]': 'fixed()',
|
|
11120
|
+
'[class.hub-file-drop__overlay--visible]': 'visible()'
|
|
11121
|
+
}, template: `
|
|
11122
|
+
<div class="hub-file-drop__card">
|
|
11123
|
+
<span class="hub-file-drop__icon" aria-hidden="true"></span>
|
|
11124
|
+
<span class="hub-file-drop__text">{{ text() }}</span>
|
|
11125
|
+
@if (subtext()) {
|
|
11126
|
+
<span class="hub-file-drop__subtext">{{ subtext() }}</span>
|
|
11127
|
+
}
|
|
11128
|
+
</div>
|
|
11129
|
+
`, styles: [".hub-file-drop__overlay{position:absolute;inset:0;z-index:var(--hub-file-drop-zindex);display:flex;align-items:center;justify-content:center;padding:var(--hub-file-drop-padding);background-color:var(--hub-file-drop-veil-bg);opacity:0;visibility:hidden;transition:opacity var(--hub-file-drop-transition);pointer-events:none}.hub-file-drop__overlay--fixed{position:fixed}.hub-file-drop__overlay--visible{opacity:1;visibility:visible}@media(prefers-reduced-motion:reduce){.hub-file-drop__overlay{transition:none}}.hub-file-drop__card{display:flex;flex-direction:column;align-items:center;gap:var(--hub-file-drop-gap);max-width:var(--hub-file-drop-card-max-width);padding:var(--hub-file-drop-card-padding);color:var(--hub-file-drop-color);background-color:var(--hub-file-drop-card-bg);border:var(--hub-file-drop-border-width) var(--hub-file-drop-border-style) var(--hub-file-drop-border-color);border-radius:var(--hub-file-drop-radius);box-shadow:var(--hub-file-drop-card-shadow);text-align:center}.hub-file-drop__icon{width:var(--hub-file-drop-icon-size);height:var(--hub-file-drop-icon-size);background-color:var(--hub-file-drop-icon-color);-webkit-mask:var(--hub-file-drop-icon) center/contain no-repeat;mask:var(--hub-file-drop-icon) center/contain no-repeat}.hub-file-drop__text{color:var(--hub-file-drop-text-color);font-size:var(--hub-file-drop-text-font-size);font-weight:var(--hub-file-drop-text-font-weight)}.hub-file-drop__subtext{color:var(--hub-file-drop-subtext-color);font-size:var(--hub-file-drop-subtext-font-size)}.hub-file-drop{position:relative}\n"] }]
|
|
11130
|
+
}], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }] } });
|
|
11131
|
+
|
|
11132
|
+
/**
|
|
11133
|
+
* Turns a container — or the whole window — into a zone that takes dropped files.
|
|
11134
|
+
*
|
|
11135
|
+
* `<hub-file-input>` only accepts a drop inside its own box, which is right for a field and
|
|
11136
|
+
* wrong for a screen: on a list of expenses the natural gesture is to drop the receipt anywhere
|
|
11137
|
+
* on the page, and nothing in the library listened at that level. So every application that
|
|
11138
|
+
* wanted it wrote the same component again — the window listeners, the card over the page, the
|
|
11139
|
+
* type and size checks by hand — and got the same three details wrong, the worst of which is
|
|
11140
|
+
* silent: a file dropped outside a drop target makes the browser navigate away from the page,
|
|
11141
|
+
* unsaved form and all.
|
|
11142
|
+
*
|
|
11143
|
+
* The directive raises its own card while the drag is over the target, applies the same
|
|
11144
|
+
* constraints a file field applies (`accept`, `maxSize`, `minSize`, `maxFiles`) with the same
|
|
11145
|
+
* rejection shape, and hands back what passed.
|
|
11146
|
+
*
|
|
11147
|
+
* It is an addition to a file field and not a replacement: dragging is a pointer gesture, so the
|
|
11148
|
+
* card is `aria-hidden` and the keyboard route stays the field's.
|
|
11149
|
+
*
|
|
11150
|
+
* @example
|
|
11151
|
+
* ```html
|
|
11152
|
+
* <section hubFileDrop="window" accept="image/*" [maxSize]="5_000_000"
|
|
11153
|
+
* (filesDropped)="attach($event)" (rejected)="warn($event)">
|
|
11154
|
+
* …the screen…
|
|
11155
|
+
* </section>
|
|
11156
|
+
* ```
|
|
11157
|
+
*/
|
|
11158
|
+
class HubFileDropDirective {
|
|
11159
|
+
#document = inject(DOCUMENT);
|
|
11160
|
+
#element = inject((ElementRef));
|
|
11161
|
+
#renderer = inject(Renderer2);
|
|
11162
|
+
#viewContainer = inject(ViewContainerRef);
|
|
11163
|
+
#config = inject(HUB_FORMS_CONFIG);
|
|
11164
|
+
#isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
|
|
11165
|
+
/**
|
|
11166
|
+
* Where the drag is watched. `element` is the host and its subtree; `window` is the whole
|
|
11167
|
+
* page, which is the one that also stops the browser from opening a file dropped beside the
|
|
11168
|
+
* target instead of on it.
|
|
11169
|
+
*/
|
|
11170
|
+
hubFileDrop = input('element', /* @ts-ignore */
|
|
11171
|
+
...(ngDevMode ? [{ debugName: "hubFileDrop" }] : /* istanbul ignore next */ []));
|
|
11172
|
+
/** Accepted types, in the same grammar as a file field's `accept`. */
|
|
11173
|
+
accept = input('*', /* @ts-ignore */
|
|
11174
|
+
...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
|
|
11175
|
+
/** Largest accepted file, in bytes. */
|
|
11176
|
+
maxSize = input(null, /* @ts-ignore */
|
|
11177
|
+
...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
|
|
11178
|
+
/** Smallest accepted file, in bytes. */
|
|
11179
|
+
minSize = input(null, /* @ts-ignore */
|
|
11180
|
+
...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
|
|
11181
|
+
/** How many files one drop may carry. Anything beyond it is rejected, not silently dropped. */
|
|
11182
|
+
maxFiles = input(null, { ...(ngDevMode ? { debugName: "maxFiles" } : /* istanbul ignore next */ {}), transform: (value) => toLimit(value) });
|
|
11183
|
+
/** Whether the zone is currently accepting drops. */
|
|
11184
|
+
dropDisabled = input(false, { ...(ngDevMode ? { debugName: "dropDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
11185
|
+
/** Whether the card is drawn. Off leaves the behaviour and lets the consumer draw its own. */
|
|
11186
|
+
overlay = input(true, { ...(ngDevMode ? { debugName: "overlay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
11187
|
+
/** The card's invitation. Falls back to the global file-input labels. */
|
|
11188
|
+
dropText = input(null, /* @ts-ignore */
|
|
11189
|
+
...(ngDevMode ? [{ debugName: "dropText" }] : /* istanbul ignore next */ []));
|
|
11190
|
+
/** The card's second line. Falls back to the constraints, written out. */
|
|
11191
|
+
dropSubtext = input(null, /* @ts-ignore */
|
|
11192
|
+
...(ngDevMode ? [{ debugName: "dropSubtext" }] : /* istanbul ignore next */ []));
|
|
11193
|
+
/** The files that passed every constraint. Never emitted empty. */
|
|
11194
|
+
filesDropped = output();
|
|
11195
|
+
/** The files that did not, each with the reason and the limit it broke. */
|
|
11196
|
+
rejected = output();
|
|
11197
|
+
/** Whether a file drag is currently over the target. */
|
|
11198
|
+
dragActive = signal(false, /* @ts-ignore */
|
|
11199
|
+
...(ngDevMode ? [{ debugName: "dragActive" }] : /* istanbul ignore next */ []));
|
|
11200
|
+
/**
|
|
11201
|
+
* Enter and leave fire once per element the drag crosses, so a page full of children would
|
|
11202
|
+
* flicker the card on every one of them. Counting depth is what makes it steady.
|
|
11203
|
+
*/
|
|
11204
|
+
#depth = 0;
|
|
11205
|
+
#overlayRef = null;
|
|
11206
|
+
constructor() {
|
|
11207
|
+
const destroyRef = inject(DestroyRef);
|
|
11208
|
+
if (!this.#isBrowser) {
|
|
11209
|
+
return;
|
|
11210
|
+
}
|
|
11211
|
+
// Re-bound whenever the scope changes: the same directive watching a container and watching
|
|
11212
|
+
// the window are two different sets of listeners, and leaving the old ones attached would
|
|
11213
|
+
// keep a card alive over a page that no longer asked for one.
|
|
11214
|
+
effect((onCleanup) => {
|
|
11215
|
+
const target = this.hubFileDrop() === 'window' ? this.#document : this.#element.nativeElement;
|
|
11216
|
+
const stops = [
|
|
11217
|
+
this.#renderer.listen(target, 'dragenter', (event) => this.#onEnter(event)),
|
|
11218
|
+
this.#renderer.listen(target, 'dragover', (event) => this.#onOver(event)),
|
|
11219
|
+
this.#renderer.listen(target, 'dragleave', (event) => this.#onLeave(event)),
|
|
11220
|
+
this.#renderer.listen(target, 'drop', (event) => this.#onDrop(event))
|
|
11221
|
+
];
|
|
11222
|
+
onCleanup(() => stops.forEach((stop) => stop()));
|
|
11223
|
+
});
|
|
11224
|
+
effect(() => {
|
|
11225
|
+
if (!this.overlay()) {
|
|
11226
|
+
this.#destroyOverlay();
|
|
11227
|
+
return;
|
|
11228
|
+
}
|
|
11229
|
+
const overlay = this.#ensureOverlay();
|
|
11230
|
+
overlay.setInput('visible', this.dragActive());
|
|
11231
|
+
overlay.setInput('fixed', this.hubFileDrop() === 'window');
|
|
11232
|
+
overlay.setInput('text', this.dropText() ?? this.#config.fileInput.dropHere);
|
|
11233
|
+
overlay.setInput('subtext', this.dropSubtext() ?? this.#constraintsText());
|
|
11234
|
+
});
|
|
11235
|
+
destroyRef.onDestroy(() => this.#destroyOverlay());
|
|
11236
|
+
}
|
|
11237
|
+
/** Whether the zone takes files at all right now. */
|
|
11238
|
+
#enabled() {
|
|
11239
|
+
return !this.dropDisabled();
|
|
11240
|
+
}
|
|
11241
|
+
/**
|
|
11242
|
+
* Raises the card, once, for a drag that actually carries files.
|
|
11243
|
+
*
|
|
11244
|
+
* @param event - The dragenter event.
|
|
11245
|
+
*/
|
|
11246
|
+
#onEnter(event) {
|
|
11247
|
+
if (!this.#enabled() || !carriesFiles(event)) {
|
|
11248
|
+
return;
|
|
11249
|
+
}
|
|
11250
|
+
event.preventDefault();
|
|
11251
|
+
this.#depth++;
|
|
11252
|
+
this.dragActive.set(true);
|
|
11253
|
+
}
|
|
11254
|
+
/**
|
|
11255
|
+
* Keeps the target alive. A `dragover` that does not call `preventDefault` refuses the drop —
|
|
11256
|
+
* and on the window that refusal is what makes the browser open the file and lose the page.
|
|
11257
|
+
*
|
|
11258
|
+
* @param event - The dragover event.
|
|
11259
|
+
*/
|
|
11260
|
+
#onOver(event) {
|
|
11261
|
+
if (!this.#enabled() || !carriesFiles(event)) {
|
|
11262
|
+
return;
|
|
11263
|
+
}
|
|
11264
|
+
event.preventDefault();
|
|
11265
|
+
if (event.dataTransfer) {
|
|
11266
|
+
event.dataTransfer.dropEffect = 'copy';
|
|
11267
|
+
}
|
|
11268
|
+
}
|
|
11269
|
+
/**
|
|
11270
|
+
* Lowers the card once the drag has left the target and every child of it.
|
|
11271
|
+
*
|
|
11272
|
+
* @param event - The dragleave event.
|
|
11273
|
+
*/
|
|
11274
|
+
#onLeave(event) {
|
|
11275
|
+
if (!this.#enabled()) {
|
|
11276
|
+
return;
|
|
11277
|
+
}
|
|
11278
|
+
event.preventDefault();
|
|
11279
|
+
this.#depth = Math.max(0, this.#depth - 1);
|
|
11280
|
+
if (this.#depth === 0) {
|
|
11281
|
+
this.dragActive.set(false);
|
|
11282
|
+
}
|
|
11283
|
+
}
|
|
11284
|
+
/**
|
|
11285
|
+
* Applies the constraints to what was dropped and publishes both halves of the answer.
|
|
11286
|
+
*
|
|
11287
|
+
* @param event - The drop event.
|
|
11288
|
+
*/
|
|
11289
|
+
#onDrop(event) {
|
|
11290
|
+
if (!this.#enabled()) {
|
|
11291
|
+
return;
|
|
11292
|
+
}
|
|
11293
|
+
event.preventDefault();
|
|
11294
|
+
this.#depth = 0;
|
|
11295
|
+
this.dragActive.set(false);
|
|
11296
|
+
const accepted = [];
|
|
11297
|
+
const rejections = [];
|
|
11298
|
+
for (const file of extractFiles(event.dataTransfer)) {
|
|
11299
|
+
const rejection = this.#reject(file, accepted.length);
|
|
11300
|
+
if (rejection) {
|
|
11301
|
+
rejections.push(rejection);
|
|
11302
|
+
}
|
|
11303
|
+
else {
|
|
11304
|
+
accepted.push(file);
|
|
11305
|
+
}
|
|
11306
|
+
}
|
|
11307
|
+
if (accepted.length > 0) {
|
|
11308
|
+
this.filesDropped.emit(accepted);
|
|
11309
|
+
}
|
|
11310
|
+
if (rejections.length > 0) {
|
|
11311
|
+
this.rejected.emit(rejections);
|
|
11312
|
+
}
|
|
11313
|
+
}
|
|
11314
|
+
/**
|
|
11315
|
+
* Checks one candidate against the declared constraints.
|
|
11316
|
+
*
|
|
11317
|
+
* @param file - The candidate.
|
|
11318
|
+
* @param accepted - How many files of this drop have already passed.
|
|
11319
|
+
* @returns The rejection, or `null` when the file passes.
|
|
11320
|
+
*/
|
|
11321
|
+
#reject(file, accepted) {
|
|
11322
|
+
const build = (reason, limit) => ({
|
|
11323
|
+
file,
|
|
11324
|
+
reason,
|
|
11325
|
+
limit
|
|
11326
|
+
});
|
|
11327
|
+
if (!matchesAccept(file, this.accept())) {
|
|
11328
|
+
return build('accept', this.accept());
|
|
11329
|
+
}
|
|
11330
|
+
const minSize = this.minSize();
|
|
11331
|
+
if (minSize != null && file.size < minSize) {
|
|
11332
|
+
return build('minSize', minSize);
|
|
11333
|
+
}
|
|
11334
|
+
const maxSize = this.maxSize();
|
|
11335
|
+
if (maxSize != null && file.size > maxSize) {
|
|
11336
|
+
return build('maxSize', maxSize);
|
|
11337
|
+
}
|
|
11338
|
+
const maxFiles = this.maxFiles();
|
|
11339
|
+
if (maxFiles != null && accepted + 1 > maxFiles) {
|
|
11340
|
+
return build('maxFiles', maxFiles);
|
|
11341
|
+
}
|
|
11342
|
+
return null;
|
|
11343
|
+
}
|
|
11344
|
+
/** The restrictions written out, the same sentence a file field puts under its dropzone. */
|
|
11345
|
+
#constraintsText() {
|
|
11346
|
+
const accept = this.accept();
|
|
11347
|
+
return this.#config.fileInput.constraints({
|
|
11348
|
+
accept: !accept || accept === '*' || accept === '*/*' ? null : accept,
|
|
11349
|
+
maxSize: this.maxSize(),
|
|
11350
|
+
maxFiles: this.maxFiles()
|
|
11351
|
+
});
|
|
11352
|
+
}
|
|
11353
|
+
/**
|
|
11354
|
+
* Creates the card and keeps it where it can cover the target: inside the host for a container,
|
|
11355
|
+
* on the body for the window — a card appended to a scrolled container would scroll with it.
|
|
11356
|
+
* The parent is re-checked on every pass, because the scope is an input and can change.
|
|
11357
|
+
*
|
|
11358
|
+
* @returns The card's component reference.
|
|
11359
|
+
*/
|
|
11360
|
+
#ensureOverlay() {
|
|
11361
|
+
this.#overlayRef ??= this.#viewContainer.createComponent(HubFileDropOverlayComponent);
|
|
11362
|
+
const node = this.#overlayRef.location.nativeElement;
|
|
11363
|
+
const parent = this.hubFileDrop() === 'window' ? this.#document.body : this.#element.nativeElement;
|
|
11364
|
+
if (node.parentElement !== parent) {
|
|
11365
|
+
this.#renderer.appendChild(parent, node);
|
|
11366
|
+
}
|
|
11367
|
+
return this.#overlayRef;
|
|
11368
|
+
}
|
|
11369
|
+
/** Removes the card, node included — `ViewContainerRef` does not own where it was moved to. */
|
|
11370
|
+
#destroyOverlay() {
|
|
11371
|
+
if (!this.#overlayRef) {
|
|
11372
|
+
return;
|
|
11373
|
+
}
|
|
11374
|
+
const node = this.#overlayRef.location.nativeElement;
|
|
11375
|
+
node.remove();
|
|
11376
|
+
this.#overlayRef.destroy();
|
|
11377
|
+
this.#overlayRef = null;
|
|
11378
|
+
}
|
|
11379
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubFileDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
11380
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: HubFileDropDirective, isStandalone: true, selector: "[hubFileDrop]", inputs: { hubFileDrop: { classPropertyName: "hubFileDrop", publicName: "hubFileDrop", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, dropDisabled: { classPropertyName: "dropDisabled", publicName: "dropDisabled", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, dropText: { classPropertyName: "dropText", publicName: "dropText", isSignal: true, isRequired: false, transformFunction: null }, dropSubtext: { classPropertyName: "dropSubtext", publicName: "dropSubtext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesDropped: "filesDropped", rejected: "rejected" }, host: { properties: { "class.hub-file-drop": "true", "class.hub-file-drop--active": "dragActive()" } }, ngImport: i0 });
|
|
11381
|
+
}
|
|
11382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubFileDropDirective, decorators: [{
|
|
11383
|
+
type: Directive,
|
|
11384
|
+
args: [{
|
|
11385
|
+
selector: '[hubFileDrop]',
|
|
11386
|
+
standalone: true,
|
|
11387
|
+
host: {
|
|
11388
|
+
'[class.hub-file-drop]': 'true',
|
|
11389
|
+
'[class.hub-file-drop--active]': 'dragActive()'
|
|
11390
|
+
}
|
|
11391
|
+
}]
|
|
11392
|
+
}], ctorParameters: () => [], propDecorators: { hubFileDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubFileDrop", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], dropDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropDisabled", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], dropText: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropText", required: false }] }], dropSubtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropSubtext", required: false }] }], filesDropped: [{ type: i0.Output, args: ["filesDropped"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
|
|
11393
|
+
/**
|
|
11394
|
+
* Reads a file count that may arrive as an attribute string, keeping `null` as "no limit".
|
|
11395
|
+
*
|
|
11396
|
+
* @param value - The bound value.
|
|
11397
|
+
* @returns The limit, or `null`.
|
|
11398
|
+
*/
|
|
11399
|
+
function toLimit(value) {
|
|
11400
|
+
return value == null || value === '' ? null : numberAttribute(value);
|
|
11401
|
+
}
|
|
11402
|
+
/**
|
|
11403
|
+
* Whether a drag event carries files, as opposed to text or a page element.
|
|
11404
|
+
*
|
|
11405
|
+
* @param event - The drag event.
|
|
11406
|
+
* @returns `true` when the payload includes files.
|
|
11407
|
+
*/
|
|
11408
|
+
function carriesFiles(event) {
|
|
11409
|
+
return Array.from(event.dataTransfer?.types ?? []).includes('Files');
|
|
11410
|
+
}
|
|
11411
|
+
/**
|
|
11412
|
+
* Extracts the files a drop carries, skipping the non-file payloads a page can also hold.
|
|
11413
|
+
*
|
|
11414
|
+
* @param transfer - The `DataTransfer` of the event.
|
|
11415
|
+
* @returns The files it carries.
|
|
11416
|
+
*/
|
|
11417
|
+
function extractFiles(transfer) {
|
|
11418
|
+
if (!transfer) {
|
|
11419
|
+
return [];
|
|
11420
|
+
}
|
|
11421
|
+
if (transfer.items?.length) {
|
|
11422
|
+
return Array.from(transfer.items)
|
|
11423
|
+
.filter((item) => item.kind === 'file')
|
|
11424
|
+
.map((item) => item.getAsFile())
|
|
11425
|
+
.filter((file) => file !== null);
|
|
11426
|
+
}
|
|
11427
|
+
return Array.from(transfer.files ?? []);
|
|
11428
|
+
}
|
|
11020
11429
|
|
|
11021
11430
|
/**
|
|
11022
11431
|
* Inverts a colour, or returns the best contrasting black/white when `bw` is enabled.
|
|
@@ -11461,5 +11870,5 @@ const hubFormControlAdapter = {
|
|
|
11461
11870
|
* Generated bundle index. Do not edit.
|
|
11462
11871
|
*/
|
|
11463
11872
|
|
|
11464
|
-
export { FormTextTypes, HUB_COLOR_PALETTES, HUB_FILE_UPLOADER, HUB_FORMS_CONFIG, HubAppendDirective, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFileDropzoneNoticeDirective, HubFileIconDirective, HubFileInputComponent, HubFilePreviewDirective, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInputPrefixDirective, HubInputSuffixDirective, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubPrependDirective, HubSafeUrlPipe, HubSegmentedComponent, HubSegmentedOptionDirective, HubSelectClearButtonDirective, HubSelectComponent, HubSelectFooterDirective, HubSelectFormats, HubSelectHeaderDirective, HubSelectLabelDirective, HubSelectLoadingSpinnerDirective, HubSelectLoadingTextDirective, HubSelectMultiLabelDirective, HubSelectNotFoundDirective, HubSelectOptgroupDirective, HubSelectOptionDirective, HubSelectSuffixDirective, HubSelectTagDirective, HubSelectTypeToSearchDirective, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubTimepickerComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubColorConfig, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFileInputLabels, defaultHubFormsConfig, defaultHubPasswordLabels, defaultInvalidFeedback, fileKey, fileKind, formatFileSize, get, getActiveElement, getMinOrMaxValueFromValidator, hubAcceptedFiles, hubAreEqual, hubFormControlAdapter, hubMaxFileSize, hubMaxFiles, hubMaxTotalSize, hubMinFileSize, hubMinFiles, isDefined$1 as isDefined, isMaskActive, isString, joinButLast, matchesAccept, provideHubFileUploader, provideHubForms, runInZone, scorePasswordStrength, toFileArray, uuid };
|
|
11873
|
+
export { FormTextTypes, HUB_COLOR_PALETTES, HUB_FILE_UPLOADER, HUB_FORMS_CONFIG, HubAppendDirective, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFileDropDirective, HubFileDropOverlayComponent, HubFileDropzoneNoticeDirective, HubFileIconDirective, HubFileInputComponent, HubFilePreviewDirective, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInputPrefixDirective, HubInputSuffixDirective, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubPrependDirective, HubSafeUrlPipe, HubSegmentedComponent, HubSegmentedOptionDirective, HubSelectClearButtonDirective, HubSelectComponent, HubSelectFooterDirective, HubSelectFormats, HubSelectHeaderDirective, HubSelectLabelDirective, HubSelectLoadingSpinnerDirective, HubSelectLoadingTextDirective, HubSelectMultiLabelDirective, HubSelectNotFoundDirective, HubSelectOptgroupDirective, HubSelectOptionDirective, HubSelectSuffixDirective, HubSelectTagDirective, HubSelectTypeToSearchDirective, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubTimepickerComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubColorConfig, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFileInputLabels, defaultHubFormsConfig, defaultHubPasswordLabels, defaultInvalidFeedback, fileKey, fileKind, formatFileSize, get, getActiveElement, getMinOrMaxValueFromValidator, hubAcceptedFiles, hubAreEqual, hubFormControlAdapter, hubMaxFileSize, hubMaxFiles, hubMaxTotalSize, hubMinFileSize, hubMinFiles, isDefined$1 as isDefined, isMaskActive, isString, joinButLast, matchesAccept, provideHubFileUploader, provideHubForms, runInZone, scorePasswordStrength, toFileArray, uuid };
|
|
11465
11874
|
//# sourceMappingURL=ng-hub-ui-forms.mjs.map
|