@educarehq/solaris-ui 0.8.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -13001,6 +13001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13001
13001
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], overflowPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowPosition", required: false }] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], previous: [{ type: i0.Output, args: ["previous"] }], next: [{ type: i0.Output, args: ["next"] }] } });
|
|
13002
13002
|
|
|
13003
13003
|
class SolarisDividerComponent {
|
|
13004
|
+
translateService = inject(SolarisTranslateService);
|
|
13004
13005
|
orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
13005
13006
|
appearance = input('subtle', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
13006
13007
|
spacing = input('md', ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
|
|
@@ -13008,26 +13009,49 @@ class SolarisDividerComponent {
|
|
|
13008
13009
|
decorative = input(true, ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
|
|
13009
13010
|
width = input('', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
13010
13011
|
height = input('', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
13012
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
13013
|
+
labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
|
|
13014
|
+
textPosition = input('center', ...(ngDevMode ? [{ debugName: "textPosition" }] : /* istanbul ignore next */ []));
|
|
13015
|
+
labelText = computed(() => {
|
|
13016
|
+
const direct = this.label();
|
|
13017
|
+
if (direct)
|
|
13018
|
+
return direct;
|
|
13019
|
+
const key = this.labelKey();
|
|
13020
|
+
if (key) {
|
|
13021
|
+
const translated = this.translateService.translate(key);
|
|
13022
|
+
if (translated !== key)
|
|
13023
|
+
return translated;
|
|
13024
|
+
}
|
|
13025
|
+
return null;
|
|
13026
|
+
}, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
13027
|
+
effectiveDecorative = computed(() => {
|
|
13028
|
+
return this.decorative() && !this.labelText();
|
|
13029
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveDecorative" }] : /* istanbul ignore next */ []));
|
|
13011
13030
|
computedRole = computed(() => {
|
|
13012
|
-
return this.
|
|
13031
|
+
return this.effectiveDecorative() ? null : 'separator';
|
|
13013
13032
|
}, ...(ngDevMode ? [{ debugName: "computedRole" }] : /* istanbul ignore next */ []));
|
|
13014
13033
|
computedAriaOrientation = computed(() => {
|
|
13015
|
-
if (this.
|
|
13034
|
+
if (this.effectiveDecorative())
|
|
13016
13035
|
return null;
|
|
13017
13036
|
if (this.orientation() === 'vertical')
|
|
13018
13037
|
return 'vertical';
|
|
13019
13038
|
return null;
|
|
13020
13039
|
}, ...(ngDevMode ? [{ debugName: "computedAriaOrientation" }] : /* istanbul ignore next */ []));
|
|
13040
|
+
computedTextPosition = computed(() => {
|
|
13041
|
+
if (!this.labelText())
|
|
13042
|
+
return null;
|
|
13043
|
+
return this.textPosition();
|
|
13044
|
+
}, ...(ngDevMode ? [{ debugName: "computedTextPosition" }] : /* istanbul ignore next */ []));
|
|
13021
13045
|
computedWidth = computed(() => {
|
|
13022
13046
|
const w = this.width();
|
|
13023
|
-
return w
|
|
13047
|
+
return w || null;
|
|
13024
13048
|
}, ...(ngDevMode ? [{ debugName: "computedWidth" }] : /* istanbul ignore next */ []));
|
|
13025
13049
|
computedHeight = computed(() => {
|
|
13026
13050
|
const h = this.height();
|
|
13027
|
-
return h
|
|
13051
|
+
return h || null;
|
|
13028
13052
|
}, ...(ngDevMode ? [{ debugName: "computedHeight" }] : /* istanbul ignore next */ []));
|
|
13029
13053
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13030
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
13054
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisDividerComponent, isStandalone: true, selector: "solaris-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-inset": "inset()", "attr.role": "computedRole()", "attr.data-spacing": "spacing()", "attr.data-appearance": "appearance()", "attr.data-orientation": "orientation()", "attr.data-text-position": "computedTextPosition()", "attr.aria-hidden": "effectiveDecorative() ? \"true\" : null", "attr.aria-orientation": "computedAriaOrientation()", "style.--solaris-divider-width": "computedWidth()", "style.--solaris-divider-height": "computedHeight()" } }, ngImport: i0, template: "<span class=\"solaris-divider__line\" aria-hidden=\"true\"></span>\n@if (labelText(); as text) {\n <span class=\"solaris-divider__text\">{{ text }}</span>\n <span class=\"solaris-divider__line\" aria-hidden=\"true\"></span>\n}\n", styles: [":host{--solaris-divider-width: 100%;--solaris-divider-height: 100%;--solaris-divider-spacing-none: 0;--solaris-divider-inset-end: var(--solaris-spacing-3);--solaris-divider-spacing-sm: var(--solaris-spacing-2);--solaris-divider-spacing-md: var(--solaris-spacing-3);--solaris-divider-spacing-lg: var(--solaris-spacing-5);--solaris-divider-inset-start: var(--solaris-spacing-3);--solaris-divider-text-gap: var(--solaris-spacing-3);--solaris-divider-text-color: var(--solaris-text-muted);--solaris-divider-text-font-size: var(--solaris-font-size-sm);display:block;pointer-events:none;box-sizing:border-box}:host([data-orientation=horizontal]){display:flex;align-items:center;width:var(--solaris-divider-width);margin-block:var(--solaris-divider-spacing-md)}:host([data-orientation=vertical]){width:0;height:var(--solaris-divider-height);min-height:16px;align-self:stretch;margin-inline:var(--solaris-divider-spacing-md);border-left:var(--solaris-border-width-sm) solid var(--solaris-border-default)}.solaris-divider__line{flex:1 1 0;min-width:0;border-top:var(--solaris-border-width-sm) solid var(--solaris-border-default)}:host([data-orientation=vertical]) .solaris-divider__line{display:none}.solaris-divider__text{flex:0 0 auto;max-width:100%;white-space:nowrap;color:var(--solaris-divider-text-color);font-size:var(--solaris-divider-text-font-size);margin-inline:var(--solaris-divider-text-gap)}:host([data-text-position=start]) .solaris-divider__line:first-child{flex:0 0 var(--solaris-divider-text-gap)}:host([data-text-position=end]) .solaris-divider__line:last-child{flex:0 0 var(--solaris-divider-text-gap)}:host([data-spacing=none][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-none)}:host([data-spacing=sm][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-sm)}:host([data-spacing=md][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-md)}:host([data-spacing=lg][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-lg)}:host([data-spacing=none][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-none)}:host([data-spacing=sm][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-sm)}:host([data-spacing=md][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-md)}:host([data-spacing=lg][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-lg)}:host([data-appearance=strong]) .solaris-divider__line{border-top-color:var(--solaris-border-strong);border-top-width:var(--solaris-border-width-lg)}:host([data-appearance=strong][data-orientation=vertical]){border-left-color:var(--solaris-border-strong);border-left-width:var(--solaris-border-width-lg)}:host([data-inset=start][data-orientation=horizontal]){width:calc(100% - var(--solaris-divider-inset-start));margin-inline-start:var(--solaris-divider-inset-start)}:host([data-inset=end][data-orientation=horizontal]){margin-inline-end:var(--solaris-divider-inset-end);width:calc(100% - var(--solaris-divider-inset-end))}:host([data-inset=both][data-orientation=horizontal]){margin-inline:var(--solaris-divider-inset-start) var(--solaris-divider-inset-end);width:calc(100% - var(--solaris-divider-inset-start) - var(--solaris-divider-inset-end))}:host([data-inset=start][data-orientation=vertical]){margin-block-start:var(--solaris-divider-inset-start);height:calc(100% - var(--solaris-divider-inset-start))}:host([data-inset=end][data-orientation=vertical]){margin-block-end:var(--solaris-divider-inset-end);height:calc(100% - var(--solaris-divider-inset-end))}:host([data-inset=both][data-orientation=vertical]){height:calc(100% - var(--solaris-divider-inset-start) - var(--solaris-divider-inset-end));margin-block:var(--solaris-divider-inset-start) var(--solaris-divider-inset-end)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13031
13055
|
}
|
|
13032
13056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDividerComponent, decorators: [{
|
|
13033
13057
|
type: Component,
|
|
@@ -13037,12 +13061,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13037
13061
|
'[attr.data-spacing]': 'spacing()',
|
|
13038
13062
|
'[attr.data-appearance]': 'appearance()',
|
|
13039
13063
|
'[attr.data-orientation]': 'orientation()',
|
|
13040
|
-
'[attr.
|
|
13064
|
+
'[attr.data-text-position]': 'computedTextPosition()',
|
|
13065
|
+
'[attr.aria-hidden]': 'effectiveDecorative() ? "true" : null',
|
|
13041
13066
|
'[attr.aria-orientation]': 'computedAriaOrientation()',
|
|
13042
13067
|
'[style.--solaris-divider-width]': 'computedWidth()',
|
|
13043
13068
|
'[style.--solaris-divider-height]': 'computedHeight()',
|
|
13044
|
-
}, template: "<
|
|
13045
|
-
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
|
|
13069
|
+
}, template: "<span class=\"solaris-divider__line\" aria-hidden=\"true\"></span>\n@if (labelText(); as text) {\n <span class=\"solaris-divider__text\">{{ text }}</span>\n <span class=\"solaris-divider__line\" aria-hidden=\"true\"></span>\n}\n", styles: [":host{--solaris-divider-width: 100%;--solaris-divider-height: 100%;--solaris-divider-spacing-none: 0;--solaris-divider-inset-end: var(--solaris-spacing-3);--solaris-divider-spacing-sm: var(--solaris-spacing-2);--solaris-divider-spacing-md: var(--solaris-spacing-3);--solaris-divider-spacing-lg: var(--solaris-spacing-5);--solaris-divider-inset-start: var(--solaris-spacing-3);--solaris-divider-text-gap: var(--solaris-spacing-3);--solaris-divider-text-color: var(--solaris-text-muted);--solaris-divider-text-font-size: var(--solaris-font-size-sm);display:block;pointer-events:none;box-sizing:border-box}:host([data-orientation=horizontal]){display:flex;align-items:center;width:var(--solaris-divider-width);margin-block:var(--solaris-divider-spacing-md)}:host([data-orientation=vertical]){width:0;height:var(--solaris-divider-height);min-height:16px;align-self:stretch;margin-inline:var(--solaris-divider-spacing-md);border-left:var(--solaris-border-width-sm) solid var(--solaris-border-default)}.solaris-divider__line{flex:1 1 0;min-width:0;border-top:var(--solaris-border-width-sm) solid var(--solaris-border-default)}:host([data-orientation=vertical]) .solaris-divider__line{display:none}.solaris-divider__text{flex:0 0 auto;max-width:100%;white-space:nowrap;color:var(--solaris-divider-text-color);font-size:var(--solaris-divider-text-font-size);margin-inline:var(--solaris-divider-text-gap)}:host([data-text-position=start]) .solaris-divider__line:first-child{flex:0 0 var(--solaris-divider-text-gap)}:host([data-text-position=end]) .solaris-divider__line:last-child{flex:0 0 var(--solaris-divider-text-gap)}:host([data-spacing=none][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-none)}:host([data-spacing=sm][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-sm)}:host([data-spacing=md][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-md)}:host([data-spacing=lg][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-lg)}:host([data-spacing=none][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-none)}:host([data-spacing=sm][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-sm)}:host([data-spacing=md][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-md)}:host([data-spacing=lg][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-lg)}:host([data-appearance=strong]) .solaris-divider__line{border-top-color:var(--solaris-border-strong);border-top-width:var(--solaris-border-width-lg)}:host([data-appearance=strong][data-orientation=vertical]){border-left-color:var(--solaris-border-strong);border-left-width:var(--solaris-border-width-lg)}:host([data-inset=start][data-orientation=horizontal]){width:calc(100% - var(--solaris-divider-inset-start));margin-inline-start:var(--solaris-divider-inset-start)}:host([data-inset=end][data-orientation=horizontal]){margin-inline-end:var(--solaris-divider-inset-end);width:calc(100% - var(--solaris-divider-inset-end))}:host([data-inset=both][data-orientation=horizontal]){margin-inline:var(--solaris-divider-inset-start) var(--solaris-divider-inset-end);width:calc(100% - var(--solaris-divider-inset-start) - var(--solaris-divider-inset-end))}:host([data-inset=start][data-orientation=vertical]){margin-block-start:var(--solaris-divider-inset-start);height:calc(100% - var(--solaris-divider-inset-start))}:host([data-inset=end][data-orientation=vertical]){margin-block-end:var(--solaris-divider-inset-end);height:calc(100% - var(--solaris-divider-inset-end))}:host([data-inset=both][data-orientation=vertical]){height:calc(100% - var(--solaris-divider-inset-start) - var(--solaris-divider-inset-end));margin-block:var(--solaris-divider-inset-start) var(--solaris-divider-inset-end)}\n"] }]
|
|
13070
|
+
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], textPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "textPosition", required: false }] }] } });
|
|
13046
13071
|
|
|
13047
13072
|
class SolarisDividerStackComponent {
|
|
13048
13073
|
spacing = input('md', ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
|
|
@@ -13539,7 +13564,7 @@ class SolarisEditableTabsComponent {
|
|
|
13539
13564
|
return undefined;
|
|
13540
13565
|
}
|
|
13541
13566
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEditableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13542
|
-
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 }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", 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-density": "effectiveDensity()", "attr.data-shape": "shape()", "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 [density]=\"effectiveDensity()\"\n [shape]=\"shape()\"\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=\"ellipsis\" [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-primary-base-alpha: #4282fb4d;--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", "density", "shape", "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 });
|
|
13567
|
+
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 }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", 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-density": "effectiveDensity()", "attr.data-shape": "shape()", "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 [density]=\"effectiveDensity()\"\n [shape]=\"shape()\"\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=\"ellipsis\" [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-primary-base-alpha: #4282fb4d;--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", "density", "shape", "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", "label", "labelKey", "textPosition"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13543
13568
|
}
|
|
13544
13569
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEditableTabsComponent, decorators: [{
|
|
13545
13570
|
type: Component,
|