iss-ctrl 0.0.21 → 0.0.23

package/fesm2022/iss-ctrl-dropdownlist.mjs

@@ -0,0 +1,398 @@
+import { CdkVirtualForOf, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling';
+import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, signal, input, computed, output, contentChild, effect, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i2 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i4 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { ControlBase, SelectStatusPipe, TranslatePipe } from 'iss-ctrl/base';
+import { UI_LANGUAGE } from 'iss-ctrl/tokens';
+
+/**
+ * `<iss-ctrl-dropdownlist>` — dropdown selection, single or multiple, with a search box.
+ *
+ * Typing in the search box emits `(onQueryChange)`, so options can be loaded remotely; set
+ * `loading` while that request is in flight.
+ *
+ * @example
+ * ```html
+ * <iss-ctrl-dropdownlist
+ *   formControlName="city"
+ *   [options]="cities()"
+ *   [multiple]="false"
+ *   [loading]="loading()"
+ *   (onQueryChange)="search($event)"
+ * >
+ *   <label>City</label>
+ * </iss-ctrl-dropdownlist>
+ * ```
+ *
+ * ### Own inputs
+ * | Property | Type | Default | Description |
+ * | --- | --- | --- | --- |
+ * | `options` | `Option[]` | **required** | The selectable choices. |
+ * | `height` | `string` | `"150px"` | Max height of the open panel. |
+ * | `loading` | `boolean` | `false` | Shows the loading state inside the panel. |
+ *
+ * ### Inherited from {@link ControlBase}
+ * `formControlName` · `readonly` · `className` · `(onChange)` · `placeholder` · `multiple`
+ *
+ * ### Outputs
+ * - `(onQueryChange)` — `string`, the current search text.
+ *
+ * Projects `<label>` into the floating label; omit it to render the control without one.
+ */
+class DropdownlistControl extends ControlBase {
+    UI_LANGUAGE = inject(UI_LANGUAGE);
+    selectedOptions = signal(new Map(), ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Selectable choices, each a `{ value, title }` pair. Required.
+     */
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum height of the open options panel, as a CSS length.
+     */
+    height = input("150px", ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    query = toSignal(this.ctrl.valueChanges);
+    filteredOptions = computed(() => this.#filter(this.query()), ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Shows the loading state inside the panel while options are being fetched.
+     */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits the search text so the host can load matching options.
+     */
+    onQueryChange = output();
+    optionTemplate = contentChild("optionTemplate", ...(ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
+    cardViewerTemplate = contentChild("cardViewerTemplate", ...(ngDevMode ? [{ debugName: "cardViewerTemplate" }] : /* istanbul ignore next */ []));
+    allSelected = signal(false, ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+    #queryEffectRef = effect(() => {
+        if (typeof this.query() === "string") {
+            this.onQueryChange.emit(this.query());
+        }
+    }, ...(ngDevMode ? [{ debugName: "#queryEffectRef" }] : /* istanbul ignore next */ []));
+    #disabledEffectRef = effect(() => {
+        if (this.disabled()) {
+            this.ctrl.disable();
+        }
+        else {
+            this.ctrl.enable();
+        }
+    }, ...(ngDevMode ? [{ debugName: "#disabledEffectRef" }] : /* istanbul ignore next */ []));
+    displayFn = (options) => {
+        if (Array.isArray(options) && !this.multiple()) {
+            return this.titleOf(options[0]);
+        }
+        return "";
+    };
+    /** Resolves an option title to plain text for the active UI language. */
+    titleOf(option) {
+        const title = option?.title;
+        if (!title) {
+            return "";
+        }
+        return typeof title === "string" ? title : title[this.UI_LANGUAGE] ?? "";
+    }
+    /*todo: add pagination for async options*/
+    writeValue(value) {
+        this.#reset();
+        if (value === null || value === undefined) {
+            return;
+        }
+        const values = value.split(",").map(val => val.trim());
+        let selectedOptions = this.options().filter((option) => values.includes(option.value));
+        if (!this.multiple()) {
+            // single selection mode, only the first matching option is honoured
+            selectedOptions = selectedOptions.slice(0, 1);
+        }
+        const next = new Map();
+        for (let i = 0; i < selectedOptions.length; i++) {
+            const val = selectedOptions[i];
+            next.set(val.value, val);
+        }
+        this.selectedOptions.set(next);
+        this.ctrl.setValue(selectedOptions);
+    }
+    captureValue($event) {
+        if (this.readonly()) {
+            return;
+        }
+        if ($event?.option.value === "_SELECT_ALL_OPTIONS_") {
+            return;
+        }
+        this.#addToSelectedOptionsMap($event?.option.value);
+        this.#emit();
+    }
+    removeFromSelectedOptionsMap(option) {
+        if (this.readonly()) {
+            return;
+        }
+        this.selectedOptions.update((selected) => {
+            const next = new Map(selected);
+            next.delete(option.value);
+            return next;
+        });
+        this.allSelected.set(false);
+        this.#emit();
+    }
+    clearSelection() {
+        if (this.readonly()) {
+            return;
+        }
+        this.#reset();
+        this.allSelected.set(false);
+        this.#emit();
+    }
+    toggleAllSelection() {
+        if (this.readonly()) {
+            return;
+        }
+        if (this.selectedOptions().size === this.options().length) {
+            this.#reset();
+            this.#emit();
+            this.allSelected.set(false);
+            return;
+        }
+        const next = new Map();
+        for (let i = 0; i < this.options().length; i++) {
+            const option = this.options()[i];
+            next.set(option.value, option);
+        }
+        this.selectedOptions.set(next);
+        this.ctrl.setValue(this.#convertSelectedMapToArray());
+        this.allSelected.set(true);
+        this.#emit();
+    }
+    ngOnDestroy() {
+        this.#queryEffectRef.destroy();
+        this.#disabledEffectRef.destroy();
+    }
+    // the selection is the value here; `ctrl` doubles as the autocomplete's search box, so while
+    // the user is typing a query it holds that string rather than the chosen options.
+    isEmpty() {
+        return this.selectedOptions().size === 0;
+    }
+    #addToSelectedOptionsMap(option) {
+        if (option) {
+            const selectedOption = option;
+            this.selectedOptions.update((selected) => {
+                // single selection replaces the map instead of adding to it
+                const next = this.multiple() ? new Map(selected) : new Map();
+                next.set(selectedOption.value, selectedOption);
+                return next;
+            });
+            this.ctrl.setValue(this.#convertSelectedMapToArray());
+        }
+    }
+    #stringifySelectedOptions() {
+        const selectedOptionsArr = this.#convertSelectedMapToArray();
+        if (selectedOptionsArr) {
+            return selectedOptionsArr.map((o) => o.value).join();
+        }
+        return null;
+    }
+    #filter(queryString) {
+        if (queryString === null || queryString === undefined || typeof queryString !== "string") {
+            return this.options();
+        }
+        const query = queryString.toLowerCase();
+        return this.options().filter((option) => {
+            return (option.value.toLowerCase().includes(query) || this.titleOf(option).toLowerCase().includes(query));
+        });
+    }
+    #emit() {
+        this.propagateValue(this.#stringifySelectedOptions());
+        this.emitOnChangeEvent(this.#convertSelectedMapToArray());
+    }
+    #reset() {
+        this.selectedOptions.set(new Map());
+        this.ctrl.setValue(null);
+    }
+    #convertSelectedMapToArray() {
+        const selectedOptionsArr = Array.from(this.selectedOptions(), ([_, option]) => option);
+        return selectedOptionsArr.length ? selectedOptionsArr : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownlistControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DropdownlistControl, isStandalone: true, selector: "iss-ctrl-dropdownlist", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onQueryChange: "onQueryChange" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: DropdownlistControl, multi: true },
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true, isSignal: true }, { propertyName: "cardViewerTemplate", first: true, predicate: ["cardViewerTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <input
+        [formControl]="ctrl"
+        [matAutocomplete]="auto"
+        [matChipInputFor]="chipGrid"
+        [placeholder]="placeholder()"
+        [readonly]="readonly()"
+        [errorStateMatcher]="errorStateMatcher"
+        (blur)="markAsTouched()"
+        class="m-0"
+        matInput
+      />
+      @if (!disabled()) {
+        @if (selectedOptions().size) {
+          <span matSuffix class="sfi sfi-close fs-18 fc-black cursor-pointer" (click)="clearSelection()"></span>
+        } @else {
+          <span matSuffix class="sfi sfi-arrow-down fs-18 fc-black cursor-pointer"></span>
+        }
+      }
+
+      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="captureValue($event)" [displayWith]="displayFn" autoActiveFirstOption hideSingleSelectionIndicator>
+        @if (loading()) {
+          <mat-option disabled="true">
+            <ds-icon icon="spinner" class="spin fc-coral fs-20"></ds-icon>
+          </mat-option>
+        } @else {
+          @if (filteredOptions().length) {
+            @if (multiple()) {
+              <mat-option (click)="toggleAllSelection()" value="_SELECT_ALL_OPTIONS_">
+                {{ allSelected() ? "deselect all" : "Select All" }}
+              </mat-option>
+            }
+            <cdk-virtual-scroll-viewport itemSize="5" [ngStyle]="{'height': height()}">
+              <mat-option *cdkVirtualFor="let option of filteredOptions()" [value]="option" [ngClass]="{'mdc-list-item__selected': option | selectStatus: selectedOptions()}">
+                @if (optionTemplate()) {
+                  <ng-container *ngTemplateOutlet="optionTemplate(); context: { $implicit: option}"/>
+                } @else {
+                  {{ option?.title | translate }}
+                }
+              </mat-option>
+            </cdk-virtual-scroll-viewport>
+          } @else {
+            <mat-option disabled="true">No Result Found</mat-option>
+          }
+        }
+      </mat-autocomplete>
+    </mat-form-field>
+
+    <mat-chip-grid #chipGrid>
+      @if (multiple()) {
+        @for (chip of selectedOptions(); track chip[0]) {
+          <mat-chip-row (removed)="removeFromSelectedOptionsMap(chip[1])">
+            @if (cardViewerTemplate()) {
+              <ng-container
+                *ngTemplateOutlet="cardViewerTemplate(); context: { $implicit:  chip[1]}"
+              />
+            } @else {
+              {{ chip[1]?.title | translate }}
+            }
+            <button matChipRemove [disabled]="readonly()" [attr.aria-label]="'remove ' + titleOf(chip[1])">
+              <ds-icon icon="trash" class="fc-red"></ds-icon>
+            </button>
+          </mat-chip-row>
+        }
+      }
+    </mat-chip-grid>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SelectStatusPipe, name: "selectStatus" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownlistControl, decorators: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-dropdownlist", imports: [
+                        ReactiveFormsModule,
+                        MatAutocompleteModule,
+                        MatInputModule,
+                        MatChipsModule,
+                        MatIconModule,
+                        NgClass,
+                        SelectStatusPipe,
+                        TranslatePipe,
+                        CdkVirtualForOf,
+                        CdkVirtualScrollViewport,
+                        CdkFixedSizeVirtualScroll,
+                        NgStyle,
+                        NgTemplateOutlet,
+                    ], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: DropdownlistControl, multi: true },
+                    ], template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <input
+        [formControl]="ctrl"
+        [matAutocomplete]="auto"
+        [matChipInputFor]="chipGrid"
+        [placeholder]="placeholder()"
+        [readonly]="readonly()"
+        [errorStateMatcher]="errorStateMatcher"
+        (blur)="markAsTouched()"
+        class="m-0"
+        matInput
+      />
+      @if (!disabled()) {
+        @if (selectedOptions().size) {
+          <span matSuffix class="sfi sfi-close fs-18 fc-black cursor-pointer" (click)="clearSelection()"></span>
+        } @else {
+          <span matSuffix class="sfi sfi-arrow-down fs-18 fc-black cursor-pointer"></span>
+        }
+      }
+
+      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="captureValue($event)" [displayWith]="displayFn" autoActiveFirstOption hideSingleSelectionIndicator>
+        @if (loading()) {
+          <mat-option disabled="true">
+            <ds-icon icon="spinner" class="spin fc-coral fs-20"></ds-icon>
+          </mat-option>
+        } @else {
+          @if (filteredOptions().length) {
+            @if (multiple()) {
+              <mat-option (click)="toggleAllSelection()" value="_SELECT_ALL_OPTIONS_">
+                {{ allSelected() ? "deselect all" : "Select All" }}
+              </mat-option>
+            }
+            <cdk-virtual-scroll-viewport itemSize="5" [ngStyle]="{'height': height()}">
+              <mat-option *cdkVirtualFor="let option of filteredOptions()" [value]="option" [ngClass]="{'mdc-list-item__selected': option | selectStatus: selectedOptions()}">
+                @if (optionTemplate()) {
+                  <ng-container *ngTemplateOutlet="optionTemplate(); context: { $implicit: option}"/>
+                } @else {
+                  {{ option?.title | translate }}
+                }
+              </mat-option>
+            </cdk-virtual-scroll-viewport>
+          } @else {
+            <mat-option disabled="true">No Result Found</mat-option>
+          }
+        }
+      </mat-autocomplete>
+    </mat-form-field>
+
+    <mat-chip-grid #chipGrid>
+      @if (multiple()) {
+        @for (chip of selectedOptions(); track chip[0]) {
+          <mat-chip-row (removed)="removeFromSelectedOptionsMap(chip[1])">
+            @if (cardViewerTemplate()) {
+              <ng-container
+                *ngTemplateOutlet="cardViewerTemplate(); context: { $implicit:  chip[1]}"
+              />
+            } @else {
+              {{ chip[1]?.title | translate }}
+            }
+            <button matChipRemove [disabled]="readonly()" [attr.aria-label]="'remove ' + titleOf(chip[1])">
+              <ds-icon icon="trash" class="fc-red"></ds-icon>
+            </button>
+          </mat-chip-row>
+        }
+      }
+    </mat-chip-grid>
+  `, schemas: [CUSTOM_ELEMENTS_SCHEMA] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], onQueryChange: [{ type: i0.Output, args: ["onQueryChange"] }], optionTemplate: [{ type: i0.ContentChild, args: ["optionTemplate", { isSignal: true }] }], cardViewerTemplate: [{ type: i0.ContentChild, args: ["cardViewerTemplate", { isSignal: true }] }] } });
+
+// The dropdownlist control. Its field and viewer stay in the primary entry point and reach it
+// from there, so the control ships only to an app that renders it or imports it directly.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DropdownlistControl };
+//# sourceMappingURL=iss-ctrl-dropdownlist.mjs.map

package/fesm2022/iss-ctrl-dropdownlist.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-dropdownlist.mjs","sources":["../../../projects/iss/dropdownlist/src/dropdownlist.control.ts","../../../projects/iss/dropdownlist/src/public-api.ts","../../../projects/iss/dropdownlist/src/iss-ctrl-dropdownlist.ts"],"sourcesContent":["import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from \"@angular/cdk/scrolling\";\nimport { NgClass, NgStyle, NgTemplateOutlet } from \"@angular/common\";\nimport { Component, computed, contentChild, CUSTOM_ELEMENTS_SCHEMA, effect, inject, input, InputSignal, OnDestroy, output, OutputEmitterRef, signal, Signal, WritableSignal } from \"@angular/core\";\nimport { toSignal } from \"@angular/core/rxjs-interop\";\nimport { NG_VALUE_ACCESSOR, ReactiveFormsModule } from \"@angular/forms\";\nimport { MatAutocompleteModule } from \"@angular/material/autocomplete\";\nimport { MatChipsModule } from \"@angular/material/chips\";\nimport { MatIconModule } from \"@angular/material/icon\";\nimport { MatInputModule } from \"@angular/material/input\";\nimport { ControlBase, I18n, Option, SelectStatusPipe, TranslatePipe } from \"iss-ctrl/base\";\nimport { UI_LANGUAGE } from \"iss-ctrl/tokens\";\n\n/**\n * `<iss-ctrl-dropdownlist>` — dropdown selection, single or multiple, with a search box.\n *\n * Typing in the search box emits `(onQueryChange)`, so options can be loaded remotely; set\n * `loading` while that request is in flight.\n *\n * @example\n * ```html\n * <iss-ctrl-dropdownlist\n *   formControlName=\"city\"\n *   [options]=\"cities()\"\n *   [multiple]=\"false\"\n *   [loading]=\"loading()\"\n *   (onQueryChange)=\"search($event)\"\n * >\n *   <label>City</label>\n * </iss-ctrl-dropdownlist>\n * ```\n *\n * ### Own inputs\n * | Property | Type | Default | Description |\n * | --- | --- | --- | --- |\n * | `options` | `Option[]` | **required** | The selectable choices. |\n * | `height` | `string` | `\"150px\"` | Max height of the open panel. |\n * | `loading` | `boolean` | `false` | Shows the loading state inside the panel. |\n *\n * ### Inherited from {@link ControlBase}\n * `formControlName` · `readonly` · `className` · `(onChange)` · `placeholder` · `multiple`\n *\n * ### Outputs\n * - `(onQueryChange)` — `string`, the current search text.\n *\n * Projects `<label>` into the floating label; omit it to render the control without one.\n */\n@Component({\n  selector: \"iss-ctrl-dropdownlist\",\n  imports: [\n    ReactiveFormsModule,\n    MatAutocompleteModule,\n    MatInputModule,\n    MatChipsModule,\n    MatIconModule,\n    NgClass,\n    SelectStatusPipe,\n    TranslatePipe,\n    CdkVirtualForOf,\n    CdkVirtualScrollViewport,\n    CdkFixedSizeVirtualScroll,\n    NgStyle,\n    NgTemplateOutlet,\n  ],\n  providers: [\n    { provide: NG_VALUE_ACCESSOR, useExisting: DropdownlistControl, multi: true },\n  ],\n  template: `\n    <mat-form-field floatLabel=\"auto\" class=\"\">\n      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->\n      <mat-label class=\"fs-16 fc-dark-gray\">\n        <ng-content select=\"label\"></ng-content>\n      </mat-label>\n      <input\n        [formControl]=\"ctrl\"\n        [matAutocomplete]=\"auto\"\n        [matChipInputFor]=\"chipGrid\"\n        [placeholder]=\"placeholder()\"\n        [readonly]=\"readonly()\"\n        [errorStateMatcher]=\"errorStateMatcher\"\n        (blur)=\"markAsTouched()\"\n        class=\"m-0\"\n        matInput\n      />\n      @if (!disabled()) {\n        @if (selectedOptions().size) {\n          <span matSuffix class=\"sfi sfi-close fs-18 fc-black cursor-pointer\" (click)=\"clearSelection()\"></span>\n        } @else {\n          <span matSuffix class=\"sfi sfi-arrow-down fs-18 fc-black cursor-pointer\"></span>\n        }\n      }\n\n      <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"captureValue($event)\" [displayWith]=\"displayFn\" autoActiveFirstOption hideSingleSelectionIndicator>\n        @if (loading()) {\n          <mat-option disabled=\"true\">\n            <ds-icon icon=\"spinner\" class=\"spin fc-coral fs-20\"></ds-icon>\n          </mat-option>\n        } @else {\n          @if (filteredOptions().length) {\n            @if (multiple()) {\n              <mat-option (click)=\"toggleAllSelection()\" value=\"_SELECT_ALL_OPTIONS_\">\n                {{ allSelected() ? \"deselect all\" : \"Select All\" }}\n              </mat-option>\n            }\n            <cdk-virtual-scroll-viewport itemSize=\"5\" [ngStyle]=\"{'height': height()}\">\n              <mat-option *cdkVirtualFor=\"let option of filteredOptions()\" [value]=\"option\" [ngClass]=\"{'mdc-list-item__selected': option | selectStatus: selectedOptions()}\">\n                @if (optionTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"optionTemplate(); context: { $implicit: option}\"/>\n                } @else {\n                  {{ option?.title | translate }}\n                }\n              </mat-option>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <mat-option disabled=\"true\">No Result Found</mat-option>\n          }\n        }\n      </mat-autocomplete>\n    </mat-form-field>\n\n    <mat-chip-grid #chipGrid>\n      @if (multiple()) {\n        @for (chip of selectedOptions(); track chip[0]) {\n          <mat-chip-row (removed)=\"removeFromSelectedOptionsMap(chip[1])\">\n            @if (cardViewerTemplate()) {\n              <ng-container\n                *ngTemplateOutlet=\"cardViewerTemplate(); context: { $implicit:  chip[1]}\"\n              />\n            } @else {\n              {{ chip[1]?.title | translate }}\n            }\n            <button matChipRemove [disabled]=\"readonly()\" [attr.aria-label]=\"'remove ' + titleOf(chip[1])\">\n              <ds-icon icon=\"trash\" class=\"fc-red\"></ds-icon>\n            </button>\n          </mat-chip-row>\n        }\n      }\n    </mat-chip-grid>\n  `,\n  styles: `\n    ::ng-deep {\n      .mat-mdc-option.mdc-list-item__selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {\n        --mat-option-selected-state-label-text-color: var(--green);\n        color: var(--green);\n      }\n    }\n  `,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class DropdownlistControl extends ControlBase implements OnDestroy {\n  UI_LANGUAGE = inject(UI_LANGUAGE);\n  selectedOptions: WritableSignal<Map<string, Option>> = signal(new Map<string, Option>());\n  /**\n   * Selectable choices, each a `{ value, title }` pair. Required.\n   */\n  options: InputSignal<Option[]> = input.required();\n  /**\n   * Maximum height of the open options panel, as a CSS length.\n   */\n  height: InputSignal<string> = input(\"150px\");\n  query: Signal<string> = toSignal(this.ctrl.valueChanges);\n  readonly filteredOptions: Signal<Option[]> = computed(() => this.#filter(this.query()));\n  /**\n   * Shows the loading state inside the panel while options are being fetched.\n   */\n  loading: InputSignal<boolean> = input(false);\n  /**\n   * Emits the search text so the host can load matching options.\n   */\n  onQueryChange: OutputEmitterRef<string> = output();\n  protected optionTemplate: any = contentChild(\"optionTemplate\");\n  protected cardViewerTemplate: any = contentChild(\"cardViewerTemplate\");\n  protected allSelected: WritableSignal<boolean> = signal(false);\n  #queryEffectRef = effect(() => {\n    if (typeof this.query() === \"string\") {\n      this.onQueryChange.emit(this.query());\n    }\n  });\n  #disabledEffectRef = effect(() => {\n    if (this.disabled()) {\n      this.ctrl.disable();\n    } else {\n      this.ctrl.enable();\n    }\n  });\n\n  displayFn = (options: Option | Option[]): string => {\n    if (Array.isArray(options) && !this.multiple()) {\n      return this.titleOf(options[0]);\n    }\n    return \"\";\n  };\n\n  /** Resolves an option title to plain text for the active UI language. */\n  titleOf(option: Option | undefined): string {\n    const title = option?.title;\n    if (!title) {\n      return \"\";\n    }\n    return typeof title === \"string\" ? title : title[this.UI_LANGUAGE as keyof I18n] ?? \"\";\n  }\n\n  /*todo: add pagination for async options*/\n\n  override writeValue(value: string | null) {\n    this.#reset();\n    if (value === null || value === undefined) {\n      return;\n    }\n    const values: string[] = value.split(\",\").map(val => val.trim());\n    let selectedOptions: Option[] = this.options().filter((option: Option) => values.includes(option.value));\n    if (!this.multiple()) {\n      // single selection mode, only the first matching option is honoured\n      selectedOptions = selectedOptions.slice(0, 1);\n    }\n    const next: Map<string, Option> = new Map<string, Option>();\n    for (let i = 0; i < selectedOptions.length; i++) {\n      const val: Option = selectedOptions[i];\n      next.set(val.value, val);\n    }\n    this.selectedOptions.set(next);\n    this.ctrl.setValue(selectedOptions);\n  }\n\n  captureValue($event: any) {\n    if (this.readonly()) {\n      return;\n    }\n    if ($event?.option.value === \"_SELECT_ALL_OPTIONS_\") {\n      return;\n    }\n    this.#addToSelectedOptionsMap($event?.option.value);\n    this.#emit();\n  }\n\n  removeFromSelectedOptionsMap(option: Option) {\n    if (this.readonly()) {\n      return;\n    }\n    this.selectedOptions.update((selected: Map<string, Option>) => {\n      const next: Map<string, Option> = new Map(selected);\n      next.delete(option.value);\n      return next;\n    });\n    this.allSelected.set(false);\n    this.#emit();\n  }\n\n  clearSelection() {\n    if (this.readonly()) {\n      return;\n    }\n    this.#reset();\n    this.allSelected.set(false);\n    this.#emit();\n  }\n\n  toggleAllSelection() {\n    if (this.readonly()) {\n      return;\n    }\n    if (this.selectedOptions().size === this.options().length) {\n      this.#reset();\n      this.#emit();\n      this.allSelected.set(false);\n      return;\n    }\n    const next: Map<string, Option> = new Map<string, Option>();\n    for (let i = 0; i < this.options().length; i++) {\n      const option: Option = this.options()[i];\n      next.set(option.value, option);\n    }\n    this.selectedOptions.set(next);\n    this.ctrl.setValue(this.#convertSelectedMapToArray());\n    this.allSelected.set(true);\n    this.#emit();\n  }\n\n  ngOnDestroy(): void {\n    this.#queryEffectRef.destroy();\n    this.#disabledEffectRef.destroy();\n  }\n\n  // the selection is the value here; `ctrl` doubles as the autocomplete's search box, so while\n  // the user is typing a query it holds that string rather than the chosen options.\n  protected override isEmpty(): boolean {\n    return this.selectedOptions().size === 0;\n  }\n\n  #addToSelectedOptionsMap(option: any) {\n    if (option) {\n      const selectedOption = option;\n      this.selectedOptions.update((selected: Map<string, Option>) => {\n        // single selection replaces the map instead of adding to it\n        const next: Map<string, Option> = this.multiple() ? new Map(selected) : new Map<string, Option>();\n        next.set(selectedOption.value, selectedOption);\n        return next;\n      });\n      this.ctrl.setValue(this.#convertSelectedMapToArray());\n    }\n  }\n\n  #stringifySelectedOptions(): string | null {\n    const selectedOptionsArr: Option[] | null = this.#convertSelectedMapToArray();\n    if (selectedOptionsArr) {\n      return selectedOptionsArr.map((o) => o.value).join();\n    }\n    return null;\n  }\n\n  #filter(queryString: string | Option): Option[] {\n    if (queryString === null || queryString === undefined || typeof queryString !== \"string\") {\n      return this.options();\n    }\n    const query: string = queryString.toLowerCase();\n    return this.options().filter((option: Option) => {\n      return (option.value.toLowerCase().includes(query) || this.titleOf(option).toLowerCase().includes(query));\n    });\n  }\n\n  #emit() {\n    this.propagateValue(this.#stringifySelectedOptions());\n    this.emitOnChangeEvent(this.#convertSelectedMapToArray());\n  }\n\n  #reset() {\n    this.selectedOptions.set(new Map<string, Option>());\n    this.ctrl.setValue(null);\n  }\n\n  #convertSelectedMapToArray(): Option[] | null {\n    const selectedOptionsArr: Option[] = Array.from(this.selectedOptions(), ([_, option]) => option);\n    return selectedOptionsArr.length ? selectedOptionsArr : null;\n  }\n}\n","// The dropdownlist control. Its field and viewer stay in the primary entry point and reach it\n// from there, so the control ships only to an app that renders it or imports it directly.\n\nexport * from \"./dropdownlist.control\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/iss-ctrl-dropdownlist.viewer-OWJxDpr8.mjs

@@ -0,0 +1,30 @@
+import * as i0 from '@angular/core';
+import { Component } from '@angular/core';
+import { ViewerBase } from 'iss-ctrl/base';
+
+class DropdownlistViewer extends ViewerBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownlistViewer, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DropdownlistViewer, isStandalone: true, selector: "iss-viewer-dropdownlist", usesInheritance: true, ngImport: i0, template: `
+    <p>
+      @for (item of field().ctrlJsonValue(); track item?.value; let last = $last) {
+        <span>{{ item.label }} {{ last ? '' : ', ' }}</span>
+      }
+    </p>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownlistViewer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "iss-viewer-dropdownlist",
+                    template: `
+    <p>
+      @for (item of field().ctrlJsonValue(); track item?.value; let last = $last) {
+        <span>{{ item.label }} {{ last ? '' : ', ' }}</span>
+      }
+    </p>
+  `,
+                }]
+        }] });
+
+export { DropdownlistViewer };
+//# sourceMappingURL=iss-ctrl-dropdownlist.viewer-OWJxDpr8.mjs.map

package/fesm2022/iss-ctrl-dropdownlist.viewer-OWJxDpr8.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-dropdownlist.viewer-OWJxDpr8.mjs","sources":["../../../projects/iss/src/components/controls/dropdownlist/dropdownlist.viewer.ts"],"sourcesContent":["import { Component } from \"@angular/core\";\nimport { ViewerBase } from \"iss-ctrl/base\";\n\n@Component({\n  selector: \"iss-viewer-dropdownlist\",\n  template: `\n    <p>\n      @for (item of field().ctrlJsonValue(); track item?.value; let last = $last) {\n        <span>{{ item.label }} {{ last ? '' : ', ' }}</span>\n      }\n    </p>\n  `,\n})\nexport class DropdownlistViewer extends ViewerBase {}\n"],"names":[],"mappings":";;;;AAaM,MAAO,kBAAmB,SAAQ,UAAU,CAAA;uGAArC,kBAAkB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EARnB;;;;;;AAMT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAEU,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAV9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,yBAAyB;AACnC,oBAAA,QAAQ,EAAE;;;;;;AAMT,EAAA,CAAA;AACF,iBAAA;;;;;"}