@crowdfarming/oliva-ds 1.57.0 → 1.58.0-rc.1
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.
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import * as i1$1 from '@angular/common';
|
|
2
2
|
import { CommonModule, NgClass, isPlatformBrowser, NgStyle } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Input, Component, EventEmitter, Output, input, computed, output, signal, effect, forwardRef, inject, ElementRef, PLATFORM_ID, viewChild, ViewChild, HostListener, Directive, ApplicationRef, Injector, createComponent, Injectable, model, HostBinding } from '@angular/core';
|
|
4
|
+
import { Input, Component, EventEmitter, Output, input, computed, output, signal, effect, forwardRef, inject, ElementRef, PLATFORM_ID, viewChild, ViewChild, HostListener, Directive, ApplicationRef, Injector, DestroyRef, createComponent, Injectable, model, HostBinding } from '@angular/core';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
6
6
|
import * as i1$2 from '@angular/router';
|
|
7
|
-
import { RouterModule, RouterLink } from '@angular/router';
|
|
7
|
+
import { RouterModule, RouterLink, Router, NavigationStart } from '@angular/router';
|
|
8
8
|
import * as i1$3 from '@angular/forms';
|
|
9
9
|
import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
|
|
10
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
11
|
+
import { filter } from 'rxjs';
|
|
10
12
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
11
13
|
import * as i1$4 from '@angular/cdk/overlay';
|
|
12
14
|
|
|
@@ -4276,7 +4278,7 @@ class DropdownSelectComponent {
|
|
|
4276
4278
|
}
|
|
4277
4279
|
}
|
|
4278
4280
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4279
|
-
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 } }, 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 (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n>\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\">\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__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
|
|
4281
|
+
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 } }, 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 (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n>\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\">\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__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", "readonly", "required", "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"], outputs: ["opened", "closed"] }] });
|
|
4280
4282
|
}
|
|
4281
4283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, decorators: [{
|
|
4282
4284
|
type: Component,
|
|
@@ -4287,7 +4289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4287
4289
|
InputSearchComponent,
|
|
4288
4290
|
LinkActionComponent,
|
|
4289
4291
|
OverlayComponent,
|
|
4290
|
-
], 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 <!-- 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\">\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__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
|
|
4292
|
+
], 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 <!-- 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\">\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__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"] }]
|
|
4291
4293
|
}], ctorParameters: () => [], propDecorators: { overlay: [{
|
|
4292
4294
|
type: ViewChild,
|
|
4293
4295
|
args: [OverlayComponent]
|
|
@@ -4853,7 +4855,7 @@ class InputUploadComponent {
|
|
|
4853
4855
|
useExisting: forwardRef(() => InputUploadComponent),
|
|
4854
4856
|
multi: true,
|
|
4855
4857
|
},
|
|
4856
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n [id]=\"uniqueId\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled || isLoading\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n [for]=\"uniqueId\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ isLoading ? '' :
|
|
4858
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n [id]=\"uniqueId\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled || isLoading\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n [for]=\"uniqueId\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n class=\"c-text-input__upload-label\"\n >\n {{ isLoading ? '' : fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled || isLoading\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"uploadsimple-regular\"\n (click)=\"fileInput.click()\"\n >\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text\n [text]=\"helperText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text\n variant=\"danger\"\n [text]=\"alertText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text\n variant=\"success\"\n [text]=\"successText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{--input-padding-y: var(--space-component-padding-md);--input-padding-x-right: var(--space-component-padding-sm);--input-padding-x-left: var(--space-component-padding-lg);width:100%;height:48px;box-sizing:border-box;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--input-padding-y) var(--input-padding-x-right) var(--input-padding-y) var(--input-padding-x-left);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input--no-file{color:var(--color-textfield-content-placeholder)}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-right) - 1px) calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-left) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__upload-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:calc(var(--space-component-padding-sm) + 32px);display:block;cursor:pointer}.c-text-input__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
|
|
4857
4859
|
}
|
|
4858
4860
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputUploadComponent, decorators: [{
|
|
4859
4861
|
type: Component,
|
|
@@ -4870,7 +4872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4870
4872
|
useExisting: forwardRef(() => InputUploadComponent),
|
|
4871
4873
|
multi: true,
|
|
4872
4874
|
},
|
|
4873
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n [id]=\"uniqueId\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled || isLoading\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n [for]=\"uniqueId\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ isLoading ? '' :
|
|
4875
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n [id]=\"uniqueId\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled || isLoading\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n [for]=\"uniqueId\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n class=\"c-text-input__upload-label\"\n >\n {{ isLoading ? '' : fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled || isLoading\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"uploadsimple-regular\"\n (click)=\"fileInput.click()\"\n >\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text\n [text]=\"helperText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text\n variant=\"danger\"\n [text]=\"alertText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text\n variant=\"success\"\n [text]=\"successText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{--input-padding-y: var(--space-component-padding-md);--input-padding-x-right: var(--space-component-padding-sm);--input-padding-x-left: var(--space-component-padding-lg);width:100%;height:48px;box-sizing:border-box;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--input-padding-y) var(--input-padding-x-right) var(--input-padding-y) var(--input-padding-x-left);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input--no-file{color:var(--color-textfield-content-placeholder)}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-right) - 1px) calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-left) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__upload-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:calc(var(--space-component-padding-sm) + 32px);display:block;cursor:pointer}.c-text-input__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;z-index:1}\n"] }]
|
|
4874
4876
|
}], propDecorators: { label: [{
|
|
4875
4877
|
type: Input
|
|
4876
4878
|
}], placeholder: [{
|
|
@@ -5343,6 +5345,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
5343
5345
|
class ModalService {
|
|
5344
5346
|
appRef = inject(ApplicationRef);
|
|
5345
5347
|
injector = inject(Injector);
|
|
5348
|
+
router = inject(Router);
|
|
5349
|
+
destroyRef = inject(DestroyRef);
|
|
5350
|
+
platformId = inject(PLATFORM_ID);
|
|
5351
|
+
openModals = new Map();
|
|
5352
|
+
constructor() {
|
|
5353
|
+
this.subscribeToNavigationEvents();
|
|
5354
|
+
}
|
|
5355
|
+
subscribeToNavigationEvents() {
|
|
5356
|
+
if (!isPlatformBrowser(this.platformId)) {
|
|
5357
|
+
return;
|
|
5358
|
+
}
|
|
5359
|
+
this.router.events
|
|
5360
|
+
.pipe(filter((event) => event instanceof NavigationStart), takeUntilDestroyed(this.destroyRef))
|
|
5361
|
+
.subscribe(() => {
|
|
5362
|
+
this.closeAll();
|
|
5363
|
+
});
|
|
5364
|
+
}
|
|
5365
|
+
closeAll() {
|
|
5366
|
+
const modalsToClose = Array.from(this.openModals.values());
|
|
5367
|
+
modalsToClose.forEach((entry) => {
|
|
5368
|
+
entry.modalRefResult.close();
|
|
5369
|
+
});
|
|
5370
|
+
}
|
|
5346
5371
|
open(component, config = {}) {
|
|
5347
5372
|
// Create modal component
|
|
5348
5373
|
const modalRef = createComponent(ModalComponent, {
|
|
@@ -5367,92 +5392,123 @@ class ModalService {
|
|
|
5367
5392
|
const afterClosedPromise = new Promise((resolve) => {
|
|
5368
5393
|
resolvePromise = resolve;
|
|
5369
5394
|
});
|
|
5395
|
+
// Create modalRefResult early so it can be used in callbacks
|
|
5396
|
+
const modalRefResult = {
|
|
5397
|
+
close: (resultValue) => {
|
|
5398
|
+
result = resultValue;
|
|
5399
|
+
this.closeModal(modalRefResult);
|
|
5400
|
+
},
|
|
5401
|
+
afterClosed: () => afterClosedPromise,
|
|
5402
|
+
getContentComponent: () => contentRef.instance,
|
|
5403
|
+
updatePrimaryButton: (buttonUpdate) => {
|
|
5404
|
+
modalRef.instance.updatePrimaryButton(buttonUpdate);
|
|
5405
|
+
},
|
|
5406
|
+
updateSecondaryButton: (buttonUpdate) => {
|
|
5407
|
+
modalRef.instance.updateSecondaryButton(buttonUpdate);
|
|
5408
|
+
},
|
|
5409
|
+
updateTitle: (title) => {
|
|
5410
|
+
modalRef.instance.updateTitle(title);
|
|
5411
|
+
},
|
|
5412
|
+
updateShowCloseButton: (showCloseButton) => {
|
|
5413
|
+
modalRef.instance.updateShowCloseButton(showCloseButton);
|
|
5414
|
+
},
|
|
5415
|
+
};
|
|
5416
|
+
// Store entry for tracking (resolvePromise will be assigned by the Promise executor)
|
|
5417
|
+
const entry = {
|
|
5418
|
+
modalRef,
|
|
5419
|
+
contentRef,
|
|
5420
|
+
resolvePromise: resolvePromise,
|
|
5421
|
+
result,
|
|
5422
|
+
modalRefResult,
|
|
5423
|
+
};
|
|
5424
|
+
// Update resolvePromise reference after Promise executor runs
|
|
5425
|
+
afterClosedPromise.then(() => { }).catch(() => { });
|
|
5426
|
+
entry.resolvePromise = resolvePromise;
|
|
5427
|
+
this.openModals.set(modalRefResult, entry);
|
|
5370
5428
|
modalRef.instance.onPrimaryButtonClick = () => {
|
|
5371
5429
|
result = contentRef.instance?.getModalResult?.();
|
|
5430
|
+
entry.result = result;
|
|
5372
5431
|
if (config.onPrimaryClick) {
|
|
5373
|
-
// Pass the closeModal function to the callback so it can close the modal when ready
|
|
5374
5432
|
config.onPrimaryClick(result, (resultValue) => {
|
|
5375
5433
|
if (resultValue !== undefined) {
|
|
5376
5434
|
result = resultValue;
|
|
5435
|
+
entry.result = result;
|
|
5377
5436
|
}
|
|
5378
|
-
this.closeModal(
|
|
5437
|
+
this.closeModal(modalRefResult);
|
|
5379
5438
|
});
|
|
5380
5439
|
}
|
|
5381
5440
|
else {
|
|
5382
|
-
|
|
5383
|
-
this.closeModal(modalRef, contentRef, resolvePromise, result);
|
|
5441
|
+
this.closeModal(modalRefResult);
|
|
5384
5442
|
}
|
|
5385
5443
|
};
|
|
5386
5444
|
modalRef.instance.onSecondaryButtonClick = () => {
|
|
5387
5445
|
result = undefined;
|
|
5446
|
+
entry.result = result;
|
|
5388
5447
|
if (config.onSecondaryClick) {
|
|
5389
|
-
// Pass the closeModal function to the callback so it can close the modal when ready
|
|
5390
5448
|
config.onSecondaryClick((resultValue) => {
|
|
5391
5449
|
if (resultValue !== undefined) {
|
|
5392
5450
|
result = resultValue;
|
|
5451
|
+
entry.result = result;
|
|
5393
5452
|
}
|
|
5394
|
-
this.closeModal(
|
|
5453
|
+
this.closeModal(modalRefResult);
|
|
5395
5454
|
});
|
|
5396
5455
|
}
|
|
5397
5456
|
else {
|
|
5398
|
-
|
|
5399
|
-
this.closeModal(modalRef, contentRef, resolvePromise, result);
|
|
5457
|
+
this.closeModal(modalRefResult);
|
|
5400
5458
|
}
|
|
5401
5459
|
};
|
|
5402
5460
|
modalRef.instance.onCloseButtonClick = () => {
|
|
5403
5461
|
result = undefined;
|
|
5462
|
+
entry.result = result;
|
|
5404
5463
|
if (config.onClose) {
|
|
5405
|
-
// Pass the closeModal function to the callback so it can close the modal when ready
|
|
5406
5464
|
config.onClose((resultValue) => {
|
|
5407
5465
|
if (resultValue !== undefined) {
|
|
5408
5466
|
result = resultValue;
|
|
5467
|
+
entry.result = result;
|
|
5409
5468
|
}
|
|
5410
|
-
this.closeModal(
|
|
5469
|
+
this.closeModal(modalRefResult);
|
|
5411
5470
|
});
|
|
5412
5471
|
}
|
|
5413
5472
|
else {
|
|
5414
|
-
|
|
5415
|
-
this.closeModal(modalRef, contentRef, resolvePromise, result);
|
|
5473
|
+
this.closeModal(modalRefResult);
|
|
5416
5474
|
}
|
|
5417
5475
|
};
|
|
5418
5476
|
modalRef.instance.onBackdropClick = () => {
|
|
5419
|
-
// Only proceed if closeOnBackdropClick is true
|
|
5420
5477
|
if (!modalRef.instance.getCloseOnBackdropClick()) {
|
|
5421
5478
|
return;
|
|
5422
5479
|
}
|
|
5423
5480
|
result = undefined;
|
|
5481
|
+
entry.result = result;
|
|
5424
5482
|
if (config.onClose) {
|
|
5425
|
-
// Pass the closeModal function to the callback so it can close the modal when ready
|
|
5426
5483
|
config.onClose((resultValue) => {
|
|
5427
5484
|
if (resultValue !== undefined) {
|
|
5428
5485
|
result = resultValue;
|
|
5486
|
+
entry.result = result;
|
|
5429
5487
|
}
|
|
5430
|
-
this.closeModal(
|
|
5488
|
+
this.closeModal(modalRefResult);
|
|
5431
5489
|
});
|
|
5432
5490
|
}
|
|
5433
5491
|
else {
|
|
5434
|
-
|
|
5435
|
-
this.closeModal(modalRef, contentRef, resolvePromise, result);
|
|
5492
|
+
this.closeModal(modalRefResult);
|
|
5436
5493
|
}
|
|
5437
5494
|
};
|
|
5438
5495
|
modalRef.instance.onEscapeKey = () => {
|
|
5439
|
-
// Only proceed if closeOnBackdropClick is true
|
|
5440
5496
|
if (!modalRef.instance.getCloseOnBackdropClick()) {
|
|
5441
5497
|
return;
|
|
5442
5498
|
}
|
|
5443
5499
|
result = undefined;
|
|
5500
|
+
entry.result = result;
|
|
5444
5501
|
if (config.onClose) {
|
|
5445
|
-
// Pass the closeModal function to the callback so it can close the modal when ready
|
|
5446
5502
|
config.onClose((resultValue) => {
|
|
5447
5503
|
if (resultValue !== undefined) {
|
|
5448
5504
|
result = resultValue;
|
|
5505
|
+
entry.result = result;
|
|
5449
5506
|
}
|
|
5450
|
-
this.closeModal(
|
|
5507
|
+
this.closeModal(modalRefResult);
|
|
5451
5508
|
});
|
|
5452
5509
|
}
|
|
5453
5510
|
else {
|
|
5454
|
-
|
|
5455
|
-
this.closeModal(modalRef, contentRef, resolvePromise, result);
|
|
5511
|
+
this.closeModal(modalRefResult);
|
|
5456
5512
|
}
|
|
5457
5513
|
};
|
|
5458
5514
|
// Show modal using the setOpen method
|
|
@@ -5466,7 +5522,6 @@ class ModalService {
|
|
|
5466
5522
|
}
|
|
5467
5523
|
else {
|
|
5468
5524
|
console.error('Content container not found in modal');
|
|
5469
|
-
// Try alternative selectors as fallback
|
|
5470
5525
|
const alternativeContainer = modalRef.location.nativeElement.querySelector('[ng-content]') ||
|
|
5471
5526
|
modalRef.location.nativeElement.querySelector('.c-modal__content__body') ||
|
|
5472
5527
|
modalRef.location.nativeElement.querySelector('.c-modal__content');
|
|
@@ -5478,29 +5533,16 @@ class ModalService {
|
|
|
5478
5533
|
}
|
|
5479
5534
|
}
|
|
5480
5535
|
}, 10);
|
|
5481
|
-
return
|
|
5482
|
-
close: (resultValue) => {
|
|
5483
|
-
result = resultValue;
|
|
5484
|
-
this.closeModal(modalRef, contentRef, resolvePromise, result);
|
|
5485
|
-
},
|
|
5486
|
-
afterClosed: () => afterClosedPromise,
|
|
5487
|
-
getContentComponent: () => contentRef.instance,
|
|
5488
|
-
updatePrimaryButton: (buttonUpdate) => {
|
|
5489
|
-
modalRef.instance.updatePrimaryButton(buttonUpdate);
|
|
5490
|
-
},
|
|
5491
|
-
updateSecondaryButton: (buttonUpdate) => {
|
|
5492
|
-
modalRef.instance.updateSecondaryButton(buttonUpdate);
|
|
5493
|
-
},
|
|
5494
|
-
updateTitle: (title) => {
|
|
5495
|
-
modalRef.instance.updateTitle(title);
|
|
5496
|
-
},
|
|
5497
|
-
updateShowCloseButton: (showCloseButton) => {
|
|
5498
|
-
modalRef.instance.updateShowCloseButton(showCloseButton);
|
|
5499
|
-
},
|
|
5500
|
-
};
|
|
5536
|
+
return modalRefResult;
|
|
5501
5537
|
}
|
|
5502
|
-
closeModal(
|
|
5538
|
+
closeModal(modalRefResult) {
|
|
5539
|
+
const entry = this.openModals.get(modalRefResult);
|
|
5540
|
+
if (!entry) {
|
|
5541
|
+
return;
|
|
5542
|
+
}
|
|
5543
|
+
const { modalRef, contentRef, resolvePromise, result } = entry;
|
|
5503
5544
|
modalRef.instance.setOpen(false);
|
|
5545
|
+
this.openModals.delete(modalRefResult);
|
|
5504
5546
|
// Wait for animation to complete before destroying
|
|
5505
5547
|
setTimeout(() => {
|
|
5506
5548
|
this.appRef.detachView(modalRef.hostView);
|
|
@@ -5518,7 +5560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
5518
5560
|
args: [{
|
|
5519
5561
|
providedIn: 'root',
|
|
5520
5562
|
}]
|
|
5521
|
-
}] });
|
|
5563
|
+
}], ctorParameters: () => [] });
|
|
5522
5564
|
|
|
5523
5565
|
class OverlayTriggerDirective {
|
|
5524
5566
|
libOverlayTriggerFor = input.required();
|