@sneat/ui 0.1.2 → 0.1.4

package/esm2022/index.js

@@ -0,0 +1,4 @@
+export * from './lib/focus';
+export * from './lib/components';
+export * from './lib/selector';
+//# sourceMappingURL=index.js.map

package/esm2022/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/ui/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './lib/focus';\nexport * from './lib/components';\nexport * from './lib/selector';\n"]}

package/esm2022/lib/components/index.js

@@ -0,0 +1,3 @@
+export * from './sneat-base.component';
+export * from './sneat-base-modal.component';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC","sourcesContent":["export * from './sneat-base.component';\nexport * from './sneat-base-modal.component';\n"]}

package/esm2022/lib/components/sneat-base-modal.component.js

@@ -0,0 +1,24 @@
+import { inject, Injectable } from '@angular/core';
+import { SneatBaseComponent } from './sneat-base.component';
+import { ModalController } from '@ionic/angular/standalone';
+import * as i0 from "@angular/core";
+export class SneatBaseModalComponent extends SneatBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.modalController = inject(ModalController);
+    }
+    close() {
+        this.dismissModal();
+    }
+    dismissModal(data, role, id) {
+        this.modalController
+            .dismiss(data, role, id)
+            .catch(this.errorLogger.logErrorHandler(`Failed to close modal ${this.className}`));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SneatBaseModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SneatBaseModalComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SneatBaseModalComponent, decorators: [{
+            type: Injectable
+        }] });
+//# sourceMappingURL=sneat-base-modal.component.js.map

package/esm2022/lib/components/sneat-base-modal.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sneat-base-modal.component.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/components/sneat-base-modal.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;;AAG5D,MAAM,OAAgB,uBAAwB,SAAQ,kBAAkB;IADxE;;QAEmB,oBAAe,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;KAe5D;IAbW,KAAK;QACb,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAES,YAAY,CAAC,IAAc,EAAE,IAAa,EAAE,EAAW;QAC/D,IAAI,CAAC,eAAe;aACjB,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC;aACvB,KAAK,CACJ,IAAI,CAAC,WAAW,CAAC,eAAe,CAC9B,yBAAyB,IAAI,CAAC,SAAS,EAAE,CAC1C,CACF,CAAC;IACN,CAAC;8GAfmB,uBAAuB;kHAAvB,uBAAuB;;2FAAvB,uBAAuB;kBAD5C,UAAU","sourcesContent":["import { inject, Injectable } from '@angular/core';\nimport { SneatBaseComponent } from './sneat-base.component';\nimport { ModalController } from '@ionic/angular/standalone';\n\n@Injectable()\nexport abstract class SneatBaseModalComponent extends SneatBaseComponent {\n  private readonly modalController = inject(ModalController);\n\n  protected close(): void {\n    this.dismissModal();\n  }\n\n  protected dismissModal(data?: unknown, role?: string, id?: string): void {\n    this.modalController\n      .dismiss(data, role, id)\n      .catch(\n        this.errorLogger.logErrorHandler(\n          `Failed to close modal ${this.className}`,\n        ),\n      );\n  }\n}\n"]}

package/esm2022/lib/components/sneat-base.component.js

@@ -0,0 +1,58 @@
+import { inject, Injectable, InjectionToken } from '@angular/core';
+import { createSetFocusToInput } from '../focus';
+import { ErrorLogger } from '@sneat/core';
+import { Subject, Subscription } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+export const ClassName = new InjectionToken('className');
+export class SneatBaseComponent {
+    constructor() {
+        // protected $isInitialized = signal(false);
+        //
+        // // eslint-disable-next-line @angular-eslint/contextual-lifecycle
+        // public ngOnInit() {
+        // 	console.info(`${this.className}.SneatBaseComponent.ngOnInit()`);
+        // 	// $isInitialized is for workaround for https://angular.dev/errors/NG0950
+        // 	// Required input is accessed before a value is set.
+        // 	// Might be excessive and should be removed if we can find a better way.
+        // 	this.$isInitialized.set(true);
+        // }
+        this.destroyed = new Subject();
+        // Signals that the component is destroyed and should not be used anymore
+        this.destroyed$ = this.destroyed.asObservable();
+        // All active subscriptions of a component. Will be unsubscribed on destroy
+        this.subs = new Subscription();
+        this.console = console;
+        this.errorLogger = inject(ErrorLogger);
+        this.logError = this.errorLogger.logError;
+        this.logErrorHandler = this.errorLogger.logErrorHandler;
+        // Passes focus to the input element
+        this.setFocusToInput = createSetFocusToInput(this.errorLogger);
+        this.className = inject(ClassName);
+        this.log(`${this.className}.SneatBaseComponent.constructor()`);
+    }
+    log(msg, ...data) {
+        this.console.log(msg, ...data);
+    }
+    // protected readonly takeUntilDestroyed = <T>() =>
+    // 	takeUntil<T>(this.destroyed$);
+    takeUntilDestroyed() {
+        return takeUntil(this.destroyed$);
+    }
+    ngOnDestroy() {
+        this.log(`${this.className}.SneatBaseComponent.ngOnDestroy()`);
+        this.unsubscribe(`${this.className}.SneatBaseComponent.ngOnDestroy()`);
+        this.destroyed?.next();
+        this.destroyed?.complete();
+    }
+    unsubscribe(reason) {
+        this.log(`${this.className}.SneatBaseComponent.unsubscribe(reason: ${reason})`);
+        this.subs.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SneatBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SneatBaseComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SneatBaseComponent, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=sneat-base.component.js.map

package/esm2022/lib/components/sneat-base.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sneat-base.component.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/components/sneat-base.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAa,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAA4B,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;;AAY3C,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,cAAc,CAAS,WAAW,CAAC,CAAC;AAGjE,MAAM,OAAgB,kBAAkB;IA+BtC;QA9BA,4CAA4C;QAC5C,EAAE;QACF,mEAAmE;QACnE,sBAAsB;QACtB,oEAAoE;QACpE,6EAA6E;QAC7E,wDAAwD;QACxD,4EAA4E;QAC5E,kCAAkC;QAClC,IAAI;QAEa,cAAS,GAAG,IAAI,OAAO,EAAQ,CAAC;QACjD,yEAAyE;QACtD,eAAU,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;QAE9D,2EAA2E;QACxD,SAAI,GAAG,IAAI,YAAY,EAAE,CAAC;QAE1B,YAAO,GAAa,OAAO,CAAC;QAE5B,gBAAW,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;QAElC,aAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;QACrC,oBAAe,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC;QAEtE,oCAAoC;QACjB,oBAAe,GAAG,qBAAqB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE1D,cAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QAG/C,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,mCAAmC,CAAC,CAAC;IACjE,CAAC;IAES,GAAG,CAAC,GAAW,EAAE,GAAG,IAAe;QAC3C,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC;IACjC,CAAC;IAED,mDAAmD;IACnD,kCAAkC;IACxB,kBAAkB;QAC1B,OAAO,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACpC,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,mCAAmC,CAAC,CAAC;QAC/D,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,SAAS,mCAAmC,CAAC,CAAC;QACvE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;QACvB,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,CAAC;IAC7B,CAAC;IAES,WAAW,CAAC,MAAe;QACnC,IAAI,CAAC,GAAG,CACN,GAAG,IAAI,CAAC,SAAS,2CAA2C,MAAM,GAAG,CACtE,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;IAC1B,CAAC;8GAzDmB,kBAAkB;kHAAlB,kBAAkB;;2FAAlB,kBAAkB;kBADvC,UAAU","sourcesContent":["import { inject, Injectable, InjectionToken, OnDestroy } from '@angular/core';\nimport { createSetFocusToInput } from '../focus';\nimport { ErrorLogger } from '@sneat/core';\nimport { MonoTypeOperatorFunction, Subject, Subscription } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nexport interface IConsole {\n  log(...data: unknown[]): void;\n\n  warn(...data: unknown[]): void;\n\n  trace(...data: unknown[]): void;\n\n  error(...data: unknown[]): void;\n}\n\nexport const ClassName = new InjectionToken<string>('className');\n\n@Injectable()\nexport abstract class SneatBaseComponent implements OnDestroy {\n  // protected $isInitialized = signal(false);\n  //\n  // // eslint-disable-next-line @angular-eslint/contextual-lifecycle\n  // public ngOnInit() {\n  // \tconsole.info(`${this.className}.SneatBaseComponent.ngOnInit()`);\n  // \t// $isInitialized is for workaround for https://angular.dev/errors/NG0950\n  // \t// Required input is accessed before a value is set.\n  // \t// Might be excessive and should be removed if we can find a better way.\n  // \tthis.$isInitialized.set(true);\n  // }\n\n  private readonly destroyed = new Subject<void>();\n  // Signals that the component is destroyed and should not be used anymore\n  protected readonly destroyed$ = this.destroyed.asObservable();\n\n  // All active subscriptions of a component. Will be unsubscribed on destroy\n  protected readonly subs = new Subscription();\n\n  protected readonly console: IConsole = console;\n\n  protected readonly errorLogger = inject(ErrorLogger);\n\n  protected readonly logError = this.errorLogger.logError;\n  protected readonly logErrorHandler = this.errorLogger.logErrorHandler;\n\n  // Passes focus to the input element\n  protected readonly setFocusToInput = createSetFocusToInput(this.errorLogger);\n\n  protected readonly className = inject(ClassName);\n\n  public constructor() {\n    this.log(`${this.className}.SneatBaseComponent.constructor()`);\n  }\n\n  protected log(msg: string, ...data: unknown[]): void {\n    this.console.log(msg, ...data);\n  }\n\n  // protected readonly takeUntilDestroyed = <T>() =>\n  // \ttakeUntil<T>(this.destroyed$);\n  protected takeUntilDestroyed<T>(): MonoTypeOperatorFunction<T> {\n    return takeUntil(this.destroyed$);\n  }\n\n  public ngOnDestroy(): void {\n    this.log(`${this.className}.SneatBaseComponent.ngOnDestroy()`);\n    this.unsubscribe(`${this.className}.SneatBaseComponent.ngOnDestroy()`);\n    this.destroyed?.next();\n    this.destroyed?.complete();\n  }\n\n  protected unsubscribe(reason?: string): void {\n    this.log(\n      `${this.className}.SneatBaseComponent.unsubscribe(reason: ${reason})`,\n    );\n    this.subs.unsubscribe();\n  }\n}\n"]}

package/esm2022/lib/focus.js

@@ -0,0 +1,17 @@
+export function createSetFocusToInput(errorLogger) {
+    return (input, delay = 100) => {
+        if (!input) {
+            console.error('can not set focus to undefined input');
+            return;
+        }
+        setTimeout(() => {
+            requestAnimationFrame(() => {
+                // input.getInputElement().then(el => el.focus()).catch(errorLogger.logErrorHandler('failed to set focus to input'));
+                input
+                    .setFocus()
+                    .catch(errorLogger.logErrorHandler('failed to set focus to input'));
+            });
+        }, delay);
+    };
+}
+//# sourceMappingURL=focus.js.map

package/esm2022/lib/focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/focus.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,qBAAqB,CAAC,WAAyB;IAC7D,OAAO,CAAC,KAA8B,EAAE,KAAK,GAAG,GAAG,EAAQ,EAAE;QAC3D,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,sCAAsC,CAAC,CAAC;YACtD,OAAO;QACT,CAAC;QACD,UAAU,CAAC,GAAG,EAAE;YACd,qBAAqB,CAAC,GAAG,EAAE;gBACzB,qHAAqH;gBACrH,KAAK;qBACF,QAAQ,EAAE;qBACV,KAAK,CAAC,WAAW,CAAC,eAAe,CAAC,8BAA8B,CAAC,CAAC,CAAC;YACxE,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { IonInput, IonTextarea } from '@ionic/angular/standalone';\nimport { IErrorLogger } from '@sneat/core';\n\nexport function createSetFocusToInput(errorLogger: IErrorLogger) {\n  return (input?: IonInput | IonTextarea, delay = 100): void => {\n    if (!input) {\n      console.error('can not set focus to undefined input');\n      return;\n    }\n    setTimeout(() => {\n      requestAnimationFrame(() => {\n        // input.getInputElement().then(el => el.focus()).catch(errorLogger.logErrorHandler('failed to set focus to input'));\n        input\n          .setFocus()\n          .catch(errorLogger.logErrorHandler('failed to set focus to input'));\n      });\n    }, delay);\n  };\n}\n"]}

package/esm2022/lib/selector/index.js

@@ -0,0 +1,7 @@
+export * from './selector-interfaces';
+export * from './selector-options';
+export * from './selector-base.service';
+export * from './selector-base.component';
+export * from './multi-selector';
+export * from './select-from-list';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/selector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/selector/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './selector-interfaces';\nexport * from './selector-options';\nexport * from './selector-base.service';\nexport * from './selector-base.component';\nexport * from './multi-selector';\nexport * from './select-from-list';\n"]}

package/esm2022/lib/selector/multi-selector/index.js

@@ -0,0 +1,3 @@
+export * from './multi-selector.service';
+export * from './multi-selector.component';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/selector/multi-selector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/selector/multi-selector/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './multi-selector.service';\nexport * from './multi-selector.component';\n"]}

package/esm2022/lib/selector/multi-selector/multi-selector.component.js

@@ -0,0 +1,70 @@
+import { Component, EventEmitter, Input, Output, } from '@angular/core';
+import { IonButton, IonButtons, IonCard, IonIcon, IonItem, IonItemDivider, IonLabel, IonList, ModalController, } from '@ionic/angular/standalone';
+import { ClassName } from '../../components';
+import { OverlayController, SelectorBaseComponent, } from '../selector-base.component';
+import * as i0 from "@angular/core";
+export class MultiSelectorComponent extends SelectorBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.title = 'Select';
+        this.canRemove = false;
+        this.removeItems = new EventEmitter();
+        this.addItems = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        if (changes['allItems']) {
+            this.selectedItems = this.allItems?.filter((item) => this.selectedIDs?.includes(item.id));
+        }
+    }
+    removeItem(event, item) {
+        event.stopPropagation();
+        this.selectedItems = this.selectedItems?.filter((i) => i.id !== item.id);
+        this.removeItems.emit([{ event, item }]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MultiSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MultiSelectorComponent, isStandalone: true, selector: "sneat-multi-selector", inputs: { title: "title", canRemove: "canRemove", allItems: "allItems", selectedIDs: "selectedIDs" }, outputs: { removeItems: "removeItems", addItems: "addItems" }, providers: [
+            {
+                provide: ClassName,
+                useValue: 'MultiSelectorComponent',
+            },
+            {
+                provide: OverlayController,
+                useClass: ModalController,
+            },
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ion-card>\n  <ion-item-divider color=\"light\">\n    <ion-label color=\"medium\">{{ title }}</ion-label>\n    <ion-buttons slot=\"end\">\n      <ion-button color=\"medium\">\n        <ion-icon name=\"add-outline\" />\n        <ion-label>Add</ion-label>\n      </ion-button>\n    </ion-buttons>\n  </ion-item-divider>\n\n  <ion-list>\n    @for (item of selectedItems; track item.id) {\n      <ion-item>\n        <ion-label>{{ item.title }}</ion-label>\n        @if (canRemove) {\n          <ion-buttons slot=\"end\">\n            <ion-button title=\"Remove\" (click)=\"removeItem($event, item)\">\n              <ion-icon name=\"close-outline\" />\n            </ion-button>\n          </ion-buttons>\n        }\n      </ion-item>\n    }\n  </ion-list>\n</ion-card>\n", dependencies: [{ kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MultiSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-multi-selector', imports: [
+                        IonCard,
+                        IonItemDivider,
+                        IonLabel,
+                        IonButtons,
+                        IonButton,
+                        IonItem,
+                        IonIcon,
+                        IonList,
+                    ], providers: [
+                        {
+                            provide: ClassName,
+                            useValue: 'MultiSelectorComponent',
+                        },
+                        {
+                            provide: OverlayController,
+                            useClass: ModalController,
+                        },
+                    ], template: "<ion-card>\n  <ion-item-divider color=\"light\">\n    <ion-label color=\"medium\">{{ title }}</ion-label>\n    <ion-buttons slot=\"end\">\n      <ion-button color=\"medium\">\n        <ion-icon name=\"add-outline\" />\n        <ion-label>Add</ion-label>\n      </ion-button>\n    </ion-buttons>\n  </ion-item-divider>\n\n  <ion-list>\n    @for (item of selectedItems; track item.id) {\n      <ion-item>\n        <ion-label>{{ item.title }}</ion-label>\n        @if (canRemove) {\n          <ion-buttons slot=\"end\">\n            <ion-button title=\"Remove\" (click)=\"removeItem($event, item)\">\n              <ion-icon name=\"close-outline\" />\n            </ion-button>\n          </ion-buttons>\n        }\n      </ion-item>\n    }\n  </ion-list>\n</ion-card>\n" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], canRemove: [{
+                type: Input
+            }], allItems: [{
+                type: Input
+            }], selectedIDs: [{
+                type: Input
+            }], removeItems: [{
+                type: Output
+            }], addItems: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=multi-selector.component.js.map

package/esm2022/lib/selector/multi-selector/multi-selector.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-selector.component.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/selector/multi-selector/multi-selector.component.ts","../../../../../../../libs/ui/src/lib/selector/multi-selector/multi-selector.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,YAAY,EACZ,KAAK,EAEL,MAAM,GAEP,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,SAAS,EACT,UAAU,EACV,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,QAAQ,EACR,OAAO,EACP,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EACL,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,4BAA4B,CAAC;;AA0BpC,MAAM,OAAO,sBACX,SAAQ,qBAAwB;IAzBlC;;QA4BW,UAAK,GAAG,QAAQ,CAAC;QAEjB,cAAS,GAAG,KAAK,CAAC;QAIR,gBAAW,GAAG,IAAI,YAAY,EAAsB,CAAC;QACrD,aAAQ,GAAG,IAAI,YAAY,EAAsB,CAAC;KAiBtE;IAbC,WAAW,CAAC,OAAsB;QAChC,IAAI,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAClD,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CACpC,CAAC;QACJ,CAAC;IACH,CAAC;IAES,UAAU,CAAC,KAAY,EAAE,IAAiB;QAClD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;QACzE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC3C,CAAC;8GA3BU,sBAAsB;kGAAtB,sBAAsB,wOAXtB;YACT;gBACE,OAAO,EAAE,SAAS;gBAClB,QAAQ,EAAE,wBAAwB;aACnC;YACD;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,QAAQ,EAAE,eAAe;aAC1B;SACF,sEChDH,iwBA0BA,4CDII,OAAO,yLACP,cAAc,kGACd,QAAQ,6FACR,UAAU,8EACV,SAAS,oPACT,OAAO,0NACP,OAAO,2JACP,OAAO;;2FAaE,sBAAsB;kBAxBlC,SAAS;+BACE,sBAAsB,WAEvB;wBACP,OAAO;wBACP,cAAc;wBACd,QAAQ;wBACR,UAAU;wBACV,SAAS;wBACT,OAAO;wBACP,OAAO;wBACP,OAAO;qBACR,aACU;wBACT;4BACE,OAAO,EAAE,SAAS;4BAClB,QAAQ,EAAE,wBAAwB;yBACnC;wBACD;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,QAAQ,EAAE,eAAe;yBAC1B;qBACF;;sBAMA,KAAK;;sBAEL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBAEL,MAAM;;sBACN,MAAM","sourcesContent":["import {\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  Output,\n  SimpleChanges,\n} from '@angular/core';\nimport {\n  IonButton,\n  IonButtons,\n  IonCard,\n  IonIcon,\n  IonItem,\n  IonItemDivider,\n  IonLabel,\n  IonList,\n  ModalController,\n} from '@ionic/angular/standalone';\nimport { ClassName } from '../../components';\nimport { ISelectItem, ISelectItemEvent } from '../selector-interfaces';\nimport {\n  OverlayController,\n  SelectorBaseComponent,\n} from '../selector-base.component';\n\n@Component({\n  selector: 'sneat-multi-selector',\n  templateUrl: './multi-selector.component.html',\n  imports: [\n    IonCard,\n    IonItemDivider,\n    IonLabel,\n    IonButtons,\n    IonButton,\n    IonItem,\n    IonIcon,\n    IonList,\n  ],\n  providers: [\n    {\n      provide: ClassName,\n      useValue: 'MultiSelectorComponent',\n    },\n    {\n      provide: OverlayController,\n      useClass: ModalController,\n    },\n  ],\n})\nexport class MultiSelectorComponent<T = ISelectItem>\n  extends SelectorBaseComponent<T>\n  implements OnChanges\n{\n  @Input() title = 'Select';\n\n  @Input() canRemove = false;\n  @Input() public allItems?: ISelectItem[];\n  @Input() public selectedIDs?: readonly string[];\n\n  @Output() readonly removeItems = new EventEmitter<ISelectItemEvent[]>();\n  @Output() readonly addItems = new EventEmitter<ISelectItemEvent[]>();\n\n  protected selectedItems?: ISelectItem[];\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['allItems']) {\n      this.selectedItems = this.allItems?.filter((item) =>\n        this.selectedIDs?.includes(item.id),\n      );\n    }\n  }\n\n  protected removeItem(event: Event, item: ISelectItem): void {\n    event.stopPropagation();\n    this.selectedItems = this.selectedItems?.filter((i) => i.id !== item.id);\n    this.removeItems.emit([{ event, item }]);\n  }\n}\n","<ion-card>\n  <ion-item-divider color=\"light\">\n    <ion-label color=\"medium\">{{ title }}</ion-label>\n    <ion-buttons slot=\"end\">\n      <ion-button color=\"medium\">\n        <ion-icon name=\"add-outline\" />\n        <ion-label>Add</ion-label>\n      </ion-button>\n    </ion-buttons>\n  </ion-item-divider>\n\n  <ion-list>\n    @for (item of selectedItems; track item.id) {\n      <ion-item>\n        <ion-label>{{ item.title }}</ion-label>\n        @if (canRemove) {\n          <ion-buttons slot=\"end\">\n            <ion-button title=\"Remove\" (click)=\"removeItem($event, item)\">\n              <ion-icon name=\"close-outline\" />\n            </ion-button>\n          </ion-buttons>\n        }\n      </ion-item>\n    }\n  </ion-list>\n</ion-card>\n"]}

package/esm2022/lib/selector/multi-selector/multi-selector.service.js

@@ -0,0 +1,49 @@
+import { __decorate, __metadata, __param } from "tslib";
+import { Inject } from '@angular/core';
+import { ModalController } from '@ionic/angular/standalone';
+import { ErrorLogger } from '@sneat/core';
+import { MultiSelectorComponent } from './multi-selector.component';
+let MultiSelectorService = class MultiSelectorService {
+    constructor(errorLogger, modalController) {
+        this.errorLogger = errorLogger;
+        this.modalController = modalController;
+    }
+    selectMultiple(items, selectedItems) {
+        const result = new Promise((resolve, reject) => {
+            const modalOptions = {
+                component: MultiSelectorComponent,
+                componentProps: {
+                    items,
+                    selectedItems,
+                },
+                keyboardClose: true,
+            };
+            this.modalController
+                .create(modalOptions)
+                .then((modal) => {
+                modal
+                    .onDidDismiss()
+                    .then((res) => resolve(res.data?.selectedItems || []))
+                    .catch((err) => {
+                    this.errorLogger.logError(err, 'Failed to handle modal dismiss');
+                    reject(err);
+                });
+                modal.present().catch((err) => {
+                    reject(err);
+                    this.errorLogger.logError('Failed to present modal');
+                });
+            })
+                .catch((err) => {
+                this.errorLogger.logError(err, 'Failed to create modal');
+                reject(err);
+            });
+        });
+        return result;
+    }
+};
+MultiSelectorService = __decorate([
+    __param(0, Inject(ErrorLogger)),
+    __metadata("design:paramtypes", [Object, ModalController])
+], MultiSelectorService);
+export { MultiSelectorService };
+//# sourceMappingURL=multi-selector.service.js.map

package/esm2022/lib/selector/multi-selector/multi-selector.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-selector.service.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/selector/multi-selector/multi-selector.service.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,eAAe,EAAgB,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAgB,MAAM,aAAa,CAAC;AAExD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEpE,IAAa,oBAAoB,GAAjC,MAAa,oBAAoB;IAC/B,YACwC,WAAyB,EAC9C,eAAgC;QADX,gBAAW,GAAX,WAAW,CAAc;QAC9C,oBAAe,GAAf,eAAe,CAAiB;IAChD,CAAC;IAEJ,cAAc,CACZ,KAAoB,EACpB,aAA4B;QAE5B,MAAM,MAAM,GAAG,IAAI,OAAO,CAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YAC5D,MAAM,YAAY,GAAiB;gBACjC,SAAS,EAAE,sBAAsB;gBACjC,cAAc,EAAE;oBACd,KAAK;oBACL,aAAa;iBACd;gBACD,aAAa,EAAE,IAAI;aACpB,CAAC;YACF,IAAI,CAAC,eAAe;iBACjB,MAAM,CAAC,YAAY,CAAC;iBACpB,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;gBACd,KAAK;qBACF,YAAY,EAAE;qBACd,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,aAAa,IAAI,EAAE,CAAC,CAAC;qBACrD,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;oBACb,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,EAAE,gCAAgC,CAAC,CAAC;oBACjE,MAAM,CAAC,GAAG,CAAC,CAAC;gBACd,CAAC,CAAC,CAAC;gBACL,KAAK,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;oBAC5B,MAAM,CAAC,GAAG,CAAC,CAAC;oBACZ,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CAAC;gBACvD,CAAC,CAAC,CAAC;YACL,CAAC,CAAC;iBACD,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;gBACb,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC,CAAC;gBACzD,MAAM,CAAC,GAAG,CAAC,CAAC;YACd,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC;IAChB,CAAC;CACF,CAAA;AA1CY,oBAAoB;IAE5B,WAAA,MAAM,CAAC,WAAW,CAAC,CAAA;6CACc,eAAe;GAHxC,oBAAoB,CA0ChC","sourcesContent":["import { Inject } from '@angular/core';\nimport { ModalController, ModalOptions } from '@ionic/angular/standalone';\nimport { ErrorLogger, IErrorLogger } from '@sneat/core';\nimport { ISelectItem } from '../selector-interfaces';\nimport { MultiSelectorComponent } from './multi-selector.component';\n\nexport class MultiSelectorService {\n  constructor(\n    @Inject(ErrorLogger) private readonly errorLogger: IErrorLogger,\n    private readonly modalController: ModalController,\n  ) {}\n\n  selectMultiple(\n    items: ISelectItem[],\n    selectedItems: ISelectItem[],\n  ): Promise<ISelectItem[]> {\n    const result = new Promise<ISelectItem[]>((resolve, reject) => {\n      const modalOptions: ModalOptions = {\n        component: MultiSelectorComponent,\n        componentProps: {\n          items,\n          selectedItems,\n        },\n        keyboardClose: true,\n      };\n      this.modalController\n        .create(modalOptions)\n        .then((modal) => {\n          modal\n            .onDidDismiss()\n            .then((res) => resolve(res.data?.selectedItems || []))\n            .catch((err) => {\n              this.errorLogger.logError(err, 'Failed to handle modal dismiss');\n              reject(err);\n            });\n          modal.present().catch((err) => {\n            reject(err);\n            this.errorLogger.logError('Failed to present modal');\n          });\n        })\n        .catch((err) => {\n          this.errorLogger.logError(err, 'Failed to create modal');\n          reject(err);\n        });\n    });\n\n    return result;\n  }\n}\n"]}

package/esm2022/lib/selector/select-from-list/index.js

@@ -0,0 +1,2 @@
+export * from './select-from-list.component';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/selector/select-from-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/selector/select-from-list/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC","sourcesContent":["export * from './select-from-list.component';\n"]}

package/esm2022/lib/selector/select-from-list/select-from-list.component.js

@@ -0,0 +1,234 @@
+import { ChangeDetectionStrategy, Component, computed, EventEmitter, forwardRef, input, Input, Output, signal, ViewChild, inject, } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR, } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { IonButton, IonButtons, IonCheckbox, IonIcon, IonInput, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonRadio, IonRadioGroup, IonSelect, IonSelectOption, IonSpinner, } from '@ionic/angular/standalone';
+import { ErrorLogger } from '@sneat/core';
+import { NEVER, Observable, Subject, takeUntil } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class SelectFromListComponent {
+    constructor() {
+        this.errorLogger = inject(ErrorLogger);
+        this.value = '';
+        this.valueChange = new EventEmitter();
+        this.filterLabel = 'Find';
+        this.label = 'Please choose';
+        this.items$ = NEVER;
+        this.$items = signal(undefined, ...(ngDevMode ? [{ debugName: "$items" }] : []));
+        this.other = 'none';
+        this.canAdd = false;
+        this.filterChanged = new EventEmitter();
+        this.selectMode = 'single';
+        this.isReadonly = false;
+        this.$isProcessing = input(...(ngDevMode ? [undefined, { debugName: "$isProcessing" }] : []));
+        // @Input() ngModel?: string;
+        // @Output() readonly ngModelChange = new EventEmitter<string>();
+        this.destroyed = new Subject();
+        this.$displayItems = signal(undefined, ...(ngDevMode ? [{ debugName: "$displayItems" }] : []));
+        this.$hiddenCount = computed(() => {
+            return (this.$items()?.length || 0) - (this.$displayItems()?.length || 0);
+        }, ...(ngDevMode ? [{ debugName: "$hiddenCount" }] : []));
+        this.isDisabled = false;
+        this.$filter = signal('', ...(ngDevMode ? [{ debugName: "$filter" }] : []));
+        this.$selectedItem = signal(undefined, ...(ngDevMode ? [{ debugName: "$selectedItem" }] : []));
+        this.onChange = (id) => {
+            this.value = id;
+            if (this.$selectedItem()?.id !== id) {
+                const selectedItem = this.items?.find((item) => item.id === id);
+                this.$selectedItem.set(selectedItem);
+            }
+            this.valueChange.emit(this.value);
+        };
+        this.onTouched = () => void 0;
+    }
+    focus() {
+        setTimeout(() => {
+            this.filterInput
+                ?.setFocus()
+                .catch(this.errorLogger.logErrorHandler('Failed to set focus to filter input'));
+        }, 100);
+    }
+    ngOnChanges(changes) {
+        if (changes['items']) {
+            this.$items.set(this.items);
+            this.applyFilter();
+        }
+        if (changes['items$'] && this.items$) {
+            this.items$?.pipe(takeUntil(this.destroyed)).subscribe((items) => {
+                this.$items.set(items);
+                this.applyFilter();
+            });
+        }
+    }
+    applyFilter() {
+        const f = this.$filter().trim().toLowerCase();
+        // console.log('SelectFromListComponent.applyFilter', f);
+        const items = this.$items();
+        let displayItems = f
+            ? items?.filter((v) => v.title.toLowerCase().includes(f) ||
+                v.longTitle?.toLowerCase().includes(f) ||
+                (this.filterItem && this.filterItem(v, f)))
+            : items;
+        if (displayItems && this.sortBy) {
+            switch (this.sortBy) {
+                case 'title':
+                    displayItems = [...displayItems].toSorted((a, b) => a.title.localeCompare(b.title));
+                    break;
+                case 'id':
+                    displayItems = [...displayItems].toSorted((a, b) => a.id.localeCompare(b.id));
+                    break;
+            }
+        }
+        this.$displayItems.set(displayItems);
+    }
+    select(item) {
+        switch (this.selectMode) {
+            case 'multiple':
+                return;
+            case 'single':
+                this.$selectedItem.set(item);
+                this.onChange(item.id);
+                if (this.$filter()) {
+                    this.clearFilter();
+                }
+        }
+    }
+    onRadioChanged(event) {
+        if (this.selectMode !== 'single') {
+            return;
+        }
+        const value = event.detail['value'];
+        this.value = value;
+        this.onChange(value);
+        this.clearFilter();
+    }
+    onSelectChanged() {
+        // this.value = (event as CustomEvent).detail['value'] as string;
+        this.onChange(this.value || '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    writeValue(obj) {
+        this.value = obj;
+    }
+    onFilterChanged(event, source) {
+        void source;
+        this.$filter.set(event.detail.value || '');
+        this.applyFilter();
+        this.filterChanged.emit(this.$filter());
+    }
+    clearFilter() {
+        this.$filter.set('');
+        this.filterChanged.emit(this.$filter());
+        this.applyFilter();
+    }
+    deselect() {
+        this.value = '';
+        this.onChange(this.value);
+    }
+    onAdd(event) {
+        event.preventDefault();
+        this.value = this.$filter();
+        this.onChange(this.value);
+    }
+    onCheckboxChange(event, item) {
+        void event;
+        void item;
+    }
+    ngOnDestroy() {
+        this.destroyed.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SelectFromListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SelectFromListComponent, isStandalone: true, selector: "sneat-select-from-list", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: false, isRequired: false, transformFunction: null }, listLabelColor: { classPropertyName: "listLabelColor", publicName: "listLabelColor", isSignal: false, isRequired: false, transformFunction: null }, isFilterable: { classPropertyName: "isFilterable", publicName: "isFilterable", isSignal: false, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, items$: { classPropertyName: "items$", publicName: "items$", isSignal: false, isRequired: false, transformFunction: null }, lastItemLines: { classPropertyName: "lastItemLines", publicName: "lastItemLines", isSignal: false, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: false, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: false, isRequired: false, transformFunction: null }, other: { classPropertyName: "other", publicName: "other", isSignal: false, isRequired: false, transformFunction: null }, canAdd: { classPropertyName: "canAdd", publicName: "canAdd", isSignal: false, isRequired: false, transformFunction: null }, filterItem: { classPropertyName: "filterItem", publicName: "filterItem", isSignal: false, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: false, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: false, isRequired: false, transformFunction: null }, $isProcessing: { classPropertyName: "$isProcessing", publicName: "$isProcessing", isSignal: true, isRequired: false, transformFunction: null }, sortBy: { classPropertyName: "sortBy", publicName: "sortBy", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", filterChanged: "filterChanged" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectFromListComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "addInput", first: true, predicate: IonInput, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "selectInput", first: true, predicate: ["selectInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (value) {\n  <ion-item\n    [lines]=\"lastItemLines\"\n    [class]=\"{ 'sneat-tiny-end-padding': !isReadonly }\"\n  >\n    @if ($selectedItem()?.iconName) {\n      <ion-icon\n        slot=\"start\"\n        [name]=\"$selectedItem()?.iconName\"\n        [color]=\"\n          $selectedItem()?.iconColor || $selectedItem()?.labelColor || 'medium'\n        \"\n      />\n    }\n    <ion-select\n      #selectInput\n      interface=\"popover\"\n      [label]=\"label\"\n      [(ngModel)]=\"value\"\n      (ionChange)=\"onSelectChanged()\"\n      [disabled]=\"isReadonly || !!$isProcessing()\"\n    >\n      @for (item of items; track item.id) {\n        <ion-select-option [value]=\"item.id\">\n          {{ item.emoji }}\n          @if (item.shortTitle) {\n            {{ item.shortTitle }}\n          } @else {\n            {{ item.title }}\n          }\n        </ion-select-option>\n      }\n      <!--\t\t<ion-select-option value=\"other\">OTHER</ion-select-option>-->\n    </ion-select>\n    @if ($isProcessing()) {\n      <ion-spinner name=\"lines-small\" color=\"medium\" slot=\"end\" />\n    } @else if (!isReadonly) {\n      <ion-buttons slot=\"end\" class=\"ion-no-margin\">\n        <ion-button color=\"medium\" title=\"Deselect\" (click)=\"deselect()\">\n          <ion-icon name=\"close-outline\" />\n        </ion-button>\n      </ion-buttons>\n    }\n  </ion-item>\n} @else {\n  @if (isFilterable) {\n    <ion-item class=\"sneat-tiny-end-padding\">\n      <ion-input\n        #filterInput\n        color=\"medium\"\n        placeholder=\"filter\"\n        [label]=\"filterLabel\"\n        [value]=\"$filter()\"\n        (ionChange)=\"onFilterChanged($event, 'ionChange')\"\n        (ionInput)=\"onFilterChanged($event, 'ionInput')\"\n      />\n      @if ($filter()) {\n        <ion-buttons slot=\"end\">\n          @if (canAdd && $hiddenCount()) {\n            <ion-button\n              title=\"Use this\"\n              color=\"primary\"\n              (click)=\"onAdd($event)\"\n            >\n              <ion-icon name=\"add-outline\" />\n              <ion-label>Add</ion-label>\n            </ion-button>\n          }\n          <ion-button (click)=\"clearFilter()\" title=\"Clear filter\">\n            <ion-icon name=\"close-outline\" />\n          </ion-button>\n        </ion-buttons>\n      }\n    </ion-item>\n  }\n\n  @if (items && !items.length) {\n    <ion-item-divider>\n      <ion-label>No items yet.</ion-label>\n    </ion-item-divider>\n  }\n\n  @if (labelPlacement) {\n    <ion-radio-group [(ngModel)]=\"value\" (ionChange)=\"onRadioChanged($event)\">\n      <ion-list class=\"ion-no-padding\" lines=\"full\">\n        @if (listLabel === \"divider\") {\n          <ion-item [color]=\"listLabelColor\">\n            <ion-label>{{ label }}</ion-label>\n          </ion-item>\n        }\n        @for (item of $displayItems(); track item.id) {\n          <ion-item\n            [lines]=\"item.description1 ? 'inset' : 'full'\"\n            (click)=\"select(item)\"\n            tappable=\"true\"\n          >\n            @switch (selectMode) {\n              @case (\"multiple\") {\n                <ion-checkbox\n                  slot=\"start\"\n                  [value]=\"item.id\"\n                  [checked]=\"false\"\n                  [disabled]=\"isDisabled\"\n                  (ionChange)=\"onCheckboxChange($event, item)\"\n                />\n                <ion-label>\n                  <!-- TODO: duplicate code with the next case -->\n                  {{ item.emoji }}\n                  @if (item.shortTitle) {\n                    @if (item.longTitle) {\n                      {{ item.longTitle }} - {{ item.shortTitle }}\n                    } @else {\n                      {{ item.title }} - {{ item.shortTitle }}\n                    }\n                  } @else if (item.longTitle) {\n                    {{ item.longTitle }}\n                  } @else {\n                    {{ item.title }}\n                  }\n                </ion-label>\n              }\n              @case (\"single\") {\n                <ion-radio\n                  [value]=\"item.id\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"\n                    justify ||\n                    (!labelPlacement || labelPlacement === 'start'\n                      ? 'space-between'\n                      : 'start')\n                  \"\n                >\n                  {{ item.emoji }}\n                  @if (item.shortTitle) {\n                    @if (item.longTitle) {\n                      {{ item.longTitle }} - {{ item.shortTitle }}\n                    } @else {\n                      {{ item.title }} - {{ item.shortTitle }}\n                    }\n                  } @else if (item.longTitle) {\n                    {{ item.longTitle }}\n                  } @else {\n                    {{ item.title }}\n                  }\n                </ion-radio>\n              }\n            }\n          </ion-item>\n          @if (item.description1) {\n            <ion-item-divider>\n              <ion-label>\n                {{ item.description1 }}\n                @if (item.description2) {\n                  <i>{{ item.description2 }}</i>\n                }\n              </ion-label>\n            </ion-item-divider>\n          }\n        }\n      </ion-list>\n    </ion-radio-group>\n  } @else {\n    <ion-item-group>\n      @for (item of $displayItems(); track item.id; let last = $last) {\n        <ion-item\n          [lines]=\"item.description1 ? 'inset' : last ? lastItemLines : 'full'\"\n          button\n          (click)=\"select(item)\"\n        >\n          @if (item.iconName) {\n            <ion-icon\n              slot=\"start\"\n              [name]=\"item.iconName\"\n              [color]=\"item.iconColor || item.labelColor || 'medium'\"\n            />\n          }\n          @if (!labelPlacement) {\n            <ion-label [color]=\"item.labelColor\">\n              <span class=\"ion-margin-end\">{{ item.emoji }}</span>\n              {{ item.title }}\n            </ion-label>\n          }\n        </ion-item>\n        @if (item.description1) {\n          <ion-item [lines]=\"last ? lastItemLines : 'full'\">\n            <ion-label color=\"medium\">\n              {{ item.description1 }}\n              @if (item.description2) {\n                <i>{{ item.description2 }}</i>\n              }\n            </ion-label>\n          </ion-item>\n        }\n      }\n    </ion-item-group>\n  }\n  @if ($hiddenCount(); as hiddenCount) {\n    <ion-item-divider>\n      <ion-label color=\"medium\"\n        >{{ hiddenCount }} out of {{ items?.length }} items are hidden by filter\n      </ion-label>\n      <ion-buttons slot=\"end\">\n        <ion-button (click)=\"clearFilter()\">\n          <ion-icon name=\"close-outline\" slot=\"start\" />\n          <ion-label>Clear filter</ion-label>\n        </ion-button>\n      </ion-buttons>\n    </ion-item-divider>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonItemGroup, selector: "ion-item-group" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SelectFromListComponent, decorators: [{
+            type: Component,
+            args: [{ providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectFromListComponent),
+                            multi: true,
+                        },
+                    ], imports: [
+                        FormsModule,
+                        RouterModule,
+                        IonItem,
+                        IonIcon,
+                        IonSelect,
+                        IonSelectOption,
+                        IonButtons,
+                        IonButton,
+                        IonInput,
+                        IonItemDivider,
+                        IonRadioGroup,
+                        IonList,
+                        IonLabel,
+                        IonCheckbox,
+                        IonRadio,
+                        IonItemGroup,
+                        IonSpinner,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'sneat-select-from-list', template: "@if (value) {\n  <ion-item\n    [lines]=\"lastItemLines\"\n    [class]=\"{ 'sneat-tiny-end-padding': !isReadonly }\"\n  >\n    @if ($selectedItem()?.iconName) {\n      <ion-icon\n        slot=\"start\"\n        [name]=\"$selectedItem()?.iconName\"\n        [color]=\"\n          $selectedItem()?.iconColor || $selectedItem()?.labelColor || 'medium'\n        \"\n      />\n    }\n    <ion-select\n      #selectInput\n      interface=\"popover\"\n      [label]=\"label\"\n      [(ngModel)]=\"value\"\n      (ionChange)=\"onSelectChanged()\"\n      [disabled]=\"isReadonly || !!$isProcessing()\"\n    >\n      @for (item of items; track item.id) {\n        <ion-select-option [value]=\"item.id\">\n          {{ item.emoji }}\n          @if (item.shortTitle) {\n            {{ item.shortTitle }}\n          } @else {\n            {{ item.title }}\n          }\n        </ion-select-option>\n      }\n      <!--\t\t<ion-select-option value=\"other\">OTHER</ion-select-option>-->\n    </ion-select>\n    @if ($isProcessing()) {\n      <ion-spinner name=\"lines-small\" color=\"medium\" slot=\"end\" />\n    } @else if (!isReadonly) {\n      <ion-buttons slot=\"end\" class=\"ion-no-margin\">\n        <ion-button color=\"medium\" title=\"Deselect\" (click)=\"deselect()\">\n          <ion-icon name=\"close-outline\" />\n        </ion-button>\n      </ion-buttons>\n    }\n  </ion-item>\n} @else {\n  @if (isFilterable) {\n    <ion-item class=\"sneat-tiny-end-padding\">\n      <ion-input\n        #filterInput\n        color=\"medium\"\n        placeholder=\"filter\"\n        [label]=\"filterLabel\"\n        [value]=\"$filter()\"\n        (ionChange)=\"onFilterChanged($event, 'ionChange')\"\n        (ionInput)=\"onFilterChanged($event, 'ionInput')\"\n      />\n      @if ($filter()) {\n        <ion-buttons slot=\"end\">\n          @if (canAdd && $hiddenCount()) {\n            <ion-button\n              title=\"Use this\"\n              color=\"primary\"\n              (click)=\"onAdd($event)\"\n            >\n              <ion-icon name=\"add-outline\" />\n              <ion-label>Add</ion-label>\n            </ion-button>\n          }\n          <ion-button (click)=\"clearFilter()\" title=\"Clear filter\">\n            <ion-icon name=\"close-outline\" />\n          </ion-button>\n        </ion-buttons>\n      }\n    </ion-item>\n  }\n\n  @if (items && !items.length) {\n    <ion-item-divider>\n      <ion-label>No items yet.</ion-label>\n    </ion-item-divider>\n  }\n\n  @if (labelPlacement) {\n    <ion-radio-group [(ngModel)]=\"value\" (ionChange)=\"onRadioChanged($event)\">\n      <ion-list class=\"ion-no-padding\" lines=\"full\">\n        @if (listLabel === \"divider\") {\n          <ion-item [color]=\"listLabelColor\">\n            <ion-label>{{ label }}</ion-label>\n          </ion-item>\n        }\n        @for (item of $displayItems(); track item.id) {\n          <ion-item\n            [lines]=\"item.description1 ? 'inset' : 'full'\"\n            (click)=\"select(item)\"\n            tappable=\"true\"\n          >\n            @switch (selectMode) {\n              @case (\"multiple\") {\n                <ion-checkbox\n                  slot=\"start\"\n                  [value]=\"item.id\"\n                  [checked]=\"false\"\n                  [disabled]=\"isDisabled\"\n                  (ionChange)=\"onCheckboxChange($event, item)\"\n                />\n                <ion-label>\n                  <!-- TODO: duplicate code with the next case -->\n                  {{ item.emoji }}\n                  @if (item.shortTitle) {\n                    @if (item.longTitle) {\n                      {{ item.longTitle }} - {{ item.shortTitle }}\n                    } @else {\n                      {{ item.title }} - {{ item.shortTitle }}\n                    }\n                  } @else if (item.longTitle) {\n                    {{ item.longTitle }}\n                  } @else {\n                    {{ item.title }}\n                  }\n                </ion-label>\n              }\n              @case (\"single\") {\n                <ion-radio\n                  [value]=\"item.id\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"\n                    justify ||\n                    (!labelPlacement || labelPlacement === 'start'\n                      ? 'space-between'\n                      : 'start')\n                  \"\n                >\n                  {{ item.emoji }}\n                  @if (item.shortTitle) {\n                    @if (item.longTitle) {\n                      {{ item.longTitle }} - {{ item.shortTitle }}\n                    } @else {\n                      {{ item.title }} - {{ item.shortTitle }}\n                    }\n                  } @else if (item.longTitle) {\n                    {{ item.longTitle }}\n                  } @else {\n                    {{ item.title }}\n                  }\n                </ion-radio>\n              }\n            }\n          </ion-item>\n          @if (item.description1) {\n            <ion-item-divider>\n              <ion-label>\n                {{ item.description1 }}\n                @if (item.description2) {\n                  <i>{{ item.description2 }}</i>\n                }\n              </ion-label>\n            </ion-item-divider>\n          }\n        }\n      </ion-list>\n    </ion-radio-group>\n  } @else {\n    <ion-item-group>\n      @for (item of $displayItems(); track item.id; let last = $last) {\n        <ion-item\n          [lines]=\"item.description1 ? 'inset' : last ? lastItemLines : 'full'\"\n          button\n          (click)=\"select(item)\"\n        >\n          @if (item.iconName) {\n            <ion-icon\n              slot=\"start\"\n              [name]=\"item.iconName\"\n              [color]=\"item.iconColor || item.labelColor || 'medium'\"\n            />\n          }\n          @if (!labelPlacement) {\n            <ion-label [color]=\"item.labelColor\">\n              <span class=\"ion-margin-end\">{{ item.emoji }}</span>\n              {{ item.title }}\n            </ion-label>\n          }\n        </ion-item>\n        @if (item.description1) {\n          <ion-item [lines]=\"last ? lastItemLines : 'full'\">\n            <ion-label color=\"medium\">\n              {{ item.description1 }}\n              @if (item.description2) {\n                <i>{{ item.description2 }}</i>\n              }\n            </ion-label>\n          </ion-item>\n        }\n      }\n    </ion-item-group>\n  }\n  @if ($hiddenCount(); as hiddenCount) {\n    <ion-item-divider>\n      <ion-label color=\"medium\"\n        >{{ hiddenCount }} out of {{ items?.length }} items are hidden by filter\n      </ion-label>\n      <ion-buttons slot=\"end\">\n        <ion-button (click)=\"clearFilter()\">\n          <ion-icon name=\"close-outline\" slot=\"start\" />\n          <ion-label>Clear filter</ion-label>\n        </ion-button>\n      </ion-buttons>\n    </ion-item-divider>\n  }\n}\n" }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], filterLabel: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], listLabel: [{
+                type: Input
+            }], listLabelColor: [{
+                type: Input
+            }], isFilterable: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], items$: [{
+                type: Input
+            }], lastItemLines: [{
+                type: Input
+            }], labelPlacement: [{
+                type: Input
+            }], justify: [{
+                type: Input
+            }], other: [{
+                type: Input
+            }], canAdd: [{
+                type: Input
+            }], filterItem: [{
+                type: Input
+            }], filterChanged: [{
+                type: Output
+            }], selectMode: [{
+                type: Input
+            }], isReadonly: [{
+                type: Input
+            }], $isProcessing: [{ type: i0.Input, args: [{ isSignal: true, alias: "$isProcessing", required: false }] }], sortBy: [{
+                type: Input
+            }], addInput: [{
+                type: ViewChild,
+                args: [IonInput, { static: false }]
+            }], filterInput: [{
+                type: ViewChild,
+                args: ['filterInput', { static: false }]
+            }], selectInput: [{
+                type: ViewChild,
+                args: ['selectInput', { static: false }]
+            }] } });
+//# sourceMappingURL=select-from-list.component.js.map