@rededor/site-front-end-lib 20.0.33 → 20.0.34
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/rededor-site-front-end-lib-components-algolia-search.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-algolia-search.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-cards.mjs +6 -6
- package/fesm2022/rededor-site-front-end-lib-components-cards.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-carousels.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-carousels.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-cta-wrapper.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-cta-wrapper.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-error.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-error.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-filter-letter-and-terms.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-filter-letter-and-terms.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-filters-filter-generic.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-filters-filter-generic.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-footer.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-footer.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-header-components-action.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-header-components-action.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-header-components-main.mjs +4 -4
- package/fesm2022/rededor-site-front-end-lib-components-header-components-main.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-header-components-side.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-header-components-side.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-header.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-header.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-load-screen.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-load-screen.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-page-header.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-page-header.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-page-template-fullcontent.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-page-template-fullcontent.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-page-template-sidebar.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-page-template-sidebar.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-pagination.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-pagination.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-search.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-search.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-section-navigation.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-section-navigation.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-side-ctas.mjs +8 -8
- package/fesm2022/rededor-site-front-end-lib-components-side-ctas.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-whatsapp.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-components-whatsapp.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-accordion.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-cura-accordion.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-buttons-cura-button-outline.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-cura-buttons-cura-button-outline.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-buttons-cura-button-select.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-cura-buttons-cura-button-select.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-buttons-cura-button-transparent.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-cura-buttons-cura-button-transparent.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-buttons-cura-button.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-cura-buttons-cura-button.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-feedback-cura-modal.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-cura-feedback-cura-modal.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-feedback-cura-toast.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-cura-feedback-cura-toast.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-forms-cura-input-text.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-cura-forms-cura-input-text.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-forms-cura-select.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-cura-forms-cura-select.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-texts-cura-display.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-cura-texts-cura-display.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-texts-cura-heading.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-cura-texts-cura-heading.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-texts-cura-paragraph.mjs +2 -2
- package/fesm2022/rededor-site-front-end-lib-cura-texts-cura-paragraph.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -86,7 +86,7 @@ class CuraModalComponent {
|
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CuraModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
89
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: CuraModalComponent, isStandalone: true, selector: "cura-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, bottom: { classPropertyName: "bottom", publicName: "bottom", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, right: { classPropertyName: "right", publicName: "right", isSignal: true, isRequired: false, transformFunction: null }, mobileCloseLabel: { classPropertyName: "mobileCloseLabel", publicName: "mobileCloseLabel", isSignal: true, isRequired: false, transformFunction: null }, zindex: { classPropertyName: "zindex", publicName: "zindex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", modalClose: "modalClose" }, host: { attributes: { "role": "dialog", "aria-modal": "true" }, properties: { "style.--zIndex": "zindex()" } }, ngImport: i0, template: "<div class=\"modal container\" [class.open]=\"open()\" [style]=\"styles()\">\n <div class=\"modal backdrop\" [class.open]=\"open()\" (click)=\"handleClose()\"></div>\n\n <div class=\"wrapper\">\n <!-- Desktop close button -->\n <button class=\"close desktop\" type=\"button\" (click)=\"handleClose()\">\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"> </cura-icon>\n </button>\n\n <ng-content></ng-content>\n\n <!-- Mobile close button -->\n <button class=\"close mobile\" type=\"button\" (click)=\"handleClose()\">\n <cura-icon name=\"close\" color=\"error-dark\" [size]=\"16\"> </cura-icon>\n <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n {{ mobileCloseLabel() }}\n </cura-paragraph>\n </button>\n </div>\n</div>\n", styles: [":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn .3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.backdrop{background-color:var(--background-color);z-index:calc(var(--zIndex) - 10);animation:fadeIn .3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-light);border-radius:4px;max-width:600px;min-width:200px;padding:0 8px 8px;z-index:var(--zIndex);box-shadow:0 8px 32px #0000001f,0 4px 16px #00000014;transform:scale(.95);transition:transform .3s ease-out,opacity .3s ease,visibility .3s ease}.wrapper ::ng-deep>*:not(button){max-height:80vh;overflow:auto;padding-right:12px}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:8px;background:none;border:none;cursor:pointer;display:flex;align-items:center}.close.mobile{display:none}.close.desktop{display:flex}@media(max-width:768px){.wrapper{position:fixed;bottom:0;width:80%;padding-top:8px;padding-bottom:0;border-radius:4px 4px 0 0;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:8px;padding:8px 0;justify-content:center;width:100%}.close.mobile{display:flex;gap:4px}.close.desktop{display:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "component", type: CuraIconComponent, selector: "cura-icon", inputs: ["name", "color", "size", "iconset", "disabled"] }, { kind: "component", type: CuraParagraphComponent, selector: "cura-paragraph", inputs: ["size", "spotColor", "color", "marginBlock", "lineHeight", "textOverflow"] }] }); }
|
|
89
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: CuraModalComponent, isStandalone: true, selector: "cura-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, bottom: { classPropertyName: "bottom", publicName: "bottom", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, right: { classPropertyName: "right", publicName: "right", isSignal: true, isRequired: false, transformFunction: null }, mobileCloseLabel: { classPropertyName: "mobileCloseLabel", publicName: "mobileCloseLabel", isSignal: true, isRequired: false, transformFunction: null }, zindex: { classPropertyName: "zindex", publicName: "zindex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", modalClose: "modalClose" }, host: { attributes: { "role": "dialog", "aria-modal": "true" }, properties: { "style.--zIndex": "zindex()" } }, ngImport: i0, template: "<div class=\"modal container\" [class.open]=\"open()\" [style]=\"styles()\">\n <div class=\"modal backdrop\" [class.open]=\"open()\" (click)=\"handleClose()\"></div>\n\n <div class=\"wrapper\">\n <!-- Desktop close button -->\n <button class=\"close desktop\" type=\"button\" (click)=\"handleClose()\">\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"> </cura-icon>\n </button>\n\n <ng-content></ng-content>\n\n <!-- Mobile close button -->\n <button class=\"close mobile\" type=\"button\" (click)=\"handleClose()\">\n <cura-icon name=\"close\" color=\"error-dark\" [size]=\"16\"> </cura-icon>\n <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n {{ mobileCloseLabel() }}\n </cura-paragraph>\n </button>\n </div>\n</div>\n", styles: [":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn .3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.backdrop{background-color:var(--background-color);z-index:calc(var(--zIndex) - 10);animation:fadeIn .3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-light);border-radius:4px;max-width:600px;min-width:200px;padding:0 8px 8px;z-index:var(--zIndex);box-shadow:0 8px 32px #0000001f,0 4px 16px #00000014;transform:scale(.95);transition:transform .3s ease-out,opacity .3s ease,visibility .3s ease}.wrapper ::ng-deep>*:not(button){max-height:80vh;overflow:auto;padding-right:12px}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:8px;background:none;border:none;cursor:pointer;display:flex;align-items:center}.close.mobile{display:none}.close.desktop{display:flex}@media (max-width: 768px){.wrapper{position:fixed;bottom:0;width:80%;padding-top:8px;padding-bottom:0;border-radius:4px 4px 0 0;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:8px;padding:8px 0;justify-content:center;width:100%}.close.mobile{display:flex;gap:4px}.close.desktop{display:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "component", type: CuraIconComponent, selector: "cura-icon", inputs: ["name", "color", "size", "iconset", "disabled"] }, { kind: "component", type: CuraParagraphComponent, selector: "cura-paragraph", inputs: ["size", "spotColor", "color", "marginBlock", "lineHeight", "textOverflow"] }] }); }
|
|
90
90
|
}
|
|
91
91
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CuraModalComponent, decorators: [{
|
|
92
92
|
type: Component,
|
|
@@ -94,7 +94,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
94
94
|
role: 'dialog',
|
|
95
95
|
'aria-modal': 'true',
|
|
96
96
|
'[style.--zIndex]': 'zindex()',
|
|
97
|
-
}, template: "<div class=\"modal container\" [class.open]=\"open()\" [style]=\"styles()\">\n <div class=\"modal backdrop\" [class.open]=\"open()\" (click)=\"handleClose()\"></div>\n\n <div class=\"wrapper\">\n <!-- Desktop close button -->\n <button class=\"close desktop\" type=\"button\" (click)=\"handleClose()\">\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"> </cura-icon>\n </button>\n\n <ng-content></ng-content>\n\n <!-- Mobile close button -->\n <button class=\"close mobile\" type=\"button\" (click)=\"handleClose()\">\n <cura-icon name=\"close\" color=\"error-dark\" [size]=\"16\"> </cura-icon>\n <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n {{ mobileCloseLabel() }}\n </cura-paragraph>\n </button>\n </div>\n</div>\n", styles: [":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn .3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.backdrop{background-color:var(--background-color);z-index:calc(var(--zIndex) - 10);animation:fadeIn .3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-light);border-radius:4px;max-width:600px;min-width:200px;padding:0 8px 8px;z-index:var(--zIndex);box-shadow:0 8px 32px #0000001f,0 4px 16px #00000014;transform:scale(.95);transition:transform .3s ease-out,opacity .3s ease,visibility .3s ease}.wrapper ::ng-deep>*:not(button){max-height:80vh;overflow:auto;padding-right:12px}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:8px;background:none;border:none;cursor:pointer;display:flex;align-items:center}.close.mobile{display:none}.close.desktop{display:flex}@media(max-width:768px){.wrapper{position:fixed;bottom:0;width:80%;padding-top:8px;padding-bottom:0;border-radius:4px 4px 0 0;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:8px;padding:8px 0;justify-content:center;width:100%}.close.mobile{display:flex;gap:4px}.close.desktop{display:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
97
|
+
}, template: "<div class=\"modal container\" [class.open]=\"open()\" [style]=\"styles()\">\n <div class=\"modal backdrop\" [class.open]=\"open()\" (click)=\"handleClose()\"></div>\n\n <div class=\"wrapper\">\n <!-- Desktop close button -->\n <button class=\"close desktop\" type=\"button\" (click)=\"handleClose()\">\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"> </cura-icon>\n </button>\n\n <ng-content></ng-content>\n\n <!-- Mobile close button -->\n <button class=\"close mobile\" type=\"button\" (click)=\"handleClose()\">\n <cura-icon name=\"close\" color=\"error-dark\" [size]=\"16\"> </cura-icon>\n <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n {{ mobileCloseLabel() }}\n </cura-paragraph>\n </button>\n </div>\n</div>\n", styles: [":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn .3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.backdrop{background-color:var(--background-color);z-index:calc(var(--zIndex) - 10);animation:fadeIn .3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-light);border-radius:4px;max-width:600px;min-width:200px;padding:0 8px 8px;z-index:var(--zIndex);box-shadow:0 8px 32px #0000001f,0 4px 16px #00000014;transform:scale(.95);transition:transform .3s ease-out,opacity .3s ease,visibility .3s ease}.wrapper ::ng-deep>*:not(button){max-height:80vh;overflow:auto;padding-right:12px}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:8px;background:none;border:none;cursor:pointer;display:flex;align-items:center}.close.mobile{display:none}.close.desktop{display:flex}@media (max-width: 768px){.wrapper{position:fixed;bottom:0;width:80%;padding-top:8px;padding-bottom:0;border-radius:4px 4px 0 0;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:8px;padding:8px 0;justify-content:center;width:100%}.close.mobile{display:flex;gap:4px}.close.desktop{display:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
98
98
|
}], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], top: [{ type: i0.Input, args: [{ isSignal: true, alias: "top", required: false }] }], bottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottom", required: false }] }], left: [{ type: i0.Input, args: [{ isSignal: true, alias: "left", required: false }] }], right: [{ type: i0.Input, args: [{ isSignal: true, alias: "right", required: false }] }], mobileCloseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileCloseLabel", required: false }] }], zindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zindex", required: false }] }], modalClose: [{ type: i0.Output, args: ["modalClose"] }] } });
|
|
99
99
|
|
|
100
100
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rededor-site-front-end-lib-cura-feedback-cura-modal.mjs","sources":["../../../projects/site-front-end-lib/cura/feedback/cura-modal/cura-modal.component.ts","../../../projects/site-front-end-lib/cura/feedback/cura-modal/cura-modal.component.html","../../../projects/site-front-end-lib/cura/feedback/cura-modal/rededor-site-front-end-lib-cura-feedback-cura-modal.ts"],"sourcesContent":["import { Component, input, output, computed, inject, model, OnInit, OnDestroy, PLATFORM_ID } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { CuraApiService } from '@rededor/site-front-end-lib/cura/api';\nimport { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';\nimport { CuraParagraphComponent } from '@rededor/site-front-end-lib/cura/texts/cura-paragraph';\nimport { ModalBackground } from './cura-modal.definitions';\n\n@Component({\n selector: 'cura-modal',\n imports: [CuraIconComponent, CuraParagraphComponent],\n templateUrl: './cura-modal.component.html',\n styleUrls: ['./cura-modal.component.scss'],\n host: {\n role: 'dialog',\n 'aria-modal': 'true',\n '[style.--zIndex]': 'zindex()',\n },\n})\nexport class CuraModalComponent implements OnInit, OnDestroy {\n private curaApi = inject(CuraApiService);\n private platformId = inject(PLATFORM_ID);\n\n /**\n * Property open to control modal visibility\n */\n open = model<boolean>(false);\n\n /**\n * Property background to control modal backdrop color\n */\n background = input<ModalBackground>('light');\n\n /**\n * Property top to control modal top position\n */\n top = input<number>(0);\n\n /**\n * Property bottom to control modal bottom position\n */\n bottom = input<number>(0);\n\n /**\n * Property left to control modal left position\n */\n left = input<number>(0);\n\n /**\n * Property right to control modal right position\n */\n right = input<number>(0);\n\n /**\n * Defines the label for the close button when the modal is viewed on mobile\n */\n mobileCloseLabel = input<string>('Fechar');\n\n /**\n * Property zindex to control the z-index value of the component\n */\n zindex = input<string>('100');\n\n /**\n * Event close to handle modal close\n */\n modalClose = output<void>();\n\n // Computed styles\n styles = computed(() => {\n const backgroundTheme = {\n dark: this.curaApi?.theme?.colors?.getColor('neutral-black', 0.4) || 'rgba(0, 0, 0, 0.4)',\n light: this.curaApi?.theme?.colors?.getColor('primary-darker', 0.8) || 'rgba(0, 0, 0, 0.8)',\n };\n\n return {\n '--background-color': backgroundTheme[this.background()],\n '--top-offset': `${this.top()}px`,\n '--bottom-offset': `${this.bottom()}px`,\n '--left-offset': `${this.left()}px`,\n '--right-offset': `${this.right()}px`,\n '--neutral-purewhite': this.curaApi?.theme?.colors?.getColor('neutral-purewhite') || '#ffffff',\n '--neutral-light': this.curaApi?.theme?.colors?.getColor('neutral-light') || '#f5f5f5',\n '--base-spacing': this.curaApi?.theme?.spacing?.getSpacing() || '16px',\n };\n });\n\n ngOnInit(): void {\n if (isPlatformBrowser(this.platformId)) {\n window.addEventListener('keydown', this.handleCloseOnEsc);\n }\n }\n\n ngOnDestroy(): void {\n if (isPlatformBrowser(this.platformId)) {\n window.removeEventListener('keydown', this.handleCloseOnEsc);\n }\n }\n\n handleCloseOnEsc = (evt: KeyboardEvent): void => {\n if (evt.key !== 'Escape' || !this.open()) {\n return;\n }\n this.open.set(false);\n this.modalClose.emit();\n };\n\n // Handle close method\n handleClose = (): void => {\n this.modalClose.emit();\n this.open.set(false);\n };\n}\n","<div class=\"modal container\" [class.open]=\"open()\" [style]=\"styles()\">\n <div class=\"modal backdrop\" [class.open]=\"open()\" (click)=\"handleClose()\"></div>\n\n <div class=\"wrapper\">\n <!-- Desktop close button -->\n <button class=\"close desktop\" type=\"button\" (click)=\"handleClose()\">\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"> </cura-icon>\n </button>\n\n <ng-content></ng-content>\n\n <!-- Mobile close button -->\n <button class=\"close mobile\" type=\"button\" (click)=\"handleClose()\">\n <cura-icon name=\"close\" color=\"error-dark\" [size]=\"16\"> </cura-icon>\n <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n {{ mobileCloseLabel() }}\n </cura-paragraph>\n </button>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"rededor-site-front-end-lib-cura-feedback-cura-modal.mjs","sources":["../../../projects/site-front-end-lib/cura/feedback/cura-modal/cura-modal.component.ts","../../../projects/site-front-end-lib/cura/feedback/cura-modal/cura-modal.component.html","../../../projects/site-front-end-lib/cura/feedback/cura-modal/rededor-site-front-end-lib-cura-feedback-cura-modal.ts"],"sourcesContent":["import { Component, input, output, computed, inject, model, OnInit, OnDestroy, PLATFORM_ID } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { CuraApiService } from '@rededor/site-front-end-lib/cura/api';\nimport { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';\nimport { CuraParagraphComponent } from '@rededor/site-front-end-lib/cura/texts/cura-paragraph';\nimport { ModalBackground } from './cura-modal.definitions';\n\n@Component({\n selector: 'cura-modal',\n imports: [CuraIconComponent, CuraParagraphComponent],\n templateUrl: './cura-modal.component.html',\n styleUrls: ['./cura-modal.component.scss'],\n host: {\n role: 'dialog',\n 'aria-modal': 'true',\n '[style.--zIndex]': 'zindex()',\n },\n})\nexport class CuraModalComponent implements OnInit, OnDestroy {\n private curaApi = inject(CuraApiService);\n private platformId = inject(PLATFORM_ID);\n\n /**\n * Property open to control modal visibility\n */\n open = model<boolean>(false);\n\n /**\n * Property background to control modal backdrop color\n */\n background = input<ModalBackground>('light');\n\n /**\n * Property top to control modal top position\n */\n top = input<number>(0);\n\n /**\n * Property bottom to control modal bottom position\n */\n bottom = input<number>(0);\n\n /**\n * Property left to control modal left position\n */\n left = input<number>(0);\n\n /**\n * Property right to control modal right position\n */\n right = input<number>(0);\n\n /**\n * Defines the label for the close button when the modal is viewed on mobile\n */\n mobileCloseLabel = input<string>('Fechar');\n\n /**\n * Property zindex to control the z-index value of the component\n */\n zindex = input<string>('100');\n\n /**\n * Event close to handle modal close\n */\n modalClose = output<void>();\n\n // Computed styles\n styles = computed(() => {\n const backgroundTheme = {\n dark: this.curaApi?.theme?.colors?.getColor('neutral-black', 0.4) || 'rgba(0, 0, 0, 0.4)',\n light: this.curaApi?.theme?.colors?.getColor('primary-darker', 0.8) || 'rgba(0, 0, 0, 0.8)',\n };\n\n return {\n '--background-color': backgroundTheme[this.background()],\n '--top-offset': `${this.top()}px`,\n '--bottom-offset': `${this.bottom()}px`,\n '--left-offset': `${this.left()}px`,\n '--right-offset': `${this.right()}px`,\n '--neutral-purewhite': this.curaApi?.theme?.colors?.getColor('neutral-purewhite') || '#ffffff',\n '--neutral-light': this.curaApi?.theme?.colors?.getColor('neutral-light') || '#f5f5f5',\n '--base-spacing': this.curaApi?.theme?.spacing?.getSpacing() || '16px',\n };\n });\n\n ngOnInit(): void {\n if (isPlatformBrowser(this.platformId)) {\n window.addEventListener('keydown', this.handleCloseOnEsc);\n }\n }\n\n ngOnDestroy(): void {\n if (isPlatformBrowser(this.platformId)) {\n window.removeEventListener('keydown', this.handleCloseOnEsc);\n }\n }\n\n handleCloseOnEsc = (evt: KeyboardEvent): void => {\n if (evt.key !== 'Escape' || !this.open()) {\n return;\n }\n this.open.set(false);\n this.modalClose.emit();\n };\n\n // Handle close method\n handleClose = (): void => {\n this.modalClose.emit();\n this.open.set(false);\n };\n}\n","<div class=\"modal container\" [class.open]=\"open()\" [style]=\"styles()\">\n <div class=\"modal backdrop\" [class.open]=\"open()\" (click)=\"handleClose()\"></div>\n\n <div class=\"wrapper\">\n <!-- Desktop close button -->\n <button class=\"close desktop\" type=\"button\" (click)=\"handleClose()\">\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"> </cura-icon>\n </button>\n\n <ng-content></ng-content>\n\n <!-- Mobile close button -->\n <button class=\"close mobile\" type=\"button\" (click)=\"handleClose()\">\n <cura-icon name=\"close\" color=\"error-dark\" [size]=\"16\"> </cura-icon>\n <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n {{ mobileCloseLabel() }}\n </cura-paragraph>\n </button>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAkBa,kBAAkB,CAAA;AAX/B,IAAA,WAAA,GAAA;AAYU,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,cAAc,CAAC;AAChC,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;AAExC;;AAEG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAU,KAAK,gDAAC;AAE5B;;AAEG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAkB,OAAO,sDAAC;AAE5C;;AAEG;AACH,QAAA,IAAA,CAAA,GAAG,GAAG,KAAK,CAAS,CAAC,+CAAC;AAEtB;;AAEG;AACH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAS,CAAC,kDAAC;AAEzB;;AAEG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,CAAC,gDAAC;AAEvB;;AAEG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,CAAC,iDAAC;AAExB;;AAEG;AACH,QAAA,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAAS,QAAQ,4DAAC;AAE1C;;AAEG;AACH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAS,KAAK,kDAAC;AAE7B;;AAEG;QACH,IAAA,CAAA,UAAU,GAAG,MAAM,EAAQ;;AAG3B,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAK;AACrB,YAAA,MAAM,eAAe,GAAG;AACtB,gBAAA,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC,IAAI,oBAAoB;AACzF,gBAAA,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC,IAAI,oBAAoB;aAC5F;YAED,OAAO;AACL,gBAAA,oBAAoB,EAAE,eAAe,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;AACxD,gBAAA,cAAc,EAAE,CAAA,EAAG,IAAI,CAAC,GAAG,EAAE,CAAA,EAAA,CAAI;AACjC,gBAAA,iBAAiB,EAAE,CAAA,EAAG,IAAI,CAAC,MAAM,EAAE,CAAA,EAAA,CAAI;AACvC,gBAAA,eAAe,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,EAAE,CAAA,EAAA,CAAI;AACnC,gBAAA,gBAAgB,EAAE,CAAA,EAAG,IAAI,CAAC,KAAK,EAAE,CAAA,EAAA,CAAI;AACrC,gBAAA,qBAAqB,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,mBAAmB,CAAC,IAAI,SAAS;AAC9F,gBAAA,iBAAiB,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,eAAe,CAAC,IAAI,SAAS;AACtF,gBAAA,gBAAgB,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,MAAM;aACvE;AACH,QAAA,CAAC,kDAAC;AAcF,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,GAAkB,KAAU;AAC9C,YAAA,IAAI,GAAG,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE;gBACxC;YACF;AACA,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;AACpB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACxB,QAAA,CAAC;;QAGD,IAAA,CAAA,WAAW,GAAG,MAAW;AACvB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACtB,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;AACtB,QAAA,CAAC;AACF,IAAA;IAzBC,QAAQ,GAAA;AACN,QAAA,IAAI,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;YACtC,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC;QAC3D;IACF;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;YACtC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC;QAC9D;IACF;+GA9EW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClB/B,4yBAoBA,EAAA,MAAA,EAAA,CAAA,urDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDXY,iBAAiB,gHAAE,sBAAsB,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,aAAA,EAAA,YAAA,EAAA,cAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FASxC,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAX9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,WACb,CAAC,iBAAiB,EAAE,sBAAsB,CAAC,EAAA,IAAA,EAG9C;AACJ,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,YAAY,EAAE,MAAM;AACpB,wBAAA,kBAAkB,EAAE,UAAU;AAC/B,qBAAA,EAAA,QAAA,EAAA,4yBAAA,EAAA,MAAA,EAAA,CAAA,urDAAA,CAAA,EAAA;;;AEhBH;;AAEG;;;;"}
|
|
@@ -178,7 +178,7 @@ class CuraToastComponent {
|
|
|
178
178
|
}
|
|
179
179
|
}
|
|
180
180
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CuraToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
181
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CuraToastComponent, isStandalone: true, selector: "cura-toast", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, loader: { classPropertyName: "loader", publicName: "loader", isSignal: true, isRequired: false, transformFunction: null }, autoCloseDelay: { classPropertyName: "autoCloseDelay", publicName: "autoCloseDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toastClosed: "toastClosed" }, host: { attributes: { "role": "alert", "aria-live": "polite", "aria-atomic": "true" }, properties: { "attr.aria-label": "label()" } }, ngImport: i0, template: "<div [ngClass]=\"containerClasses()\" [ngStyle]=\"toastStyles()\">\n <cura-icon class=\"default-icon\" [name]=\"iconName()\" [size]=\"16\" [color]=\"type() + '-dark'\"></cura-icon>\n\n <div class=\"content\">\n <cura-heading [level]=\"4\" size=\"xsmall\" [color]=\"type() + '-dark'\" weight=\"bold\" marginBlock=\"0\">\n {{ label() }}\n </cura-heading>\n\n <cura-paragraph [color]=\"type() + '-darker'\" size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n <ng-content></ng-content>\n </cura-paragraph>\n\n <ng-content select=\"[slot=actions]\"></ng-content>\n </div>\n\n @if (closeButton()) {\n <cura-icon class=\"close-icon\" name=\"close\" [size]=\"16\" color=\"error-dark\" (click)=\"handleClose()\"></cura-icon>\n }\n\n @if (loader() && autoCloseDelay()) {\n <cura-loader-bar [color]=\"type() + '-base'\" [progress]=\"progress()\"></cura-loader-bar>\n }\n</div>\n", styles: [":host{display:block;box-sizing:border-box}:host .container{position:fixed;z-index:99999;display:flex;box-sizing:border-box;min-width:320px;height:fit-content;padding:16px;border:1px solid var(--color-base);border-radius:12px;background-color:var(--neutral-purewhite);overflow:hidden;box-shadow:0 8px 16px 0 var(--neutral-black-shadow-4, rgba(38, 38, 38, .12))}:host .container.loader{padding:16px 16px 20px}:host .container.top{top:24px}:host .container.top.center{top:-100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .5s ease-in-out,top .5s ease-in-out}:host .container.top.center.active{top:24px;opacity:1}:host .container.bottom{bottom:24px}:host .container.bottom.center{bottom:-100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .5s ease-in-out,bottom .5s ease-in-out}:host .container.bottom.center.active{bottom:24px;opacity:1}:host .container.left{left:-100%;opacity:0;transition:opacity .5s ease-in-out,left .5s ease-in-out}@media(max-width:768px){:host .container.left{right:unset;left:50%;transform:translate(-50%)}}:host .container.left.active{left:24px;opacity:1}:host .container.right{right:-100%;opacity:0;transition:opacity .5s ease-in-out,right .5s ease-in-out}@media(max-width:768px){:host .container.right{right:unset;left:50%;transform:translate(-50%)}}:host .container.right.active{right:24px;opacity:1}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:4px}:host .container .default-icon{margin-right:12px}:host .container .close-icon{margin-left:12px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CuraIconComponent, selector: "cura-icon", inputs: ["name", "color", "size", "iconset", "disabled"] }, { kind: "component", type: CuraHeadingComponent, selector: "cura-heading", inputs: ["level", "size", "weight", "spotColor", "color", "marginBlock", "lineHeight", "textOverflow"] }, { kind: "component", type: CuraParagraphComponent, selector: "cura-paragraph", inputs: ["size", "spotColor", "color", "marginBlock", "lineHeight", "textOverflow"] }, { kind: "component", type: CuraLoaderBarComponent, selector: "cura-loader-bar", inputs: ["color", "progress"] }] }); }
|
|
181
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CuraToastComponent, isStandalone: true, selector: "cura-toast", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, loader: { classPropertyName: "loader", publicName: "loader", isSignal: true, isRequired: false, transformFunction: null }, autoCloseDelay: { classPropertyName: "autoCloseDelay", publicName: "autoCloseDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toastClosed: "toastClosed" }, host: { attributes: { "role": "alert", "aria-live": "polite", "aria-atomic": "true" }, properties: { "attr.aria-label": "label()" } }, ngImport: i0, template: "<div [ngClass]=\"containerClasses()\" [ngStyle]=\"toastStyles()\">\n <cura-icon class=\"default-icon\" [name]=\"iconName()\" [size]=\"16\" [color]=\"type() + '-dark'\"></cura-icon>\n\n <div class=\"content\">\n <cura-heading [level]=\"4\" size=\"xsmall\" [color]=\"type() + '-dark'\" weight=\"bold\" marginBlock=\"0\">\n {{ label() }}\n </cura-heading>\n\n <cura-paragraph [color]=\"type() + '-darker'\" size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n <ng-content></ng-content>\n </cura-paragraph>\n\n <ng-content select=\"[slot=actions]\"></ng-content>\n </div>\n\n @if (closeButton()) {\n <cura-icon class=\"close-icon\" name=\"close\" [size]=\"16\" color=\"error-dark\" (click)=\"handleClose()\"></cura-icon>\n }\n\n @if (loader() && autoCloseDelay()) {\n <cura-loader-bar [color]=\"type() + '-base'\" [progress]=\"progress()\"></cura-loader-bar>\n }\n</div>\n", styles: [":host{display:block;box-sizing:border-box}:host .container{position:fixed;z-index:99999;display:flex;box-sizing:border-box;min-width:320px;height:fit-content;padding:16px;border:1px solid var(--color-base);border-radius:12px;background-color:var(--neutral-purewhite);overflow:hidden;box-shadow:0 8px 16px 0 var(--neutral-black-shadow-4, rgba(38, 38, 38, .12))}:host .container.loader{padding:16px 16px 20px}:host .container.top{top:24px}:host .container.top.center{top:-100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .5s ease-in-out,top .5s ease-in-out}:host .container.top.center.active{top:24px;opacity:1}:host .container.bottom{bottom:24px}:host .container.bottom.center{bottom:-100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .5s ease-in-out,bottom .5s ease-in-out}:host .container.bottom.center.active{bottom:24px;opacity:1}:host .container.left{left:-100%;opacity:0;transition:opacity .5s ease-in-out,left .5s ease-in-out}@media (max-width: 768px){:host .container.left{right:unset;left:50%;transform:translate(-50%)}}:host .container.left.active{left:24px;opacity:1}:host .container.right{right:-100%;opacity:0;transition:opacity .5s ease-in-out,right .5s ease-in-out}@media (max-width: 768px){:host .container.right{right:unset;left:50%;transform:translate(-50%)}}:host .container.right.active{right:24px;opacity:1}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:4px}:host .container .default-icon{margin-right:12px}:host .container .close-icon{margin-left:12px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CuraIconComponent, selector: "cura-icon", inputs: ["name", "color", "size", "iconset", "disabled"] }, { kind: "component", type: CuraHeadingComponent, selector: "cura-heading", inputs: ["level", "size", "weight", "spotColor", "color", "marginBlock", "lineHeight", "textOverflow"] }, { kind: "component", type: CuraParagraphComponent, selector: "cura-paragraph", inputs: ["size", "spotColor", "color", "marginBlock", "lineHeight", "textOverflow"] }, { kind: "component", type: CuraLoaderBarComponent, selector: "cura-loader-bar", inputs: ["color", "progress"] }] }); }
|
|
182
182
|
}
|
|
183
183
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CuraToastComponent, decorators: [{
|
|
184
184
|
type: Component,
|
|
@@ -187,7 +187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
187
187
|
'aria-live': 'polite',
|
|
188
188
|
'aria-atomic': 'true',
|
|
189
189
|
'[attr.aria-label]': 'label()',
|
|
190
|
-
}, template: "<div [ngClass]=\"containerClasses()\" [ngStyle]=\"toastStyles()\">\n <cura-icon class=\"default-icon\" [name]=\"iconName()\" [size]=\"16\" [color]=\"type() + '-dark'\"></cura-icon>\n\n <div class=\"content\">\n <cura-heading [level]=\"4\" size=\"xsmall\" [color]=\"type() + '-dark'\" weight=\"bold\" marginBlock=\"0\">\n {{ label() }}\n </cura-heading>\n\n <cura-paragraph [color]=\"type() + '-darker'\" size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n <ng-content></ng-content>\n </cura-paragraph>\n\n <ng-content select=\"[slot=actions]\"></ng-content>\n </div>\n\n @if (closeButton()) {\n <cura-icon class=\"close-icon\" name=\"close\" [size]=\"16\" color=\"error-dark\" (click)=\"handleClose()\"></cura-icon>\n }\n\n @if (loader() && autoCloseDelay()) {\n <cura-loader-bar [color]=\"type() + '-base'\" [progress]=\"progress()\"></cura-loader-bar>\n }\n</div>\n", styles: [":host{display:block;box-sizing:border-box}:host .container{position:fixed;z-index:99999;display:flex;box-sizing:border-box;min-width:320px;height:fit-content;padding:16px;border:1px solid var(--color-base);border-radius:12px;background-color:var(--neutral-purewhite);overflow:hidden;box-shadow:0 8px 16px 0 var(--neutral-black-shadow-4, rgba(38, 38, 38, .12))}:host .container.loader{padding:16px 16px 20px}:host .container.top{top:24px}:host .container.top.center{top:-100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .5s ease-in-out,top .5s ease-in-out}:host .container.top.center.active{top:24px;opacity:1}:host .container.bottom{bottom:24px}:host .container.bottom.center{bottom:-100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .5s ease-in-out,bottom .5s ease-in-out}:host .container.bottom.center.active{bottom:24px;opacity:1}:host .container.left{left:-100%;opacity:0;transition:opacity .5s ease-in-out,left .5s ease-in-out}@media(max-width:768px){:host .container.left{right:unset;left:50%;transform:translate(-50%)}}:host .container.left.active{left:24px;opacity:1}:host .container.right{right:-100%;opacity:0;transition:opacity .5s ease-in-out,right .5s ease-in-out}@media(max-width:768px){:host .container.right{right:unset;left:50%;transform:translate(-50%)}}:host .container.right.active{right:24px;opacity:1}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:4px}:host .container .default-icon{margin-right:12px}:host .container .close-icon{margin-left:12px;cursor:pointer}\n"] }]
|
|
190
|
+
}, template: "<div [ngClass]=\"containerClasses()\" [ngStyle]=\"toastStyles()\">\n <cura-icon class=\"default-icon\" [name]=\"iconName()\" [size]=\"16\" [color]=\"type() + '-dark'\"></cura-icon>\n\n <div class=\"content\">\n <cura-heading [level]=\"4\" size=\"xsmall\" [color]=\"type() + '-dark'\" weight=\"bold\" marginBlock=\"0\">\n {{ label() }}\n </cura-heading>\n\n <cura-paragraph [color]=\"type() + '-darker'\" size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n <ng-content></ng-content>\n </cura-paragraph>\n\n <ng-content select=\"[slot=actions]\"></ng-content>\n </div>\n\n @if (closeButton()) {\n <cura-icon class=\"close-icon\" name=\"close\" [size]=\"16\" color=\"error-dark\" (click)=\"handleClose()\"></cura-icon>\n }\n\n @if (loader() && autoCloseDelay()) {\n <cura-loader-bar [color]=\"type() + '-base'\" [progress]=\"progress()\"></cura-loader-bar>\n }\n</div>\n", styles: [":host{display:block;box-sizing:border-box}:host .container{position:fixed;z-index:99999;display:flex;box-sizing:border-box;min-width:320px;height:fit-content;padding:16px;border:1px solid var(--color-base);border-radius:12px;background-color:var(--neutral-purewhite);overflow:hidden;box-shadow:0 8px 16px 0 var(--neutral-black-shadow-4, rgba(38, 38, 38, .12))}:host .container.loader{padding:16px 16px 20px}:host .container.top{top:24px}:host .container.top.center{top:-100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .5s ease-in-out,top .5s ease-in-out}:host .container.top.center.active{top:24px;opacity:1}:host .container.bottom{bottom:24px}:host .container.bottom.center{bottom:-100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .5s ease-in-out,bottom .5s ease-in-out}:host .container.bottom.center.active{bottom:24px;opacity:1}:host .container.left{left:-100%;opacity:0;transition:opacity .5s ease-in-out,left .5s ease-in-out}@media (max-width: 768px){:host .container.left{right:unset;left:50%;transform:translate(-50%)}}:host .container.left.active{left:24px;opacity:1}:host .container.right{right:-100%;opacity:0;transition:opacity .5s ease-in-out,right .5s ease-in-out}@media (max-width: 768px){:host .container.right{right:unset;left:50%;transform:translate(-50%)}}:host .container.right.active{right:24px;opacity:1}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:4px}:host .container .default-icon{margin-right:12px}:host .container .close-icon{margin-left:12px;cursor:pointer}\n"] }]
|
|
191
191
|
}], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], closeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButton", required: false }] }], loader: [{ type: i0.Input, args: [{ isSignal: true, alias: "loader", required: false }] }], autoCloseDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCloseDelay", required: false }] }], toastClosed: [{ type: i0.Output, args: ["toastClosed"] }] } });
|
|
192
192
|
|
|
193
193
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rededor-site-front-end-lib-cura-feedback-cura-toast.mjs","sources":["../../../projects/site-front-end-lib/cura/feedback/cura-toast/cura-toast.component.ts","../../../projects/site-front-end-lib/cura/feedback/cura-toast/cura-toast.component.html","../../../projects/site-front-end-lib/cura/feedback/cura-toast/rededor-site-front-end-lib-cura-feedback-cura-toast.ts"],"sourcesContent":["import { Component, input, output, inject, computed, signal, OnInit, OnDestroy, ElementRef, effect } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { CuraApiService } from '@rededor/site-front-end-lib/cura/api';\nimport { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';\nimport { CuraHeadingComponent } from '@rededor/site-front-end-lib/cura/texts/cura-heading';\nimport { CuraParagraphComponent } from '@rededor/site-front-end-lib/cura/texts/cura-paragraph';\nimport { CuraLoaderBarComponent } from '@rededor/site-front-end-lib/cura/loaders/cura-loader-bar';\nimport { ToastType, ToastPosition } from './cura-toast.definitions';\n\n@Component({\n selector: 'cura-toast',\n imports: [CommonModule, CuraIconComponent, CuraHeadingComponent, CuraParagraphComponent, CuraLoaderBarComponent],\n templateUrl: './cura-toast.component.html',\n styleUrls: ['./cura-toast.component.scss'],\n host: {\n role: 'alert',\n 'aria-live': 'polite',\n 'aria-atomic': 'true',\n '[attr.aria-label]': 'label()',\n },\n})\nexport class CuraToastComponent implements OnInit, OnDestroy {\n private curaApi: CuraApiService = inject(CuraApiService);\n private elementRef = inject(ElementRef);\n private intervalId?: ReturnType<typeof setInterval>;\n\n /**\n * Toast type: info (default) | success | warning | error\n */\n type = input<ToastType>('info');\n\n /**\n * Toast position on screen\n */\n position = input<ToastPosition>('top-right');\n\n /**\n * Custom icon name\n */\n icon = input<string>('');\n\n /**\n * Toast label/title\n */\n label = input<string>('');\n\n /**\n * Show close button. Default: true\n */\n closeButton = input<boolean>(true);\n\n /**\n * Show loader bar. Default: true\n */\n loader = input<boolean>(true);\n\n /**\n * Auto close delay in milliseconds. Default: 10000ms (10s)\n */\n autoCloseDelay = input<number>(10000);\n\n /**\n * Close event emitter\n */\n toastClosed = output<void>();\n\n /**\n * Progress state for loader animation\n */\n progress = signal<number>(0);\n\n /**\n * Active state for animation\n */\n isActive = signal<boolean>(false);\n\n constructor() {\n // Watch for type and position changes to update styles\n effect(() => {\n this.type();\n this.position();\n });\n }\n\n toastStyles = computed(() => {\n if (!this.curaApi) return {};\n\n const colors = [\n { name: '--neutral-purewhite', theme: 'neutral-purewhite' },\n { name: '--neutral-base', theme: 'neutral-base', opacity: 0.2 },\n { name: '--primary-base', theme: 'primary-base' },\n { name: '--color-base', theme: `${this.type()}-base` },\n ];\n\n const styles: { [key: string]: string } = {};\n\n colors.forEach((color) => {\n if (color.opacity !== undefined) {\n styles[color.name] = this.curaApi.theme.colors.getColor(color.theme, color.opacity);\n } else {\n styles[color.name] = this.curaApi.theme.colors.getColor(color.theme);\n }\n });\n\n return styles;\n });\n\n containerClasses = computed(() => {\n const [firstPosition, secondPosition] = this.position().split('-');\n const classes: { [key: string]: boolean } = {\n container: true,\n };\n\n if (firstPosition) classes[firstPosition] = true;\n if (secondPosition) classes[secondPosition] = true;\n if (this.loader()) classes['loader'] = true;\n if (this.isActive()) classes['active'] = true;\n\n return classes;\n });\n\n iconName = computed(() => {\n const iconMapping: { [key in ToastType]: string } = {\n info: 'infoCircle',\n success: 'checkCircle',\n warning: 'alertCircle',\n error: 'alertTriangle',\n };\n return this.icon() || iconMapping[this.type()];\n });\n\n ngOnInit(): void {\n // Activate animation after a small delay to ensure DOM is ready\n setTimeout(() => {\n this.openContainer();\n this.startAnimation();\n }, 10);\n }\n\n ngOnDestroy(): void {\n if (this.intervalId) {\n clearInterval(this.intervalId);\n }\n }\n\n /**\n * Opens the toast container with animation\n */\n openContainer(): void {\n this.isActive.set(true);\n }\n\n /**\n * Closes the toast container with animation\n */\n closeContainer(): void {\n this.isActive.set(false);\n\n setTimeout(() => {\n this.toastClosed.emit();\n // Remove element from DOM\n const element = this.elementRef.nativeElement;\n if (element && element.parentNode) {\n element.parentNode.removeChild(element);\n }\n }, 500);\n }\n\n /**\n * Public method to close toast\n */\n close(): void {\n this.closeContainer();\n }\n\n /**\n * Handle close button click\n */\n handleClose(): void {\n this.closeContainer();\n }\n\n /**\n * Starts the auto-close animation\n */\n private startAnimation(): void {\n const delay = this.autoCloseDelay();\n\n if (!delay) return;\n\n if (this.loader()) {\n this.progress.set(0);\n this.intervalId = setInterval(() => {\n const currentProgress = this.progress();\n if (currentProgress >= 100) {\n if (this.intervalId) {\n clearInterval(this.intervalId);\n }\n this.closeContainer();\n } else {\n this.progress.set(currentProgress + 1);\n }\n }, delay / 100);\n } else {\n this.intervalId = setInterval(() => {\n if (this.intervalId) {\n clearInterval(this.intervalId);\n }\n this.closeContainer();\n }, delay);\n }\n }\n}\n","<div [ngClass]=\"containerClasses()\" [ngStyle]=\"toastStyles()\">\n <cura-icon class=\"default-icon\" [name]=\"iconName()\" [size]=\"16\" [color]=\"type() + '-dark'\"></cura-icon>\n\n <div class=\"content\">\n <cura-heading [level]=\"4\" size=\"xsmall\" [color]=\"type() + '-dark'\" weight=\"bold\" marginBlock=\"0\">\n {{ label() }}\n </cura-heading>\n\n <cura-paragraph [color]=\"type() + '-darker'\" size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n <ng-content></ng-content>\n </cura-paragraph>\n\n <ng-content select=\"[slot=actions]\"></ng-content>\n </div>\n\n @if (closeButton()) {\n <cura-icon class=\"close-icon\" name=\"close\" [size]=\"16\" color=\"error-dark\" (click)=\"handleClose()\"></cura-icon>\n }\n\n @if (loader() && autoCloseDelay()) {\n <cura-loader-bar [color]=\"type() + '-base'\" [progress]=\"progress()\"></cura-loader-bar>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"rededor-site-front-end-lib-cura-feedback-cura-toast.mjs","sources":["../../../projects/site-front-end-lib/cura/feedback/cura-toast/cura-toast.component.ts","../../../projects/site-front-end-lib/cura/feedback/cura-toast/cura-toast.component.html","../../../projects/site-front-end-lib/cura/feedback/cura-toast/rededor-site-front-end-lib-cura-feedback-cura-toast.ts"],"sourcesContent":["import { Component, input, output, inject, computed, signal, OnInit, OnDestroy, ElementRef, effect } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { CuraApiService } from '@rededor/site-front-end-lib/cura/api';\nimport { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';\nimport { CuraHeadingComponent } from '@rededor/site-front-end-lib/cura/texts/cura-heading';\nimport { CuraParagraphComponent } from '@rededor/site-front-end-lib/cura/texts/cura-paragraph';\nimport { CuraLoaderBarComponent } from '@rededor/site-front-end-lib/cura/loaders/cura-loader-bar';\nimport { ToastType, ToastPosition } from './cura-toast.definitions';\n\n@Component({\n selector: 'cura-toast',\n imports: [CommonModule, CuraIconComponent, CuraHeadingComponent, CuraParagraphComponent, CuraLoaderBarComponent],\n templateUrl: './cura-toast.component.html',\n styleUrls: ['./cura-toast.component.scss'],\n host: {\n role: 'alert',\n 'aria-live': 'polite',\n 'aria-atomic': 'true',\n '[attr.aria-label]': 'label()',\n },\n})\nexport class CuraToastComponent implements OnInit, OnDestroy {\n private curaApi: CuraApiService = inject(CuraApiService);\n private elementRef = inject(ElementRef);\n private intervalId?: ReturnType<typeof setInterval>;\n\n /**\n * Toast type: info (default) | success | warning | error\n */\n type = input<ToastType>('info');\n\n /**\n * Toast position on screen\n */\n position = input<ToastPosition>('top-right');\n\n /**\n * Custom icon name\n */\n icon = input<string>('');\n\n /**\n * Toast label/title\n */\n label = input<string>('');\n\n /**\n * Show close button. Default: true\n */\n closeButton = input<boolean>(true);\n\n /**\n * Show loader bar. Default: true\n */\n loader = input<boolean>(true);\n\n /**\n * Auto close delay in milliseconds. Default: 10000ms (10s)\n */\n autoCloseDelay = input<number>(10000);\n\n /**\n * Close event emitter\n */\n toastClosed = output<void>();\n\n /**\n * Progress state for loader animation\n */\n progress = signal<number>(0);\n\n /**\n * Active state for animation\n */\n isActive = signal<boolean>(false);\n\n constructor() {\n // Watch for type and position changes to update styles\n effect(() => {\n this.type();\n this.position();\n });\n }\n\n toastStyles = computed(() => {\n if (!this.curaApi) return {};\n\n const colors = [\n { name: '--neutral-purewhite', theme: 'neutral-purewhite' },\n { name: '--neutral-base', theme: 'neutral-base', opacity: 0.2 },\n { name: '--primary-base', theme: 'primary-base' },\n { name: '--color-base', theme: `${this.type()}-base` },\n ];\n\n const styles: { [key: string]: string } = {};\n\n colors.forEach((color) => {\n if (color.opacity !== undefined) {\n styles[color.name] = this.curaApi.theme.colors.getColor(color.theme, color.opacity);\n } else {\n styles[color.name] = this.curaApi.theme.colors.getColor(color.theme);\n }\n });\n\n return styles;\n });\n\n containerClasses = computed(() => {\n const [firstPosition, secondPosition] = this.position().split('-');\n const classes: { [key: string]: boolean } = {\n container: true,\n };\n\n if (firstPosition) classes[firstPosition] = true;\n if (secondPosition) classes[secondPosition] = true;\n if (this.loader()) classes['loader'] = true;\n if (this.isActive()) classes['active'] = true;\n\n return classes;\n });\n\n iconName = computed(() => {\n const iconMapping: { [key in ToastType]: string } = {\n info: 'infoCircle',\n success: 'checkCircle',\n warning: 'alertCircle',\n error: 'alertTriangle',\n };\n return this.icon() || iconMapping[this.type()];\n });\n\n ngOnInit(): void {\n // Activate animation after a small delay to ensure DOM is ready\n setTimeout(() => {\n this.openContainer();\n this.startAnimation();\n }, 10);\n }\n\n ngOnDestroy(): void {\n if (this.intervalId) {\n clearInterval(this.intervalId);\n }\n }\n\n /**\n * Opens the toast container with animation\n */\n openContainer(): void {\n this.isActive.set(true);\n }\n\n /**\n * Closes the toast container with animation\n */\n closeContainer(): void {\n this.isActive.set(false);\n\n setTimeout(() => {\n this.toastClosed.emit();\n // Remove element from DOM\n const element = this.elementRef.nativeElement;\n if (element && element.parentNode) {\n element.parentNode.removeChild(element);\n }\n }, 500);\n }\n\n /**\n * Public method to close toast\n */\n close(): void {\n this.closeContainer();\n }\n\n /**\n * Handle close button click\n */\n handleClose(): void {\n this.closeContainer();\n }\n\n /**\n * Starts the auto-close animation\n */\n private startAnimation(): void {\n const delay = this.autoCloseDelay();\n\n if (!delay) return;\n\n if (this.loader()) {\n this.progress.set(0);\n this.intervalId = setInterval(() => {\n const currentProgress = this.progress();\n if (currentProgress >= 100) {\n if (this.intervalId) {\n clearInterval(this.intervalId);\n }\n this.closeContainer();\n } else {\n this.progress.set(currentProgress + 1);\n }\n }, delay / 100);\n } else {\n this.intervalId = setInterval(() => {\n if (this.intervalId) {\n clearInterval(this.intervalId);\n }\n this.closeContainer();\n }, delay);\n }\n }\n}\n","<div [ngClass]=\"containerClasses()\" [ngStyle]=\"toastStyles()\">\n <cura-icon class=\"default-icon\" [name]=\"iconName()\" [size]=\"16\" [color]=\"type() + '-dark'\"></cura-icon>\n\n <div class=\"content\">\n <cura-heading [level]=\"4\" size=\"xsmall\" [color]=\"type() + '-dark'\" weight=\"bold\" marginBlock=\"0\">\n {{ label() }}\n </cura-heading>\n\n <cura-paragraph [color]=\"type() + '-darker'\" size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n <ng-content></ng-content>\n </cura-paragraph>\n\n <ng-content select=\"[slot=actions]\"></ng-content>\n </div>\n\n @if (closeButton()) {\n <cura-icon class=\"close-icon\" name=\"close\" [size]=\"16\" color=\"error-dark\" (click)=\"handleClose()\"></cura-icon>\n }\n\n @if (loader() && autoCloseDelay()) {\n <cura-loader-bar [color]=\"type() + '-base'\" [progress]=\"progress()\"></cura-loader-bar>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -560,7 +560,7 @@ class CuraInputTextComponent {
|
|
|
560
560
|
useExisting: forwardRef(() => CuraInputTextComponent),
|
|
561
561
|
multi: true,
|
|
562
562
|
},
|
|
563
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"cura-input-group\" [ngClass]=\"classes()\" [style]=\"styles()\" (mouseenter)=\"handleMouseEnter()\" (mouseleave)=\"handleMouseLeave()\">\n <div class=\"input-wrapper\">\n @if (label()) {\n <cura-label class=\"label\" weight=\"bold\" [size]=\"size() === 'large' ? 'small' : 'xsmall'\" [color]=\"labelColor()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required\">*</span>\n }\n </cura-label>\n }\n\n <div class=\"cura-input-field\" [style]=\"styles()\">\n @if (iconConfig().icon) {\n <div class=\"feedback-icon\" [style]=\"styles()\">\n <cura-icon [name]=\"iconConfig().icon!.name\" iconset=\"default\" [size]=\"iconConfig().size\" [color]=\"iconConfig().icon!.color\"> </cura-icon>\n </div>\n }\n\n <input\n #inputElement\n [attr.id]=\"name() || null\"\n [attr.name]=\"name() || null\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled() || isLoading()\"\n [required]=\"required()\"\n [readonly]=\"readOnly()\"\n [attr.maxlength]=\"maxlength()\"\n [value]=\"value()\"\n [attr.inputmode]=\"maskPreset() ? 'tel' : inputMode()\"\n [autocomplete]=\"autocomplete()\"\n [ngClass]=\"classes()\"\n [style]=\"styles()\"\n (focus)=\"handleInputFocus()\"\n (blur)=\"handleInputBlur()\"\n (input)=\"handleInputChange($event)\"\n (keydown)=\"handleKeyDown($event)\"\n />\n\n @if (shouldShowClearButton()) {\n <cura-icon\n [size]=\"size() === 'large' || mode() === 'transparent' ? 20 : 16\"\n color=\"primary-base\"\n name=\"closeCircle\"\n iconset=\"default\"\n class=\"clear-button\"\n (click)=\"handleClearInput()\"\n >\n </cura-icon>\n }\n\n @if (isLoading()) {\n <cura-loader-circle [size]=\"size() === 'large' ? 'medium' : 'small'\" color=\"primary-base\"> </cura-loader-circle>\n }\n </div>\n\n @if (helperText()) {\n <div [style]=\"styles()\" class=\"helper-text\" part=\"cura-input-text-helper\">\n <cura-label size=\"xsmall\" lineHeight=\"xsmall\" [color]=\"helperText().color\">\n <ng-content></ng-content>\n </cura-label>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;box-sizing:border-box;width:100%}.required{color:var(--error-base)}.cura-input-group{width:100%;font-family:var(--font-family);text-align:left!important}.cura-input-group cura-label{margin-bottom:8px}.cura-input-group .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group .cura-input-field cura-loader-circle{margin:0 12px}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px;padding-top:6px}.cura-input-group .cura-input-field .clear-button{margin-right:12px;cursor:pointer}.cura-input-group .helper-text{margin-top:8px;color:var(--neutral-dark)}.cura-input-group.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success:not(.transparent) .cura-input-field{border:2px solid var(--success-dark)!important;background-color:var(--success-lighter)!important}.cura-input-group.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error:not(.transparent) .cura-input-field{border:2px solid var(--error-dark)!important;background-color:var(--error-lighter)!important}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group:focus-within:not(.selection) .cura-input-field{border:2px solid var(--info-base)!important;background-color:var(--neutral-purewhite);outline:none}.cura-input-group:focus-within:not(.selection) .cura-input-field input{color:var(--neutral-black)!important}.cura-input-group:focus-within.selection .cura-input-field{border-radius:var(--border-radius) var(--border-radius) 0px 0px}.cura-input-group.isLoading{cursor:wait}.cura-input-group.isLoading .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.isLoading .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.isLoading .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.isLoading .cura-input-field{background-color:var(--neutral-white)!important;border:2px solid var(--primary-base)!important}.cura-input-group.isLoading .cura-input-field input{cursor:wait;color:var(--primary-base)!important}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--primary-base)!important}.cura-input-group.readOnly[read-only] .cura-input-field,.cura-input-group.readOnly[read-only] .cura-input-field input{cursor:default}.cura-input-group.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.cura-input-group.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.cura-input-group.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.cura-input-group.disabled .cura-input-field input{color:var(--neutral-medium)}.cura-input-group.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.cura-input-group.transparent{background-color:transparent;padding:0;max-height:80px}.cura-input-group.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent .cura-input-field{background-color:transparent!important;border:none!important;border-radius:0;height:27px}.cura-input-group.transparent .cura-input-field input{color:var(--neutral-black)!important;font-size:16px;font-weight:var(--font-weight-bold)!important;padding:0}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.cura-input-group.transparent:focus-within .cura-input-field{border:none!important;background-color:transparent!important}.cura-input-group.transparent:focus-within .cura-input-field input{border:none!important;outline:none}.cura-input-group.transparent .helper-text{margin-top:0}.cura-input-group.transparent.transparent{display:flex;background-color:transparent;padding:0;justify-content:start;align-items:center;max-height:80px;gap:4px}.cura-input-group.transparent.transparent .input-wrapper{display:flex;width:100%;flex-direction:column;justify-content:start}.cura-input-group.transparent.transparent cura-label{margin-bottom:4px;--color-body: var(--neutral-dark) !important}.cura-input-group.transparent.transparent.error cura-label{--color-body: var(--neutral-black) !important}.cura-input-group.transparent.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.transparent.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent.transparent .cura-input-field{background-color:transparent!important;border:none!important;border-radius:var(--border-radius, 0)!important;height:27px;overflow:hidden}.cura-input-group.transparent.transparent .cura-input-field input{order:1;color:var(--neutral-black)!important;font-size:16px;font-weight:var(--font-weight-bold)!important;padding:0}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent.transparent .cura-input-field .clear-button{order:2;cursor:pointer;margin:0 20px 0 0;padding:0}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding:6px 0 0}.cura-input-group.transparent.transparent .cura-input-field cura-loader-circle{order:2;margin:0 20px 0 0}.cura-input-group.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field input{color:var(--error-darker)!important}.cura-input-group.error .cura-input-field input::placeholder{color:var(--error-darker)!important}.cura-input-group.error.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.cura-input-group.error.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.cura-input-group.error.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.error:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error:not(.transparent).large .cura-input-field{border:2px solid var(--error-dark)!important;background-color:var(--error-lighter)!important}.cura-input-group.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field input{color:var(--success-darker)!important}.cura-input-group.success .cura-input-field input::placeholder{color:var(--success-darker)!important}.cura-input-group.success.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.cura-input-group.success.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.cura-input-group.success.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.success:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success:not(.transparent).large .cura-input-field{border:2px solid var(--success-dark)!important;background-color:var(--success-lighter)!important}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CuraLabelComponent, selector: "cura-label", inputs: ["size", "weight", "spotColor", "color", "marginBlock", "lineHeight", "textOverflow"] }, { kind: "component", type: CuraIconComponent, selector: "cura-icon", inputs: ["name", "color", "size", "iconset", "disabled"] }, { kind: "component", type: CuraLoaderCircleComponent, selector: "cura-loader-circle", inputs: ["size", "color"] }] }); }
|
|
563
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"cura-input-group\" [ngClass]=\"classes()\" [style]=\"styles()\" (mouseenter)=\"handleMouseEnter()\" (mouseleave)=\"handleMouseLeave()\">\n <div class=\"input-wrapper\">\n @if (label()) {\n <cura-label class=\"label\" weight=\"bold\" [size]=\"size() === 'large' ? 'small' : 'xsmall'\" [color]=\"labelColor()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required\">*</span>\n }\n </cura-label>\n }\n\n <div class=\"cura-input-field\" [style]=\"styles()\">\n @if (iconConfig().icon) {\n <div class=\"feedback-icon\" [style]=\"styles()\">\n <cura-icon [name]=\"iconConfig().icon!.name\" iconset=\"default\" [size]=\"iconConfig().size\" [color]=\"iconConfig().icon!.color\"> </cura-icon>\n </div>\n }\n\n <input\n #inputElement\n [attr.id]=\"name() || null\"\n [attr.name]=\"name() || null\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled() || isLoading()\"\n [required]=\"required()\"\n [readonly]=\"readOnly()\"\n [attr.maxlength]=\"maxlength()\"\n [value]=\"value()\"\n [attr.inputmode]=\"maskPreset() ? 'tel' : inputMode()\"\n [autocomplete]=\"autocomplete()\"\n [ngClass]=\"classes()\"\n [style]=\"styles()\"\n (focus)=\"handleInputFocus()\"\n (blur)=\"handleInputBlur()\"\n (input)=\"handleInputChange($event)\"\n (keydown)=\"handleKeyDown($event)\"\n />\n\n @if (shouldShowClearButton()) {\n <cura-icon\n [size]=\"size() === 'large' || mode() === 'transparent' ? 20 : 16\"\n color=\"primary-base\"\n name=\"closeCircle\"\n iconset=\"default\"\n class=\"clear-button\"\n (click)=\"handleClearInput()\"\n >\n </cura-icon>\n }\n\n @if (isLoading()) {\n <cura-loader-circle [size]=\"size() === 'large' ? 'medium' : 'small'\" color=\"primary-base\"> </cura-loader-circle>\n }\n </div>\n\n @if (helperText()) {\n <div [style]=\"styles()\" class=\"helper-text\" part=\"cura-input-text-helper\">\n <cura-label size=\"xsmall\" lineHeight=\"xsmall\" [color]=\"helperText().color\">\n <ng-content></ng-content>\n </cura-label>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;box-sizing:border-box;width:100%}.required{color:var(--error-base)}.cura-input-group{width:100%;font-family:var(--font-family);text-align:left!important}.cura-input-group cura-label{margin-bottom:8px}.cura-input-group .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group .cura-input-field cura-loader-circle{margin:0 12px}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px;padding-top:6px}.cura-input-group .cura-input-field .clear-button{margin-right:12px;cursor:pointer}.cura-input-group .helper-text{margin-top:8px;color:var(--neutral-dark)}.cura-input-group.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark)!important;background-color:var(--success-lighter)!important}.cura-input-group.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark)!important;background-color:var(--error-lighter)!important}.cura-input-group.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group:focus-within:not(.selection) .cura-input-field{border:2px solid var(--info-base)!important;background-color:var(--neutral-purewhite);outline:none}.cura-input-group:focus-within:not(.selection) .cura-input-field input{color:var(--neutral-black)!important}.cura-input-group:focus-within.selection .cura-input-field{border-radius:var(--border-radius) var(--border-radius) 0px 0px}.cura-input-group.isLoading{cursor:wait}.cura-input-group.isLoading .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:var(--neutral-white)!important;border:2px solid var(--primary-base)!important}.cura-input-group.isLoading .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.isLoading .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.isLoading .cura-input-field input{cursor:wait;color:var(--primary-base)!important}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--primary-base)!important}.cura-input-group.readOnly[read-only] .cura-input-field,.cura-input-group.readOnly[read-only] .cura-input-field input{cursor:default}.cura-input-group.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.cura-input-group.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.cura-input-group.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.cura-input-group.disabled .cura-input-field input{color:var(--neutral-medium)}.cura-input-group.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.cura-input-group.transparent{background-color:transparent;padding:0;max-height:80px}.cura-input-group.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent!important;border:none!important;border-radius:0;height:27px}.cura-input-group.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent .cura-input-field input{color:var(--neutral-black)!important;font-size:16px;font-weight:var(--font-weight-bold)!important;padding:0}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.cura-input-group.transparent:focus-within .cura-input-field{border:none!important;background-color:transparent!important}.cura-input-group.transparent:focus-within .cura-input-field input{border:none!important;outline:none}.cura-input-group.transparent .helper-text{margin-top:0}.cura-input-group.transparent.transparent{display:flex;background-color:transparent;padding:0;justify-content:start;align-items:center;max-height:80px;gap:4px}.cura-input-group.transparent.transparent .input-wrapper{display:flex;width:100%;flex-direction:column;justify-content:start}.cura-input-group.transparent.transparent cura-label{margin-bottom:4px;--color-body: var(--neutral-dark) !important}.cura-input-group.transparent.transparent.error cura-label{--color-body: var(--neutral-black) !important}.cura-input-group.transparent.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;box-sizing:border-box;background-color:transparent!important;border:none!important;border-radius:var(--border-radius, 0)!important;height:27px;overflow:hidden}.cura-input-group.transparent.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent.transparent .cura-input-field input{order:1;color:var(--neutral-black)!important;font-size:16px;font-weight:var(--font-weight-bold)!important;padding:0}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent.transparent .cura-input-field .clear-button{order:2;cursor:pointer;margin:0 20px 0 0;padding:0}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding:6px 0 0}.cura-input-group.transparent.transparent .cura-input-field cura-loader-circle{order:2;margin:0 20px 0 0}.cura-input-group.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field input{color:var(--error-darker)!important}.cura-input-group.error .cura-input-field input::placeholder{color:var(--error-darker)!important}.cura-input-group.error.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.cura-input-group.error.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.cura-input-group.error.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.error:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark)!important;background-color:var(--error-lighter)!important}.cura-input-group.error:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field input{color:var(--success-darker)!important}.cura-input-group.success .cura-input-field input::placeholder{color:var(--success-darker)!important}.cura-input-group.success.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.cura-input-group.success.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.cura-input-group.success.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.success:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark)!important;background-color:var(--success-lighter)!important}.cura-input-group.success:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CuraLabelComponent, selector: "cura-label", inputs: ["size", "weight", "spotColor", "color", "marginBlock", "lineHeight", "textOverflow"] }, { kind: "component", type: CuraIconComponent, selector: "cura-icon", inputs: ["name", "color", "size", "iconset", "disabled"] }, { kind: "component", type: CuraLoaderCircleComponent, selector: "cura-loader-circle", inputs: ["size", "color"] }] }); }
|
|
564
564
|
}
|
|
565
565
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CuraInputTextComponent, decorators: [{
|
|
566
566
|
type: Component,
|
|
@@ -575,7 +575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
575
575
|
useExisting: forwardRef(() => CuraInputTextComponent),
|
|
576
576
|
multi: true,
|
|
577
577
|
},
|
|
578
|
-
], template: "<div class=\"cura-input-group\" [ngClass]=\"classes()\" [style]=\"styles()\" (mouseenter)=\"handleMouseEnter()\" (mouseleave)=\"handleMouseLeave()\">\n <div class=\"input-wrapper\">\n @if (label()) {\n <cura-label class=\"label\" weight=\"bold\" [size]=\"size() === 'large' ? 'small' : 'xsmall'\" [color]=\"labelColor()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required\">*</span>\n }\n </cura-label>\n }\n\n <div class=\"cura-input-field\" [style]=\"styles()\">\n @if (iconConfig().icon) {\n <div class=\"feedback-icon\" [style]=\"styles()\">\n <cura-icon [name]=\"iconConfig().icon!.name\" iconset=\"default\" [size]=\"iconConfig().size\" [color]=\"iconConfig().icon!.color\"> </cura-icon>\n </div>\n }\n\n <input\n #inputElement\n [attr.id]=\"name() || null\"\n [attr.name]=\"name() || null\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled() || isLoading()\"\n [required]=\"required()\"\n [readonly]=\"readOnly()\"\n [attr.maxlength]=\"maxlength()\"\n [value]=\"value()\"\n [attr.inputmode]=\"maskPreset() ? 'tel' : inputMode()\"\n [autocomplete]=\"autocomplete()\"\n [ngClass]=\"classes()\"\n [style]=\"styles()\"\n (focus)=\"handleInputFocus()\"\n (blur)=\"handleInputBlur()\"\n (input)=\"handleInputChange($event)\"\n (keydown)=\"handleKeyDown($event)\"\n />\n\n @if (shouldShowClearButton()) {\n <cura-icon\n [size]=\"size() === 'large' || mode() === 'transparent' ? 20 : 16\"\n color=\"primary-base\"\n name=\"closeCircle\"\n iconset=\"default\"\n class=\"clear-button\"\n (click)=\"handleClearInput()\"\n >\n </cura-icon>\n }\n\n @if (isLoading()) {\n <cura-loader-circle [size]=\"size() === 'large' ? 'medium' : 'small'\" color=\"primary-base\"> </cura-loader-circle>\n }\n </div>\n\n @if (helperText()) {\n <div [style]=\"styles()\" class=\"helper-text\" part=\"cura-input-text-helper\">\n <cura-label size=\"xsmall\" lineHeight=\"xsmall\" [color]=\"helperText().color\">\n <ng-content></ng-content>\n </cura-label>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;box-sizing:border-box;width:100%}.required{color:var(--error-base)}.cura-input-group{width:100%;font-family:var(--font-family);text-align:left!important}.cura-input-group cura-label{margin-bottom:8px}.cura-input-group .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group .cura-input-field cura-loader-circle{margin:0 12px}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px;padding-top:6px}.cura-input-group .cura-input-field .clear-button{margin-right:12px;cursor:pointer}.cura-input-group .helper-text{margin-top:8px;color:var(--neutral-dark)}.cura-input-group.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success:not(.transparent) .cura-input-field{border:2px solid var(--success-dark)!important;background-color:var(--success-lighter)!important}.cura-input-group.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error:not(.transparent) .cura-input-field{border:2px solid var(--error-dark)!important;background-color:var(--error-lighter)!important}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group:focus-within:not(.selection) .cura-input-field{border:2px solid var(--info-base)!important;background-color:var(--neutral-purewhite);outline:none}.cura-input-group:focus-within:not(.selection) .cura-input-field input{color:var(--neutral-black)!important}.cura-input-group:focus-within.selection .cura-input-field{border-radius:var(--border-radius) var(--border-radius) 0px 0px}.cura-input-group.isLoading{cursor:wait}.cura-input-group.isLoading .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.isLoading .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.isLoading .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.isLoading .cura-input-field{background-color:var(--neutral-white)!important;border:2px solid var(--primary-base)!important}.cura-input-group.isLoading .cura-input-field input{cursor:wait;color:var(--primary-base)!important}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--primary-base)!important}.cura-input-group.readOnly[read-only] .cura-input-field,.cura-input-group.readOnly[read-only] .cura-input-field input{cursor:default}.cura-input-group.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.cura-input-group.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.cura-input-group.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.cura-input-group.disabled .cura-input-field input{color:var(--neutral-medium)}.cura-input-group.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.cura-input-group.transparent{background-color:transparent;padding:0;max-height:80px}.cura-input-group.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent .cura-input-field{background-color:transparent!important;border:none!important;border-radius:0;height:27px}.cura-input-group.transparent .cura-input-field input{color:var(--neutral-black)!important;font-size:16px;font-weight:var(--font-weight-bold)!important;padding:0}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.cura-input-group.transparent:focus-within .cura-input-field{border:none!important;background-color:transparent!important}.cura-input-group.transparent:focus-within .cura-input-field input{border:none!important;outline:none}.cura-input-group.transparent .helper-text{margin-top:0}.cura-input-group.transparent.transparent{display:flex;background-color:transparent;padding:0;justify-content:start;align-items:center;max-height:80px;gap:4px}.cura-input-group.transparent.transparent .input-wrapper{display:flex;width:100%;flex-direction:column;justify-content:start}.cura-input-group.transparent.transparent cura-label{margin-bottom:4px;--color-body: var(--neutral-dark) !important}.cura-input-group.transparent.transparent.error cura-label{--color-body: var(--neutral-black) !important}.cura-input-group.transparent.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.transparent.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent.transparent .cura-input-field{background-color:transparent!important;border:none!important;border-radius:var(--border-radius, 0)!important;height:27px;overflow:hidden}.cura-input-group.transparent.transparent .cura-input-field input{order:1;color:var(--neutral-black)!important;font-size:16px;font-weight:var(--font-weight-bold)!important;padding:0}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent.transparent .cura-input-field .clear-button{order:2;cursor:pointer;margin:0 20px 0 0;padding:0}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding:6px 0 0}.cura-input-group.transparent.transparent .cura-input-field cura-loader-circle{order:2;margin:0 20px 0 0}.cura-input-group.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field input{color:var(--error-darker)!important}.cura-input-group.error .cura-input-field input::placeholder{color:var(--error-darker)!important}.cura-input-group.error.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.cura-input-group.error.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.cura-input-group.error.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.error:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error:not(.transparent).large .cura-input-field{border:2px solid var(--error-dark)!important;background-color:var(--error-lighter)!important}.cura-input-group.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field input{color:var(--success-darker)!important}.cura-input-group.success .cura-input-field input::placeholder{color:var(--success-darker)!important}.cura-input-group.success.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.cura-input-group.success.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.cura-input-group.success.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.success:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success:not(.transparent).large .cura-input-field{border:2px solid var(--success-dark)!important;background-color:var(--success-lighter)!important}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"] }]
|
|
578
|
+
], template: "<div class=\"cura-input-group\" [ngClass]=\"classes()\" [style]=\"styles()\" (mouseenter)=\"handleMouseEnter()\" (mouseleave)=\"handleMouseLeave()\">\n <div class=\"input-wrapper\">\n @if (label()) {\n <cura-label class=\"label\" weight=\"bold\" [size]=\"size() === 'large' ? 'small' : 'xsmall'\" [color]=\"labelColor()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required\">*</span>\n }\n </cura-label>\n }\n\n <div class=\"cura-input-field\" [style]=\"styles()\">\n @if (iconConfig().icon) {\n <div class=\"feedback-icon\" [style]=\"styles()\">\n <cura-icon [name]=\"iconConfig().icon!.name\" iconset=\"default\" [size]=\"iconConfig().size\" [color]=\"iconConfig().icon!.color\"> </cura-icon>\n </div>\n }\n\n <input\n #inputElement\n [attr.id]=\"name() || null\"\n [attr.name]=\"name() || null\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled() || isLoading()\"\n [required]=\"required()\"\n [readonly]=\"readOnly()\"\n [attr.maxlength]=\"maxlength()\"\n [value]=\"value()\"\n [attr.inputmode]=\"maskPreset() ? 'tel' : inputMode()\"\n [autocomplete]=\"autocomplete()\"\n [ngClass]=\"classes()\"\n [style]=\"styles()\"\n (focus)=\"handleInputFocus()\"\n (blur)=\"handleInputBlur()\"\n (input)=\"handleInputChange($event)\"\n (keydown)=\"handleKeyDown($event)\"\n />\n\n @if (shouldShowClearButton()) {\n <cura-icon\n [size]=\"size() === 'large' || mode() === 'transparent' ? 20 : 16\"\n color=\"primary-base\"\n name=\"closeCircle\"\n iconset=\"default\"\n class=\"clear-button\"\n (click)=\"handleClearInput()\"\n >\n </cura-icon>\n }\n\n @if (isLoading()) {\n <cura-loader-circle [size]=\"size() === 'large' ? 'medium' : 'small'\" color=\"primary-base\"> </cura-loader-circle>\n }\n </div>\n\n @if (helperText()) {\n <div [style]=\"styles()\" class=\"helper-text\" part=\"cura-input-text-helper\">\n <cura-label size=\"xsmall\" lineHeight=\"xsmall\" [color]=\"helperText().color\">\n <ng-content></ng-content>\n </cura-label>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;box-sizing:border-box;width:100%}.required{color:var(--error-base)}.cura-input-group{width:100%;font-family:var(--font-family);text-align:left!important}.cura-input-group cura-label{margin-bottom:8px}.cura-input-group .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group .cura-input-field cura-loader-circle{margin:0 12px}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px;padding-top:6px}.cura-input-group .cura-input-field .clear-button{margin-right:12px;cursor:pointer}.cura-input-group .helper-text{margin-top:8px;color:var(--neutral-dark)}.cura-input-group.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark)!important;background-color:var(--success-lighter)!important}.cura-input-group.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark)!important;background-color:var(--error-lighter)!important}.cura-input-group.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group:focus-within:not(.selection) .cura-input-field{border:2px solid var(--info-base)!important;background-color:var(--neutral-purewhite);outline:none}.cura-input-group:focus-within:not(.selection) .cura-input-field input{color:var(--neutral-black)!important}.cura-input-group:focus-within.selection .cura-input-field{border-radius:var(--border-radius) var(--border-radius) 0px 0px}.cura-input-group.isLoading{cursor:wait}.cura-input-group.isLoading .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:var(--neutral-white)!important;border:2px solid var(--primary-base)!important}.cura-input-group.isLoading .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.isLoading .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.isLoading .cura-input-field input{cursor:wait;color:var(--primary-base)!important}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--primary-base)!important}.cura-input-group.readOnly[read-only] .cura-input-field,.cura-input-group.readOnly[read-only] .cura-input-field input{cursor:default}.cura-input-group.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.cura-input-group.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.cura-input-group.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.cura-input-group.disabled .cura-input-field input{color:var(--neutral-medium)}.cura-input-group.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.cura-input-group.transparent{background-color:transparent;padding:0;max-height:80px}.cura-input-group.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent!important;border:none!important;border-radius:0;height:27px}.cura-input-group.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent .cura-input-field input{color:var(--neutral-black)!important;font-size:16px;font-weight:var(--font-weight-bold)!important;padding:0}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.cura-input-group.transparent:focus-within .cura-input-field{border:none!important;background-color:transparent!important}.cura-input-group.transparent:focus-within .cura-input-field input{border:none!important;outline:none}.cura-input-group.transparent .helper-text{margin-top:0}.cura-input-group.transparent.transparent{display:flex;background-color:transparent;padding:0;justify-content:start;align-items:center;max-height:80px;gap:4px}.cura-input-group.transparent.transparent .input-wrapper{display:flex;width:100%;flex-direction:column;justify-content:start}.cura-input-group.transparent.transparent cura-label{margin-bottom:4px;--color-body: var(--neutral-dark) !important}.cura-input-group.transparent.transparent.error cura-label{--color-body: var(--neutral-black) !important}.cura-input-group.transparent.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;box-sizing:border-box;background-color:transparent!important;border:none!important;border-radius:var(--border-radius, 0)!important;height:27px;overflow:hidden}.cura-input-group.transparent.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent.transparent .cura-input-field input{order:1;color:var(--neutral-black)!important;font-size:16px;font-weight:var(--font-weight-bold)!important;padding:0}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent.transparent .cura-input-field .clear-button{order:2;cursor:pointer;margin:0 20px 0 0;padding:0}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding:6px 0 0}.cura-input-group.transparent.transparent .cura-input-field cura-loader-circle{order:2;margin:0 20px 0 0}.cura-input-group.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field input{color:var(--error-darker)!important}.cura-input-group.error .cura-input-field input::placeholder{color:var(--error-darker)!important}.cura-input-group.error.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.cura-input-group.error.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.cura-input-group.error.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.error:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark)!important;background-color:var(--error-lighter)!important}.cura-input-group.error:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.error:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field input{color:var(--success-darker)!important}.cura-input-group.success .cura-input-field input::placeholder{color:var(--success-darker)!important}.cura-input-group.success.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.cura-input-group.success.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.cura-input-group.success.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.success:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:var(--border-radius, 4px);color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark)!important;background-color:var(--success-lighter)!important}.cura-input-group.success:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0 12px 0 8px}.cura-input-group.success:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"] }]
|
|
579
579
|
}], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], maskPreset: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskPreset", required: false }] }], enableSelectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelectionMode", required: false }] }], maskRegex: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskRegex", required: false }] }], maskAdvanced: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskAdvanced", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], clearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIcon", required: false }] }], hideErrorIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideErrorIcon", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], inputClear: [{ type: i0.Output, args: ["inputClear"] }], inputElement: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }] } });
|
|
580
580
|
|
|
581
581
|
/**
|