@crowdfarming/oliva-ds 1.65.0 → 1.66.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.
- package/fesm2022/crowdfarming-oliva-ds.mjs +55 -35
- package/fesm2022/crowdfarming-oliva-ds.mjs.map +1 -1
- package/lib/dropdown-action/src/lib/dropdown-action/dropdown-action.component.d.ts +2 -1
- package/lib/dropdown-select/src/lib/dropdown-select/dropdown-select.component.d.ts +2 -1
- package/lib/input-date/src/lib/input-date/input-date.component.d.ts +8 -3
- package/lib/input-search/src/lib/input-search/input-search.component.d.ts +1 -2
- package/lib/overlay/src/lib/overlay/overlay.component.d.ts +2 -1
- package/lib/select/src/lib/select/select.component.d.ts +2 -1
- package/lib/text-input/src/lib/text-input/text-input.component.d.ts +0 -1
- package/package.json +1 -1
|
@@ -3326,6 +3326,7 @@ class OverlayComponent {
|
|
|
3326
3326
|
align = input('left');
|
|
3327
3327
|
appendToBody = input(false);
|
|
3328
3328
|
autoFocus = input(true);
|
|
3329
|
+
safeAreaInsetBottom = input(false);
|
|
3329
3330
|
// Outputs
|
|
3330
3331
|
opened = output();
|
|
3331
3332
|
closed = output();
|
|
@@ -3652,11 +3653,11 @@ class OverlayComponent {
|
|
|
3652
3653
|
}
|
|
3653
3654
|
}
|
|
3654
3655
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3655
|
-
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 } }, 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 class=\"c-overlay__content\">\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
|
|
3656
|
+
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 class=\"c-overlay__content\">\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__content{flex:1;overflow-y:auto}.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"] }] });
|
|
3656
3657
|
}
|
|
3657
3658
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayComponent, decorators: [{
|
|
3658
3659
|
type: Component,
|
|
3659
|
-
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 class=\"c-overlay__content\">\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
|
|
3660
|
+
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 class=\"c-overlay__content\">\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__content{flex:1;overflow-y:auto}.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"] }]
|
|
3660
3661
|
}], ctorParameters: () => [] });
|
|
3661
3662
|
|
|
3662
3663
|
class DropdownActionComponent {
|
|
@@ -3668,6 +3669,7 @@ class DropdownActionComponent {
|
|
|
3668
3669
|
appendToBody = input(false);
|
|
3669
3670
|
autoFocus = input(true);
|
|
3670
3671
|
width = input('fit-content');
|
|
3672
|
+
safeAreaInsetBottom = input(false);
|
|
3671
3673
|
// Outputs
|
|
3672
3674
|
actionClicked = output();
|
|
3673
3675
|
// Private signals
|
|
@@ -3735,11 +3737,11 @@ class DropdownActionComponent {
|
|
|
3735
3737
|
this._isOverlayOpen.set(false);
|
|
3736
3738
|
}
|
|
3737
3739
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3738
|
-
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 } }, 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
|
|
3740
|
+
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"] }] });
|
|
3739
3741
|
}
|
|
3740
3742
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownActionComponent, decorators: [{
|
|
3741
3743
|
type: Component,
|
|
3742
|
-
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
|
|
3744
|
+
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"] }]
|
|
3743
3745
|
}], ctorParameters: () => [], propDecorators: { overlay: [{
|
|
3744
3746
|
type: ViewChild,
|
|
3745
3747
|
args: [OverlayComponent]
|
|
@@ -3777,7 +3779,6 @@ class InputSearchComponent {
|
|
|
3777
3779
|
error = false;
|
|
3778
3780
|
success = false;
|
|
3779
3781
|
disabled = false;
|
|
3780
|
-
readonly = false;
|
|
3781
3782
|
required = false;
|
|
3782
3783
|
isLoading = false;
|
|
3783
3784
|
size = 'md';
|
|
@@ -3821,7 +3822,6 @@ class InputSearchComponent {
|
|
|
3821
3822
|
this.error ? 'is-error' : '',
|
|
3822
3823
|
this.success ? 'is-success' : '',
|
|
3823
3824
|
this.disabled ? 'is-disabled' : '',
|
|
3824
|
-
this.readonly ? 'is-readonly' : '',
|
|
3825
3825
|
this.isLoading ? 'is-loading' : '',
|
|
3826
3826
|
].filter(Boolean);
|
|
3827
3827
|
}
|
|
@@ -3829,13 +3829,13 @@ class InputSearchComponent {
|
|
|
3829
3829
|
return this.helperText ? 'search-input-helper' : null;
|
|
3830
3830
|
}
|
|
3831
3831
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3832
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputSearchComponent, isStandalone: true, selector: "lib-input-search", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled",
|
|
3832
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputSearchComponent, isStandalone: true, selector: "lib-input-search", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", required: "required", isLoading: "isLoading", size: "size", fullWidth: "fullWidth", clearButton: "clearButton" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
3833
3833
|
{
|
|
3834
3834
|
provide: NG_VALUE_ACCESSOR,
|
|
3835
3835
|
useExisting: forwardRef(() => InputSearchComponent),
|
|
3836
3836
|
multi: true,
|
|
3837
3837
|
},
|
|
3838
|
-
], ngImport: i0, template: "<div\n class=\"c-text-input\"\n [class.c-text-input--full-width]=\"fullWidth\"\n [class.c-text-input--with-clear-button]=\"clearButton\"\n>\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 type=\"search\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n [value]=\"isLoading ? '' : _value\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\n [
|
|
3838
|
+
], ngImport: i0, template: "<div\n class=\"c-text-input\"\n [class.c-text-input--full-width]=\"fullWidth\"\n [class.c-text-input--with-clear-button]=\"clearButton\"\n>\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 type=\"search\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n [value]=\"isLoading ? '' : _value\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"label ? label : 'Search input'\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon\n name=\"magnifyingglass-regular\"\n size=\"md\"\n [color]=\"\n disabled || isLoading\n ? 'textfield-content-disabled'\n : 'textfield-content-placeholder'\n \"\n ></lib-icon>\n </span>\n\n <lib-button-icon\n *ngIf=\"clearButton && _value && !isLoading\"\n variant=\"neutral\"\n size=\"sm\"\n iconName=\"x-regular\"\n class=\"c-text-input__icon c-text-input__icon--right\"\n [disabled]=\"disabled || isLoading\"\n (clicked)=\"clearInput()\"\n ariaLabel=\"Limpiar\"\n ></lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-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: 2rem;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::-webkit-search-decoration,.c-text-input__input::-webkit-search-cancel-button,.c-text-input__input::-webkit-search-results-button,.c-text-input__input::-webkit-search-results-decoration{appearance:none;-webkit-appearance:none}.c-text-input__input::-ms-clear,.c-text-input__input::-ms-reveal{display:none;width:0;height:0}.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: 2rem}.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: 2rem}.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-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input--with-clear-button .c-text-input__input{padding-right:2.5rem}.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__icon{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__icon--right{left:auto;right:var(--space-component-padding-sm)}\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: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
3839
3839
|
}
|
|
3840
3840
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, decorators: [{
|
|
3841
3841
|
type: Component,
|
|
@@ -3852,7 +3852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3852
3852
|
useExisting: forwardRef(() => InputSearchComponent),
|
|
3853
3853
|
multi: true,
|
|
3854
3854
|
},
|
|
3855
|
-
], template: "<div\n class=\"c-text-input\"\n [class.c-text-input--full-width]=\"fullWidth\"\n [class.c-text-input--with-clear-button]=\"clearButton\"\n>\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 type=\"search\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n [value]=\"isLoading ? '' : _value\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\n [
|
|
3855
|
+
], template: "<div\n class=\"c-text-input\"\n [class.c-text-input--full-width]=\"fullWidth\"\n [class.c-text-input--with-clear-button]=\"clearButton\"\n>\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 type=\"search\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n [value]=\"isLoading ? '' : _value\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"label ? label : 'Search input'\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon\n name=\"magnifyingglass-regular\"\n size=\"md\"\n [color]=\"\n disabled || isLoading\n ? 'textfield-content-disabled'\n : 'textfield-content-placeholder'\n \"\n ></lib-icon>\n </span>\n\n <lib-button-icon\n *ngIf=\"clearButton && _value && !isLoading\"\n variant=\"neutral\"\n size=\"sm\"\n iconName=\"x-regular\"\n class=\"c-text-input__icon c-text-input__icon--right\"\n [disabled]=\"disabled || isLoading\"\n (clicked)=\"clearInput()\"\n ariaLabel=\"Limpiar\"\n ></lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-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: 2rem;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::-webkit-search-decoration,.c-text-input__input::-webkit-search-cancel-button,.c-text-input__input::-webkit-search-results-button,.c-text-input__input::-webkit-search-results-decoration{appearance:none;-webkit-appearance:none}.c-text-input__input::-ms-clear,.c-text-input__input::-ms-reveal{display:none;width:0;height:0}.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: 2rem}.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: 2rem}.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-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input--with-clear-button .c-text-input__input{padding-right:2.5rem}.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__icon{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__icon--right{left:auto;right:var(--space-component-padding-sm)}\n"] }]
|
|
3856
3856
|
}], propDecorators: { label: [{
|
|
3857
3857
|
type: Input
|
|
3858
3858
|
}], placeholder: [{
|
|
@@ -3869,8 +3869,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3869
3869
|
type: Input
|
|
3870
3870
|
}], disabled: [{
|
|
3871
3871
|
type: Input
|
|
3872
|
-
}], readonly: [{
|
|
3873
|
-
type: Input
|
|
3874
3872
|
}], required: [{
|
|
3875
3873
|
type: Input
|
|
3876
3874
|
}], isLoading: [{
|
|
@@ -4026,6 +4024,7 @@ class DropdownSelectComponent {
|
|
|
4026
4024
|
appendToBody = input(false);
|
|
4027
4025
|
autoFocus = input(true);
|
|
4028
4026
|
width = input('fit-content');
|
|
4027
|
+
safeAreaInsetBottom = input(false);
|
|
4029
4028
|
// Outputs
|
|
4030
4029
|
optionSelected = output();
|
|
4031
4030
|
optionDeselected = output();
|
|
@@ -4303,7 +4302,7 @@ class DropdownSelectComponent {
|
|
|
4303
4302
|
}
|
|
4304
4303
|
}
|
|
4305
4304
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4306
|
-
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", "
|
|
4305
|
+
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", "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"] }] });
|
|
4307
4306
|
}
|
|
4308
4307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, decorators: [{
|
|
4309
4308
|
type: Component,
|
|
@@ -4314,7 +4313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4314
4313
|
InputSearchComponent,
|
|
4315
4314
|
LinkActionComponent,
|
|
4316
4315
|
OverlayComponent,
|
|
4317
|
-
], 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"] }]
|
|
4316
|
+
], 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"] }]
|
|
4318
4317
|
}], ctorParameters: () => [], propDecorators: { overlay: [{
|
|
4319
4318
|
type: ViewChild,
|
|
4320
4319
|
args: [OverlayComponent]
|
|
@@ -4352,17 +4351,35 @@ class InputDateComponent {
|
|
|
4352
4351
|
error = false;
|
|
4353
4352
|
success = false;
|
|
4354
4353
|
disabled = false;
|
|
4355
|
-
readonly = false;
|
|
4356
4354
|
required = false;
|
|
4357
4355
|
isLoading = false;
|
|
4358
4356
|
size = 'md';
|
|
4359
4357
|
fullWidth = false;
|
|
4358
|
+
pickerType = 'custom';
|
|
4360
4359
|
emitValue = new EventEmitter();
|
|
4360
|
+
openCalendar = new EventEmitter();
|
|
4361
|
+
dateInput = viewChild('dateInput');
|
|
4361
4362
|
_value = '';
|
|
4363
|
+
_inputValue = ''; // yyyy-MM-dd format for the input
|
|
4362
4364
|
onChangeFn = () => { };
|
|
4363
4365
|
onTouchedFn = () => { };
|
|
4364
4366
|
writeValue(value) {
|
|
4365
4367
|
this._value = value ?? '';
|
|
4368
|
+
this._inputValue = this.convertToInputFormat(this._value);
|
|
4369
|
+
}
|
|
4370
|
+
// Convert dd/mm/yyyy to yyyy-MM-dd
|
|
4371
|
+
convertToInputFormat(value) {
|
|
4372
|
+
if (!value || !value.includes('/'))
|
|
4373
|
+
return '';
|
|
4374
|
+
const [day, month, year] = value.split('/');
|
|
4375
|
+
return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
|
|
4376
|
+
}
|
|
4377
|
+
// Convert yyyy-MM-dd to dd/mm/yyyy
|
|
4378
|
+
convertToDisplayFormat(value) {
|
|
4379
|
+
if (!value || !value.includes('-'))
|
|
4380
|
+
return '';
|
|
4381
|
+
const [year, month, day] = value.split('-');
|
|
4382
|
+
return `${day.padStart(2, '0')}/${month.padStart(2, '0')}/${year}`;
|
|
4366
4383
|
}
|
|
4367
4384
|
registerOnChange(fn) {
|
|
4368
4385
|
this.onChangeFn = fn;
|
|
@@ -4380,7 +4397,6 @@ class InputDateComponent {
|
|
|
4380
4397
|
this.error ? 'is-error' : '',
|
|
4381
4398
|
this.success ? 'is-success' : '',
|
|
4382
4399
|
this.disabled ? 'is-disabled' : '',
|
|
4383
|
-
this.readonly ? 'is-readonly' : '',
|
|
4384
4400
|
this.isLoading ? 'is-loading' : '',
|
|
4385
4401
|
].filter(Boolean);
|
|
4386
4402
|
}
|
|
@@ -4388,11 +4404,19 @@ class InputDateComponent {
|
|
|
4388
4404
|
return this.helperText ? 'password-input-helper' : null;
|
|
4389
4405
|
}
|
|
4390
4406
|
toggleCalendar() {
|
|
4391
|
-
|
|
4407
|
+
if (this.pickerType === 'native') {
|
|
4408
|
+
// Open native browser datepicker
|
|
4409
|
+
this.dateInput()?.nativeElement.showPicker();
|
|
4410
|
+
}
|
|
4411
|
+
else {
|
|
4412
|
+
// Emit event for custom datepicker modal
|
|
4413
|
+
this.openCalendar.emit();
|
|
4414
|
+
}
|
|
4392
4415
|
}
|
|
4393
4416
|
onInput(event) {
|
|
4394
4417
|
const input = event.target;
|
|
4395
|
-
this.
|
|
4418
|
+
this._inputValue = input.value; // yyyy-MM-dd from input
|
|
4419
|
+
this._value = this.convertToDisplayFormat(input.value); // dd/mm/yyyy for output
|
|
4396
4420
|
this.onChangeFn(this._value);
|
|
4397
4421
|
this.emitValue.emit(this._value);
|
|
4398
4422
|
}
|
|
@@ -4400,13 +4424,13 @@ class InputDateComponent {
|
|
|
4400
4424
|
this.onTouchedFn();
|
|
4401
4425
|
}
|
|
4402
4426
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4403
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4427
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: InputDateComponent, isStandalone: true, selector: "lib-input-date", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", required: "required", isLoading: "isLoading", size: "size", fullWidth: "fullWidth", pickerType: "pickerType" }, outputs: { emitValue: "emitValue", openCalendar: "openCalendar" }, providers: [
|
|
4404
4428
|
{
|
|
4405
4429
|
provide: NG_VALUE_ACCESSOR,
|
|
4406
4430
|
useExisting: forwardRef(() => InputDateComponent),
|
|
4407
4431
|
multi: true,
|
|
4408
4432
|
},
|
|
4409
|
-
], 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
|
|
4433
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: 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\n class=\"c-text-input__wrapper\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"toggleCalendar()\"\n (keyup.enter)=\"toggleCalendar()\"\n >\n <input\n #dateInput\n type=\"date\"\n [value]=\"isLoading ? '' : _inputValue\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n aria-label=\"date\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"Calendario\"\n [disabled]=\"disabled || isLoading\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"calendarblank-regular\"\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(--size-button-min-height-lg);--input-padding-x-left: var(--space-component-padding-lg);width:100%;height:var(--size-button-min-height-lg);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);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.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:var(--size-button-min-height-sm);--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--size-button-min-height-sm);--input-padding-x-left: var(--space-component-padding-sm)}.c-text-input__input--md{height:var(--size-button-min-height-md);--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--size-button-min-height-md);--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-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__wrapper input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.c-text-input__wrapper input[type=date]::-webkit-inner-spin-button,.c-text-input__wrapper input[type=date]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.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}\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"] }] });
|
|
4410
4434
|
}
|
|
4411
4435
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
4412
4436
|
type: Component,
|
|
@@ -4422,7 +4446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4422
4446
|
useExisting: forwardRef(() => InputDateComponent),
|
|
4423
4447
|
multi: true,
|
|
4424
4448
|
},
|
|
4425
|
-
], 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
|
|
4449
|
+
], 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\n class=\"c-text-input__wrapper\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"toggleCalendar()\"\n (keyup.enter)=\"toggleCalendar()\"\n >\n <input\n #dateInput\n type=\"date\"\n [value]=\"isLoading ? '' : _inputValue\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n aria-label=\"date\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"Calendario\"\n [disabled]=\"disabled || isLoading\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"calendarblank-regular\"\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(--size-button-min-height-lg);--input-padding-x-left: var(--space-component-padding-lg);width:100%;height:var(--size-button-min-height-lg);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);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.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:var(--size-button-min-height-sm);--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--size-button-min-height-sm);--input-padding-x-left: var(--space-component-padding-sm)}.c-text-input__input--md{height:var(--size-button-min-height-md);--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--size-button-min-height-md);--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-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__wrapper input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.c-text-input__wrapper input[type=date]::-webkit-inner-spin-button,.c-text-input__wrapper input[type=date]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.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}\n"] }]
|
|
4426
4450
|
}], propDecorators: { label: [{
|
|
4427
4451
|
type: Input
|
|
4428
4452
|
}], placeholder: [{
|
|
@@ -4439,8 +4463,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4439
4463
|
type: Input
|
|
4440
4464
|
}], disabled: [{
|
|
4441
4465
|
type: Input
|
|
4442
|
-
}], readonly: [{
|
|
4443
|
-
type: Input
|
|
4444
4466
|
}], required: [{
|
|
4445
4467
|
type: Input
|
|
4446
4468
|
}], isLoading: [{
|
|
@@ -4449,8 +4471,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4449
4471
|
type: Input
|
|
4450
4472
|
}], fullWidth: [{
|
|
4451
4473
|
type: Input
|
|
4474
|
+
}], pickerType: [{
|
|
4475
|
+
type: Input
|
|
4452
4476
|
}], emitValue: [{
|
|
4453
4477
|
type: Output
|
|
4478
|
+
}], openCalendar: [{
|
|
4479
|
+
type: Output
|
|
4454
4480
|
}] } });
|
|
4455
4481
|
|
|
4456
4482
|
class InputNumberComponent {
|
|
@@ -6061,6 +6087,7 @@ class SelectComponent {
|
|
|
6061
6087
|
direction = input('down');
|
|
6062
6088
|
appendToBody = input(false);
|
|
6063
6089
|
autoFocus = input(true);
|
|
6090
|
+
safeAreaInsetBottom = input(false);
|
|
6064
6091
|
cancelButtonText = input('Cancel');
|
|
6065
6092
|
acceptButtonText = input('Accept');
|
|
6066
6093
|
valueChange = output();
|
|
@@ -6296,13 +6323,13 @@ class SelectComponent {
|
|
|
6296
6323
|
this.onChange(value);
|
|
6297
6324
|
}
|
|
6298
6325
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6299
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "lib-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 }, 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 }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
|
|
6326
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "lib-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 }, 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 }, safeAreaInsetBottom: { classPropertyName: "safeAreaInsetBottom", publicName: "safeAreaInsetBottom", 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 } }, outputs: { valueChange: "valueChange" }, providers: [
|
|
6300
6327
|
{
|
|
6301
6328
|
provide: NG_VALUE_ACCESSOR,
|
|
6302
6329
|
useExisting: forwardRef(() => SelectComponent),
|
|
6303
6330
|
multi: true,
|
|
6304
6331
|
},
|
|
6305
|
-
], ngImport: i0, template: "<div\n class=\"c-select\"\n [class.c-select--full-width]=\"fullWidth()\"\n [class.c-select--disabled]=\"disabled()\"\n [class.c-select--error]=\"isError()\"\n [class.c-select--size-sm]=\"size() === 'sm'\"\n [class.c-select--size-md]=\"size() === 'md'\"\n [class.c-select--size-lg]=\"size() === 'lg'\"\n>\n <!-- Label -->\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [required]=\"required()\"\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n [isLoading]=\"isLoading()\"\n ></lib-input-label>\n }\n\n <!-- Select Container -->\n <div class=\"c-select__container\">\n <!-- Select Trigger -->\n <button\n type=\"button\"\n class=\"c-select__trigger\"\n [class.is-loading]=\"isLoading()\"\n [disabled]=\"disabled() || isLoading()\"\n [libDropdownSelectTriggerFor]=\"dropdownSelect\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-label]=\"placeholder()\"\n >\n <!-- Selected Content Display -->\n <div class=\"c-select__content\">\n @if (isMultiSelect() && hasSelection()) {\n <!-- Multi-select: Show tags -->\n <div class=\"c-select__tags\">\n @for (option of visibleTags(); track option.value) {\n <lib-tag\n [text]=\"option.label\"\n variant=\"neutral\"\n size=\"xs\"\n [closeActive]=\"true\"\n [showBadge]=\"false\"\n (closeEvent)=\"removeOption(option)\"\n >\n </lib-tag>\n } @if (hiddenTagsCount() > 0) {\n <span class=\"c-select__counter\"> +{{ hiddenTagsCount() }} </span>\n }\n </div>\n } @else {\n <!-- Single select: Show text -->\n <span\n class=\"c-select__text\"\n [class.c-select__text--placeholder]=\"!hasSelection()\"\n >\n <!-- Icon for single select -->\n @if (selectedOption()?.icon && !isLoading()) {\n <lib-icon\n [name]=\"selectedOption()?.icon!\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [disabled]=\"disabled() && hasSelection()\"\n >\n </lib-icon>\n }\n <span class=\"c-select__text-value\">\n {{ isLoading() ? '' : displayText() }}\n </span>\n </span>\n }\n </div>\n\n <!-- Caret Icon -->\n <lib-icon\n name=\"caretdown-regular\"\n [color]=\"\n disabled()\n ? 'textfield-content-disabled'\n : 'textfield-content-default'\n \"\n size=\"md\"\n >\n </lib-icon>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"c-select__dropdown\">\n <lib-dropdown-select\n #dropdownSelect\n [options]=\"filteredOptions()\"\n [variant]=\"variant()\"\n [selectedValues]=\"getSelectedValues()\"\n [searchBarEnabled]=\"searchBarEnabled()\"\n [searchPlaceholder]=\"searchPlaceholder()\"\n [disabled]=\"disabled()\"\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [autoFocus]=\"autoFocus()\"\n [cancelButtonText]=\"cancelButtonText()\"\n [acceptButtonText]=\"acceptButtonText()\"\n [width]=\"'stretch'\"\n (searchChanged)=\"onDropdownSearchChanged($event)\"\n (valueChange)=\"onDropdownValueChange($event)\"\n ></lib-dropdown-select>\n </div>\n </div>\n\n <!-- Helper Text -->\n @if (helperText() && !isError()) {\n <lib-helper-text\n [text]=\"helperText()\"\n [disabled]=\"disabled()\"\n [isLoading]=\"isLoading()\"\n ></lib-helper-text>\n }\n\n <!-- Error Text -->\n @if (errorText() && isError()) {\n <lib-helper-text\n variant=\"danger\"\n [text]=\"errorText()\"\n [disabled]=\"disabled()\"\n [isLoading]=\"isLoading()\"\n ></lib-helper-text>\n }\n</div>\n", styles: [".c-select{max-width:300px;display:flex;flex-direction:column;position:relative;gap:var(--space-component-gap-sm);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-select--size-sm .c-select__trigger{min-height:32px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg)}.c-select--full-width{max-width:100%}.c-select--error .c-select__trigger{border-color:var(--color-textfield-border-error)}.c-select--disabled .c-select__trigger{cursor:not-allowed;border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-select--disabled .c-select__text--placeholder,.c-select--disabled .c-select__text{color:var(--color-textfield-content-disabled)}.c-select__required{color:var(--color-feedback-danger-default);margin-left:2px}.c-select__container{position:relative}.c-select__trigger{--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg);display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);border-radius:var(--size-textfield-border-radius);cursor:pointer;text-align:left;padding:var(--select-padding-y) var(--select-padding-x)}.c-select__trigger:hover:not(:disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-select__trigger:focus-visible:not(:disabled){border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--select-padding-y) - 1px) calc(var(--select-padding-x) - 1px);box-shadow:none;outline:none}.c-select__trigger.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-select__content{flex:1;display:flex;align-items:center;min-width:0}.c-select__text{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);color:var(--color-textfield-content-default);display:flex;align-items:center;gap:var(--space-container-gap-xs);min-width:0}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.c-select__text-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.c-select__tags{display:flex;flex-wrap:nowrap;gap:var(--space-component-gap-sm);align-items:center;min-width:0;overflow:hidden}.c-select__counter{background-color:var(--color-core-background-soft);color:var(--color-textfield-content-default);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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }, { kind: "component", type: DropdownSelectComponent, selector: "lib-dropdown-select", inputs: ["options", "variant", "selectedValues", "searchBarEnabled", "searchPlaceholder", "disabled", "cancelButtonText", "acceptButtonText", "align", "direction", "appendToBody", "autoFocus", "width"], outputs: ["optionSelected", "optionDeselected", "searchChanged", "valueChange", "cancelClicked", "acceptClicked"] }, { kind: "directive", type: DropdownSelectTriggerDirective, selector: "[libDropdownSelectTriggerFor]", inputs: ["libDropdownSelectTriggerFor"] }] });
|
|
6332
|
+
], ngImport: i0, template: "<div\n class=\"c-select\"\n [class.c-select--full-width]=\"fullWidth()\"\n [class.c-select--disabled]=\"disabled()\"\n [class.c-select--error]=\"isError()\"\n [class.c-select--size-sm]=\"size() === 'sm'\"\n [class.c-select--size-md]=\"size() === 'md'\"\n [class.c-select--size-lg]=\"size() === 'lg'\"\n>\n <!-- Label -->\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [required]=\"required()\"\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n [isLoading]=\"isLoading()\"\n ></lib-input-label>\n }\n\n <!-- Select Container -->\n <div class=\"c-select__container\">\n <!-- Select Trigger -->\n <button\n type=\"button\"\n class=\"c-select__trigger\"\n [class.is-loading]=\"isLoading()\"\n [disabled]=\"disabled() || isLoading()\"\n [libDropdownSelectTriggerFor]=\"dropdownSelect\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-label]=\"placeholder()\"\n >\n <!-- Selected Content Display -->\n <div class=\"c-select__content\">\n @if (isMultiSelect() && hasSelection()) {\n <!-- Multi-select: Show tags -->\n <div class=\"c-select__tags\">\n @for (option of visibleTags(); track option.value) {\n <lib-tag\n [text]=\"option.label\"\n variant=\"neutral\"\n size=\"xs\"\n [closeActive]=\"true\"\n [showBadge]=\"false\"\n (closeEvent)=\"removeOption(option)\"\n >\n </lib-tag>\n } @if (hiddenTagsCount() > 0) {\n <span class=\"c-select__counter\"> +{{ hiddenTagsCount() }} </span>\n }\n </div>\n } @else {\n <!-- Single select: Show text -->\n <span\n class=\"c-select__text\"\n [class.c-select__text--placeholder]=\"!hasSelection()\"\n >\n <!-- Icon for single select -->\n @if (selectedOption()?.icon && !isLoading()) {\n <lib-icon\n [name]=\"selectedOption()?.icon!\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [disabled]=\"disabled() && hasSelection()\"\n >\n </lib-icon>\n }\n <span class=\"c-select__text-value\">\n {{ isLoading() ? '' : displayText() }}\n </span>\n </span>\n }\n </div>\n\n <!-- Caret Icon -->\n <lib-icon\n name=\"caretdown-regular\"\n [color]=\"\n disabled()\n ? 'textfield-content-disabled'\n : 'textfield-content-default'\n \"\n size=\"md\"\n >\n </lib-icon>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"c-select__dropdown\">\n <lib-dropdown-select\n #dropdownSelect\n [options]=\"filteredOptions()\"\n [variant]=\"variant()\"\n [selectedValues]=\"getSelectedValues()\"\n [searchBarEnabled]=\"searchBarEnabled()\"\n [searchPlaceholder]=\"searchPlaceholder()\"\n [disabled]=\"disabled()\"\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [autoFocus]=\"autoFocus()\"\n [cancelButtonText]=\"cancelButtonText()\"\n [acceptButtonText]=\"acceptButtonText()\"\n [safeAreaInsetBottom]=\"safeAreaInsetBottom()\"\n [width]=\"'stretch'\"\n (searchChanged)=\"onDropdownSearchChanged($event)\"\n (valueChange)=\"onDropdownValueChange($event)\"\n ></lib-dropdown-select>\n </div>\n </div>\n\n <!-- Helper Text -->\n @if (helperText() && !isError()) {\n <lib-helper-text\n [text]=\"helperText()\"\n [disabled]=\"disabled()\"\n [isLoading]=\"isLoading()\"\n ></lib-helper-text>\n }\n\n <!-- Error Text -->\n @if (errorText() && isError()) {\n <lib-helper-text\n variant=\"danger\"\n [text]=\"errorText()\"\n [disabled]=\"disabled()\"\n [isLoading]=\"isLoading()\"\n ></lib-helper-text>\n }\n</div>\n", styles: [".c-select{max-width:300px;display:flex;flex-direction:column;position:relative;gap:var(--space-component-gap-sm);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-select--size-sm .c-select__trigger{min-height:32px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg)}.c-select--full-width{max-width:100%}.c-select--error .c-select__trigger{border-color:var(--color-textfield-border-error)}.c-select--disabled .c-select__trigger{cursor:not-allowed;border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-select--disabled .c-select__text--placeholder,.c-select--disabled .c-select__text{color:var(--color-textfield-content-disabled)}.c-select__required{color:var(--color-feedback-danger-default);margin-left:2px}.c-select__container{position:relative}.c-select__trigger{--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg);display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);border-radius:var(--size-textfield-border-radius);cursor:pointer;text-align:left;padding:var(--select-padding-y) var(--select-padding-x)}.c-select__trigger:hover:not(:disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-select__trigger:focus-visible:not(:disabled){border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--select-padding-y) - 1px) calc(var(--select-padding-x) - 1px);box-shadow:none;outline:none}.c-select__trigger.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-select__content{flex:1;display:flex;align-items:center;min-width:0}.c-select__text{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);color:var(--color-textfield-content-default);display:flex;align-items:center;gap:var(--space-container-gap-xs);min-width:0}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.c-select__text-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.c-select__tags{display:flex;flex-wrap:nowrap;gap:var(--space-component-gap-sm);align-items:center;min-width:0;overflow:hidden}.c-select__counter{background-color:var(--color-core-background-soft);color:var(--color-textfield-content-default);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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }, { kind: "component", type: DropdownSelectComponent, selector: "lib-dropdown-select", inputs: ["options", "variant", "selectedValues", "searchBarEnabled", "searchPlaceholder", "disabled", "cancelButtonText", "acceptButtonText", "align", "direction", "appendToBody", "autoFocus", "width", "safeAreaInsetBottom"], outputs: ["optionSelected", "optionDeselected", "searchChanged", "valueChange", "cancelClicked", "acceptClicked"] }, { kind: "directive", type: DropdownSelectTriggerDirective, selector: "[libDropdownSelectTriggerFor]", inputs: ["libDropdownSelectTriggerFor"] }] });
|
|
6306
6333
|
}
|
|
6307
6334
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, decorators: [{
|
|
6308
6335
|
type: Component,
|
|
@@ -6322,7 +6349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
6322
6349
|
useExisting: forwardRef(() => SelectComponent),
|
|
6323
6350
|
multi: true,
|
|
6324
6351
|
},
|
|
6325
|
-
], template: "<div\n class=\"c-select\"\n [class.c-select--full-width]=\"fullWidth()\"\n [class.c-select--disabled]=\"disabled()\"\n [class.c-select--error]=\"isError()\"\n [class.c-select--size-sm]=\"size() === 'sm'\"\n [class.c-select--size-md]=\"size() === 'md'\"\n [class.c-select--size-lg]=\"size() === 'lg'\"\n>\n <!-- Label -->\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [required]=\"required()\"\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n [isLoading]=\"isLoading()\"\n ></lib-input-label>\n }\n\n <!-- Select Container -->\n <div class=\"c-select__container\">\n <!-- Select Trigger -->\n <button\n type=\"button\"\n class=\"c-select__trigger\"\n [class.is-loading]=\"isLoading()\"\n [disabled]=\"disabled() || isLoading()\"\n [libDropdownSelectTriggerFor]=\"dropdownSelect\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-label]=\"placeholder()\"\n >\n <!-- Selected Content Display -->\n <div class=\"c-select__content\">\n @if (isMultiSelect() && hasSelection()) {\n <!-- Multi-select: Show tags -->\n <div class=\"c-select__tags\">\n @for (option of visibleTags(); track option.value) {\n <lib-tag\n [text]=\"option.label\"\n variant=\"neutral\"\n size=\"xs\"\n [closeActive]=\"true\"\n [showBadge]=\"false\"\n (closeEvent)=\"removeOption(option)\"\n >\n </lib-tag>\n } @if (hiddenTagsCount() > 0) {\n <span class=\"c-select__counter\"> +{{ hiddenTagsCount() }} </span>\n }\n </div>\n } @else {\n <!-- Single select: Show text -->\n <span\n class=\"c-select__text\"\n [class.c-select__text--placeholder]=\"!hasSelection()\"\n >\n <!-- Icon for single select -->\n @if (selectedOption()?.icon && !isLoading()) {\n <lib-icon\n [name]=\"selectedOption()?.icon!\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [disabled]=\"disabled() && hasSelection()\"\n >\n </lib-icon>\n }\n <span class=\"c-select__text-value\">\n {{ isLoading() ? '' : displayText() }}\n </span>\n </span>\n }\n </div>\n\n <!-- Caret Icon -->\n <lib-icon\n name=\"caretdown-regular\"\n [color]=\"\n disabled()\n ? 'textfield-content-disabled'\n : 'textfield-content-default'\n \"\n size=\"md\"\n >\n </lib-icon>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"c-select__dropdown\">\n <lib-dropdown-select\n #dropdownSelect\n [options]=\"filteredOptions()\"\n [variant]=\"variant()\"\n [selectedValues]=\"getSelectedValues()\"\n [searchBarEnabled]=\"searchBarEnabled()\"\n [searchPlaceholder]=\"searchPlaceholder()\"\n [disabled]=\"disabled()\"\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [autoFocus]=\"autoFocus()\"\n [cancelButtonText]=\"cancelButtonText()\"\n [acceptButtonText]=\"acceptButtonText()\"\n [width]=\"'stretch'\"\n (searchChanged)=\"onDropdownSearchChanged($event)\"\n (valueChange)=\"onDropdownValueChange($event)\"\n ></lib-dropdown-select>\n </div>\n </div>\n\n <!-- Helper Text -->\n @if (helperText() && !isError()) {\n <lib-helper-text\n [text]=\"helperText()\"\n [disabled]=\"disabled()\"\n [isLoading]=\"isLoading()\"\n ></lib-helper-text>\n }\n\n <!-- Error Text -->\n @if (errorText() && isError()) {\n <lib-helper-text\n variant=\"danger\"\n [text]=\"errorText()\"\n [disabled]=\"disabled()\"\n [isLoading]=\"isLoading()\"\n ></lib-helper-text>\n }\n</div>\n", styles: [".c-select{max-width:300px;display:flex;flex-direction:column;position:relative;gap:var(--space-component-gap-sm);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-select--size-sm .c-select__trigger{min-height:32px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg)}.c-select--full-width{max-width:100%}.c-select--error .c-select__trigger{border-color:var(--color-textfield-border-error)}.c-select--disabled .c-select__trigger{cursor:not-allowed;border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-select--disabled .c-select__text--placeholder,.c-select--disabled .c-select__text{color:var(--color-textfield-content-disabled)}.c-select__required{color:var(--color-feedback-danger-default);margin-left:2px}.c-select__container{position:relative}.c-select__trigger{--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg);display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);border-radius:var(--size-textfield-border-radius);cursor:pointer;text-align:left;padding:var(--select-padding-y) var(--select-padding-x)}.c-select__trigger:hover:not(:disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-select__trigger:focus-visible:not(:disabled){border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--select-padding-y) - 1px) calc(var(--select-padding-x) - 1px);box-shadow:none;outline:none}.c-select__trigger.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-select__content{flex:1;display:flex;align-items:center;min-width:0}.c-select__text{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);color:var(--color-textfield-content-default);display:flex;align-items:center;gap:var(--space-container-gap-xs);min-width:0}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.c-select__text-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.c-select__tags{display:flex;flex-wrap:nowrap;gap:var(--space-component-gap-sm);align-items:center;min-width:0;overflow:hidden}.c-select__counter{background-color:var(--color-core-background-soft);color:var(--color-textfield-content-default);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)}\n"] }]
|
|
6352
|
+
], template: "<div\n class=\"c-select\"\n [class.c-select--full-width]=\"fullWidth()\"\n [class.c-select--disabled]=\"disabled()\"\n [class.c-select--error]=\"isError()\"\n [class.c-select--size-sm]=\"size() === 'sm'\"\n [class.c-select--size-md]=\"size() === 'md'\"\n [class.c-select--size-lg]=\"size() === 'lg'\"\n>\n <!-- Label -->\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [required]=\"required()\"\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n [isLoading]=\"isLoading()\"\n ></lib-input-label>\n }\n\n <!-- Select Container -->\n <div class=\"c-select__container\">\n <!-- Select Trigger -->\n <button\n type=\"button\"\n class=\"c-select__trigger\"\n [class.is-loading]=\"isLoading()\"\n [disabled]=\"disabled() || isLoading()\"\n [libDropdownSelectTriggerFor]=\"dropdownSelect\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-label]=\"placeholder()\"\n >\n <!-- Selected Content Display -->\n <div class=\"c-select__content\">\n @if (isMultiSelect() && hasSelection()) {\n <!-- Multi-select: Show tags -->\n <div class=\"c-select__tags\">\n @for (option of visibleTags(); track option.value) {\n <lib-tag\n [text]=\"option.label\"\n variant=\"neutral\"\n size=\"xs\"\n [closeActive]=\"true\"\n [showBadge]=\"false\"\n (closeEvent)=\"removeOption(option)\"\n >\n </lib-tag>\n } @if (hiddenTagsCount() > 0) {\n <span class=\"c-select__counter\"> +{{ hiddenTagsCount() }} </span>\n }\n </div>\n } @else {\n <!-- Single select: Show text -->\n <span\n class=\"c-select__text\"\n [class.c-select__text--placeholder]=\"!hasSelection()\"\n >\n <!-- Icon for single select -->\n @if (selectedOption()?.icon && !isLoading()) {\n <lib-icon\n [name]=\"selectedOption()?.icon!\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [disabled]=\"disabled() && hasSelection()\"\n >\n </lib-icon>\n }\n <span class=\"c-select__text-value\">\n {{ isLoading() ? '' : displayText() }}\n </span>\n </span>\n }\n </div>\n\n <!-- Caret Icon -->\n <lib-icon\n name=\"caretdown-regular\"\n [color]=\"\n disabled()\n ? 'textfield-content-disabled'\n : 'textfield-content-default'\n \"\n size=\"md\"\n >\n </lib-icon>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"c-select__dropdown\">\n <lib-dropdown-select\n #dropdownSelect\n [options]=\"filteredOptions()\"\n [variant]=\"variant()\"\n [selectedValues]=\"getSelectedValues()\"\n [searchBarEnabled]=\"searchBarEnabled()\"\n [searchPlaceholder]=\"searchPlaceholder()\"\n [disabled]=\"disabled()\"\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [autoFocus]=\"autoFocus()\"\n [cancelButtonText]=\"cancelButtonText()\"\n [acceptButtonText]=\"acceptButtonText()\"\n [safeAreaInsetBottom]=\"safeAreaInsetBottom()\"\n [width]=\"'stretch'\"\n (searchChanged)=\"onDropdownSearchChanged($event)\"\n (valueChange)=\"onDropdownValueChange($event)\"\n ></lib-dropdown-select>\n </div>\n </div>\n\n <!-- Helper Text -->\n @if (helperText() && !isError()) {\n <lib-helper-text\n [text]=\"helperText()\"\n [disabled]=\"disabled()\"\n [isLoading]=\"isLoading()\"\n ></lib-helper-text>\n }\n\n <!-- Error Text -->\n @if (errorText() && isError()) {\n <lib-helper-text\n variant=\"danger\"\n [text]=\"errorText()\"\n [disabled]=\"disabled()\"\n [isLoading]=\"isLoading()\"\n ></lib-helper-text>\n }\n</div>\n", styles: [".c-select{max-width:300px;display:flex;flex-direction:column;position:relative;gap:var(--space-component-gap-sm);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-select--size-sm .c-select__trigger{min-height:32px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg)}.c-select--full-width{max-width:100%}.c-select--error .c-select__trigger{border-color:var(--color-textfield-border-error)}.c-select--disabled .c-select__trigger{cursor:not-allowed;border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-select--disabled .c-select__text--placeholder,.c-select--disabled .c-select__text{color:var(--color-textfield-content-disabled)}.c-select__required{color:var(--color-feedback-danger-default);margin-left:2px}.c-select__container{position:relative}.c-select__trigger{--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg);display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);border-radius:var(--size-textfield-border-radius);cursor:pointer;text-align:left;padding:var(--select-padding-y) var(--select-padding-x)}.c-select__trigger:hover:not(:disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-select__trigger:focus-visible:not(:disabled){border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--select-padding-y) - 1px) calc(var(--select-padding-x) - 1px);box-shadow:none;outline:none}.c-select__trigger.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-select__content{flex:1;display:flex;align-items:center;min-width:0}.c-select__text{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);color:var(--color-textfield-content-default);display:flex;align-items:center;gap:var(--space-container-gap-xs);min-width:0}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.c-select__text-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.c-select__tags{display:flex;flex-wrap:nowrap;gap:var(--space-component-gap-sm);align-items:center;min-width:0;overflow:hidden}.c-select__counter{background-color:var(--color-core-background-soft);color:var(--color-textfield-content-default);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)}\n"] }]
|
|
6326
6353
|
}], ctorParameters: () => [] });
|
|
6327
6354
|
|
|
6328
6355
|
/**
|
|
@@ -7115,13 +7142,6 @@ class TextInputComponent {
|
|
|
7115
7142
|
this.isLoading ? 'is-loading' : '',
|
|
7116
7143
|
].filter(Boolean);
|
|
7117
7144
|
}
|
|
7118
|
-
get helperClass() {
|
|
7119
|
-
if (this.error)
|
|
7120
|
-
return 'is-error';
|
|
7121
|
-
if (this.success)
|
|
7122
|
-
return 'is-success';
|
|
7123
|
-
return 'is-default';
|
|
7124
|
-
}
|
|
7125
7145
|
get ariaDescribedBy() {
|
|
7126
7146
|
return this.helperText ? 'text-input-helper' : null;
|
|
7127
7147
|
}
|
|
@@ -7167,7 +7187,7 @@ class TextInputComponent {
|
|
|
7167
7187
|
useExisting: forwardRef(() => TextInputComponent),
|
|
7168
7188
|
multi: true,
|
|
7169
7189
|
},
|
|
7170
|
-
], 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 [for]=\"name\"\n [text]=\"label\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <input\n [attr.autocomplete]=\"autocomplete\"\n [id]=\"name\"\n [name]=\"name\"\n [type]=\"type\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\n [readonly]=\"readonly\"\n [value]=\"isLoading ? '' : _value\"\n [required]=\"required\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"name\"\n [attr.aria-labelledby]=\"name\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n [
|
|
7190
|
+
], 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 [for]=\"name\"\n [text]=\"label\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <input\n [attr.autocomplete]=\"autocomplete\"\n [id]=\"name\"\n [name]=\"name\"\n [type]=\"type\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\n [readonly]=\"readonly\"\n [value]=\"isLoading ? '' : _value\"\n [required]=\"required\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"name\"\n [attr.aria-labelledby]=\"name\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-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{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: var(--space-component-padding-lg);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);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:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: 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)}\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: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
|
|
7171
7191
|
}
|
|
7172
7192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
7173
7193
|
type: Component,
|
|
@@ -7175,14 +7195,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
7175
7195
|
CommonModule,
|
|
7176
7196
|
ReactiveFormsModule,
|
|
7177
7197
|
InputLabelComponent,
|
|
7178
|
-
|
|
7198
|
+
HelperTextComponent,
|
|
7179
7199
|
], providers: [
|
|
7180
7200
|
{
|
|
7181
7201
|
provide: NG_VALUE_ACCESSOR,
|
|
7182
7202
|
useExisting: forwardRef(() => TextInputComponent),
|
|
7183
7203
|
multi: true,
|
|
7184
7204
|
},
|
|
7185
|
-
], 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 [for]=\"name\"\n [text]=\"label\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <input\n [attr.autocomplete]=\"autocomplete\"\n [id]=\"name\"\n [name]=\"name\"\n [type]=\"type\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\n [readonly]=\"readonly\"\n [value]=\"isLoading ? '' : _value\"\n [required]=\"required\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"name\"\n [attr.aria-labelledby]=\"name\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n [
|
|
7205
|
+
], 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 [for]=\"name\"\n [text]=\"label\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <input\n [attr.autocomplete]=\"autocomplete\"\n [id]=\"name\"\n [name]=\"name\"\n [type]=\"type\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\n [readonly]=\"readonly\"\n [value]=\"isLoading ? '' : _value\"\n [required]=\"required\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"name\"\n [attr.aria-labelledby]=\"name\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-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{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: var(--space-component-padding-lg);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);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:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: 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)}\n"] }]
|
|
7186
7206
|
}], propDecorators: { label: [{
|
|
7187
7207
|
type: Input
|
|
7188
7208
|
}], name: [{
|