@haloduck/ui 2.0.32 → 2.0.33

package/fesm2022/haloduck-ui.mjs

@@ -2149,11 +2149,11 @@ class FlipComponent {
         this._isOpen.set(!this._isOpen());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FlipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FlipComponent, isStandalone: true, selector: "haloduck-flip", inputs: { title: "title", isOpen: "isOpen" }, ngImport: i0, template: "<div class=\"relative w-full shadow ring-1 ring-light-inactive/50 dark:ring-dark-inactive/80 sm:rounded-lg bg-light-alternative dark:bg-dark-alternative p-2 flex flex-col gap-2\">\n  <label class=\"text-sm text-light-on-alternative dark:text-dark-on-alternative\">{{ title }}</label>\n  @if(_isOpen()) {\n  <ng-content></ng-content>\n  }\n  <button variant=\"secondary\"\n          class=\"absolute rounded-md border border-inactive px-1 py-0.5 top-1 right-1 hover:cursor-pointer bg-light-inactive dark:bg-dark-inactive text-light-on-inactive dark:text-dark-on-inactive\"\n          (click)=\"toggle()\">\n    @if(_isOpen()) {\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"h-4 w-4\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <path stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M18 15l-6-6-6 6\" />\n    </svg>\n    }\n    @else {\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"h-4 w-4\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <path stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M6 9l6 6 6-6\" />\n    </svg>\n    }\n  </button>\n</div>\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FlipComponent, isStandalone: true, selector: "haloduck-flip", inputs: { title: "title", isOpen: "isOpen" }, ngImport: i0, template: "<div class=\"relative w-full shadow ring-1 ring-light-inactive/50 dark:ring-dark-inactive/80 sm:rounded-lg bg-light-alternative dark:bg-dark-alternative p-2 flex flex-col gap-2\"\n     [class.cursor-pointer]=\"!_isOpen()\"\n     (click)=\"!_isOpen() && toggle()\">\n  <label class=\"text-sm text-light-on-alternative dark:text-dark-on-alternative\" [class.cursor-pointer]=\"!_isOpen()\">{{ title }}</label>\n  @if(_isOpen()) {\n  <ng-content></ng-content>\n  }\n  <button variant=\"secondary\"\n          class=\"absolute rounded-md border border-inactive px-1 py-0.5 top-1 right-1 hover:cursor-pointer bg-light-inactive dark:bg-dark-inactive text-light-on-inactive dark:text-dark-on-inactive\"\n          (click)=\"toggle(); $event.stopPropagation()\">\n    @if(_isOpen()) {\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"h-4 w-4\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <path stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M18 15l-6-6-6 6\" />\n    </svg>\n    }\n    @else {\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"h-4 w-4\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <path stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M6 9l6 6 6-6\" />\n    </svg>\n    }\n  </button>\n</div>\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FlipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-flip', imports: [], template: "<div class=\"relative w-full shadow ring-1 ring-light-inactive/50 dark:ring-dark-inactive/80 sm:rounded-lg bg-light-alternative dark:bg-dark-alternative p-2 flex flex-col gap-2\">\n  <label class=\"text-sm text-light-on-alternative dark:text-dark-on-alternative\">{{ title }}</label>\n  @if(_isOpen()) {\n  <ng-content></ng-content>\n  }\n  <button variant=\"secondary\"\n          class=\"absolute rounded-md border border-inactive px-1 py-0.5 top-1 right-1 hover:cursor-pointer bg-light-inactive dark:bg-dark-inactive text-light-on-inactive dark:text-dark-on-inactive\"\n          (click)=\"toggle()\">\n    @if(_isOpen()) {\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"h-4 w-4\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <path stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M18 15l-6-6-6 6\" />\n    </svg>\n    }\n    @else {\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"h-4 w-4\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <path stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M6 9l6 6 6-6\" />\n    </svg>\n    }\n  </button>\n</div>\n" }]
+            args: [{ selector: 'haloduck-flip', imports: [], template: "<div class=\"relative w-full shadow ring-1 ring-light-inactive/50 dark:ring-dark-inactive/80 sm:rounded-lg bg-light-alternative dark:bg-dark-alternative p-2 flex flex-col gap-2\"\n     [class.cursor-pointer]=\"!_isOpen()\"\n     (click)=\"!_isOpen() && toggle()\">\n  <label class=\"text-sm text-light-on-alternative dark:text-dark-on-alternative\" [class.cursor-pointer]=\"!_isOpen()\">{{ title }}</label>\n  @if(_isOpen()) {\n  <ng-content></ng-content>\n  }\n  <button variant=\"secondary\"\n          class=\"absolute rounded-md border border-inactive px-1 py-0.5 top-1 right-1 hover:cursor-pointer bg-light-inactive dark:bg-dark-inactive text-light-on-inactive dark:text-dark-on-inactive\"\n          (click)=\"toggle(); $event.stopPropagation()\">\n    @if(_isOpen()) {\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"h-4 w-4\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <path stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M18 15l-6-6-6 6\" />\n    </svg>\n    }\n    @else {\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"h-4 w-4\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <path stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M6 9l6 6 6-6\" />\n    </svg>\n    }\n  </button>\n</div>\n" }]
         }], propDecorators: { title: [{
                 type: Input
             }], isOpen: [{
@@ -3218,6 +3218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
             }] } });
 
 class TabsComponent {
+    translateService = inject(TranslocoService);
+    cdr = inject(ChangeDetectorRef);
     tabs = [];
     selectedIndex = 0;
     layout = 'vertical';
@@ -3263,12 +3265,17 @@ class TabsComponent {
         if (this.selectedIndex > this.tabs.length - 1)
             this.selectedIndex = this.tabs.length - 1;
     }
+    ngOnInit() {
+        this.translateService.langChanges$.subscribe(() => {
+            this.cdr.detectChanges();
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TabsComponent, isStandalone: true, selector: "haloduck-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", layout: "layout", labelWidth: "labelWidth" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex gap-2 items-start w-full\" [ngClass]=\"{'flex-col': layout === 'vertical'}\">\n  <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\" [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <ng-content select=\"[slot=label]\"></ng-content>\n  </label>\n\n  <div class=\"flex-1 w-full\">\n    <div class=\"flex items-center gap-1 border-b border-light-inactive dark:border-dark-inactive text-sm/6\">\n      @for (tab of tabs; track tab; let i = $index) {\n        <button type=\"button\"\n                class=\"px-3 py-2 rounded-t-md\"\n                [ngClass]=\"{\n                  'text-light-on-control dark:text-dark-on-control': i !== selectedIndex,\n                  'text-light-primary dark:text-dark-primary border-b-2 border-light-primary dark:border-dark-primary': i === selectedIndex\n                }\"\n                (click)=\"select(i)\">\n          {{ tab.label }}\n        </button>\n      }\n    </div>\n\n    <div class=\"mt-3\">\n      @if (current) {\n        <ng-container *ngComponentOutlet=\"current!.component; inputs: current!.inputs || {}\"></ng-container>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TabsComponent, isStandalone: true, selector: "haloduck-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", layout: "layout", labelWidth: "labelWidth" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex gap-2 items-start w-full\" [ngClass]=\"{'flex-col': layout === 'vertical'}\">\n  <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\" [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <ng-content select=\"[slot=label]\"></ng-content>\n  </label>\n\n  <div class=\"flex-1 w-full\">\n    <div class=\"flex items-center gap-1 border-b border-light-inactive dark:border-dark-inactive text-sm/6\">\n      @for (tab of tabs; track tab.label; let i = $index) {\n        <button type=\"button\"\n                class=\"px-3 py-2 rounded-t-md\"\n                [ngClass]=\"{\n                  'text-light-on-control dark:text-dark-on-control': i !== selectedIndex,\n                  'text-light-primary dark:text-dark-primary border-b-2 border-light-primary dark:border-dark-primary': i === selectedIndex\n                }\"\n                (click)=\"select(i)\">\n          {{ tab.label }}\n        </button>\n      }\n    </div>\n\n    <div class=\"mt-3\">\n      @if (current) {\n        <ng-container *ngComponentOutlet=\"current!.component; inputs: current!.inputs || {}\"></ng-container>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-tabs', imports: [CommonModule], template: "<div class=\"flex gap-2 items-start w-full\" [ngClass]=\"{'flex-col': layout === 'vertical'}\">\n  <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\" [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <ng-content select=\"[slot=label]\"></ng-content>\n  </label>\n\n  <div class=\"flex-1 w-full\">\n    <div class=\"flex items-center gap-1 border-b border-light-inactive dark:border-dark-inactive text-sm/6\">\n      @for (tab of tabs; track tab; let i = $index) {\n        <button type=\"button\"\n                class=\"px-3 py-2 rounded-t-md\"\n                [ngClass]=\"{\n                  'text-light-on-control dark:text-dark-on-control': i !== selectedIndex,\n                  'text-light-primary dark:text-dark-primary border-b-2 border-light-primary dark:border-dark-primary': i === selectedIndex\n                }\"\n                (click)=\"select(i)\">\n          {{ tab.label }}\n        </button>\n      }\n    </div>\n\n    <div class=\"mt-3\">\n      @if (current) {\n        <ng-container *ngComponentOutlet=\"current!.component; inputs: current!.inputs || {}\"></ng-container>\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'haloduck-tabs', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex gap-2 items-start w-full\" [ngClass]=\"{'flex-col': layout === 'vertical'}\">\n  <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\" [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <ng-content select=\"[slot=label]\"></ng-content>\n  </label>\n\n  <div class=\"flex-1 w-full\">\n    <div class=\"flex items-center gap-1 border-b border-light-inactive dark:border-dark-inactive text-sm/6\">\n      @for (tab of tabs; track tab.label; let i = $index) {\n        <button type=\"button\"\n                class=\"px-3 py-2 rounded-t-md\"\n                [ngClass]=\"{\n                  'text-light-on-control dark:text-dark-on-control': i !== selectedIndex,\n                  'text-light-primary dark:text-dark-primary border-b-2 border-light-primary dark:border-dark-primary': i === selectedIndex\n                }\"\n                (click)=\"select(i)\">\n          {{ tab.label }}\n        </button>\n      }\n    </div>\n\n    <div class=\"mt-3\">\n      @if (current) {\n        <ng-container *ngComponentOutlet=\"current!.component; inputs: current!.inputs || {}\"></ng-container>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { tabs: [{
                 type: Input
             }], selectedIndex: [{