@crowdfarming/oliva-ds 1.31.0 → 1.32.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.
- package/fesm2022/crowdfarming-oliva-ds.mjs +49 -48
- package/fesm2022/crowdfarming-oliva-ds.mjs.map +1 -1
- package/lib/arrows/src/lib/arrows/arrows.component.d.ts +2 -2
- package/lib/breadcrumb/src/lib/breadcrumb/breadcrumb.component.d.ts +8 -11
- package/lib/toast/src/lib/toast/toast.component.d.ts +3 -2
- package/package.json +1 -1
|
@@ -3,12 +3,13 @@ import { Input, Component, EventEmitter, Output, input, computed, output, signal
|
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgClass, isPlatformBrowser, NgStyle, NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
6
|
-
import * as i1$2 from '@angular/
|
|
6
|
+
import * as i1$2 from '@angular/router';
|
|
7
|
+
import { RouterModule, Router, NavigationStart, RouterLink } from '@angular/router';
|
|
8
|
+
import * as i1$3 from '@angular/forms';
|
|
7
9
|
import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
|
|
8
10
|
import { TemplatePortal, DomPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/portal';
|
|
9
11
|
import { FocusTrapFactory } from '@angular/cdk/a11y';
|
|
10
|
-
import
|
|
11
|
-
import * as i1$3 from '@angular/cdk/overlay';
|
|
12
|
+
import * as i1$4 from '@angular/cdk/overlay';
|
|
12
13
|
|
|
13
14
|
// Auto-generated icons from Figma
|
|
14
15
|
// This file is automatically generated by the icons.js script
|
|
@@ -2535,14 +2536,16 @@ class ArrowsComponent {
|
|
|
2535
2536
|
leftActive = signal(false);
|
|
2536
2537
|
rightHovered = signal(false);
|
|
2537
2538
|
rightActive = signal(false);
|
|
2538
|
-
onLeftClick() {
|
|
2539
|
+
onLeftClick(event) {
|
|
2539
2540
|
if (!this.leftDisabled()) {
|
|
2540
2541
|
this.leftClick.emit();
|
|
2542
|
+
event.stopPropagation();
|
|
2541
2543
|
}
|
|
2542
2544
|
}
|
|
2543
|
-
onRightClick() {
|
|
2545
|
+
onRightClick(event) {
|
|
2544
2546
|
if (!this.rightDisabled()) {
|
|
2545
2547
|
this.rightClick.emit();
|
|
2548
|
+
event.stopPropagation();
|
|
2546
2549
|
}
|
|
2547
2550
|
}
|
|
2548
2551
|
classes = computed(() => {
|
|
@@ -2616,11 +2619,11 @@ class ArrowsComponent {
|
|
|
2616
2619
|
this.rightActive.set(false);
|
|
2617
2620
|
}
|
|
2618
2621
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ArrowsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2619
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: ArrowsComponent, isStandalone: true, selector: "lib-arrows", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, leftDisabled: { classPropertyName: "leftDisabled", publicName: "leftDisabled", isSignal: true, isRequired: false, transformFunction: null }, rightDisabled: { classPropertyName: "rightDisabled", publicName: "rightDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftClick: "leftClick", rightClick: "rightClick" }, ngImport: i0, template: "<div [ngClass]=\"classes()\">\n <button\n [disabled]=\"leftDisabled()\"\n type=\"button\"\n class=\"c-arrows__button c-arrows__button--left\"\n aria-label=\"Previous\"\n (click)=\"onLeftClick()\"\n (mouseenter)=\"onLeftMouseEnter()\"\n (mouseleave)=\"onLeftMouseLeave()\"\n (mousedown)=\"onLeftMouseDown()\"\n (mouseup)=\"onLeftMouseUp()\"\n >\n <lib-icon\n name=\"caretleft-regular\"\n [size]=\"'sm'\"\n [color]=\"leftIconColor()\"\n ></lib-icon>\n </button>\n\n <button\n [disabled]=\"rightDisabled()\"\n type=\"button\"\n class=\"c-arrows__button c-arrows__button--right\"\n aria-label=\"Next\"\n (click)=\"onRightClick()\"\n (mouseenter)=\"onRightMouseEnter()\"\n (mouseleave)=\"onRightMouseLeave()\"\n (mousedown)=\"onRightMouseDown()\"\n (mouseup)=\"onRightMouseUp()\"\n >\n <lib-icon\n name=\"caretright-regular\"\n [size]=\"'sm'\"\n [color]=\"rightIconColor()\"\n ></lib-icon>\n </button>\n</div>\n", styles: [".c-arrows{display:flex;align-items:center;gap:var(--space-component-gap-lg)}.c-arrows__button{display:flex;align-items:center;justify-content:center;border-radius:var(--size-border-radius-full);border:var(--size-button-border-width) solid var(--color-action-neutral-border-default);background-color:var(--color-button-neutral-background-default);cursor:pointer;padding:var(--space-component-padding-sm)}.c-arrows__button:hover{background-color:var(--color-button-neutral-background-hover);border-color:var(--color-action-neutral-border-hover)}.c-arrows__button:active{background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-action-neutral-border-pressed)}.c-arrows__button:disabled{opacity:.32;background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-action-neutral-border-disabled);cursor:not-allowed}.c-arrows__button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-arrows--floating .c-arrows__button{box-shadow:var(--elevation-floating);background-color:var(--color-button-neutral-floating-background-default);border:none}.c-arrows--floating .c-arrows__button:hover{background-color:var(--color-button-neutral-floating-background-hover)}.c-arrows--floating .c-arrows__button:active{background-color:var(--color-button-neutral-floating-background-pressed)}.c-arrows--floating .c-arrows__button:disabled{background-color:var(--color-button-neutral-floating-background-disabled)}.c-arrows--floating .c-arrows__button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-arrows--full-width{width:100%;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
2622
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: ArrowsComponent, isStandalone: true, selector: "lib-arrows", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, leftDisabled: { classPropertyName: "leftDisabled", publicName: "leftDisabled", isSignal: true, isRequired: false, transformFunction: null }, rightDisabled: { classPropertyName: "rightDisabled", publicName: "rightDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftClick: "leftClick", rightClick: "rightClick" }, ngImport: i0, template: "<div [ngClass]=\"classes()\">\n <button\n [disabled]=\"leftDisabled()\"\n type=\"button\"\n class=\"c-arrows__button c-arrows__button--left\"\n aria-label=\"Previous\"\n (click)=\"onLeftClick($event)\"\n (mouseenter)=\"onLeftMouseEnter()\"\n (mouseleave)=\"onLeftMouseLeave()\"\n (mousedown)=\"onLeftMouseDown()\"\n (mouseup)=\"onLeftMouseUp()\"\n >\n <lib-icon\n name=\"caretleft-regular\"\n [size]=\"'sm'\"\n [color]=\"leftIconColor()\"\n ></lib-icon>\n </button>\n\n <button\n [disabled]=\"rightDisabled()\"\n type=\"button\"\n class=\"c-arrows__button c-arrows__button--right\"\n aria-label=\"Next\"\n (click)=\"onRightClick($event)\"\n (mouseenter)=\"onRightMouseEnter()\"\n (mouseleave)=\"onRightMouseLeave()\"\n (mousedown)=\"onRightMouseDown()\"\n (mouseup)=\"onRightMouseUp()\"\n >\n <lib-icon\n name=\"caretright-regular\"\n [size]=\"'sm'\"\n [color]=\"rightIconColor()\"\n ></lib-icon>\n </button>\n</div>\n", styles: [".c-arrows{display:flex;align-items:center;gap:var(--space-component-gap-lg);pointer-events:none}.c-arrows__button{display:flex;align-items:center;justify-content:center;border-radius:var(--size-border-radius-full);border:var(--size-button-border-width) solid var(--color-action-neutral-border-default);background-color:var(--color-button-neutral-background-default);cursor:pointer;padding:var(--space-component-padding-sm);pointer-events:auto}.c-arrows__button:hover{background-color:var(--color-button-neutral-background-hover);border-color:var(--color-action-neutral-border-hover)}.c-arrows__button:active{background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-action-neutral-border-pressed)}.c-arrows__button:disabled{opacity:.32;background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-action-neutral-border-disabled);cursor:not-allowed}.c-arrows__button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-arrows--floating .c-arrows__button{box-shadow:var(--elevation-floating);background-color:var(--color-button-neutral-floating-background-default);border:none}.c-arrows--floating .c-arrows__button:hover{background-color:var(--color-button-neutral-floating-background-hover)}.c-arrows--floating .c-arrows__button:active{background-color:var(--color-button-neutral-floating-background-pressed)}.c-arrows--floating .c-arrows__button:disabled{background-color:var(--color-button-neutral-floating-background-disabled)}.c-arrows--floating .c-arrows__button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-arrows--full-width{width:100%;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
2620
2623
|
}
|
|
2621
2624
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ArrowsComponent, decorators: [{
|
|
2622
2625
|
type: Component,
|
|
2623
|
-
args: [{ selector: 'lib-arrows', imports: [NgClass, IconComponent], template: "<div [ngClass]=\"classes()\">\n <button\n [disabled]=\"leftDisabled()\"\n type=\"button\"\n class=\"c-arrows__button c-arrows__button--left\"\n aria-label=\"Previous\"\n (click)=\"onLeftClick()\"\n (mouseenter)=\"onLeftMouseEnter()\"\n (mouseleave)=\"onLeftMouseLeave()\"\n (mousedown)=\"onLeftMouseDown()\"\n (mouseup)=\"onLeftMouseUp()\"\n >\n <lib-icon\n name=\"caretleft-regular\"\n [size]=\"'sm'\"\n [color]=\"leftIconColor()\"\n ></lib-icon>\n </button>\n\n <button\n [disabled]=\"rightDisabled()\"\n type=\"button\"\n class=\"c-arrows__button c-arrows__button--right\"\n aria-label=\"Next\"\n (click)=\"onRightClick()\"\n (mouseenter)=\"onRightMouseEnter()\"\n (mouseleave)=\"onRightMouseLeave()\"\n (mousedown)=\"onRightMouseDown()\"\n (mouseup)=\"onRightMouseUp()\"\n >\n <lib-icon\n name=\"caretright-regular\"\n [size]=\"'sm'\"\n [color]=\"rightIconColor()\"\n ></lib-icon>\n </button>\n</div>\n", styles: [".c-arrows{display:flex;align-items:center;gap:var(--space-component-gap-lg)}.c-arrows__button{display:flex;align-items:center;justify-content:center;border-radius:var(--size-border-radius-full);border:var(--size-button-border-width) solid var(--color-action-neutral-border-default);background-color:var(--color-button-neutral-background-default);cursor:pointer;padding:var(--space-component-padding-sm)}.c-arrows__button:hover{background-color:var(--color-button-neutral-background-hover);border-color:var(--color-action-neutral-border-hover)}.c-arrows__button:active{background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-action-neutral-border-pressed)}.c-arrows__button:disabled{opacity:.32;background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-action-neutral-border-disabled);cursor:not-allowed}.c-arrows__button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-arrows--floating .c-arrows__button{box-shadow:var(--elevation-floating);background-color:var(--color-button-neutral-floating-background-default);border:none}.c-arrows--floating .c-arrows__button:hover{background-color:var(--color-button-neutral-floating-background-hover)}.c-arrows--floating .c-arrows__button:active{background-color:var(--color-button-neutral-floating-background-pressed)}.c-arrows--floating .c-arrows__button:disabled{background-color:var(--color-button-neutral-floating-background-disabled)}.c-arrows--floating .c-arrows__button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-arrows--full-width{width:100%;justify-content:space-between}\n"] }]
|
|
2626
|
+
args: [{ selector: 'lib-arrows', imports: [NgClass, IconComponent], template: "<div [ngClass]=\"classes()\">\n <button\n [disabled]=\"leftDisabled()\"\n type=\"button\"\n class=\"c-arrows__button c-arrows__button--left\"\n aria-label=\"Previous\"\n (click)=\"onLeftClick($event)\"\n (mouseenter)=\"onLeftMouseEnter()\"\n (mouseleave)=\"onLeftMouseLeave()\"\n (mousedown)=\"onLeftMouseDown()\"\n (mouseup)=\"onLeftMouseUp()\"\n >\n <lib-icon\n name=\"caretleft-regular\"\n [size]=\"'sm'\"\n [color]=\"leftIconColor()\"\n ></lib-icon>\n </button>\n\n <button\n [disabled]=\"rightDisabled()\"\n type=\"button\"\n class=\"c-arrows__button c-arrows__button--right\"\n aria-label=\"Next\"\n (click)=\"onRightClick($event)\"\n (mouseenter)=\"onRightMouseEnter()\"\n (mouseleave)=\"onRightMouseLeave()\"\n (mousedown)=\"onRightMouseDown()\"\n (mouseup)=\"onRightMouseUp()\"\n >\n <lib-icon\n name=\"caretright-regular\"\n [size]=\"'sm'\"\n [color]=\"rightIconColor()\"\n ></lib-icon>\n </button>\n</div>\n", styles: [".c-arrows{display:flex;align-items:center;gap:var(--space-component-gap-lg);pointer-events:none}.c-arrows__button{display:flex;align-items:center;justify-content:center;border-radius:var(--size-border-radius-full);border:var(--size-button-border-width) solid var(--color-action-neutral-border-default);background-color:var(--color-button-neutral-background-default);cursor:pointer;padding:var(--space-component-padding-sm);pointer-events:auto}.c-arrows__button:hover{background-color:var(--color-button-neutral-background-hover);border-color:var(--color-action-neutral-border-hover)}.c-arrows__button:active{background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-action-neutral-border-pressed)}.c-arrows__button:disabled{opacity:.32;background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-action-neutral-border-disabled);cursor:not-allowed}.c-arrows__button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-arrows--floating .c-arrows__button{box-shadow:var(--elevation-floating);background-color:var(--color-button-neutral-floating-background-default);border:none}.c-arrows--floating .c-arrows__button:hover{background-color:var(--color-button-neutral-floating-background-hover)}.c-arrows--floating .c-arrows__button:active{background-color:var(--color-button-neutral-floating-background-pressed)}.c-arrows--floating .c-arrows__button:disabled{background-color:var(--color-button-neutral-floating-background-disabled)}.c-arrows--floating .c-arrows__button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-arrows--full-width{width:100%;justify-content:space-between}\n"] }]
|
|
2624
2627
|
}] });
|
|
2625
2628
|
|
|
2626
2629
|
class AvatarComponent {
|
|
@@ -2650,31 +2653,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2650
2653
|
args: [{ selector: 'lib-badge', imports: [NgClass], template: "<span\n [ngClass]=\"[\n 'c-badge',\n showText() ? 'c-badge--text' : '',\n extraClass() ? extraClass() : '',\n strokeEnabled() ? 'c-badge--stroke' : ''\n ]\"\n>\n @if (showText() && text()) {\n {{ text() }}\n }\n</span>\n", styles: [".c-badge{border-radius:var(--size-border-radius-full);background:var(--color-feedback-danger-default);display:flex;width:.5rem;height:.5rem;flex-direction:column;justify-content:center;align-items:center;flex-shrink:0;color:var(--color-core-content-inverse);text-align:center;font-family:var(--typography-label-xs-strong-family);font-size:var(--typography-label-xs-strong-size);font-style:normal;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-badge--text{width:1.25rem;height:1.25rem}.c-badge--stroke{border:var(--size-border-width-md) solid var(--color-core-content-inverse)}\n"] }]
|
|
2651
2654
|
}] });
|
|
2652
2655
|
|
|
2653
|
-
// breadcrumb.component.ts
|
|
2654
2656
|
class BreadcrumbComponent {
|
|
2655
|
-
items = [];
|
|
2656
|
-
crumbClick =
|
|
2657
|
-
leadingItems =
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
this.leadingItems = [...all];
|
|
2669
|
-
this.hiddenItems = [];
|
|
2670
|
-
this.trailingItems = [];
|
|
2657
|
+
items = input([]);
|
|
2658
|
+
crumbClick = output();
|
|
2659
|
+
leadingItems = computed(() => {
|
|
2660
|
+
const all = this.items();
|
|
2661
|
+
if (all.length <= 5) {
|
|
2662
|
+
return [...all];
|
|
2663
|
+
}
|
|
2664
|
+
return all.slice(0, 2);
|
|
2665
|
+
});
|
|
2666
|
+
hiddenItems = computed(() => {
|
|
2667
|
+
const all = this.items();
|
|
2668
|
+
if (all.length <= 5) {
|
|
2669
|
+
return [];
|
|
2671
2670
|
}
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
|
|
2671
|
+
return all.slice(2, all.length - 2);
|
|
2672
|
+
});
|
|
2673
|
+
trailingItems = computed(() => {
|
|
2674
|
+
const all = this.items();
|
|
2675
|
+
if (all.length <= 5) {
|
|
2676
|
+
return [];
|
|
2676
2677
|
}
|
|
2677
|
-
|
|
2678
|
+
return all.slice(all.length - 2);
|
|
2679
|
+
});
|
|
2678
2680
|
onCrumbClick(item, event) {
|
|
2679
2681
|
if (!item.url) {
|
|
2680
2682
|
event.preventDefault();
|
|
@@ -2682,20 +2684,16 @@ class BreadcrumbComponent {
|
|
|
2682
2684
|
}
|
|
2683
2685
|
}
|
|
2684
2686
|
isLast(item) {
|
|
2685
|
-
const all = this.items;
|
|
2687
|
+
const all = this.items();
|
|
2686
2688
|
return all.length > 0 && item === all[all.length - 1];
|
|
2687
2689
|
}
|
|
2688
2690
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2689
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: BreadcrumbComponent, isStandalone: true, selector: "lib-breadcrumb", inputs: { items: "items" }, outputs: { crumbClick: "crumbClick" },
|
|
2691
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: BreadcrumbComponent, isStandalone: true, selector: "lib-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { crumbClick: "crumbClick" }, ngImport: i0, template: "<!-- breadcrumb.component.html -->\n<nav class=\"c-breadcrumb\" role=\"navigation\" aria-label=\"Breadcrumb\">\n <ul class=\"c-breadcrumb__list\">\n @for (crumb of leadingItems(); track crumb.label) {\n <li class=\"c-breadcrumb__item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span\n class=\"c-breadcrumb__link\"\n (click)=\"onCrumbClick(crumb, $event)\"\n (keyup.enter)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n tabindex=\"0\"\n role=\"button\"\n >{{ crumb.label }}</span\n >\n } @if (!isLast(crumb)) {\n <span class=\"c-breadcrumb__divider\">/</span>\n }\n </li>\n } @if (hiddenItems().length > 0) {\n <li class=\"c-breadcrumb__item c-breadcrumb__item--ellipsis\">\n <span\n class=\"c-breadcrumb__ellipsis\"\n tabindex=\"0\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n <lib-icon name=\"dotsthree-regular\" size=\"sm\" iconBefore />\n </span>\n <ul class=\"c-breadcrumb__popover\" role=\"menu\">\n @for (crumb of hiddenItems(); track crumb.label) {\n <li class=\"c-breadcrumb__popover-item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span\n class=\"c-breadcrumb__link\"\n (click)=\"onCrumbClick(crumb, $event)\"\n (keyup.enter)=\"onCrumbClick(crumb, $event)\"\n tabindex=\"0\"\n role=\"button\"\n >{{ crumb.label }}</span\n >\n }\n </li>\n }\n </ul>\n <span class=\"c-breadcrumb__divider\">/</span>\n </li>\n }\n\n <!-- Trailing items -->\n @for (crumb of trailingItems(); track crumb.label) {\n <li class=\"c-breadcrumb__item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span class=\"c-breadcrumb__link last-link\">{{ crumb.label }}</span>\n } @if (!isLast(crumb)) {\n <span class=\"c-breadcrumb__divider\">/</span>\n }\n </li>\n }\n </ul>\n</nav>\n", styles: [".c-breadcrumb__list{list-style:none;margin:0;padding:0;display:flex;align-items:center}.c-breadcrumb__divider{display:flex;padding:0 var(--space-component-padding-xs, .5rem);flex-direction:column;justify-content:center;align-items:center;color:var(--color-core-border-soft, #d6e0df);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-breadcrumb__item{position:relative;display:flex;align-items:center}.c-breadcrumb__item--ellipsis{cursor:pointer}.c-breadcrumb__item--ellipsis:hover .c-breadcrumb__popover,.c-breadcrumb__item--ellipsis:focus-within .c-breadcrumb__popover{display:block}.c-breadcrumb__link{text-decoration:none;color:var(--color-action-primary-content-default, #217870);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-breadcrumb__link.last-link,.c-breadcrumb__link.last-link:hover{color:var(--color-core-content-soft, #535858)}.c-breadcrumb__link:hover{color:var(--color-action-primary-content-hover, #19625b);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-breadcrumb__link:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-breadcrumb__link[aria-current=page]{color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-breadcrumb__ellipsis{position:relative;font-size:1.25em;-webkit-user-select:none;user-select:none}.c-breadcrumb__popover{display:none;position:absolute;padding:0;top:100%;left:50%;transform:translate(-50%);transform-origin:top center;z-index:1000;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16))}.c-breadcrumb__popover-item{list-style:none}.c-breadcrumb__popover-item .c-breadcrumb__link{display:flex;height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
2690
2692
|
}
|
|
2691
2693
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
2692
2694
|
type: Component,
|
|
2693
|
-
args: [{ selector: 'lib-breadcrumb',
|
|
2694
|
-
}]
|
|
2695
|
-
type: Input
|
|
2696
|
-
}], crumbClick: [{
|
|
2697
|
-
type: Output
|
|
2698
|
-
}] } });
|
|
2695
|
+
args: [{ selector: 'lib-breadcrumb', imports: [CommonModule, RouterModule, IconComponent], template: "<!-- breadcrumb.component.html -->\n<nav class=\"c-breadcrumb\" role=\"navigation\" aria-label=\"Breadcrumb\">\n <ul class=\"c-breadcrumb__list\">\n @for (crumb of leadingItems(); track crumb.label) {\n <li class=\"c-breadcrumb__item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span\n class=\"c-breadcrumb__link\"\n (click)=\"onCrumbClick(crumb, $event)\"\n (keyup.enter)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n tabindex=\"0\"\n role=\"button\"\n >{{ crumb.label }}</span\n >\n } @if (!isLast(crumb)) {\n <span class=\"c-breadcrumb__divider\">/</span>\n }\n </li>\n } @if (hiddenItems().length > 0) {\n <li class=\"c-breadcrumb__item c-breadcrumb__item--ellipsis\">\n <span\n class=\"c-breadcrumb__ellipsis\"\n tabindex=\"0\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n <lib-icon name=\"dotsthree-regular\" size=\"sm\" iconBefore />\n </span>\n <ul class=\"c-breadcrumb__popover\" role=\"menu\">\n @for (crumb of hiddenItems(); track crumb.label) {\n <li class=\"c-breadcrumb__popover-item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span\n class=\"c-breadcrumb__link\"\n (click)=\"onCrumbClick(crumb, $event)\"\n (keyup.enter)=\"onCrumbClick(crumb, $event)\"\n tabindex=\"0\"\n role=\"button\"\n >{{ crumb.label }}</span\n >\n }\n </li>\n }\n </ul>\n <span class=\"c-breadcrumb__divider\">/</span>\n </li>\n }\n\n <!-- Trailing items -->\n @for (crumb of trailingItems(); track crumb.label) {\n <li class=\"c-breadcrumb__item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span class=\"c-breadcrumb__link last-link\">{{ crumb.label }}</span>\n } @if (!isLast(crumb)) {\n <span class=\"c-breadcrumb__divider\">/</span>\n }\n </li>\n }\n </ul>\n</nav>\n", styles: [".c-breadcrumb__list{list-style:none;margin:0;padding:0;display:flex;align-items:center}.c-breadcrumb__divider{display:flex;padding:0 var(--space-component-padding-xs, .5rem);flex-direction:column;justify-content:center;align-items:center;color:var(--color-core-border-soft, #d6e0df);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-breadcrumb__item{position:relative;display:flex;align-items:center}.c-breadcrumb__item--ellipsis{cursor:pointer}.c-breadcrumb__item--ellipsis:hover .c-breadcrumb__popover,.c-breadcrumb__item--ellipsis:focus-within .c-breadcrumb__popover{display:block}.c-breadcrumb__link{text-decoration:none;color:var(--color-action-primary-content-default, #217870);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-breadcrumb__link.last-link,.c-breadcrumb__link.last-link:hover{color:var(--color-core-content-soft, #535858)}.c-breadcrumb__link:hover{color:var(--color-action-primary-content-hover, #19625b);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-breadcrumb__link:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-breadcrumb__link[aria-current=page]{color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-breadcrumb__ellipsis{position:relative;font-size:1.25em;-webkit-user-select:none;user-select:none}.c-breadcrumb__popover{display:none;position:absolute;padding:0;top:100%;left:50%;transform:translate(-50%);transform-origin:top center;z-index:1000;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16))}.c-breadcrumb__popover-item{list-style:none}.c-breadcrumb__popover-item .c-breadcrumb__link{display:flex;height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0))}\n"] }]
|
|
2696
|
+
}] });
|
|
2699
2697
|
|
|
2700
2698
|
class ButtonComponent {
|
|
2701
2699
|
text = input();
|
|
@@ -3225,7 +3223,7 @@ class OverlayComponent {
|
|
|
3225
3223
|
this.closed.emit();
|
|
3226
3224
|
});
|
|
3227
3225
|
this.destroyRef.onDestroy(() => {
|
|
3228
|
-
if (this.isOpen()
|
|
3226
|
+
if (this.isOpen()) {
|
|
3229
3227
|
this.unblockBodyScroll();
|
|
3230
3228
|
}
|
|
3231
3229
|
this.destroyFocusTrap();
|
|
@@ -3292,9 +3290,8 @@ class OverlayComponent {
|
|
|
3292
3290
|
this.createPortal();
|
|
3293
3291
|
}
|
|
3294
3292
|
configureScrollBehavior() {
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
}
|
|
3293
|
+
// Block scroll for both mobile and desktop
|
|
3294
|
+
this.blockBodyScroll();
|
|
3298
3295
|
}
|
|
3299
3296
|
finalizeOverlayOpening() {
|
|
3300
3297
|
this._isOpen.set(true);
|
|
@@ -3324,9 +3321,8 @@ class OverlayComponent {
|
|
|
3324
3321
|
this.navigationSub = undefined;
|
|
3325
3322
|
}
|
|
3326
3323
|
restoreScrollBehavior() {
|
|
3327
|
-
|
|
3328
|
-
|
|
3329
|
-
}
|
|
3324
|
+
// Unblock scroll for both mobile and desktop
|
|
3325
|
+
this.unblockBodyScroll();
|
|
3330
3326
|
}
|
|
3331
3327
|
destroyOverlayComponents() {
|
|
3332
3328
|
this.destroyFocusTrap();
|
|
@@ -4344,7 +4340,7 @@ class DropdownSelectComponent {
|
|
|
4344
4340
|
}
|
|
4345
4341
|
}
|
|
4346
4342
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4347
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownSelectComponent, isStandalone: true, selector: "lib-dropdown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n [position]=\"position()\"\n [disabled]=\"disabled()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n [width]=\"width()\"\n>\n <ng-template>\n <!-- Search Input (if enabled and not multiselect) -->\n @if (showSearchBar()) {\n <div class=\"c-dropdown-select__search\">\n <lib-input-search\n [placeholder]=\"searchPlaceholder()\"\n [formControl]=\"searchControl\"\n size=\"lg\"\n [fullWidth]=\"true\"\n ></lib-input-search>\n </div>\n }\n\n <!-- Options List -->\n <div class=\"c-dropdown-select__options\" [ngClass]=\"{ 'c-dropdown-select__options--with-mobile-actions': showMobileActions() }\">\n @for (group of filteredOptions(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-dropdown-select__group\">\n <!-- Group Label -->\n @if (group.label) {\n <div class=\"c-dropdown-select__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) { @if (isMultiSelect())\n {\n <!-- For multiselect: use full checkbox component with label -->\n <div\n class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n >\n <lib-checkbox\n [label]=\"option.label\"\n [name]=\"'option-' + option.value\"\n [value]=\"option.value\"\n [ariaLabel]=\"'Select ' + option.label\"\n [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n [disabled]=\"option.disabled || false\"\n (changed)=\"onCheckboxChange(option, $event.checked)\"\n ></lib-checkbox>\n </div>\n } @else {\n <!-- For single select: use button with icon and label -->\n <button\n type=\"button\"\n class=\"c-dropdown-select__option\"\n [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n [disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-select__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-select__option-label\">\n {{ option.label }}\n </span>\n\n <!-- Check icon for selected option in single select -->\n @if (isSelected(option)) {\n <lib-icon\n name=\"checkcircle-fill\"\n size=\"lg\"\n color=\"action-primary-selected-background-default\"\n >\n </lib-icon>\n }\n </button>\n } }\n </div>\n }\n </div>\n\n <!-- Mobile Action Buttons in footer slot -->\n @if (showMobileActions()) {\n <div class=\"c-dropdown-select__mobile-actions\">\n <lib-link-action\n [text]=\"cancelButtonText()\"\n variant=\"neutral\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onCancelClick()\"\n ></lib-link-action>\n <lib-link-action\n [text]=\"acceptButtonText()\"\n variant=\"primary\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onAcceptClick()\"\n ></lib-link-action>\n </div>\n }\n </ng-template>\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);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);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-content-selected);-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{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);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__options--with-mobile-actions{margin-bottom:85px}.c-dropdown-select__mobile-actions{display:none}@media (max-width: 768px){.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%;position:fixed;bottom:0;height:60px;background-color:var(--color-core-background-surface-raised);padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$
|
|
4343
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownSelectComponent, isStandalone: true, selector: "lib-dropdown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n [position]=\"position()\"\n [disabled]=\"disabled()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n [width]=\"width()\"\n>\n <ng-template>\n <!-- Search Input (if enabled and not multiselect) -->\n @if (showSearchBar()) {\n <div class=\"c-dropdown-select__search\">\n <lib-input-search\n [placeholder]=\"searchPlaceholder()\"\n [formControl]=\"searchControl\"\n size=\"lg\"\n [fullWidth]=\"true\"\n ></lib-input-search>\n </div>\n }\n\n <!-- Options List -->\n <div class=\"c-dropdown-select__options\" [ngClass]=\"{ 'c-dropdown-select__options--with-mobile-actions': showMobileActions() }\">\n @for (group of filteredOptions(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-dropdown-select__group\">\n <!-- Group Label -->\n @if (group.label) {\n <div class=\"c-dropdown-select__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) { @if (isMultiSelect())\n {\n <!-- For multiselect: use full checkbox component with label -->\n <div\n class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n >\n <lib-checkbox\n [label]=\"option.label\"\n [name]=\"'option-' + option.value\"\n [value]=\"option.value\"\n [ariaLabel]=\"'Select ' + option.label\"\n [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n [disabled]=\"option.disabled || false\"\n (changed)=\"onCheckboxChange(option, $event.checked)\"\n ></lib-checkbox>\n </div>\n } @else {\n <!-- For single select: use button with icon and label -->\n <button\n type=\"button\"\n class=\"c-dropdown-select__option\"\n [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n [disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-select__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-select__option-label\">\n {{ option.label }}\n </span>\n\n <!-- Check icon for selected option in single select -->\n @if (isSelected(option)) {\n <lib-icon\n name=\"checkcircle-fill\"\n size=\"lg\"\n color=\"action-primary-selected-background-default\"\n >\n </lib-icon>\n }\n </button>\n } }\n </div>\n }\n </div>\n\n <!-- Mobile Action Buttons in footer slot -->\n @if (showMobileActions()) {\n <div class=\"c-dropdown-select__mobile-actions\">\n <lib-link-action\n [text]=\"cancelButtonText()\"\n variant=\"neutral\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onCancelClick()\"\n ></lib-link-action>\n <lib-link-action\n [text]=\"acceptButtonText()\"\n variant=\"primary\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onAcceptClick()\"\n ></lib-link-action>\n </div>\n }\n </ng-template>\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);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);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-content-selected);-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{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);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__options--with-mobile-actions{margin-bottom:85px}.c-dropdown-select__mobile-actions{display:none}@media (max-width: 768px){.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%;position:fixed;bottom:0;height:60px;background-color:var(--color-core-background-surface-raised);padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["position", "disabled", "width"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
4348
4344
|
}
|
|
4349
4345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, decorators: [{
|
|
4350
4346
|
type: Component,
|
|
@@ -7203,6 +7199,8 @@ class ToastComponent {
|
|
|
7203
7199
|
removable = true;
|
|
7204
7200
|
visibility = true;
|
|
7205
7201
|
closeActive = false;
|
|
7202
|
+
// Event emitted when toast is closed
|
|
7203
|
+
closed = new EventEmitter();
|
|
7206
7204
|
ngOnInit() {
|
|
7207
7205
|
setTimeout(() => {
|
|
7208
7206
|
this.close();
|
|
@@ -7212,6 +7210,7 @@ class ToastComponent {
|
|
|
7212
7210
|
this.closeActive = true;
|
|
7213
7211
|
setTimeout(() => {
|
|
7214
7212
|
this.visibility = false;
|
|
7213
|
+
this.closed.emit();
|
|
7215
7214
|
}, 1000);
|
|
7216
7215
|
}
|
|
7217
7216
|
getIconName() {
|
|
@@ -7243,7 +7242,7 @@ class ToastComponent {
|
|
|
7243
7242
|
}
|
|
7244
7243
|
}
|
|
7245
7244
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7246
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ToastComponent, isStandalone: true, selector: "lib-toast", inputs: { variant: "variant", text: "text", title: "title", time: "time", extraClass: "extraClass", showIcon: "showIcon", removable: "removable" }, ngImport: i0, template: "@if (visibility) {\n<div\n class=\"c-toast\"\n [ngClass]=\"[\n 'c-toast',\n variant ? 'c-toast--' + variant : '',\n extraClass ? extraClass : '',\n closeActive ? 'c-toast--hide' : ''\n ]\"\n>\n @if (showIcon) {\n <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n }\n <div class=\"c-toast__content\">\n <p class=\"c-toast__title\">{{ title }}</p>\n <p class=\"c-toast__text\">{{ text }}</p>\n </div>\n @if (removable) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-toast__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n >\n </lib-button-icon>\n }\n</div>\n}\n", styles: ["@keyframes toast-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.c-toast{position:fixed;width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;top:0;right:0;margin:var(--space-component-padding-lg);z-index:150;padding:var(--space-component-padding-lg) var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-floating);gap:var(--space-component-gap-md);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft),0 4px 8px 0 var(--color-effect-shadow-soft);display:flex;align-items:flex-start;transition:opacity .3s ease,transform .3s ease;animation:toast-in .3s ease forwards}.c-toast__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-toast__close{justify-self:flex-end;margin:0 0 0 auto}.c-toast__title{color:var(--color-core-content-default);font-family:var(--typography-title-sm-family);font-size:var(--typography-title-sm-size);font-style:normal;font-weight:var(--typography-title-sm-weight);line-height:var(--typography-title-sm-line-height);letter-spacing:var(--typography-title-sm-letter-spacing);margin:0 0 auto}.c-toast__text{color:var(--color-core-content-soft);font-family:var(--typography-body-sm-family);font-size:var(--typography-body-sm-size);font-style:normal;font-weight:var(--typography-body-sm-weight);line-height:var(--typography-body-sm-line-height);letter-spacing:var(--typography-body-sm-letter-spacing);margin:0 0 auto}.c-toast--hide{animation:toast-out .3s ease forwards}@media (min-width: 48rem){.c-toast{width:336px}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
7245
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ToastComponent, isStandalone: true, selector: "lib-toast", inputs: { variant: "variant", text: "text", title: "title", time: "time", extraClass: "extraClass", showIcon: "showIcon", removable: "removable" }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (visibility) {\n<div\n class=\"c-toast\"\n [ngClass]=\"[\n 'c-toast',\n variant ? 'c-toast--' + variant : '',\n extraClass ? extraClass : '',\n closeActive ? 'c-toast--hide' : ''\n ]\"\n>\n @if (showIcon) {\n <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n }\n <div class=\"c-toast__content\">\n <p class=\"c-toast__title\">{{ title }}</p>\n <p class=\"c-toast__text\">{{ text }}</p>\n </div>\n @if (removable) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-toast__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n >\n </lib-button-icon>\n }\n</div>\n}\n", styles: ["@keyframes toast-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.c-toast{position:fixed;width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;top:0;right:0;margin:var(--space-component-padding-lg);z-index:150;padding:var(--space-component-padding-lg) var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-floating);gap:var(--space-component-gap-md);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft),0 4px 8px 0 var(--color-effect-shadow-soft);display:flex;align-items:flex-start;transition:opacity .3s ease,transform .3s ease;animation:toast-in .3s ease forwards}.c-toast__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-toast__close{justify-self:flex-end;margin:0 0 0 auto}.c-toast__title{color:var(--color-core-content-default);font-family:var(--typography-title-sm-family);font-size:var(--typography-title-sm-size);font-style:normal;font-weight:var(--typography-title-sm-weight);line-height:var(--typography-title-sm-line-height);letter-spacing:var(--typography-title-sm-letter-spacing);margin:0 0 auto}.c-toast__text{color:var(--color-core-content-soft);font-family:var(--typography-body-sm-family);font-size:var(--typography-body-sm-size);font-style:normal;font-weight:var(--typography-body-sm-weight);line-height:var(--typography-body-sm-line-height);letter-spacing:var(--typography-body-sm-letter-spacing);margin:0 0 auto}.c-toast--hide{animation:toast-out .3s ease forwards}@media (min-width: 48rem){.c-toast{width:336px}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
7247
7246
|
}
|
|
7248
7247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastComponent, decorators: [{
|
|
7249
7248
|
type: Component,
|
|
@@ -7262,6 +7261,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
7262
7261
|
type: Input
|
|
7263
7262
|
}], removable: [{
|
|
7264
7263
|
type: Input
|
|
7264
|
+
}], closed: [{
|
|
7265
|
+
type: Output
|
|
7265
7266
|
}] } });
|
|
7266
7267
|
|
|
7267
7268
|
var TooltipPosition;
|
|
@@ -7364,7 +7365,7 @@ class TooltipDirective {
|
|
|
7364
7365
|
};
|
|
7365
7366
|
}
|
|
7366
7367
|
}
|
|
7367
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i1$
|
|
7368
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.Overlay }, { token: i1$4.OverlayPositionBuilder }], target: i0.ɵɵFactoryTarget.Directive });
|
|
7368
7369
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: TooltipDirective, isStandalone: true, selector: "[libTooltip]", inputs: { libTooltip: "libTooltip", tooltipPosition: "tooltipPosition", tooltipForceOpen: "tooltipForceOpen" }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, ngImport: i0 });
|
|
7369
7370
|
}
|
|
7370
7371
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
@@ -7372,7 +7373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
7372
7373
|
args: [{
|
|
7373
7374
|
selector: '[libTooltip]',
|
|
7374
7375
|
}]
|
|
7375
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$
|
|
7376
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$4.Overlay }, { type: i1$4.OverlayPositionBuilder }], propDecorators: { libTooltip: [{
|
|
7376
7377
|
type: Input
|
|
7377
7378
|
}], tooltipPosition: [{
|
|
7378
7379
|
type: Input
|