@crowdfarming/oliva-ds 1.74.0-rc.1 → 1.74.0-rc.2
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.
|
@@ -5242,6 +5242,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
5242
5242
|
args: [{ selector: 'lib-link', imports: [NgClass, IconComponent, RouterLink], template: "@if (!external()) {\n<a\n [ngClass]=\"[\n 'c-link',\n variantClass(),\n sizeClass(),\n weightClass(),\n underlineClass(),\n disabled() ? 'c-link--disabled' : ''\n ]\"\n [routerLink]=\"href()\"\n [queryParams]=\"queryParams()\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link__text\">{{ text() }}</span>\n @if (iconAfter()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n</a>\n} @else {\n<a\n [ngClass]=\"[\n 'c-link',\n variantClass(),\n sizeClass(),\n weightClass(),\n underlineClass(),\n disabled() ? 'c-link--disabled' : ''\n ]\"\n [href]=\"href()\"\n [target]=\"target()\"\n [attr.rel]=\"rel()\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n [attr.aria-label]=\"finalAriaLabel()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link__text\">{{ text() }}</span>\n @if (external()) {\n <span class=\"sr-only\">(opens in a new tab)</span>\n } @if (iconAfter()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n</a>\n}\n", styles: [".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}.c-link{position:relative;display:flex;align-items:center;width:fit-content;gap:var(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-decoration:none;border-radius:var(--size-border-radius-sm);cursor:pointer}.c-link--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link--bold{font-weight:var(--typography-font-weight-bold)}.c-link--underline{text-decoration:underline}.c-link__icon{display:flex;align-items:center}.c-link:hover:not(.c-link--underline){text-decoration:underline}.c-link:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-link--primary{color:var(--color-action-primary-content-default)}.c-link--primary:hover{color:var(--color-action-primary-content-hover)}.c-link--primary:active{color:var(--color-action-primary-content-pressed)}.c-link--neutral{color:var(--color-action-neutral-content-default)}.c-link--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link--neutral:active{color:var(--color-action-neutral-content-pressed)}.c-link--inverse{color:var(--color-action-inverse-content-default)}.c-link--inverse:hover{color:var(--color-action-inverse-content-hover)}.c-link--inverse:active{color:var(--color-action-inverse-content-pressed)}.c-link--danger{color:var(--color-action-danger-content-default)}.c-link--danger:hover{color:var(--color-action-danger-content-hover)}.c-link--danger:active{color:var(--color-action-danger-content-pressed)}.c-link--disabled{cursor:not-allowed}.c-link--disabled:hover{text-decoration:none}.c-link--disabled.c-link--primary{color:var(--color-action-primary-content-disabled)}.c-link--disabled.c-link--neutral{color:var(--color-action-neutral-content-disabled)}.c-link--disabled.c-link--inverse{color:var(--color-action-inverse-content-disabled)}.c-link--disabled.c-link--danger{color:var(--color-action-danger-content-disabled)}\n"] }]
|
|
5243
5243
|
}] });
|
|
5244
5244
|
|
|
5245
|
+
class TagComponent {
|
|
5246
|
+
size = input('xs');
|
|
5247
|
+
variant = input('neutral');
|
|
5248
|
+
text = input('');
|
|
5249
|
+
extraClass = input('');
|
|
5250
|
+
showBadge = input(true);
|
|
5251
|
+
closeActive = input(true);
|
|
5252
|
+
emphasis = input(false);
|
|
5253
|
+
skeletonActive = input(false);
|
|
5254
|
+
closeEvent = output();
|
|
5255
|
+
onClose() {
|
|
5256
|
+
this.closeEvent.emit();
|
|
5257
|
+
}
|
|
5258
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5259
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TagComponent, isStandalone: true, selector: "lib-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, closeActive: { classPropertyName: "closeActive", publicName: "closeActive", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "@if (skeletonActive()) {\n<div class=\"skeleton\"></div>\n} @else {\n<span\n [ngClass]=\"[\n 'c-tag',\n variant() ? 'c-tag--' + variant() : '',\n extraClass() ? extraClass() : '',\n emphasis() ? 'c-tag--emphasis' : '',\n closeActive() ? 'c-tag--close-active' : '',\n size() ? 'c-tag--' + size() : '',\n emphasis() && closeActive() ? 'c-tag--emphasis-close-active' : ''\n ]\"\n>\n @if (showBadge()) {\n <span class=\"c-tag__dot\"></span>\n }\n <span class=\"c-tag__text\">{{ text() }}</span>\n @if (closeActive()) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant()\"\n [loading]=\"false\"\n [disabled]=\"variant() === 'disabled'\"\n [variant]=\"emphasis() ? 'inverse' : 'neutral'\"\n [size]=\"size() === 'xs' ? 'xs' : 'sm'\"\n class=\"c-tag__close\"\n iconName=\"x-regular\"\n (click)=\"onClose()\"\n >\n </lib-button-icon>\n }\n</span>\n}\n", styles: [".c-tag{display:inline-flex;height:1.5rem;max-width:100%;padding:0 var(--space-component-padding-sm);align-items:center;gap:var(--space-component-gap-sm);flex-shrink:0;border-radius:var(--size-border-radius-md);text-align:center;font-family:var(--typography-label-xs-strong-family);font-size:var(--typography-label-xs-strong-size);font-weight:var(--typography-label-xs-strong-weight);line-height:var(--typography-label-xs-strong-line-height);letter-spacing:var(--typography-label-xs-strong-letter-spacing)}.c-tag--sm{height:2rem;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tag__dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.c-tag__text{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag--close-active{padding-right:0}.c-tag--emphasis-close-active{border-top-right-radius:10px;border-bottom-right-radius:10px}.c-tag--danger{background:var(--color-feedback-danger-soft);color:var(--color-feedback-danger-stronger)}.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-stronger)}.c-tag--warning{color:var(--color-feedback-warning-stronger);background:var(--color-feedback-warning-soft)}.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-stronger)}.c-tag--success{color:var(--color-feedback-success-stronger);background:var(--color-feedback-success-soft)}.c-tag--success .c-tag__dot{background:var(--color-feedback-success-stronger)}.c-tag--info{background:var(--color-feedback-info-soft);color:var(--color-feedback-info-stronger)}.c-tag--info .c-tag__dot{background:var(--color-feedback-info-stronger)}.c-tag--neutral{background:var(--color-feedback-neutral-soft);color:var(--color-feedback-neutral-stronger)}.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-stronger)}.c-tag--primary{background:var(--color-decorative-primary-soft);color:var(--color-decorative-primary-stronger)}.c-tag--primary .c-tag__dot{background:var(--color-decorative-primary-stronger)}.c-tag--secondary{background:var(--color-decorative-secondary-soft);color:var(--color-decorative-secondary-stronger)}.c-tag--secondary .c-tag__dot{background:var(--color-decorative-secondary-stronger)}.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--danger{color:var(--color-feedback-danger-subtle);background:var(--color-feedback-danger-default)}.c-tag--emphasis.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-subtle)}.c-tag--emphasis.c-tag--warning{color:var(--color-feedback-warning-subtle);background:var(--color-feedback-warning-default)}.c-tag--emphasis.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-subtle)}.c-tag--emphasis.c-tag--success{color:var(--color-feedback-success-subtle);background:var(--color-feedback-success-default)}.c-tag--emphasis.c-tag--success .c-tag__dot{background:var(--color-feedback-success-subtle)}.c-tag--emphasis.c-tag--info{color:var(--color-feedback-info-subtle);background:var(--color-feedback-info-default)}.c-tag--emphasis.c-tag--info .c-tag__dot{background:var(--color-feedback-info-subtle)}.c-tag--emphasis.c-tag--neutral{color:var(--color-feedback-neutral-subtle);background:var(--color-feedback-neutral-default)}.c-tag--emphasis.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-subtle)}.c-tag--emphasis.c-tag--primary{background:var(--color-decorative-primary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--primary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary{background:var(--color-decorative-secondary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.skeleton{width:4rem;height:1.5rem;background:var(--color-effect-skeleton-soft);border-radius:var(--size-border-radius-md)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
5260
|
+
}
|
|
5261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TagComponent, decorators: [{
|
|
5262
|
+
type: Component,
|
|
5263
|
+
args: [{ selector: 'lib-tag', imports: [NgClass, ButtonIconComponent], template: "@if (skeletonActive()) {\n<div class=\"skeleton\"></div>\n} @else {\n<span\n [ngClass]=\"[\n 'c-tag',\n variant() ? 'c-tag--' + variant() : '',\n extraClass() ? extraClass() : '',\n emphasis() ? 'c-tag--emphasis' : '',\n closeActive() ? 'c-tag--close-active' : '',\n size() ? 'c-tag--' + size() : '',\n emphasis() && closeActive() ? 'c-tag--emphasis-close-active' : ''\n ]\"\n>\n @if (showBadge()) {\n <span class=\"c-tag__dot\"></span>\n }\n <span class=\"c-tag__text\">{{ text() }}</span>\n @if (closeActive()) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant()\"\n [loading]=\"false\"\n [disabled]=\"variant() === 'disabled'\"\n [variant]=\"emphasis() ? 'inverse' : 'neutral'\"\n [size]=\"size() === 'xs' ? 'xs' : 'sm'\"\n class=\"c-tag__close\"\n iconName=\"x-regular\"\n (click)=\"onClose()\"\n >\n </lib-button-icon>\n }\n</span>\n}\n", styles: [".c-tag{display:inline-flex;height:1.5rem;max-width:100%;padding:0 var(--space-component-padding-sm);align-items:center;gap:var(--space-component-gap-sm);flex-shrink:0;border-radius:var(--size-border-radius-md);text-align:center;font-family:var(--typography-label-xs-strong-family);font-size:var(--typography-label-xs-strong-size);font-weight:var(--typography-label-xs-strong-weight);line-height:var(--typography-label-xs-strong-line-height);letter-spacing:var(--typography-label-xs-strong-letter-spacing)}.c-tag--sm{height:2rem;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tag__dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.c-tag__text{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag--close-active{padding-right:0}.c-tag--emphasis-close-active{border-top-right-radius:10px;border-bottom-right-radius:10px}.c-tag--danger{background:var(--color-feedback-danger-soft);color:var(--color-feedback-danger-stronger)}.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-stronger)}.c-tag--warning{color:var(--color-feedback-warning-stronger);background:var(--color-feedback-warning-soft)}.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-stronger)}.c-tag--success{color:var(--color-feedback-success-stronger);background:var(--color-feedback-success-soft)}.c-tag--success .c-tag__dot{background:var(--color-feedback-success-stronger)}.c-tag--info{background:var(--color-feedback-info-soft);color:var(--color-feedback-info-stronger)}.c-tag--info .c-tag__dot{background:var(--color-feedback-info-stronger)}.c-tag--neutral{background:var(--color-feedback-neutral-soft);color:var(--color-feedback-neutral-stronger)}.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-stronger)}.c-tag--primary{background:var(--color-decorative-primary-soft);color:var(--color-decorative-primary-stronger)}.c-tag--primary .c-tag__dot{background:var(--color-decorative-primary-stronger)}.c-tag--secondary{background:var(--color-decorative-secondary-soft);color:var(--color-decorative-secondary-stronger)}.c-tag--secondary .c-tag__dot{background:var(--color-decorative-secondary-stronger)}.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--danger{color:var(--color-feedback-danger-subtle);background:var(--color-feedback-danger-default)}.c-tag--emphasis.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-subtle)}.c-tag--emphasis.c-tag--warning{color:var(--color-feedback-warning-subtle);background:var(--color-feedback-warning-default)}.c-tag--emphasis.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-subtle)}.c-tag--emphasis.c-tag--success{color:var(--color-feedback-success-subtle);background:var(--color-feedback-success-default)}.c-tag--emphasis.c-tag--success .c-tag__dot{background:var(--color-feedback-success-subtle)}.c-tag--emphasis.c-tag--info{color:var(--color-feedback-info-subtle);background:var(--color-feedback-info-default)}.c-tag--emphasis.c-tag--info .c-tag__dot{background:var(--color-feedback-info-subtle)}.c-tag--emphasis.c-tag--neutral{color:var(--color-feedback-neutral-subtle);background:var(--color-feedback-neutral-default)}.c-tag--emphasis.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-subtle)}.c-tag--emphasis.c-tag--primary{background:var(--color-decorative-primary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--primary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary{background:var(--color-decorative-secondary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.skeleton{width:4rem;height:1.5rem;background:var(--color-effect-skeleton-soft);border-radius:var(--size-border-radius-md)}\n"] }]
|
|
5264
|
+
}] });
|
|
5265
|
+
|
|
5245
5266
|
class MenuChildItemComponent {
|
|
5246
5267
|
label = input('');
|
|
5247
5268
|
icon = input('');
|
|
@@ -5270,27 +5291,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
5270
5291
|
args: [{ selector: 'lib-menu-child-item', imports: [NgClass], template: "<button\n [ngClass]=\"[\n 'c-menu-child-item',\n selected() ? 'c-menu-child-item--selected' : '',\n disabled() ? 'c-menu-child-item--disabled' : ''\n ]\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-selected]=\"selected()\"\n (click)=\"handleClick()\"\n>\n @if (label()) {\n <span class=\"c-menu-child-item__label\">{{ label() }}</span>\n }\n</button>\n", styles: [".c-menu-child-item{display:flex;align-items:center;width:100%;min-height:40px;padding:var(--space-component-padding-none, 0) var(--space-component-padding-sm, 8px) var(--space-component-padding-none) var(--space-component-padding-2xl);border:none;background:var(--color-menu-item-background-default);cursor:pointer;font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-action-neutral-content-default);text-align:left;transition:all var(--transition-base-duration) var(--transition-base-easing);border-radius:var(--size-border-radius-md)}.c-menu-child-item:hover:not(:disabled){background-color:var(--color-menu-item-background-hover)}.c-menu-child-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-child-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--space-component-padding-lg)}.c-menu-child-item--selected{background:var(--color-menu-item-child-background-active);color:var(--color-core-content-default)}.c-menu-child-item--selected:hover{background-color:var(--color-action-primary-background-selected-hover)}.c-menu-child-item--selected:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-child-item--disabled{cursor:not-allowed;color:var(--color-menu-item-content-disabled)}.c-menu-child-item--disabled:hover{background-color:transparent}\n"] }]
|
|
5271
5292
|
}] });
|
|
5272
5293
|
|
|
5273
|
-
class TagComponent {
|
|
5274
|
-
size = input('xs');
|
|
5275
|
-
variant = input('neutral');
|
|
5276
|
-
text = input('');
|
|
5277
|
-
extraClass = input('');
|
|
5278
|
-
showBadge = input(true);
|
|
5279
|
-
closeActive = input(true);
|
|
5280
|
-
emphasis = input(false);
|
|
5281
|
-
skeletonActive = input(false);
|
|
5282
|
-
closeEvent = output();
|
|
5283
|
-
onClose() {
|
|
5284
|
-
this.closeEvent.emit();
|
|
5285
|
-
}
|
|
5286
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5287
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TagComponent, isStandalone: true, selector: "lib-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, closeActive: { classPropertyName: "closeActive", publicName: "closeActive", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "@if (skeletonActive()) {\n<div class=\"skeleton\"></div>\n} @else {\n<span\n [ngClass]=\"[\n 'c-tag',\n variant() ? 'c-tag--' + variant() : '',\n extraClass() ? extraClass() : '',\n emphasis() ? 'c-tag--emphasis' : '',\n closeActive() ? 'c-tag--close-active' : '',\n size() ? 'c-tag--' + size() : '',\n emphasis() && closeActive() ? 'c-tag--emphasis-close-active' : ''\n ]\"\n>\n @if (showBadge()) {\n <span class=\"c-tag__dot\"></span>\n }\n <span class=\"c-tag__text\">{{ text() }}</span>\n @if (closeActive()) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant()\"\n [loading]=\"false\"\n [disabled]=\"variant() === 'disabled'\"\n [variant]=\"emphasis() ? 'inverse' : 'neutral'\"\n [size]=\"size() === 'xs' ? 'xs' : 'sm'\"\n class=\"c-tag__close\"\n iconName=\"x-regular\"\n (click)=\"onClose()\"\n >\n </lib-button-icon>\n }\n</span>\n}\n", styles: [".c-tag{display:inline-flex;height:1.5rem;max-width:100%;padding:0 var(--space-component-padding-sm);align-items:center;gap:var(--space-component-gap-sm);flex-shrink:0;border-radius:var(--size-border-radius-md);text-align:center;font-family:var(--typography-label-xs-strong-family);font-size:var(--typography-label-xs-strong-size);font-weight:var(--typography-label-xs-strong-weight);line-height:var(--typography-label-xs-strong-line-height);letter-spacing:var(--typography-label-xs-strong-letter-spacing)}.c-tag--sm{height:2rem;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tag__dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.c-tag__text{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag--close-active{padding-right:0}.c-tag--emphasis-close-active{border-top-right-radius:10px;border-bottom-right-radius:10px}.c-tag--danger{background:var(--color-feedback-danger-soft);color:var(--color-feedback-danger-stronger)}.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-stronger)}.c-tag--warning{color:var(--color-feedback-warning-stronger);background:var(--color-feedback-warning-soft)}.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-stronger)}.c-tag--success{color:var(--color-feedback-success-stronger);background:var(--color-feedback-success-soft)}.c-tag--success .c-tag__dot{background:var(--color-feedback-success-stronger)}.c-tag--info{background:var(--color-feedback-info-soft);color:var(--color-feedback-info-stronger)}.c-tag--info .c-tag__dot{background:var(--color-feedback-info-stronger)}.c-tag--neutral{background:var(--color-feedback-neutral-soft);color:var(--color-feedback-neutral-stronger)}.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-stronger)}.c-tag--primary{background:var(--color-decorative-primary-soft);color:var(--color-decorative-primary-stronger)}.c-tag--primary .c-tag__dot{background:var(--color-decorative-primary-stronger)}.c-tag--secondary{background:var(--color-decorative-secondary-soft);color:var(--color-decorative-secondary-stronger)}.c-tag--secondary .c-tag__dot{background:var(--color-decorative-secondary-stronger)}.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--danger{color:var(--color-feedback-danger-subtle);background:var(--color-feedback-danger-default)}.c-tag--emphasis.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-subtle)}.c-tag--emphasis.c-tag--warning{color:var(--color-feedback-warning-subtle);background:var(--color-feedback-warning-default)}.c-tag--emphasis.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-subtle)}.c-tag--emphasis.c-tag--success{color:var(--color-feedback-success-subtle);background:var(--color-feedback-success-default)}.c-tag--emphasis.c-tag--success .c-tag__dot{background:var(--color-feedback-success-subtle)}.c-tag--emphasis.c-tag--info{color:var(--color-feedback-info-subtle);background:var(--color-feedback-info-default)}.c-tag--emphasis.c-tag--info .c-tag__dot{background:var(--color-feedback-info-subtle)}.c-tag--emphasis.c-tag--neutral{color:var(--color-feedback-neutral-subtle);background:var(--color-feedback-neutral-default)}.c-tag--emphasis.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-subtle)}.c-tag--emphasis.c-tag--primary{background:var(--color-decorative-primary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--primary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary{background:var(--color-decorative-secondary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.skeleton{width:4rem;height:1.5rem;background:var(--color-effect-skeleton-soft);border-radius:var(--size-border-radius-md)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
5288
|
-
}
|
|
5289
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TagComponent, decorators: [{
|
|
5290
|
-
type: Component,
|
|
5291
|
-
args: [{ selector: 'lib-tag', imports: [NgClass, ButtonIconComponent], template: "@if (skeletonActive()) {\n<div class=\"skeleton\"></div>\n} @else {\n<span\n [ngClass]=\"[\n 'c-tag',\n variant() ? 'c-tag--' + variant() : '',\n extraClass() ? extraClass() : '',\n emphasis() ? 'c-tag--emphasis' : '',\n closeActive() ? 'c-tag--close-active' : '',\n size() ? 'c-tag--' + size() : '',\n emphasis() && closeActive() ? 'c-tag--emphasis-close-active' : ''\n ]\"\n>\n @if (showBadge()) {\n <span class=\"c-tag__dot\"></span>\n }\n <span class=\"c-tag__text\">{{ text() }}</span>\n @if (closeActive()) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant()\"\n [loading]=\"false\"\n [disabled]=\"variant() === 'disabled'\"\n [variant]=\"emphasis() ? 'inverse' : 'neutral'\"\n [size]=\"size() === 'xs' ? 'xs' : 'sm'\"\n class=\"c-tag__close\"\n iconName=\"x-regular\"\n (click)=\"onClose()\"\n >\n </lib-button-icon>\n }\n</span>\n}\n", styles: [".c-tag{display:inline-flex;height:1.5rem;max-width:100%;padding:0 var(--space-component-padding-sm);align-items:center;gap:var(--space-component-gap-sm);flex-shrink:0;border-radius:var(--size-border-radius-md);text-align:center;font-family:var(--typography-label-xs-strong-family);font-size:var(--typography-label-xs-strong-size);font-weight:var(--typography-label-xs-strong-weight);line-height:var(--typography-label-xs-strong-line-height);letter-spacing:var(--typography-label-xs-strong-letter-spacing)}.c-tag--sm{height:2rem;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tag__dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.c-tag__text{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag--close-active{padding-right:0}.c-tag--emphasis-close-active{border-top-right-radius:10px;border-bottom-right-radius:10px}.c-tag--danger{background:var(--color-feedback-danger-soft);color:var(--color-feedback-danger-stronger)}.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-stronger)}.c-tag--warning{color:var(--color-feedback-warning-stronger);background:var(--color-feedback-warning-soft)}.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-stronger)}.c-tag--success{color:var(--color-feedback-success-stronger);background:var(--color-feedback-success-soft)}.c-tag--success .c-tag__dot{background:var(--color-feedback-success-stronger)}.c-tag--info{background:var(--color-feedback-info-soft);color:var(--color-feedback-info-stronger)}.c-tag--info .c-tag__dot{background:var(--color-feedback-info-stronger)}.c-tag--neutral{background:var(--color-feedback-neutral-soft);color:var(--color-feedback-neutral-stronger)}.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-stronger)}.c-tag--primary{background:var(--color-decorative-primary-soft);color:var(--color-decorative-primary-stronger)}.c-tag--primary .c-tag__dot{background:var(--color-decorative-primary-stronger)}.c-tag--secondary{background:var(--color-decorative-secondary-soft);color:var(--color-decorative-secondary-stronger)}.c-tag--secondary .c-tag__dot{background:var(--color-decorative-secondary-stronger)}.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--danger{color:var(--color-feedback-danger-subtle);background:var(--color-feedback-danger-default)}.c-tag--emphasis.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-subtle)}.c-tag--emphasis.c-tag--warning{color:var(--color-feedback-warning-subtle);background:var(--color-feedback-warning-default)}.c-tag--emphasis.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-subtle)}.c-tag--emphasis.c-tag--success{color:var(--color-feedback-success-subtle);background:var(--color-feedback-success-default)}.c-tag--emphasis.c-tag--success .c-tag__dot{background:var(--color-feedback-success-subtle)}.c-tag--emphasis.c-tag--info{color:var(--color-feedback-info-subtle);background:var(--color-feedback-info-default)}.c-tag--emphasis.c-tag--info .c-tag__dot{background:var(--color-feedback-info-subtle)}.c-tag--emphasis.c-tag--neutral{color:var(--color-feedback-neutral-subtle);background:var(--color-feedback-neutral-default)}.c-tag--emphasis.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-subtle)}.c-tag--emphasis.c-tag--primary{background:var(--color-decorative-primary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--primary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary{background:var(--color-decorative-secondary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.skeleton{width:4rem;height:1.5rem;background:var(--color-effect-skeleton-soft);border-radius:var(--size-border-radius-md)}\n"] }]
|
|
5292
|
-
}] });
|
|
5293
|
-
|
|
5294
5294
|
class MenuItemComponent {
|
|
5295
5295
|
label = input('');
|
|
5296
5296
|
icon = input('');
|
|
@@ -5299,6 +5299,8 @@ class MenuItemComponent {
|
|
|
5299
5299
|
showArrowIcon = input(true);
|
|
5300
5300
|
tagLabel = input('');
|
|
5301
5301
|
children = input([]);
|
|
5302
|
+
rightIcon = input('');
|
|
5303
|
+
rightText = input('');
|
|
5302
5304
|
hasChildren = computed(() => this.children().length > 0);
|
|
5303
5305
|
hasTag = computed(() => this.tagLabel().trim().length > 0);
|
|
5304
5306
|
clicked = output();
|
|
@@ -5323,11 +5325,11 @@ class MenuItemComponent {
|
|
|
5323
5325
|
return 'action-neutral-content-default';
|
|
5324
5326
|
});
|
|
5325
5327
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5326
|
-
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 } }, 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
|
|
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"] }] });
|
|
5327
5329
|
}
|
|
5328
5330
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
5329
5331
|
type: Component,
|
|
5330
|
-
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
|
|
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"] }]
|
|
5331
5333
|
}] });
|
|
5332
5334
|
|
|
5333
5335
|
class MenuItemSectionComponent {
|
|
@@ -6908,7 +6910,7 @@ class SidebarWithFooterComponent extends BasicSidebarMenuComponent {
|
|
|
6908
6910
|
(clicked)="onSubItemClick(securitySettingsItem)">
|
|
6909
6911
|
</lib-menu-item>
|
|
6910
6912
|
}
|
|
6911
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MenuItemComponent, selector: "lib-menu-item", inputs: ["label", "icon", "disabled", "selected", "showArrowIcon", "tagLabel", "children"], outputs: ["clicked"] }] });
|
|
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"] }] });
|
|
6912
6914
|
}
|
|
6913
6915
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarWithFooterComponent, decorators: [{
|
|
6914
6916
|
type: Component,
|