@educarehq/solaris-ui 0.1.0 → 0.3.0

package/esm2022/lib/components/interaction/tooltip/model/tooltip-position.js

@@ -0,0 +1,209 @@
+export function getTooltipPositions(placement, offset) {
+    const primary = getConnectedPosition(placement, offset);
+    const fallbacks = getFallbackPositions(placement, offset);
+    return [primary, ...fallbacks];
+}
+function getConnectedPosition(placement, offset) {
+    switch (placement) {
+        case 'top':
+            return {
+                originX: 'center',
+                originY: 'top',
+                overlayX: 'center',
+                overlayY: 'bottom',
+                offsetY: -offset,
+            };
+        case 'top-start':
+            return {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -offset,
+            };
+        case 'top-end':
+            return {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom',
+                offsetY: -offset,
+            };
+        case 'bottom':
+            return {
+                originX: 'center',
+                originY: 'bottom',
+                overlayX: 'center',
+                overlayY: 'top',
+                offsetY: offset,
+            };
+        case 'bottom-start':
+            return {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: offset,
+            };
+        case 'bottom-end':
+            return {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+                offsetY: offset,
+            };
+        case 'right':
+            return {
+                originX: 'end',
+                originY: 'center',
+                overlayX: 'start',
+                overlayY: 'center',
+                offsetX: offset,
+            };
+        case 'right-start':
+            return {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetX: offset,
+            };
+        case 'right-end':
+            return {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetX: offset,
+            };
+        case 'left':
+            return {
+                originX: 'start',
+                originY: 'center',
+                overlayX: 'end',
+                overlayY: 'center',
+                offsetX: -offset,
+            };
+        case 'left-start':
+            return {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'top',
+                offsetX: -offset,
+            };
+        case 'left-end':
+            return {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'bottom',
+                offsetX: -offset,
+            };
+    }
+}
+function getFallbackPositions(placement, offset) {
+    const primary = placement;
+    const opposite = getOppositePlacement(primary);
+    const fallbacks = [];
+    fallbacks.push(getConnectedPosition(opposite, offset));
+    if (primary.includes('-')) {
+        const base = primary.split('-')[0];
+        fallbacks.push(getConnectedPosition(base, offset));
+        const oppositeBase = getOppositePlacement(base);
+        fallbacks.push(getConnectedPosition(oppositeBase, offset));
+    }
+    else {
+        const base = primary;
+        fallbacks.push(getConnectedPosition(`${base}-start`, offset));
+        fallbacks.push(getConnectedPosition(`${base}-end`, offset));
+        const oppositeBase = getOppositePlacement(base);
+        fallbacks.push(getConnectedPosition(oppositeBase, offset));
+    }
+    return fallbacks;
+}
+function getOppositePlacement(placement) {
+    switch (placement) {
+        case 'top':
+            return 'bottom';
+        case 'bottom':
+            return 'top';
+        case 'left':
+            return 'right';
+        case 'right':
+            return 'left';
+        case 'top-start':
+            return 'bottom-start';
+        case 'top-end':
+            return 'bottom-end';
+        case 'bottom-start':
+            return 'top-start';
+        case 'bottom-end':
+            return 'top-end';
+        case 'left-start':
+            return 'right-start';
+        case 'left-end':
+            return 'right-end';
+        case 'right-start':
+            return 'left-start';
+        case 'right-end':
+            return 'left-end';
+    }
+}
+export function getTooltipArrowClass(placement) {
+    switch (placement) {
+        case 'top':
+        case 'top-start':
+        case 'top-end':
+            return 'solaris-tooltip-arrow--bottom';
+        case 'bottom':
+        case 'bottom-start':
+        case 'bottom-end':
+            return 'solaris-tooltip-arrow--top';
+        case 'left':
+        case 'left-start':
+        case 'left-end':
+            return 'solaris-tooltip-arrow--right';
+        case 'right':
+        case 'right-start':
+        case 'right-end':
+            return 'solaris-tooltip-arrow--left';
+    }
+}
+export function derivePlacementFromConnectionPair(pair) {
+    if (pair.overlayY === 'bottom' && pair.originY === 'top') {
+        if (pair.overlayX === 'center')
+            return 'top';
+        if (pair.overlayX === 'start')
+            return 'top-start';
+        if (pair.overlayX === 'end')
+            return 'top-end';
+    }
+    if (pair.overlayY === 'top' && pair.originY === 'bottom') {
+        if (pair.overlayX === 'center')
+            return 'bottom';
+        if (pair.overlayX === 'start')
+            return 'bottom-start';
+        if (pair.overlayX === 'end')
+            return 'bottom-end';
+    }
+    if (pair.overlayX === 'start' && pair.originX === 'end') {
+        if (pair.overlayY === 'center')
+            return 'right';
+        if (pair.overlayY === 'top')
+            return 'right-start';
+        if (pair.overlayY === 'bottom')
+            return 'right-end';
+    }
+    if (pair.overlayX === 'end' && pair.originX === 'start') {
+        if (pair.overlayY === 'center')
+            return 'left';
+        if (pair.overlayY === 'top')
+            return 'left-start';
+        if (pair.overlayY === 'bottom')
+            return 'left-end';
+    }
+    return 'top';
+}
+//# sourceMappingURL=tooltip-position.js.map

package/esm2022/lib/components/interaction/tooltip/model/tooltip-position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-position.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/interaction/tooltip/model/tooltip-position.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n  ConnectedPosition,\n  ConnectionPositionPair,\n} from '@angular/cdk/overlay';\n\nimport type { SolarisTooltipPlacement } from './tooltip.types';\n\nexport function getTooltipPositions(\n  placement: SolarisTooltipPlacement,\n  offset: number,\n): ConnectedPosition[] {\n  const primary = getConnectedPosition(placement, offset);\n  const fallbacks = getFallbackPositions(placement, offset);\n  return [primary, ...fallbacks];\n}\n\nfunction getConnectedPosition(\n  placement: SolarisTooltipPlacement,\n  offset: number,\n): ConnectedPosition {\n  switch (placement) {\n    case 'top':\n      return {\n        originX: 'center',\n        originY: 'top',\n        overlayX: 'center',\n        overlayY: 'bottom',\n        offsetY: -offset,\n      };\n    case 'top-start':\n      return {\n        originX: 'start',\n        originY: 'top',\n        overlayX: 'start',\n        overlayY: 'bottom',\n        offsetY: -offset,\n      };\n    case 'top-end':\n      return {\n        originX: 'end',\n        originY: 'top',\n        overlayX: 'end',\n        overlayY: 'bottom',\n        offsetY: -offset,\n      };\n    case 'bottom':\n      return {\n        originX: 'center',\n        originY: 'bottom',\n        overlayX: 'center',\n        overlayY: 'top',\n        offsetY: offset,\n      };\n    case 'bottom-start':\n      return {\n        originX: 'start',\n        originY: 'bottom',\n        overlayX: 'start',\n        overlayY: 'top',\n        offsetY: offset,\n      };\n    case 'bottom-end':\n      return {\n        originX: 'end',\n        originY: 'bottom',\n        overlayX: 'end',\n        overlayY: 'top',\n        offsetY: offset,\n      };\n    case 'right':\n      return {\n        originX: 'end',\n        originY: 'center',\n        overlayX: 'start',\n        overlayY: 'center',\n        offsetX: offset,\n      };\n    case 'right-start':\n      return {\n        originX: 'end',\n        originY: 'top',\n        overlayX: 'start',\n        overlayY: 'top',\n        offsetX: offset,\n      };\n    case 'right-end':\n      return {\n        originX: 'end',\n        originY: 'bottom',\n        overlayX: 'start',\n        overlayY: 'bottom',\n        offsetX: offset,\n      };\n    case 'left':\n      return {\n        originX: 'start',\n        originY: 'center',\n        overlayX: 'end',\n        overlayY: 'center',\n        offsetX: -offset,\n      };\n    case 'left-start':\n      return {\n        originX: 'start',\n        originY: 'top',\n        overlayX: 'end',\n        overlayY: 'top',\n        offsetX: -offset,\n      };\n    case 'left-end':\n      return {\n        originX: 'start',\n        originY: 'bottom',\n        overlayX: 'end',\n        overlayY: 'bottom',\n        offsetX: -offset,\n      };\n  }\n}\n\nfunction getFallbackPositions(\n  placement: SolarisTooltipPlacement,\n  offset: number,\n): ConnectedPosition[] {\n  const primary = placement;\n  const opposite = getOppositePlacement(primary);\n  const fallbacks: ConnectedPosition[] = [];\n\n  fallbacks.push(getConnectedPosition(opposite, offset));\n\n  if (primary.includes('-')) {\n    const base = primary.split('-')[0] as SolarisTooltipPlacement;\n    fallbacks.push(\n      getConnectedPosition(base as SolarisTooltipPlacement, offset),\n    );\n    const oppositeBase = getOppositePlacement(base);\n    fallbacks.push(getConnectedPosition(oppositeBase, offset));\n  } else {\n    const base = primary;\n    fallbacks.push(\n      getConnectedPosition(`${base}-start` as SolarisTooltipPlacement, offset),\n    );\n    fallbacks.push(\n      getConnectedPosition(`${base}-end` as SolarisTooltipPlacement, offset),\n    );\n    const oppositeBase = getOppositePlacement(base);\n    fallbacks.push(getConnectedPosition(oppositeBase, offset));\n  }\n\n  return fallbacks;\n}\n\nfunction getOppositePlacement(\n  placement: SolarisTooltipPlacement,\n): SolarisTooltipPlacement {\n  switch (placement) {\n    case 'top':\n      return 'bottom';\n    case 'bottom':\n      return 'top';\n    case 'left':\n      return 'right';\n    case 'right':\n      return 'left';\n    case 'top-start':\n      return 'bottom-start';\n    case 'top-end':\n      return 'bottom-end';\n    case 'bottom-start':\n      return 'top-start';\n    case 'bottom-end':\n      return 'top-end';\n    case 'left-start':\n      return 'right-start';\n    case 'left-end':\n      return 'right-end';\n    case 'right-start':\n      return 'left-start';\n    case 'right-end':\n      return 'left-end';\n  }\n}\n\nexport function getTooltipArrowClass(\n  placement: SolarisTooltipPlacement,\n): string {\n  switch (placement) {\n    case 'top':\n    case 'top-start':\n    case 'top-end':\n      return 'solaris-tooltip-arrow--bottom';\n    case 'bottom':\n    case 'bottom-start':\n    case 'bottom-end':\n      return 'solaris-tooltip-arrow--top';\n    case 'left':\n    case 'left-start':\n    case 'left-end':\n      return 'solaris-tooltip-arrow--right';\n    case 'right':\n    case 'right-start':\n    case 'right-end':\n      return 'solaris-tooltip-arrow--left';\n  }\n}\n\nexport function derivePlacementFromConnectionPair(\n  pair: ConnectionPositionPair,\n): SolarisTooltipPlacement {\n  if (pair.overlayY === 'bottom' && pair.originY === 'top') {\n    if (pair.overlayX === 'center') return 'top';\n    if (pair.overlayX === 'start') return 'top-start';\n    if (pair.overlayX === 'end') return 'top-end';\n  }\n  if (pair.overlayY === 'top' && pair.originY === 'bottom') {\n    if (pair.overlayX === 'center') return 'bottom';\n    if (pair.overlayX === 'start') return 'bottom-start';\n    if (pair.overlayX === 'end') return 'bottom-end';\n  }\n  if (pair.overlayX === 'start' && pair.originX === 'end') {\n    if (pair.overlayY === 'center') return 'right';\n    if (pair.overlayY === 'top') return 'right-start';\n    if (pair.overlayY === 'bottom') return 'right-end';\n  }\n  if (pair.overlayX === 'end' && pair.originX === 'start') {\n    if (pair.overlayY === 'center') return 'left';\n    if (pair.overlayY === 'top') return 'left-start';\n    if (pair.overlayY === 'bottom') return 'left-end';\n  }\n  return 'top';\n}\n"]}

package/esm2022/lib/components/interaction/tooltip/model/tooltip.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=tooltip.types.js.map

package/esm2022/lib/components/interaction/tooltip/model/tooltip.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/interaction/tooltip/model/tooltip.types.ts"],"names":[],"mappings":"","sourcesContent":["export type SolarisTooltipPlacement =\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'left'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right-start'\n  | 'right-end'\n  | 'left-start'\n  | 'left-end';\n\nexport type SolarisTooltipTrigger = 'hover' | 'click' | 'manual';\n\nexport type SolarisTooltipAppearance = 'outline' | 'surface' | 'inverse';\n\nexport type SolarisTooltipSize = 'sm' | 'md' | 'lg';\n\nexport type SolarisTooltipRadius = 'sm' | 'md' | 'lg';\n\nexport interface SolarisTooltipConfig {\n  placement?: SolarisTooltipPlacement;\n  offset?: number;\n  appearance?: SolarisTooltipAppearance;\n  size?: SolarisTooltipSize;\n  radius?: SolarisTooltipRadius;\n  maxWidth?: string | number;\n  arrow?: boolean;\n  trigger?: SolarisTooltipTrigger;\n  closeable?: boolean;\n  showDelay?: number;\n  hideDelay?: number;\n  closeOnEscape?: boolean;\n  closeOnOutsideClick?: boolean;\n  restoreFocus?: boolean;\n  disabled?: boolean;\n}\n"]}

package/esm2022/lib/components/interaction/tooltip/token/tooltip.tokens.js

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+export const SOLARIS_TOOLTIP_PANEL_DATA = new InjectionToken('SolarisTooltipPanelData');
+//# sourceMappingURL=tooltip.tokens.js.map

package/esm2022/lib/components/interaction/tooltip/token/tooltip.tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.tokens.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/interaction/tooltip/token/tooltip.tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAe,MAAM,eAAe,CAAC;AAsB5D,MAAM,CAAC,MAAM,0BAA0B,GACrC,IAAI,cAAc,CAA0B,yBAAyB,CAAC,CAAC","sourcesContent":["import { InjectionToken, TemplateRef } from '@angular/core';\n\nexport interface SolarisTooltipPanelData {\n  title: string | undefined;\n  body: string | undefined;\n  icon: string | undefined;\n  iconDecorative: boolean;\n  contentTemplate: TemplateRef<unknown> | undefined;\n  appearance: string;\n  size: string;\n  radius: string;\n  maxWidth: string | number;\n  arrow: boolean;\n  arrowClass: string;\n  closeable: boolean;\n  closeLabel: string;\n  panelId: string;\n  placement: string;\n  trigger: string;\n  close: () => void;\n}\n\nexport const SOLARIS_TOOLTIP_PANEL_DATA =\n  new InjectionToken<SolarisTooltipPanelData>('SolarisTooltipPanelData');\n"]}

package/esm2022/lib/components/navigation/editable-tabs/component/editable-tabs.component.js

@@ -0,0 +1,323 @@
+import { Component, input, output, model, computed, signal, viewChildren, inject, ChangeDetectionStrategy, NgZone, effect, } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { SolarisTranslateService } from '../../../../services/translation';
+import { SolarisTabPanelComponent, SolarisTabsComponent, SolarisTabComponent, } from '../../tabs';
+import { SolarisDropdownMenuTriggerDirective, SolarisDropdownMenuItemComponent, SolarisDropdownMenuComponent, } from '../../../interaction/dropdown-menu';
+import { SolarisDividerComponent } from '../../../data-display/divider';
+import { SolarisIconComponent } from '../../../icon';
+import * as i0 from "@angular/core";
+export class SolarisEditableTabsComponent {
+    translateService = inject(SolarisTranslateService, {
+        optional: true,
+    });
+    ngZone = inject(NgZone);
+    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    defaultValue = input(undefined, ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    appearance = input('underline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    activationMode = input('automatic', ...(ngDevMode ? [{ debugName: "activationMode" }] : /* istanbul ignore next */ []));
+    contentTransition = input('slide', ...(ngDevMode ? [{ debugName: "contentTransition" }] : /* istanbul ignore next */ []));
+    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    editable = input(true, ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+    renamable = input(true, ...(ngDevMode ? [{ debugName: "renamable" }] : /* istanbul ignore next */ []));
+    removable = input(true, ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
+    movable = input(true, ...(ngDevMode ? [{ debugName: "movable" }] : /* istanbul ignore next */ []));
+    defaultable = input(true, ...(ngDevMode ? [{ debugName: "defaultable" }] : /* istanbul ignore next */ []));
+    showActions = input('focus-hover', ...(ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []));
+    renameOnBlur = input('confirm', ...(ngDevMode ? [{ debugName: "renameOnBlur" }] : /* istanbul ignore next */ []));
+    minTabs = input(1, ...(ngDevMode ? [{ debugName: "minTabs" }] : /* istanbul ignore next */ []));
+    allowEmpty = input(false, ...(ngDevMode ? [{ debugName: "allowEmpty" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelKey = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelKey" }] : /* istanbul ignore next */ []));
+    tabContentMap = input(undefined, ...(ngDevMode ? [{ debugName: "tabContentMap" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    tabRenameRequested = output();
+    tabRename = output();
+    tabRemoveRequested = output();
+    tabRemove = output();
+    tabMoveRequested = output();
+    tabMove = output();
+    defaultTabChange = output();
+    tabAction = output();
+    menuComponents = viewChildren(SolarisDropdownMenuComponent, ...(ngDevMode ? [{ debugName: "menuComponents" }] : /* istanbul ignore next */ []));
+    tabMenuRefs = computed(() => {
+        this.tabs();
+        return this.menuComponents();
+    }, ...(ngDevMode ? [{ debugName: "tabMenuRefs" }] : /* istanbul ignore next */ []));
+    activeMenuIndex = signal(null, ...(ngDevMode ? [{ debugName: "activeMenuIndex" }] : /* istanbul ignore next */ []));
+    renamingTabId = signal(null, ...(ngDevMode ? [{ debugName: "renamingTabId" }] : /* istanbul ignore next */ []));
+    renameValue = signal('', ...(ngDevMode ? [{ debugName: "renameValue" }] : /* istanbul ignore next */ []));
+    defaultTabValue = signal(undefined, ...(ngDevMode ? [{ debugName: "defaultTabValue" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => {
+        if (this.ariaLabel())
+            return this.ariaLabel();
+        const key = this.ariaLabelKey();
+        if (key && this.translateService) {
+            return this.translateService.translate(key);
+        }
+        return key ?? 'Editable tabs';
+    }, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const defaultValue = this.defaultValue();
+            const currentValue = this.value();
+            if (currentValue === undefined && defaultValue !== undefined) {
+                this.value.set(defaultValue);
+            }
+        });
+    }
+    onValueChange(newValue) {
+        this.value.set(newValue);
+        this.valueChange.emit(newValue);
+    }
+    hasActions(tab) {
+        if (!this.editable())
+            return false;
+        if (tab.disabled)
+            return false;
+        return (this.canRename(tab) ||
+            this.canSetDefault(tab) ||
+            this.canMoveLeft(tab) ||
+            this.canMoveRight(tab) ||
+            this.canRemove(tab) ||
+            (tab.customActions?.length ?? 0) > 0);
+    }
+    canRename(tab) {
+        if (!this.renamable())
+            return false;
+        if (tab.locked && tab.renamable !== true)
+            return false;
+        return tab.renamable !== false;
+    }
+    canRemove(tab) {
+        if (!this.removable())
+            return false;
+        if (tab.locked && tab.removable !== true)
+            return false;
+        if (tab.removable === false)
+            return false;
+        if (tab.disabled)
+            return false;
+        return !(!this.allowEmpty() && this.tabs().length <= this.minTabs());
+    }
+    canMoveLeft(tab) {
+        if (!this.movable())
+            return false;
+        if (tab.locked && tab.movable !== true)
+            return false;
+        if (tab.movable === false)
+            return false;
+        if (tab.disabled)
+            return false;
+        const idx = this.tabs().indexOf(tab);
+        if (idx <= 0)
+            return false;
+        for (let i = idx - 1; i >= 0; i--) {
+            if (!this.tabs()[i].locked)
+                return true;
+        }
+        return false;
+    }
+    canMoveRight(tab) {
+        if (!this.movable())
+            return false;
+        if (tab.locked && tab.movable !== true)
+            return false;
+        if (tab.movable === false)
+            return false;
+        if (tab.disabled)
+            return false;
+        const idx = this.tabs().indexOf(tab);
+        if (idx < 0 || idx >= this.tabs().length - 1)
+            return false;
+        for (let i = idx + 1; i < this.tabs().length; i++) {
+            if (!this.tabs()[i].locked)
+                return true;
+        }
+        return false;
+    }
+    canSetDefault(tab) {
+        if (!this.defaultable())
+            return false;
+        if (tab.locked && tab.defaultable !== true)
+            return false;
+        if (tab.defaultable === false)
+            return false;
+        return !tab.disabled;
+    }
+    startRename(tab) {
+        this.activeMenuIndex.set(null);
+        this.renamingTabId.set(tab.value);
+        this.renameValue.set(tab.label ?? '');
+        this.ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
+                // SECURITY_EXCEPTION: document.querySelector required to find rename input. SSR-safe via guard.
+                const input = document.querySelector(`.solaris-editable-tabs__rename-input`);
+                if (input) {
+                    input.focus();
+                    input.select();
+                }
+            });
+        });
+    }
+    commitRename(tab) {
+        const previousLabel = tab.label ?? '';
+        const nextLabel = this.renameValue().trim();
+        if (nextLabel === '') {
+            this.renamingTabId.set(null);
+            return;
+        }
+        if (nextLabel === previousLabel) {
+            this.renamingTabId.set(null);
+            return;
+        }
+        const event = {
+            value: tab.value,
+            previousLabel,
+            nextLabel,
+            source: 'inline',
+        };
+        this.tabRenameRequested.emit(event);
+        this.tabRename.emit(event);
+        this.renamingTabId.set(null);
+    }
+    cancelRename() {
+        this.renamingTabId.set(null);
+    }
+    onRenameKeydown(event, tab) {
+        event.stopPropagation();
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.commitRename(tab);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.cancelRename();
+        }
+    }
+    onRenameBlur(tab) {
+        if (this.renameOnBlur() === 'confirm') {
+            this.commitRename(tab);
+        }
+        else {
+            this.cancelRename();
+        }
+    }
+    confirmRemove(tab, index) {
+        this.activeMenuIndex.set(null);
+        if (!this.canRemove(tab))
+            return;
+        const wasActive = this.value() === tab.value;
+        const event = {
+            value: tab.value,
+            index,
+            wasActive,
+        };
+        this.tabRemoveRequested.emit(event);
+        this.tabRemove.emit(event);
+    }
+    moveLabel(direction) {
+        if (this.orientation() === 'vertical') {
+            const key = direction === 'left'
+                ? 'solaris.editableTabs.moveUp'
+                : 'solaris.editableTabs.moveDown';
+            return (this.resolveText(key) ??
+                (direction === 'left' ? 'Move up' : 'Move down'));
+        }
+        const key = direction === 'left'
+            ? 'solaris.editableTabs.moveLeft'
+            : 'solaris.editableTabs.moveRight';
+        return (this.resolveText(key) ??
+            (direction === 'left' ? 'Move left' : 'Move right'));
+    }
+    moveIcon(direction) {
+        if (this.orientation() === 'vertical') {
+            return direction === 'left' ? 'chevron-up' : 'chevron-down';
+        }
+        return direction === 'left' ? 'chevron-left' : 'chevron-right';
+    }
+    moveTab(tab, index, direction) {
+        this.activeMenuIndex.set(null);
+        const isPrev = direction === 'left' || direction === 'up';
+        const nextIndex = isPrev ? index - 1 : index + 1;
+        if (nextIndex < 0 || nextIndex >= this.tabs().length)
+            return;
+        if (!this.canMoveLeft(tab) && isPrev)
+            return;
+        if (!this.canMoveRight(tab) && !isPrev)
+            return;
+        const event = {
+            value: tab.value,
+            previousIndex: index,
+            nextIndex,
+            direction,
+        };
+        this.tabMoveRequested.emit(event);
+        this.tabMove.emit(event);
+    }
+    setAsDefault(tab) {
+        this.activeMenuIndex.set(null);
+        const previousDefaultValue = this.defaultTabValue();
+        this.defaultTabValue.set(tab.value);
+        const event = {
+            value: tab.value,
+            previousDefaultValue: previousDefaultValue !== undefined
+                ? previousDefaultValue
+                : undefined,
+        };
+        this.defaultTabChange.emit(event);
+    }
+    handleCustomAction(tab, action) {
+        this.activeMenuIndex.set(null);
+        const event = {
+            tabValue: tab.value,
+            actionId: action.id,
+            action,
+        };
+        this.tabAction.emit(event);
+    }
+    isRenaming(tab) {
+        return this.renamingTabId() === tab.value;
+    }
+    getContentTemplate(tab) {
+        const contentMap = this.tabContentMap();
+        if (contentMap) {
+            const key = String(tab.value);
+            return contentMap[key] ?? null;
+        }
+        return tab.content ?? null;
+    }
+    resolveText(key) {
+        if (this.translateService) {
+            const result = this.translateService.translate(key);
+            return result !== key ? result : undefined;
+        }
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEditableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisEditableTabsComponent, isStandalone: true, selector: "solaris-editable-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, contentTransition: { classPropertyName: "contentTransition", publicName: "contentTransition", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, renamable: { classPropertyName: "renamable", publicName: "renamable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, defaultable: { classPropertyName: "defaultable", publicName: "defaultable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, renameOnBlur: { classPropertyName: "renameOnBlur", publicName: "renameOnBlur", isSignal: true, isRequired: false, transformFunction: null }, minTabs: { classPropertyName: "minTabs", publicName: "minTabs", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, tabContentMap: { classPropertyName: "tabContentMap", publicName: "tabContentMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", tabRenameRequested: "tabRenameRequested", tabRename: "tabRename", tabRemoveRequested: "tabRemoveRequested", tabRemove: "tabRemove", tabMoveRequested: "tabMoveRequested", tabMove: "tabMove", defaultTabChange: "defaultTabChange", tabAction: "tabAction" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-size": "size()", "attr.data-density": "density()", "attr.data-show-actions": "showActions()" }, classAttribute: "solaris-editable-tabs" }, viewQueries: [{ propertyName: "menuComponents", predicate: SolarisDropdownMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-editable-tabs__wrapper\">\n  <solaris-tabs\n    [value]=\"$any(value())\"\n    (valueChange)=\"onValueChange($event)\"\n    [defaultValue]=\"$any(defaultValue())\"\n    [orientation]=\"orientation()\"\n    [appearance]=\"appearance()\"\n    [size]=\"size()\"\n    [density]=\"density()\"\n    [activationMode]=\"activationMode()\"\n    [contentTransition]=\"contentTransition()\"\n    [ariaLabel]=\"resolvedAriaLabel()\"\n    class=\"solaris-editable-tabs__inner\"\n  >\n    @for (tab of tabs(); track tab.value; let i = $index) {\n      <solaris-tab\n        [value]=\"$any(tab.value)\"\n        [label]=\"isRenaming(tab) ? undefined : tab.label\"\n        [labelKey]=\"isRenaming(tab) ? undefined : tab.labelKey\"\n        [icon]=\"tab.icon\"\n        [badge]=\"tab.badge\"\n        [disabled]=\"tab.disabled ?? false\"\n        [attr.data-editable]=\"editable() ? '' : null\"\n        [attr.data-has-icon]=\"tab.icon ? '' : null\"\n        [attr.data-menu-open]=\"activeMenuIndex() === i ? '' : null\"\n      >\n        @if (isRenaming(tab)) {\n          <span class=\"solaris-editable-tabs__rename-wrapper\">\n            <input\n              #renameInput\n              class=\"solaris-editable-tabs__rename-input\"\n              [value]=\"renameValue()\"\n              (input)=\"renameValue.set($any($event).target.value)\"\n              (keydown)=\"onRenameKeydown($event, tab)\"\n              (blur)=\"onRenameBlur(tab)\"\n              [attr.aria-label]=\"\n                resolveText('solaris.editableTabs.confirmRename') ??\n                'Confirm rename'\n              \"\n            />\n          </span>\n        } @else if (hasActions(tab)) {\n          <span\n            class=\"solaris-editable-tabs__action-area\"\n            [class.solaris-editable-tabs__action-area--visible]=\"\n              showActions() === 'always'\n            \"\n            [class.solaris-editable-tabs__action-area--replaces-icon]=\"\n              !!tab.icon\n            \"\n          >\n            <button\n              class=\"solaris-editable-tabs__action-trigger\"\n              solaris-dropdown-menu-trigger\n              [solarisDropdownMenuTriggerFor]=\"tabMenuRefs()[i]\"\n              [solarisDropdownMenuPlacement]=\"'bottom'\"\n              [solarisDropdownMenuAlign]=\"'start'\"\n              [solarisDropdownMenuOffset]=\"4\"\n              [solarisDropdownMenuRestoreFocus]=\"true\"\n              [solarisDropdownMenuOpen]=\"activeMenuIndex() === i\"\n              (menuOpened)=\"activeMenuIndex.set(i)\"\n              (menuClosed)=\"activeMenuIndex.set(null)\"\n              [attr.aria-label]=\"\n                resolveText('solaris.editableTabs.tabActions') ?? 'Tab actions'\n              \"\n              tabindex=\"0\"\n              type=\"button\"\n            >\n              <solaris-icon name=\"ellipses\" [decorative]=\"true\" />\n            </button>\n          </span>\n        }\n      </solaris-tab>\n    }\n\n    @for (tab of tabs(); track tab.value) {\n      <solaris-tab-panel [value]=\"$any(tab.value)\" [lazy]=\"true\">\n        @if (getContentTemplate(tab); as tmpl) {\n          <ng-container [ngTemplateOutlet]=\"tmpl\" />\n        }\n      </solaris-tab-panel>\n    }\n  </solaris-tabs>\n</div>\n\n@for (tab of tabs(); track tab.value; let i = $index) {\n  <solaris-dropdown-menu>\n    @if (canRename(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"resolveText('solaris.editableTabs.rename') ?? 'Rename'\"\n        icon=\"edit\"\n        (itemSelected)=\"startRename(tab)\"\n      />\n    }\n    @if (canSetDefault(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"\n          resolveText('solaris.editableTabs.setAsDefault') ?? 'Set as default'\n        \"\n        icon=\"check\"\n        (itemSelected)=\"setAsDefault(tab)\"\n      />\n    }\n    @if (canMoveLeft(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"moveLabel('left')\"\n        [icon]=\"moveIcon('left')\"\n        (itemSelected)=\"\n          moveTab(tab, i, orientation() === 'vertical' ? 'up' : 'left')\n        \"\n      />\n    }\n    @if (canMoveRight(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"moveLabel('right')\"\n        [icon]=\"moveIcon('right')\"\n        (itemSelected)=\"\n          moveTab(tab, i, orientation() === 'vertical' ? 'down' : 'right')\n        \"\n      />\n    }\n    @if (tab.customActions?.length) {\n      @for (action of tab.customActions; track action.id) {\n        @if (!action.disabled) {\n          <solaris-dropdown-menu-item\n            [label]=\"action.label ?? ''\"\n            [labelKey]=\"action.labelKey\"\n            [icon]=\"action.icon\"\n            [color]=\"action.color ?? 'neutral'\"\n            (itemSelected)=\"handleCustomAction(tab, action)\"\n          />\n        }\n      }\n    }\n    @if (canRemove(tab)) {\n      <solaris-divider />\n      <solaris-dropdown-menu-item\n        [label]=\"resolveText('solaris.editableTabs.remove') ?? 'Remove'\"\n        icon=\"x\"\n        color=\"danger\"\n        (itemSelected)=\"confirmRemove(tab, i)\"\n      />\n    }\n  </solaris-dropdown-menu>\n}\n", styles: [":host{--solaris-editable-tabs-action-size: var(--solaris-spacing-5);--solaris-editable-tabs-action-radius: var(--solaris-radius-sm);--solaris-editable-tabs-action-color: var(--solaris-text-muted);--solaris-editable-tabs-action-hover-color: var(--solaris-text-default);--solaris-editable-tabs-action-hover-background: var( --solaris-surface-subtle );--solaris-editable-tabs-rename-input-min-width: var(--solaris-spacing-20);--solaris-editable-tabs-rename-input-padding: var(--solaris-spacing-1);--solaris-editable-tabs-rename-input-radius: var(--solaris-radius-sm);--solaris-editable-tabs-rename-input-font-size: inherit;--solaris-editable-tabs-rename-input-border-color: var( --solaris-primary-base );--solaris-editable-tabs-rename-input-background: var(--solaris-surface-base);display:block;width:100%}.solaris-editable-tabs__wrapper{position:relative;width:100%}.solaris-editable-tabs__action-area{display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-editable-tabs__action-area--visible{opacity:1}:host([data-show-actions=always]) .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:hover .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:focus-within .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:none;order:-1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon .solaris-editable-tabs__action-trigger{width:var(--solaris-tab-icon-size);height:var(--solaris-tab-icon-size)}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-editable-tabs__action-area--replaces-icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-tab__icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-tab__icon{display:none}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-tab__icon{display:none}:host([data-show-actions=always]) ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host([data-show-actions=always]) ::ng-deep solaris-tab[data-has-icon] .solaris-tab__icon{display:none}.solaris-editable-tabs__action-trigger{display:inline-flex;align-items:center;justify-content:center;width:var(--solaris-editable-tabs-action-size);height:var(--solaris-editable-tabs-action-size);padding:0;margin:0;border:none;cursor:pointer;background:transparent;color:var(--solaris-editable-tabs-action-color);border-radius:var(--solaris-editable-tabs-action-radius);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);line-height:0}.solaris-editable-tabs__action-trigger:hover,.solaris-editable-tabs__action-trigger:focus-visible{color:var(--solaris-editable-tabs-action-hover-color);background:var(--solaris-editable-tabs-action-hover-background)}.solaris-editable-tabs__action-trigger:focus-visible{outline:var(--solaris-border-width-md) solid var(--solaris-primary-base);outline-offset:var(--solaris-border-width-sm)}.solaris-editable-tabs__rename-wrapper{display:inline-flex;align-items:center}.solaris-editable-tabs__rename-input{min-width:var(--solaris-editable-tabs-rename-input-min-width);padding:var(--solaris-editable-tabs-rename-input-padding);border:var(--solaris-border-width-sm) solid var(--solaris-editable-tabs-rename-input-border-color);border-radius:var(--solaris-editable-tabs-rename-input-radius);background:var(--solaris-editable-tabs-rename-input-background);font:var(--solaris-font-weight-regular) var(--solaris-editable-tabs-rename-input-font-size)/1.2 var(--solaris-font-family-sans);color:inherit;outline:none;box-sizing:border-box}.solaris-editable-tabs__rename-input:focus{box-shadow:0 0 0 var(--solaris-border-width-sm) var(--solaris-primary-base-alpha)}@media(prefers-reduced-motion:reduce){.solaris-editable-tabs__action-area,.solaris-editable-tabs__action-trigger{transition:none}}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-area{transition:none}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-trigger{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisTabsComponent, selector: "solaris-tabs", inputs: ["value", "defaultValue", "orientation", "appearance", "size", "density", "activationMode", "contentTransition", "fullWidth", "fitContent", "scrollable", "showIndicator", "disabled", "ariaLabel", "ariaLabelKey"], outputs: ["valueChange", "tabChange", "tabClick"] }, { kind: "component", type: SolarisTabComponent, selector: "solaris-tab", inputs: ["disabled", "value", "iconDecorative", "icon", "label", "labelKey", "ariaLabel", "badgeLabel", "ariaLabelKey", "badgeLabelKey", "badge"] }, { kind: "component", type: SolarisTabPanelComponent, selector: "solaris-tab-panel", inputs: ["value", "lazy"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "component", type: SolarisDropdownMenuComponent, selector: "solaris-dropdown-menu", inputs: ["size", "density"] }, { kind: "component", type: SolarisDropdownMenuItemComponent, selector: "solaris-dropdown-menu-item", inputs: ["color", "type", "closeOnSelect", "descriptionKey", "description", "checked", "labelKey", "shortcut", "label", "icon", "iconDecorative", "value", "disabled"], outputs: ["itemSelected"] }, { kind: "directive", type: SolarisDropdownMenuTriggerDirective, selector: "[solaris-dropdown-menu-trigger]", inputs: ["solarisDropdownMenuTriggerFor", "solarisDropdownMenuOpen", "solarisDropdownMenuDisabled", "solarisDropdownMenuPlacement", "solarisDropdownMenuAlign", "solarisDropdownMenuOffset", "solarisDropdownMenuAppearance", "solarisDropdownMenuRadius", "solarisDropdownMenuCloseOnSelect", "solarisDropdownMenuCloseOnEscape", "solarisDropdownMenuCloseOnOutsideClick", "solarisDropdownMenuMatchTriggerWidth", "solarisDropdownMenuMinWidth", "solarisDropdownMenuMaxWidth", "solarisDropdownMenuRestoreFocus", "solarisDropdownMenuScrollStrategy"], outputs: ["menuOpened", "menuClosed", "openChange"] }, { kind: "component", type: SolarisDividerComponent, selector: "solaris-divider", inputs: ["orientation", "appearance", "spacing", "inset", "decorative", "width", "height"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEditableTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-editable-tabs', standalone: true, imports: [
+                        SolarisTabsComponent,
+                        SolarisTabComponent,
+                        SolarisTabPanelComponent,
+                        SolarisIconComponent,
+                        SolarisDropdownMenuComponent,
+                        SolarisDropdownMenuItemComponent,
+                        SolarisDropdownMenuTriggerDirective,
+                        SolarisDividerComponent,
+                        NgTemplateOutlet,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'solaris-editable-tabs',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-appearance]': 'appearance()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-density]': 'density()',
+                        '[attr.data-show-actions]': 'showActions()',
+                    }, template: "<div class=\"solaris-editable-tabs__wrapper\">\n  <solaris-tabs\n    [value]=\"$any(value())\"\n    (valueChange)=\"onValueChange($event)\"\n    [defaultValue]=\"$any(defaultValue())\"\n    [orientation]=\"orientation()\"\n    [appearance]=\"appearance()\"\n    [size]=\"size()\"\n    [density]=\"density()\"\n    [activationMode]=\"activationMode()\"\n    [contentTransition]=\"contentTransition()\"\n    [ariaLabel]=\"resolvedAriaLabel()\"\n    class=\"solaris-editable-tabs__inner\"\n  >\n    @for (tab of tabs(); track tab.value; let i = $index) {\n      <solaris-tab\n        [value]=\"$any(tab.value)\"\n        [label]=\"isRenaming(tab) ? undefined : tab.label\"\n        [labelKey]=\"isRenaming(tab) ? undefined : tab.labelKey\"\n        [icon]=\"tab.icon\"\n        [badge]=\"tab.badge\"\n        [disabled]=\"tab.disabled ?? false\"\n        [attr.data-editable]=\"editable() ? '' : null\"\n        [attr.data-has-icon]=\"tab.icon ? '' : null\"\n        [attr.data-menu-open]=\"activeMenuIndex() === i ? '' : null\"\n      >\n        @if (isRenaming(tab)) {\n          <span class=\"solaris-editable-tabs__rename-wrapper\">\n            <input\n              #renameInput\n              class=\"solaris-editable-tabs__rename-input\"\n              [value]=\"renameValue()\"\n              (input)=\"renameValue.set($any($event).target.value)\"\n              (keydown)=\"onRenameKeydown($event, tab)\"\n              (blur)=\"onRenameBlur(tab)\"\n              [attr.aria-label]=\"\n                resolveText('solaris.editableTabs.confirmRename') ??\n                'Confirm rename'\n              \"\n            />\n          </span>\n        } @else if (hasActions(tab)) {\n          <span\n            class=\"solaris-editable-tabs__action-area\"\n            [class.solaris-editable-tabs__action-area--visible]=\"\n              showActions() === 'always'\n            \"\n            [class.solaris-editable-tabs__action-area--replaces-icon]=\"\n              !!tab.icon\n            \"\n          >\n            <button\n              class=\"solaris-editable-tabs__action-trigger\"\n              solaris-dropdown-menu-trigger\n              [solarisDropdownMenuTriggerFor]=\"tabMenuRefs()[i]\"\n              [solarisDropdownMenuPlacement]=\"'bottom'\"\n              [solarisDropdownMenuAlign]=\"'start'\"\n              [solarisDropdownMenuOffset]=\"4\"\n              [solarisDropdownMenuRestoreFocus]=\"true\"\n              [solarisDropdownMenuOpen]=\"activeMenuIndex() === i\"\n              (menuOpened)=\"activeMenuIndex.set(i)\"\n              (menuClosed)=\"activeMenuIndex.set(null)\"\n              [attr.aria-label]=\"\n                resolveText('solaris.editableTabs.tabActions') ?? 'Tab actions'\n              \"\n              tabindex=\"0\"\n              type=\"button\"\n            >\n              <solaris-icon name=\"ellipses\" [decorative]=\"true\" />\n            </button>\n          </span>\n        }\n      </solaris-tab>\n    }\n\n    @for (tab of tabs(); track tab.value) {\n      <solaris-tab-panel [value]=\"$any(tab.value)\" [lazy]=\"true\">\n        @if (getContentTemplate(tab); as tmpl) {\n          <ng-container [ngTemplateOutlet]=\"tmpl\" />\n        }\n      </solaris-tab-panel>\n    }\n  </solaris-tabs>\n</div>\n\n@for (tab of tabs(); track tab.value; let i = $index) {\n  <solaris-dropdown-menu>\n    @if (canRename(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"resolveText('solaris.editableTabs.rename') ?? 'Rename'\"\n        icon=\"edit\"\n        (itemSelected)=\"startRename(tab)\"\n      />\n    }\n    @if (canSetDefault(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"\n          resolveText('solaris.editableTabs.setAsDefault') ?? 'Set as default'\n        \"\n        icon=\"check\"\n        (itemSelected)=\"setAsDefault(tab)\"\n      />\n    }\n    @if (canMoveLeft(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"moveLabel('left')\"\n        [icon]=\"moveIcon('left')\"\n        (itemSelected)=\"\n          moveTab(tab, i, orientation() === 'vertical' ? 'up' : 'left')\n        \"\n      />\n    }\n    @if (canMoveRight(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"moveLabel('right')\"\n        [icon]=\"moveIcon('right')\"\n        (itemSelected)=\"\n          moveTab(tab, i, orientation() === 'vertical' ? 'down' : 'right')\n        \"\n      />\n    }\n    @if (tab.customActions?.length) {\n      @for (action of tab.customActions; track action.id) {\n        @if (!action.disabled) {\n          <solaris-dropdown-menu-item\n            [label]=\"action.label ?? ''\"\n            [labelKey]=\"action.labelKey\"\n            [icon]=\"action.icon\"\n            [color]=\"action.color ?? 'neutral'\"\n            (itemSelected)=\"handleCustomAction(tab, action)\"\n          />\n        }\n      }\n    }\n    @if (canRemove(tab)) {\n      <solaris-divider />\n      <solaris-dropdown-menu-item\n        [label]=\"resolveText('solaris.editableTabs.remove') ?? 'Remove'\"\n        icon=\"x\"\n        color=\"danger\"\n        (itemSelected)=\"confirmRemove(tab, i)\"\n      />\n    }\n  </solaris-dropdown-menu>\n}\n", styles: [":host{--solaris-editable-tabs-action-size: var(--solaris-spacing-5);--solaris-editable-tabs-action-radius: var(--solaris-radius-sm);--solaris-editable-tabs-action-color: var(--solaris-text-muted);--solaris-editable-tabs-action-hover-color: var(--solaris-text-default);--solaris-editable-tabs-action-hover-background: var( --solaris-surface-subtle );--solaris-editable-tabs-rename-input-min-width: var(--solaris-spacing-20);--solaris-editable-tabs-rename-input-padding: var(--solaris-spacing-1);--solaris-editable-tabs-rename-input-radius: var(--solaris-radius-sm);--solaris-editable-tabs-rename-input-font-size: inherit;--solaris-editable-tabs-rename-input-border-color: var( --solaris-primary-base );--solaris-editable-tabs-rename-input-background: var(--solaris-surface-base);display:block;width:100%}.solaris-editable-tabs__wrapper{position:relative;width:100%}.solaris-editable-tabs__action-area{display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-editable-tabs__action-area--visible{opacity:1}:host([data-show-actions=always]) .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:hover .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:focus-within .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:none;order:-1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon .solaris-editable-tabs__action-trigger{width:var(--solaris-tab-icon-size);height:var(--solaris-tab-icon-size)}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-editable-tabs__action-area--replaces-icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-tab__icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-tab__icon{display:none}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-tab__icon{display:none}:host([data-show-actions=always]) ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host([data-show-actions=always]) ::ng-deep solaris-tab[data-has-icon] .solaris-tab__icon{display:none}.solaris-editable-tabs__action-trigger{display:inline-flex;align-items:center;justify-content:center;width:var(--solaris-editable-tabs-action-size);height:var(--solaris-editable-tabs-action-size);padding:0;margin:0;border:none;cursor:pointer;background:transparent;color:var(--solaris-editable-tabs-action-color);border-radius:var(--solaris-editable-tabs-action-radius);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);line-height:0}.solaris-editable-tabs__action-trigger:hover,.solaris-editable-tabs__action-trigger:focus-visible{color:var(--solaris-editable-tabs-action-hover-color);background:var(--solaris-editable-tabs-action-hover-background)}.solaris-editable-tabs__action-trigger:focus-visible{outline:var(--solaris-border-width-md) solid var(--solaris-primary-base);outline-offset:var(--solaris-border-width-sm)}.solaris-editable-tabs__rename-wrapper{display:inline-flex;align-items:center}.solaris-editable-tabs__rename-input{min-width:var(--solaris-editable-tabs-rename-input-min-width);padding:var(--solaris-editable-tabs-rename-input-padding);border:var(--solaris-border-width-sm) solid var(--solaris-editable-tabs-rename-input-border-color);border-radius:var(--solaris-editable-tabs-rename-input-radius);background:var(--solaris-editable-tabs-rename-input-background);font:var(--solaris-font-weight-regular) var(--solaris-editable-tabs-rename-input-font-size)/1.2 var(--solaris-font-family-sans);color:inherit;outline:none;box-sizing:border-box}.solaris-editable-tabs__rename-input:focus{box-shadow:0 0 0 var(--solaris-border-width-sm) var(--solaris-primary-base-alpha)}@media(prefers-reduced-motion:reduce){.solaris-editable-tabs__action-area,.solaris-editable-tabs__action-trigger{transition:none}}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-area{transition:none}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-trigger{transition:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], contentTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTransition", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], renamable: [{ type: i0.Input, args: [{ isSignal: true, alias: "renamable", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], movable: [{ type: i0.Input, args: [{ isSignal: true, alias: "movable", required: false }] }], defaultable: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultable", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], renameOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "renameOnBlur", required: false }] }], minTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTabs", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], tabContentMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabContentMap", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], tabRenameRequested: [{ type: i0.Output, args: ["tabRenameRequested"] }], tabRename: [{ type: i0.Output, args: ["tabRename"] }], tabRemoveRequested: [{ type: i0.Output, args: ["tabRemoveRequested"] }], tabRemove: [{ type: i0.Output, args: ["tabRemove"] }], tabMoveRequested: [{ type: i0.Output, args: ["tabMoveRequested"] }], tabMove: [{ type: i0.Output, args: ["tabMove"] }], defaultTabChange: [{ type: i0.Output, args: ["defaultTabChange"] }], tabAction: [{ type: i0.Output, args: ["tabAction"] }], menuComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SolarisDropdownMenuComponent), { isSignal: true }] }] } });
+//# sourceMappingURL=editable-tabs.component.js.map