quang 19.0.19-2

package/fesm2022/quang-components-autocomplete.mjs

@@ -0,0 +1,196 @@
+import { NgClass, NgIf } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, viewChild, signal, computed, output, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { TranslocoPipe } from '@jsverse/transloco';
+import { Subject, debounceTime, distinctUntilChanged } from 'rxjs';
+import { QuangBaseComponent, OptionListParentType, QuangOptionListComponent } from 'quang/components/shared';
+
+/**
+ * Autocomplete component for providing suggestion options {@link SelectOption} as the user types.
+ *
+ * @usageNotes
+ * This component displays a list of filtered options based on user input.
+ * It allows users to select an option from the suggestions and emits the event `selectedOption` when an option is selected.
+ *
+ * `searchTextDebounce` is by default set to 300ms.
+ */
+class QuangAutocompleteComponent extends QuangBaseComponent {
+    constructor() {
+        super();
+        // the form can't be a random text but must be one of the options if this is false
+        this.syncFormWithText = input(false);
+        this.optionListMaxHeight = input('200px');
+        this.selectOptions = input.required();
+        this.translateValue = input(true);
+        this.scrollBehaviorOnOpen = input('smooth');
+        this.optionList = viewChild('optionList');
+        /**
+         * Only emits the value without saving it in ngControl
+         */
+        this.emitOnly = input(false);
+        this._showOptions = signal(null);
+        this._inputValue = signal('');
+        this._optionHideTimeout = signal(undefined);
+        this.inputValue$ = new Subject();
+        this.selectOptionsChange = toObservable(this.selectOptions)
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => {
+            if (!this._inputValue()) {
+                this.setInputValue();
+            }
+        });
+        this._filteredOptions = computed(() => {
+            const text = this._inputValue();
+            return text?.length ? this.filterOptions(text) : this.selectOptions();
+        });
+        this.selectedOption = output();
+        this.searchTextChange = output();
+        this.searchTextDebounce = input(300);
+        this.internalFilterOptions = input(true);
+        this.ParentType = OptionListParentType.AUTOCOMPLETE;
+        this.formValueChange$ = undefined;
+        this.inputValue$
+            .pipe(takeUntilDestroyed(), debounceTime(this.searchTextDebounce()), distinctUntilChanged())
+            .subscribe((value) => {
+            if (value !== this._inputValue()) {
+                this.searchTextChange.emit(value?.toString() || '');
+                if (this.syncFormWithText()) {
+                    this.onValueChange(value, false);
+                }
+            }
+            this._inputValue.set(value?.toString() || '');
+            if (!this._inputValue()?.length && !this.emitOnly())
+                this._ngControl()?.control?.patchValue(null);
+        });
+        toObservable(this._showOptions)
+            .pipe(takeUntilDestroyed())
+            .subscribe((data) => {
+            if (!data && data !== null) {
+                this.checkInputValue();
+            }
+        });
+    }
+    setupFormControl() {
+        super.setupFormControl();
+        const formControl = this._ngControl()?.control;
+        if (this.formValueChange$) {
+            this.formValueChange$.unsubscribe();
+            this.formValueChange$ = undefined;
+        }
+        if (formControl) {
+            this.formValueChange$ = formControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
+                if (!this.syncFormWithText() && !value) {
+                    this._inputValue.set('');
+                }
+            });
+        }
+    }
+    showOptionVisibility() {
+        if (this._optionHideTimeout()) {
+            clearTimeout(this._optionHideTimeout());
+            this._optionHideTimeout.set(null);
+        }
+        this._showOptions.set(true);
+    }
+    hideOptionVisibility(skipTimeout = false) {
+        if (this._optionHideTimeout()) {
+            clearTimeout(this._optionHideTimeout());
+        }
+        this._optionHideTimeout.set(setTimeout(() => {
+            this._showOptions.set(false);
+        }, skipTimeout ? 0 : 50));
+    }
+    onChangeInput(value) {
+        this.showOptionVisibility();
+        this.inputValue$.next(value.target?.value);
+    }
+    filterOptions(value) {
+        const options = this.selectOptions();
+        if (this.internalFilterOptions())
+            return options.filter((x) => x.label.toLowerCase().includes(value.toLowerCase()));
+        return options;
+    }
+    onChangedHandler(value) {
+        super.onChangedHandler(value);
+        this.setInputValue();
+    }
+    onValueChange(value, hideOptions = true) {
+        this.onChangedHandler(value);
+        if (hideOptions) {
+            this.hideOptionVisibility();
+        }
+        this.selectedOption.emit(value);
+    }
+    checkInputValue() {
+        const option = this.selectOptions().find((x) => x.label.toLowerCase() === this._inputValue()?.toLowerCase());
+        if (option?.value === this._value())
+            return;
+        if (option) {
+            this.onChangedHandler(option.value ?? '');
+        }
+        else if (!this.syncFormWithText()) {
+            this.onChangedHandler('');
+        }
+    }
+    writeValue(val) {
+        super.writeValue(val);
+        this.setInputValue(true);
+    }
+    onBlurInput(event) {
+        if (event?.relatedTarget?.id !== this.optionList()?.optionListContainer()?.nativeElement?.id)
+            this.onBlurHandler();
+    }
+    onBlurHandler() {
+        setTimeout(() => {
+            this.hideOptionVisibility();
+            if (!this._inputValue()?.length && !this.emitOnly()) {
+                this._ngControl()?.control?.patchValue(null);
+            }
+            super.onBlurHandler();
+        }, 100);
+    }
+    onBlurOptionList(event) {
+        if (event)
+            this.hideOptionVisibility();
+    }
+    setInputValue(resetOnMiss = false) {
+        this._inputValue.set(this.selectOptions().find((x) => x.value === this._value())?.label ?? (resetOnMiss ? '' : this._inputValue()));
+        if (!this.syncFormWithText())
+            this.inputValue$.next(this._inputValue() ?? '');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QuangAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.5", type: QuangAutocompleteComponent, isStandalone: true, selector: "quang-autocomplete", inputs: { syncFormWithText: { classPropertyName: "syncFormWithText", publicName: "syncFormWithText", 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 }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, emitOnly: { classPropertyName: "emitOnly", publicName: "emitOnly", isSignal: true, isRequired: false, transformFunction: null }, searchTextDebounce: { classPropertyName: "searchTextDebounce", publicName: "searchTextDebounce", isSignal: true, isRequired: false, transformFunction: null }, internalFilterOptions: { classPropertyName: "internalFilterOptions", publicName: "internalFilterOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOption: "selectedOption", searchTextChange: "searchTextChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => QuangAutocompleteComponent),
+                multi: true,
+            },
+            {
+                provide: QuangOptionListComponent,
+                multi: false,
+            },
+        ], viewQueries: [{ propertyName: "optionList", first: true, predicate: ["optionList"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"autocomplete-container\">\n  <label\n    [htmlFor]=\"componentId()\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <input\n    [attr.required]=\"getIsRequiredControl()\"\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    [disabled]=\"_isDisabled() || isReadonly()\"\n    [id]=\"componentId()\"\n    [ngClass]=\"componentClass()\"\n    [placeholder]=\"componentPlaceholder() | transloco\"\n    [tabIndex]=\"componentTabIndex()\"\n    [value]=\"_inputValue()\"\n    (blur)=\"onBlurInput($event)\"\n    (input)=\"onChangeInput($event)\"\n    (mousedown)=\"showOptionVisibility()\"\n    #selectInput\n    autocomplete=\"off\"\n    class=\"form-control\"\n    type=\"text\"\n  />\n  <quang-option-list\n    [_isDisabled]=\"_isDisabled()\"\n    [_value]=\"_value()\"\n    [componentClass]=\"componentClass()\"\n    [componentLabel]=\"componentLabel()\"\n    [componentTabIndex]=\"componentTabIndex()\"\n    [nullOption]=\"false\"\n    [optionListMaxHeight]=\"optionListMaxHeight()\"\n    [parentID]=\"componentId()\"\n    [parentType]=\"ParentType\"\n    [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n    [selectButtonRef]=\"selectInput\"\n    [selectOptions]=\"_filteredOptions()\"\n    [translateValue]=\"translateValue()\"\n    (blurHandler)=\"onBlurOptionList($event)\"\n    (changedHandler)=\"onValueChange($event)\"\n    *ngIf=\"_showOptions()\"\n    #optionList\n    selectionMode=\"single\"\n  ></quang-option-list>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\n", styles: [":host{display:block}.autocomplete-container{margin-bottom:1rem;position:relative}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QuangAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'quang-autocomplete', imports: [TranslocoPipe, NgClass, NgIf, QuangOptionListComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => QuangAutocompleteComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: QuangOptionListComponent,
+                            multi: false,
+                        },
+                    ], template: "<div class=\"autocomplete-container\">\n  <label\n    [htmlFor]=\"componentId()\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <input\n    [attr.required]=\"getIsRequiredControl()\"\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    [disabled]=\"_isDisabled() || isReadonly()\"\n    [id]=\"componentId()\"\n    [ngClass]=\"componentClass()\"\n    [placeholder]=\"componentPlaceholder() | transloco\"\n    [tabIndex]=\"componentTabIndex()\"\n    [value]=\"_inputValue()\"\n    (blur)=\"onBlurInput($event)\"\n    (input)=\"onChangeInput($event)\"\n    (mousedown)=\"showOptionVisibility()\"\n    #selectInput\n    autocomplete=\"off\"\n    class=\"form-control\"\n    type=\"text\"\n  />\n  <quang-option-list\n    [_isDisabled]=\"_isDisabled()\"\n    [_value]=\"_value()\"\n    [componentClass]=\"componentClass()\"\n    [componentLabel]=\"componentLabel()\"\n    [componentTabIndex]=\"componentTabIndex()\"\n    [nullOption]=\"false\"\n    [optionListMaxHeight]=\"optionListMaxHeight()\"\n    [parentID]=\"componentId()\"\n    [parentType]=\"ParentType\"\n    [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n    [selectButtonRef]=\"selectInput\"\n    [selectOptions]=\"_filteredOptions()\"\n    [translateValue]=\"translateValue()\"\n    (blurHandler)=\"onBlurOptionList($event)\"\n    (changedHandler)=\"onValueChange($event)\"\n    *ngIf=\"_showOptions()\"\n    #optionList\n    selectionMode=\"single\"\n  ></quang-option-list>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\n", styles: [":host{display:block}.autocomplete-container{margin-bottom:1rem;position:relative}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { QuangAutocompleteComponent };
+//# sourceMappingURL=quang-components-autocomplete.mjs.map

package/fesm2022/quang-components-autocomplete.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"quang-components-autocomplete.mjs","sources":["../../../projects/quang/components/autocomplete/autocomplete.component.ts","../../../projects/quang/components/autocomplete/autocomplete.component.html","../../../projects/quang/components/autocomplete/quang-components-autocomplete.ts"],"sourcesContent":["import { NgClass, NgIf } from '@angular/common'\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  output,\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 { Subject, Subscription, debounceTime, distinctUntilChanged } from 'rxjs'\n\nimport {\n  OptionListParentType,\n  QuangBaseComponent,\n  QuangOptionListComponent,\n  SelectOption,\n} from 'quang/components/shared'\n\n@Component({\n  selector: 'quang-autocomplete',\n  imports: [TranslocoPipe, NgClass, NgIf, QuangOptionListComponent],\n  templateUrl: './autocomplete.component.html',\n  styleUrl: './autocomplete.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangAutocompleteComponent),\n      multi: true,\n    },\n    {\n      provide: QuangOptionListComponent,\n      multi: false,\n    },\n  ],\n})\n/**\n * Autocomplete component for providing suggestion options {@link SelectOption} as the user types.\n *\n * @usageNotes\n * This component displays a list of filtered options based on user input.\n * It allows users to select an option from the suggestions and emits the event `selectedOption` when an option is selected.\n *\n * `searchTextDebounce` is by default set to 300ms.\n */\nexport class QuangAutocompleteComponent extends QuangBaseComponent<string | number> {\n  // the form can't be a random text but must be one of the options if this is false\n  syncFormWithText = input<boolean>(false)\n\n  optionListMaxHeight = input<string>('200px')\n\n  selectOptions = input.required<SelectOption[]>()\n\n  translateValue = input<boolean>(true)\n\n  scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n  optionList = viewChild<QuangOptionListComponent>('optionList')\n\n  /**\n   * Only emits the value without saving it in ngControl\n   */\n  emitOnly = input<boolean>(false)\n\n  _showOptions = signal<boolean | null>(null)\n\n  _inputValue = signal<string>('')\n\n  _optionHideTimeout = signal<any | undefined>(undefined)\n\n  inputValue$ = new Subject<string>()\n\n  selectOptionsChange = toObservable(this.selectOptions)\n    .pipe(takeUntilDestroyed())\n    .subscribe(() => {\n      if (!this._inputValue()) {\n        this.setInputValue()\n      }\n    })\n\n  _filteredOptions = computed<SelectOption[]>(() => {\n    const text = this._inputValue()\n    return text?.length ? this.filterOptions(text) : this.selectOptions()\n  })\n\n  selectedOption = output<string | number | null>()\n\n  searchTextChange = output<string>()\n\n  searchTextDebounce = input<number>(300)\n\n  internalFilterOptions = input<boolean>(true)\n\n  readonly ParentType = OptionListParentType.AUTOCOMPLETE\n\n  formValueChange$: Subscription | undefined = undefined\n\n  constructor() {\n    super()\n    this.inputValue$\n      .pipe(takeUntilDestroyed(), debounceTime(this.searchTextDebounce()), distinctUntilChanged())\n      .subscribe((value) => {\n        if (value !== this._inputValue()) {\n          this.searchTextChange.emit(value?.toString() || '')\n          if (this.syncFormWithText()) {\n            this.onValueChange(value, false)\n          }\n        }\n        this._inputValue.set(value?.toString() || '')\n        if (!this._inputValue()?.length && !this.emitOnly()) this._ngControl()?.control?.patchValue(null)\n      })\n    toObservable(this._showOptions)\n      .pipe(takeUntilDestroyed())\n      .subscribe((data) => {\n        if (!data && data !== null) {\n          this.checkInputValue()\n        }\n      })\n  }\n\n  override setupFormControl(): void {\n    super.setupFormControl()\n    const formControl = this._ngControl()?.control\n    if (this.formValueChange$) {\n      this.formValueChange$.unsubscribe()\n      this.formValueChange$ = undefined\n    }\n    if (formControl) {\n      this.formValueChange$ = formControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {\n        if (!this.syncFormWithText() && !value) {\n          this._inputValue.set('')\n        }\n      })\n    }\n  }\n\n  showOptionVisibility(): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n      this._optionHideTimeout.set(null)\n    }\n    this._showOptions.set(true)\n  }\n\n  hideOptionVisibility(skipTimeout = false): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n    }\n    this._optionHideTimeout.set(\n      setTimeout(\n        () => {\n          this._showOptions.set(false)\n        },\n        skipTimeout ? 0 : 50\n      )\n    )\n  }\n\n  onChangeInput(value: any): void {\n    this.showOptionVisibility()\n    this.inputValue$.next(value.target?.value)\n  }\n\n  filterOptions(value: string): SelectOption[] {\n    const options = this.selectOptions()\n    if (this.internalFilterOptions()) return options.filter((x) => x.label.toLowerCase().includes(value.toLowerCase()))\n    return options\n  }\n\n  override onChangedHandler(value: string | number): void {\n    super.onChangedHandler(value)\n    this.setInputValue()\n  }\n\n  onValueChange(value: string | number, hideOptions = true): void {\n    this.onChangedHandler(value)\n    if (hideOptions) {\n      this.hideOptionVisibility()\n    }\n    this.selectedOption.emit(value)\n  }\n\n  checkInputValue(): void {\n    const option = this.selectOptions().find((x) => x.label.toLowerCase() === this._inputValue()?.toLowerCase())\n    if (option?.value === this._value()) return\n    if (option) {\n      this.onChangedHandler(option.value ?? '')\n    } else if (!this.syncFormWithText()) {\n      this.onChangedHandler('')\n    }\n  }\n\n  override writeValue(val: string | number): void {\n    super.writeValue(val)\n    this.setInputValue(true)\n  }\n\n  onBlurInput(event: FocusEvent) {\n    if ((event?.relatedTarget as HTMLDivElement)?.id !== this.optionList()?.optionListContainer()?.nativeElement?.id)\n      this.onBlurHandler()\n  }\n\n  override onBlurHandler() {\n    setTimeout(() => {\n      this.hideOptionVisibility()\n      if (!this._inputValue()?.length && !this.emitOnly()) {\n        this._ngControl()?.control?.patchValue(null)\n      }\n      super.onBlurHandler()\n    }, 100)\n  }\n\n  onBlurOptionList(event: any): void {\n    if (event) this.hideOptionVisibility()\n  }\n\n  setInputValue(resetOnMiss = false) {\n    this._inputValue.set(\n      this.selectOptions().find((x) => x.value === this._value())?.label ?? (resetOnMiss ? '' : this._inputValue())\n    )\n    if (!this.syncFormWithText()) this.inputValue$.next(this._inputValue() ?? '')\n  }\n}\n","<div class=\"autocomplete-container\">\n  <label\n    [htmlFor]=\"componentId()\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <input\n    [attr.required]=\"getIsRequiredControl()\"\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    [disabled]=\"_isDisabled() || isReadonly()\"\n    [id]=\"componentId()\"\n    [ngClass]=\"componentClass()\"\n    [placeholder]=\"componentPlaceholder() | transloco\"\n    [tabIndex]=\"componentTabIndex()\"\n    [value]=\"_inputValue()\"\n    (blur)=\"onBlurInput($event)\"\n    (input)=\"onChangeInput($event)\"\n    (mousedown)=\"showOptionVisibility()\"\n    #selectInput\n    autocomplete=\"off\"\n    class=\"form-control\"\n    type=\"text\"\n  />\n  <quang-option-list\n    [_isDisabled]=\"_isDisabled()\"\n    [_value]=\"_value()\"\n    [componentClass]=\"componentClass()\"\n    [componentLabel]=\"componentLabel()\"\n    [componentTabIndex]=\"componentTabIndex()\"\n    [nullOption]=\"false\"\n    [optionListMaxHeight]=\"optionListMaxHeight()\"\n    [parentID]=\"componentId()\"\n    [parentType]=\"ParentType\"\n    [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n    [selectButtonRef]=\"selectInput\"\n    [selectOptions]=\"_filteredOptions()\"\n    [translateValue]=\"translateValue()\"\n    (blurHandler)=\"onBlurOptionList($event)\"\n    (changedHandler)=\"onValueChange($event)\"\n    *ngIf=\"_showOptions()\"\n    #optionList\n    selectionMode=\"single\"\n  ></quang-option-list>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/quang-components-checkbox.mjs

@@ -0,0 +1,53 @@
+import { NgIf, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { TranslocoPipe } from '@jsverse/transloco';
+import { QuangBaseComponent } from 'quang/components/shared';
+
+/**
+ * Checkbox component for rendering a `checkbox` or a `toggle` switch.
+ *
+ * @usageNotes
+ * This component can be configured to display as a standard checkbox or as a toggle switch,
+ * depending on the `checkType` input property.
+ *
+ * The component label can be aligned in {@link LabelPosition} by setting the `labelPosition` input property.
+ */
+class QuangCheckboxComponent extends QuangBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.labelPosition = input('top');
+        this.checkType = input.required();
+        this.removeMargin = input(false);
+    }
+    onChangedEventHandler($event) {
+        const inputElement = $event.target;
+        this.onChangedHandler(inputElement.checked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QuangCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.5", type: QuangCheckboxComponent, isStandalone: true, selector: "quang-checkbox", inputs: { labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, checkType: { classPropertyName: "checkType", publicName: "checkType", isSignal: true, isRequired: true, transformFunction: null }, removeMargin: { classPropertyName: "removeMargin", publicName: "removeMargin", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => QuangCheckboxComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div\n  [class.form-check-reverse]=\"labelPosition() === 'left' && checkType() === 'checkbox'\"\n  [class.form-switch]=\"checkType() === 'toggle'\"\n  [class.label-bottom]=\"labelPosition() === 'bottom'\"\n  [class.label-left]=\"labelPosition() === 'left' && checkType() === 'toggle'\"\n  [class.label-right]=\"labelPosition() === 'right' && checkType() === 'toggle'\"\n  [class.label-top]=\"labelPosition() === 'top'\"\n  [class.toggle-wrapper]=\"checkType() === 'toggle'\"\n  [ngClass]=\"{ 'mb-3': !removeMargin(), 'form-check': !removeMargin() }\"\n>\n  <label\n    [htmlFor]=\"componentId()\"\n    [ngClass]=\"{ 'cursor-pointer': !_isDisabled() }\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <input\n    [attr.required]=\"getIsRequiredControl()\"\n    [attr.role]=\"checkType() === 'checkbox' ? 'checkbox' : 'switch'\"\n    [checked]=\"_value()\"\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    [disabled]=\"_isDisabled()\"\n    [id]=\"componentId()\"\n    [ngClass]=\"componentClass()\"\n    [placeholder]=\"componentPlaceholder() | transloco\"\n    [readOnly]=\"isReadonly()\"\n    [tabIndex]=\"componentTabIndex()\"\n    [value]=\"_value()\"\n    (blur)=\"onBlurHandler()\"\n    (input)=\"onChangedEventHandler($event)\"\n    class=\"form-check-input {{ _isDisabled() ? '' : 'cursor-pointer' }}\"\n    type=\"checkbox\"\n  />\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\n", styles: [":host{display:block}.label-top{display:flex;flex-direction:column}.label-top input{margin:unset;float:unset}.label-bottom{display:flex;flex-direction:column-reverse}.label-bottom input{margin:unset;float:unset}.label-right{flex-direction:row-reverse;justify-content:start}.label-right label{margin-left:.5rem;margin-bottom:0;align-self:center}.label-left{flex-direction:row}.label-left label{margin-bottom:0;align-self:center}.toggle-wrapper{display:flex;padding-left:unset}.toggle-wrapper label{display:block}.toggle-wrapper input{margin-left:unset;width:3em;height:1.5em}.direction-row{flex-direction:row}.direction-row .form-label{margin-right:.5rem}.direction-reverse-row{flex-direction:row-reverse;justify-content:start}.direction-reverse-row input{margin-right:.5rem}.direction-column{flex-direction:column}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QuangCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'quang-checkbox', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => QuangCheckboxComponent),
+                            multi: true,
+                        },
+                    ], imports: [TranslocoPipe, NgIf, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class.form-check-reverse]=\"labelPosition() === 'left' && checkType() === 'checkbox'\"\n  [class.form-switch]=\"checkType() === 'toggle'\"\n  [class.label-bottom]=\"labelPosition() === 'bottom'\"\n  [class.label-left]=\"labelPosition() === 'left' && checkType() === 'toggle'\"\n  [class.label-right]=\"labelPosition() === 'right' && checkType() === 'toggle'\"\n  [class.label-top]=\"labelPosition() === 'top'\"\n  [class.toggle-wrapper]=\"checkType() === 'toggle'\"\n  [ngClass]=\"{ 'mb-3': !removeMargin(), 'form-check': !removeMargin() }\"\n>\n  <label\n    [htmlFor]=\"componentId()\"\n    [ngClass]=\"{ 'cursor-pointer': !_isDisabled() }\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <input\n    [attr.required]=\"getIsRequiredControl()\"\n    [attr.role]=\"checkType() === 'checkbox' ? 'checkbox' : 'switch'\"\n    [checked]=\"_value()\"\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    [disabled]=\"_isDisabled()\"\n    [id]=\"componentId()\"\n    [ngClass]=\"componentClass()\"\n    [placeholder]=\"componentPlaceholder() | transloco\"\n    [readOnly]=\"isReadonly()\"\n    [tabIndex]=\"componentTabIndex()\"\n    [value]=\"_value()\"\n    (blur)=\"onBlurHandler()\"\n    (input)=\"onChangedEventHandler($event)\"\n    class=\"form-check-input {{ _isDisabled() ? '' : 'cursor-pointer' }}\"\n    type=\"checkbox\"\n  />\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\n", styles: [":host{display:block}.label-top{display:flex;flex-direction:column}.label-top input{margin:unset;float:unset}.label-bottom{display:flex;flex-direction:column-reverse}.label-bottom input{margin:unset;float:unset}.label-right{flex-direction:row-reverse;justify-content:start}.label-right label{margin-left:.5rem;margin-bottom:0;align-self:center}.label-left{flex-direction:row}.label-left label{margin-bottom:0;align-self:center}.toggle-wrapper{display:flex;padding-left:unset}.toggle-wrapper label{display:block}.toggle-wrapper input{margin-left:unset;width:3em;height:1.5em}.direction-row{flex-direction:row}.direction-row .form-label{margin-right:.5rem}.direction-reverse-row{flex-direction:row-reverse;justify-content:start}.direction-reverse-row input{margin-right:.5rem}.direction-column{flex-direction:column}.cursor-pointer{cursor:pointer}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { QuangCheckboxComponent };
+//# sourceMappingURL=quang-components-checkbox.mjs.map

package/fesm2022/quang-components-checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"quang-components-checkbox.mjs","sources":["../../../projects/quang/components/checkbox/checkbox.component.ts","../../../projects/quang/components/checkbox/checkbox.component.html","../../../projects/quang/components/checkbox/quang-components-checkbox.ts"],"sourcesContent":["import { NgClass, NgIf } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, 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 LabelPosition = 'top' | 'left' | 'right' | 'bottom'\n\n@Component({\n  selector: 'quang-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrl: './checkbox.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangCheckboxComponent),\n      multi: true,\n    },\n  ],\n  imports: [TranslocoPipe, NgIf, NgClass],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Checkbox component for rendering a `checkbox` or a `toggle` switch.\n *\n * @usageNotes\n * This component can be configured to display as a standard checkbox or as a toggle switch,\n * depending on the `checkType` input property.\n *\n * The component label can be aligned in {@link LabelPosition} by setting the `labelPosition` input property.\n */\nexport class QuangCheckboxComponent extends QuangBaseComponent<boolean> {\n  labelPosition = input<LabelPosition>('top')\n\n  checkType = input.required<'checkbox' | 'toggle'>()\n\n  removeMargin = input<boolean>(false)\n\n  override onChangedEventHandler($event: Event) {\n    const inputElement = $event.target as HTMLInputElement\n    this.onChangedHandler(inputElement.checked)\n  }\n}\n","<div\n  [class.form-check-reverse]=\"labelPosition() === 'left' && checkType() === 'checkbox'\"\n  [class.form-switch]=\"checkType() === 'toggle'\"\n  [class.label-bottom]=\"labelPosition() === 'bottom'\"\n  [class.label-left]=\"labelPosition() === 'left' && checkType() === 'toggle'\"\n  [class.label-right]=\"labelPosition() === 'right' && checkType() === 'toggle'\"\n  [class.label-top]=\"labelPosition() === 'top'\"\n  [class.toggle-wrapper]=\"checkType() === 'toggle'\"\n  [ngClass]=\"{ 'mb-3': !removeMargin(), 'form-check': !removeMargin() }\"\n>\n  <label\n    [htmlFor]=\"componentId()\"\n    [ngClass]=\"{ 'cursor-pointer': !_isDisabled() }\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <input\n    [attr.required]=\"getIsRequiredControl()\"\n    [attr.role]=\"checkType() === 'checkbox' ? 'checkbox' : 'switch'\"\n    [checked]=\"_value()\"\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    [disabled]=\"_isDisabled()\"\n    [id]=\"componentId()\"\n    [ngClass]=\"componentClass()\"\n    [placeholder]=\"componentPlaceholder() | transloco\"\n    [readOnly]=\"isReadonly()\"\n    [tabIndex]=\"componentTabIndex()\"\n    [value]=\"_value()\"\n    (blur)=\"onBlurHandler()\"\n    (input)=\"onChangedEventHandler($event)\"\n    class=\"form-check-input {{ _isDisabled() ? '' : 'cursor-pointer' }}\"\n    type=\"checkbox\"\n  />\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAwBA;;;;;;;;AAQG;AACG,MAAO,sBAAuB,SAAQ,kBAA2B,CAAA;AAvBvE,IAAA,WAAA,GAAA;;AAwBE,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAgB,KAAK,CAAC;AAE3C,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,EAAyB;AAEnD,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAU,KAAK,CAAC;AAMrC;AAJU,IAAA,qBAAqB,CAAC,MAAa,EAAA;AAC1C,QAAA,MAAM,YAAY,GAAG,MAAM,CAAC,MAA0B;AACtD,QAAA,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC;;8GATlC,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAnBtB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,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,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,sBAAsB,CAAC;AACrD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpBH,o4DAoDA,ED/BY,MAAA,EAAA,CAAA,g1BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,aAAa,EAAE,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAY3B,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAvBlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAGf,SAAA,EAAA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,4BAA4B,CAAC;AACrD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;qBACF,EACQ,OAAA,EAAA,CAAC,aAAa,EAAE,IAAI,EAAE,OAAO,CAAC,EAAA,eAAA,EACtB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,o4DAAA,EAAA,MAAA,EAAA,CAAA,g1BAAA,CAAA,EAAA;;;AEtBjD;;AAEG;;;;"}