@crowdfarming/oliva-ds 1.25.0 → 1.26.0-rc.10
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 +800 -247
- package/fesm2022/crowdfarming-oliva-ds.mjs.map +1 -1
- package/index.d.ts +2 -0
- package/lib/accordion/src/lib/accordion/accordion.component.d.ts +6 -1
- package/lib/dropdown-select/src/index.d.ts +2 -0
- package/lib/dropdown-select/src/lib/dropdown-select/dropdown-select-trigger.directive.d.ts +9 -0
- package/lib/dropdown-select/src/lib/dropdown-select/dropdown-select.component.d.ts +76 -0
- package/lib/link-action/src/index.d.ts +1 -0
- package/lib/link-action/src/lib/link-action/link-action.component.d.ts +29 -0
- package/lib/menu-item/src/lib/menu-item/menu-item.component.d.ts +1 -0
- package/lib/modal/src/lib/modal/modal.component.d.ts +4 -0
- package/lib/modal/src/lib/modal/modal.interfaces.d.ts +1 -0
- package/lib/modal/src/lib/modal/modal.service.d.ts +5 -1
- package/lib/select/src/lib/select/select.component.d.ts +5 -7
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, EventEmitter, Output, input, computed, output, signal, effect, forwardRef, inject, ElementRef, HostListener, ViewChild, Directive, model, viewChild, HostBinding, ApplicationRef, Injector, createComponent, Injectable } from '@angular/core';
|
|
2
|
+
import { Input, Component, EventEmitter, Output, input, computed, output, signal, effect, forwardRef, inject, ElementRef, HostListener, ViewChild, Directive, PLATFORM_ID, model, viewChild, HostBinding, ApplicationRef, Injector, createComponent, Injectable } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
|
-
import { CommonModule, NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
|
|
4
|
+
import { CommonModule, NgClass, NgTemplateOutlet, NgStyle, isPlatformBrowser } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
6
6
|
import * as i1$2 from '@angular/forms';
|
|
7
7
|
import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
|
|
@@ -2278,24 +2278,43 @@ class AccordionComponent {
|
|
|
2278
2278
|
text = '';
|
|
2279
2279
|
showSlot = false;
|
|
2280
2280
|
swapTemplate;
|
|
2281
|
+
mode = 'accordion';
|
|
2282
|
+
customIcon;
|
|
2283
|
+
radioName;
|
|
2284
|
+
radioChecked = false;
|
|
2281
2285
|
expandedChange = new EventEmitter();
|
|
2282
2286
|
toggled = new EventEmitter();
|
|
2287
|
+
radioChange = new EventEmitter();
|
|
2283
2288
|
ngOnInit() {
|
|
2284
2289
|
if (!this.id) {
|
|
2285
2290
|
this.id = 'accordion-' + Math.random().toString(36).substr(2, 9);
|
|
2286
2291
|
}
|
|
2292
|
+
if (this.mode === 'choice' && !this.radioName) {
|
|
2293
|
+
this.radioName = 'accordion-choice-' + this.id;
|
|
2294
|
+
}
|
|
2287
2295
|
}
|
|
2288
2296
|
toggle() {
|
|
2289
|
-
this.
|
|
2290
|
-
|
|
2291
|
-
|
|
2297
|
+
if (this.mode === 'choice') {
|
|
2298
|
+
if (!this.expanded) {
|
|
2299
|
+
this.expanded = true;
|
|
2300
|
+
this.radioChecked = true;
|
|
2301
|
+
this.expandedChange.emit(this.expanded);
|
|
2302
|
+
this.toggled.emit(this.expanded);
|
|
2303
|
+
this.radioChange.emit(this.radioChecked);
|
|
2304
|
+
}
|
|
2305
|
+
}
|
|
2306
|
+
else {
|
|
2307
|
+
this.expanded = !this.expanded;
|
|
2308
|
+
this.expandedChange.emit(this.expanded);
|
|
2309
|
+
this.toggled.emit(this.expanded);
|
|
2310
|
+
}
|
|
2292
2311
|
}
|
|
2293
2312
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2294
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AccordionComponent, isStandalone: true, selector: "lib-accordion", inputs: { id: "id", expanded: "expanded", size: "size", title: "title", showText: "showText", text: "text", showSlot: "showSlot", swapTemplate: "swapTemplate" }, outputs: { expandedChange: "expandedChange", toggled: "toggled" }, ngImport: i0, template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size==='sm'\"\n [class.c-accordion--md]=\"size==='md'\"\n>\n <div\n class=\"c-accordion__header\"\n role=\"button\"\n [id]=\"id + '-header'\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <span class=\"c-accordion__title\">{{ title }}</span>\n <span class=\"c-accordion__arrow\" *ngIf=\"!expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n role=\"region\"\n [attr.aria-labelledby]=\"id + '-header'\"\n >\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <div class=\"c-accordion__text\" *ngIf=\"showText\">\n {{ text }}\n </div>\n @if (showSlot) {\n <ng-content></ng-content>\n }\n </ng-template>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft, #d6e0df)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box;gap:var(--space-component-gap-md, .5rem)}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:active{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-accordion__arrow{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
2313
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AccordionComponent, isStandalone: true, selector: "lib-accordion", inputs: { id: "id", expanded: "expanded", size: "size", title: "title", showText: "showText", text: "text", showSlot: "showSlot", swapTemplate: "swapTemplate", mode: "mode", customIcon: "customIcon", radioName: "radioName", radioChecked: "radioChecked" }, outputs: { expandedChange: "expandedChange", toggled: "toggled", radioChange: "radioChange" }, ngImport: i0, template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size==='sm'\"\n [class.c-accordion--md]=\"size==='md'\"\n [class.c-accordion--choice]=\"mode==='choice'\"\n>\n <div\n class=\"c-accordion__header\"\n [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n [id]=\"id + '-header'\"\n [tabindex]=\"0\"\n [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <!-- Radio input for choice mode -->\n <input\n *ngIf=\"mode === 'choice'\"\n type=\"radio\"\n class=\"c-accordion__radio\"\n [class.c-accordion__radio--checked]=\"radioChecked\"\n [id]=\"id + '-radio'\"\n [name]=\"radioName || ''\"\n [checked]=\"radioChecked\"\n tabindex=\"-1\"\n (click)=\"radioChange.emit(true)\"\n />\n\n <span class=\"c-accordion__title\">{{ title }}</span>\n\n <!-- Default arrow icons for accordion mode -->\n <span class=\"c-accordion__arrow\" *ngIf=\"mode === 'accordion' && !expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"mode === 'accordion' && expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n </span>\n\n <!-- Custom icon for choice mode -->\n <span class=\"c-accordion__custom-icon\" *ngIf=\"mode === 'choice' && customIcon\">\n <lib-icon [name]=\"customIcon\" size=\"lg\" iconBefore />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n [attr.role]=\"mode === 'choice' ? 'region' : 'region'\"\n [attr.aria-labelledby]=\"mode === 'choice' ? id + '-radio' : id + '-header'\"\n >\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <div class=\"c-accordion__text\" *ngIf=\"showText\">\n {{ text }}\n </div>\n @if (showSlot) {\n <ng-content></ng-content>\n }\n </ng-template>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft, #d6e0df)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box;gap:var(--space-component-gap-md, .5rem)}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus:not(:focus-visible){outline:none;box-shadow:none}.c-accordion__header:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:active{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-accordion__arrow{display:contents}.c-accordion__radio{margin:0 var(--space-component-gap-sm, .25rem) 0 0;cursor:pointer;appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;width:1rem;height:1rem;border:2px solid var(--color-core-border-soft, #d6e0df);border-radius:50%;background-color:var(--color-textfield-background-default, #f7f7f7);position:relative;transition:all .2s ease;flex-shrink:0}.c-accordion__radio:hover{border-color:var(--color-core-border-default, #070707)}.c-accordion__radio:focus{outline:none;box-shadow:none}.c-accordion__radio:checked,.c-accordion__radio[checked=true],.c-accordion__radio[checked],.c-accordion__radio.c-accordion__radio--checked{background-color:var(--color-action-primary-selected-background-default, #070707)!important;border-color:var(--color-action-primary-selected-background-default, #070707)!important}.c-accordion__radio:checked:after,.c-accordion__radio[checked=true]:after,.c-accordion__radio[checked]:after,.c-accordion__radio.c-accordion__radio--checked:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;background-color:var(--color-action-primary-selected-content-default, #ffffff)!important;border-radius:50%}.c-accordion__custom-icon{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
2295
2314
|
}
|
|
2296
2315
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
2297
2316
|
type: Component,
|
|
2298
|
-
args: [{ selector: 'lib-accordion', standalone: true, imports: [CommonModule, IconComponent], template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size==='sm'\"\n [class.c-accordion--md]=\"size==='md'\"\n>\n <div\n class=\"c-accordion__header\"\n role=\"button\"\n [id]=\"id + '-header'\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <span class=\"c-accordion__title\">{{ title }}</span>\n <span class=\"c-accordion__arrow\" *ngIf=\"!expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n role=\"region\"\n [attr.aria-labelledby]=\"id + '-header'\"\n >\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <div class=\"c-accordion__text\" *ngIf=\"showText\">\n {{ text }}\n </div>\n @if (showSlot) {\n <ng-content></ng-content>\n }\n </ng-template>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft, #d6e0df)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box;gap:var(--space-component-gap-md, .5rem)}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:active{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-accordion__arrow{display:contents}\n"] }]
|
|
2317
|
+
args: [{ selector: 'lib-accordion', standalone: true, imports: [CommonModule, IconComponent], template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size==='sm'\"\n [class.c-accordion--md]=\"size==='md'\"\n [class.c-accordion--choice]=\"mode==='choice'\"\n>\n <div\n class=\"c-accordion__header\"\n [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n [id]=\"id + '-header'\"\n [tabindex]=\"0\"\n [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <!-- Radio input for choice mode -->\n <input\n *ngIf=\"mode === 'choice'\"\n type=\"radio\"\n class=\"c-accordion__radio\"\n [class.c-accordion__radio--checked]=\"radioChecked\"\n [id]=\"id + '-radio'\"\n [name]=\"radioName || ''\"\n [checked]=\"radioChecked\"\n tabindex=\"-1\"\n (click)=\"radioChange.emit(true)\"\n />\n\n <span class=\"c-accordion__title\">{{ title }}</span>\n\n <!-- Default arrow icons for accordion mode -->\n <span class=\"c-accordion__arrow\" *ngIf=\"mode === 'accordion' && !expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"mode === 'accordion' && expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n </span>\n\n <!-- Custom icon for choice mode -->\n <span class=\"c-accordion__custom-icon\" *ngIf=\"mode === 'choice' && customIcon\">\n <lib-icon [name]=\"customIcon\" size=\"lg\" iconBefore />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n [attr.role]=\"mode === 'choice' ? 'region' : 'region'\"\n [attr.aria-labelledby]=\"mode === 'choice' ? id + '-radio' : id + '-header'\"\n >\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <div class=\"c-accordion__text\" *ngIf=\"showText\">\n {{ text }}\n </div>\n @if (showSlot) {\n <ng-content></ng-content>\n }\n </ng-template>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft, #d6e0df)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box;gap:var(--space-component-gap-md, .5rem)}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus:not(:focus-visible){outline:none;box-shadow:none}.c-accordion__header:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:active{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-accordion__arrow{display:contents}.c-accordion__radio{margin:0 var(--space-component-gap-sm, .25rem) 0 0;cursor:pointer;appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;width:1rem;height:1rem;border:2px solid var(--color-core-border-soft, #d6e0df);border-radius:50%;background-color:var(--color-textfield-background-default, #f7f7f7);position:relative;transition:all .2s ease;flex-shrink:0}.c-accordion__radio:hover{border-color:var(--color-core-border-default, #070707)}.c-accordion__radio:focus{outline:none;box-shadow:none}.c-accordion__radio:checked,.c-accordion__radio[checked=true],.c-accordion__radio[checked],.c-accordion__radio.c-accordion__radio--checked{background-color:var(--color-action-primary-selected-background-default, #070707)!important;border-color:var(--color-action-primary-selected-background-default, #070707)!important}.c-accordion__radio:checked:after,.c-accordion__radio[checked=true]:after,.c-accordion__radio[checked]:after,.c-accordion__radio.c-accordion__radio--checked:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;background-color:var(--color-action-primary-selected-content-default, #ffffff)!important;border-radius:50%}.c-accordion__custom-icon{display:contents}\n"] }]
|
|
2299
2318
|
}], propDecorators: { id: [{
|
|
2300
2319
|
type: Input
|
|
2301
2320
|
}], expanded: [{
|
|
@@ -2312,10 +2331,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2312
2331
|
type: Input
|
|
2313
2332
|
}], swapTemplate: [{
|
|
2314
2333
|
type: Input
|
|
2334
|
+
}], mode: [{
|
|
2335
|
+
type: Input
|
|
2336
|
+
}], customIcon: [{
|
|
2337
|
+
type: Input
|
|
2338
|
+
}], radioName: [{
|
|
2339
|
+
type: Input
|
|
2340
|
+
}], radioChecked: [{
|
|
2341
|
+
type: Input
|
|
2315
2342
|
}], expandedChange: [{
|
|
2316
2343
|
type: Output
|
|
2317
2344
|
}], toggled: [{
|
|
2318
2345
|
type: Output
|
|
2346
|
+
}], radioChange: [{
|
|
2347
|
+
type: Output
|
|
2319
2348
|
}] } });
|
|
2320
2349
|
|
|
2321
2350
|
class SpinnerComponent {
|
|
@@ -2849,7 +2878,7 @@ class CheckboxComponent {
|
|
|
2849
2878
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
2850
2879
|
multi: true,
|
|
2851
2880
|
},
|
|
2852
|
-
], ngImport: i0, template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n <div class=\"c-checkbox__input-wrapper\">\n <input\n type=\"checkbox\"\n [id]=\"name()\"\n [ngClass]=\"inputClasses()\"\n [checked]=\"isChecked()\"\n [indeterminate]=\"isIndeterminate()\"\n [disabled]=\"isDisabled()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-checked]=\"ariaChecked()\"\n (change)=\"handleChange($event)\"\n (keydown)=\"handleKeyDown($event)\"\n />\n </div>\n @if(isSkeleton()) {\n <div class=\"c-checkbox__label__skeleton\">\n <span></span>\n </div>\n } @else {\n <lib-input-label\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n [required]=\"true\"\n [for]=\"name()\"\n [innerHTML]=\"innerHTML()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }] });
|
|
2881
|
+
], ngImport: i0, template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n <div class=\"c-checkbox__input-wrapper\">\n <input\n type=\"checkbox\"\n [id]=\"name()\"\n [ngClass]=\"inputClasses()\"\n [checked]=\"isChecked()\"\n [indeterminate]=\"isIndeterminate()\"\n [disabled]=\"isDisabled()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-checked]=\"ariaChecked()\"\n (change)=\"handleChange($event)\"\n (keydown)=\"handleKeyDown($event)\"\n />\n </div>\n @if(isSkeleton()) {\n <div class=\"c-checkbox__label__skeleton\">\n <span></span>\n </div>\n } @else {\n <lib-input-label\n size=\"md\"\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n [required]=\"true\"\n [for]=\"name()\"\n [innerHTML]=\"innerHTML()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }] });
|
|
2853
2882
|
}
|
|
2854
2883
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2855
2884
|
type: Component,
|
|
@@ -2859,7 +2888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2859
2888
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
2860
2889
|
multi: true,
|
|
2861
2890
|
},
|
|
2862
|
-
], template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n <div class=\"c-checkbox__input-wrapper\">\n <input\n type=\"checkbox\"\n [id]=\"name()\"\n [ngClass]=\"inputClasses()\"\n [checked]=\"isChecked()\"\n [indeterminate]=\"isIndeterminate()\"\n [disabled]=\"isDisabled()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-checked]=\"ariaChecked()\"\n (change)=\"handleChange($event)\"\n (keydown)=\"handleKeyDown($event)\"\n />\n </div>\n @if(isSkeleton()) {\n <div class=\"c-checkbox__label__skeleton\">\n <span></span>\n </div>\n } @else {\n <lib-input-label\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n [required]=\"true\"\n [for]=\"name()\"\n [innerHTML]=\"innerHTML()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"] }]
|
|
2891
|
+
], template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n <div class=\"c-checkbox__input-wrapper\">\n <input\n type=\"checkbox\"\n [id]=\"name()\"\n [ngClass]=\"inputClasses()\"\n [checked]=\"isChecked()\"\n [indeterminate]=\"isIndeterminate()\"\n [disabled]=\"isDisabled()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-checked]=\"ariaChecked()\"\n (change)=\"handleChange($event)\"\n (keydown)=\"handleKeyDown($event)\"\n />\n </div>\n @if(isSkeleton()) {\n <div class=\"c-checkbox__label__skeleton\">\n <span></span>\n </div>\n } @else {\n <lib-input-label\n size=\"md\"\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n [required]=\"true\"\n [for]=\"name()\"\n [innerHTML]=\"innerHTML()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"] }]
|
|
2863
2892
|
}], ctorParameters: () => [] });
|
|
2864
2893
|
|
|
2865
2894
|
class HelperTextComponent {
|
|
@@ -3235,87 +3264,698 @@ class DropdownComponent {
|
|
|
3235
3264
|
if (!buttonElement) {
|
|
3236
3265
|
return;
|
|
3237
3266
|
}
|
|
3238
|
-
const buttonRect = buttonElement.getBoundingClientRect();
|
|
3239
|
-
const { innerWidth, innerHeight, scrollY, scrollX } = window;
|
|
3240
|
-
const MENU_WIDTH = 320;
|
|
3241
|
-
const MIN_HEIGHT = 120;
|
|
3242
|
-
const GAP = 8;
|
|
3243
|
-
const OPTION_HEIGHT = 40;
|
|
3244
|
-
const PADDING = 16;
|
|
3245
|
-
const spaceBelow = innerHeight - buttonRect.bottom - GAP;
|
|
3246
|
-
const spaceAbove = buttonRect.top - GAP;
|
|
3247
|
-
const spaceRight = innerWidth - buttonRect.left;
|
|
3248
|
-
const openUpward = spaceBelow < MIN_HEIGHT && spaceAbove > spaceBelow;
|
|
3249
|
-
const alignLeft = spaceRight < MENU_WIDTH;
|
|
3250
|
-
const availableSpace = openUpward ? spaceAbove : spaceBelow;
|
|
3251
|
-
const idealHeight = this.flatOptions.length * OPTION_HEIGHT + PADDING;
|
|
3252
|
-
const maxHeight = Math.min(idealHeight, Math.max(MIN_HEIGHT, availableSpace - 20));
|
|
3253
|
-
let left = buttonRect.left;
|
|
3254
|
-
let top = buttonRect.bottom + GAP;
|
|
3255
|
-
if (alignLeft) {
|
|
3256
|
-
left = buttonRect.right - MENU_WIDTH;
|
|
3267
|
+
const buttonRect = buttonElement.getBoundingClientRect();
|
|
3268
|
+
const { innerWidth, innerHeight, scrollY, scrollX } = window;
|
|
3269
|
+
const MENU_WIDTH = 320;
|
|
3270
|
+
const MIN_HEIGHT = 120;
|
|
3271
|
+
const GAP = 8;
|
|
3272
|
+
const OPTION_HEIGHT = 40;
|
|
3273
|
+
const PADDING = 16;
|
|
3274
|
+
const spaceBelow = innerHeight - buttonRect.bottom - GAP;
|
|
3275
|
+
const spaceAbove = buttonRect.top - GAP;
|
|
3276
|
+
const spaceRight = innerWidth - buttonRect.left;
|
|
3277
|
+
const openUpward = spaceBelow < MIN_HEIGHT && spaceAbove > spaceBelow;
|
|
3278
|
+
const alignLeft = spaceRight < MENU_WIDTH;
|
|
3279
|
+
const availableSpace = openUpward ? spaceAbove : spaceBelow;
|
|
3280
|
+
const idealHeight = this.flatOptions.length * OPTION_HEIGHT + PADDING;
|
|
3281
|
+
const maxHeight = Math.min(idealHeight, Math.max(MIN_HEIGHT, availableSpace - 20));
|
|
3282
|
+
let left = buttonRect.left;
|
|
3283
|
+
let top = buttonRect.bottom + GAP;
|
|
3284
|
+
if (alignLeft) {
|
|
3285
|
+
left = buttonRect.right - MENU_WIDTH;
|
|
3286
|
+
}
|
|
3287
|
+
if (openUpward) {
|
|
3288
|
+
top = buttonRect.top - maxHeight - GAP;
|
|
3289
|
+
}
|
|
3290
|
+
this.baseLeft.set(left);
|
|
3291
|
+
this.baseTop.set(top);
|
|
3292
|
+
this.initialScrollX.set(scrollX);
|
|
3293
|
+
this.initialScrollY.set(scrollY);
|
|
3294
|
+
this.maxHeight.set(maxHeight);
|
|
3295
|
+
this.menuLeft.set(left);
|
|
3296
|
+
this.menuTop.set(top);
|
|
3297
|
+
}
|
|
3298
|
+
updateDropdownPosition() {
|
|
3299
|
+
const currentScrollX = window.pageXOffset || document.documentElement.scrollLeft;
|
|
3300
|
+
const currentScrollY = window.pageYOffset || document.documentElement.scrollTop;
|
|
3301
|
+
const scrollDeltaX = currentScrollX - this.initialScrollX();
|
|
3302
|
+
const scrollDeltaY = currentScrollY - this.initialScrollY();
|
|
3303
|
+
const newLeft = this.baseLeft() - scrollDeltaX;
|
|
3304
|
+
const newTop = this.baseTop() - scrollDeltaY;
|
|
3305
|
+
this.menuLeft.set(newLeft);
|
|
3306
|
+
this.menuTop.set(newTop);
|
|
3307
|
+
}
|
|
3308
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3309
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownComponent, isStandalone: true, selector: "lib-dropdown", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:resize": "onWindowResize()", "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, static: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, template: "@if (isOpen() || isClosing()) {\n <div \n #dropdownMenu\n [id]=\"listboxId\"\n class=\"c-dropdown__menu\" \n [ngStyle]=\"menuStyles()\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"dropdownId\"\n >\n\n @switch (dataSource().type) {\n @case ('default') {\n @for (option of dataSource().options; track option.value) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\n }\n }\n\n @case ('group') {\n @for (group of dataSource().groups; track group.header) {\n <div class=\"c-dropdown__group\" role=\"group\" [attr.aria-labelledby]=\"'group-header-' + $index\">\n <div\n role=\"presentation\" \n class=\"c-dropdown__group-header\" \n [id]=\"'group-header-' + $index\"\n [attr.aria-hidden]=\"true\">\n {{ group.header }}\n </div>\n\n @for (option of group.options; track option.value) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\n }\n </div>\n }\n }\n }\n </div>\n}\n\n<ng-template #optionTpl let-option>\n <div\n role=\"option\"\n class=\"c-dropdown__option\"\n [attr.tabindex]=\"option.disabled ? -1 : 0\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled\"\n [class.c-dropdown__option--disabled]=\"option.disabled\"\n [class.c-dropdown__option--selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n (keydown)=\"onOptionKeydown($event, option)\">\n <div class=\"c-dropdown__option-content\">\n @if (option.icon) {\n <lib-icon [name]=\"option.icon\" [size]=\"'lg'\" [color]=\"option.disabled ? 'action-neutral-content-disabled' : ''\"></lib-icon>\n }\n \n <span class=\"c-dropdown__option-label\">{{ option.label }}</span>\n \n @if (option.detail) {\n <span class=\"c-dropdown__option-detail\">{{ option.detail }}</span>\n }\n </div>\n</div>\n</ng-template>", styles: [".c-dropdown{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-component-gap-sm);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);background-color:var(--color-background-primary);border:var(--size-border-width-sm) solid var(--color-border-neutral-default);border-radius:var(--size-border-radius-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-md);transition:all .2s ease-in-out;box-sizing:border-box}.c-dropdown:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-dropdown:hover:not(.c-dropdown--disabled){border-color:var(--color-border-neutral-hover)}.c-dropdown--disabled{cursor:auto;background-color:var(--color-background-neutral-disabled);border-color:var(--color-border-neutral-disabled);color:var(--color-content-neutral-disabled)}.c-dropdown--open{border-color:var(--color-border-accent-default);box-shadow:0 0 0 1px var(--color-border-accent-default)}.c-dropdown__menu{position:fixed;overflow-y:auto;overflow-x:hidden;z-index:1000;min-width:200px;max-width:320px;padding-top:var(--space-component-padding-sm);padding-bottom:var(--space-component-padding-sm);border-radius:var(--size-textfield-border-radius, 8px);border:var(--size-border-width-sm, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scroll-behavior:smooth;opacity:0;transform:translateY(-4px) scale(.95);animation:dropdown-enter .2s ease-out forwards;transform-origin:top center}.c-dropdown__menu::-webkit-scrollbar{width:4px;padding:0 var(--space-component-padding-lg)}.c-dropdown__menu::-webkit-scrollbar-track{border-radius:4px;background:transparent}.c-dropdown__menu::-webkit-scrollbar-thumb{border-radius:4px;background:var(--color-core-border-soft)}.c-dropdown__menu::-webkit-scrollbar-thumb:hover{background:var(--color-core-border-default)}.c-dropdown__group{width:100%}.c-dropdown__group-header{display:flex;align-items:center;width:100%;padding:var(--space-component-padding-md) var(--space-component-padding-lg);min-height:calc(48px - var(--space-component-padding-md) * 2);gap:var(--space-component-gap-sm);color:var(--color-core-content-soft);font-family:var(--typography-label-sm-strong-family);font-size:var(--typography-label-sm-strong-size);font-style:normal;font-weight:var(--typography-label-sm-strong-weight);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown__option{cursor:pointer;display:flex;align-items:center;font-style:normal;border:none;background-color:transparent;text-align:left;min-height:calc(40px - var(--space-component-padding-sm) * 2);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);gap:var(--space-component-gap-sm);color:var(--color-core-content-default);transition:background-color .2s ease-in-out}.c-dropdown__option-content{display:flex;align-items:center;gap:var(--space-component-gap-sm)}.c-dropdown__option-label{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-dropdown__option-detail{font-style:normal;color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-dropdown__option:hover{background:var(--color-action-neutral-background-hover)}.c-dropdown__option:focus-visible{outline:none;background:var(--color-action-neutral-background-hover);box-shadow:0 0 0 2px var(--color-effect-focus-color) inset,0 0 0 4px var(--color-effect-focus-contrast) inset}.c-dropdown__option--disabled{pointer-events:none;color:var(--color-action-neutral-content-disabled)}.c-dropdown__option--disabled:hover{background-color:transparent}@keyframes dropdown-enter{0%{opacity:0;transform:translateY(-4px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dropdown-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-4px) scale(.98)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
3310
|
+
}
|
|
3311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
3312
|
+
type: Component,
|
|
3313
|
+
args: [{ selector: 'lib-dropdown', imports: [NgTemplateOutlet, NgStyle, IconComponent], template: "@if (isOpen() || isClosing()) {\n <div \n #dropdownMenu\n [id]=\"listboxId\"\n class=\"c-dropdown__menu\" \n [ngStyle]=\"menuStyles()\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"dropdownId\"\n >\n\n @switch (dataSource().type) {\n @case ('default') {\n @for (option of dataSource().options; track option.value) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\n }\n }\n\n @case ('group') {\n @for (group of dataSource().groups; track group.header) {\n <div class=\"c-dropdown__group\" role=\"group\" [attr.aria-labelledby]=\"'group-header-' + $index\">\n <div\n role=\"presentation\" \n class=\"c-dropdown__group-header\" \n [id]=\"'group-header-' + $index\"\n [attr.aria-hidden]=\"true\">\n {{ group.header }}\n </div>\n\n @for (option of group.options; track option.value) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\n }\n </div>\n }\n }\n }\n </div>\n}\n\n<ng-template #optionTpl let-option>\n <div\n role=\"option\"\n class=\"c-dropdown__option\"\n [attr.tabindex]=\"option.disabled ? -1 : 0\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled\"\n [class.c-dropdown__option--disabled]=\"option.disabled\"\n [class.c-dropdown__option--selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n (keydown)=\"onOptionKeydown($event, option)\">\n <div class=\"c-dropdown__option-content\">\n @if (option.icon) {\n <lib-icon [name]=\"option.icon\" [size]=\"'lg'\" [color]=\"option.disabled ? 'action-neutral-content-disabled' : ''\"></lib-icon>\n }\n \n <span class=\"c-dropdown__option-label\">{{ option.label }}</span>\n \n @if (option.detail) {\n <span class=\"c-dropdown__option-detail\">{{ option.detail }}</span>\n }\n </div>\n</div>\n</ng-template>", styles: [".c-dropdown{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-component-gap-sm);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);background-color:var(--color-background-primary);border:var(--size-border-width-sm) solid var(--color-border-neutral-default);border-radius:var(--size-border-radius-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-md);transition:all .2s ease-in-out;box-sizing:border-box}.c-dropdown:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-dropdown:hover:not(.c-dropdown--disabled){border-color:var(--color-border-neutral-hover)}.c-dropdown--disabled{cursor:auto;background-color:var(--color-background-neutral-disabled);border-color:var(--color-border-neutral-disabled);color:var(--color-content-neutral-disabled)}.c-dropdown--open{border-color:var(--color-border-accent-default);box-shadow:0 0 0 1px var(--color-border-accent-default)}.c-dropdown__menu{position:fixed;overflow-y:auto;overflow-x:hidden;z-index:1000;min-width:200px;max-width:320px;padding-top:var(--space-component-padding-sm);padding-bottom:var(--space-component-padding-sm);border-radius:var(--size-textfield-border-radius, 8px);border:var(--size-border-width-sm, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scroll-behavior:smooth;opacity:0;transform:translateY(-4px) scale(.95);animation:dropdown-enter .2s ease-out forwards;transform-origin:top center}.c-dropdown__menu::-webkit-scrollbar{width:4px;padding:0 var(--space-component-padding-lg)}.c-dropdown__menu::-webkit-scrollbar-track{border-radius:4px;background:transparent}.c-dropdown__menu::-webkit-scrollbar-thumb{border-radius:4px;background:var(--color-core-border-soft)}.c-dropdown__menu::-webkit-scrollbar-thumb:hover{background:var(--color-core-border-default)}.c-dropdown__group{width:100%}.c-dropdown__group-header{display:flex;align-items:center;width:100%;padding:var(--space-component-padding-md) var(--space-component-padding-lg);min-height:calc(48px - var(--space-component-padding-md) * 2);gap:var(--space-component-gap-sm);color:var(--color-core-content-soft);font-family:var(--typography-label-sm-strong-family);font-size:var(--typography-label-sm-strong-size);font-style:normal;font-weight:var(--typography-label-sm-strong-weight);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown__option{cursor:pointer;display:flex;align-items:center;font-style:normal;border:none;background-color:transparent;text-align:left;min-height:calc(40px - var(--space-component-padding-sm) * 2);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);gap:var(--space-component-gap-sm);color:var(--color-core-content-default);transition:background-color .2s ease-in-out}.c-dropdown__option-content{display:flex;align-items:center;gap:var(--space-component-gap-sm)}.c-dropdown__option-label{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-dropdown__option-detail{font-style:normal;color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-dropdown__option:hover{background:var(--color-action-neutral-background-hover)}.c-dropdown__option:focus-visible{outline:none;background:var(--color-action-neutral-background-hover);box-shadow:0 0 0 2px var(--color-effect-focus-color) inset,0 0 0 4px var(--color-effect-focus-contrast) inset}.c-dropdown__option--disabled{pointer-events:none;color:var(--color-action-neutral-content-disabled)}.c-dropdown__option--disabled:hover{background-color:transparent}@keyframes dropdown-enter{0%{opacity:0;transform:translateY(-4px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dropdown-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-4px) scale(.98)}}\n"] }]
|
|
3314
|
+
}], ctorParameters: () => [], propDecorators: { dropdownButton: [{
|
|
3315
|
+
type: ViewChild,
|
|
3316
|
+
args: ['dropdownButton', { static: true }]
|
|
3317
|
+
}], dropdownMenu: [{
|
|
3318
|
+
type: ViewChild,
|
|
3319
|
+
args: ['dropdownMenu']
|
|
3320
|
+
}], onClickOutside: [{
|
|
3321
|
+
type: HostListener,
|
|
3322
|
+
args: ['document:click', ['$event']]
|
|
3323
|
+
}], onWindowResize: [{
|
|
3324
|
+
type: HostListener,
|
|
3325
|
+
args: ['window:resize']
|
|
3326
|
+
}], onWindowScroll: [{
|
|
3327
|
+
type: HostListener,
|
|
3328
|
+
args: ['window:scroll']
|
|
3329
|
+
}] } });
|
|
3330
|
+
|
|
3331
|
+
class DropdownTriggerDirective {
|
|
3332
|
+
libDropdownTriggerFor = input.required();
|
|
3333
|
+
elementRef = inject(ElementRef);
|
|
3334
|
+
onClick() {
|
|
3335
|
+
const dropdown = this.libDropdownTriggerFor();
|
|
3336
|
+
if (dropdown) {
|
|
3337
|
+
dropdown.setTriggerButton(this.elementRef.nativeElement);
|
|
3338
|
+
dropdown.toggleDropdown();
|
|
3339
|
+
}
|
|
3340
|
+
}
|
|
3341
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3342
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type: DropdownTriggerDirective, isStandalone: true, selector: "[libDropdownTriggerFor]", inputs: { libDropdownTriggerFor: { classPropertyName: "libDropdownTriggerFor", publicName: "libDropdownTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
|
|
3343
|
+
}
|
|
3344
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
|
|
3345
|
+
type: Directive,
|
|
3346
|
+
args: [{
|
|
3347
|
+
selector: '[libDropdownTriggerFor]',
|
|
3348
|
+
}]
|
|
3349
|
+
}], propDecorators: { onClick: [{
|
|
3350
|
+
type: HostListener,
|
|
3351
|
+
args: ['click']
|
|
3352
|
+
}] } });
|
|
3353
|
+
|
|
3354
|
+
class InputSearchComponent {
|
|
3355
|
+
label = '';
|
|
3356
|
+
placeholder = '';
|
|
3357
|
+
helperText = '';
|
|
3358
|
+
alertText = '';
|
|
3359
|
+
successText = '';
|
|
3360
|
+
error = false;
|
|
3361
|
+
success = false;
|
|
3362
|
+
disabled = false;
|
|
3363
|
+
readonly = false;
|
|
3364
|
+
required = false;
|
|
3365
|
+
size = 'md';
|
|
3366
|
+
fullWidth = false;
|
|
3367
|
+
clearButton = false;
|
|
3368
|
+
emitValue = new EventEmitter();
|
|
3369
|
+
_value = '';
|
|
3370
|
+
onChangeFn = () => { };
|
|
3371
|
+
onTouchedFn = () => { };
|
|
3372
|
+
writeValue(value) {
|
|
3373
|
+
this._value = value ?? '';
|
|
3374
|
+
}
|
|
3375
|
+
registerOnChange(fn) {
|
|
3376
|
+
this.onChangeFn = fn;
|
|
3377
|
+
}
|
|
3378
|
+
registerOnTouched(fn) {
|
|
3379
|
+
this.onTouchedFn = fn;
|
|
3380
|
+
}
|
|
3381
|
+
setDisabledState(isDisabled) {
|
|
3382
|
+
this.disabled = isDisabled;
|
|
3383
|
+
}
|
|
3384
|
+
// ------------------------------
|
|
3385
|
+
onInput(event) {
|
|
3386
|
+
const input = event.target;
|
|
3387
|
+
this._value = input.value;
|
|
3388
|
+
this.onChangeFn(this._value);
|
|
3389
|
+
this.emitValue.emit(this._value);
|
|
3390
|
+
}
|
|
3391
|
+
onBlur() {
|
|
3392
|
+
this.onTouchedFn();
|
|
3393
|
+
}
|
|
3394
|
+
clearInput() {
|
|
3395
|
+
this._value = '';
|
|
3396
|
+
this.onChangeFn(this._value);
|
|
3397
|
+
this.emitValue.emit(this._value);
|
|
3398
|
+
}
|
|
3399
|
+
get inputClass() {
|
|
3400
|
+
return [
|
|
3401
|
+
'c-text-input__input',
|
|
3402
|
+
`c-text-input__input--${this.size}`,
|
|
3403
|
+
this.error ? 'is-error' : '',
|
|
3404
|
+
this.success ? 'is-success' : '',
|
|
3405
|
+
this.disabled ? 'is-disabled' : '',
|
|
3406
|
+
this.readonly ? 'is-readonly' : '',
|
|
3407
|
+
].filter(Boolean);
|
|
3408
|
+
}
|
|
3409
|
+
get ariaDescribedBy() {
|
|
3410
|
+
return this.helperText ? 'search-input-helper' : null;
|
|
3411
|
+
}
|
|
3412
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3413
|
+
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", readonly: "readonly", required: "required", size: "size", fullWidth: "fullWidth", clearButton: "clearButton" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
3414
|
+
{
|
|
3415
|
+
provide: NG_VALUE_ACCESSOR,
|
|
3416
|
+
useExisting: forwardRef(() => InputSearchComponent),
|
|
3417
|
+
multi: true,
|
|
3418
|
+
},
|
|
3419
|
+
], 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 ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\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 name=\"magnifyingglass-regular\" size=\"md\"></lib-icon>\n </span>\n\n <lib-button-icon\n *ngIf=\"clearButton && _value\"\n variant=\"neutral\"\n size=\"sm\"\n iconName=\"x-regular\"\n class=\"c-text-input__icon c-text-input__icon--right\"\n [disabled]=\"disabled || readonly\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) 2rem;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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.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"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
3420
|
+
}
|
|
3421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, decorators: [{
|
|
3422
|
+
type: Component,
|
|
3423
|
+
args: [{ selector: 'lib-input-search', standalone: true, imports: [
|
|
3424
|
+
CommonModule,
|
|
3425
|
+
ReactiveFormsModule,
|
|
3426
|
+
InputLabelComponent,
|
|
3427
|
+
IconComponent,
|
|
3428
|
+
HelperTextComponent,
|
|
3429
|
+
ButtonIconComponent,
|
|
3430
|
+
], providers: [
|
|
3431
|
+
{
|
|
3432
|
+
provide: NG_VALUE_ACCESSOR,
|
|
3433
|
+
useExisting: forwardRef(() => InputSearchComponent),
|
|
3434
|
+
multi: true,
|
|
3435
|
+
},
|
|
3436
|
+
], 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 ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\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 name=\"magnifyingglass-regular\" size=\"md\"></lib-icon>\n </span>\n\n <lib-button-icon\n *ngIf=\"clearButton && _value\"\n variant=\"neutral\"\n size=\"sm\"\n iconName=\"x-regular\"\n class=\"c-text-input__icon c-text-input__icon--right\"\n [disabled]=\"disabled || readonly\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) 2rem;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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.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"] }]
|
|
3437
|
+
}], propDecorators: { label: [{
|
|
3438
|
+
type: Input
|
|
3439
|
+
}], placeholder: [{
|
|
3440
|
+
type: Input
|
|
3441
|
+
}], helperText: [{
|
|
3442
|
+
type: Input
|
|
3443
|
+
}], alertText: [{
|
|
3444
|
+
type: Input
|
|
3445
|
+
}], successText: [{
|
|
3446
|
+
type: Input
|
|
3447
|
+
}], error: [{
|
|
3448
|
+
type: Input
|
|
3449
|
+
}], success: [{
|
|
3450
|
+
type: Input
|
|
3451
|
+
}], disabled: [{
|
|
3452
|
+
type: Input
|
|
3453
|
+
}], readonly: [{
|
|
3454
|
+
type: Input
|
|
3455
|
+
}], required: [{
|
|
3456
|
+
type: Input
|
|
3457
|
+
}], size: [{
|
|
3458
|
+
type: Input
|
|
3459
|
+
}], fullWidth: [{
|
|
3460
|
+
type: Input
|
|
3461
|
+
}], clearButton: [{
|
|
3462
|
+
type: Input
|
|
3463
|
+
}], emitValue: [{
|
|
3464
|
+
type: Output
|
|
3465
|
+
}] } });
|
|
3466
|
+
|
|
3467
|
+
class LinkActionComponent {
|
|
3468
|
+
text = input('');
|
|
3469
|
+
disabled = input(false);
|
|
3470
|
+
variant = input('primary');
|
|
3471
|
+
size = input('md');
|
|
3472
|
+
weight = input('regular');
|
|
3473
|
+
iconBefore = input();
|
|
3474
|
+
iconAfter = input();
|
|
3475
|
+
// --- Output Events ---
|
|
3476
|
+
clicked = output();
|
|
3477
|
+
// --- Internal State ---
|
|
3478
|
+
hovered = signal(false);
|
|
3479
|
+
active = signal(false);
|
|
3480
|
+
// --- Computed Values For Template ---
|
|
3481
|
+
finalAriaDisabled = computed(() => this.disabled() ? 'true' : null);
|
|
3482
|
+
// --- Computed Values For Styles ---
|
|
3483
|
+
variantClass = computed(() => `c-link-action--${this.variant()}`);
|
|
3484
|
+
sizeClass = computed(() => this.size() !== 'md' ? `c-link-action--${this.size()}` : '');
|
|
3485
|
+
weightClass = computed(() => this.weight() !== 'regular' ? `c-link-action--${this.weight()}` : '');
|
|
3486
|
+
/** Map the link size to the icon size. */
|
|
3487
|
+
iconSize = computed(() => {
|
|
3488
|
+
switch (this.size()) {
|
|
3489
|
+
case 'xs':
|
|
3490
|
+
return 'sm';
|
|
3491
|
+
case 'sm':
|
|
3492
|
+
return 'md';
|
|
3493
|
+
case 'md':
|
|
3494
|
+
default:
|
|
3495
|
+
return 'lg';
|
|
3496
|
+
}
|
|
3497
|
+
});
|
|
3498
|
+
/** Map the icon color according to the variant and state. */
|
|
3499
|
+
iconColor = computed(() => {
|
|
3500
|
+
if (this.disabled()) {
|
|
3501
|
+
switch (this.variant()) {
|
|
3502
|
+
case 'primary':
|
|
3503
|
+
return 'action-primary-content-disabled';
|
|
3504
|
+
case 'neutral':
|
|
3505
|
+
return 'action-neutral-content-disabled';
|
|
3506
|
+
case 'danger':
|
|
3507
|
+
return 'action-danger-content-disabled';
|
|
3508
|
+
case 'inverse':
|
|
3509
|
+
return 'action-inverse-content-disabled';
|
|
3510
|
+
default:
|
|
3511
|
+
return 'action-primary-content-disabled';
|
|
3512
|
+
}
|
|
3513
|
+
}
|
|
3514
|
+
else if (this.active()) {
|
|
3515
|
+
switch (this.variant()) {
|
|
3516
|
+
case 'primary':
|
|
3517
|
+
return 'action-primary-content-pressed';
|
|
3518
|
+
case 'neutral':
|
|
3519
|
+
return 'action-neutral-content-pressed';
|
|
3520
|
+
case 'danger':
|
|
3521
|
+
return 'action-danger-content-pressed';
|
|
3522
|
+
case 'inverse':
|
|
3523
|
+
return 'action-inverse-content-pressed';
|
|
3524
|
+
default:
|
|
3525
|
+
return 'action-primary-content-pressed';
|
|
3526
|
+
}
|
|
3527
|
+
}
|
|
3528
|
+
else if (this.hovered()) {
|
|
3529
|
+
switch (this.variant()) {
|
|
3530
|
+
case 'primary':
|
|
3531
|
+
return 'action-primary-content-hover';
|
|
3532
|
+
case 'neutral':
|
|
3533
|
+
return 'action-neutral-content-hover';
|
|
3534
|
+
case 'danger':
|
|
3535
|
+
return 'action-danger-content-hover';
|
|
3536
|
+
case 'inverse':
|
|
3537
|
+
return 'action-inverse-content-hover';
|
|
3538
|
+
default:
|
|
3539
|
+
return 'action-primary-content-hover';
|
|
3540
|
+
}
|
|
3541
|
+
}
|
|
3542
|
+
else {
|
|
3543
|
+
switch (this.variant()) {
|
|
3544
|
+
case 'primary':
|
|
3545
|
+
return 'action-primary-content-default';
|
|
3546
|
+
case 'neutral':
|
|
3547
|
+
return 'action-neutral-content-default';
|
|
3548
|
+
case 'danger':
|
|
3549
|
+
return 'action-danger-content-default';
|
|
3550
|
+
case 'inverse':
|
|
3551
|
+
return 'action-inverse-content-default';
|
|
3552
|
+
default:
|
|
3553
|
+
return 'action-primary-content-default';
|
|
3554
|
+
}
|
|
3555
|
+
}
|
|
3556
|
+
});
|
|
3557
|
+
// --- Event Handlers ---
|
|
3558
|
+
/** Handle click events and emit the clicked output. */
|
|
3559
|
+
onClick(event) {
|
|
3560
|
+
if (this.disabled()) {
|
|
3561
|
+
event.preventDefault();
|
|
3562
|
+
event.stopPropagation();
|
|
3563
|
+
}
|
|
3564
|
+
else {
|
|
3565
|
+
this.clicked.emit(event);
|
|
3566
|
+
}
|
|
3567
|
+
}
|
|
3568
|
+
onMouseEnter() {
|
|
3569
|
+
if (!this.disabled())
|
|
3570
|
+
this.hovered.set(true);
|
|
3571
|
+
}
|
|
3572
|
+
onMouseLeave() {
|
|
3573
|
+
this.hovered.set(false);
|
|
3574
|
+
this.active.set(false);
|
|
3575
|
+
}
|
|
3576
|
+
onMouseDown() {
|
|
3577
|
+
if (!this.disabled())
|
|
3578
|
+
this.active.set(true);
|
|
3579
|
+
}
|
|
3580
|
+
onMouseUp() {
|
|
3581
|
+
this.active.set(false);
|
|
3582
|
+
}
|
|
3583
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LinkActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3584
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: LinkActionComponent, isStandalone: true, selector: "lib-link-action", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, iconBefore: { classPropertyName: "iconBefore", publicName: "iconBefore", isSignal: true, isRequired: false, transformFunction: null }, iconAfter: { classPropertyName: "iconAfter", publicName: "iconAfter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n type=\"button\"\n [ngClass]=\"[\n 'c-link-action',\n variantClass(),\n sizeClass(),\n weightClass(),\n disabled() ? 'c-link-action--disabled' : ''\n ]\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link-action__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"\n iconBefore()?.includes('-regular') || iconBefore()?.includes('-fill')\n ? iconColor()\n : ''\n \"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link-action__text\">{{ text() }}</span>\n @if (iconAfter()) {\n <span class=\"c-link-action__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"\n iconAfter()?.includes('-regular') || iconAfter()?.includes('-fill')\n ? iconColor()\n : ''\n \"\n ></lib-icon>\n </span>\n }\n</button>\n", styles: [".c-link-action{display:flex;align-items:center;width:fit-content;gap:var(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-decoration:none;border-radius:var(--size-border-radius-sm);cursor:pointer;background:none;border:none;padding:0}.c-link-action--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link-action--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link-action--bold{font-weight:var(--typography-font-weight-bold)}.c-link-action__icon{display:flex;align-items:center}.c-link-action:hover{text-decoration:underline}.c-link-action:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-link-action--primary{color:var(--color-action-primary-content-default)}.c-link-action--primary:hover{color:var(--color-action-primary-content-hover)}.c-link-action--primary:active{color:var(--color-action-primary-content-pressed)}.c-link-action--neutral{color:var(--color-action-neutral-content-default)}.c-link-action--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link-action--neutral:active{color:var(--color-action-neutral-content-pressed)}.c-link-action--inverse{color:var(--color-action-inverse-content-default)}.c-link-action--inverse:hover{color:var(--color-action-inverse-content-hover)}.c-link-action--inverse:active{color:var(--color-action-inverse-content-pressed)}.c-link-action--danger{color:var(--color-action-danger-content-default)}.c-link-action--danger:hover{color:var(--color-action-danger-content-hover)}.c-link-action--danger:active{color:var(--color-action-danger-content-pressed)}.c-link-action--disabled{cursor:not-allowed}.c-link-action--disabled:hover{text-decoration:none}.c-link-action--disabled.c-link-action--primary{color:var(--color-action-primary-content-disabled)}.c-link-action--disabled.c-link-action--neutral{color:var(--color-action-neutral-content-disabled)}.c-link-action--disabled.c-link-action--inverse{color:var(--color-action-inverse-content-disabled)}.c-link-action--disabled.c-link-action--danger{color:var(--color-action-danger-content-disabled)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
3585
|
+
}
|
|
3586
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LinkActionComponent, decorators: [{
|
|
3587
|
+
type: Component,
|
|
3588
|
+
args: [{ selector: 'lib-link-action', imports: [NgClass, IconComponent], template: "<button\n type=\"button\"\n [ngClass]=\"[\n 'c-link-action',\n variantClass(),\n sizeClass(),\n weightClass(),\n disabled() ? 'c-link-action--disabled' : ''\n ]\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link-action__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"\n iconBefore()?.includes('-regular') || iconBefore()?.includes('-fill')\n ? iconColor()\n : ''\n \"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link-action__text\">{{ text() }}</span>\n @if (iconAfter()) {\n <span class=\"c-link-action__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"\n iconAfter()?.includes('-regular') || iconAfter()?.includes('-fill')\n ? iconColor()\n : ''\n \"\n ></lib-icon>\n </span>\n }\n</button>\n", styles: [".c-link-action{display:flex;align-items:center;width:fit-content;gap:var(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-decoration:none;border-radius:var(--size-border-radius-sm);cursor:pointer;background:none;border:none;padding:0}.c-link-action--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link-action--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link-action--bold{font-weight:var(--typography-font-weight-bold)}.c-link-action__icon{display:flex;align-items:center}.c-link-action:hover{text-decoration:underline}.c-link-action:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-link-action--primary{color:var(--color-action-primary-content-default)}.c-link-action--primary:hover{color:var(--color-action-primary-content-hover)}.c-link-action--primary:active{color:var(--color-action-primary-content-pressed)}.c-link-action--neutral{color:var(--color-action-neutral-content-default)}.c-link-action--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link-action--neutral:active{color:var(--color-action-neutral-content-pressed)}.c-link-action--inverse{color:var(--color-action-inverse-content-default)}.c-link-action--inverse:hover{color:var(--color-action-inverse-content-hover)}.c-link-action--inverse:active{color:var(--color-action-inverse-content-pressed)}.c-link-action--danger{color:var(--color-action-danger-content-default)}.c-link-action--danger:hover{color:var(--color-action-danger-content-hover)}.c-link-action--danger:active{color:var(--color-action-danger-content-pressed)}.c-link-action--disabled{cursor:not-allowed}.c-link-action--disabled:hover{text-decoration:none}.c-link-action--disabled.c-link-action--primary{color:var(--color-action-primary-content-disabled)}.c-link-action--disabled.c-link-action--neutral{color:var(--color-action-neutral-content-disabled)}.c-link-action--disabled.c-link-action--inverse{color:var(--color-action-inverse-content-disabled)}.c-link-action--disabled.c-link-action--danger{color:var(--color-action-danger-content-disabled)}\n"] }]
|
|
3589
|
+
}] });
|
|
3590
|
+
|
|
3591
|
+
class DropdownSelectComponent {
|
|
3592
|
+
// Inputs
|
|
3593
|
+
options = input([]);
|
|
3594
|
+
variant = input('select');
|
|
3595
|
+
selectedValues = input([]);
|
|
3596
|
+
searchBarEnabled = input(false);
|
|
3597
|
+
searchPlaceholder = input('Search options...');
|
|
3598
|
+
disabled = input(false);
|
|
3599
|
+
cancelButtonText = input('Cancel');
|
|
3600
|
+
acceptButtonText = input('Accept');
|
|
3601
|
+
position = input('right');
|
|
3602
|
+
// Outputs
|
|
3603
|
+
optionSelected = output();
|
|
3604
|
+
optionDeselected = output();
|
|
3605
|
+
searchChanged = output();
|
|
3606
|
+
valueChange = output();
|
|
3607
|
+
cancelClicked = output();
|
|
3608
|
+
acceptClicked = output();
|
|
3609
|
+
// Private signals
|
|
3610
|
+
_filteredOptions = signal([]);
|
|
3611
|
+
_searchText = signal('');
|
|
3612
|
+
_isOpen = signal(false);
|
|
3613
|
+
_isClosing = signal(false);
|
|
3614
|
+
_internalSelectedValues = signal([]);
|
|
3615
|
+
_isInitialized = signal(false);
|
|
3616
|
+
_isMobile = signal(false);
|
|
3617
|
+
_tempSelectedValues = signal([]);
|
|
3618
|
+
searchControl = new FormControl('');
|
|
3619
|
+
// Public computed signals
|
|
3620
|
+
filteredOptions = this._filteredOptions.asReadonly();
|
|
3621
|
+
searchText = this._searchText.asReadonly();
|
|
3622
|
+
isOpen = this._isOpen.asReadonly();
|
|
3623
|
+
isClosing = this._isClosing.asReadonly();
|
|
3624
|
+
// Computed class methods
|
|
3625
|
+
getClasses = computed(() => {
|
|
3626
|
+
const classes = ['c-dropdown-select'];
|
|
3627
|
+
if (this.isOpen()) {
|
|
3628
|
+
classes.push('c-dropdown-select--open');
|
|
3629
|
+
}
|
|
3630
|
+
return classes.join(' ');
|
|
3631
|
+
});
|
|
3632
|
+
getBackdropClasses = computed(() => {
|
|
3633
|
+
const classes = ['c-dropdown-select__backdrop'];
|
|
3634
|
+
if (this.isOpen()) {
|
|
3635
|
+
classes.push('c-dropdown-select__backdrop--open');
|
|
3636
|
+
}
|
|
3637
|
+
return classes.join(' ');
|
|
3638
|
+
});
|
|
3639
|
+
getMenuClasses = computed(() => {
|
|
3640
|
+
const classes = ['c-dropdown-select__menu'];
|
|
3641
|
+
classes.push(`c-dropdown-select__menu--${this.position()}`);
|
|
3642
|
+
return classes.join(' ');
|
|
3643
|
+
});
|
|
3644
|
+
// Computed values
|
|
3645
|
+
isMultiSelect = computed(() => this.variant() === 'multiselect');
|
|
3646
|
+
showSearchBar = computed(() => this.searchBarEnabled() && !this.isMultiSelect());
|
|
3647
|
+
// Element references
|
|
3648
|
+
elementRef = inject(ElementRef);
|
|
3649
|
+
triggerButtonRef;
|
|
3650
|
+
platformId = inject(PLATFORM_ID);
|
|
3651
|
+
dropdownMenu;
|
|
3652
|
+
constructor() {
|
|
3653
|
+
// Initialize mobile detection
|
|
3654
|
+
this.updateMobileDetection();
|
|
3655
|
+
// Only add resize listener if running in browser (not in SSR)
|
|
3656
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
3657
|
+
window.addEventListener('resize', () => this.updateMobileDetection());
|
|
3658
|
+
}
|
|
3659
|
+
// Initialize filtered options
|
|
3660
|
+
effect(() => {
|
|
3661
|
+
this._filteredOptions.set(this.options());
|
|
3662
|
+
});
|
|
3663
|
+
// Initialize internal selected values from input
|
|
3664
|
+
effect(() => {
|
|
3665
|
+
this._internalSelectedValues.set(this.selectedValues());
|
|
3666
|
+
// Mark as initialized after first effect run
|
|
3667
|
+
if (!this._isInitialized()) {
|
|
3668
|
+
this._isInitialized.set(true);
|
|
3669
|
+
}
|
|
3670
|
+
});
|
|
3671
|
+
// Handle search control value changes
|
|
3672
|
+
this.searchControl.valueChanges.subscribe((value) => {
|
|
3673
|
+
this._searchText.set(value || '');
|
|
3674
|
+
this.searchChanged.emit(value || '');
|
|
3675
|
+
this.filterOptions();
|
|
3676
|
+
});
|
|
3677
|
+
}
|
|
3678
|
+
// Helper method for template
|
|
3679
|
+
isSelected(option) {
|
|
3680
|
+
// On mobile, use temporary values for visual feedback
|
|
3681
|
+
// On desktop, use actual selected values
|
|
3682
|
+
const selectedValues = this._isMobile()
|
|
3683
|
+
? this._tempSelectedValues()
|
|
3684
|
+
: this._internalSelectedValues();
|
|
3685
|
+
if (this.isMultiSelect() && Array.isArray(selectedValues)) {
|
|
3686
|
+
return selectedValues.includes(option.value);
|
|
3687
|
+
}
|
|
3688
|
+
else if (!this.isMultiSelect() && typeof selectedValues === 'string') {
|
|
3689
|
+
return selectedValues === option.value;
|
|
3690
|
+
}
|
|
3691
|
+
return false;
|
|
3692
|
+
}
|
|
3693
|
+
// Mobile detection method
|
|
3694
|
+
updateMobileDetection() {
|
|
3695
|
+
// Check if running in browser (not in SSR)
|
|
3696
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
3697
|
+
this._isMobile.set(window.innerWidth <= 768);
|
|
3698
|
+
}
|
|
3699
|
+
else {
|
|
3700
|
+
// Default to desktop view during SSR
|
|
3701
|
+
this._isMobile.set(false);
|
|
3702
|
+
}
|
|
3703
|
+
}
|
|
3704
|
+
// Public methods
|
|
3705
|
+
selectOption(option) {
|
|
3706
|
+
if (this.disabled() || option.disabled)
|
|
3707
|
+
return;
|
|
3708
|
+
if (this._isMobile()) {
|
|
3709
|
+
// On mobile, only update temporary selection (no emission)
|
|
3710
|
+
this.updateTempSelection(option);
|
|
3711
|
+
}
|
|
3712
|
+
else {
|
|
3713
|
+
// On desktop, immediate selection and emission
|
|
3714
|
+
if (this.isMultiSelect()) {
|
|
3715
|
+
this.toggleMultiSelectOption(option);
|
|
3716
|
+
}
|
|
3717
|
+
else {
|
|
3718
|
+
this.selectSingleOption(option);
|
|
3719
|
+
}
|
|
3720
|
+
}
|
|
3721
|
+
}
|
|
3722
|
+
onCheckboxChange(option, checked) {
|
|
3723
|
+
if (this.disabled() || option.disabled)
|
|
3724
|
+
return;
|
|
3725
|
+
if (this.isMultiSelect()) {
|
|
3726
|
+
if (this._isMobile()) {
|
|
3727
|
+
// On mobile, only update temporary selection (no emission)
|
|
3728
|
+
this.updateTempSelection(option);
|
|
3729
|
+
}
|
|
3730
|
+
else {
|
|
3731
|
+
// On desktop, immediate selection and emission
|
|
3732
|
+
if (checked) {
|
|
3733
|
+
this.addToSelection(option);
|
|
3734
|
+
this.optionSelected.emit(option);
|
|
3735
|
+
}
|
|
3736
|
+
else {
|
|
3737
|
+
this.removeFromSelection(option);
|
|
3738
|
+
this.optionDeselected.emit(option);
|
|
3739
|
+
}
|
|
3740
|
+
this.emitValueChange();
|
|
3741
|
+
}
|
|
3742
|
+
}
|
|
3743
|
+
}
|
|
3744
|
+
// Private methods
|
|
3745
|
+
updateTempSelection(option) {
|
|
3746
|
+
if (this.isMultiSelect()) {
|
|
3747
|
+
const currentTemp = this._tempSelectedValues();
|
|
3748
|
+
if (Array.isArray(currentTemp)) {
|
|
3749
|
+
const isCurrentlySelected = currentTemp.includes(option.value);
|
|
3750
|
+
if (isCurrentlySelected) {
|
|
3751
|
+
this._tempSelectedValues.set(currentTemp.filter((val) => val !== option.value));
|
|
3752
|
+
}
|
|
3753
|
+
else {
|
|
3754
|
+
this._tempSelectedValues.set([...currentTemp, option.value]);
|
|
3755
|
+
}
|
|
3756
|
+
}
|
|
3757
|
+
}
|
|
3758
|
+
else {
|
|
3759
|
+
// For single select, replace the current temporary selection
|
|
3760
|
+
this._tempSelectedValues.set(option.value);
|
|
3761
|
+
}
|
|
3762
|
+
}
|
|
3763
|
+
toggleMultiSelectOption(option) {
|
|
3764
|
+
const isCurrentlySelected = this.isSelected(option);
|
|
3765
|
+
if (isCurrentlySelected) {
|
|
3766
|
+
this.removeFromSelection(option);
|
|
3767
|
+
this.optionDeselected.emit(option);
|
|
3768
|
+
}
|
|
3769
|
+
else {
|
|
3770
|
+
this.addToSelection(option);
|
|
3771
|
+
this.optionSelected.emit(option);
|
|
3772
|
+
}
|
|
3773
|
+
this.emitValueChange();
|
|
3774
|
+
}
|
|
3775
|
+
selectSingleOption(option) {
|
|
3776
|
+
this._internalSelectedValues.set(option.value);
|
|
3777
|
+
this.optionSelected.emit(option);
|
|
3778
|
+
this.emitValueChange();
|
|
3779
|
+
this.closeDropdown();
|
|
3780
|
+
}
|
|
3781
|
+
filterOptions() {
|
|
3782
|
+
const search = this._searchText().trim().toLowerCase();
|
|
3783
|
+
if (!search) {
|
|
3784
|
+
this._filteredOptions.set(this.options());
|
|
3785
|
+
}
|
|
3786
|
+
else {
|
|
3787
|
+
const filtered = this.options()
|
|
3788
|
+
.map((group) => {
|
|
3789
|
+
const matchingOptions = group.options.filter((opt) => opt.label.toLowerCase().includes(search));
|
|
3790
|
+
return { ...group, options: matchingOptions };
|
|
3791
|
+
})
|
|
3792
|
+
.filter((group) => group.options.length > 0);
|
|
3793
|
+
this._filteredOptions.set(filtered);
|
|
3794
|
+
}
|
|
3795
|
+
}
|
|
3796
|
+
addToSelection(option) {
|
|
3797
|
+
const current = this._internalSelectedValues();
|
|
3798
|
+
if (this.isMultiSelect() && Array.isArray(current)) {
|
|
3799
|
+
if (!current.includes(option.value)) {
|
|
3800
|
+
this._internalSelectedValues.set([...current, option.value]);
|
|
3801
|
+
}
|
|
3802
|
+
}
|
|
3803
|
+
}
|
|
3804
|
+
removeFromSelection(option) {
|
|
3805
|
+
const current = this._internalSelectedValues();
|
|
3806
|
+
if (this.isMultiSelect() && Array.isArray(current)) {
|
|
3807
|
+
this._internalSelectedValues.set(current.filter((val) => val !== option.value));
|
|
3808
|
+
}
|
|
3809
|
+
}
|
|
3810
|
+
emitValueChange() {
|
|
3811
|
+
// Only emit after component is initialized to prevent initial null emissions
|
|
3812
|
+
if (!this._isInitialized()) {
|
|
3813
|
+
return;
|
|
3814
|
+
}
|
|
3815
|
+
const selectedValues = this._internalSelectedValues();
|
|
3816
|
+
let value;
|
|
3817
|
+
if (this.isMultiSelect() && Array.isArray(selectedValues)) {
|
|
3818
|
+
value = selectedValues.length > 0 ? selectedValues : null;
|
|
3819
|
+
}
|
|
3820
|
+
else if (!this.isMultiSelect() && typeof selectedValues === 'string') {
|
|
3821
|
+
value = selectedValues || null;
|
|
3822
|
+
}
|
|
3823
|
+
else {
|
|
3824
|
+
value = null;
|
|
3825
|
+
}
|
|
3826
|
+
this.valueChange.emit(value);
|
|
3827
|
+
}
|
|
3828
|
+
// Public methods for trigger directive
|
|
3829
|
+
setTriggerButton(element) {
|
|
3830
|
+
this.triggerButtonRef = element;
|
|
3831
|
+
}
|
|
3832
|
+
toggleDropdown() {
|
|
3833
|
+
if (this.disabled()) {
|
|
3834
|
+
return;
|
|
3835
|
+
}
|
|
3836
|
+
if (this.isOpen() && !this.isClosing()) {
|
|
3837
|
+
this.closeDropdown();
|
|
3838
|
+
}
|
|
3839
|
+
else if (!this.isOpen() && !this.isClosing()) {
|
|
3840
|
+
this.openDropdown();
|
|
3841
|
+
}
|
|
3842
|
+
}
|
|
3843
|
+
openDropdown() {
|
|
3844
|
+
this._isClosing.set(false);
|
|
3845
|
+
this._isOpen.set(true);
|
|
3846
|
+
// On mobile, initialize temporary values with current selection
|
|
3847
|
+
if (this._isMobile()) {
|
|
3848
|
+
this._tempSelectedValues.set(this._internalSelectedValues());
|
|
3849
|
+
}
|
|
3850
|
+
}
|
|
3851
|
+
closeDropdown() {
|
|
3852
|
+
this._isClosing.set(true);
|
|
3853
|
+
this._isOpen.set(false);
|
|
3854
|
+
this._isClosing.set(false);
|
|
3855
|
+
// Clear search when closing dropdown
|
|
3856
|
+
this.searchControl.setValue('');
|
|
3857
|
+
this._searchText.set('');
|
|
3858
|
+
this._filteredOptions.set(this.options());
|
|
3859
|
+
}
|
|
3860
|
+
// Backdrop and keyboard handlers
|
|
3861
|
+
onBackdropClick() {
|
|
3862
|
+
this.closeDropdown();
|
|
3863
|
+
}
|
|
3864
|
+
onEscapeKey() {
|
|
3865
|
+
this.closeDropdown();
|
|
3866
|
+
}
|
|
3867
|
+
onCancelClick() {
|
|
3868
|
+
// On mobile, restore original values (no change)
|
|
3869
|
+
// On desktop, this shouldn't be called, but if it is, just close
|
|
3870
|
+
this.cancelClicked.emit();
|
|
3871
|
+
this.closeDropdown();
|
|
3872
|
+
}
|
|
3873
|
+
onAcceptClick() {
|
|
3874
|
+
if (this._isMobile()) {
|
|
3875
|
+
// On mobile, apply temporary values to actual selection
|
|
3876
|
+
const tempValues = this._tempSelectedValues();
|
|
3877
|
+
this._internalSelectedValues.set(tempValues);
|
|
3878
|
+
// Emit the final value
|
|
3879
|
+
let value;
|
|
3880
|
+
if (this.isMultiSelect() && Array.isArray(tempValues)) {
|
|
3881
|
+
value = tempValues.length > 0 ? tempValues : null;
|
|
3882
|
+
}
|
|
3883
|
+
else if (!this.isMultiSelect() && typeof tempValues === 'string') {
|
|
3884
|
+
value = tempValues || null;
|
|
3885
|
+
}
|
|
3886
|
+
else {
|
|
3887
|
+
value = null;
|
|
3888
|
+
}
|
|
3889
|
+
this.acceptClicked.emit(value);
|
|
3890
|
+
this.emitValueChange();
|
|
3257
3891
|
}
|
|
3258
|
-
|
|
3259
|
-
|
|
3892
|
+
else {
|
|
3893
|
+
// On desktop, this shouldn't be called, but if it is, emit current values
|
|
3894
|
+
const selectedValues = this._internalSelectedValues();
|
|
3895
|
+
let value;
|
|
3896
|
+
if (this.isMultiSelect() && Array.isArray(selectedValues)) {
|
|
3897
|
+
value = selectedValues.length > 0 ? selectedValues : null;
|
|
3898
|
+
}
|
|
3899
|
+
else if (!this.isMultiSelect() && typeof selectedValues === 'string') {
|
|
3900
|
+
value = selectedValues || null;
|
|
3901
|
+
}
|
|
3902
|
+
else {
|
|
3903
|
+
value = null;
|
|
3904
|
+
}
|
|
3905
|
+
this.acceptClicked.emit(value);
|
|
3260
3906
|
}
|
|
3261
|
-
this.
|
|
3262
|
-
this.baseTop.set(top);
|
|
3263
|
-
this.initialScrollX.set(scrollX);
|
|
3264
|
-
this.initialScrollY.set(scrollY);
|
|
3265
|
-
this.maxHeight.set(maxHeight);
|
|
3266
|
-
this.menuLeft.set(left);
|
|
3267
|
-
this.menuTop.set(top);
|
|
3907
|
+
this.closeDropdown();
|
|
3268
3908
|
}
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
|
|
3275
|
-
|
|
3276
|
-
|
|
3277
|
-
|
|
3909
|
+
// Host listeners
|
|
3910
|
+
onClickOutside(event) {
|
|
3911
|
+
if (this.isOpen() && !this.isClosing()) {
|
|
3912
|
+
const clickedElement = event.target;
|
|
3913
|
+
const isClickInsideDropdown = this.elementRef.nativeElement.contains(clickedElement);
|
|
3914
|
+
const isClickOnTrigger = this.triggerButtonRef?.contains(clickedElement);
|
|
3915
|
+
if (!isClickInsideDropdown && !isClickOnTrigger) {
|
|
3916
|
+
this.closeDropdown();
|
|
3917
|
+
}
|
|
3918
|
+
}
|
|
3278
3919
|
}
|
|
3279
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type:
|
|
3280
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownComponent, isStandalone: true, selector: "lib-dropdown", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:resize": "onWindowResize()", "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, static: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, template: "@if (isOpen() || isClosing()) {\n <div \n #dropdownMenu\n [id]=\"listboxId\"\n class=\"c-dropdown__menu\" \n [ngStyle]=\"menuStyles()\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"dropdownId\"\n >\n\n @switch (dataSource().type) {\n @case ('default') {\n @for (option of dataSource().options; track option.value) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\n }\n }\n\n @case ('group') {\n @for (group of dataSource().groups; track group.header) {\n <div class=\"c-dropdown__group\" role=\"group\" [attr.aria-labelledby]=\"'group-header-' + $index\">\n <div\n role=\"presentation\" \n class=\"c-dropdown__group-header\" \n [id]=\"'group-header-' + $index\"\n [attr.aria-hidden]=\"true\">\n {{ group.header }}\n </div>\n\n @for (option of group.options; track option.value) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\n }\n </div>\n }\n }\n }\n </div>\n}\n\n<ng-template #optionTpl let-option>\n <div\n role=\"option\"\n class=\"c-dropdown__option\"\n [attr.tabindex]=\"option.disabled ? -1 : 0\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled\"\n [class.c-dropdown__option--disabled]=\"option.disabled\"\n [class.c-dropdown__option--selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n (keydown)=\"onOptionKeydown($event, option)\">\n <div class=\"c-dropdown__option-content\">\n @if (option.icon) {\n <lib-icon [name]=\"option.icon\" [size]=\"'lg'\" [color]=\"option.disabled ? 'action-neutral-content-disabled' : ''\"></lib-icon>\n }\n \n <span class=\"c-dropdown__option-label\">{{ option.label }}</span>\n \n @if (option.detail) {\n <span class=\"c-dropdown__option-detail\">{{ option.detail }}</span>\n }\n </div>\n</div>\n</ng-template>", styles: [".c-dropdown{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-component-gap-sm);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);background-color:var(--color-background-primary);border:var(--size-border-width-sm) solid var(--color-border-neutral-default);border-radius:var(--size-border-radius-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-md);transition:all .2s ease-in-out;box-sizing:border-box}.c-dropdown:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-dropdown:hover:not(.c-dropdown--disabled){border-color:var(--color-border-neutral-hover)}.c-dropdown--disabled{cursor:auto;background-color:var(--color-background-neutral-disabled);border-color:var(--color-border-neutral-disabled);color:var(--color-content-neutral-disabled)}.c-dropdown--open{border-color:var(--color-border-accent-default);box-shadow:0 0 0 1px var(--color-border-accent-default)}.c-dropdown__menu{position:fixed;overflow-y:auto;overflow-x:hidden;z-index:1000;min-width:200px;max-width:320px;padding-top:var(--space-component-padding-sm);padding-bottom:var(--space-component-padding-sm);border-radius:var(--size-textfield-border-radius, 8px);border:var(--size-border-width-sm, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scroll-behavior:smooth;opacity:0;transform:translateY(-8px) scale(.95);animation:dropdown-enter .2s ease-out forwards;transform-origin:top center}.c-dropdown__menu::-webkit-scrollbar{width:4px;padding:0 var(--space-component-padding-lg)}.c-dropdown__menu::-webkit-scrollbar-track{border-radius:4px;background:transparent}.c-dropdown__menu::-webkit-scrollbar-thumb{border-radius:4px;background:var(--color-core-border-soft)}.c-dropdown__menu::-webkit-scrollbar-thumb:hover{background:var(--color-core-border-default)}.c-dropdown__group{width:100%}.c-dropdown__group-header{display:flex;align-items:center;width:100%;padding:var(--space-component-padding-md) var(--space-component-padding-lg);min-height:calc(48px - var(--space-component-padding-md) * 2);gap:var(--space-component-gap-sm);color:var(--color-core-content-soft);font-family:var(--typography-label-sm-strong-family);font-size:var(--typography-label-sm-strong-size);font-style:normal;font-weight:var(--typography-label-sm-strong-weight);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown__option{cursor:pointer;display:flex;align-items:center;font-style:normal;border:none;background-color:transparent;text-align:left;min-height:calc(40px - var(--space-component-padding-sm) * 2);width:calc(100% - var(--space-component-padding-lg) * 2);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);gap:var(--space-component-gap-sm);color:var(--color-core-content-default);transition:background-color .2s ease-in-out}.c-dropdown__option-content{display:flex;align-items:center;gap:var(--space-component-gap-sm)}.c-dropdown__option-label{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-dropdown__option-detail{font-style:normal;color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-dropdown__option:hover{background:var(--color-action-neutral-background-hover)}.c-dropdown__option:focus-visible{outline:none;background:var(--color-action-neutral-background-hover);box-shadow:0 0 0 2px var(--color-effect-focus-color) inset,0 0 0 4px var(--color-effect-focus-contrast) inset}.c-dropdown__option--disabled{pointer-events:none;color:var(--color-action-neutral-content-disabled)}.c-dropdown__option--disabled:hover{background-color:transparent}@keyframes dropdown-enter{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dropdown-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-4px) scale(.98)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
3920
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3921
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownSelectComponent, isStandalone: true, selector: "lib-dropdown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, template: "<div class=\"c-dropdown-select\" [ngClass]=\"getClasses()\">\n <!-- Backdrop for mobile -->\n @if (isOpen() || isClosing()) {\n <div\n class=\"c-dropdown-select__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close dropdown\"\n ></div>\n }\n\n <!-- Dropdown Menu -->\n @if (isOpen() || isClosing()) {\n <div\n class=\"c-dropdown-select__menu\"\n [ngClass]=\"getMenuClasses()\"\n #dropdownMenu\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\n (isMultiSelect()) {\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 -->\n <div class=\"c-dropdown-select__mobile-actions\">\n <lib-link-action\n [text]=\"cancelButtonText()\"\n variant=\"neutral\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onCancelClick()\"\n ></lib-link-action>\n <lib-link-action\n [text]=\"acceptButtonText()\"\n variant=\"primary\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onAcceptClick()\"\n ></lib-link-action>\n </div>\n </div>\n }\n</div>\n", styles: [".c-dropdown-select{position:relative}.c-dropdown-select__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-dropdown-select__backdrop--open{opacity:1}.c-dropdown-select__menu{position:absolute;margin-top:2px;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;width:fit-content;min-width:200px;max-width:320px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:dropdown-enter .2s ease-out forwards;transform-origin:top center}.c-dropdown-select__menu--right{left:0;right:auto}.c-dropdown-select__menu--left{left:auto;right:0}.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--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:none;padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);justify-content:space-between;align-items:center}@keyframes dropdown-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dropdown-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-dropdown-select__backdrop{display:block;z-index:999}.c-dropdown-select__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}.c-dropdown-select--open .c-dropdown-select__menu{transform:translateY(0)}.c-dropdown-select__mobile-actions{display:flex}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "iconBefore", "iconAfter"], outputs: ["clicked"] }] });
|
|
3281
3922
|
}
|
|
3282
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type:
|
|
3923
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, decorators: [{
|
|
3283
3924
|
type: Component,
|
|
3284
|
-
args: [{ selector: 'lib-dropdown', imports: [
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3925
|
+
args: [{ selector: 'lib-dropdown-select', imports: [
|
|
3926
|
+
NgClass,
|
|
3927
|
+
ReactiveFormsModule,
|
|
3928
|
+
IconComponent,
|
|
3929
|
+
CheckboxComponent,
|
|
3930
|
+
InputSearchComponent,
|
|
3931
|
+
LinkActionComponent,
|
|
3932
|
+
ButtonIconComponent,
|
|
3933
|
+
], template: "<div class=\"c-dropdown-select\" [ngClass]=\"getClasses()\">\n <!-- Backdrop for mobile -->\n @if (isOpen() || isClosing()) {\n <div\n class=\"c-dropdown-select__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close dropdown\"\n ></div>\n }\n\n <!-- Dropdown Menu -->\n @if (isOpen() || isClosing()) {\n <div\n class=\"c-dropdown-select__menu\"\n [ngClass]=\"getMenuClasses()\"\n #dropdownMenu\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\n (isMultiSelect()) {\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 -->\n <div class=\"c-dropdown-select__mobile-actions\">\n <lib-link-action\n [text]=\"cancelButtonText()\"\n variant=\"neutral\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onCancelClick()\"\n ></lib-link-action>\n <lib-link-action\n [text]=\"acceptButtonText()\"\n variant=\"primary\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onAcceptClick()\"\n ></lib-link-action>\n </div>\n </div>\n }\n</div>\n", styles: [".c-dropdown-select{position:relative}.c-dropdown-select__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-dropdown-select__backdrop--open{opacity:1}.c-dropdown-select__menu{position:absolute;margin-top:2px;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;width:fit-content;min-width:200px;max-width:320px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:dropdown-enter .2s ease-out forwards;transform-origin:top center}.c-dropdown-select__menu--right{left:0;right:auto}.c-dropdown-select__menu--left{left:auto;right:0}.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--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:none;padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);justify-content:space-between;align-items:center}@keyframes dropdown-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dropdown-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-dropdown-select__backdrop{display:block;z-index:999}.c-dropdown-select__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}.c-dropdown-select--open .c-dropdown-select__menu{transform:translateY(0)}.c-dropdown-select__mobile-actions{display:flex}}\n"] }]
|
|
3934
|
+
}], ctorParameters: () => [], propDecorators: { dropdownMenu: [{
|
|
3289
3935
|
type: ViewChild,
|
|
3290
3936
|
args: ['dropdownMenu']
|
|
3291
3937
|
}], onClickOutside: [{
|
|
3292
3938
|
type: HostListener,
|
|
3293
3939
|
args: ['document:click', ['$event']]
|
|
3294
|
-
}], onWindowResize: [{
|
|
3295
|
-
type: HostListener,
|
|
3296
|
-
args: ['window:resize']
|
|
3297
|
-
}], onWindowScroll: [{
|
|
3298
|
-
type: HostListener,
|
|
3299
|
-
args: ['window:scroll']
|
|
3300
3940
|
}] } });
|
|
3301
3941
|
|
|
3302
|
-
class
|
|
3303
|
-
|
|
3942
|
+
class DropdownSelectTriggerDirective {
|
|
3943
|
+
libDropdownSelectTriggerFor = input.required();
|
|
3304
3944
|
elementRef = inject(ElementRef);
|
|
3305
3945
|
onClick() {
|
|
3306
|
-
const
|
|
3307
|
-
if (
|
|
3308
|
-
|
|
3309
|
-
|
|
3946
|
+
const dropdownSelect = this.libDropdownSelectTriggerFor();
|
|
3947
|
+
if (dropdownSelect) {
|
|
3948
|
+
dropdownSelect.setTriggerButton(this.elementRef.nativeElement);
|
|
3949
|
+
dropdownSelect.toggleDropdown();
|
|
3310
3950
|
}
|
|
3311
3951
|
}
|
|
3312
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type:
|
|
3313
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type:
|
|
3952
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3953
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type: DropdownSelectTriggerDirective, isStandalone: true, selector: "[libDropdownSelectTriggerFor]", inputs: { libDropdownSelectTriggerFor: { classPropertyName: "libDropdownSelectTriggerFor", publicName: "libDropdownSelectTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
|
|
3314
3954
|
}
|
|
3315
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type:
|
|
3955
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectTriggerDirective, decorators: [{
|
|
3316
3956
|
type: Directive,
|
|
3317
3957
|
args: [{
|
|
3318
|
-
selector: '[
|
|
3958
|
+
selector: '[libDropdownSelectTriggerFor]',
|
|
3319
3959
|
}]
|
|
3320
3960
|
}], propDecorators: { onClick: [{
|
|
3321
3961
|
type: HostListener,
|
|
@@ -3392,7 +4032,7 @@ class InputDateComponent {
|
|
|
3392
4032
|
useExisting: forwardRef(() => InputDateComponent),
|
|
3393
4033
|
multi: true,
|
|
3394
4034
|
},
|
|
3395
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\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\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"calendarblank-regular\"\n (click)=\"toggleCalendar()\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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__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__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"] }, { 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"] }] });
|
|
4035
|
+
], 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 ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\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\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"calendarblank-regular\"\n (click)=\"toggleCalendar()\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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__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__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"] }, { 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"] }] });
|
|
3396
4036
|
}
|
|
3397
4037
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
3398
4038
|
type: Component,
|
|
@@ -3409,7 +4049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3409
4049
|
useExisting: forwardRef(() => InputDateComponent),
|
|
3410
4050
|
multi: true,
|
|
3411
4051
|
},
|
|
3412
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\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\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"calendarblank-regular\"\n (click)=\"toggleCalendar()\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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__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__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"] }]
|
|
4052
|
+
], 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 ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\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\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"calendarblank-regular\"\n (click)=\"toggleCalendar()\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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__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__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"] }]
|
|
3413
4053
|
}], propDecorators: { label: [{
|
|
3414
4054
|
type: Input
|
|
3415
4055
|
}], placeholder: [{
|
|
@@ -3508,7 +4148,7 @@ class InputNumberComponent {
|
|
|
3508
4148
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
3509
4149
|
multi: true,
|
|
3510
4150
|
},
|
|
3511
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__less\"\n iconName=\"minus-regular\"\n (click)=\"downNumber()\"\n >\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__up\"\n iconName=\"plus-regular\"\n (click)=\"upNumber()\"\n >\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) 2rem var(--space-component-padding-md) 2rem;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-align:center}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 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-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.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__up{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}.c-text-input__less{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__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{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}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\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"] }, { 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"] }] });
|
|
4151
|
+
], 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 ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__less\"\n iconName=\"minus-regular\"\n (click)=\"downNumber()\"\n >\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__up\"\n iconName=\"plus-regular\"\n (click)=\"upNumber()\"\n >\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) 2rem var(--space-component-padding-md) 2rem;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-align:center}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 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-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.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__up{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}.c-text-input__less{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__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{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}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\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"] }, { 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"] }] });
|
|
3512
4152
|
}
|
|
3513
4153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
3514
4154
|
type: Component,
|
|
@@ -3525,7 +4165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3525
4165
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
3526
4166
|
multi: true,
|
|
3527
4167
|
},
|
|
3528
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__less\"\n iconName=\"minus-regular\"\n (click)=\"downNumber()\"\n >\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__up\"\n iconName=\"plus-regular\"\n (click)=\"upNumber()\"\n >\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) 2rem var(--space-component-padding-md) 2rem;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-align:center}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 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-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.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__up{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}.c-text-input__less{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__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{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}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
4168
|
+
], 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 ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__less\"\n iconName=\"minus-regular\"\n (click)=\"downNumber()\"\n >\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__up\"\n iconName=\"plus-regular\"\n (click)=\"upNumber()\"\n >\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) 2rem var(--space-component-padding-md) 2rem;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-align:center}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 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-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.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__up{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}.c-text-input__less{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__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{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}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
3529
4169
|
}], propDecorators: { label: [{
|
|
3530
4170
|
type: Input
|
|
3531
4171
|
}], placeholder: [{
|
|
@@ -3674,7 +4314,7 @@ class InputPaymentComponent {
|
|
|
3674
4314
|
useExisting: forwardRef(() => InputPaymentComponent),
|
|
3675
4315
|
multi: true,
|
|
3676
4316
|
},
|
|
3677
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon [name]=\"disabled ? 'carddisabled' : icon\" size=\"md\"></lib-icon>\n </span>\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) 2rem;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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.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:focus-within input:first-of-type{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.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__mini{position:absolute;right:7px;border:0;height:calc(100% - 4px);top:0;bottom:0;margin:auto;border-radius:8px;width:81px;text-align:right;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__mini:focus-visible{outline:none}\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"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled"] }] });
|
|
4317
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon [name]=\"disabled ? 'carddisabled' : icon\" size=\"md\"></lib-icon>\n </span>\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) 2rem;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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.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:focus-within input:first-of-type{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.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__mini{position:absolute;right:7px;border:0;height:calc(100% - 4px);top:0;bottom:0;margin:auto;border-radius:8px;width:81px;text-align:right;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__mini:focus-visible{outline:none}\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"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled"] }] });
|
|
3678
4318
|
}
|
|
3679
4319
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputPaymentComponent, decorators: [{
|
|
3680
4320
|
type: Component,
|
|
@@ -3690,7 +4330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3690
4330
|
useExisting: forwardRef(() => InputPaymentComponent),
|
|
3691
4331
|
multi: true,
|
|
3692
4332
|
},
|
|
3693
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon [name]=\"disabled ? 'carddisabled' : icon\" size=\"md\"></lib-icon>\n </span>\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) 2rem;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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.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:focus-within input:first-of-type{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.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__mini{position:absolute;right:7px;border:0;height:calc(100% - 4px);top:0;bottom:0;margin:auto;border-radius:8px;width:81px;text-align:right;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__mini:focus-visible{outline:none}\n"] }]
|
|
4333
|
+
], 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 ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon [name]=\"disabled ? 'carddisabled' : icon\" size=\"md\"></lib-icon>\n </span>\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) 2rem;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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.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:focus-within input:first-of-type{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.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__mini{position:absolute;right:7px;border:0;height:calc(100% - 4px);top:0;bottom:0;margin:auto;border-radius:8px;width:81px;text-align:right;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__mini:focus-visible{outline:none}\n"] }]
|
|
3694
4334
|
}], propDecorators: { label: [{
|
|
3695
4335
|
type: Input
|
|
3696
4336
|
}], placeholder: [{
|
|
@@ -3726,119 +4366,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3726
4366
|
args: ['dateInput']
|
|
3727
4367
|
}] } });
|
|
3728
4368
|
|
|
3729
|
-
class InputSearchComponent {
|
|
3730
|
-
label = '';
|
|
3731
|
-
placeholder = '';
|
|
3732
|
-
helperText = '';
|
|
3733
|
-
alertText = '';
|
|
3734
|
-
successText = '';
|
|
3735
|
-
error = false;
|
|
3736
|
-
success = false;
|
|
3737
|
-
disabled = false;
|
|
3738
|
-
readonly = false;
|
|
3739
|
-
required = false;
|
|
3740
|
-
size = 'md';
|
|
3741
|
-
fullWidth = false;
|
|
3742
|
-
clearButton = false;
|
|
3743
|
-
emitValue = new EventEmitter();
|
|
3744
|
-
_value = '';
|
|
3745
|
-
onChangeFn = () => { };
|
|
3746
|
-
onTouchedFn = () => { };
|
|
3747
|
-
writeValue(value) {
|
|
3748
|
-
this._value = value ?? '';
|
|
3749
|
-
}
|
|
3750
|
-
registerOnChange(fn) {
|
|
3751
|
-
this.onChangeFn = fn;
|
|
3752
|
-
}
|
|
3753
|
-
registerOnTouched(fn) {
|
|
3754
|
-
this.onTouchedFn = fn;
|
|
3755
|
-
}
|
|
3756
|
-
setDisabledState(isDisabled) {
|
|
3757
|
-
this.disabled = isDisabled;
|
|
3758
|
-
}
|
|
3759
|
-
// ------------------------------
|
|
3760
|
-
onInput(event) {
|
|
3761
|
-
const input = event.target;
|
|
3762
|
-
this._value = input.value;
|
|
3763
|
-
this.onChangeFn(this._value);
|
|
3764
|
-
this.emitValue.emit(this._value);
|
|
3765
|
-
}
|
|
3766
|
-
onBlur() {
|
|
3767
|
-
this.onTouchedFn();
|
|
3768
|
-
}
|
|
3769
|
-
clearInput() {
|
|
3770
|
-
this._value = '';
|
|
3771
|
-
this.onChangeFn(this._value);
|
|
3772
|
-
this.emitValue.emit(this._value);
|
|
3773
|
-
}
|
|
3774
|
-
get inputClass() {
|
|
3775
|
-
return [
|
|
3776
|
-
'c-text-input__input',
|
|
3777
|
-
`c-text-input__input--${this.size}`,
|
|
3778
|
-
this.error ? 'is-error' : '',
|
|
3779
|
-
this.success ? 'is-success' : '',
|
|
3780
|
-
this.disabled ? 'is-disabled' : '',
|
|
3781
|
-
this.readonly ? 'is-readonly' : '',
|
|
3782
|
-
].filter(Boolean);
|
|
3783
|
-
}
|
|
3784
|
-
get ariaDescribedBy() {
|
|
3785
|
-
return this.helperText ? 'search-input-helper' : null;
|
|
3786
|
-
}
|
|
3787
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3788
|
-
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", readonly: "readonly", required: "required", size: "size", fullWidth: "fullWidth", clearButton: "clearButton" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
3789
|
-
{
|
|
3790
|
-
provide: NG_VALUE_ACCESSOR,
|
|
3791
|
-
useExisting: forwardRef(() => InputSearchComponent),
|
|
3792
|
-
multi: true,
|
|
3793
|
-
},
|
|
3794
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\" [class.c-text-input--with-clear-button]=\"clearButton\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\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 name=\"magnifyingglass-regular\" size=\"md\"></lib-icon>\n </span>\n \n <lib-button-icon\n *ngIf=\"clearButton && _value\"\n variant=\"neutral\"\n size=\"sm\"\n iconName=\"x-regular\"\n class=\"c-text-input__icon c-text-input__icon--right\"\n [disabled]=\"disabled || readonly\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) 2rem;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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.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"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
3795
|
-
}
|
|
3796
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, decorators: [{
|
|
3797
|
-
type: Component,
|
|
3798
|
-
args: [{ selector: 'lib-input-search', standalone: true, imports: [
|
|
3799
|
-
CommonModule,
|
|
3800
|
-
ReactiveFormsModule,
|
|
3801
|
-
InputLabelComponent,
|
|
3802
|
-
IconComponent,
|
|
3803
|
-
HelperTextComponent,
|
|
3804
|
-
ButtonIconComponent,
|
|
3805
|
-
], providers: [
|
|
3806
|
-
{
|
|
3807
|
-
provide: NG_VALUE_ACCESSOR,
|
|
3808
|
-
useExisting: forwardRef(() => InputSearchComponent),
|
|
3809
|
-
multi: true,
|
|
3810
|
-
},
|
|
3811
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\" [class.c-text-input--with-clear-button]=\"clearButton\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\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 name=\"magnifyingglass-regular\" size=\"md\"></lib-icon>\n </span>\n \n <lib-button-icon\n *ngIf=\"clearButton && _value\"\n variant=\"neutral\"\n size=\"sm\"\n iconName=\"x-regular\"\n class=\"c-text-input__icon c-text-input__icon--right\"\n [disabled]=\"disabled || readonly\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) 2rem;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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.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"] }]
|
|
3812
|
-
}], propDecorators: { label: [{
|
|
3813
|
-
type: Input
|
|
3814
|
-
}], placeholder: [{
|
|
3815
|
-
type: Input
|
|
3816
|
-
}], helperText: [{
|
|
3817
|
-
type: Input
|
|
3818
|
-
}], alertText: [{
|
|
3819
|
-
type: Input
|
|
3820
|
-
}], successText: [{
|
|
3821
|
-
type: Input
|
|
3822
|
-
}], error: [{
|
|
3823
|
-
type: Input
|
|
3824
|
-
}], success: [{
|
|
3825
|
-
type: Input
|
|
3826
|
-
}], disabled: [{
|
|
3827
|
-
type: Input
|
|
3828
|
-
}], readonly: [{
|
|
3829
|
-
type: Input
|
|
3830
|
-
}], required: [{
|
|
3831
|
-
type: Input
|
|
3832
|
-
}], size: [{
|
|
3833
|
-
type: Input
|
|
3834
|
-
}], fullWidth: [{
|
|
3835
|
-
type: Input
|
|
3836
|
-
}], clearButton: [{
|
|
3837
|
-
type: Input
|
|
3838
|
-
}], emitValue: [{
|
|
3839
|
-
type: Output
|
|
3840
|
-
}] } });
|
|
3841
|
-
|
|
3842
4369
|
class InputUploadComponent {
|
|
3843
4370
|
label = '';
|
|
3844
4371
|
placeholder = '';
|
|
@@ -3921,7 +4448,7 @@ class InputUploadComponent {
|
|
|
3921
4448
|
useExisting: forwardRef(() => InputUploadComponent),
|
|
3922
4449
|
multi: true,
|
|
3923
4450
|
},
|
|
3924
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n id=\"upload-input\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n for=\"upload-input\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"uploadsimple-regular\"\n (click)=\"fileInput.click()\"\n >\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input--no-file{color:var(--color-textfield-content-placeholder)}.c-text-input__input:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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__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__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"] }, { 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"] }] });
|
|
4451
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n id=\"upload-input\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n for=\"upload-input\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"uploadsimple-regular\"\n (click)=\"fileInput.click()\"\n >\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input--no-file{color:var(--color-textfield-content-placeholder)}.c-text-input__input:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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__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__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"] }, { 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"] }] });
|
|
3925
4452
|
}
|
|
3926
4453
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputUploadComponent, decorators: [{
|
|
3927
4454
|
type: Component,
|
|
@@ -3938,7 +4465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3938
4465
|
useExisting: forwardRef(() => InputUploadComponent),
|
|
3939
4466
|
multi: true,
|
|
3940
4467
|
},
|
|
3941
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n id=\"upload-input\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n for=\"upload-input\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"uploadsimple-regular\"\n (click)=\"fileInput.click()\"\n >\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input--no-file{color:var(--color-textfield-content-placeholder)}.c-text-input__input:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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__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__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"] }]
|
|
4468
|
+
], 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 ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n id=\"upload-input\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n for=\"upload-input\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"uploadsimple-regular\"\n (click)=\"fileInput.click()\"\n >\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input--no-file{color:var(--color-textfield-content-placeholder)}.c-text-input__input:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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__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__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"] }]
|
|
3942
4469
|
}], propDecorators: { label: [{
|
|
3943
4470
|
type: Input
|
|
3944
4471
|
}], placeholder: [{
|
|
@@ -4278,7 +4805,7 @@ class PasswordInputComponent {
|
|
|
4278
4805
|
useExisting: forwardRef(() => PasswordInputComponent),
|
|
4279
4806
|
multi: true,
|
|
4280
4807
|
},
|
|
4281
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [text]=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n [type]=\"inputType\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.autocomplete]=\"autocomplete\"\n [id]=\"name\"\n [name]=\"name\"\n [attr.aria-label]=\"label || 'Password input'\"\n [attr.aria-labelledby]=\"name\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n [ariaLabel]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n [iconName]=\"showPassword ? 'eyeslash-regular' : 'eye-regular'\"\n (click)=\"togglePassword()\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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__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__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"] }, { 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"] }] });
|
|
4808
|
+
], 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 [text]=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n [type]=\"inputType\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.autocomplete]=\"autocomplete\"\n [id]=\"name\"\n [name]=\"name\"\n [attr.aria-label]=\"label || 'Password input'\"\n [attr.aria-labelledby]=\"name\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n [ariaLabel]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n [iconName]=\"showPassword ? 'eyeslash-regular' : 'eye-regular'\"\n (click)=\"togglePassword()\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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__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__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"] }, { 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"] }] });
|
|
4282
4809
|
}
|
|
4283
4810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PasswordInputComponent, decorators: [{
|
|
4284
4811
|
type: Component,
|
|
@@ -4295,7 +4822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4295
4822
|
useExisting: forwardRef(() => PasswordInputComponent),
|
|
4296
4823
|
multi: true,
|
|
4297
4824
|
},
|
|
4298
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [text]=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n [type]=\"inputType\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.autocomplete]=\"autocomplete\"\n [id]=\"name\"\n [name]=\"name\"\n [attr.aria-label]=\"label || 'Password input'\"\n [attr.aria-labelledby]=\"name\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n [ariaLabel]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n [iconName]=\"showPassword ? 'eyeslash-regular' : 'eye-regular'\"\n (click)=\"togglePassword()\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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__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__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"] }]
|
|
4825
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [text]=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n [type]=\"inputType\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.autocomplete]=\"autocomplete\"\n [id]=\"name\"\n [name]=\"name\"\n [attr.aria-label]=\"label || 'Password input'\"\n [attr.aria-labelledby]=\"name\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n [ariaLabel]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n [iconName]=\"showPassword ? 'eyeslash-regular' : 'eye-regular'\"\n (click)=\"togglePassword()\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 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__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__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"] }]
|
|
4299
4826
|
}], propDecorators: { label: [{
|
|
4300
4827
|
type: Input
|
|
4301
4828
|
}], name: [{
|
|
@@ -4413,11 +4940,11 @@ class RadioGroupComponent {
|
|
|
4413
4940
|
this.valueChange.emit(value);
|
|
4414
4941
|
}
|
|
4415
4942
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4416
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: RadioGroupComponent, isStandalone: true, selector: "lib-radio-group", inputs: { label: "label", name: "name", options: "options", value: "value", error: "error", helperText: "helperText", required: "required" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<fieldset [attr.aria-invalid]=\"error\" class=\"c-radio-group\">\n
|
|
4943
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: RadioGroupComponent, isStandalone: true, selector: "lib-radio-group", inputs: { label: "label", name: "name", options: "options", value: "value", error: "error", helperText: "helperText", required: "required" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<fieldset [attr.aria-invalid]=\"error\" class=\"c-radio-group\">\n <legend class=\"sr-only\">{{ label }}</legend>\n <lib-input-label size=\"sm\" [text]=\"label\" [required]=\"required\" />\n\n <div class=\"c-radio-group__options\">\n <lib-radio\n *ngFor=\"let option of options\"\n [label]=\"option.label\"\n [value]=\"option.value\"\n [name]=\"name\"\n [error]=\"error\"\n (change)=\"onChange(option.value)\"\n />\n </div>\n <p *ngIf=\"helperText\" class=\"c-radio-group__helper\">\n <lib-icon\n name=\"warning-regular\"\n color=\"feedback-danger-default\"\n size=\"md\"\n />\n {{ helperText }}\n </p>\n</fieldset>\n", styles: [".c-radio-group{display:flex;flex-direction:column;gap:var(--space-container-gap-sm);border:0;padding:0}.c-radio-group__options{display:flex;flex-direction:column;gap:var(--space-container-gap-md)}.c-radio-group__helper{display:flex;align-items:center;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-size);line-height:var(--typography-label-sm-line-height);letter-spacing:var(--typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0}.c-radio-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["name", "label", "value", "disabled", "checked", "error", "isLoading", "id"], outputs: ["optionSelected"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
4417
4944
|
}
|
|
4418
4945
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
4419
4946
|
type: Component,
|
|
4420
|
-
args: [{ selector: 'lib-radio-group', standalone: true, imports: [CommonModule, RadioComponent, InputLabelComponent, IconComponent], template: "<fieldset [attr.aria-invalid]=\"error\" class=\"c-radio-group\">\n
|
|
4947
|
+
args: [{ selector: 'lib-radio-group', standalone: true, imports: [CommonModule, RadioComponent, InputLabelComponent, IconComponent], template: "<fieldset [attr.aria-invalid]=\"error\" class=\"c-radio-group\">\n <legend class=\"sr-only\">{{ label }}</legend>\n <lib-input-label size=\"sm\" [text]=\"label\" [required]=\"required\" />\n\n <div class=\"c-radio-group__options\">\n <lib-radio\n *ngFor=\"let option of options\"\n [label]=\"option.label\"\n [value]=\"option.value\"\n [name]=\"name\"\n [error]=\"error\"\n (change)=\"onChange(option.value)\"\n />\n </div>\n <p *ngIf=\"helperText\" class=\"c-radio-group__helper\">\n <lib-icon\n name=\"warning-regular\"\n color=\"feedback-danger-default\"\n size=\"md\"\n />\n {{ helperText }}\n </p>\n</fieldset>\n", styles: [".c-radio-group{display:flex;flex-direction:column;gap:var(--space-container-gap-sm);border:0;padding:0}.c-radio-group__options{display:flex;flex-direction:column;gap:var(--space-container-gap-md)}.c-radio-group__helper{display:flex;align-items:center;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-size);line-height:var(--typography-label-sm-line-height);letter-spacing:var(--typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0}.c-radio-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
4421
4948
|
}], propDecorators: { label: [{
|
|
4422
4949
|
type: Input
|
|
4423
4950
|
}], name: [{
|
|
@@ -4520,13 +5047,10 @@ class SelectComponent {
|
|
|
4520
5047
|
searchBarEnabled = input(false);
|
|
4521
5048
|
valueChange = output();
|
|
4522
5049
|
// Private signals
|
|
4523
|
-
_isOpen = signal(false);
|
|
4524
5050
|
_selectedOptions = signal([]);
|
|
4525
5051
|
_filteredOptions = signal([]);
|
|
4526
5052
|
_searchText = signal('');
|
|
4527
|
-
searchControl = new FormControl('');
|
|
4528
5053
|
// Public computed signals
|
|
4529
|
-
isOpen = this._isOpen.asReadonly();
|
|
4530
5054
|
selectedOptions = this._selectedOptions.asReadonly();
|
|
4531
5055
|
filteredOptions = this._filteredOptions.asReadonly();
|
|
4532
5056
|
searchText = this._searchText.asReadonly();
|
|
@@ -4590,16 +5114,11 @@ class SelectComponent {
|
|
|
4590
5114
|
});
|
|
4591
5115
|
// Handle value changes
|
|
4592
5116
|
effect(() => {
|
|
4593
|
-
const
|
|
4594
|
-
if (
|
|
4595
|
-
this.updateSelectedOptionsFromValue(
|
|
5117
|
+
const currentValue = this.value();
|
|
5118
|
+
if (currentValue !== null) {
|
|
5119
|
+
this.updateSelectedOptionsFromValue(currentValue);
|
|
4596
5120
|
}
|
|
4597
5121
|
});
|
|
4598
|
-
// Handle search control value changes
|
|
4599
|
-
this.searchControl.valueChanges.subscribe((value) => {
|
|
4600
|
-
this._searchText.set(value || '');
|
|
4601
|
-
this.filterOptions();
|
|
4602
|
-
});
|
|
4603
5122
|
}
|
|
4604
5123
|
// ControlValueAccessor implementation
|
|
4605
5124
|
writeValue(value) {
|
|
@@ -4616,24 +5135,35 @@ class SelectComponent {
|
|
|
4616
5135
|
registerOnTouched(fn) {
|
|
4617
5136
|
this.onTouched = fn;
|
|
4618
5137
|
}
|
|
4619
|
-
setDisabledState(
|
|
5138
|
+
setDisabledState(_isDisabled) {
|
|
4620
5139
|
// Note: We can't directly set the input signal, but we can handle this
|
|
4621
5140
|
// by checking the disabled state in our methods
|
|
4622
5141
|
// The parent form control will handle the disabled state
|
|
4623
5142
|
}
|
|
4624
5143
|
// Public methods
|
|
4625
|
-
|
|
4626
|
-
|
|
4627
|
-
|
|
4628
|
-
|
|
4629
|
-
|
|
4630
|
-
|
|
4631
|
-
|
|
4632
|
-
|
|
4633
|
-
this.
|
|
5144
|
+
// Dropdown event handlers
|
|
5145
|
+
onDropdownSearchChanged(searchText) {
|
|
5146
|
+
this._searchText.set(searchText);
|
|
5147
|
+
this.filterOptions();
|
|
5148
|
+
}
|
|
5149
|
+
onDropdownValueChange(value) {
|
|
5150
|
+
// Update our internal state based on the valueChange from dropdown-select
|
|
5151
|
+
if (value !== null) {
|
|
5152
|
+
this.updateSelectedOptionsFromValue(value);
|
|
5153
|
+
}
|
|
5154
|
+
else {
|
|
5155
|
+
this._selectedOptions.set([]);
|
|
5156
|
+
}
|
|
5157
|
+
// Emit our own valueChange output
|
|
5158
|
+
this.valueChange.emit(value);
|
|
5159
|
+
}
|
|
5160
|
+
getSelectedValues() {
|
|
5161
|
+
if (this.isMultiSelect()) {
|
|
5162
|
+
return this._selectedOptions().map((opt) => opt.value);
|
|
5163
|
+
}
|
|
5164
|
+
else {
|
|
5165
|
+
return this._selectedOptions()[0]?.value || '';
|
|
4634
5166
|
}
|
|
4635
|
-
// Mark as touched when user interacts
|
|
4636
|
-
this.onTouched();
|
|
4637
5167
|
}
|
|
4638
5168
|
selectOption(option) {
|
|
4639
5169
|
if (this.isMultiSelect()) {
|
|
@@ -4688,8 +5218,9 @@ class SelectComponent {
|
|
|
4688
5218
|
}
|
|
4689
5219
|
selectSingleOption(option) {
|
|
4690
5220
|
this._selectedOptions.set([option]);
|
|
4691
|
-
this._isOpen.set(false);
|
|
4692
5221
|
this.emitValueChange();
|
|
5222
|
+
// Mark as touched when user interacts
|
|
5223
|
+
this.onTouched();
|
|
4693
5224
|
}
|
|
4694
5225
|
filterOptions() {
|
|
4695
5226
|
const search = this._searchText().trim().toLowerCase();
|
|
@@ -4746,20 +5277,14 @@ class SelectComponent {
|
|
|
4746
5277
|
this.valueChange.emit(value);
|
|
4747
5278
|
this.onChange(value);
|
|
4748
5279
|
}
|
|
4749
|
-
// Host listeners
|
|
4750
|
-
onClickOutside(target) {
|
|
4751
|
-
if (this._isOpen() && !this.elementRef.nativeElement.contains(target)) {
|
|
4752
|
-
this._isOpen.set(false);
|
|
4753
|
-
}
|
|
4754
|
-
}
|
|
4755
5280
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4756
|
-
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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" },
|
|
5281
|
+
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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
|
|
4757
5282
|
{
|
|
4758
5283
|
provide: NG_VALUE_ACCESSOR,
|
|
4759
5284
|
useExisting: forwardRef(() => SelectComponent),
|
|
4760
5285
|
multi: true,
|
|
4761
5286
|
},
|
|
4762
|
-
], 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--open]=\"isOpen()\"\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 [required]=\"required()\"\n [text]=\"label()\"\n [disabled]=\"disabled()\"\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 [disabled]=\"disabled()\"\n (click)=\"toggleDropdown()\"\n [attr.aria-expanded]=\"isOpen()\"\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) {\n <lib-icon\n [name]=\"selectedOption()!.icon\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [color]=\"\n disabled()\n ? 'textfield-content-disabled'\n : 'textfield-content-default'\n \"\n >\n </lib-icon>\n }\n {{ displayText() }}\n </span>\n }\n </div>\n\n <!-- Caret Icon -->\n <lib-icon\n [name]=\"isOpen() ? 'caretup-regular' : '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 @if (isOpen()) {\n <div class=\"c-select__dropdown\">\n <!-- Search Input (if enabled and not multiselect) -->\n @if (showSearchBar()) {\n <div class=\"c-select__search\">\n <lib-input-search\n placeholder=\"Search options...\"\n [formControl]=\"searchControl\"\n size=\"lg\"\n [fullWidth]=\"true\"\n ></lib-input-search>\n </div>\n }\n\n <!-- Options List -->\n <div class=\"c-select__options\">\n @for (group of filteredOptions(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-select__group\">\n <!-- Group Label -->\n\n @if (group.label) {\n <div class=\"c-select__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) { @if\n (isMultiSelect()) {\n <!-- For multiselect: use full checkbox component with label -->\n <div class=\"c-select__option c-select__option--multiselect\">\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\"\n (changed)=\"onCheckboxChange(option, $event.checked)\"\n ></lib-checkbox>\n </div>\n } @else {\n\n <!-- For single select: use button with icon and label -->\n <button\n type=\"button\"\n class=\"c-select__option\"\n [class.c-select__option--selected]=\"isSelected(option)\"\n (click)=\"selectOption(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-select__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-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 </div>\n }\n </div>\n\n <!-- Helper Text -->\n @if (helperText() && !isError()) {\n <lib-helper-text\n [text]=\"helperText()\"\n [disabled]=\"disabled()\"\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 ></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;padding:6px 12px;padding:0 var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;padding:0 var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;padding:0 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{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}.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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.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)}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.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)}.c-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:150;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:300px;overflow:hidden;display:flex;flex-direction:column}.c-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-select__search-input{width:100%;border:1px solid var(--color-core-border-default);border-radius:6px;background-color:var(--color-core-background-default);color:var(--color-core-content-default);font-size:14px;font-family:inherit}.c-select__search-input:focus{outline:none;border-color:var(--color-action-primary-border-default);box-shadow:0 0 0 2px var(--color-action-primary-border-default)}.c-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-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-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-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);text-align:left;cursor:pointer}.c-select__option:hover{background-color:var(--color-action-neutral-background-hover)}.c-select__option:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-select__option-label{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "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"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }] });
|
|
5287
|
+
], 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 ></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 [disabled]=\"disabled()\"\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) {\n <lib-icon\n [name]=\"selectedOption()?.icon!\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [color]=\"\n disabled() || selectedOption()?.disabled\n ? 'textfield-content-disabled'\n : null\n \"\n >\n </lib-icon>\n }\n {{ displayText() }}\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]=\"'Search options...'\"\n [disabled]=\"disabled()\"\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 ></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 ></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;padding:6px 12px;padding:0 var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;padding:0 var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;padding:0 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{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}.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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.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)}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.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", "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"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled"] }, { kind: "component", type: DropdownSelectComponent, selector: "lib-dropdown-select", inputs: ["options", "variant", "selectedValues", "searchBarEnabled", "searchPlaceholder", "disabled", "cancelButtonText", "acceptButtonText", "position"], outputs: ["optionSelected", "optionDeselected", "searchChanged", "valueChange", "cancelClicked", "acceptClicked"] }, { kind: "directive", type: DropdownSelectTriggerDirective, selector: "[libDropdownSelectTriggerFor]", inputs: ["libDropdownSelectTriggerFor"] }] });
|
|
4763
5288
|
}
|
|
4764
5289
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, decorators: [{
|
|
4765
5290
|
type: Component,
|
|
@@ -4771,19 +5296,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4771
5296
|
TagComponent,
|
|
4772
5297
|
InputLabelComponent,
|
|
4773
5298
|
HelperTextComponent,
|
|
4774
|
-
|
|
4775
|
-
|
|
5299
|
+
DropdownSelectComponent,
|
|
5300
|
+
DropdownSelectTriggerDirective,
|
|
4776
5301
|
], providers: [
|
|
4777
5302
|
{
|
|
4778
5303
|
provide: NG_VALUE_ACCESSOR,
|
|
4779
5304
|
useExisting: forwardRef(() => SelectComponent),
|
|
4780
5305
|
multi: true,
|
|
4781
5306
|
},
|
|
4782
|
-
], 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--open]=\"isOpen()\"\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 [required]=\"required()\"\n [text]=\"label()\"\n [disabled]=\"disabled()\"\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 [disabled]=\"disabled()\"\n (click)=\"toggleDropdown()\"\n [attr.aria-expanded]=\"isOpen()\"\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) {\n <lib-icon\n [name]=\"selectedOption()!.icon\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [color]=\"\n disabled()\n ? 'textfield-content-disabled'\n : 'textfield-content-default'\n \"\n >\n </lib-icon>\n }\n {{ displayText() }}\n </span>\n }\n </div>\n\n <!-- Caret Icon -->\n <lib-icon\n [name]=\"isOpen() ? 'caretup-regular' : '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 @if (isOpen()) {\n <div class=\"c-select__dropdown\">\n <!-- Search Input (if enabled and not multiselect) -->\n @if (showSearchBar()) {\n <div class=\"c-select__search\">\n <lib-input-search\n placeholder=\"Search options...\"\n [formControl]=\"searchControl\"\n size=\"lg\"\n [fullWidth]=\"true\"\n ></lib-input-search>\n </div>\n }\n\n <!-- Options List -->\n <div class=\"c-select__options\">\n @for (group of filteredOptions(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-select__group\">\n <!-- Group Label -->\n\n @if (group.label) {\n <div class=\"c-select__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) { @if\n (isMultiSelect()) {\n <!-- For multiselect: use full checkbox component with label -->\n <div class=\"c-select__option c-select__option--multiselect\">\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\"\n (changed)=\"onCheckboxChange(option, $event.checked)\"\n ></lib-checkbox>\n </div>\n } @else {\n\n <!-- For single select: use button with icon and label -->\n <button\n type=\"button\"\n class=\"c-select__option\"\n [class.c-select__option--selected]=\"isSelected(option)\"\n (click)=\"selectOption(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-select__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-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 </div>\n }\n </div>\n\n <!-- Helper Text -->\n @if (helperText() && !isError()) {\n <lib-helper-text\n [text]=\"helperText()\"\n [disabled]=\"disabled()\"\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 ></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;padding:6px 12px;padding:0 var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;padding:0 var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;padding:0 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{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}.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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.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)}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.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)}.c-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:150;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:300px;overflow:hidden;display:flex;flex-direction:column}.c-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-select__search-input{width:100%;border:1px solid var(--color-core-border-default);border-radius:6px;background-color:var(--color-core-background-default);color:var(--color-core-content-default);font-size:14px;font-family:inherit}.c-select__search-input:focus{outline:none;border-color:var(--color-action-primary-border-default);box-shadow:0 0 0 2px var(--color-action-primary-border-default)}.c-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-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-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-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);text-align:left;cursor:pointer}.c-select__option:hover{background-color:var(--color-action-neutral-background-hover)}.c-select__option:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-select__option-label{flex:1;min-width:0}\n"] }]
|
|
4783
|
-
}], ctorParameters: () => []
|
|
4784
|
-
type: HostListener,
|
|
4785
|
-
args: ['document:click', ['$event.target']]
|
|
4786
|
-
}] } });
|
|
5307
|
+
], 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 ></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 [disabled]=\"disabled()\"\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) {\n <lib-icon\n [name]=\"selectedOption()?.icon!\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [color]=\"\n disabled() || selectedOption()?.disabled\n ? 'textfield-content-disabled'\n : null\n \"\n >\n </lib-icon>\n }\n {{ displayText() }}\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]=\"'Search options...'\"\n [disabled]=\"disabled()\"\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 ></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 ></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;padding:6px 12px;padding:0 var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;padding:0 var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;padding:0 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{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}.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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.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)}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.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"] }]
|
|
5308
|
+
}], ctorParameters: () => [] });
|
|
4787
5309
|
|
|
4788
5310
|
class SocialLoginComponent {
|
|
4789
5311
|
provider = input('google');
|
|
@@ -4831,11 +5353,11 @@ class SwitchComponent {
|
|
|
4831
5353
|
this.checked.set(!this.checked());
|
|
4832
5354
|
}
|
|
4833
5355
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4834
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SwitchComponent, isStandalone: true, selector: "lib-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<div\n class=\"c-switch\"\n [class.c-switch--checked]=\"checked()\"\n [class.c-switch--disabled]=\"disabled()\"\n>\n <button\n type=\"button\"\n class=\"c-switch__track\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"label()\"\n >\n <span class=\"c-switch__thumb\"></span>\n </button>\n\n @if (label()) {\n <lib-input-label\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [text]=\"label()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-switch{display:flex;width:19.5rem;min-width:2.75rem;align-items:center;gap:var(--space-component-gap-md)}.c-switch__track{position:relative;width:44px;height:24px;border:none;cursor:pointer;transition:background .2s;display:flex;padding:var(--space-component-padding-xs, .25rem) var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-xs, .25rem) var(--space-component-padding-xs, .25rem);align-items:center;gap:.5rem;border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-unchecked-background-default, #929a99)}.c-switch__track:hover{background:var(--color-switch-unchecked-background-hover, #7d8483)}.c-switch__track:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-switch__thumb{position:absolute;top:4px;left:4px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s}.c-switch--checked .c-switch__track{border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-checked-background-default, #217870)}.c-switch--checked .c-switch__track:hover{background:var(--color-switch-checked-background-hover, #19625b)}.c-switch--checked .c-switch__thumb{transform:translate(20px)}.c-switch--disabled{cursor:not-allowed}.c-switch--disabled .c-switch__track{cursor:not-allowed;background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}.c-switch--disabled .c-switch__track:hover{background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }] });
|
|
5356
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SwitchComponent, isStandalone: true, selector: "lib-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<div\n class=\"c-switch\"\n [class.c-switch--checked]=\"checked()\"\n [class.c-switch--disabled]=\"disabled()\"\n>\n <button\n type=\"button\"\n class=\"c-switch__track\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"label()\"\n >\n <span class=\"c-switch__thumb\"></span>\n </button>\n\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [text]=\"label()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-switch{display:flex;width:19.5rem;min-width:2.75rem;align-items:center;gap:var(--space-component-gap-md)}.c-switch__track{position:relative;width:44px;height:24px;border:none;cursor:pointer;transition:background .2s;display:flex;padding:var(--space-component-padding-xs, .25rem) var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-xs, .25rem) var(--space-component-padding-xs, .25rem);align-items:center;gap:.5rem;border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-unchecked-background-default, #929a99)}.c-switch__track:hover{background:var(--color-switch-unchecked-background-hover, #7d8483)}.c-switch__track:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-switch__thumb{position:absolute;top:4px;left:4px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s}.c-switch--checked .c-switch__track{border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-checked-background-default, #217870)}.c-switch--checked .c-switch__track:hover{background:var(--color-switch-checked-background-hover, #19625b)}.c-switch--checked .c-switch__thumb{transform:translate(20px)}.c-switch--disabled{cursor:not-allowed}.c-switch--disabled .c-switch__track{cursor:not-allowed;background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}.c-switch--disabled .c-switch__track:hover{background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }] });
|
|
4835
5357
|
}
|
|
4836
5358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
4837
5359
|
type: Component,
|
|
4838
|
-
args: [{ selector: 'lib-switch', imports: [FormsModule, InputLabelComponent], template: "<div\n class=\"c-switch\"\n [class.c-switch--checked]=\"checked()\"\n [class.c-switch--disabled]=\"disabled()\"\n>\n <button\n type=\"button\"\n class=\"c-switch__track\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"label()\"\n >\n <span class=\"c-switch__thumb\"></span>\n </button>\n\n @if (label()) {\n <lib-input-label\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [text]=\"label()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-switch{display:flex;width:19.5rem;min-width:2.75rem;align-items:center;gap:var(--space-component-gap-md)}.c-switch__track{position:relative;width:44px;height:24px;border:none;cursor:pointer;transition:background .2s;display:flex;padding:var(--space-component-padding-xs, .25rem) var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-xs, .25rem) var(--space-component-padding-xs, .25rem);align-items:center;gap:.5rem;border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-unchecked-background-default, #929a99)}.c-switch__track:hover{background:var(--color-switch-unchecked-background-hover, #7d8483)}.c-switch__track:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-switch__thumb{position:absolute;top:4px;left:4px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s}.c-switch--checked .c-switch__track{border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-checked-background-default, #217870)}.c-switch--checked .c-switch__track:hover{background:var(--color-switch-checked-background-hover, #19625b)}.c-switch--checked .c-switch__thumb{transform:translate(20px)}.c-switch--disabled{cursor:not-allowed}.c-switch--disabled .c-switch__track{cursor:not-allowed;background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}.c-switch--disabled .c-switch__track:hover{background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}\n"] }]
|
|
5360
|
+
args: [{ selector: 'lib-switch', imports: [FormsModule, InputLabelComponent], template: "<div\n class=\"c-switch\"\n [class.c-switch--checked]=\"checked()\"\n [class.c-switch--disabled]=\"disabled()\"\n>\n <button\n type=\"button\"\n class=\"c-switch__track\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"label()\"\n >\n <span class=\"c-switch__thumb\"></span>\n </button>\n\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [text]=\"label()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-switch{display:flex;width:19.5rem;min-width:2.75rem;align-items:center;gap:var(--space-component-gap-md)}.c-switch__track{position:relative;width:44px;height:24px;border:none;cursor:pointer;transition:background .2s;display:flex;padding:var(--space-component-padding-xs, .25rem) var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-xs, .25rem) var(--space-component-padding-xs, .25rem);align-items:center;gap:.5rem;border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-unchecked-background-default, #929a99)}.c-switch__track:hover{background:var(--color-switch-unchecked-background-hover, #7d8483)}.c-switch__track:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-switch__thumb{position:absolute;top:4px;left:4px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s}.c-switch--checked .c-switch__track{border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-checked-background-default, #217870)}.c-switch--checked .c-switch__track:hover{background:var(--color-switch-checked-background-hover, #19625b)}.c-switch--checked .c-switch__thumb{transform:translate(20px)}.c-switch--disabled{cursor:not-allowed}.c-switch--disabled .c-switch__track{cursor:not-allowed;background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}.c-switch--disabled .c-switch__track:hover{background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}\n"] }]
|
|
4839
5361
|
}] });
|
|
4840
5362
|
|
|
4841
5363
|
class TabsComponent {
|
|
@@ -4955,7 +5477,7 @@ class TextInputComponent {
|
|
|
4955
5477
|
useExisting: forwardRef(() => TextInputComponent),
|
|
4956
5478
|
multi: true,
|
|
4957
5479
|
},
|
|
4958
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [text]=\"label\"\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]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"_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 [class]=\"helperClass\"\n >\n {{ helperText }}\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-icon\n name=\"warning-regular\"\n color=\"feedback-danger-default\"\n size=\"md\"\n ></lib-icon\n >{{ alertText }}\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon\n name=\"checkcircle-regular\"\n color=\"feedback-success-default\"\n size=\"md\"\n ></lib-icon\n >{{ successText }}\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{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(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) 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__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"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
5480
|
+
], 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 ></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]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"_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 [class]=\"helperClass\"\n >\n {{ helperText }}\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-icon\n name=\"warning-regular\"\n color=\"feedback-danger-default\"\n size=\"md\"\n ></lib-icon\n >{{ alertText }}\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon\n name=\"checkcircle-regular\"\n color=\"feedback-success-default\"\n size=\"md\"\n ></lib-icon\n >{{ successText }}\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{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(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) 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__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"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
4959
5481
|
}
|
|
4960
5482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
4961
5483
|
type: Component,
|
|
@@ -4970,7 +5492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4970
5492
|
useExisting: forwardRef(() => TextInputComponent),
|
|
4971
5493
|
multi: true,
|
|
4972
5494
|
},
|
|
4973
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [text]=\"label\"\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]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"_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 [class]=\"helperClass\"\n >\n {{ helperText }}\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-icon\n name=\"warning-regular\"\n color=\"feedback-danger-default\"\n size=\"md\"\n ></lib-icon\n >{{ alertText }}\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon\n name=\"checkcircle-regular\"\n color=\"feedback-success-default\"\n size=\"md\"\n ></lib-icon\n >{{ successText }}\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{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(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) 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__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"] }]
|
|
5495
|
+
], 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 ></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]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"_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 [class]=\"helperClass\"\n >\n {{ helperText }}\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-icon\n name=\"warning-regular\"\n color=\"feedback-danger-default\"\n size=\"md\"\n ></lib-icon\n >{{ alertText }}\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon\n name=\"checkcircle-regular\"\n color=\"feedback-success-default\"\n size=\"md\"\n ></lib-icon\n >{{ successText }}\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{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(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) 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__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"] }]
|
|
4974
5496
|
}], propDecorators: { label: [{
|
|
4975
5497
|
type: Input
|
|
4976
5498
|
}], name: [{
|
|
@@ -5063,7 +5585,7 @@ class TextareaComponent {
|
|
|
5063
5585
|
useExisting: forwardRef(() => TextareaComponent),
|
|
5064
5586
|
multi: true,
|
|
5065
5587
|
},
|
|
5066
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <textarea\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [required]=\"required\"\n [value]=\"_value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [name]=\"name\"\n ></textarea>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) 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__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"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled"] }] });
|
|
5588
|
+
], 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 ></lib-input-label>\n\n <textarea\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [required]=\"required\"\n [value]=\"_value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [name]=\"name\"\n ></textarea>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) 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__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"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled"] }] });
|
|
5067
5589
|
}
|
|
5068
5590
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
5069
5591
|
type: Component,
|
|
@@ -5079,7 +5601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
5079
5601
|
useExisting: forwardRef(() => TextareaComponent),
|
|
5080
5602
|
multi: true,
|
|
5081
5603
|
},
|
|
5082
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <textarea\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [required]=\"required\"\n [value]=\"_value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [name]=\"name\"\n ></textarea>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) 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__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"] }]
|
|
5604
|
+
], 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 ></lib-input-label>\n\n <textarea\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [required]=\"required\"\n [value]=\"_value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [name]=\"name\"\n ></textarea>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></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{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(--space-component-padding-md) var(--space-component-padding-lg);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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) 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__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"] }]
|
|
5083
5605
|
}], propDecorators: { label: [{
|
|
5084
5606
|
type: Input
|
|
5085
5607
|
}], placeholder: [{
|
|
@@ -5155,11 +5677,11 @@ class TileComponent {
|
|
|
5155
5677
|
return this.variant === 'neutral' && this.name ? this.name : null;
|
|
5156
5678
|
}
|
|
5157
5679
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5158
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", title: "title", name: "name", selected: "selected", disabled: "disabled", isLoading: "isLoading" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<div\n class=\"c-tile\"\n [class.c-tile--selected]=\"selected\"\n [class.c-tile--neutral]=\"variant === 'neutral'\"\n [class.c-tile--disabled]=\"disabled\"\n [class.is-loading]=\"isLoading\"\n [attr.name]=\"tileName\"\n [tabindex]=\"variant === 'neutral' ? 0 : -1\"\n role=\"button\"\n (click)=\"onClick()\"\n (keyup.enter)=\"onClick()\"\n>\n <div class=\"c-tile__wrapper\">\n @if (isLoading) {\n
|
|
5680
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", title: "title", name: "name", selected: "selected", disabled: "disabled", isLoading: "isLoading" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<div\n class=\"c-tile\"\n [class.c-tile--selected]=\"selected\"\n [class.c-tile--neutral]=\"variant === 'neutral'\"\n [class.c-tile--disabled]=\"disabled\"\n [class.is-loading]=\"isLoading\"\n [attr.name]=\"tileName\"\n [tabindex]=\"variant === 'neutral' ? 0 : -1\"\n role=\"button\"\n (click)=\"onClick()\"\n (keyup.enter)=\"onClick()\"\n>\n <div class=\"c-tile__wrapper\">\n @if (isLoading) {\n <div class=\"c-tile__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <p *ngIf=\"title\" class=\"c-tile__title\">{{ title }}</p>\n }\n <lib-radio\n *ngIf=\"variant === 'radio'\"\n [name]=\"controlName\"\n label=\"\"\n [disabled]=\"disabled\"\n [value]=\"selected ? 'true' : ''\"\n [checked]=\"selected\"\n (click)=\"onRadioClick($event)\"\n class=\"c-tile__check\"\n ></lib-radio>\n <lib-checkbox\n *ngIf=\"variant === 'checkbox'\"\n [name]=\"controlName\"\n label=\"\"\n [disabled]=\"disabled\"\n [state]=\"selected ? 'checked' : 'unchecked'\"\n class=\"c-tile__check\"\n ></lib-checkbox>\n </div>\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".c-tile{display:flex;padding:var(--space-container-padding-sm);flex-direction:column;align-items:flex-start;border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:has(.c-tile__content:not(:empty)){gap:var(--space-container-gap-sm)}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--disabled{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled);cursor:not-allowed}.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected,.c-tile--disabled.c-tile--selected:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;gap:var(--space-component-gap-sm);width:100%;height:100%;align-items:center;justify-content:space-between}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #EDFDFA)}.c-tile:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-tile__title{flex-grow:1;margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile--disabled .c-tile__title{color:var(--color-tile-content-disabled)}.c-tile__check{display:flex;align-items:center;justify-content:center}.c-tile.is-loading .c-tile__skeleton{flex-grow:1;display:flex;align-items:center;max-width:70px}.c-tile.is-loading .c-tile__skeleton span{display:block;width:100%;height:8px;background:var(--color-effect-skeleton-strong);border-radius:var(--size-border-radius-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["name", "label", "value", "disabled", "checked", "error", "isLoading", "id"], outputs: ["optionSelected"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }] });
|
|
5159
5681
|
}
|
|
5160
5682
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, decorators: [{
|
|
5161
5683
|
type: Component,
|
|
5162
|
-
args: [{ selector: 'lib-tile', imports: [CommonModule, RadioComponent, CheckboxComponent], template: "<div\n class=\"c-tile\"\n [class.c-tile--selected]=\"selected\"\n [class.c-tile--neutral]=\"variant === 'neutral'\"\n [class.c-tile--disabled]=\"disabled\"\n [class.is-loading]=\"isLoading\"\n [attr.name]=\"tileName\"\n [tabindex]=\"variant === 'neutral' ? 0 : -1\"\n role=\"button\"\n (click)=\"onClick()\"\n (keyup.enter)=\"onClick()\"\n>\n <div class=\"c-tile__wrapper\">\n @if (isLoading) {\n
|
|
5684
|
+
args: [{ selector: 'lib-tile', imports: [CommonModule, RadioComponent, CheckboxComponent], template: "<div\n class=\"c-tile\"\n [class.c-tile--selected]=\"selected\"\n [class.c-tile--neutral]=\"variant === 'neutral'\"\n [class.c-tile--disabled]=\"disabled\"\n [class.is-loading]=\"isLoading\"\n [attr.name]=\"tileName\"\n [tabindex]=\"variant === 'neutral' ? 0 : -1\"\n role=\"button\"\n (click)=\"onClick()\"\n (keyup.enter)=\"onClick()\"\n>\n <div class=\"c-tile__wrapper\">\n @if (isLoading) {\n <div class=\"c-tile__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <p *ngIf=\"title\" class=\"c-tile__title\">{{ title }}</p>\n }\n <lib-radio\n *ngIf=\"variant === 'radio'\"\n [name]=\"controlName\"\n label=\"\"\n [disabled]=\"disabled\"\n [value]=\"selected ? 'true' : ''\"\n [checked]=\"selected\"\n (click)=\"onRadioClick($event)\"\n class=\"c-tile__check\"\n ></lib-radio>\n <lib-checkbox\n *ngIf=\"variant === 'checkbox'\"\n [name]=\"controlName\"\n label=\"\"\n [disabled]=\"disabled\"\n [state]=\"selected ? 'checked' : 'unchecked'\"\n class=\"c-tile__check\"\n ></lib-checkbox>\n </div>\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".c-tile{display:flex;padding:var(--space-container-padding-sm);flex-direction:column;align-items:flex-start;border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:has(.c-tile__content:not(:empty)){gap:var(--space-container-gap-sm)}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--disabled{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled);cursor:not-allowed}.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected,.c-tile--disabled.c-tile--selected:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;gap:var(--space-component-gap-sm);width:100%;height:100%;align-items:center;justify-content:space-between}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #EDFDFA)}.c-tile:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-tile__title{flex-grow:1;margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile--disabled .c-tile__title{color:var(--color-tile-content-disabled)}.c-tile__check{display:flex;align-items:center;justify-content:center}.c-tile.is-loading .c-tile__skeleton{flex-grow:1;display:flex;align-items:center;max-width:70px}.c-tile.is-loading .c-tile__skeleton span{display:block;width:100%;height:8px;background:var(--color-effect-skeleton-strong);border-radius:var(--size-border-radius-sm)}\n"] }]
|
|
5163
5685
|
}], propDecorators: { variant: [{
|
|
5164
5686
|
type: Input
|
|
5165
5687
|
}], title: [{
|
|
@@ -5459,6 +5981,24 @@ class ModalComponent {
|
|
|
5459
5981
|
if (config.closeOnBackdropClick !== undefined)
|
|
5460
5982
|
this._closeOnBackdropClickSignal.set(config.closeOnBackdropClick);
|
|
5461
5983
|
}
|
|
5984
|
+
updatePrimaryButton(buttonUpdate) {
|
|
5985
|
+
const currentButton = this._primaryButtonSignal();
|
|
5986
|
+
if (currentButton) {
|
|
5987
|
+
this._primaryButtonSignal.set({ ...currentButton, ...buttonUpdate });
|
|
5988
|
+
}
|
|
5989
|
+
}
|
|
5990
|
+
updateSecondaryButton(buttonUpdate) {
|
|
5991
|
+
const currentButton = this._secondaryButtonSignal();
|
|
5992
|
+
if (currentButton) {
|
|
5993
|
+
this._secondaryButtonSignal.set({ ...currentButton, ...buttonUpdate });
|
|
5994
|
+
}
|
|
5995
|
+
}
|
|
5996
|
+
updateTitle(title) {
|
|
5997
|
+
this._titleSignal.set(title);
|
|
5998
|
+
}
|
|
5999
|
+
updateShowCloseButton(showCloseButton) {
|
|
6000
|
+
this._showCloseButtonSignal.set(showCloseButton);
|
|
6001
|
+
}
|
|
5462
6002
|
onBackdropClick() {
|
|
5463
6003
|
// This method is overridden by the service
|
|
5464
6004
|
}
|
|
@@ -5539,11 +6079,11 @@ class ModalComponent {
|
|
|
5539
6079
|
}
|
|
5540
6080
|
}
|
|
5541
6081
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5542
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div class=\"c-modal__content__header\">\n <div class=\"c-modal__content__header__left\">\n @if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n\n <!-- Body Content -->\n <div #modalContent class=\"c-modal__content__body__content\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div class=\"c-modal__content__footer\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);box-shadow:var(--elevation-floating);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:var(--space-container-padding-sm);border-bottom:1px solid var(--color-core-border-soft);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-default-family),sans-serif;font-weight:var(--typography-label-lg-default-weight);font-size:var(--typography-label-lg-default-size);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm);border-top:1px solid var(--color-core-border-soft)}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0)}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter", "type"], outputs: ["clicked"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
6082
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div class=\"c-modal__content__header\">\n <div class=\"c-modal__content__header__left\">\n @if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n\n <!-- Body Content -->\n <div #modalContent class=\"c-modal__content__body__content\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div class=\"c-modal__content__footer\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);box-shadow:var(--elevation-floating);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:var(--space-container-padding-sm);border-bottom:1px solid var(--color-core-border-soft);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-default-family),sans-serif;font-weight:var(--typography-label-lg-default-weight);font-size:var(--typography-label-lg-default-size);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto;margin:-2px;padding:2px}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm);border-top:1px solid var(--color-core-border-soft)}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0)}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter", "type"], outputs: ["clicked"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
5543
6083
|
}
|
|
5544
6084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, decorators: [{
|
|
5545
6085
|
type: Component,
|
|
5546
|
-
args: [{ selector: 'lib-modal', imports: [NgClass, ButtonComponent, ButtonIconComponent], template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div class=\"c-modal__content__header\">\n <div class=\"c-modal__content__header__left\">\n @if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n\n <!-- Body Content -->\n <div #modalContent class=\"c-modal__content__body__content\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div class=\"c-modal__content__footer\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);box-shadow:var(--elevation-floating);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:var(--space-container-padding-sm);border-bottom:1px solid var(--color-core-border-soft);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-default-family),sans-serif;font-weight:var(--typography-label-lg-default-weight);font-size:var(--typography-label-lg-default-size);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm);border-top:1px solid var(--color-core-border-soft)}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0)}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"] }]
|
|
6086
|
+
args: [{ selector: 'lib-modal', imports: [NgClass, ButtonComponent, ButtonIconComponent], template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div class=\"c-modal__content__header\">\n <div class=\"c-modal__content__header__left\">\n @if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n\n <!-- Body Content -->\n <div #modalContent class=\"c-modal__content__body__content\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div class=\"c-modal__content__footer\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);box-shadow:var(--elevation-floating);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:var(--space-container-padding-sm);border-bottom:1px solid var(--color-core-border-soft);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-default-family),sans-serif;font-weight:var(--typography-label-lg-default-weight);font-size:var(--typography-label-lg-default-size);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto;margin:-2px;padding:2px}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm);border-top:1px solid var(--color-core-border-soft)}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0)}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"] }]
|
|
5547
6087
|
}], ctorParameters: () => [] });
|
|
5548
6088
|
|
|
5549
6089
|
class ModalService {
|
|
@@ -5691,6 +6231,18 @@ class ModalService {
|
|
|
5691
6231
|
},
|
|
5692
6232
|
afterClosed: () => afterClosedPromise,
|
|
5693
6233
|
getContentComponent: () => contentRef.instance,
|
|
6234
|
+
updatePrimaryButton: (buttonUpdate) => {
|
|
6235
|
+
modalRef.instance.updatePrimaryButton(buttonUpdate);
|
|
6236
|
+
},
|
|
6237
|
+
updateSecondaryButton: (buttonUpdate) => {
|
|
6238
|
+
modalRef.instance.updateSecondaryButton(buttonUpdate);
|
|
6239
|
+
},
|
|
6240
|
+
updateTitle: (title) => {
|
|
6241
|
+
modalRef.instance.updateTitle(title);
|
|
6242
|
+
},
|
|
6243
|
+
updateShowCloseButton: (showCloseButton) => {
|
|
6244
|
+
modalRef.instance.updateShowCloseButton(showCloseButton);
|
|
6245
|
+
},
|
|
5694
6246
|
};
|
|
5695
6247
|
}
|
|
5696
6248
|
closeModal(modalRef, contentRef, resolvePromise, result) {
|
|
@@ -5753,6 +6305,7 @@ class MenuItemComponent {
|
|
|
5753
6305
|
hasChildren = computed(() => this.children().length > 0);
|
|
5754
6306
|
hasTag = computed(() => this.tagLabel().trim().length > 0);
|
|
5755
6307
|
clicked = output();
|
|
6308
|
+
computedIcon = computed(() => this.selected() ? `${this.icon().replace('regular', 'fill')}` : this.icon());
|
|
5756
6309
|
handleClick() {
|
|
5757
6310
|
if (!this.disabled()) {
|
|
5758
6311
|
this.clicked.emit();
|
|
@@ -5773,16 +6326,16 @@ class MenuItemComponent {
|
|
|
5773
6326
|
return 'action-neutral-content-default';
|
|
5774
6327
|
});
|
|
5775
6328
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5776
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: MenuItemComponent, isStandalone: true, selector: "lib-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, showArrowIcon: { classPropertyName: "showArrowIcon", publicName: "showArrowIcon", isSignal: true, isRequired: false, transformFunction: null }, tagLabel: { classPropertyName: "tagLabel", publicName: "tagLabel", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"c-menu-item__container\">\n <button\n [ngClass]=\"[\n 'c-menu-item',\n selected() ? 'c-menu-item--selected' : '',\n disabled() ? 'c-menu-item--disabled' : '',\n hasChildren() ? 'c-menu-item--has-children' : '',\n hasChildren() ? 'c-menu-item--expanded' : ''\n ]\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-selected]=\"selected()\"\n [attr.aria-expanded]=\"hasChildren() ? true : null\"\n (click)=\"handleClick()\"\n >\n <span class=\"c-menu-item__icon\">\n <lib-icon
|
|
6329
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: MenuItemComponent, isStandalone: true, selector: "lib-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, showArrowIcon: { classPropertyName: "showArrowIcon", publicName: "showArrowIcon", isSignal: true, isRequired: false, transformFunction: null }, tagLabel: { classPropertyName: "tagLabel", publicName: "tagLabel", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"c-menu-item__container\">\n <button\n [ngClass]=\"[\n 'c-menu-item',\n selected() ? 'c-menu-item--selected' : '',\n disabled() ? 'c-menu-item--disabled' : '',\n hasChildren() ? 'c-menu-item--has-children' : '',\n hasChildren() ? 'c-menu-item--expanded' : ''\n ]\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-selected]=\"selected()\"\n [attr.aria-expanded]=\"hasChildren() ? true : null\"\n (click)=\"handleClick()\"\n >\n <span class=\"c-menu-item__icon\">\n <lib-icon\n [name]=\"computedIcon()\"\n [size]=\"'md'\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n @if (label()) {\n <span class=\"c-menu-item__label\">{{ label() }}</span>\n } @if (hasTag()) {\n <span class=\"c-menu-item__tag-container\">\n <lib-tag\n [text]=\"tagLabel()\"\n [closeActive]=\"false\"\n [showBadge]=\"false\"\n class=\"c-menu-item__tag\"\n ></lib-tag>\n </span>\n } @if (showArrowIcon()) {\n <span class=\"c-menu-item__expand-icon\">\n <lib-icon\n name=\"caretright-regular\"\n [size]=\"'md'\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n </button>\n\n @if (hasChildren()) {\n <div class=\"c-menu-item__children\">\n <div class=\"c-menu-item__children-items\">\n @for (child of children(); track child.label) {\n <lib-menu-child-item\n [label]=\"child.label\"\n [disabled]=\"child.disabled || false\"\n [selected]=\"child.selected || false\"\n (clicked)=\"handleChildClick(child)\"\n >\n </lib-menu-child-item>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".c-menu-item{display:flex;align-items:center;gap:var(--space-component-gap-md, .5rem);width:100%;min-height:40px;padding:var(--space-component-padding-none) var(--space-component-padding-sm);border:none;border-radius:var(--size-border-radius-md);background:var(--color-menu-item-background-default);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);text-align:left;color:var(--color-action-neutral-content-default)}.c-menu-item__container,.c-menu-item__children{display:flex;flex-direction:column;width:100%}.c-menu-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-item:disabled{cursor:not-allowed}.c-menu-item:hover:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-hover);color:var(--color-action-neutral-content-hover)}.c-menu-item:active:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-pressed);color:var(--color-action-neutral-content-pressed)}.c-menu-item.c-menu-item--selected{background-color:var(--color-menu-item-parent-background-active);color:var(--color-action-primary-selected-content-default)}.c-menu-item.c-menu-item--selected:hover:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-hover);color:var(--color-action-primary-selected-content-hover)}.c-menu-item.c-menu-item--selected:active:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-pressed);color:var(--color-action-primary-selected-content-pressed)}.c-menu-item.c-menu-item--disabled{color:var(--color-action-neutral-content-disabled);background-color:var(--color-action-neutral-background-disabled)}.c-menu-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.c-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-menu-item__expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--space-component-gap-sm);transition:transform var(--transition-base-duration) var(--transition-base-easing)}.c-menu-item__tag-container{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-component-gap-sm)}.c-menu-item__tag{flex-shrink:0}.c-menu-item__children{padding-left:var(--size-spacing-4);margin-top:var(--size-spacing-1)}.c-menu-item__children-label{font-size:var(--size-font-sm);font-weight:var(--size-font-weight-medium);color:var(--color-action-neutral-content-default);padding:var(--size-spacing-2) var(--size-spacing-3);margin-bottom:var(--size-spacing-1)}.c-menu-item__children-items{display:flex;flex-direction:column;gap:var(--size-spacing-1)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: MenuChildItemComponent, selector: "lib-menu-child-item", inputs: ["label", "icon", "disabled", "selected"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }] });
|
|
5777
6330
|
}
|
|
5778
6331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
5779
6332
|
type: Component,
|
|
5780
|
-
args: [{ selector: 'lib-menu-item', imports: [NgClass, IconComponent, MenuChildItemComponent, TagComponent], template: "<div class=\"c-menu-item__container\">\n <button\n [ngClass]=\"[\n 'c-menu-item',\n selected() ? 'c-menu-item--selected' : '',\n disabled() ? 'c-menu-item--disabled' : '',\n hasChildren() ? 'c-menu-item--has-children' : '',\n hasChildren() ? 'c-menu-item--expanded' : ''\n ]\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-selected]=\"selected()\"\n [attr.aria-expanded]=\"hasChildren() ? true : null\"\n (click)=\"handleClick()\"\n >\n <span class=\"c-menu-item__icon\">\n <lib-icon
|
|
6333
|
+
args: [{ selector: 'lib-menu-item', imports: [NgClass, IconComponent, MenuChildItemComponent, TagComponent], template: "<div class=\"c-menu-item__container\">\n <button\n [ngClass]=\"[\n 'c-menu-item',\n selected() ? 'c-menu-item--selected' : '',\n disabled() ? 'c-menu-item--disabled' : '',\n hasChildren() ? 'c-menu-item--has-children' : '',\n hasChildren() ? 'c-menu-item--expanded' : ''\n ]\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-selected]=\"selected()\"\n [attr.aria-expanded]=\"hasChildren() ? true : null\"\n (click)=\"handleClick()\"\n >\n <span class=\"c-menu-item__icon\">\n <lib-icon\n [name]=\"computedIcon()\"\n [size]=\"'md'\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n @if (label()) {\n <span class=\"c-menu-item__label\">{{ label() }}</span>\n } @if (hasTag()) {\n <span class=\"c-menu-item__tag-container\">\n <lib-tag\n [text]=\"tagLabel()\"\n [closeActive]=\"false\"\n [showBadge]=\"false\"\n class=\"c-menu-item__tag\"\n ></lib-tag>\n </span>\n } @if (showArrowIcon()) {\n <span class=\"c-menu-item__expand-icon\">\n <lib-icon\n name=\"caretright-regular\"\n [size]=\"'md'\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n </button>\n\n @if (hasChildren()) {\n <div class=\"c-menu-item__children\">\n <div class=\"c-menu-item__children-items\">\n @for (child of children(); track child.label) {\n <lib-menu-child-item\n [label]=\"child.label\"\n [disabled]=\"child.disabled || false\"\n [selected]=\"child.selected || false\"\n (clicked)=\"handleChildClick(child)\"\n >\n </lib-menu-child-item>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".c-menu-item{display:flex;align-items:center;gap:var(--space-component-gap-md, .5rem);width:100%;min-height:40px;padding:var(--space-component-padding-none) var(--space-component-padding-sm);border:none;border-radius:var(--size-border-radius-md);background:var(--color-menu-item-background-default);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);text-align:left;color:var(--color-action-neutral-content-default)}.c-menu-item__container,.c-menu-item__children{display:flex;flex-direction:column;width:100%}.c-menu-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-item:disabled{cursor:not-allowed}.c-menu-item:hover:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-hover);color:var(--color-action-neutral-content-hover)}.c-menu-item:active:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-pressed);color:var(--color-action-neutral-content-pressed)}.c-menu-item.c-menu-item--selected{background-color:var(--color-menu-item-parent-background-active);color:var(--color-action-primary-selected-content-default)}.c-menu-item.c-menu-item--selected:hover:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-hover);color:var(--color-action-primary-selected-content-hover)}.c-menu-item.c-menu-item--selected:active:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-pressed);color:var(--color-action-primary-selected-content-pressed)}.c-menu-item.c-menu-item--disabled{color:var(--color-action-neutral-content-disabled);background-color:var(--color-action-neutral-background-disabled)}.c-menu-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.c-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-menu-item__expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--space-component-gap-sm);transition:transform var(--transition-base-duration) var(--transition-base-easing)}.c-menu-item__tag-container{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-component-gap-sm)}.c-menu-item__tag{flex-shrink:0}.c-menu-item__children{padding-left:var(--size-spacing-4);margin-top:var(--size-spacing-1)}.c-menu-item__children-label{font-size:var(--size-font-sm);font-weight:var(--size-font-weight-medium);color:var(--color-action-neutral-content-default);padding:var(--size-spacing-2) var(--size-spacing-3);margin-bottom:var(--size-spacing-1)}.c-menu-item__children-items{display:flex;flex-direction:column;gap:var(--size-spacing-1)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
5781
6334
|
}] });
|
|
5782
6335
|
|
|
5783
6336
|
/**
|
|
5784
6337
|
* Generated bundle index. Do not edit.
|
|
5785
6338
|
*/
|
|
5786
6339
|
|
|
5787
|
-
export { AccordionComponent, AlertComponent, ArrowsComponent, AvatarComponent, BadgeComponent, ButtonComponent, ButtonIconComponent, ButtonSetComponent, CheckboxComponent, CheckboxGroupComponent, ChipsComponent, DesignTokensComponent, DropdownComponent, DropdownTriggerDirective, HelperTextComponent, IconComponent, InputDateComponent, InputLabelComponent, InputNumberComponent, InputPaymentComponent, InputSearchComponent, InputUploadComponent, LinkComponent, MenuChildItemComponent, MenuItemComponent, ModalComponent, ModalService, PaginationComponent, PasswordInputComponent, RadioComponent, RadioGroupComponent, SegmentedControlComponent, SelectComponent, SocialLoginComponent, SpinnerComponent, SwitchComponent, TabsComponent, TagComponent, TextInputComponent, TextareaComponent, ThumbnailComponent, TileComponent, ToastComponent, TooltipComponent, TooltipDirective, TooltipPosition };
|
|
6340
|
+
export { AccordionComponent, AlertComponent, ArrowsComponent, AvatarComponent, BadgeComponent, ButtonComponent, ButtonIconComponent, ButtonSetComponent, CheckboxComponent, CheckboxGroupComponent, ChipsComponent, DesignTokensComponent, DropdownComponent, DropdownSelectComponent, DropdownSelectTriggerDirective, DropdownTriggerDirective, HelperTextComponent, IconComponent, InputDateComponent, InputLabelComponent, InputNumberComponent, InputPaymentComponent, InputSearchComponent, InputUploadComponent, LinkActionComponent, LinkComponent, MenuChildItemComponent, MenuItemComponent, ModalComponent, ModalService, PaginationComponent, PasswordInputComponent, RadioComponent, RadioGroupComponent, SegmentedControlComponent, SelectComponent, SocialLoginComponent, SpinnerComponent, SwitchComponent, TabsComponent, TagComponent, TextInputComponent, TextareaComponent, ThumbnailComponent, TileComponent, ToastComponent, TooltipComponent, TooltipDirective, TooltipPosition };
|
|
5788
6341
|
//# sourceMappingURL=crowdfarming-oliva-ds.mjs.map
|