@crowdfarming/oliva-ds 1.62.0 → 1.63.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2457,11 +2457,11 @@ class AccordionComponent {
|
|
|
2457
2457
|
}
|
|
2458
2458
|
}
|
|
2459
2459
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2460
|
-
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", isLoading: "isLoading" }, outputs: { expandedChange: "expandedChange", toggled: "toggled", radioCheckedChange: "radioCheckedChange" }, 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 [class.c-accordion--loading]=\"isLoading\"\n>\n <div\n class=\"c-accordion__header\"\n [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n [id]=\"id + '-header'\"\n [tabindex]=\"isLoading ? -1 : 0\"\n [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n [attr.aria-disabled]=\"isLoading ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n @if (isLoading) {\n <div class=\"c-accordion__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <
|
|
2460
|
+
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", isLoading: "isLoading" }, outputs: { expandedChange: "expandedChange", toggled: "toggled", radioCheckedChange: "radioCheckedChange" }, 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 [class.c-accordion--loading]=\"isLoading\"\n>\n <div\n class=\"c-accordion__header\"\n [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n [id]=\"id + '-header'\"\n [tabindex]=\"isLoading ? -1 : 0\"\n [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n [attr.aria-disabled]=\"isLoading ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n @if (isLoading) {\n <div class=\"c-accordion__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <h3 class=\"c-accordion__title\">{{ title }}</h3>\n }\n\n <!-- Default arrow icons for accordion mode -->\n <span\n class=\"c-accordion__arrow\"\n *ngIf=\"mode === 'accordion' && !expanded\"\n [class.open]=\"expanded\"\n >\n <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n </span>\n <span\n class=\"c-accordion__arrow\"\n *ngIf=\"mode === 'accordion' && expanded\"\n [class.open]=\"expanded\"\n >\n <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n </span>\n\n <!-- Custom icon for choice mode -->\n <span\n class=\"c-accordion__custom-icon\"\n *ngIf=\"mode === 'choice' && customIcon\"\n >\n <lib-icon [name]=\"customIcon\" size=\"lg\" iconBefore />\n </span>\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 />\n </div>\n\n <div\n class=\"c-accordion__content\"\n [class.c-accordion__content--visible]=\"expanded\"\n [id]=\"id + '-content'\"\n [attr.role]=\"mode === 'choice' ? 'region' : 'region'\"\n [attr.aria-labelledby]=\"mode === 'choice' ? id + '-radio' : id + '-header'\"\n >\n <div class=\"c-accordion__content-inner\">\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</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--choice .c-accordion__header{padding:var(--space-component-padding-lg, 1rem)}.c-accordion--loading .c-accordion__header{cursor:not-allowed;pointer-events:none}.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-inner{padding:0rem var(--space-component-padding-sm, .5rem) 0rem var(--space-component-padding-sm, .5rem)}.c-accordion__content--visible .c-accordion--sm .c-accordion__content-inner{padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.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,.c-accordion--expanded .c-accordion__header{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:grid;grid-template-rows:0fr;align-self:stretch;transition:grid-template-rows .3s ease-out,opacity .25s ease-out;opacity:0}.c-accordion__content--visible{grid-template-rows:1fr;opacity:1}.c-accordion__content-inner{overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);padding:0rem var(--space-component-padding-lg, 1rem) 0rem var(--space-component-padding-lg, 1rem);transition:padding .3s ease-out}.c-accordion__content--visible .c-accordion__content-inner{padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem)}.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}.c-accordion__skeleton{display:flex;flex-grow:1;align-items:center;height:28px;max-width:88px}.c-accordion__skeleton span{display:block;width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, .25rem)}\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", "disabled", "name", "color"] }] });
|
|
2461
2461
|
}
|
|
2462
2462
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
2463
2463
|
type: Component,
|
|
2464
|
-
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 [class.c-accordion--loading]=\"isLoading\"\n>\n <div\n class=\"c-accordion__header\"\n [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n [id]=\"id + '-header'\"\n [tabindex]=\"isLoading ? -1 : 0\"\n [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n [attr.aria-disabled]=\"isLoading ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n @if (isLoading) {\n <div class=\"c-accordion__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <
|
|
2464
|
+
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 [class.c-accordion--loading]=\"isLoading\"\n>\n <div\n class=\"c-accordion__header\"\n [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n [id]=\"id + '-header'\"\n [tabindex]=\"isLoading ? -1 : 0\"\n [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n [attr.aria-disabled]=\"isLoading ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n @if (isLoading) {\n <div class=\"c-accordion__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <h3 class=\"c-accordion__title\">{{ title }}</h3>\n }\n\n <!-- Default arrow icons for accordion mode -->\n <span\n class=\"c-accordion__arrow\"\n *ngIf=\"mode === 'accordion' && !expanded\"\n [class.open]=\"expanded\"\n >\n <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n </span>\n <span\n class=\"c-accordion__arrow\"\n *ngIf=\"mode === 'accordion' && expanded\"\n [class.open]=\"expanded\"\n >\n <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n </span>\n\n <!-- Custom icon for choice mode -->\n <span\n class=\"c-accordion__custom-icon\"\n *ngIf=\"mode === 'choice' && customIcon\"\n >\n <lib-icon [name]=\"customIcon\" size=\"lg\" iconBefore />\n </span>\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 />\n </div>\n\n <div\n class=\"c-accordion__content\"\n [class.c-accordion__content--visible]=\"expanded\"\n [id]=\"id + '-content'\"\n [attr.role]=\"mode === 'choice' ? 'region' : 'region'\"\n [attr.aria-labelledby]=\"mode === 'choice' ? id + '-radio' : id + '-header'\"\n >\n <div class=\"c-accordion__content-inner\">\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</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--choice .c-accordion__header{padding:var(--space-component-padding-lg, 1rem)}.c-accordion--loading .c-accordion__header{cursor:not-allowed;pointer-events:none}.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-inner{padding:0rem var(--space-component-padding-sm, .5rem) 0rem var(--space-component-padding-sm, .5rem)}.c-accordion__content--visible .c-accordion--sm .c-accordion__content-inner{padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.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,.c-accordion--expanded .c-accordion__header{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:grid;grid-template-rows:0fr;align-self:stretch;transition:grid-template-rows .3s ease-out,opacity .25s ease-out;opacity:0}.c-accordion__content--visible{grid-template-rows:1fr;opacity:1}.c-accordion__content-inner{overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);padding:0rem var(--space-component-padding-lg, 1rem) 0rem var(--space-component-padding-lg, 1rem);transition:padding .3s ease-out}.c-accordion__content--visible .c-accordion__content-inner{padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem)}.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}.c-accordion__skeleton{display:flex;flex-grow:1;align-items:center;height:28px;max-width:88px}.c-accordion__skeleton span{display:block;width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, .25rem)}\n"] }]
|
|
2465
2465
|
}], propDecorators: { id: [{
|
|
2466
2466
|
type: Input
|
|
2467
2467
|
}], expanded: [{
|
|
@@ -3644,11 +3644,11 @@ class OverlayComponent {
|
|
|
3644
3644
|
}
|
|
3645
3645
|
}
|
|
3646
3646
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3647
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: OverlayComponent, isStandalone: true, selector: "lib-overlay", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "overlayMenu", first: true, predicate: ["overlayMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-overlay\">\n <!-- Only show if overlay is open -->\n @if (isOpen()) {\n <!-- Backdrop (only on mobile) -->\n @if (isMobile()) {\n <div\n class=\"c-overlay__backdrop\"\n (click)=\"closeOverlay()\"\n (keydown)=\"closeOverlay()\"\n tabindex=\"-1\"\n role=\"button\"\n aria-label=\"Close overlay\"\n ></div>\n }\n\n <!-- Overlay Menu -->\n <div\n #overlayMenu\n class=\"c-overlay__menu\"\n tabindex=\"-1\"\n [ngStyle]=\"menuStyles()\"\n (keydown.escape)=\"closeOverlay()\"\n >\n <div class=\"c-overlay__content\">\n <!-- Main content projection -->\n <ng-content></ng-content>\n </div>\n\n <!-- Footer slot for mobile action buttons -->\n <!-- TODO: Review footer implementation -->\n <div class=\"c-overlay__footer\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n </div>\n }\n</div>\n", styles: [":host{position:absolute;display:block;height:0px}.c-overlay__backdrop{position:fixed;inset:0;z-index:1000;background-color:var(--color-effect-overlay);transition:opacity .2s ease-in-out;opacity:1}.c-overlay__menu{position:absolute;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;animation:overlay-animation .2s ease-out forwards}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none;height:27px}.c-overlay__footer:not(:empty){display:flex}@keyframes overlay-animation{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 27px);width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay__footer{flex-shrink:0;padding:var(--space-container-padding-sm);background-color:var(--color-core-background-surface-raised);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);display:flex;justify-content:space-between;align-items:center;height:
|
|
3647
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: OverlayComponent, isStandalone: true, selector: "lib-overlay", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "overlayMenu", first: true, predicate: ["overlayMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-overlay\">\n <!-- Only show if overlay is open -->\n @if (isOpen()) {\n <!-- Backdrop (only on mobile) -->\n @if (isMobile()) {\n <div\n class=\"c-overlay__backdrop\"\n (click)=\"closeOverlay()\"\n (keydown)=\"closeOverlay()\"\n tabindex=\"-1\"\n role=\"button\"\n aria-label=\"Close overlay\"\n ></div>\n }\n\n <!-- Overlay Menu -->\n <div\n #overlayMenu\n class=\"c-overlay__menu\"\n tabindex=\"-1\"\n [ngStyle]=\"menuStyles()\"\n (keydown.escape)=\"closeOverlay()\"\n >\n <div class=\"c-overlay__content\">\n <!-- Main content projection -->\n <ng-content></ng-content>\n </div>\n\n <!-- Footer slot for mobile action buttons -->\n <!-- TODO: Review footer implementation -->\n <div class=\"c-overlay__footer\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n </div>\n }\n</div>\n", styles: [":host{position:absolute;display:block;height:0px}.c-overlay__backdrop{position:fixed;inset:0;z-index:1000;background-color:var(--color-effect-overlay);transition:opacity .2s ease-in-out;opacity:1}.c-overlay__menu{position:absolute;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;animation:overlay-animation .2s ease-out forwards}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none;height:27px}.c-overlay__footer:not(:empty){display:flex}@keyframes overlay-animation{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 27px);width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay__footer{flex-shrink:0;padding:var(--space-container-padding-sm);background-color:var(--color-core-background-surface-raised);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);display:flex;justify-content:space-between;align-items:center;height:56px}.c-overlay__footer:empty{display:none}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3648
3648
|
}
|
|
3649
3649
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayComponent, decorators: [{
|
|
3650
3650
|
type: Component,
|
|
3651
|
-
args: [{ selector: 'lib-overlay', imports: [NgClass, NgStyle], template: "<div class=\"c-overlay\">\n <!-- Only show if overlay is open -->\n @if (isOpen()) {\n <!-- Backdrop (only on mobile) -->\n @if (isMobile()) {\n <div\n class=\"c-overlay__backdrop\"\n (click)=\"closeOverlay()\"\n (keydown)=\"closeOverlay()\"\n tabindex=\"-1\"\n role=\"button\"\n aria-label=\"Close overlay\"\n ></div>\n }\n\n <!-- Overlay Menu -->\n <div\n #overlayMenu\n class=\"c-overlay__menu\"\n tabindex=\"-1\"\n [ngStyle]=\"menuStyles()\"\n (keydown.escape)=\"closeOverlay()\"\n >\n <div class=\"c-overlay__content\">\n <!-- Main content projection -->\n <ng-content></ng-content>\n </div>\n\n <!-- Footer slot for mobile action buttons -->\n <!-- TODO: Review footer implementation -->\n <div class=\"c-overlay__footer\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n </div>\n }\n</div>\n", styles: [":host{position:absolute;display:block;height:0px}.c-overlay__backdrop{position:fixed;inset:0;z-index:1000;background-color:var(--color-effect-overlay);transition:opacity .2s ease-in-out;opacity:1}.c-overlay__menu{position:absolute;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;animation:overlay-animation .2s ease-out forwards}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none;height:27px}.c-overlay__footer:not(:empty){display:flex}@keyframes overlay-animation{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 27px);width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay__footer{flex-shrink:0;padding:var(--space-container-padding-sm);background-color:var(--color-core-background-surface-raised);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);display:flex;justify-content:space-between;align-items:center;height:
|
|
3651
|
+
args: [{ selector: 'lib-overlay', imports: [NgClass, NgStyle], template: "<div class=\"c-overlay\">\n <!-- Only show if overlay is open -->\n @if (isOpen()) {\n <!-- Backdrop (only on mobile) -->\n @if (isMobile()) {\n <div\n class=\"c-overlay__backdrop\"\n (click)=\"closeOverlay()\"\n (keydown)=\"closeOverlay()\"\n tabindex=\"-1\"\n role=\"button\"\n aria-label=\"Close overlay\"\n ></div>\n }\n\n <!-- Overlay Menu -->\n <div\n #overlayMenu\n class=\"c-overlay__menu\"\n tabindex=\"-1\"\n [ngStyle]=\"menuStyles()\"\n (keydown.escape)=\"closeOverlay()\"\n >\n <div class=\"c-overlay__content\">\n <!-- Main content projection -->\n <ng-content></ng-content>\n </div>\n\n <!-- Footer slot for mobile action buttons -->\n <!-- TODO: Review footer implementation -->\n <div class=\"c-overlay__footer\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n </div>\n }\n</div>\n", styles: [":host{position:absolute;display:block;height:0px}.c-overlay__backdrop{position:fixed;inset:0;z-index:1000;background-color:var(--color-effect-overlay);transition:opacity .2s ease-in-out;opacity:1}.c-overlay__menu{position:absolute;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;animation:overlay-animation .2s ease-out forwards}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none;height:27px}.c-overlay__footer:not(:empty){display:flex}@keyframes overlay-animation{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 27px);width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay__footer{flex-shrink:0;padding:var(--space-container-padding-sm);background-color:var(--color-core-background-surface-raised);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);display:flex;justify-content:space-between;align-items:center;height:56px}.c-overlay__footer:empty{display:none}}\n"] }]
|
|
3652
3652
|
}], ctorParameters: () => [] });
|
|
3653
3653
|
|
|
3654
3654
|
class DropdownActionComponent {
|
|
@@ -3827,7 +3827,7 @@ class InputSearchComponent {
|
|
|
3827
3827
|
useExisting: forwardRef(() => InputSearchComponent),
|
|
3828
3828
|
multi: true,
|
|
3829
3829
|
},
|
|
3830
|
-
], ngImport: i0, template: "<div\n class=\"c-text-input\"\n [class.c-text-input--full-width]=\"fullWidth\"\n [class.c-text-input--with-clear-button]=\"clearButton\"\n>\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"
|
|
3830
|
+
], ngImport: i0, template: "<div\n class=\"c-text-input\"\n [class.c-text-input--full-width]=\"fullWidth\"\n [class.c-text-input--with-clear-button]=\"clearButton\"\n>\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"search\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n [value]=\"isLoading ? '' : _value\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\n [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 && !isLoading\"\n variant=\"neutral\"\n size=\"sm\"\n iconName=\"x-regular\"\n class=\"c-text-input__icon c-text-input__icon--right\"\n [disabled]=\"disabled || readonly || isLoading\"\n (clicked)=\"clearInput()\"\n ariaLabel=\"Limpiar\"\n ></lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text\n [text]=\"helperText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text\n variant=\"danger\"\n [text]=\"alertText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text\n variant=\"success\"\n [text]=\"successText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{--input-padding-y: var(--space-component-padding-md);--input-padding-x-right: var(--space-component-padding-sm);--input-padding-x-left: 2rem;width:100%;height:48px;box-sizing:border-box;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--input-padding-y) var(--input-padding-x-right) var(--input-padding-y) var(--input-padding-x-left);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-right) - 1px) calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-left) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: 2rem}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input--with-clear-button .c-text-input__input{padding-right:2.5rem}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__icon{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__icon--right{left:auto;right:var(--space-component-padding-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
3831
3831
|
}
|
|
3832
3832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, decorators: [{
|
|
3833
3833
|
type: Component,
|
|
@@ -3844,7 +3844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3844
3844
|
useExisting: forwardRef(() => InputSearchComponent),
|
|
3845
3845
|
multi: true,
|
|
3846
3846
|
},
|
|
3847
|
-
], template: "<div\n class=\"c-text-input\"\n [class.c-text-input--full-width]=\"fullWidth\"\n [class.c-text-input--with-clear-button]=\"clearButton\"\n>\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"
|
|
3847
|
+
], template: "<div\n class=\"c-text-input\"\n [class.c-text-input--full-width]=\"fullWidth\"\n [class.c-text-input--with-clear-button]=\"clearButton\"\n>\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"search\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n [value]=\"isLoading ? '' : _value\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\n [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 && !isLoading\"\n variant=\"neutral\"\n size=\"sm\"\n iconName=\"x-regular\"\n class=\"c-text-input__icon c-text-input__icon--right\"\n [disabled]=\"disabled || readonly || isLoading\"\n (clicked)=\"clearInput()\"\n ariaLabel=\"Limpiar\"\n ></lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text\n [text]=\"helperText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text\n variant=\"danger\"\n [text]=\"alertText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text\n variant=\"success\"\n [text]=\"successText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{--input-padding-y: var(--space-component-padding-md);--input-padding-x-right: var(--space-component-padding-sm);--input-padding-x-left: 2rem;width:100%;height:48px;box-sizing:border-box;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--input-padding-y) var(--input-padding-x-right) var(--input-padding-y) var(--input-padding-x-left);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-right) - 1px) calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-left) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: 2rem}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input--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"] }]
|
|
3848
3848
|
}], propDecorators: { label: [{
|
|
3849
3849
|
type: Input
|
|
3850
3850
|
}], placeholder: [{
|
|
@@ -5360,11 +5360,11 @@ class ModalComponent {
|
|
|
5360
5360
|
return c.filter(Boolean).join(' ');
|
|
5361
5361
|
}
|
|
5362
5362
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5363
|
-
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 #modalContent\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 [ngClass]=\"getHeaderClasses()\">\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 <!-- Body Content -->\n <div [ngClass]=\"getContentBodyContentClasses()\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div [ngClass]=\"getFooterClasses()\">\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:1000;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);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%;box-sizing:border-box;max-height:min(812px,100vh - 128px)}.c-modal__content--open{transform:scale(1)}.c-modal__content--xs{max-width:360px}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + var(--space-container-padding-sm))}.c-modal__content__header{display:flex;align-items:center;background-color:var(--color-core-background-surface-floating);padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm);border-bottom:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__header--scrollable{z-index:1;border-bottom-color:var(--color-core-border-soft)}.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-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-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);overflow:hidden;min-height:0}.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{padding:0 var(--space-container-padding-sm);display:flex;flex-direction:column;gap:var(--space-container-gap-md);overflow-y:auto;flex:1;min-height:0}.c-modal__content__body__content--scrollable{padding:var(--space-container-padding-sm)}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0;border-top:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__footer--scrollable{z-index:1;border-top-color:var(--color-core-border-soft)}@media (max-width:
|
|
5363
|
+
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 #modalContent\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 [ngClass]=\"getHeaderClasses()\">\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 <!-- Body Content -->\n <div [ngClass]=\"getContentBodyContentClasses()\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div [ngClass]=\"getFooterClasses()\">\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:1000;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);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%;box-sizing:border-box;max-height:min(812px,100vh - 128px)}.c-modal__content--open{transform:scale(1)}.c-modal__content--xs{max-width:360px}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + var(--space-container-padding-sm))}.c-modal__content__header{display:flex;align-items:center;background-color:var(--color-core-background-surface-floating);padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm);border-bottom:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__header--scrollable{z-index:1;border-bottom-color:var(--color-core-border-soft)}.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-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-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);overflow:hidden;min-height:0}.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{padding:0 var(--space-container-padding-sm);display:flex;flex-direction:column;gap:var(--space-container-gap-md);overflow-y:auto;flex:1;min-height:0}.c-modal__content__body__content--scrollable{padding:var(--space-container-padding-sm)}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0;border-top:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__footer--scrollable{z-index:1;border-top-color:var(--color-core-border-soft)}@media (max-width: 767px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 767px){.c-modal__content__footer__button{width:100%}.c-modal__content__footer__button.primary{order:1}.c-modal__content__footer__button.secondary{order:2}}.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: 767px){.c-modal{align-items:flex-end}.c-modal--xs .c-modal__content,.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;max-height:100vh;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--xs.c-modal--open .c-modal__content,.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0);perspective:none;contain:none}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-height:100vh;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"] }] });
|
|
5364
5364
|
}
|
|
5365
5365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, decorators: [{
|
|
5366
5366
|
type: Component,
|
|
5367
|
-
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 #modalContent\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 [ngClass]=\"getHeaderClasses()\">\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 <!-- Body Content -->\n <div [ngClass]=\"getContentBodyContentClasses()\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div [ngClass]=\"getFooterClasses()\">\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:1000;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);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%;box-sizing:border-box;max-height:min(812px,100vh - 128px)}.c-modal__content--open{transform:scale(1)}.c-modal__content--xs{max-width:360px}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + var(--space-container-padding-sm))}.c-modal__content__header{display:flex;align-items:center;background-color:var(--color-core-background-surface-floating);padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm);border-bottom:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__header--scrollable{z-index:1;border-bottom-color:var(--color-core-border-soft)}.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-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-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);overflow:hidden;min-height:0}.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{padding:0 var(--space-container-padding-sm);display:flex;flex-direction:column;gap:var(--space-container-gap-md);overflow-y:auto;flex:1;min-height:0}.c-modal__content__body__content--scrollable{padding:var(--space-container-padding-sm)}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0;border-top:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__footer--scrollable{z-index:1;border-top-color:var(--color-core-border-soft)}@media (max-width:
|
|
5367
|
+
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 #modalContent\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 [ngClass]=\"getHeaderClasses()\">\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 <!-- Body Content -->\n <div [ngClass]=\"getContentBodyContentClasses()\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div [ngClass]=\"getFooterClasses()\">\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:1000;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);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%;box-sizing:border-box;max-height:min(812px,100vh - 128px)}.c-modal__content--open{transform:scale(1)}.c-modal__content--xs{max-width:360px}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + var(--space-container-padding-sm))}.c-modal__content__header{display:flex;align-items:center;background-color:var(--color-core-background-surface-floating);padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm);border-bottom:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__header--scrollable{z-index:1;border-bottom-color:var(--color-core-border-soft)}.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-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-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);overflow:hidden;min-height:0}.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{padding:0 var(--space-container-padding-sm);display:flex;flex-direction:column;gap:var(--space-container-gap-md);overflow-y:auto;flex:1;min-height:0}.c-modal__content__body__content--scrollable{padding:var(--space-container-padding-sm)}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0;border-top:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__footer--scrollable{z-index:1;border-top-color:var(--color-core-border-soft)}@media (max-width: 767px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 767px){.c-modal__content__footer__button{width:100%}.c-modal__content__footer__button.primary{order:1}.c-modal__content__footer__button.secondary{order:2}}.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: 767px){.c-modal{align-items:flex-end}.c-modal--xs .c-modal__content,.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;max-height:100vh;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--xs.c-modal--open .c-modal__content,.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0);perspective:none;contain:none}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-height:100vh;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"] }]
|
|
5368
5368
|
}], ctorParameters: () => [] });
|
|
5369
5369
|
|
|
5370
5370
|
class ModalService {
|