@crowdfarming/oliva-ds 1.68.1 → 1.68.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.
|
@@ -3329,6 +3329,7 @@ class OverlayComponent {
|
|
|
3329
3329
|
appendToBody = input(false);
|
|
3330
3330
|
autoFocus = input(true);
|
|
3331
3331
|
safeAreaInsetBottom = input(false);
|
|
3332
|
+
disableScroll = input(false);
|
|
3332
3333
|
// Outputs
|
|
3333
3334
|
opened = output();
|
|
3334
3335
|
closed = output();
|
|
@@ -3655,11 +3656,11 @@ class OverlayComponent {
|
|
|
3655
3656
|
}
|
|
3656
3657
|
}
|
|
3657
3658
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3658
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: OverlayComponent, isStandalone: true, selector: "lib-overlay", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, safeAreaInsetBottom: { classPropertyName: "safeAreaInsetBottom", publicName: "safeAreaInsetBottom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "overlayMenu", first: true, predicate: ["overlayMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-overlay\">\n <!-- Only show if overlay is open -->\n @if (isOpen()) {\n <!-- Backdrop (only on mobile) -->\n @if (isMobile()) {\n <div\n class=\"c-overlay__backdrop\"\n (click)=\"closeOverlay()\"\n (keydown)=\"closeOverlay()\"\n tabindex=\"-1\"\n role=\"button\"\n aria-label=\"Close overlay\"\n ></div>\n }\n\n <!-- Overlay Menu -->\n <div\n #overlayMenu\n class=\"c-overlay__menu\"\n tabindex=\"-1\"\n [ngStyle]=\"menuStyles()\"\n (keydown.escape)=\"closeOverlay()\"\n >\n <div
|
|
3659
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: OverlayComponent, isStandalone: true, selector: "lib-overlay", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, safeAreaInsetBottom: { classPropertyName: "safeAreaInsetBottom", publicName: "safeAreaInsetBottom", isSignal: true, isRequired: false, transformFunction: null }, disableScroll: { classPropertyName: "disableScroll", publicName: "disableScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "overlayMenu", first: true, predicate: ["overlayMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-overlay\">\n <!-- Only show if overlay is open -->\n @if (isOpen()) {\n <!-- Backdrop (only on mobile) -->\n @if (isMobile()) {\n <div\n class=\"c-overlay__backdrop\"\n (click)=\"closeOverlay()\"\n (keydown)=\"closeOverlay()\"\n tabindex=\"-1\"\n role=\"button\"\n aria-label=\"Close overlay\"\n ></div>\n }\n\n <!-- Overlay Menu -->\n <div\n #overlayMenu\n class=\"c-overlay__menu\"\n [class.c-overlay__menu--no-scroll]=\"disableScroll()\"\n tabindex=\"-1\"\n [ngStyle]=\"menuStyles()\"\n (keydown.escape)=\"closeOverlay()\"\n >\n <div\n class=\"c-overlay__content\"\n [class.c-overlay__content--no-scroll]=\"disableScroll()\"\n >\n <!-- Main content projection -->\n <ng-content></ng-content>\n </div>\n\n <!-- Footer slot for mobile action buttons -->\n <!-- TODO: Review footer implementation -->\n <div\n class=\"c-overlay__footer\"\n [class.c-overlay__footer--safe-area-inset-bottom]=\"safeAreaInsetBottom()\"\n >\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n </div>\n }\n</div>\n", styles: [":host{position:absolute;display:block;height:0px}.c-overlay__backdrop{position:fixed;inset:0;z-index:1000;background-color:var(--color-effect-overlay);transition:opacity .2s ease-in-out;opacity:1}.c-overlay__menu{position:absolute;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;animation:overlay-animation .2s ease-out forwards}.c-overlay__menu--no-scroll{max-height:none;overflow:visible}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__content--no-scroll{max-height:none;overflow:visible}.c-overlay__footer{display:none;height:27px}.c-overlay__footer:not(:empty){display:flex}@keyframes overlay-animation{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 27px);width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay__footer{flex-shrink:0;padding:var(--space-container-padding-sm);background-color:var(--color-core-background-surface-raised);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);display:flex;justify-content:space-between;align-items:center;height:56px}.c-overlay__footer--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + var(--space-container-padding-sm))}.c-overlay__footer:empty{display:none}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3659
3660
|
}
|
|
3660
3661
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayComponent, decorators: [{
|
|
3661
3662
|
type: Component,
|
|
3662
|
-
args: [{ selector: 'lib-overlay', imports: [NgClass, NgStyle], template: "<div class=\"c-overlay\">\n <!-- Only show if overlay is open -->\n @if (isOpen()) {\n <!-- Backdrop (only on mobile) -->\n @if (isMobile()) {\n <div\n class=\"c-overlay__backdrop\"\n (click)=\"closeOverlay()\"\n (keydown)=\"closeOverlay()\"\n tabindex=\"-1\"\n role=\"button\"\n aria-label=\"Close overlay\"\n ></div>\n }\n\n <!-- Overlay Menu -->\n <div\n #overlayMenu\n class=\"c-overlay__menu\"\n tabindex=\"-1\"\n [ngStyle]=\"menuStyles()\"\n (keydown.escape)=\"closeOverlay()\"\n >\n <div
|
|
3663
|
+
args: [{ selector: 'lib-overlay', imports: [NgClass, NgStyle], template: "<div class=\"c-overlay\">\n <!-- Only show if overlay is open -->\n @if (isOpen()) {\n <!-- Backdrop (only on mobile) -->\n @if (isMobile()) {\n <div\n class=\"c-overlay__backdrop\"\n (click)=\"closeOverlay()\"\n (keydown)=\"closeOverlay()\"\n tabindex=\"-1\"\n role=\"button\"\n aria-label=\"Close overlay\"\n ></div>\n }\n\n <!-- Overlay Menu -->\n <div\n #overlayMenu\n class=\"c-overlay__menu\"\n [class.c-overlay__menu--no-scroll]=\"disableScroll()\"\n tabindex=\"-1\"\n [ngStyle]=\"menuStyles()\"\n (keydown.escape)=\"closeOverlay()\"\n >\n <div\n class=\"c-overlay__content\"\n [class.c-overlay__content--no-scroll]=\"disableScroll()\"\n >\n <!-- Main content projection -->\n <ng-content></ng-content>\n </div>\n\n <!-- Footer slot for mobile action buttons -->\n <!-- TODO: Review footer implementation -->\n <div\n class=\"c-overlay__footer\"\n [class.c-overlay__footer--safe-area-inset-bottom]=\"safeAreaInsetBottom()\"\n >\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n </div>\n }\n</div>\n", styles: [":host{position:absolute;display:block;height:0px}.c-overlay__backdrop{position:fixed;inset:0;z-index:1000;background-color:var(--color-effect-overlay);transition:opacity .2s ease-in-out;opacity:1}.c-overlay__menu{position:absolute;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;animation:overlay-animation .2s ease-out forwards}.c-overlay__menu--no-scroll{max-height:none;overflow:visible}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__content--no-scroll{max-height:none;overflow:visible}.c-overlay__footer{display:none;height:27px}.c-overlay__footer:not(:empty){display:flex}@keyframes overlay-animation{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 27px);width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay__footer{flex-shrink:0;padding:var(--space-container-padding-sm);background-color:var(--color-core-background-surface-raised);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);display:flex;justify-content:space-between;align-items:center;height:56px}.c-overlay__footer--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + var(--space-container-padding-sm))}.c-overlay__footer:empty{display:none}}\n"] }]
|
|
3663
3664
|
}], ctorParameters: () => [] });
|
|
3664
3665
|
|
|
3665
3666
|
class DropdownActionComponent {
|
|
@@ -3672,6 +3673,7 @@ class DropdownActionComponent {
|
|
|
3672
3673
|
autoFocus = input(true);
|
|
3673
3674
|
width = input('fit-content');
|
|
3674
3675
|
safeAreaInsetBottom = input(false);
|
|
3676
|
+
disableScroll = input(false);
|
|
3675
3677
|
// Outputs
|
|
3676
3678
|
actionClicked = output();
|
|
3677
3679
|
// Private signals
|
|
@@ -3739,11 +3741,11 @@ class DropdownActionComponent {
|
|
|
3739
3741
|
this._isOverlayOpen.set(false);
|
|
3740
3742
|
}
|
|
3741
3743
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3742
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownActionComponent, isStandalone: true, selector: "lib-dropdown-action", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, safeAreaInsetBottom: { classPropertyName: "safeAreaInsetBottom", publicName: "safeAreaInsetBottom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [disabled]=\"disabled()\"\n [autoFocus]=\"autoFocus()\"\n [width]=\"width()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n>\n <!-- Options List -->\n <div\n class=\"c-dropdown-action__options\"\n [class.c-dropdown-action__options--safe-area-inset-bottom]=\"safeAreaInsetBottom()\"\n >\n @for (group of options(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-dropdown-action__group\">\n <!-- Group Label -->\n @if (group.label) {\n <div class=\"c-dropdown-action__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) {\n <!-- Action button/link with icon and label -->\n @if (option.href) { @if (isExternalUrl(option.href)) {\n <a\n [href]=\"option.href\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"c-dropdown-action__option\"\n [class.c-dropdown-action__option--disabled]=\"option.disabled\"\n (click)=\"selectAction(option, $event)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-action__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-action__option-label\">\n {{ option.label }}\n </span>\n </a>\n } @else {\n <a\n [routerLink]=\"option.href\"\n class=\"c-dropdown-action__option\"\n [class.c-dropdown-action__option--disabled]=\"option.disabled\"\n (click)=\"selectAction(option, $event)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-action__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-action__option-label\">\n {{ option.label }}\n </span>\n </a>\n } } @else {\n <button\n type=\"button\"\n class=\"c-dropdown-action__option\"\n [disabled]=\"option.disabled\"\n (click)=\"selectAction(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-action__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-action__option-label\">\n {{ option.label }}\n </span>\n </button>\n } }\n </div>\n }\n </div>\n</lib-overlay>\n", styles: [".c-dropdown-action__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-action__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-action__options--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + 8px)}.c-dropdown-action__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-action__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;text-decoration:none;cursor:pointer}.c-dropdown-action__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover);text-decoration:none}.c-dropdown-action__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-action__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-action__option--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.c-dropdown-action__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-action__option-label{flex:1;min-width:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["disabled", "width", "direction", "align", "appendToBody", "autoFocus", "safeAreaInsetBottom"], outputs: ["opened", "closed"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
|
|
3744
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownActionComponent, isStandalone: true, selector: "lib-dropdown-action", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, safeAreaInsetBottom: { classPropertyName: "safeAreaInsetBottom", publicName: "safeAreaInsetBottom", isSignal: true, isRequired: false, transformFunction: null }, disableScroll: { classPropertyName: "disableScroll", publicName: "disableScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [disabled]=\"disabled()\"\n [autoFocus]=\"autoFocus()\"\n [width]=\"width()\"\n [disableScroll]=\"disableScroll()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n>\n <!-- Options List -->\n <div\n class=\"c-dropdown-action__options\"\n [class.c-dropdown-action__options--safe-area-inset-bottom]=\"safeAreaInsetBottom()\"\n [class.c-dropdown-action__options--no-scroll]=\"disableScroll()\"\n >\n @for (group of options(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-dropdown-action__group\">\n <!-- Group Label -->\n @if (group.label) {\n <div class=\"c-dropdown-action__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) {\n <!-- Action button/link with icon and label -->\n @if (option.href) { @if (isExternalUrl(option.href)) {\n <a\n [href]=\"option.href\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"c-dropdown-action__option\"\n [class.c-dropdown-action__option--disabled]=\"option.disabled\"\n (click)=\"selectAction(option, $event)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-action__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-action__option-label\">\n {{ option.label }}\n </span>\n </a>\n } @else {\n <a\n [routerLink]=\"option.href\"\n class=\"c-dropdown-action__option\"\n [class.c-dropdown-action__option--disabled]=\"option.disabled\"\n (click)=\"selectAction(option, $event)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-action__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-action__option-label\">\n {{ option.label }}\n </span>\n </a>\n } } @else {\n <button\n type=\"button\"\n class=\"c-dropdown-action__option\"\n [disabled]=\"option.disabled\"\n (click)=\"selectAction(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-action__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-action__option-label\">\n {{ option.label }}\n </span>\n </button>\n } }\n </div>\n }\n </div>\n</lib-overlay>\n", styles: [".c-dropdown-action__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-action__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-action__options--no-scroll{max-height:none;overflow:visible}.c-dropdown-action__options--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + 8px)}.c-dropdown-action__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-action__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;text-decoration:none;cursor:pointer}.c-dropdown-action__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover);text-decoration:none}.c-dropdown-action__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-action__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-action__option--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.c-dropdown-action__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-action__option-label{flex:1;min-width:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["disabled", "width", "direction", "align", "appendToBody", "autoFocus", "safeAreaInsetBottom", "disableScroll"], outputs: ["opened", "closed"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
|
|
3743
3745
|
}
|
|
3744
3746
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownActionComponent, decorators: [{
|
|
3745
3747
|
type: Component,
|
|
3746
|
-
args: [{ selector: 'lib-dropdown-action', imports: [IconComponent, OverlayComponent, RouterLink], template: "<lib-overlay\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [disabled]=\"disabled()\"\n [autoFocus]=\"autoFocus()\"\n [width]=\"width()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n>\n <!-- Options List -->\n <div\n class=\"c-dropdown-action__options\"\n [class.c-dropdown-action__options--safe-area-inset-bottom]=\"safeAreaInsetBottom()\"\n >\n @for (group of options(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-dropdown-action__group\">\n <!-- Group Label -->\n @if (group.label) {\n <div class=\"c-dropdown-action__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) {\n <!-- Action button/link with icon and label -->\n @if (option.href) { @if (isExternalUrl(option.href)) {\n <a\n [href]=\"option.href\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"c-dropdown-action__option\"\n [class.c-dropdown-action__option--disabled]=\"option.disabled\"\n (click)=\"selectAction(option, $event)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-action__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-action__option-label\">\n {{ option.label }}\n </span>\n </a>\n } @else {\n <a\n [routerLink]=\"option.href\"\n class=\"c-dropdown-action__option\"\n [class.c-dropdown-action__option--disabled]=\"option.disabled\"\n (click)=\"selectAction(option, $event)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-action__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-action__option-label\">\n {{ option.label }}\n </span>\n </a>\n } } @else {\n <button\n type=\"button\"\n class=\"c-dropdown-action__option\"\n [disabled]=\"option.disabled\"\n (click)=\"selectAction(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-action__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-action__option-label\">\n {{ option.label }}\n </span>\n </button>\n } }\n </div>\n }\n </div>\n</lib-overlay>\n", styles: [".c-dropdown-action__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-action__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-action__options--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + 8px)}.c-dropdown-action__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-action__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;text-decoration:none;cursor:pointer}.c-dropdown-action__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover);text-decoration:none}.c-dropdown-action__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-action__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-action__option--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.c-dropdown-action__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-action__option-label{flex:1;min-width:0}\n"] }]
|
|
3748
|
+
args: [{ selector: 'lib-dropdown-action', imports: [IconComponent, OverlayComponent, RouterLink], template: "<lib-overlay\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [disabled]=\"disabled()\"\n [autoFocus]=\"autoFocus()\"\n [width]=\"width()\"\n [disableScroll]=\"disableScroll()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n>\n <!-- Options List -->\n <div\n class=\"c-dropdown-action__options\"\n [class.c-dropdown-action__options--safe-area-inset-bottom]=\"safeAreaInsetBottom()\"\n [class.c-dropdown-action__options--no-scroll]=\"disableScroll()\"\n >\n @for (group of options(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-dropdown-action__group\">\n <!-- Group Label -->\n @if (group.label) {\n <div class=\"c-dropdown-action__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) {\n <!-- Action button/link with icon and label -->\n @if (option.href) { @if (isExternalUrl(option.href)) {\n <a\n [href]=\"option.href\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"c-dropdown-action__option\"\n [class.c-dropdown-action__option--disabled]=\"option.disabled\"\n (click)=\"selectAction(option, $event)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-action__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-action__option-label\">\n {{ option.label }}\n </span>\n </a>\n } @else {\n <a\n [routerLink]=\"option.href\"\n class=\"c-dropdown-action__option\"\n [class.c-dropdown-action__option--disabled]=\"option.disabled\"\n (click)=\"selectAction(option, $event)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-action__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-action__option-label\">\n {{ option.label }}\n </span>\n </a>\n } } @else {\n <button\n type=\"button\"\n class=\"c-dropdown-action__option\"\n [disabled]=\"option.disabled\"\n (click)=\"selectAction(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-action__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-action__option-label\">\n {{ option.label }}\n </span>\n </button>\n } }\n </div>\n }\n </div>\n</lib-overlay>\n", styles: [".c-dropdown-action__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-action__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-action__options--no-scroll{max-height:none;overflow:visible}.c-dropdown-action__options--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + 8px)}.c-dropdown-action__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-action__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;text-decoration:none;cursor:pointer}.c-dropdown-action__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover);text-decoration:none}.c-dropdown-action__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-action__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-action__option--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.c-dropdown-action__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-action__option-label{flex:1;min-width:0}\n"] }]
|
|
3747
3749
|
}], ctorParameters: () => [], propDecorators: { overlay: [{
|
|
3748
3750
|
type: ViewChild,
|
|
3749
3751
|
args: [OverlayComponent]
|
|
@@ -4307,7 +4309,7 @@ class DropdownSelectComponent {
|
|
|
4307
4309
|
}
|
|
4308
4310
|
}
|
|
4309
4311
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4310
|
-
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 }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, safeAreaInsetBottom: { classPropertyName: "safeAreaInsetBottom", publicName: "safeAreaInsetBottom", 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 [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [disabled]=\"disabled()\"\n [autoFocus]=\"autoFocus()\"\n [width]=\"width()\"\n [safeAreaInsetBottom]=\"safeAreaInsetBottom()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n>\n <!-- Search Input (if enabled and not multiselect) -->\n @if (showSearchBar()) { @if (safeAreaInsetBottom()) {\n <div class=\"c-dropdown-select__search--safe-area-inset-top\"></div>\n }\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\">\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 slot=\"footer\" 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</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__search--safe-area-inset-top{height:env(safe-area-inset-top,0);background-color:var(--color-core-background-surface-floating);position:sticky;top:0;z-index:150}.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{-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__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%;height:56px}\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: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "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", "required", "optionalLabel", "isLoading", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "underline", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["disabled", "width", "direction", "align", "appendToBody", "autoFocus", "safeAreaInsetBottom"], outputs: ["opened", "closed"] }] });
|
|
4312
|
+
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 }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, safeAreaInsetBottom: { classPropertyName: "safeAreaInsetBottom", publicName: "safeAreaInsetBottom", 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 [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [disabled]=\"disabled()\"\n [autoFocus]=\"autoFocus()\"\n [width]=\"width()\"\n [safeAreaInsetBottom]=\"safeAreaInsetBottom()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n>\n <!-- Search Input (if enabled and not multiselect) -->\n @if (showSearchBar()) { @if (safeAreaInsetBottom()) {\n <div class=\"c-dropdown-select__search--safe-area-inset-top\"></div>\n }\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\">\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 slot=\"footer\" 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</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__search--safe-area-inset-top{height:env(safe-area-inset-top,0);background-color:var(--color-core-background-surface-floating);position:sticky;top:0;z-index:150}.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{-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__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%;height:56px}\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: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "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", "required", "optionalLabel", "isLoading", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "underline", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["disabled", "width", "direction", "align", "appendToBody", "autoFocus", "safeAreaInsetBottom", "disableScroll"], outputs: ["opened", "closed"] }] });
|
|
4311
4313
|
}
|
|
4312
4314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, decorators: [{
|
|
4313
4315
|
type: Component,
|