@hestia-earth/ui-components 0.40.7 → 0.40.8

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

@@ -3768,7 +3768,7 @@ class HorizontalButtonsGroupComponent extends ControlValueAccessor {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HorizontalButtonsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: HorizontalButtonsGroupComponent, isStandalone: true, selector: "he-horizontal-buttons-group", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: true, transformFunction: null }, defaultSelectedIndex: { classPropertyName: "defaultSelectedIndex", publicName: "defaultSelectedIndex", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttons: "buttonsChange", itemRemoved: "itemRemoved", itemMoved: "itemMoved" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HorizontalButtonsGroupComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"is-flex-grow-1\">\n  <div class=\"tabs is-relative is-{{ styles() }} | horizontal-scroll\">\n    @if (scroller.showLeftButton()) {\n      <button heLongPress (longPress)=\"scroller.scrollLeft()\" class=\"button is-absolute | left-button\">\n        <he-svg-icon name=\"chevron-left\" />\n      </button>\n    }\n    <ul cdkScrollable buttonScroller #scroller=\"buttonScroller\" class=\"is-overflow-hidden pt-1 | tabs-list\">\n      <div\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n        class=\"is-flex is-align-items-end | tabs-container\"\n        heResized\n        (resized)=\"scroller.update()\">\n        <ng-template #tabContent let-tab=\"tab\">\n          <a isEllipsisActive class=\"is-flex is-relative is-gap-2 pr-2\" [title]=\"tab.name\">\n            <span class=\"is-block ellipsis\">{{ tab.name }}</span>\n            @if (tab.removable !== false && removable()) {\n              <button\n                class=\"button is-ghost is-small p-0\"\n                (click)=\"remove($event, tab)\"\n                (keydown.enter)=\"remove($event, tab)\"\n                type=\"button\"\n                aria-label=\"Remove button\">\n                <he-svg-icon name=\"xmark\" size=\"20\" />\n              </button>\n            }\n          </a>\n        </ng-template>\n        @for (tab of buttons(); track tab.id) {\n          <li\n            cdkDrag\n            cdkDragLockAxis=\"x\"\n            [cdkDragDisabled]=\"!sortable()\"\n            [class.is-active]=\"value() === tab.id\"\n            (click)=\"select(tab)\"\n            (keydown.enter)=\"select(tab)\"\n            tabindex=\"0\"\n            class=\"tabs-item\">\n            <div *cdkDragPreview class=\"tabs is-{{ styles() }}\">\n              <li class=\"tabs-item\">\n                <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n              </li>\n            </div>\n            <div class=\"cdk-drag-placeholder\" *cdkDragPlaceholder></div>\n            <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n          </li>\n        }\n      </div>\n    </ul>\n    @if (scroller.showRightButton()) {\n      <button heLongPress (longPress)=\"scroller.scrollRight()\" class=\"button is-absolute | right-button\">\n        <he-svg-icon name=\"chevron-right\" />\n      </button>\n    }\n  </div>\n</div>\n", styles: [":root{--horizontal-buttons-list-margin: 0 20px}.horizontal-scroll .left-button,.horizontal-scroll .right-button{border:1px solid #dbe3ea;background-color:#fff;padding:8px 3px;bottom:0;z-index:3}.horizontal-scroll .left-button{border-radius:0 0 0 3px}.horizontal-scroll .right-button{right:0;border-radius:0 3px 0 0}.tabs .tabs-list{max-width:100%;margin:var(--horizontal-buttons-list-margin);border-bottom-color:#dbdbdb}.tabs .tabs-item{box-shadow:4px 0 10px #0000000d}.tabs .tabs-item a{max-width:300px;border-bottom-color:transparent;color:#4a4a4a;z-index:2}.tabs .tabs-item.is-active a{color:#1a0dab;overflow:visible}.tabs .tabs-item.is-active a:after{position:absolute;left:0;bottom:0;content:\"\";width:100%;height:1px;background-color:#1a0dab;z-index:99999}.tabs.is-primary .tabs-container,.tabs.is-secondary .tabs-container{gap:2px}.tabs.is-primary .tabs-item:not(.is-active),.tabs.is-secondary .tabs-item:not(.is-active){box-shadow:none}.tabs.is-primary .tabs-item.is-active,.tabs.is-secondary .tabs-item.is-active{background:#fff;border-radius:3px 3px 0 0;color:#4a4a4a!important}.tabs.is-primary .tabs-item.is-active a:after,.tabs.is-secondary .tabs-item.is-active a:after{background-color:transparent!important}.tabs.is-primary .tabs-item,.tabs.is-secondary .tabs-item{border-radius:0 3px 0 0;background:#f5f7f9}.tabs.is-primary .tabs-item.is-active{border-bottom:2px solid #ffc000}.tabs.is-secondary .tabs-item.is-active{border-bottom:2px solid #193957}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.tabs-container.cdk-drop-list-dragging .tabs-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: ButtonScrollerDirective, selector: "[buttonScroller]", inputs: ["scrollUnit"], exportAs: ["buttonScroller"] }, { kind: "directive", type: ResizedDirective, selector: "[heResized]", outputs: ["resized"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: LongPressDirective, selector: "[heLongPress]", inputs: ["intervalMs"], outputs: ["longPress"] }, { kind: "directive", type: IsEllipsisActiveDirective, selector: "[isEllipsisActive]" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: HorizontalButtonsGroupComponent, isStandalone: true, selector: "he-horizontal-buttons-group", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: true, transformFunction: null }, defaultSelectedIndex: { classPropertyName: "defaultSelectedIndex", publicName: "defaultSelectedIndex", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttons: "buttonsChange", itemRemoved: "itemRemoved", itemMoved: "itemMoved" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HorizontalButtonsGroupComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"is-flex-grow-1\">\n  <div class=\"tabs is-relative is-{{ styles() }} | horizontal-scroll\">\n    @if (scroller.showLeftButton()) {\n      <button heLongPress (longPress)=\"scroller.scrollLeft()\" class=\"button is-absolute | left-button\">\n        <he-svg-icon name=\"chevron-left\" />\n      </button>\n    }\n    <ul cdkScrollable buttonScroller #scroller=\"buttonScroller\" class=\"is-overflow-hidden pt-1 | tabs-list\">\n      <div\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n        class=\"is-flex is-align-items-end | tabs-container\"\n        heResized\n        (resized)=\"scroller.update()\">\n        <ng-template #tabContent let-tab=\"tab\">\n          <a isEllipsisActive class=\"is-flex is-relative is-gap-2 pr-2\" [title]=\"tab.name\">\n            <span class=\"is-block ellipsis\">{{ tab.name }}</span>\n            @if (tab.removable !== false && removable()) {\n              <button\n                class=\"button is-ghost is-small p-0\"\n                (click)=\"remove($event, tab)\"\n                (keydown.enter)=\"remove($event, tab)\"\n                type=\"button\"\n                aria-label=\"Remove button\">\n                <he-svg-icon name=\"xmark\" size=\"20\" />\n              </button>\n            }\n          </a>\n        </ng-template>\n        @for (tab of buttons(); track tab.id) {\n          <li\n            cdkDrag\n            cdkDragLockAxis=\"x\"\n            [cdkDragDisabled]=\"tab.sortable === false || !sortable()\"\n            [class.is-active]=\"value() === tab.id\"\n            (click)=\"select(tab)\"\n            (keydown.enter)=\"select(tab)\"\n            tabindex=\"0\"\n            class=\"tabs-item\">\n            <div *cdkDragPreview class=\"tabs is-{{ styles() }}\">\n              <li class=\"tabs-item\">\n                <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n              </li>\n            </div>\n            <div class=\"cdk-drag-placeholder\" *cdkDragPlaceholder></div>\n            <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n          </li>\n        }\n      </div>\n    </ul>\n    @if (scroller.showRightButton()) {\n      <button heLongPress (longPress)=\"scroller.scrollRight()\" class=\"button is-absolute | right-button\">\n        <he-svg-icon name=\"chevron-right\" />\n      </button>\n    }\n  </div>\n</div>\n", styles: [":root{--horizontal-buttons-list-margin: 0 20px}.horizontal-scroll .left-button,.horizontal-scroll .right-button{border:1px solid #dbe3ea;background-color:#fff;padding:8px 3px;bottom:0;z-index:3}.horizontal-scroll .left-button{border-radius:0 0 0 3px}.horizontal-scroll .right-button{right:0;border-radius:0 3px 0 0}.tabs .tabs-list{max-width:100%;margin:var(--horizontal-buttons-list-margin);border-bottom-color:#dbdbdb}.tabs .tabs-item{box-shadow:4px 0 10px #0000000d}.tabs .tabs-item a{max-width:300px;border-bottom-color:transparent;color:#4a4a4a;z-index:2}.tabs .tabs-item.is-active a{color:#1a0dab;overflow:visible}.tabs .tabs-item.is-active a:after{position:absolute;left:0;bottom:0;content:\"\";width:100%;height:1px;background-color:#1a0dab;z-index:99999}.tabs.is-primary .tabs-container,.tabs.is-secondary .tabs-container{gap:2px}.tabs.is-primary .tabs-item:not(.is-active),.tabs.is-secondary .tabs-item:not(.is-active){box-shadow:none}.tabs.is-primary .tabs-item.is-active,.tabs.is-secondary .tabs-item.is-active{background:#fff;border-radius:3px 3px 0 0;color:#4a4a4a!important}.tabs.is-primary .tabs-item.is-active a:after,.tabs.is-secondary .tabs-item.is-active a:after{background-color:transparent!important}.tabs.is-primary .tabs-item,.tabs.is-secondary .tabs-item{border-radius:0 3px 0 0;background:#f5f7f9}.tabs.is-primary .tabs-item.is-active{border-bottom:2px solid #ffc000}.tabs.is-secondary .tabs-item.is-active{border-bottom:2px solid #193957}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.tabs-container.cdk-drop-list-dragging .tabs-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: ButtonScrollerDirective, selector: "[buttonScroller]", inputs: ["scrollUnit"], exportAs: ["buttonScroller"] }, { kind: "directive", type: ResizedDirective, selector: "[heResized]", outputs: ["resized"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: LongPressDirective, selector: "[heLongPress]", inputs: ["intervalMs"], outputs: ["longPress"] }, { kind: "directive", type: IsEllipsisActiveDirective, selector: "[isEllipsisActive]" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HorizontalButtonsGroupComponent, decorators: [{
             type: Component$1,
@@ -3783,7 +3783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         CdkDragPreview,
                         NgTemplateOutlet,
                         CdkScrollable
-                    ], template: "<div class=\"is-flex-grow-1\">\n  <div class=\"tabs is-relative is-{{ styles() }} | horizontal-scroll\">\n    @if (scroller.showLeftButton()) {\n      <button heLongPress (longPress)=\"scroller.scrollLeft()\" class=\"button is-absolute | left-button\">\n        <he-svg-icon name=\"chevron-left\" />\n      </button>\n    }\n    <ul cdkScrollable buttonScroller #scroller=\"buttonScroller\" class=\"is-overflow-hidden pt-1 | tabs-list\">\n      <div\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n        class=\"is-flex is-align-items-end | tabs-container\"\n        heResized\n        (resized)=\"scroller.update()\">\n        <ng-template #tabContent let-tab=\"tab\">\n          <a isEllipsisActive class=\"is-flex is-relative is-gap-2 pr-2\" [title]=\"tab.name\">\n            <span class=\"is-block ellipsis\">{{ tab.name }}</span>\n            @if (tab.removable !== false && removable()) {\n              <button\n                class=\"button is-ghost is-small p-0\"\n                (click)=\"remove($event, tab)\"\n                (keydown.enter)=\"remove($event, tab)\"\n                type=\"button\"\n                aria-label=\"Remove button\">\n                <he-svg-icon name=\"xmark\" size=\"20\" />\n              </button>\n            }\n          </a>\n        </ng-template>\n        @for (tab of buttons(); track tab.id) {\n          <li\n            cdkDrag\n            cdkDragLockAxis=\"x\"\n            [cdkDragDisabled]=\"!sortable()\"\n            [class.is-active]=\"value() === tab.id\"\n            (click)=\"select(tab)\"\n            (keydown.enter)=\"select(tab)\"\n            tabindex=\"0\"\n            class=\"tabs-item\">\n            <div *cdkDragPreview class=\"tabs is-{{ styles() }}\">\n              <li class=\"tabs-item\">\n                <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n              </li>\n            </div>\n            <div class=\"cdk-drag-placeholder\" *cdkDragPlaceholder></div>\n            <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n          </li>\n        }\n      </div>\n    </ul>\n    @if (scroller.showRightButton()) {\n      <button heLongPress (longPress)=\"scroller.scrollRight()\" class=\"button is-absolute | right-button\">\n        <he-svg-icon name=\"chevron-right\" />\n      </button>\n    }\n  </div>\n</div>\n", styles: [":root{--horizontal-buttons-list-margin: 0 20px}.horizontal-scroll .left-button,.horizontal-scroll .right-button{border:1px solid #dbe3ea;background-color:#fff;padding:8px 3px;bottom:0;z-index:3}.horizontal-scroll .left-button{border-radius:0 0 0 3px}.horizontal-scroll .right-button{right:0;border-radius:0 3px 0 0}.tabs .tabs-list{max-width:100%;margin:var(--horizontal-buttons-list-margin);border-bottom-color:#dbdbdb}.tabs .tabs-item{box-shadow:4px 0 10px #0000000d}.tabs .tabs-item a{max-width:300px;border-bottom-color:transparent;color:#4a4a4a;z-index:2}.tabs .tabs-item.is-active a{color:#1a0dab;overflow:visible}.tabs .tabs-item.is-active a:after{position:absolute;left:0;bottom:0;content:\"\";width:100%;height:1px;background-color:#1a0dab;z-index:99999}.tabs.is-primary .tabs-container,.tabs.is-secondary .tabs-container{gap:2px}.tabs.is-primary .tabs-item:not(.is-active),.tabs.is-secondary .tabs-item:not(.is-active){box-shadow:none}.tabs.is-primary .tabs-item.is-active,.tabs.is-secondary .tabs-item.is-active{background:#fff;border-radius:3px 3px 0 0;color:#4a4a4a!important}.tabs.is-primary .tabs-item.is-active a:after,.tabs.is-secondary .tabs-item.is-active a:after{background-color:transparent!important}.tabs.is-primary .tabs-item,.tabs.is-secondary .tabs-item{border-radius:0 3px 0 0;background:#f5f7f9}.tabs.is-primary .tabs-item.is-active{border-bottom:2px solid #ffc000}.tabs.is-secondary .tabs-item.is-active{border-bottom:2px solid #193957}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.tabs-container.cdk-drop-list-dragging .tabs-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+                    ], template: "<div class=\"is-flex-grow-1\">\n  <div class=\"tabs is-relative is-{{ styles() }} | horizontal-scroll\">\n    @if (scroller.showLeftButton()) {\n      <button heLongPress (longPress)=\"scroller.scrollLeft()\" class=\"button is-absolute | left-button\">\n        <he-svg-icon name=\"chevron-left\" />\n      </button>\n    }\n    <ul cdkScrollable buttonScroller #scroller=\"buttonScroller\" class=\"is-overflow-hidden pt-1 | tabs-list\">\n      <div\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n        class=\"is-flex is-align-items-end | tabs-container\"\n        heResized\n        (resized)=\"scroller.update()\">\n        <ng-template #tabContent let-tab=\"tab\">\n          <a isEllipsisActive class=\"is-flex is-relative is-gap-2 pr-2\" [title]=\"tab.name\">\n            <span class=\"is-block ellipsis\">{{ tab.name }}</span>\n            @if (tab.removable !== false && removable()) {\n              <button\n                class=\"button is-ghost is-small p-0\"\n                (click)=\"remove($event, tab)\"\n                (keydown.enter)=\"remove($event, tab)\"\n                type=\"button\"\n                aria-label=\"Remove button\">\n                <he-svg-icon name=\"xmark\" size=\"20\" />\n              </button>\n            }\n          </a>\n        </ng-template>\n        @for (tab of buttons(); track tab.id) {\n          <li\n            cdkDrag\n            cdkDragLockAxis=\"x\"\n            [cdkDragDisabled]=\"tab.sortable === false || !sortable()\"\n            [class.is-active]=\"value() === tab.id\"\n            (click)=\"select(tab)\"\n            (keydown.enter)=\"select(tab)\"\n            tabindex=\"0\"\n            class=\"tabs-item\">\n            <div *cdkDragPreview class=\"tabs is-{{ styles() }}\">\n              <li class=\"tabs-item\">\n                <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n              </li>\n            </div>\n            <div class=\"cdk-drag-placeholder\" *cdkDragPlaceholder></div>\n            <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n          </li>\n        }\n      </div>\n    </ul>\n    @if (scroller.showRightButton()) {\n      <button heLongPress (longPress)=\"scroller.scrollRight()\" class=\"button is-absolute | right-button\">\n        <he-svg-icon name=\"chevron-right\" />\n      </button>\n    }\n  </div>\n</div>\n", styles: [":root{--horizontal-buttons-list-margin: 0 20px}.horizontal-scroll .left-button,.horizontal-scroll .right-button{border:1px solid #dbe3ea;background-color:#fff;padding:8px 3px;bottom:0;z-index:3}.horizontal-scroll .left-button{border-radius:0 0 0 3px}.horizontal-scroll .right-button{right:0;border-radius:0 3px 0 0}.tabs .tabs-list{max-width:100%;margin:var(--horizontal-buttons-list-margin);border-bottom-color:#dbdbdb}.tabs .tabs-item{box-shadow:4px 0 10px #0000000d}.tabs .tabs-item a{max-width:300px;border-bottom-color:transparent;color:#4a4a4a;z-index:2}.tabs .tabs-item.is-active a{color:#1a0dab;overflow:visible}.tabs .tabs-item.is-active a:after{position:absolute;left:0;bottom:0;content:\"\";width:100%;height:1px;background-color:#1a0dab;z-index:99999}.tabs.is-primary .tabs-container,.tabs.is-secondary .tabs-container{gap:2px}.tabs.is-primary .tabs-item:not(.is-active),.tabs.is-secondary .tabs-item:not(.is-active){box-shadow:none}.tabs.is-primary .tabs-item.is-active,.tabs.is-secondary .tabs-item.is-active{background:#fff;border-radius:3px 3px 0 0;color:#4a4a4a!important}.tabs.is-primary .tabs-item.is-active a:after,.tabs.is-secondary .tabs-item.is-active a:after{background-color:transparent!important}.tabs.is-primary .tabs-item,.tabs.is-secondary .tabs-item{border-radius:0 3px 0 0;background:#f5f7f9}.tabs.is-primary .tabs-item.is-active{border-bottom:2px solid #ffc000}.tabs.is-secondary .tabs-item.is-active{border-bottom:2px solid #193957}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.tabs-container.cdk-drop-list-dragging .tabs-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: true }] }, { type: i0.Output, args: ["buttonsChange"] }], defaultSelectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSelectedIndex", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], styles: [{ type: i0.Input, args: [{ isSignal: true, alias: "styles", required: false }] }], itemRemoved: [{ type: i0.Output, args: ["itemRemoved"] }], itemMoved: [{ type: i0.Output, args: ["itemMoved"] }] } });
 
 class IssueConfirmComponent {