@crowdfarming/oliva-ds 1.74.0-rc.3 → 1.74.0-rc.4
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.
|
@@ -5298,6 +5298,7 @@ class MenuItemComponent {
|
|
|
5298
5298
|
selected = input(false);
|
|
5299
5299
|
showArrowIcon = input(true);
|
|
5300
5300
|
tagLabel = input('');
|
|
5301
|
+
tagVariant = input('info');
|
|
5301
5302
|
children = input([]);
|
|
5302
5303
|
rightIcon = input('');
|
|
5303
5304
|
rightText = input('');
|
|
@@ -5325,11 +5326,11 @@ class MenuItemComponent {
|
|
|
5325
5326
|
return 'action-neutral-content-default';
|
|
5326
5327
|
});
|
|
5327
5328
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5328
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: MenuItemComponent, isStandalone: true, selector: "lib-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, showArrowIcon: { classPropertyName: "showArrowIcon", publicName: "showArrowIcon", isSignal: true, isRequired: false, transformFunction: null }, tagLabel: { classPropertyName: "tagLabel", publicName: "tagLabel", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, rightText: { classPropertyName: "rightText", publicName: "rightText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"c-menu-item__container\">\n <button\n [ngClass]=\"[\n 'c-menu-item',\n selected() ? 'c-menu-item--selected' : '',\n disabled() ? 'c-menu-item--disabled' : '',\n hasChildren() ? 'c-menu-item--has-children' : '',\n hasChildren() ? 'c-menu-item--expanded' : ''\n ]\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-selected]=\"selected()\"\n [attr.aria-expanded]=\"hasChildren() ? true : null\"\n (click)=\"handleClick()\"\n >\n @if (icon()) {\n <span class=\"c-menu-item__icon\">\n <lib-icon\n [name]=\"computedIcon()\"\n [size]=\"'md'\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n } @if (label()) {\n <span class=\"c-menu-item__label\">{{ label() }}</span>\n } @if (hasTag()) {\n <span class=\"c-menu-item__tag-container\">\n <lib-tag\n [text]=\"tagLabel()\"\n [closeActive]=\"false\"\n [showBadge]=\"false\"\n class=\"c-menu-item__tag\"\n ></lib-tag>\n </span>\n } @if (rightIcon()) {\n <span class=\"c-menu-item__right-icon\">\n <lib-icon [name]=\"rightIcon()\" [size]=\"'md'\"></lib-icon>\n </span>\n } @if (rightText()) {\n <span class=\"c-menu-item__right-text\"> {{ rightText() }} </span>\n } @if (showArrowIcon()) {\n <span class=\"c-menu-item__expand-icon\">\n <lib-icon\n name=\"caretright-regular\"\n [size]=\"'md'\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n </button>\n\n @if (hasChildren()) {\n <div class=\"c-menu-item__children\">\n <div class=\"c-menu-item__children-items\">\n @for (child of children(); track child.label) {\n <lib-menu-child-item\n [label]=\"child.label\"\n [disabled]=\"child.disabled || false\"\n [selected]=\"child.selected || false\"\n (clicked)=\"handleChildClick(child)\"\n >\n </lib-menu-child-item>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".c-menu-item{display:flex;align-items:center;gap:var(--space-component-gap-md, .5rem);width:100%;min-height:40px;padding:var(--space-component-padding-none) var(--space-component-padding-sm);border:none;border-radius:var(--size-border-radius-md);background:var(--color-menu-item-background-default);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);text-align:left;color:var(--color-action-neutral-content-default)}.c-menu-item__container,.c-menu-item__children{display:flex;flex-direction:column;width:100%}.c-menu-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-item:disabled{cursor:not-allowed}.c-menu-item:hover:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-hover);color:var(--color-action-neutral-content-hover)}.c-menu-item:active:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-pressed);color:var(--color-action-neutral-content-pressed)}.c-menu-item.c-menu-item--selected{background-color:var(--color-menu-item-parent-background-active);color:var(--color-action-primary-selected-content-default)}.c-menu-item.c-menu-item--selected:hover:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-hover);color:var(--color-action-primary-selected-content-hover)}.c-menu-item.c-menu-item--selected:active:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-pressed);color:var(--color-action-primary-selected-content-pressed)}.c-menu-item.c-menu-item--disabled{color:var(--color-action-neutral-content-disabled);background-color:var(--color-action-neutral-background-disabled)}.c-menu-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.c-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-menu-item__expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--space-component-gap-sm);transition:transform var(--transition-base-duration) var(--transition-base-easing)}.c-menu-item__tag-container,.c-menu-item__right-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-component-gap-sm)}.c-menu-item__tag{flex-shrink:0}.c-menu-item__right-text{margin-left:var(--space-component-gap-sm);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing);color:var(--color-content-default)}.c-menu-item__children{padding-left:var(--size-spacing-4);margin-top:var(--size-spacing-1)}.c-menu-item__children-label{font-size:var(--size-font-sm);font-weight:var(--size-font-weight-medium);color:var(--color-action-neutral-content-default);padding:var(--size-spacing-2) var(--size-spacing-3);margin-bottom:var(--size-spacing-1)}.c-menu-item__children-items{display:flex;flex-direction:column;gap:var(--size-spacing-1)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: MenuChildItemComponent, selector: "lib-menu-child-item", inputs: ["label", "icon", "disabled", "selected"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }] });
|
|
5329
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: MenuItemComponent, isStandalone: true, selector: "lib-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, showArrowIcon: { classPropertyName: "showArrowIcon", publicName: "showArrowIcon", isSignal: true, isRequired: false, transformFunction: null }, tagLabel: { classPropertyName: "tagLabel", publicName: "tagLabel", isSignal: true, isRequired: false, transformFunction: null }, tagVariant: { classPropertyName: "tagVariant", publicName: "tagVariant", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, rightText: { classPropertyName: "rightText", publicName: "rightText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"c-menu-item__container\">\n <button\n [ngClass]=\"[\n 'c-menu-item',\n selected() ? 'c-menu-item--selected' : '',\n disabled() ? 'c-menu-item--disabled' : '',\n hasChildren() ? 'c-menu-item--has-children' : '',\n hasChildren() ? 'c-menu-item--expanded' : ''\n ]\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-selected]=\"selected()\"\n [attr.aria-expanded]=\"hasChildren() ? true : null\"\n (click)=\"handleClick()\"\n >\n @if (icon()) {\n <span class=\"c-menu-item__icon\">\n <lib-icon\n [name]=\"computedIcon()\"\n [size]=\"'md'\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n } @if (label()) {\n <span class=\"c-menu-item__label\">{{ label() }}</span>\n } @if (hasTag()) {\n <span class=\"c-menu-item__tag-container\">\n <lib-tag\n [text]=\"tagLabel()\"\n [variant]=\"tagVariant()\"\n [closeActive]=\"false\"\n [showBadge]=\"false\"\n class=\"c-menu-item__tag\"\n ></lib-tag>\n </span>\n } @if (rightIcon()) {\n <span class=\"c-menu-item__right-icon\">\n <lib-icon [name]=\"rightIcon()\" [size]=\"'md'\"></lib-icon>\n </span>\n } @if (rightText()) {\n <span class=\"c-menu-item__right-text\"> {{ rightText() }} </span>\n } @if (showArrowIcon()) {\n <span class=\"c-menu-item__expand-icon\">\n <lib-icon\n name=\"caretright-regular\"\n [size]=\"'md'\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n </button>\n\n @if (hasChildren()) {\n <div class=\"c-menu-item__children\">\n <div class=\"c-menu-item__children-items\">\n @for (child of children(); track child.label) {\n <lib-menu-child-item\n [label]=\"child.label\"\n [disabled]=\"child.disabled || false\"\n [selected]=\"child.selected || false\"\n (clicked)=\"handleChildClick(child)\"\n >\n </lib-menu-child-item>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".c-menu-item{display:flex;align-items:center;gap:var(--space-component-gap-md, .5rem);width:100%;min-height:40px;padding:var(--space-component-padding-none) var(--space-component-padding-sm);border:none;border-radius:var(--size-border-radius-md);background:var(--color-menu-item-background-default);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);text-align:left;color:var(--color-action-neutral-content-default)}.c-menu-item__container,.c-menu-item__children{display:flex;flex-direction:column;width:100%}.c-menu-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-item:disabled{cursor:not-allowed}.c-menu-item:hover:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-hover);color:var(--color-action-neutral-content-hover)}.c-menu-item:active:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-pressed);color:var(--color-action-neutral-content-pressed)}.c-menu-item.c-menu-item--selected{background-color:var(--color-menu-item-parent-background-active);color:var(--color-action-primary-selected-content-default)}.c-menu-item.c-menu-item--selected:hover:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-hover);color:var(--color-action-primary-selected-content-hover)}.c-menu-item.c-menu-item--selected:active:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-pressed);color:var(--color-action-primary-selected-content-pressed)}.c-menu-item.c-menu-item--disabled{color:var(--color-action-neutral-content-disabled);background-color:var(--color-action-neutral-background-disabled)}.c-menu-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.c-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-menu-item__expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--space-component-gap-sm);transition:transform var(--transition-base-duration) var(--transition-base-easing)}.c-menu-item__tag-container,.c-menu-item__right-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-component-gap-sm)}.c-menu-item__tag{flex-shrink:0}.c-menu-item__right-text{margin-left:var(--space-component-gap-sm);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing);color:var(--color-content-default)}.c-menu-item__children{padding-left:var(--size-spacing-4);margin-top:var(--size-spacing-1)}.c-menu-item__children-label{font-size:var(--size-font-sm);font-weight:var(--size-font-weight-medium);color:var(--color-action-neutral-content-default);padding:var(--size-spacing-2) var(--size-spacing-3);margin-bottom:var(--size-spacing-1)}.c-menu-item__children-items{display:flex;flex-direction:column;gap:var(--size-spacing-1)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: MenuChildItemComponent, selector: "lib-menu-child-item", inputs: ["label", "icon", "disabled", "selected"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }] });
|
|
5329
5330
|
}
|
|
5330
5331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
5331
5332
|
type: Component,
|
|
5332
|
-
args: [{ selector: 'lib-menu-item', imports: [NgClass, IconComponent, MenuChildItemComponent, TagComponent], template: "<div class=\"c-menu-item__container\">\n <button\n [ngClass]=\"[\n 'c-menu-item',\n selected() ? 'c-menu-item--selected' : '',\n disabled() ? 'c-menu-item--disabled' : '',\n hasChildren() ? 'c-menu-item--has-children' : '',\n hasChildren() ? 'c-menu-item--expanded' : ''\n ]\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-selected]=\"selected()\"\n [attr.aria-expanded]=\"hasChildren() ? true : null\"\n (click)=\"handleClick()\"\n >\n @if (icon()) {\n <span class=\"c-menu-item__icon\">\n <lib-icon\n [name]=\"computedIcon()\"\n [size]=\"'md'\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n } @if (label()) {\n <span class=\"c-menu-item__label\">{{ label() }}</span>\n } @if (hasTag()) {\n <span class=\"c-menu-item__tag-container\">\n <lib-tag\n [text]=\"tagLabel()\"\n [closeActive]=\"false\"\n [showBadge]=\"false\"\n class=\"c-menu-item__tag\"\n ></lib-tag>\n </span>\n } @if (rightIcon()) {\n <span class=\"c-menu-item__right-icon\">\n <lib-icon [name]=\"rightIcon()\" [size]=\"'md'\"></lib-icon>\n </span>\n } @if (rightText()) {\n <span class=\"c-menu-item__right-text\"> {{ rightText() }} </span>\n } @if (showArrowIcon()) {\n <span class=\"c-menu-item__expand-icon\">\n <lib-icon\n name=\"caretright-regular\"\n [size]=\"'md'\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n </button>\n\n @if (hasChildren()) {\n <div class=\"c-menu-item__children\">\n <div class=\"c-menu-item__children-items\">\n @for (child of children(); track child.label) {\n <lib-menu-child-item\n [label]=\"child.label\"\n [disabled]=\"child.disabled || false\"\n [selected]=\"child.selected || false\"\n (clicked)=\"handleChildClick(child)\"\n >\n </lib-menu-child-item>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".c-menu-item{display:flex;align-items:center;gap:var(--space-component-gap-md, .5rem);width:100%;min-height:40px;padding:var(--space-component-padding-none) var(--space-component-padding-sm);border:none;border-radius:var(--size-border-radius-md);background:var(--color-menu-item-background-default);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);text-align:left;color:var(--color-action-neutral-content-default)}.c-menu-item__container,.c-menu-item__children{display:flex;flex-direction:column;width:100%}.c-menu-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-item:disabled{cursor:not-allowed}.c-menu-item:hover:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-hover);color:var(--color-action-neutral-content-hover)}.c-menu-item:active:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-pressed);color:var(--color-action-neutral-content-pressed)}.c-menu-item.c-menu-item--selected{background-color:var(--color-menu-item-parent-background-active);color:var(--color-action-primary-selected-content-default)}.c-menu-item.c-menu-item--selected:hover:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-hover);color:var(--color-action-primary-selected-content-hover)}.c-menu-item.c-menu-item--selected:active:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-pressed);color:var(--color-action-primary-selected-content-pressed)}.c-menu-item.c-menu-item--disabled{color:var(--color-action-neutral-content-disabled);background-color:var(--color-action-neutral-background-disabled)}.c-menu-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.c-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-menu-item__expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--space-component-gap-sm);transition:transform var(--transition-base-duration) var(--transition-base-easing)}.c-menu-item__tag-container,.c-menu-item__right-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-component-gap-sm)}.c-menu-item__tag{flex-shrink:0}.c-menu-item__right-text{margin-left:var(--space-component-gap-sm);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing);color:var(--color-content-default)}.c-menu-item__children{padding-left:var(--size-spacing-4);margin-top:var(--size-spacing-1)}.c-menu-item__children-label{font-size:var(--size-font-sm);font-weight:var(--size-font-weight-medium);color:var(--color-action-neutral-content-default);padding:var(--size-spacing-2) var(--size-spacing-3);margin-bottom:var(--size-spacing-1)}.c-menu-item__children-items{display:flex;flex-direction:column;gap:var(--size-spacing-1)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
5333
|
+
args: [{ selector: 'lib-menu-item', imports: [NgClass, IconComponent, MenuChildItemComponent, TagComponent], template: "<div class=\"c-menu-item__container\">\n <button\n [ngClass]=\"[\n 'c-menu-item',\n selected() ? 'c-menu-item--selected' : '',\n disabled() ? 'c-menu-item--disabled' : '',\n hasChildren() ? 'c-menu-item--has-children' : '',\n hasChildren() ? 'c-menu-item--expanded' : ''\n ]\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-selected]=\"selected()\"\n [attr.aria-expanded]=\"hasChildren() ? true : null\"\n (click)=\"handleClick()\"\n >\n @if (icon()) {\n <span class=\"c-menu-item__icon\">\n <lib-icon\n [name]=\"computedIcon()\"\n [size]=\"'md'\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n } @if (label()) {\n <span class=\"c-menu-item__label\">{{ label() }}</span>\n } @if (hasTag()) {\n <span class=\"c-menu-item__tag-container\">\n <lib-tag\n [text]=\"tagLabel()\"\n [variant]=\"tagVariant()\"\n [closeActive]=\"false\"\n [showBadge]=\"false\"\n class=\"c-menu-item__tag\"\n ></lib-tag>\n </span>\n } @if (rightIcon()) {\n <span class=\"c-menu-item__right-icon\">\n <lib-icon [name]=\"rightIcon()\" [size]=\"'md'\"></lib-icon>\n </span>\n } @if (rightText()) {\n <span class=\"c-menu-item__right-text\"> {{ rightText() }} </span>\n } @if (showArrowIcon()) {\n <span class=\"c-menu-item__expand-icon\">\n <lib-icon\n name=\"caretright-regular\"\n [size]=\"'md'\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n </button>\n\n @if (hasChildren()) {\n <div class=\"c-menu-item__children\">\n <div class=\"c-menu-item__children-items\">\n @for (child of children(); track child.label) {\n <lib-menu-child-item\n [label]=\"child.label\"\n [disabled]=\"child.disabled || false\"\n [selected]=\"child.selected || false\"\n (clicked)=\"handleChildClick(child)\"\n >\n </lib-menu-child-item>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".c-menu-item{display:flex;align-items:center;gap:var(--space-component-gap-md, .5rem);width:100%;min-height:40px;padding:var(--space-component-padding-none) var(--space-component-padding-sm);border:none;border-radius:var(--size-border-radius-md);background:var(--color-menu-item-background-default);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);text-align:left;color:var(--color-action-neutral-content-default)}.c-menu-item__container,.c-menu-item__children{display:flex;flex-direction:column;width:100%}.c-menu-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-item:disabled{cursor:not-allowed}.c-menu-item:hover:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-hover);color:var(--color-action-neutral-content-hover)}.c-menu-item:active:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-pressed);color:var(--color-action-neutral-content-pressed)}.c-menu-item.c-menu-item--selected{background-color:var(--color-menu-item-parent-background-active);color:var(--color-action-primary-selected-content-default)}.c-menu-item.c-menu-item--selected:hover:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-hover);color:var(--color-action-primary-selected-content-hover)}.c-menu-item.c-menu-item--selected:active:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-pressed);color:var(--color-action-primary-selected-content-pressed)}.c-menu-item.c-menu-item--disabled{color:var(--color-action-neutral-content-disabled);background-color:var(--color-action-neutral-background-disabled)}.c-menu-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.c-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-menu-item__expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--space-component-gap-sm);transition:transform var(--transition-base-duration) var(--transition-base-easing)}.c-menu-item__tag-container,.c-menu-item__right-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-component-gap-sm)}.c-menu-item__tag{flex-shrink:0}.c-menu-item__right-text{margin-left:var(--space-component-gap-sm);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing);color:var(--color-content-default)}.c-menu-item__children{padding-left:var(--size-spacing-4);margin-top:var(--size-spacing-1)}.c-menu-item__children-label{font-size:var(--size-font-sm);font-weight:var(--size-font-weight-medium);color:var(--color-action-neutral-content-default);padding:var(--size-spacing-2) var(--size-spacing-3);margin-bottom:var(--size-spacing-1)}.c-menu-item__children-items{display:flex;flex-direction:column;gap:var(--size-spacing-1)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
5333
5334
|
}] });
|
|
5334
5335
|
|
|
5335
5336
|
class MenuItemSectionComponent {
|
|
@@ -6910,7 +6911,7 @@ class SidebarWithFooterComponent extends BasicSidebarMenuComponent {
|
|
|
6910
6911
|
(clicked)="onSubItemClick(securitySettingsItem)">
|
|
6911
6912
|
</lib-menu-item>
|
|
6912
6913
|
}
|
|
6913
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MenuItemComponent, selector: "lib-menu-item", inputs: ["label", "icon", "disabled", "selected", "showArrowIcon", "tagLabel", "children", "rightIcon", "rightText"], outputs: ["clicked"] }] });
|
|
6914
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MenuItemComponent, selector: "lib-menu-item", inputs: ["label", "icon", "disabled", "selected", "showArrowIcon", "tagLabel", "tagVariant", "children", "rightIcon", "rightText"], outputs: ["clicked"] }] });
|
|
6914
6915
|
}
|
|
6915
6916
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarWithFooterComponent, decorators: [{
|
|
6916
6917
|
type: Component,
|