@hestia-earth/ui-components 0.33.11 → 0.33.13

package/common/sort-select/sort-select.component.d.ts

@@ -11,16 +11,14 @@ export interface SortSelectEvent {
 export type SortSelectOrder = 'asc' | 'desc';
 export declare class SortSelectComponent {
     protected readonly sortOptions: import("@angular/core").InputSignal<SortOption[]>;
-    protected readonly alignment: import("@angular/core").WritableSignal<"left" | "right">;
     protected readonly sortChange: import("@angular/core").OutputEmitterRef<SortSelectEvent>;
-    protected readonly sortBySignal: import("@angular/core").WritableSignal<string>;
-    protected readonly sortOrderSignal: import("@angular/core").WritableSignal<SortSelectOrder>;
+    protected readonly sortBy: import("@angular/core").ModelSignal<string>;
+    protected readonly sortOrder: import("@angular/core").ModelSignal<SortSelectOrder>;
     protected readonly showSortBy: import("@angular/core").WritableSignal<boolean>;
-    set sortBy(value: string);
-    set sortOrder(value: SortSelectOrder);
+    protected readonly alignment: import("@angular/core").WritableSignal<"left" | "right">;
     protected sort(option: SortOption): void;
     private _toggleSortBy;
     private _emitSortChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<SortSelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SortSelectComponent, "he-sort-select", never, { "sortOptions": { "alias": "sortOptions"; "required": true; "isSignal": true; }; "sortBy": { "alias": "sortBy"; "required": false; }; "sortOrder": { "alias": "sortOrder"; "required": false; }; }, { "sortChange": "sortChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SortSelectComponent, "he-sort-select", never, { "sortOptions": { "alias": "sortOptions"; "required": true; "isSignal": true; }; "sortBy": { "alias": "sortBy"; "required": false; "isSignal": true; }; "sortOrder": { "alias": "sortOrder"; "required": false; "isSignal": true; }; }, { "sortChange": "sortChange"; "sortBy": "sortByChange"; "sortOrder": "sortOrderChange"; }, never, never, true, never>;
 }

package/common/tags-input.directive.d.ts

@@ -1,10 +1,36 @@
 import { AfterViewInit, OnDestroy } from '@angular/core';
 import * as i0 from "@angular/core";
+interface ITagsInputOptions {
+    enabled?: boolean;
+    items?: any;
+    allowDuplicates?: boolean;
+    caseSensitive?: boolean;
+    clearSelectionOnTyping?: boolean;
+    closeDropdownOnItemSelect?: boolean;
+    delimiter?: string;
+    freeInput?: boolean;
+    highlightDuplicate?: boolean;
+    highlightMatchesString?: boolean;
+    itemValue?: string;
+    itemText?: string;
+    maxTags?: number;
+    maxChars?: number;
+    minChars?: number;
+    noResultsLabel?: string;
+    placeholder?: string;
+    removable?: boolean;
+    searchMinChars?: number;
+    searchOn?: 'text' | 'value';
+    selectable?: boolean;
+    source?: any;
+    tagClass?: string;
+    trim?: boolean;
+}
 export declare class TagsInputDirective implements AfterViewInit, OnDestroy {
-    private elementRef;
+    private readonly elementRef;
     private tagsInput?;
     private inputEvents;
-    private appTagsInput;
+    protected readonly appTagsInput: import("@angular/core").InputSignal<ITagsInputOptions>;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private get input();
@@ -15,5 +41,6 @@ export declare class TagsInputDirective implements AfterViewInit, OnDestroy {
     private addInputValue;
     private enableTagsInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<TagsInputDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TagsInputDirective, "[appTagsInput]", never, { "appTagsInput": { "alias": "appTagsInput"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TagsInputDirective, "[appTagsInput]", never, { "appTagsInput": { "alias": "appTagsInput"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+export {};

package/fesm2022/hestia-earth-ui-components.mjs

@@ -5331,10 +5331,10 @@ class TagsInputDirective {
     constructor() {
         this.elementRef = inject(ElementRef);
         this.inputEvents = [];
-        this.appTagsInput = {};
+        this.appTagsInput = input.required({});
     }
     ngAfterViewInit() {
-        const { enabled } = this.appTagsInput;
+        const { enabled } = this.appTagsInput();
         const { localName } = this.input;
         setTimeout(() => !this.tagsInput && enabled && localName === 'input' && this.enableTagsInput());
     }
@@ -5357,7 +5357,9 @@ class TagsInputDirective {
         this.inputEvents.push({ event, listener });
     }
     mapValue(value) {
-        return this.appTagsInput.items.type in restrictToType ? restrictToType[this.appTagsInput.items.type](value) : value;
+        return this.appTagsInput().items.type in restrictToType
+            ? restrictToType[this.appTagsInput().items.type](value)
+            : value;
     }
     addInputValue(value) {
         if (value && this.mapValue(value)) {
@@ -5367,7 +5369,7 @@ class TagsInputDirective {
     }
     enableTagsInput() {
         try {
-            const { enabled, items, ...options } = this.appTagsInput;
+            const { enabled, items, ...options } = this.appTagsInput();
             this.tagsInput = new BulmaTagsInput(this.input, options);
             // TODO: remove when fixed, @see https://github.com/CreativeBulma/bulma-tagsinput/issues/23
             const classes = ['is-small', 'is-large'].filter(v => this.input.classList.contains(v));
@@ -5383,7 +5385,7 @@ class TagsInputDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TagsInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: TagsInputDirective, isStandalone: true, selector: "[appTagsInput]", inputs: { appTagsInput: "appTagsInput" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: TagsInputDirective, isStandalone: true, selector: "[appTagsInput]", inputs: { appTagsInput: { classPropertyName: "appTagsInput", publicName: "appTagsInput", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TagsInputDirective, decorators: [{
             type: Directive,
@@ -5391,9 +5393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                     selector: '[appTagsInput]',
                     standalone: true
                 }]
-        }], propDecorators: { appTagsInput: [{
-                type: Input
-            }] } });
+        }] });
 
 class ThousandSuffixesPipe {
     transform(input, digits = 0) {
@@ -5473,48 +5473,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 class SortSelectComponent {
     constructor() {
         this.sortOptions = input.required();
-        this.alignment = signal('right');
         this.sortChange = output();
-        this.sortBySignal = signal('');
-        this.sortOrderSignal = signal('desc');
+        this.sortBy = model('');
+        this.sortOrder = model('desc');
         this.showSortBy = signal(false);
-    }
-    set sortBy(value) {
-        this.sortBySignal.set(value);
-    }
-    set sortOrder(value) {
-        this.sortOrderSignal.set(value);
+        this.alignment = signal('right');
     }
     sort(option) {
-        if (this.sortBySignal() === option.id) {
+        if (this.sortBy() === option.id) {
             this._toggleSortBy();
         }
         else {
-            this.sortBySignal.set(option.id);
-            this.sortOrderSignal.set('desc');
+            this.sortBy.set(option.id);
+            this.sortOrder.set('desc');
         }
         this._emitSortChange();
     }
     _toggleSortBy() {
-        this.sortOrderSignal.update(value => (value === 'asc' ? 'desc' : 'asc'));
+        this.sortOrder.update(value => (value === 'asc' ? 'desc' : 'asc'));
     }
     _emitSortChange() {
         this.sortChange.emit({
-            sortBy: this.sortBySignal(),
-            sortOrder: this.sortOrderSignal()
+            sortBy: this.sortBy(),
+            sortOrder: this.sortOrder()
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SortSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: SortSelectComponent, isStandalone: true, selector: "he-sort-select", inputs: { sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: true, transformFunction: null }, sortBy: { classPropertyName: "sortBy", publicName: "sortBy", isSignal: false, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<div\n  (clickOutside)=\"showSortBy.set(false)\"\n  [class.is-active]=\"showSortBy()\"\n  [ngClass]=\"'is-' + alignment()\"\n  class=\"dropdown\">\n  <div (click)=\"showSortBy.set(!showSortBy())\" class=\"dropdown-trigger\">\n    <button\n      [class.is-active]=\"showSortBy()\"\n      aria-controls=\"sort-menu\"\n      aria-haspopup=\"true\"\n      class=\"button is-ghost\"\n      container=\"body\"\n      [ngbTooltip]=\"showSortBy() ? null : 'Sort options'\"\n      [disableTooltip]=\"showSortBy()\"\n      placement=\"bottom\">\n      <he-svg-icon size=\"24\" name=\"sort-ascending\" aria-hidden=\"true\" />\n    </button>\n  </div>\n  <div class=\"dropdown-menu\" id=\"sort-menu\" role=\"menu\">\n    <div (click)=\"showSortBy.set(false)\" class=\"dropdown-content\">\n      @for (option of sortOptions(); track option) {\n        <a (click)=\"sort(option)\" [class.is-selected]=\"sortBySignal() === option.id\" class=\"dropdown-item\">\n          <he-svg-icon\n            [name]=\"sortOrderSignal() === 'asc' ? 'arrow-up' : 'arrow-down'\"\n            [class.is-invisible]=\"sortBySignal() !== option.id\" />\n          <span [style.border-color]=\"option.color ?? 'transparent'\" class=\"is-pl-2 is-inline-block is-capitalized\">\n            {{ option.label }}\n          </span>\n        </a>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".dropdown-item>span{border-left:2px solid transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideListenAfter"], outputs: ["clickOutside"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: SortSelectComponent, isStandalone: true, selector: "he-sort-select", inputs: { sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: true, transformFunction: null }, sortBy: { classPropertyName: "sortBy", publicName: "sortBy", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", sortBy: "sortByChange", sortOrder: "sortOrderChange" }, ngImport: i0, template: "<div\n  (clickOutside)=\"showSortBy.set(false)\"\n  [class.is-active]=\"showSortBy()\"\n  [ngClass]=\"'is-' + alignment()\"\n  class=\"dropdown\">\n  <div (click)=\"showSortBy.set(!showSortBy())\" class=\"dropdown-trigger\">\n    <button\n      [class.is-active]=\"showSortBy()\"\n      aria-controls=\"sort-menu\"\n      aria-haspopup=\"true\"\n      class=\"button is-ghost\"\n      container=\"body\"\n      [ngbTooltip]=\"showSortBy() ? null : 'Sort options'\"\n      [disableTooltip]=\"showSortBy()\"\n      placement=\"bottom\">\n      <he-svg-icon size=\"24\" name=\"sort-ascending\" aria-hidden=\"true\" />\n    </button>\n  </div>\n  <div class=\"dropdown-menu\" id=\"sort-menu\" role=\"menu\">\n    <div (click)=\"showSortBy.set(false)\" class=\"dropdown-content\">\n      @for (option of sortOptions(); track option) {\n        <a (click)=\"sort(option)\" [class.is-selected]=\"sortBy() === option.id\" class=\"dropdown-item\">\n          <he-svg-icon\n            [name]=\"sortOrder() === 'asc' ? 'arrow-up' : 'arrow-down'\"\n            [class.is-invisible]=\"sortBy() !== option.id\" />\n          <span [style.border-color]=\"option.color ?? 'transparent'\" class=\"is-pl-2 is-inline-block is-capitalized\">\n            {{ option.label }}\n          </span>\n        </a>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".dropdown-item>span{border-left:2px solid transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideListenAfter"], outputs: ["clickOutside"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SortSelectComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-sort-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, ClickOutsideDirective, NgbTooltip, HESvgIconComponent], template: "<div\n  (clickOutside)=\"showSortBy.set(false)\"\n  [class.is-active]=\"showSortBy()\"\n  [ngClass]=\"'is-' + alignment()\"\n  class=\"dropdown\">\n  <div (click)=\"showSortBy.set(!showSortBy())\" class=\"dropdown-trigger\">\n    <button\n      [class.is-active]=\"showSortBy()\"\n      aria-controls=\"sort-menu\"\n      aria-haspopup=\"true\"\n      class=\"button is-ghost\"\n      container=\"body\"\n      [ngbTooltip]=\"showSortBy() ? null : 'Sort options'\"\n      [disableTooltip]=\"showSortBy()\"\n      placement=\"bottom\">\n      <he-svg-icon size=\"24\" name=\"sort-ascending\" aria-hidden=\"true\" />\n    </button>\n  </div>\n  <div class=\"dropdown-menu\" id=\"sort-menu\" role=\"menu\">\n    <div (click)=\"showSortBy.set(false)\" class=\"dropdown-content\">\n      @for (option of sortOptions(); track option) {\n        <a (click)=\"sort(option)\" [class.is-selected]=\"sortBySignal() === option.id\" class=\"dropdown-item\">\n          <he-svg-icon\n            [name]=\"sortOrderSignal() === 'asc' ? 'arrow-up' : 'arrow-down'\"\n            [class.is-invisible]=\"sortBySignal() !== option.id\" />\n          <span [style.border-color]=\"option.color ?? 'transparent'\" class=\"is-pl-2 is-inline-block is-capitalized\">\n            {{ option.label }}\n          </span>\n        </a>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".dropdown-item>span{border-left:2px solid transparent}\n"] }]
-        }], propDecorators: { sortBy: [{
-                type: Input
-            }], sortOrder: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'he-sort-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, ClickOutsideDirective, NgbTooltip, HESvgIconComponent], template: "<div\n  (clickOutside)=\"showSortBy.set(false)\"\n  [class.is-active]=\"showSortBy()\"\n  [ngClass]=\"'is-' + alignment()\"\n  class=\"dropdown\">\n  <div (click)=\"showSortBy.set(!showSortBy())\" class=\"dropdown-trigger\">\n    <button\n      [class.is-active]=\"showSortBy()\"\n      aria-controls=\"sort-menu\"\n      aria-haspopup=\"true\"\n      class=\"button is-ghost\"\n      container=\"body\"\n      [ngbTooltip]=\"showSortBy() ? null : 'Sort options'\"\n      [disableTooltip]=\"showSortBy()\"\n      placement=\"bottom\">\n      <he-svg-icon size=\"24\" name=\"sort-ascending\" aria-hidden=\"true\" />\n    </button>\n  </div>\n  <div class=\"dropdown-menu\" id=\"sort-menu\" role=\"menu\">\n    <div (click)=\"showSortBy.set(false)\" class=\"dropdown-content\">\n      @for (option of sortOptions(); track option) {\n        <a (click)=\"sort(option)\" [class.is-selected]=\"sortBy() === option.id\" class=\"dropdown-item\">\n          <he-svg-icon\n            [name]=\"sortOrder() === 'asc' ? 'arrow-up' : 'arrow-down'\"\n            [class.is-invisible]=\"sortBy() !== option.id\" />\n          <span [style.border-color]=\"option.color ?? 'transparent'\" class=\"is-pl-2 is-inline-block is-capitalized\">\n            {{ option.label }}\n          </span>\n        </a>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".dropdown-item>span{border-left:2px solid transparent}\n"] }]
+        }] });
 
 class ShelfDialogComponent {
     constructor() {
@@ -12577,9 +12567,7 @@ const removeCountFromLabel = (label) => label.replace(/\s*\(\d+\)$/, '').trim();
 class FilterAccordionComponent extends ControlValueAccessor {
     constructor() {
         super();
-        this.destroyRef = inject(DestroyRef);
         this.filterStore = inject(FilterStore);
-        this.debounceSearch = new Subject();
         /**
          * Show the header, with title and global clear/search.
          */
@@ -12627,9 +12615,6 @@ class FilterAccordionComponent extends ControlValueAccessor {
         this.isNumber = isNumber;
         this.search = signal('');
         this.group = computed(() => ({ options: this.filterStore.filteredData() }));
-        this.debounceSearch
-            .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(500), distinctUntilChanged())
-            .subscribe(({ text, group }) => this._onSearch(text, group));
         effect(() => this.data() && this.filterStore.setData(this.data()));
         effect(() => (this.panelStates = Object.fromEntries(allGroups(this.data()).map(({ label }) => [
             label,
@@ -12660,11 +12645,9 @@ class FilterAccordionComponent extends ControlValueAccessor {
                 }
             ])));
     }
-    _onSearch(text, group) {
-        allGroups(getFilteredDirectChildren(group, text)).forEach(group => (this.panelStates[group.label].expanded = true));
-    }
     onSearch(text, group) {
-        this.debounceSearch.next({ text, group });
+        return (text &&
+            allGroups(getFilteredDirectChildren(group, text)).forEach(group => (this.panelStates[group.label].expanded = true)));
     }
     /**
      * Un-select all options, except disabled options.