quang 21.1.2 → 21.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/quang-auth.mjs +25 -25
- package/fesm2022/quang-auth.mjs.map +1 -1
- package/fesm2022/quang-components-autocomplete.mjs +92 -51
- package/fesm2022/quang-components-autocomplete.mjs.map +1 -1
- package/fesm2022/quang-components-checkbox.mjs +8 -8
- package/fesm2022/quang-components-checkbox.mjs.map +1 -1
- package/fesm2022/quang-components-date.mjs +38 -38
- package/fesm2022/quang-components-date.mjs.map +1 -1
- package/fesm2022/quang-components-input.mjs +16 -16
- package/fesm2022/quang-components-input.mjs.map +1 -1
- package/fesm2022/quang-components-paginator.mjs +28 -28
- package/fesm2022/quang-components-paginator.mjs.map +1 -1
- package/fesm2022/quang-components-radio-group.mjs +10 -9
- package/fesm2022/quang-components-radio-group.mjs.map +1 -1
- package/fesm2022/quang-components-select.mjs +15 -15
- package/fesm2022/quang-components-select.mjs.map +1 -1
- package/fesm2022/quang-components-shared.mjs +56 -54
- package/fesm2022/quang-components-shared.mjs.map +1 -1
- package/fesm2022/quang-components-table.mjs +19 -19
- package/fesm2022/quang-components-table.mjs.map +1 -1
- package/fesm2022/quang-components-tabs.mjs +5 -5
- package/fesm2022/quang-components-tabs.mjs.map +1 -1
- package/fesm2022/quang-components-wysiwyg.mjs +33 -33
- package/fesm2022/quang-components-wysiwyg.mjs.map +1 -1
- package/fesm2022/quang-device.mjs +3 -3
- package/fesm2022/quang-loader.mjs +8 -8
- package/fesm2022/quang-loader.mjs.map +1 -1
- package/fesm2022/quang-overlay-modal.mjs +21 -21
- package/fesm2022/quang-overlay-modal.mjs.map +1 -1
- package/fesm2022/quang-overlay-popover.mjs +12 -12
- package/fesm2022/quang-overlay-popover.mjs.map +1 -1
- package/fesm2022/quang-overlay-shared.mjs +33 -33
- package/fesm2022/quang-overlay-shared.mjs.map +1 -1
- package/fesm2022/quang-overlay-toast.mjs +10 -10
- package/fesm2022/quang-overlay-toast.mjs.map +1 -1
- package/fesm2022/quang-overlay-tooltip.mjs +14 -14
- package/fesm2022/quang-overlay-tooltip.mjs.map +1 -1
- package/fesm2022/quang-translation.mjs +6 -6
- package/package.json +3 -2
- package/types/quang-components-autocomplete.d.ts +5 -0
- package/types/quang-components-radio-group.d.ts +1 -1
- package/types/quang-components-shared.d.ts +3 -1
- package/types/quang-forms.d.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"quang-components-radio-group.mjs","sources":["../../../projects/quang/components/radio-group/radio-group.component.ts","../../../projects/quang/components/radio-group/radio-group.component.html","../../../projects/quang/components/radio-group/quang-components-radio-group.ts"],"sourcesContent":["import { NgClass, NgTemplateOutlet } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, TemplateRef, computed, forwardRef, input } from '@angular/core'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\n\nimport { QuangBaseComponent } from 'quang/components/shared'\n\nexport type RadioPosition = 'left' | 'right'\n\nexport interface QuangRadioOptionTemplateContext<T extends string | number | null = string | number | null> {\n $implicit: RadioOption<T>\n selected: boolean\n index: number\n}\n\nexport interface RadioOption<T extends string | number | null = string | number | null> {\n value: T\n label?: string\n disabled?: boolean\n renderer?: TemplateRef<QuangRadioOptionTemplateContext<T>>\n}\n\n@Component({\n selector: 'quang-radio-group',\n templateUrl: './radio-group.component.html',\n styleUrl: './radio-group.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => QuangRadioGroupComponent),\n multi: true,\n },\n ],\n imports: [TranslocoPipe, NgClass, NgTemplateOutlet],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class QuangRadioGroupComponent extends QuangBaseComponent<string | number | null> {\n radioOptions = input.required<RadioOption[]>()\n\n name = input<string>('')\n\n radioPosition = input<RadioPosition>('left')\n\n _radioName = computed(() => this.name() || this.componentId())\n\n getOptionId(index: number): string {\n return `${this.componentId()}-option-${index}`\n }\n\n isOptionDisabled(option: RadioOption): boolean {\n return this._isDisabled() || this.isReadonly() || !!option.disabled\n }\n\n getOptionLabel(option: RadioOption): string {\n if (option.label !== undefined) return option.label\n if (option.value === null) return ''\n return String(option.value)\n }\n\n onSelectOption(option: RadioOption): void {\n if (this.isOptionDisabled(option)) return\n this.onChangedHandler(option.value)\n }\n}\n","<fieldset class=\"mb-3\">\n @if (componentLabel()) {\n <legend\n [id]=\"componentId() + '-label'\"\n class=\"form-label w-100\"\n >\n {{ componentLabel() | transloco }}
|
|
1
|
+
{"version":3,"file":"quang-components-radio-group.mjs","sources":["../../../projects/quang/components/radio-group/radio-group.component.ts","../../../projects/quang/components/radio-group/radio-group.component.html","../../../projects/quang/components/radio-group/quang-components-radio-group.ts"],"sourcesContent":["import { NgClass, NgTemplateOutlet } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, TemplateRef, computed, forwardRef, input } from '@angular/core'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { QuangTooltipDirective } from 'quang/overlay/tooltip'\n\nimport { QuangBaseComponent } from 'quang/components/shared'\n\nexport type RadioPosition = 'left' | 'right'\n\nexport interface QuangRadioOptionTemplateContext<T extends string | number | null = string | number | null> {\n $implicit: RadioOption<T>\n selected: boolean\n index: number\n}\n\nexport interface RadioOption<T extends string | number | null = string | number | null> {\n value: T\n label?: string\n disabled?: boolean\n renderer?: TemplateRef<QuangRadioOptionTemplateContext<T>>\n}\n\n@Component({\n selector: 'quang-radio-group',\n templateUrl: './radio-group.component.html',\n styleUrl: './radio-group.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => QuangRadioGroupComponent),\n multi: true,\n },\n ],\n imports: [TranslocoPipe, NgClass, NgTemplateOutlet, QuangTooltipDirective],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class QuangRadioGroupComponent extends QuangBaseComponent<string | number | null> {\n radioOptions = input.required<RadioOption[]>()\n\n name = input<string>('')\n\n radioPosition = input<RadioPosition>('left')\n\n _radioName = computed(() => this.name() || this.componentId())\n\n getOptionId(index: number): string {\n return `${this.componentId()}-option-${index}`\n }\n\n isOptionDisabled(option: RadioOption): boolean {\n return this._isDisabled() || this.isReadonly() || !!option.disabled\n }\n\n getOptionLabel(option: RadioOption): string {\n if (option.label !== undefined) return option.label\n if (option.value === null) return ''\n return String(option.value)\n }\n\n onSelectOption(option: RadioOption): void {\n if (this.isOptionDisabled(option)) return\n this.onChangedHandler(option.value)\n }\n}\n","<fieldset class=\"mb-3\">\n @if (componentLabel()) {\n <legend\n [id]=\"componentId() + '-label'\"\n class=\"form-label w-100 d-flex gap-2\"\n >\n <div>\n <span>{{ componentLabel() | transloco }}</span>\n <span [hidden]=\"!_isRequired()\">*</span>\n </div>\n @if (helpMessage() && helpMessageTooltip()) {\n <div\n [overlayPosition]=\"helpTooltipPosition()\"\n [quangTooltip]=\"helpMessage() | transloco\"\n [showMethod]=\"showHelpTooltipMethod()\"\n class=\"pointer\"\n >\n <ng-content select=\"[help-icon]\" />\n </div>\n }\n </legend>\n }\n\n <div\n [attr.aria-labelledby]=\"componentLabel() ? componentId() + '-label' : null\"\n [attr.role]=\"'radiogroup'\"\n >\n @for (option of radioOptions(); track option.value ?? $index; let index = $index) {\n <div\n [class.form-check-reverse]=\"radioPosition() === 'right'\"\n class=\"form-check text-start\"\n >\n <input\n [attr.name]=\"_radioName()\"\n [attr.required]=\"getIsRequiredControl()\"\n [checked]=\"_value() === option.value\"\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n [disabled]=\"isOptionDisabled(option)\"\n [id]=\"getOptionId(index)\"\n [ngClass]=\"componentClass()\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"option.value ?? ''\"\n (blur)=\"onBlurHandler()\"\n (change)=\"onSelectOption(option)\"\n class=\"form-check-input\"\n type=\"radio\"\n />\n\n <label\n [htmlFor]=\"getOptionId(index)\"\n [ngClass]=\"{ 'cursor-pointer': !isOptionDisabled(option) }\"\n class=\"form-check-label\"\n >\n @if (!option.renderer) {\n {{ getOptionLabel(option) | transloco }}\n }\n <ng-container\n [ngTemplateOutlet]=\"option.renderer ?? null\"\n [ngTemplateOutletContext]=\"{ $implicit: option, selected: _value() === option.value, index: index }\"\n ></ng-container>\n </label>\n </div>\n }\n </div>\n\n <div\n [class.d-block]=\"_showSuccess()\"\n class=\"valid-feedback\"\n >\n {{ successMessage() | transloco }}\n </div>\n <div\n [class.d-block]=\"_showErrors()\"\n class=\"invalid-feedback\"\n >\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n\n @if (helpMessage() && !helpMessageTooltip()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n</fieldset>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AAsCM,MAAO,wBAAyB,SAAQ,kBAA0C,CAAA;AAdxF,IAAA,WAAA,GAAA;;AAeE,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAC,QAAQ,kFAAiB;AAE9C,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE,2EAAC;AAExB,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAgB,MAAM,oFAAC;AAE5C,QAAA,IAAA,CAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,iFAAC;AAoB/D,IAAA;AAlBC,IAAA,WAAW,CAAC,KAAa,EAAA;QACvB,OAAO,CAAA,EAAG,IAAI,CAAC,WAAW,EAAE,CAAA,QAAA,EAAW,KAAK,EAAE;IAChD;AAEA,IAAA,gBAAgB,CAAC,MAAmB,EAAA;AAClC,QAAA,OAAO,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ;IACrE;AAEA,IAAA,cAAc,CAAC,MAAmB,EAAA;AAChC,QAAA,IAAI,MAAM,CAAC,KAAK,KAAK,SAAS;YAAE,OAAO,MAAM,CAAC,KAAK;AACnD,QAAA,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI;AAAE,YAAA,OAAO,EAAE;AACpC,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;IAC7B;AAEA,IAAA,cAAc,CAAC,MAAmB,EAAA;AAChC,QAAA,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;YAAE;AACnC,QAAA,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC;IACrC;8GA1BW,wBAAwB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EAVxB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,wBAAwB,CAAC;AACvD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;SACF,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClCH,quFAyFA,yIDtD2B,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,qBAAqB,8FAA/D,aAAa,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAGZ,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAdpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,SAAA,EAGlB;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,8BAA8B,CAAC;AACvD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,OAAA,EACQ,CAAC,aAAa,EAAE,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,CAAC,EAAA,eAAA,EACzD,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,quFAAA,EAAA,MAAA,EAAA,CAAA,iFAAA,CAAA,EAAA;;;AEpCjD;;AAEG;;;;"}
|
|
@@ -18,18 +18,18 @@ import { QuangBaseComponent, OptionListParentType, QuangOptionListComponent } fr
|
|
|
18
18
|
class QuangSelectComponent extends QuangBaseComponent {
|
|
19
19
|
constructor() {
|
|
20
20
|
super();
|
|
21
|
-
this.selectionMode = input('single', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
|
|
21
|
+
this.selectionMode = input('single', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
|
|
22
22
|
/**
|
|
23
23
|
* Set the max height of the selection list before scrolling.
|
|
24
24
|
* Default: 18rem
|
|
25
25
|
* @default 18rem
|
|
26
26
|
*/
|
|
27
|
-
this.optionListMaxHeight = input('18rem', ...(ngDevMode ? [{ debugName: "optionListMaxHeight" }] : []));
|
|
28
|
-
this.selectOptions = input.required(...(ngDevMode ? [{ debugName: "selectOptions" }] : []));
|
|
29
|
-
this.scrollBehaviorOnOpen = input('smooth', ...(ngDevMode ? [{ debugName: "scrollBehaviorOnOpen" }] : []));
|
|
30
|
-
this.selectButton = viewChild('selectButton', ...(ngDevMode ? [{ debugName: "selectButton" }] : []));
|
|
27
|
+
this.optionListMaxHeight = input('18rem', ...(ngDevMode ? [{ debugName: "optionListMaxHeight" }] : /* istanbul ignore next */ []));
|
|
28
|
+
this.selectOptions = input.required(...(ngDevMode ? [{ debugName: "selectOptions" }] : /* istanbul ignore next */ []));
|
|
29
|
+
this.scrollBehaviorOnOpen = input('smooth', ...(ngDevMode ? [{ debugName: "scrollBehaviorOnOpen" }] : /* istanbul ignore next */ []));
|
|
30
|
+
this.selectButton = viewChild('selectButton', ...(ngDevMode ? [{ debugName: "selectButton" }] : /* istanbul ignore next */ []));
|
|
31
31
|
/** Whether the option list is currently visible */
|
|
32
|
-
this._showOptions = signal(false, ...(ngDevMode ? [{ debugName: "_showOptions" }] : []));
|
|
32
|
+
this._showOptions = signal(false, ...(ngDevMode ? [{ debugName: "_showOptions" }] : /* istanbul ignore next */ []));
|
|
33
33
|
this._selectedItems = computed(() => {
|
|
34
34
|
if (this._value() !== null) {
|
|
35
35
|
const targetValue = this._value();
|
|
@@ -41,10 +41,10 @@ class QuangSelectComponent extends QuangBaseComponent {
|
|
|
41
41
|
});
|
|
42
42
|
}
|
|
43
43
|
return null;
|
|
44
|
-
}, ...(ngDevMode ? [{ debugName: "_selectedItems" }] : []));
|
|
45
|
-
this.translateValue = input(true, ...(ngDevMode ? [{ debugName: "translateValue" }] : []));
|
|
46
|
-
this.nullOption = input(true, ...(ngDevMode ? [{ debugName: "nullOption" }] : []));
|
|
47
|
-
this.autoSelectSingleOption = input(false, ...(ngDevMode ? [{ debugName: "autoSelectSingleOption" }] : []));
|
|
44
|
+
}, ...(ngDevMode ? [{ debugName: "_selectedItems" }] : /* istanbul ignore next */ []));
|
|
45
|
+
this.translateValue = input(true, ...(ngDevMode ? [{ debugName: "translateValue" }] : /* istanbul ignore next */ []));
|
|
46
|
+
this.nullOption = input(true, ...(ngDevMode ? [{ debugName: "nullOption" }] : /* istanbul ignore next */ []));
|
|
47
|
+
this.autoSelectSingleOption = input(false, ...(ngDevMode ? [{ debugName: "autoSelectSingleOption" }] : /* istanbul ignore next */ []));
|
|
48
48
|
this.ParentType = OptionListParentType.SELECT;
|
|
49
49
|
combineLatest([toObservable(this.autoSelectSingleOption), toObservable(this.selectOptions)])
|
|
50
50
|
.pipe(takeUntilDestroyed(this.destroyRef), filter(([autoselect, options]) => autoselect === true && options.length === 1))
|
|
@@ -147,8 +147,8 @@ class QuangSelectComponent extends QuangBaseComponent {
|
|
|
147
147
|
getOptionIndex(option) {
|
|
148
148
|
return this.selectOptions().findIndex((x) => x.value === option.value);
|
|
149
149
|
}
|
|
150
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
151
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
150
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
151
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: QuangSelectComponent, isStandalone: true, selector: "quang-select", inputs: { selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: true, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, nullOption: { classPropertyName: "nullOption", publicName: "nullOption", isSignal: true, isRequired: false, transformFunction: null }, autoSelectSingleOption: { classPropertyName: "autoSelectSingleOption", publicName: "autoSelectSingleOption", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
152
152
|
{
|
|
153
153
|
provide: NG_VALUE_ACCESSOR,
|
|
154
154
|
useExisting: forwardRef(() => QuangSelectComponent),
|
|
@@ -158,9 +158,9 @@ class QuangSelectComponent extends QuangBaseComponent {
|
|
|
158
158
|
provide: QuangOptionListComponent,
|
|
159
159
|
multi: false,
|
|
160
160
|
},
|
|
161
|
-
], viewQueries: [{ propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n (mouseleave)=\"onMouseLeaveCallback()\"\n class=\"mb-3\"\n>\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label d-flex gap-2\"\n >\n <div>\n <span>{{ componentLabel() | transloco }}</span>\n <span [hidden]=\"!_isRequired()\">*</span>\n </div>\n @if (helpMessage() && helpMessageTooltip()) {\n <div
|
|
161
|
+
], viewQueries: [{ propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n (mouseleave)=\"onMouseLeaveCallback()\"\n class=\"mb-3\"\n>\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label d-flex gap-2\"\n >\n <div>\n <span>{{ componentLabel() | transloco }}</span>\n <span [hidden]=\"!_isRequired()\">*</span>\n </div>\n @if (helpMessage() && helpMessageTooltip()) {\n <div\n [overlayPosition]=\"helpTooltipPosition()\"\n [quangTooltip]=\"helpMessage() | transloco\"\n [showMethod]=\"showHelpTooltipMethod()\"\n class=\"pointer\"\n >\n <ng-content select=\"[help-icon]\" />\n </div>\n }\n </label>\n }\n <div\n [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n class=\"option-list-container\"\n >\n <button\n [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n [attr.aria-expanded]=\"_showOptions()\"\n [attr.required]=\"getIsRequiredControl()\"\n [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n [disabled]=\"_isDisabled()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [tabIndex]=\"componentTabIndex()\"\n (click)=\"changeOptionsVisibility()\"\n (keydown)=\"onButtonKeydown($event)\"\n #selectButton\n aria-haspopup=\"listbox\"\n class=\"form-select\"\n type=\"button\"\n >\n <div\n [class.multiple]=\"selectionMode() === 'multiple'\"\n class=\"content\"\n >\n @if (_selectedItems()?.length) {\n @for (val of _selectedItems(); track val; let last = $last) {\n <span class=\"selected-item\">\n @if (val.renderer) {\n <ng-container\n [ngTemplateOutlet]=\"val.renderer\"\n [ngTemplateOutletContext]=\"{ $implicit: val, selected: true, index: getOptionIndex(val) }\"\n ></ng-container>\n } @else {\n {{ translateValue() ? (val.label | transloco) : val.label }}\n }\n </span>\n @if (!last) {\n <span class=\"separator\">, </span>\n }\n }\n } @else {\n <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n }\n </div>\n </button>\n\n @if (_showOptions()) {\n <quang-option-list\n [_isDisabled]=\"_isDisabled()\"\n [_value]=\"_value()\"\n [componentClass]=\"componentClass()\"\n [componentLabel]=\"componentLabel()\"\n [componentTabIndex]=\"componentTabIndex()\"\n [nullOption]=\"nullOption()\"\n [optionListMaxHeight]=\"optionListMaxHeight()\"\n [parentType]=\"ParentType\"\n [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n [selectButtonRef]=\"selectButton\"\n [selectionMode]=\"selectionMode()\"\n [selectOptions]=\"selectOptions()\"\n [translateValue]=\"translateValue()\"\n (blurHandler)=\"onBlurHandler()\"\n (changedHandler)=\"onChangedHandler($event)\"\n (escapePressed)=\"onEscapePressed()\"\n (tabPressed)=\"onTabPressed($event)\"\n #optionList\n ></quang-option-list>\n }\n </div>\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n @if (helpMessage() && !helpMessageTooltip()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n</div>\n", styles: [":host{display:block}:host .pointer{cursor:pointer}:host .option-list-container{position:relative}.form-select{height:2.375rem;overflow:hidden;display:flex;align-items:center}.form-select:disabled{background-image:unset}.content{flex:1;min-width:0;text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.content.multiple{display:block;text-overflow:unset;overflow:hidden;white-space:nowrap;max-width:100%}.selected-item{display:inline-flex;align-items:center;max-height:100%;white-space:nowrap}.separator{white-space:pre}:host ::ng-deep .content .d-flex{display:inline-flex!important}:host ::ng-deep .content *{max-height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QuangOptionListComponent, selector: "quang-option-list", inputs: ["selectionMode", "optionListMaxHeight", "selectOptions", "selectButtonRef", "_value", "_isDisabled", "componentClass", "componentLabel", "componentTabIndex", "translateValue", "nullOption", "scrollBehaviorOnOpen", "parentType", "parentID"], outputs: ["changedHandler", "blurHandler", "escapePressed", "tabPressed"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
162
162
|
}
|
|
163
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
163
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangSelectComponent, decorators: [{
|
|
164
164
|
type: Component,
|
|
165
165
|
args: [{ selector: 'quang-select', providers: [
|
|
166
166
|
{
|
|
@@ -172,7 +172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
172
172
|
provide: QuangOptionListComponent,
|
|
173
173
|
multi: false,
|
|
174
174
|
},
|
|
175
|
-
], imports: [TranslocoPipe, NgClass, NgTemplateOutlet, QuangOptionListComponent, QuangTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n (mouseleave)=\"onMouseLeaveCallback()\"\n class=\"mb-3\"\n>\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label d-flex gap-2\"\n >\n <div>\n <span>{{ componentLabel() | transloco }}</span>\n <span [hidden]=\"!_isRequired()\">*</span>\n </div>\n @if (helpMessage() && helpMessageTooltip()) {\n <div
|
|
175
|
+
], imports: [TranslocoPipe, NgClass, NgTemplateOutlet, QuangOptionListComponent, QuangTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n (mouseleave)=\"onMouseLeaveCallback()\"\n class=\"mb-3\"\n>\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label d-flex gap-2\"\n >\n <div>\n <span>{{ componentLabel() | transloco }}</span>\n <span [hidden]=\"!_isRequired()\">*</span>\n </div>\n @if (helpMessage() && helpMessageTooltip()) {\n <div\n [overlayPosition]=\"helpTooltipPosition()\"\n [quangTooltip]=\"helpMessage() | transloco\"\n [showMethod]=\"showHelpTooltipMethod()\"\n class=\"pointer\"\n >\n <ng-content select=\"[help-icon]\" />\n </div>\n }\n </label>\n }\n <div\n [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n class=\"option-list-container\"\n >\n <button\n [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n [attr.aria-expanded]=\"_showOptions()\"\n [attr.required]=\"getIsRequiredControl()\"\n [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n [disabled]=\"_isDisabled()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [tabIndex]=\"componentTabIndex()\"\n (click)=\"changeOptionsVisibility()\"\n (keydown)=\"onButtonKeydown($event)\"\n #selectButton\n aria-haspopup=\"listbox\"\n class=\"form-select\"\n type=\"button\"\n >\n <div\n [class.multiple]=\"selectionMode() === 'multiple'\"\n class=\"content\"\n >\n @if (_selectedItems()?.length) {\n @for (val of _selectedItems(); track val; let last = $last) {\n <span class=\"selected-item\">\n @if (val.renderer) {\n <ng-container\n [ngTemplateOutlet]=\"val.renderer\"\n [ngTemplateOutletContext]=\"{ $implicit: val, selected: true, index: getOptionIndex(val) }\"\n ></ng-container>\n } @else {\n {{ translateValue() ? (val.label | transloco) : val.label }}\n }\n </span>\n @if (!last) {\n <span class=\"separator\">, </span>\n }\n }\n } @else {\n <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n }\n </div>\n </button>\n\n @if (_showOptions()) {\n <quang-option-list\n [_isDisabled]=\"_isDisabled()\"\n [_value]=\"_value()\"\n [componentClass]=\"componentClass()\"\n [componentLabel]=\"componentLabel()\"\n [componentTabIndex]=\"componentTabIndex()\"\n [nullOption]=\"nullOption()\"\n [optionListMaxHeight]=\"optionListMaxHeight()\"\n [parentType]=\"ParentType\"\n [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n [selectButtonRef]=\"selectButton\"\n [selectionMode]=\"selectionMode()\"\n [selectOptions]=\"selectOptions()\"\n [translateValue]=\"translateValue()\"\n (blurHandler)=\"onBlurHandler()\"\n (changedHandler)=\"onChangedHandler($event)\"\n (escapePressed)=\"onEscapePressed()\"\n (tabPressed)=\"onTabPressed($event)\"\n #optionList\n ></quang-option-list>\n }\n </div>\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n @if (helpMessage() && !helpMessageTooltip()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n</div>\n", styles: [":host{display:block}:host .pointer{cursor:pointer}:host .option-list-container{position:relative}.form-select{height:2.375rem;overflow:hidden;display:flex;align-items:center}.form-select:disabled{background-image:unset}.content{flex:1;min-width:0;text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.content.multiple{display:block;text-overflow:unset;overflow:hidden;white-space:nowrap;max-width:100%}.selected-item{display:inline-flex;align-items:center;max-height:100%;white-space:nowrap}.separator{white-space:pre}:host ::ng-deep .content .d-flex{display:inline-flex!important}:host ::ng-deep .content *{max-height:100%}\n"] }]
|
|
176
176
|
}], ctorParameters: () => [], propDecorators: { selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], optionListMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionListMaxHeight", required: false }] }], selectOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOptions", required: true }] }], scrollBehaviorOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehaviorOnOpen", required: false }] }], selectButton: [{ type: i0.ViewChild, args: ['selectButton', { isSignal: true }] }], translateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateValue", required: false }] }], nullOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullOption", required: false }] }], autoSelectSingleOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelectSingleOption", required: false }] }] } });
|
|
177
177
|
|
|
178
178
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"quang-components-select.mjs","sources":["../../../projects/quang/components/select/select.component.ts","../../../projects/quang/components/select/select.component.html","../../../projects/quang/components/select/quang-components-select.ts"],"sourcesContent":["import { NgClass, NgTemplateOutlet } from '@angular/common'\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n computed,\n forwardRef,\n input,\n signal,\n viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { QuangTooltipDirective } from 'quang/overlay/tooltip'\nimport { combineLatest, filter } from 'rxjs'\n\nimport {\n OptionListParentType,\n QuangBaseComponent,\n QuangOptionListComponent,\n SelectOption,\n} from 'quang/components/shared'\n\n@Component({\n selector: 'quang-select',\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => QuangSelectComponent),\n multi: true,\n },\n {\n provide: QuangOptionListComponent,\n multi: false,\n },\n ],\n imports: [TranslocoPipe, NgClass, NgTemplateOutlet, QuangOptionListComponent, QuangTooltipDirective],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Select component for choosing one or multiple options from a dropdown.\n *\n * @usageNotes\n * This component supports both single and multiple selection modes. It can be configured\n * to display a list of options and allows users to select one or more of them by setting the `selectionMode` property to either `single` or `multiple`.\n */\nexport class QuangSelectComponent\n extends QuangBaseComponent<string | number | string[] | number[] | null>\n implements AfterViewInit\n{\n selectionMode = input<'single' | 'multiple'>('single')\n\n /**\n * Set the max height of the selection list before scrolling.\n * Default: 18rem\n * @default 18rem\n */\n optionListMaxHeight = input<string>('18rem')\n\n selectOptions = input.required<SelectOption[]>()\n\n scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n selectButton = viewChild<ElementRef<HTMLButtonElement>>('selectButton')\n\n /** Whether the option list is currently visible */\n _showOptions = signal<boolean>(false)\n\n _selectedItems = computed(() => {\n if (this._value() !== null) {\n const targetValue = this._value()\n return this.selectOptions().filter((x) => {\n if (Array.isArray(targetValue)) {\n return targetValue.some((k) => k === x.value)\n }\n return targetValue === x.value\n })\n }\n return null\n })\n\n translateValue = input<boolean>(true)\n\n nullOption = input<boolean>(true)\n\n autoSelectSingleOption = input<boolean>(false)\n\n readonly ParentType = OptionListParentType.SELECT\n\n constructor() {\n super()\n combineLatest([toObservable(this.autoSelectSingleOption), toObservable(this.selectOptions)])\n .pipe(\n takeUntilDestroyed(this.destroyRef),\n filter(([autoselect, options]) => autoselect === true && options.length === 1)\n )\n .subscribe(([_, options]) => {\n if (this._value() === null || this._value() === undefined || this._value() === '') {\n this.onChangedHandler(options[0].value)\n }\n })\n }\n\n changeOptionsVisibility(): void {\n if (this.isReadonly()) return\n if (this._showOptions()) {\n this.hideOptionVisibility()\n } else {\n this.showOptionVisibility()\n }\n }\n\n showOptionVisibility(): void {\n this._showOptions.set(true)\n }\n\n hideOptionVisibility(): void {\n this._showOptions.set(false)\n }\n\n override onBlurHandler() {\n if (this.selectionMode() === 'single') {\n this.hideOptionVisibility()\n super.onBlurHandler()\n }\n }\n\n override onChangedHandler(value: string | number | string[] | number[] | null): void {\n super.onChangedHandler(value)\n if (this.selectionMode() === 'single') {\n this.hideOptionVisibility()\n // Return focus to button after selection\n this.focusButton()\n }\n }\n\n onMouseLeaveCallback() {\n if (this.selectionMode() === 'multiple') {\n this.hideOptionVisibility()\n }\n }\n\n /**\n * Handles keydown events on the select button for accessibility.\n * @param event The keyboard event\n */\n onButtonKeydown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n // Open dropdown if closed\n if (!this._showOptions()) {\n event.preventDefault()\n this.showOptionVisibility()\n }\n break\n case ' ':\n case 'Enter':\n // Toggle dropdown with Space or Enter\n if (!this._showOptions()) {\n event.preventDefault()\n this.showOptionVisibility()\n }\n break\n case 'Escape':\n // Close dropdown and keep focus on button\n if (this._showOptions()) {\n event.preventDefault()\n this.onEscapePressed()\n }\n break\n }\n }\n\n /**\n * Handles Escape key press from option list.\n * Closes dropdown and returns focus to button.\n */\n onEscapePressed(): void {\n this.hideOptionVisibility()\n this.focusButton()\n }\n\n /**\n * Handles Tab key press from option list.\n * Closes dropdown and allows natural tab navigation.\n */\n onTabPressed(_event: { shiftKey: boolean }): void {\n this.hideOptionVisibility()\n }\n\n /**\n * Sets focus to the select button element.\n */\n focusButton(): void {\n const buttonEl = this.selectButton()?.nativeElement\n if (buttonEl) {\n buttonEl.focus()\n }\n }\n\n getOptionIndex(option: SelectOption): number {\n return this.selectOptions().findIndex((x) => x.value === option.value)\n }\n}\n","<div\n (mouseleave)=\"onMouseLeaveCallback()\"\n class=\"mb-3\"\n>\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label d-flex gap-2\"\n >\n <div>\n <span>{{ componentLabel() | transloco }}</span>\n <span [hidden]=\"!_isRequired()\">*</span>\n </div>\n @if (helpMessage() && helpMessageTooltip()) {\n <div [quangTooltip]=\"helpMessage() | transloco\">\n <ng-content select=\"[help-icon]\" />\n </div>\n }\n </label>\n }\n <div\n [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n class=\"option-list-container\"\n >\n <button\n [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n [attr.aria-expanded]=\"_showOptions()\"\n [attr.required]=\"getIsRequiredControl()\"\n [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n [disabled]=\"_isDisabled()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [tabIndex]=\"componentTabIndex()\"\n (click)=\"changeOptionsVisibility()\"\n (keydown)=\"onButtonKeydown($event)\"\n #selectButton\n aria-haspopup=\"listbox\"\n class=\"form-select\"\n type=\"button\"\n >\n <div\n [class.multiple]=\"selectionMode() === 'multiple'\"\n class=\"content\"\n >\n @if (_selectedItems()?.length) {\n @for (val of _selectedItems(); track val; let last = $last) {\n <span class=\"selected-item\">\n @if (val.renderer) {\n <ng-container\n [ngTemplateOutlet]=\"val.renderer\"\n [ngTemplateOutletContext]=\"{ $implicit: val, selected: true, index: getOptionIndex(val) }\"\n ></ng-container>\n } @else {\n {{ translateValue() ? (val.label | transloco) : val.label }}\n }\n </span>\n @if (!last) {\n <span class=\"separator\">, </span>\n }\n }\n } @else {\n <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n }\n </div>\n </button>\n\n @if (_showOptions()) {\n <quang-option-list\n [_isDisabled]=\"_isDisabled()\"\n [_value]=\"_value()\"\n [componentClass]=\"componentClass()\"\n [componentLabel]=\"componentLabel()\"\n [componentTabIndex]=\"componentTabIndex()\"\n [nullOption]=\"nullOption()\"\n [optionListMaxHeight]=\"optionListMaxHeight()\"\n [parentType]=\"ParentType\"\n [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n [selectButtonRef]=\"selectButton\"\n [selectionMode]=\"selectionMode()\"\n [selectOptions]=\"selectOptions()\"\n [translateValue]=\"translateValue()\"\n (blurHandler)=\"onBlurHandler()\"\n (changedHandler)=\"onChangedHandler($event)\"\n (escapePressed)=\"onEscapePressed()\"\n (tabPressed)=\"onTabPressed($event)\"\n #optionList\n ></quang-option-list>\n }\n </div>\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n @if (helpMessage() && !helpMessageTooltip()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"quang-components-select.mjs","sources":["../../../projects/quang/components/select/select.component.ts","../../../projects/quang/components/select/select.component.html","../../../projects/quang/components/select/quang-components-select.ts"],"sourcesContent":["import { NgClass, NgTemplateOutlet } from '@angular/common'\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n computed,\n forwardRef,\n input,\n signal,\n viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { QuangTooltipDirective } from 'quang/overlay/tooltip'\nimport { combineLatest, filter } from 'rxjs'\n\nimport {\n OptionListParentType,\n QuangBaseComponent,\n QuangOptionListComponent,\n SelectOption,\n} from 'quang/components/shared'\n\n@Component({\n selector: 'quang-select',\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => QuangSelectComponent),\n multi: true,\n },\n {\n provide: QuangOptionListComponent,\n multi: false,\n },\n ],\n imports: [TranslocoPipe, NgClass, NgTemplateOutlet, QuangOptionListComponent, QuangTooltipDirective],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Select component for choosing one or multiple options from a dropdown.\n *\n * @usageNotes\n * This component supports both single and multiple selection modes. It can be configured\n * to display a list of options and allows users to select one or more of them by setting the `selectionMode` property to either `single` or `multiple`.\n */\nexport class QuangSelectComponent\n extends QuangBaseComponent<string | number | string[] | number[] | null>\n implements AfterViewInit\n{\n selectionMode = input<'single' | 'multiple'>('single')\n\n /**\n * Set the max height of the selection list before scrolling.\n * Default: 18rem\n * @default 18rem\n */\n optionListMaxHeight = input<string>('18rem')\n\n selectOptions = input.required<SelectOption[]>()\n\n scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n selectButton = viewChild<ElementRef<HTMLButtonElement>>('selectButton')\n\n /** Whether the option list is currently visible */\n _showOptions = signal<boolean>(false)\n\n _selectedItems = computed(() => {\n if (this._value() !== null) {\n const targetValue = this._value()\n return this.selectOptions().filter((x) => {\n if (Array.isArray(targetValue)) {\n return targetValue.some((k) => k === x.value)\n }\n return targetValue === x.value\n })\n }\n return null\n })\n\n translateValue = input<boolean>(true)\n\n nullOption = input<boolean>(true)\n\n autoSelectSingleOption = input<boolean>(false)\n\n readonly ParentType = OptionListParentType.SELECT\n\n constructor() {\n super()\n combineLatest([toObservable(this.autoSelectSingleOption), toObservable(this.selectOptions)])\n .pipe(\n takeUntilDestroyed(this.destroyRef),\n filter(([autoselect, options]) => autoselect === true && options.length === 1)\n )\n .subscribe(([_, options]) => {\n if (this._value() === null || this._value() === undefined || this._value() === '') {\n this.onChangedHandler(options[0].value)\n }\n })\n }\n\n changeOptionsVisibility(): void {\n if (this.isReadonly()) return\n if (this._showOptions()) {\n this.hideOptionVisibility()\n } else {\n this.showOptionVisibility()\n }\n }\n\n showOptionVisibility(): void {\n this._showOptions.set(true)\n }\n\n hideOptionVisibility(): void {\n this._showOptions.set(false)\n }\n\n override onBlurHandler() {\n if (this.selectionMode() === 'single') {\n this.hideOptionVisibility()\n super.onBlurHandler()\n }\n }\n\n override onChangedHandler(value: string | number | string[] | number[] | null): void {\n super.onChangedHandler(value)\n if (this.selectionMode() === 'single') {\n this.hideOptionVisibility()\n // Return focus to button after selection\n this.focusButton()\n }\n }\n\n onMouseLeaveCallback() {\n if (this.selectionMode() === 'multiple') {\n this.hideOptionVisibility()\n }\n }\n\n /**\n * Handles keydown events on the select button for accessibility.\n * @param event The keyboard event\n */\n onButtonKeydown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n // Open dropdown if closed\n if (!this._showOptions()) {\n event.preventDefault()\n this.showOptionVisibility()\n }\n break\n case ' ':\n case 'Enter':\n // Toggle dropdown with Space or Enter\n if (!this._showOptions()) {\n event.preventDefault()\n this.showOptionVisibility()\n }\n break\n case 'Escape':\n // Close dropdown and keep focus on button\n if (this._showOptions()) {\n event.preventDefault()\n this.onEscapePressed()\n }\n break\n }\n }\n\n /**\n * Handles Escape key press from option list.\n * Closes dropdown and returns focus to button.\n */\n onEscapePressed(): void {\n this.hideOptionVisibility()\n this.focusButton()\n }\n\n /**\n * Handles Tab key press from option list.\n * Closes dropdown and allows natural tab navigation.\n */\n onTabPressed(_event: { shiftKey: boolean }): void {\n this.hideOptionVisibility()\n }\n\n /**\n * Sets focus to the select button element.\n */\n focusButton(): void {\n const buttonEl = this.selectButton()?.nativeElement\n if (buttonEl) {\n buttonEl.focus()\n }\n }\n\n getOptionIndex(option: SelectOption): number {\n return this.selectOptions().findIndex((x) => x.value === option.value)\n }\n}\n","<div\n (mouseleave)=\"onMouseLeaveCallback()\"\n class=\"mb-3\"\n>\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label d-flex gap-2\"\n >\n <div>\n <span>{{ componentLabel() | transloco }}</span>\n <span [hidden]=\"!_isRequired()\">*</span>\n </div>\n @if (helpMessage() && helpMessageTooltip()) {\n <div\n [overlayPosition]=\"helpTooltipPosition()\"\n [quangTooltip]=\"helpMessage() | transloco\"\n [showMethod]=\"showHelpTooltipMethod()\"\n class=\"pointer\"\n >\n <ng-content select=\"[help-icon]\" />\n </div>\n }\n </label>\n }\n <div\n [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n class=\"option-list-container\"\n >\n <button\n [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n [attr.aria-expanded]=\"_showOptions()\"\n [attr.required]=\"getIsRequiredControl()\"\n [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n [disabled]=\"_isDisabled()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [tabIndex]=\"componentTabIndex()\"\n (click)=\"changeOptionsVisibility()\"\n (keydown)=\"onButtonKeydown($event)\"\n #selectButton\n aria-haspopup=\"listbox\"\n class=\"form-select\"\n type=\"button\"\n >\n <div\n [class.multiple]=\"selectionMode() === 'multiple'\"\n class=\"content\"\n >\n @if (_selectedItems()?.length) {\n @for (val of _selectedItems(); track val; let last = $last) {\n <span class=\"selected-item\">\n @if (val.renderer) {\n <ng-container\n [ngTemplateOutlet]=\"val.renderer\"\n [ngTemplateOutletContext]=\"{ $implicit: val, selected: true, index: getOptionIndex(val) }\"\n ></ng-container>\n } @else {\n {{ translateValue() ? (val.label | transloco) : val.label }}\n }\n </span>\n @if (!last) {\n <span class=\"separator\">, </span>\n }\n }\n } @else {\n <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n }\n </div>\n </button>\n\n @if (_showOptions()) {\n <quang-option-list\n [_isDisabled]=\"_isDisabled()\"\n [_value]=\"_value()\"\n [componentClass]=\"componentClass()\"\n [componentLabel]=\"componentLabel()\"\n [componentTabIndex]=\"componentTabIndex()\"\n [nullOption]=\"nullOption()\"\n [optionListMaxHeight]=\"optionListMaxHeight()\"\n [parentType]=\"ParentType\"\n [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n [selectButtonRef]=\"selectButton\"\n [selectionMode]=\"selectionMode()\"\n [selectOptions]=\"selectOptions()\"\n [translateValue]=\"translateValue()\"\n (blurHandler)=\"onBlurHandler()\"\n (changedHandler)=\"onChangedHandler($event)\"\n (escapePressed)=\"onEscapePressed()\"\n (tabPressed)=\"onTabPressed($event)\"\n #optionList\n ></quang-option-list>\n }\n </div>\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n @if (helpMessage() && !helpMessageTooltip()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -19,14 +19,16 @@ const makeId = (length) => {
|
|
|
19
19
|
|
|
20
20
|
class QuangBaseComponent {
|
|
21
21
|
constructor() {
|
|
22
|
-
this.componentId = input(makeId(10), ...(ngDevMode ? [{ debugName: "componentId" }] : []));
|
|
23
|
-
this.isReadonly = input(false, ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
|
|
22
|
+
this.componentId = input(makeId(10), ...(ngDevMode ? [{ debugName: "componentId" }] : /* istanbul ignore next */ []));
|
|
23
|
+
this.isReadonly = input(false, ...(ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []));
|
|
24
24
|
this.isReadonly$ = toObservable(this.isReadonly);
|
|
25
|
-
this.componentTabIndex = input(0, ...(ngDevMode ? [{ debugName: "componentTabIndex" }] : []));
|
|
26
|
-
this.componentClass = input('', ...(ngDevMode ? [{ debugName: "componentClass" }] : []));
|
|
27
|
-
this.componentLabel = input('', ...(ngDevMode ? [{ debugName: "componentLabel" }] : []));
|
|
28
|
-
this.componentPlaceholder = input('', ...(ngDevMode ? [{ debugName: "componentPlaceholder" }] : []));
|
|
29
|
-
this.
|
|
25
|
+
this.componentTabIndex = input(0, ...(ngDevMode ? [{ debugName: "componentTabIndex" }] : /* istanbul ignore next */ []));
|
|
26
|
+
this.componentClass = input('', ...(ngDevMode ? [{ debugName: "componentClass" }] : /* istanbul ignore next */ []));
|
|
27
|
+
this.componentLabel = input('', ...(ngDevMode ? [{ debugName: "componentLabel" }] : /* istanbul ignore next */ []));
|
|
28
|
+
this.componentPlaceholder = input('', ...(ngDevMode ? [{ debugName: "componentPlaceholder" }] : /* istanbul ignore next */ []));
|
|
29
|
+
this.helpTooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "helpTooltipPosition" }] : /* istanbul ignore next */ []));
|
|
30
|
+
this.showHelpTooltipMethod = input('hover', ...(ngDevMode ? [{ debugName: "showHelpTooltipMethod" }] : /* istanbul ignore next */ []));
|
|
31
|
+
this.errorMap = input([], ...(ngDevMode ? [{ debugName: "errorMap" }] : /* istanbul ignore next */ []));
|
|
30
32
|
this.errorMap$ = toObservable(this.errorMap)
|
|
31
33
|
.pipe(takeUntilDestroyed())
|
|
32
34
|
.subscribe(() => {
|
|
@@ -34,31 +36,31 @@ class QuangBaseComponent {
|
|
|
34
36
|
this.checkFormErrors();
|
|
35
37
|
}
|
|
36
38
|
});
|
|
37
|
-
this._errorMessagesByKey = computed(() => new Map((this.errorMap() ?? []).map((errorData) => [errorData.error, errorData.message])), ...(ngDevMode ? [{ debugName: "_errorMessagesByKey" }] : []));
|
|
38
|
-
this.successMessage = input('', ...(ngDevMode ? [{ debugName: "successMessage" }] : []));
|
|
39
|
-
this.helpMessage = input('', ...(ngDevMode ? [{ debugName: "helpMessage" }] : []));
|
|
40
|
-
this.formControl = input(...(ngDevMode ? [undefined, { debugName: "formControl" }] : []));
|
|
39
|
+
this._errorMessagesByKey = computed(() => new Map((this.errorMap() ?? []).map((errorData) => [errorData.error, errorData.message])), ...(ngDevMode ? [{ debugName: "_errorMessagesByKey" }] : /* istanbul ignore next */ []));
|
|
40
|
+
this.successMessage = input('', ...(ngDevMode ? [{ debugName: "successMessage" }] : /* istanbul ignore next */ []));
|
|
41
|
+
this.helpMessage = input('', ...(ngDevMode ? [{ debugName: "helpMessage" }] : /* istanbul ignore next */ []));
|
|
42
|
+
this.formControl = input(...(ngDevMode ? [undefined, { debugName: "formControl" }] : /* istanbul ignore next */ []));
|
|
41
43
|
// If true, the help message will be shown in a tooltip. Remember to set the `helpMessage` input and add help-icon as ng-content
|
|
42
|
-
this.helpMessageTooltip = input(false, ...(ngDevMode ? [{ debugName: "helpMessageTooltip" }] : []));
|
|
44
|
+
this.helpMessageTooltip = input(false, ...(ngDevMode ? [{ debugName: "helpMessageTooltip" }] : /* istanbul ignore next */ []));
|
|
43
45
|
this.componentBlur = output();
|
|
44
|
-
this._value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
|
|
45
|
-
this._isRequired = signal(false, ...(ngDevMode ? [{ debugName: "_isRequired" }] : []));
|
|
46
|
-
this._isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
|
|
47
|
-
this._isTouched = signal(false, ...(ngDevMode ? [{ debugName: "_isTouched" }] : []));
|
|
48
|
-
this._isValid = signal(false, ...(ngDevMode ? [{ debugName: "_isValid" }] : []));
|
|
49
|
-
this._showSuccess = computed(() => this.successMessage() && this._isValid() && this._isTouched() && !this._isDisabled(), ...(ngDevMode ? [{ debugName: "_showSuccess" }] : []));
|
|
50
|
-
this._showErrors = computed(() => this.errorMap()?.length > 0 && !this._isValid() && this._isTouched() && !this._isDisabled(), ...(ngDevMode ? [{ debugName: "_showErrors" }] : []));
|
|
51
|
-
this._currentErrorMessage = signal('', ...(ngDevMode ? [{ debugName: "_currentErrorMessage" }] : []));
|
|
52
|
-
this._currentErrorMessageExtraData = signal({}, ...(ngDevMode ? [{ debugName: "_currentErrorMessageExtraData" }] : []));
|
|
53
|
-
this._ngControl = signal(null, ...(ngDevMode ? [{ debugName: "_ngControl" }] : []));
|
|
54
|
-
this._injector = signal(inject(Injector), ...(ngDevMode ? [{ debugName: "_injector" }] : []));
|
|
46
|
+
this._value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
|
|
47
|
+
this._isRequired = signal(false, ...(ngDevMode ? [{ debugName: "_isRequired" }] : /* istanbul ignore next */ []));
|
|
48
|
+
this._isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
|
|
49
|
+
this._isTouched = signal(false, ...(ngDevMode ? [{ debugName: "_isTouched" }] : /* istanbul ignore next */ []));
|
|
50
|
+
this._isValid = signal(false, ...(ngDevMode ? [{ debugName: "_isValid" }] : /* istanbul ignore next */ []));
|
|
51
|
+
this._showSuccess = computed(() => this.successMessage() && this._isValid() && this._isTouched() && !this._isDisabled(), ...(ngDevMode ? [{ debugName: "_showSuccess" }] : /* istanbul ignore next */ []));
|
|
52
|
+
this._showErrors = computed(() => this.errorMap()?.length > 0 && !this._isValid() && this._isTouched() && !this._isDisabled(), ...(ngDevMode ? [{ debugName: "_showErrors" }] : /* istanbul ignore next */ []));
|
|
53
|
+
this._currentErrorMessage = signal('', ...(ngDevMode ? [{ debugName: "_currentErrorMessage" }] : /* istanbul ignore next */ []));
|
|
54
|
+
this._currentErrorMessageExtraData = signal({}, ...(ngDevMode ? [{ debugName: "_currentErrorMessageExtraData" }] : /* istanbul ignore next */ []));
|
|
55
|
+
this._ngControl = signal(null, ...(ngDevMode ? [{ debugName: "_ngControl" }] : /* istanbul ignore next */ []));
|
|
56
|
+
this._injector = signal(inject(Injector), ...(ngDevMode ? [{ debugName: "_injector" }] : /* istanbul ignore next */ []));
|
|
55
57
|
this.getIsRequiredControl = computed(() => {
|
|
56
58
|
const control = this._ngControl()?.control;
|
|
57
59
|
if (!control) {
|
|
58
60
|
return false;
|
|
59
61
|
}
|
|
60
62
|
return control.hasValidator(Validators.required) || control.hasValidator(Validators.requiredTrue);
|
|
61
|
-
}, ...(ngDevMode ? [{ debugName: "getIsRequiredControl" }] : []));
|
|
63
|
+
}, ...(ngDevMode ? [{ debugName: "getIsRequiredControl" }] : /* istanbul ignore next */ []));
|
|
62
64
|
this.destroyRef = inject(DestroyRef);
|
|
63
65
|
this.onChangeIsReadonly = this.isReadonly$.pipe(takeUntilDestroyed()).subscribe((isReadonly) => {
|
|
64
66
|
this._isDisabled.set(isReadonly || this._ngControl()?.disabled || false);
|
|
@@ -159,12 +161,12 @@ class QuangBaseComponent {
|
|
|
159
161
|
ngAfterViewInit() {
|
|
160
162
|
this.setupFormControl();
|
|
161
163
|
}
|
|
162
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
163
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.
|
|
164
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
165
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.7", type: QuangBaseComponent, isStandalone: true, inputs: { componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, componentTabIndex: { classPropertyName: "componentTabIndex", publicName: "componentTabIndex", isSignal: true, isRequired: false, transformFunction: null }, componentClass: { classPropertyName: "componentClass", publicName: "componentClass", isSignal: true, isRequired: false, transformFunction: null }, componentLabel: { classPropertyName: "componentLabel", publicName: "componentLabel", isSignal: true, isRequired: false, transformFunction: null }, componentPlaceholder: { classPropertyName: "componentPlaceholder", publicName: "componentPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, helpTooltipPosition: { classPropertyName: "helpTooltipPosition", publicName: "helpTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, showHelpTooltipMethod: { classPropertyName: "showHelpTooltipMethod", publicName: "showHelpTooltipMethod", isSignal: true, isRequired: false, transformFunction: null }, errorMap: { classPropertyName: "errorMap", publicName: "errorMap", isSignal: true, isRequired: false, transformFunction: null }, successMessage: { classPropertyName: "successMessage", publicName: "successMessage", isSignal: true, isRequired: false, transformFunction: null }, helpMessage: { classPropertyName: "helpMessage", publicName: "helpMessage", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, helpMessageTooltip: { classPropertyName: "helpMessageTooltip", publicName: "helpMessageTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { componentBlur: "componentBlur" }, ngImport: i0 }); }
|
|
164
166
|
}
|
|
165
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
167
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangBaseComponent, decorators: [{
|
|
166
168
|
type: Directive
|
|
167
|
-
}], ctorParameters: () => [], propDecorators: { componentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentId", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], componentTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentTabIndex", required: false }] }], componentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentClass", required: false }] }], componentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentLabel", required: false }] }], componentPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentPlaceholder", required: false }] }], errorMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMap", required: false }] }], successMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "successMessage", required: false }] }], helpMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpMessage", required: false }] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: false }] }], helpMessageTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpMessageTooltip", required: false }] }], componentBlur: [{ type: i0.Output, args: ["componentBlur"] }] } });
|
|
169
|
+
}], ctorParameters: () => [], propDecorators: { componentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentId", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], componentTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentTabIndex", required: false }] }], componentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentClass", required: false }] }], componentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentLabel", required: false }] }], componentPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentPlaceholder", required: false }] }], helpTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpTooltipPosition", required: false }] }], showHelpTooltipMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHelpTooltipMethod", required: false }] }], errorMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMap", required: false }] }], successMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "successMessage", required: false }] }], helpMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpMessage", required: false }] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: false }] }], helpMessageTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpMessageTooltip", required: false }] }], componentBlur: [{ type: i0.Output, args: ["componentBlur"] }] } });
|
|
168
170
|
|
|
169
171
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
170
172
|
var OptionListParentType;
|
|
@@ -175,32 +177,32 @@ var OptionListParentType;
|
|
|
175
177
|
class QuangOptionListComponent {
|
|
176
178
|
constructor() {
|
|
177
179
|
this.logLevel = inject(QUANG_LOGGING_BEHAVIOR, { optional: true });
|
|
178
|
-
this.selectionMode = input('single', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
|
|
179
|
-
this.optionListMaxHeight = input('201px', ...(ngDevMode ? [{ debugName: "optionListMaxHeight" }] : []));
|
|
180
|
-
this.selectOptions = input([], ...(ngDevMode ? [{ debugName: "selectOptions" }] : []));
|
|
181
|
-
this.selectButtonRef = input.required(...(ngDevMode ? [{ debugName: "selectButtonRef" }] : []));
|
|
182
|
-
this._value = input(...(ngDevMode ? [undefined, { debugName: "_value" }] : []));
|
|
183
|
-
this._isDisabled = input(...(ngDevMode ? [undefined, { debugName: "_isDisabled" }] : []));
|
|
184
|
-
this.componentClass = input('', ...(ngDevMode ? [{ debugName: "componentClass" }] : []));
|
|
185
|
-
this.componentLabel = input('', ...(ngDevMode ? [{ debugName: "componentLabel" }] : []));
|
|
186
|
-
this.componentTabIndex = input(0, ...(ngDevMode ? [{ debugName: "componentTabIndex" }] : []));
|
|
187
|
-
this.translateValue = input(false, ...(ngDevMode ? [{ debugName: "translateValue" }] : []));
|
|
188
|
-
this.nullOption = input(true, ...(ngDevMode ? [{ debugName: "nullOption" }] : []));
|
|
189
|
-
this.elementWidth = signal('0px', ...(ngDevMode ? [{ debugName: "elementWidth" }] : []));
|
|
190
|
-
this.elementTop = signal('0px', ...(ngDevMode ? [{ debugName: "elementTop" }] : []));
|
|
191
|
-
this.elementBottom = signal('0px', ...(ngDevMode ? [{ debugName: "elementBottom" }] : []));
|
|
192
|
-
this.scrollBehaviorOnOpen = input('smooth', ...(ngDevMode ? [{ debugName: "scrollBehaviorOnOpen" }] : []));
|
|
180
|
+
this.selectionMode = input('single', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
|
|
181
|
+
this.optionListMaxHeight = input('201px', ...(ngDevMode ? [{ debugName: "optionListMaxHeight" }] : /* istanbul ignore next */ []));
|
|
182
|
+
this.selectOptions = input([], ...(ngDevMode ? [{ debugName: "selectOptions" }] : /* istanbul ignore next */ []));
|
|
183
|
+
this.selectButtonRef = input.required(...(ngDevMode ? [{ debugName: "selectButtonRef" }] : /* istanbul ignore next */ []));
|
|
184
|
+
this._value = input(...(ngDevMode ? [undefined, { debugName: "_value" }] : /* istanbul ignore next */ []));
|
|
185
|
+
this._isDisabled = input(...(ngDevMode ? [undefined, { debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
|
|
186
|
+
this.componentClass = input('', ...(ngDevMode ? [{ debugName: "componentClass" }] : /* istanbul ignore next */ []));
|
|
187
|
+
this.componentLabel = input('', ...(ngDevMode ? [{ debugName: "componentLabel" }] : /* istanbul ignore next */ []));
|
|
188
|
+
this.componentTabIndex = input(0, ...(ngDevMode ? [{ debugName: "componentTabIndex" }] : /* istanbul ignore next */ []));
|
|
189
|
+
this.translateValue = input(false, ...(ngDevMode ? [{ debugName: "translateValue" }] : /* istanbul ignore next */ []));
|
|
190
|
+
this.nullOption = input(true, ...(ngDevMode ? [{ debugName: "nullOption" }] : /* istanbul ignore next */ []));
|
|
191
|
+
this.elementWidth = signal('0px', ...(ngDevMode ? [{ debugName: "elementWidth" }] : /* istanbul ignore next */ []));
|
|
192
|
+
this.elementTop = signal('0px', ...(ngDevMode ? [{ debugName: "elementTop" }] : /* istanbul ignore next */ []));
|
|
193
|
+
this.elementBottom = signal('0px', ...(ngDevMode ? [{ debugName: "elementBottom" }] : /* istanbul ignore next */ []));
|
|
194
|
+
this.scrollBehaviorOnOpen = input('smooth', ...(ngDevMode ? [{ debugName: "scrollBehaviorOnOpen" }] : /* istanbul ignore next */ []));
|
|
193
195
|
this.changedHandler = output();
|
|
194
196
|
this.blurHandler = output();
|
|
195
197
|
/** Emitted when user presses Escape - parent should close dropdown and return focus to trigger */
|
|
196
198
|
this.escapePressed = output();
|
|
197
199
|
/** Emitted when user presses Tab - parent should handle focus transition */
|
|
198
200
|
this.tabPressed = output();
|
|
199
|
-
this.optionListContainer = viewChild('optionListContainer', ...(ngDevMode ? [{ debugName: "optionListContainer" }] : []));
|
|
201
|
+
this.optionListContainer = viewChild('optionListContainer', ...(ngDevMode ? [{ debugName: "optionListContainer" }] : /* istanbul ignore next */ []));
|
|
200
202
|
this.destroyRef = inject(DestroyRef);
|
|
201
|
-
this.parentType = input.required(...(ngDevMode ? [{ debugName: "parentType" }] : []));
|
|
202
|
-
this.parentID = input('', ...(ngDevMode ? [{ debugName: "parentID" }] : []));
|
|
203
|
-
this.searchString = signal('', ...(ngDevMode ? [{ debugName: "searchString" }] : []));
|
|
203
|
+
this.parentType = input.required(...(ngDevMode ? [{ debugName: "parentType" }] : /* istanbul ignore next */ []));
|
|
204
|
+
this.parentID = input('', ...(ngDevMode ? [{ debugName: "parentID" }] : /* istanbul ignore next */ []));
|
|
205
|
+
this.searchString = signal('', ...(ngDevMode ? [{ debugName: "searchString" }] : /* istanbul ignore next */ []));
|
|
204
206
|
this.searchResetTimer = null;
|
|
205
207
|
this.selectButtonRef$ = toObservable(this.selectButtonRef)
|
|
206
208
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
@@ -223,11 +225,11 @@ class QuangOptionListComponent {
|
|
|
223
225
|
];
|
|
224
226
|
}
|
|
225
227
|
return [...this.selectOptions()];
|
|
226
|
-
}, ...(ngDevMode ? [{ debugName: "selectOptionsList" }] : []));
|
|
228
|
+
}, ...(ngDevMode ? [{ debugName: "selectOptionsList" }] : /* istanbul ignore next */ []));
|
|
227
229
|
this.onKeyDown = null;
|
|
228
|
-
this.selectedElementIndex = computed(() => this.selectOptionsList()?.findIndex((x) => x?.value === this._value()) ?? 0, ...(ngDevMode ? [{ debugName: "selectedElementIndex" }] : []));
|
|
230
|
+
this.selectedElementIndex = computed(() => this.selectOptionsList()?.findIndex((x) => x?.value === this._value()) ?? 0, ...(ngDevMode ? [{ debugName: "selectedElementIndex" }] : /* istanbul ignore next */ []));
|
|
229
231
|
/** Signal to track currently focused item index for aria-activedescendant */
|
|
230
|
-
this.focusedItemIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedItemIndex" }] : []));
|
|
232
|
+
this.focusedItemIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedItemIndex" }] : /* istanbul ignore next */ []));
|
|
231
233
|
this.optionList$ = effect(() => {
|
|
232
234
|
const optionListContainer = this.optionListContainer();
|
|
233
235
|
const parentType = this.parentType();
|
|
@@ -329,7 +331,7 @@ class QuangOptionListComponent {
|
|
|
329
331
|
}
|
|
330
332
|
}
|
|
331
333
|
});
|
|
332
|
-
}, ...(ngDevMode ? [{ debugName: "optionList$" }] : []));
|
|
334
|
+
}, ...(ngDevMode ? [{ debugName: "optionList$" }] : /* istanbul ignore next */ []));
|
|
333
335
|
}
|
|
334
336
|
/**
|
|
335
337
|
* Returns the ID of the currently focused item for aria-activedescendant
|
|
@@ -449,10 +451,10 @@ class QuangOptionListComponent {
|
|
|
449
451
|
this.getOptionListTop();
|
|
450
452
|
});
|
|
451
453
|
}
|
|
452
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
453
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
454
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangOptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
455
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: QuangOptionListComponent, isStandalone: true, selector: "quang-option-list", inputs: { selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: false, transformFunction: null }, selectButtonRef: { classPropertyName: "selectButtonRef", publicName: "selectButtonRef", isSignal: true, isRequired: true, transformFunction: null }, _value: { classPropertyName: "_value", publicName: "_value", isSignal: true, isRequired: false, transformFunction: null }, _isDisabled: { classPropertyName: "_isDisabled", publicName: "_isDisabled", isSignal: true, isRequired: false, transformFunction: null }, componentClass: { classPropertyName: "componentClass", publicName: "componentClass", isSignal: true, isRequired: false, transformFunction: null }, componentLabel: { classPropertyName: "componentLabel", publicName: "componentLabel", isSignal: true, isRequired: false, transformFunction: null }, componentTabIndex: { classPropertyName: "componentTabIndex", publicName: "componentTabIndex", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, nullOption: { classPropertyName: "nullOption", publicName: "nullOption", isSignal: true, isRequired: false, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, parentType: { classPropertyName: "parentType", publicName: "parentType", isSignal: true, isRequired: true, transformFunction: null }, parentID: { classPropertyName: "parentID", publicName: "parentID", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changedHandler: "changedHandler", blurHandler: "blurHandler", escapePressed: "escapePressed", tabPressed: "tabPressed" }, host: { listeners: { "window:scroll": "changePosition()" } }, viewQueries: [{ propertyName: "optionListContainer", first: true, predicate: ["optionListContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n [attr.aria-label]=\"componentLabel()\"\n [ngStyle]=\"{\n 'max-height': optionListMaxHeight(),\n '--option-list-width': elementWidth(),\n '--option-list-top': elementTop(),\n '--option-list-bottom': elementBottom(),\n }\"\n (blur)=\"onBlurHandler($event)\"\n #optionListContainer\n aria-orientation=\"vertical\"\n class=\"option-list\"\n id=\"optionList\"\n role=\"listbox\"\n tabindex=\"0\"\n>\n <ul role=\"presentation\">\n @for (\n item of selectOptionsList();\n track (item.value ?? '') + (item.label ?? '');\n let i = $index;\n let last = $last\n ) {\n <li\n [attr.aria-selected]=\"getSelected(item)\"\n [class.m-0]=\"last\"\n [class.selected]=\"selectionMode() === 'single' ? getSelected(item) : null\"\n [id]=\"'item-' + i\"\n (mousedown)=\"$event.stopImmediatePropagation(); onSelectItem(item)\"\n class=\"item\"\n role=\"option\"\n >\n <input\n [checked]=\"getSelected(item)\"\n [class.d-none]=\"selectionMode() === 'single' || !item?.value\"\n [disabled]=\"true\"\n [id]=\"i + '-' + item.value + '-checkbox'\"\n [name]=\"i + '-' + item.value + '-checkbox'\"\n [ngClass]=\"componentClass()\"\n [value]=\"getSelected(item)\"\n (blur)=\"onBlurHandler($event)\"\n #inputCheckbox\n aria-hidden=\"true\"\n class=\"form-check-input opacity-100\"\n tabindex=\"-1\"\n type=\"checkbox\"\n />\n <label\n [class.ms-3]=\"selectionMode() === 'multiple' && item?.value\"\n [for]=\"i + '-' + item.value + '-checkbox'\"\n class=\"form-check-label checkbox-label w-100 opacity-100\"\n >\n @if (!item.renderer) {\n {{ translateValue() ? (item.label | transloco) : item.label }}\n }\n <ng-container\n [ngTemplateOutlet]=\"item.renderer ?? null\"\n [ngTemplateOutletContext]=\"{ $implicit: item, selected: getSelected(item), index: i }\"\n ></ng-container>\n </label>\n </li>\n }\n </ul>\n</div>\n", styles: [":host{display:block;z-index:999}.option-list{--option-list-width: 100%;--option-list-top: 10px;--option-list-bottom: unset;border:1px solid var(--bs-border-color);border-top:0;border-radius:var(--bs-border-radius);overflow-x:hidden;overflow-y:auto;scrollbar-color:auto;position:fixed;width:var(--option-list-width);top:var(--option-list-top);bottom:var(--option-list-bottom);z-index:999}.option-list ul{margin:0;padding:0}.option-list .selected{background-color:var(--bs-body-bg);filter:brightness(95%)}.option-list.option-list-top{border-top:1px solid var(--bs-border-color);border-bottom:0}.option-list:focus-visible{outline:none}.option-list::-webkit-scrollbar{width:8px}.option-list::-webkit-scrollbar-track{background:var(--bs-body-bg)}.option-list::-webkit-scrollbar-thumb{background-color:#00000038;border-radius:999px;border:2px solid transparent;background-clip:content-box}.option-list:hover::-webkit-scrollbar-thumb{background-color:#00000052}.item{display:flex;background-color:var(--bs-body-bg);z-index:1;padding:0 .5rem;min-height:2.5rem}.item label{padding:.5rem 0}.item:hover{cursor:pointer;background-color:var(--bs-body-bg);filter:brightness(95%)}.item *:hover{cursor:pointer}.item .form-check-input{align-self:center}.item .form-check-input:focus{border-color:var(--bs-border-color);box-shadow:unset}.item .form-check-input:checked{background-color:var(--bs-primary);border-color:var(--bs-border-color)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
454
456
|
}
|
|
455
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
457
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangOptionListComponent, decorators: [{
|
|
456
458
|
type: Component,
|
|
457
459
|
args: [{ selector: 'quang-option-list', imports: [NgStyle, NgClass, NgTemplateOutlet, TranslocoPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n [attr.aria-label]=\"componentLabel()\"\n [ngStyle]=\"{\n 'max-height': optionListMaxHeight(),\n '--option-list-width': elementWidth(),\n '--option-list-top': elementTop(),\n '--option-list-bottom': elementBottom(),\n }\"\n (blur)=\"onBlurHandler($event)\"\n #optionListContainer\n aria-orientation=\"vertical\"\n class=\"option-list\"\n id=\"optionList\"\n role=\"listbox\"\n tabindex=\"0\"\n>\n <ul role=\"presentation\">\n @for (\n item of selectOptionsList();\n track (item.value ?? '') + (item.label ?? '');\n let i = $index;\n let last = $last\n ) {\n <li\n [attr.aria-selected]=\"getSelected(item)\"\n [class.m-0]=\"last\"\n [class.selected]=\"selectionMode() === 'single' ? getSelected(item) : null\"\n [id]=\"'item-' + i\"\n (mousedown)=\"$event.stopImmediatePropagation(); onSelectItem(item)\"\n class=\"item\"\n role=\"option\"\n >\n <input\n [checked]=\"getSelected(item)\"\n [class.d-none]=\"selectionMode() === 'single' || !item?.value\"\n [disabled]=\"true\"\n [id]=\"i + '-' + item.value + '-checkbox'\"\n [name]=\"i + '-' + item.value + '-checkbox'\"\n [ngClass]=\"componentClass()\"\n [value]=\"getSelected(item)\"\n (blur)=\"onBlurHandler($event)\"\n #inputCheckbox\n aria-hidden=\"true\"\n class=\"form-check-input opacity-100\"\n tabindex=\"-1\"\n type=\"checkbox\"\n />\n <label\n [class.ms-3]=\"selectionMode() === 'multiple' && item?.value\"\n [for]=\"i + '-' + item.value + '-checkbox'\"\n class=\"form-check-label checkbox-label w-100 opacity-100\"\n >\n @if (!item.renderer) {\n {{ translateValue() ? (item.label | transloco) : item.label }}\n }\n <ng-container\n [ngTemplateOutlet]=\"item.renderer ?? null\"\n [ngTemplateOutletContext]=\"{ $implicit: item, selected: getSelected(item), index: i }\"\n ></ng-container>\n </label>\n </li>\n }\n </ul>\n</div>\n", styles: [":host{display:block;z-index:999}.option-list{--option-list-width: 100%;--option-list-top: 10px;--option-list-bottom: unset;border:1px solid var(--bs-border-color);border-top:0;border-radius:var(--bs-border-radius);overflow-x:hidden;overflow-y:auto;scrollbar-color:auto;position:fixed;width:var(--option-list-width);top:var(--option-list-top);bottom:var(--option-list-bottom);z-index:999}.option-list ul{margin:0;padding:0}.option-list .selected{background-color:var(--bs-body-bg);filter:brightness(95%)}.option-list.option-list-top{border-top:1px solid var(--bs-border-color);border-bottom:0}.option-list:focus-visible{outline:none}.option-list::-webkit-scrollbar{width:8px}.option-list::-webkit-scrollbar-track{background:var(--bs-body-bg)}.option-list::-webkit-scrollbar-thumb{background-color:#00000038;border-radius:999px;border:2px solid transparent;background-clip:content-box}.option-list:hover::-webkit-scrollbar-thumb{background-color:#00000052}.item{display:flex;background-color:var(--bs-body-bg);z-index:1;padding:0 .5rem;min-height:2.5rem}.item label{padding:.5rem 0}.item:hover{cursor:pointer;background-color:var(--bs-body-bg);filter:brightness(95%)}.item *:hover{cursor:pointer}.item .form-check-input{align-self:center}.item .form-check-input:focus{border-color:var(--bs-border-color);box-shadow:unset}.item .form-check-input:checked{background-color:var(--bs-primary);border-color:var(--bs-border-color)}\n"] }]
|
|
458
460
|
}], propDecorators: { selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], optionListMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionListMaxHeight", required: false }] }], selectOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOptions", required: false }] }], selectButtonRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectButtonRef", required: true }] }], _value: [{ type: i0.Input, args: [{ isSignal: true, alias: "_value", required: false }] }], _isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "_isDisabled", required: false }] }], componentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentClass", required: false }] }], componentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentLabel", required: false }] }], componentTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentTabIndex", required: false }] }], translateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateValue", required: false }] }], nullOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullOption", required: false }] }], scrollBehaviorOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehaviorOnOpen", required: false }] }], changedHandler: [{ type: i0.Output, args: ["changedHandler"] }], blurHandler: [{ type: i0.Output, args: ["blurHandler"] }], escapePressed: [{ type: i0.Output, args: ["escapePressed"] }], tabPressed: [{ type: i0.Output, args: ["tabPressed"] }], optionListContainer: [{ type: i0.ViewChild, args: ['optionListContainer', { isSignal: true }] }], parentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentType", required: true }] }], parentID: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentID", required: false }] }], changePosition: [{
|