@rededor/site-front-end-lib 4.0.0-alpha.5 → 20.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +124 -123
- package/components/footer/index.d.ts +2 -2
- package/components/header/components/action/index.d.ts +2 -2
- package/components/header/components/auxiliar/index.d.ts +6 -4
- package/components/header/components/main/index.d.ts +5 -3
- package/components/header/components/side/index.d.ts +13 -11
- package/components/modal/index.d.ts +2 -3
- package/components/modal-drawer/index.d.ts +1 -2
- package/cura/buttons/cura-button/index.d.ts +6 -1
- package/cura/buttons/cura-button-outline/index.d.ts +6 -1
- package/cura/buttons/cura-button-select/index.d.ts +6 -1
- package/cura/buttons/cura-button-transparent/index.d.ts +6 -1
- package/cura/cards/cura-card/index.d.ts +0 -1
- package/cura/forms/cura-select/index.d.ts +3 -0
- package/cura/forms/cura-select-option/index.d.ts +5 -0
- package/fesm2022/rededor-site-front-end-lib-components-banner.mjs +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-banner.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-cards.mjs +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-cards.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-error.mjs +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-error.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-filters-filter-planos-convenios.mjs +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-filters-filter-planos-convenios.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-footer.mjs +6 -5
- 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 +8 -5
- 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-auxiliar.mjs +12 -9
- package/fesm2022/rededor-site-front-end-lib-components-header-components-auxiliar.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-header-components-main.mjs +11 -8
- 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 +11 -8
- package/fesm2022/rededor-site-front-end-lib-components-header-components-side.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-modal-drawer.mjs +5 -5
- package/fesm2022/rededor-site-front-end-lib-components-modal-drawer.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-components-modal.mjs +5 -5
- package/fesm2022/rededor-site-front-end-lib-components-modal.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-buttons-cura-button-outline.mjs +7 -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 +7 -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 +7 -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 +7 -2
- package/fesm2022/rededor-site-front-end-lib-cura-buttons-cura-button.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-cards-cura-card.mjs +2 -7
- package/fesm2022/rededor-site-front-end-lib-cura-cards-cura-card.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-forms-cura-select-option.mjs +8 -1
- package/fesm2022/rededor-site-front-end-lib-cura-forms-cura-select-option.mjs.map +1 -1
- package/fesm2022/rededor-site-front-end-lib-cura-forms-cura-select.mjs +14 -3
- package/fesm2022/rededor-site-front-end-lib-cura-forms-cura-select.mjs.map +1 -1
- package/package.json +33 -33
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rededor-site-front-end-lib-cura-buttons-cura-button.mjs","sources":["../../../projects/site-front-end-lib/cura/buttons/cura-button/cura-button.component.ts","../../../projects/site-front-end-lib/cura/buttons/cura-button/cura-button.component.html","../../../projects/site-front-end-lib/cura/buttons/cura-button/rededor-site-front-end-lib-cura-buttons-cura-button.ts"],"sourcesContent":["import { Component, HostListener, input, output, inject, computed } from '@angular/core';\r\nimport { labelSizes, ButtonType, ButtonSize, IconPosition, BackgroundType, FontColor, TextAlign } from '@rededor/site-front-end-lib/cura/buttons';\r\nimport { CuraApiService } from '@rededor/site-front-end-lib/cura/api';\r\nimport { CommonModule } from '@angular/common';\r\nimport { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';\r\nimport { CuraLoaderCircleComponent } from '@rededor/site-front-end-lib/cura/loaders/cura-loader-circle';\r\nimport { CuraLabelComponent } from '@rededor/site-front-end-lib/cura/forms/cura-label';\r\nimport { LabelSize } from '@rededor/site-front-end-lib/cura/forms';\r\n\r\n@Component({\r\n selector: 'cura-button',\r\n imports: [CommonModule, CuraIconComponent, CuraLoaderCircleComponent, CuraLabelComponent],\r\n templateUrl: './cura-button.component.html',\r\n styleUrls: ['./cura-button.component.scss'],\r\n host: {\r\n '[attr.role]': 'href() ? \"link\" : type()',\r\n '[attr.aria-disabled]': 'disabled()',\r\n '[attr.href]': 'href()',\r\n },\r\n})\r\nexport class CuraButtonComponent {\r\n private curaApi: CuraApiService = inject(CuraApiService);\r\n\r\n /**\r\n * Button type: button (default) | submit | reset\r\n */\r\n type = input<ButtonType>('button');\r\n\r\n /**\r\n * Button size: small | medium | large (default)\r\n */\r\n size = input<ButtonSize>('large');\r\n\r\n /**\r\n * Disabled state. Boolean.\r\n */\r\n disabled = input<boolean>(false);\r\n\r\n /**\r\n * Loading state. Boolean.\r\n */\r\n isLoading = input<boolean>(false);\r\n\r\n /**\r\n * Name of the icon to be used from iconset.\r\n */\r\n iconName = input<string>('');\r\n\r\n /**\r\n * Custom iconset if needed.\r\n */\r\n iconset = input<string>('default');\r\n\r\n /**\r\n * Icon position: left (default) | right.\r\n */\r\n iconPosition = input<IconPosition>('left');\r\n\r\n /**\r\n * Set button to FAB/icon only.\r\n */\r\n iconOnly = input<boolean>(false);\r\n\r\n /**\r\n * Property href switch button to link.\r\n */\r\n href = input<string>('');\r\n\r\n /**\r\n * Set target if link.\r\n */\r\n target = input<string>('_self');\r\n\r\n /**\r\n * Color base from color scheme. Default: accent.\r\n */\r\n color = input<string>('accent');\r\n\r\n /**\r\n * Set the background color to dark or light.\r\n */\r\n background = input<BackgroundType>('light');\r\n\r\n /**\r\n * Set the font color to dark or light.\r\n */\r\n fontColor = input<FontColor>('dark');\r\n\r\n /**\r\n * Set text alignment for the button label.\r\n * Values: left (default) | center | right.\r\n */\r\n textAlign = input<TextAlign>('left');\r\n\r\n /**\r\n * Justify icons and label inside the button.\r\n * Values: false (default) | true.\r\n */\r\n justify = input<boolean>(false);\r\n\r\n buttonClick = output<Event>();\r\n\r\n hovered = false;\r\n\r\n // Computed signal\r\n buttonStyles = computed(() => {\r\n const styles: { [key: string]: string } = {};\r\n\r\n styles['--base-spacing'] = this.curaApi.theme.spacing.getSpacing();\r\n styles['--font-size'] = this.curaApi.theme.fonts.getSize();\r\n styles['--font-family'] = this.curaApi.theme.fonts.getFamily();\r\n const weights = this.curaApi.theme.fonts.getWeights();\r\n styles['--font-weight-medium'] = weights.medium;\r\n styles['--text-align'] = this.textAlign();\r\n\r\n const colorMappings = [\r\n { name: '--color-base-neutral-purewhite', theme: this.background() === 'light' ? `${this.color()}-base` : 'neutral-pale' },\r\n { name: '--color-base-color-light', theme: this.background() === 'light' ? `${this.color()}-base` : `${this.color()}-lighter` },\r\n { name: '--color-dark-color-light', theme: this.background() === 'light' ? `${this.color()}-dark` : `${this.color()}-light` },\r\n { name: '--color-dark-color-base', theme: this.background() === 'light' ? `${this.color()}-dark` : `${this.color()}-base` },\r\n { name: '--neutral-pale-neutral-black', theme: this.background() === 'light' ? 'neutral-pale' : 'neutral-black' },\r\n ];\r\n\r\n colorMappings.forEach((mapping) => {\r\n styles[mapping.name] = this.curaApi.theme.colors.getColor(mapping.theme);\r\n });\r\n\r\n return styles;\r\n });\r\n\r\n containerClasses = computed(() => {\r\n const classes = [];\r\n classes.push(this.size()?.toLowerCase());\r\n classes.push(`icon-${this.iconPosition()?.toLowerCase()}`);\r\n\r\n if (this.iconOnly()) classes.push('icon-only');\r\n if (this.disabled()) classes.push('disabled');\r\n if (this.isLoading()) classes.push('isLoading');\r\n if (this.justify()) classes.push('justify');\r\n\r\n return classes.join(' ');\r\n });\r\n\r\n iconSize = computed(() => {\r\n return this.size() === 'large' ? '20' : '16';\r\n });\r\n\r\n symbolColor = computed(() => {\r\n if (this.isLoading() && this.fontColor() === 'light') return 'neutral-white';\r\n if (this.isLoading() && this.fontColor() === 'dark') return 'neutral-black';\r\n\r\n return this.disabled() ? 'neutral-dark' : this.fontColor() === 'light' ? 'neutral-white' : 'neutral-black';\r\n });\r\n\r\n labelSize = computed(() => {\r\n return (labelSizes[this.size()] || labelSizes['default']) as LabelSize;\r\n });\r\n\r\n @HostListener('mouseenter')\r\n handleMouseEnter() {\r\n if (this.disabled()) return;\r\n this.hovered = true;\r\n }\r\n\r\n @HostListener('mouseleave')\r\n handleMouseLeave() {\r\n this.hovered = false;\r\n }\r\n\r\n handleClick(event: Event) {\r\n if (this.disabled() || this.isLoading()) {\r\n event.preventDefault();\r\n return;\r\n }\r\n\r\n this.buttonClick.emit(event);\r\n }\r\n}\r\n","<ng-template #button>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n\r\n@if (href()) {\r\n <a\r\n [href]=\"disabled() ? '' : href()\"\r\n [target]=\"target()\"\r\n [class]=\"containerClasses()\"\r\n [ngStyle]=\"buttonStyles()\"\r\n (click)=\"handleClick($event)\"\r\n (mouseenter)=\"handleMouseEnter()\"\r\n (mouseleave)=\"handleMouseLeave()\"\r\n >\r\n <span class=\"button-container\">\r\n @if (iconName()) {\r\n <cura-icon [name]=\"iconName()\" [size]=\"iconSize()\" [color]=\"symbolColor()\" [iconset]=\"iconset()\" [disabled]=\"disabled()\"> </cura-icon>\r\n }\r\n <cura-label class=\"label\" [size]=\"labelSize()\" lineHeight=\"normal\" [color]=\"symbolColor()\">\r\n <ng-container *ngTemplateOutlet=\"button\"></ng-container>\r\n </cura-label>\r\n </span>\r\n <cura-loader-circle [size]=\"size()\" [color]=\"symbolColor()\"> </cura-loader-circle>\r\n </a>\r\n} @else {\r\n <button\r\n [type]=\"type()\"\r\n [class]=\"containerClasses()\"\r\n [ngStyle]=\"buttonStyles()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"handleClick($event)\"\r\n (mouseenter)=\"handleMouseEnter()\"\r\n (mouseleave)=\"handleMouseLeave()\"\r\n >\r\n <span class=\"button-container\">\r\n @if (iconName()) {\r\n <cura-icon [name]=\"iconName()\" [size]=\"iconSize()\" [color]=\"symbolColor()\" [iconset]=\"iconset()\" [disabled]=\"disabled()\"> </cura-icon>\r\n }\r\n <cura-label class=\"label\" [size]=\"labelSize()\" lineHeight=\"normal\" [color]=\"symbolColor()\">\r\n <ng-container *ngTemplateOutlet=\"button\"></ng-container>\r\n </cura-label>\r\n </span>\r\n <cura-loader-circle [size]=\"size()\" [color]=\"symbolColor()\"> </cura-loader-circle>\r\n </button>\r\n}\r\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-buttons-cura-button.mjs","sources":["../../../projects/site-front-end-lib/cura/buttons/cura-button/cura-button.component.ts","../../../projects/site-front-end-lib/cura/buttons/cura-button/cura-button.component.html","../../../projects/site-front-end-lib/cura/buttons/cura-button/rededor-site-front-end-lib-cura-buttons-cura-button.ts"],"sourcesContent":["import { Component, HostListener, input, output, inject, computed } from '@angular/core';\nimport { labelSizes, ButtonType, ButtonSize, IconPosition, BackgroundType, FontColor, TextAlign } from '@rededor/site-front-end-lib/cura/buttons';\nimport { CuraApiService } from '@rededor/site-front-end-lib/cura/api';\nimport { CommonModule } from '@angular/common';\nimport { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';\nimport { CuraLoaderCircleComponent } from '@rededor/site-front-end-lib/cura/loaders/cura-loader-circle';\nimport { CuraLabelComponent } from '@rededor/site-front-end-lib/cura/forms/cura-label';\nimport { LabelSize } from '@rededor/site-front-end-lib/cura/forms';\n\n@Component({\n selector: 'cura-button',\n imports: [CommonModule, CuraIconComponent, CuraLoaderCircleComponent, CuraLabelComponent],\n templateUrl: './cura-button.component.html',\n styleUrls: ['./cura-button.component.scss'],\n host: {\n '[attr.role]': 'href() ? \"link\" : type()',\n '[attr.aria-disabled]': 'disabled()',\n '[attr.href]': 'href()',\n },\n})\nexport class CuraButtonComponent {\n private curaApi: CuraApiService = inject(CuraApiService);\n\n /**\n * Button type: button (default) | submit | reset\n */\n type = input<ButtonType>('button');\n\n /**\n * Button size: small | medium | large (default)\n */\n size = input<ButtonSize>('large');\n\n /**\n * Disabled state. Boolean.\n */\n disabled = input<boolean>(false);\n\n /**\n * Loading state. Boolean.\n */\n isLoading = input<boolean>(false);\n\n /**\n * Name of the icon to be used from iconset.\n */\n iconName = input<string>('');\n\n /**\n * Custom iconset if needed.\n */\n iconset = input<string>('default');\n\n /**\n * Icon position: left (default) | right.\n */\n iconPosition = input<IconPosition>('left');\n\n /**\n * Set button to FAB/icon only.\n */\n iconOnly = input<boolean>(false);\n\n /**\n * Property href switch button to link.\n */\n href = input<string>('');\n\n /**\n * Set target if link.\n */\n target = input<string>('_self');\n\n /**\n * Color base from color scheme. Default: accent.\n */\n color = input<string>('accent');\n\n /**\n * Set the background color to dark or light.\n */\n background = input<BackgroundType>('light');\n\n /**\n * Set the font color to dark or light.\n */\n fontColor = input<FontColor>('dark');\n\n /**\n * Set text alignment for the button label.\n * Values: left (default) | center | right.\n */\n textAlign = input<TextAlign>('left');\n\n /**\n * Justify icons and label inside the button.\n * Values: false (default) | true.\n */\n justify = input<boolean>(false);\n\n /**\n * Accessible name for the button (aria-label).\n * Required for icon-only buttons or when button text is not descriptive enough.\n */\n ariaLabel = input<string>('');\n\n buttonClick = output<Event>();\n\n hovered = false;\n\n // Computed signal\n buttonStyles = computed(() => {\n const styles: { [key: string]: string } = {};\n\n styles['--base-spacing'] = this.curaApi.theme.spacing.getSpacing();\n styles['--font-size'] = this.curaApi.theme.fonts.getSize();\n styles['--font-family'] = this.curaApi.theme.fonts.getFamily();\n const weights = this.curaApi.theme.fonts.getWeights();\n styles['--font-weight-medium'] = weights.medium;\n styles['--text-align'] = this.textAlign();\n\n const colorMappings = [\n { name: '--color-base-neutral-purewhite', theme: this.background() === 'light' ? `${this.color()}-base` : 'neutral-pale' },\n { name: '--color-base-color-light', theme: this.background() === 'light' ? `${this.color()}-base` : `${this.color()}-lighter` },\n { name: '--color-dark-color-light', theme: this.background() === 'light' ? `${this.color()}-dark` : `${this.color()}-light` },\n { name: '--color-dark-color-base', theme: this.background() === 'light' ? `${this.color()}-dark` : `${this.color()}-base` },\n { name: '--neutral-pale-neutral-black', theme: this.background() === 'light' ? 'neutral-pale' : 'neutral-black' },\n ];\n\n colorMappings.forEach((mapping) => {\n styles[mapping.name] = this.curaApi.theme.colors.getColor(mapping.theme);\n });\n\n return styles;\n });\n\n containerClasses = computed(() => {\n const classes = [];\n classes.push(this.size()?.toLowerCase());\n classes.push(`icon-${this.iconPosition()?.toLowerCase()}`);\n\n if (this.iconOnly()) classes.push('icon-only');\n if (this.disabled()) classes.push('disabled');\n if (this.isLoading()) classes.push('isLoading');\n if (this.justify()) classes.push('justify');\n\n return classes.join(' ');\n });\n\n iconSize = computed(() => {\n return this.size() === 'large' ? '20' : '16';\n });\n\n symbolColor = computed(() => {\n if (this.isLoading() && this.fontColor() === 'light') return 'neutral-white';\n if (this.isLoading() && this.fontColor() === 'dark') return 'neutral-black';\n\n return this.disabled() ? 'neutral-dark' : this.fontColor() === 'light' ? 'neutral-white' : 'neutral-black';\n });\n\n labelSize = computed(() => {\n return (labelSizes[this.size()] || labelSizes['default']) as LabelSize;\n });\n\n @HostListener('mouseenter')\n handleMouseEnter() {\n if (this.disabled()) return;\n this.hovered = true;\n }\n\n @HostListener('mouseleave')\n handleMouseLeave() {\n this.hovered = false;\n }\n\n handleClick(event: Event) {\n if (this.disabled() || this.isLoading()) {\n event.preventDefault();\n return;\n }\n\n this.buttonClick.emit(event);\n }\n}\n","<ng-template #button>\n <ng-content></ng-content>\n</ng-template>\n\n@if (href()) {\n <a\n [href]=\"disabled() ? '' : href()\"\n [target]=\"target()\"\n [class]=\"containerClasses()\"\n [ngStyle]=\"buttonStyles()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"handleClick($event)\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n >\n <span class=\"button-container\">\n @if (iconName()) {\n <cura-icon [name]=\"iconName()\" [size]=\"iconSize()\" [color]=\"symbolColor()\" [iconset]=\"iconset()\" [disabled]=\"disabled()\"> </cura-icon>\n }\n <cura-label class=\"label\" [size]=\"labelSize()\" lineHeight=\"normal\" [color]=\"symbolColor()\">\n <ng-container *ngTemplateOutlet=\"button\"></ng-container>\n </cura-label>\n </span>\n <cura-loader-circle [size]=\"size()\" [color]=\"symbolColor()\"> </cura-loader-circle>\n </a>\n} @else {\n <button\n [type]=\"type()\"\n [class]=\"containerClasses()\"\n [ngStyle]=\"buttonStyles()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"handleClick($event)\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n >\n <span class=\"button-container\">\n @if (iconName()) {\n <cura-icon [name]=\"iconName()\" [size]=\"iconSize()\" [color]=\"symbolColor()\" [iconset]=\"iconset()\" [disabled]=\"disabled()\"> </cura-icon>\n }\n <cura-label class=\"label\" [size]=\"labelSize()\" lineHeight=\"normal\" [color]=\"symbolColor()\">\n <ng-container *ngTemplateOutlet=\"button\"></ng-container>\n </cura-label>\n </span>\n <cura-loader-circle [size]=\"size()\" [color]=\"symbolColor()\"> </cura-loader-circle>\n </button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -57,9 +57,6 @@ class CuraCardComponent {
|
|
|
57
57
|
this.isLink = computed(() => {
|
|
58
58
|
return !!this.href();
|
|
59
59
|
}, ...(ngDevMode ? [{ debugName: "isLink" }] : []));
|
|
60
|
-
this.hostRole = computed(() => {
|
|
61
|
-
return this.isLink() ? 'link' : 'div';
|
|
62
|
-
}, ...(ngDevMode ? [{ debugName: "hostRole" }] : []));
|
|
63
60
|
// Computed signal
|
|
64
61
|
this.cardStyles = computed(() => {
|
|
65
62
|
const styles = {};
|
|
@@ -79,13 +76,11 @@ class CuraCardComponent {
|
|
|
79
76
|
}, ...(ngDevMode ? [{ debugName: "cardStyles" }] : []));
|
|
80
77
|
}
|
|
81
78
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CuraCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
82
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: CuraCardComponent, isStandalone: true, selector: "cura-card", inputs: { hasPadding: { classPropertyName: "hasPadding", publicName: "hasPadding", isSignal: true, isRequired: false, transformFunction: null }, hasShadow: { classPropertyName: "hasShadow", publicName: "hasShadow", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, colorMode: { classPropertyName: "colorMode", publicName: "colorMode", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } },
|
|
79
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: CuraCardComponent, isStandalone: true, selector: "cura-card", inputs: { hasPadding: { classPropertyName: "hasPadding", publicName: "hasPadding", isSignal: true, isRequired: false, transformFunction: null }, hasShadow: { classPropertyName: "hasShadow", publicName: "hasShadow", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, colorMode: { classPropertyName: "colorMode", publicName: "colorMode", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isLink()) {\r\n <a [class]=\"containerClasses()\" [ngStyle]=\"cardStyles()\" [target]=\"target()\" [href]=\"href()\">\r\n <ng-content></ng-content>\r\n </a>\r\n} @else {\r\n <div [class]=\"containerClasses()\" [ngStyle]=\"cardStyles()\">\r\n <ng-content></ng-content>\r\n </div>\r\n}\r\n", styles: [":host{display:block;box-sizing:border-box;font-size:var(--font-size);font-family:var(--font-family)}:host a::ng-deep>*,:host div::ng-deep>*{display:flex;align-items:center;justify-content:center;font-size:var(--font-size);font-family:var(--font-family)}a{display:block;text-decoration:none!important;color:inherit}.solid{background-color:var(--neutral-purewhite);border:2px solid var(--neutral-base);border-radius:12px;overflow:hidden;padding:0;box-shadow:none}.solid ::ng-deep>*{border-radius:0}.solid.hasPadding{padding:20px}.solid.hasPadding ::ng-deep>*{border-radius:4px!important}.solid.hasShadow{border:2px solid var(--neutral-base);box-shadow:0 1px 4px 0 var(--neutral-black-shadow, rgba(38, 38, 38, .16))}.solid.cardLink{background-color:var(--neutral-purewhite);border:2px solid var(--primary-base);border-radius:12px;padding:0;box-shadow:none;cursor:pointer}.solid.cardLink ::ng-deep>*{border-radius:0}.solid.cardLink:hover{border:2px solid var(--primary-lighter)!important}.solid.cardLink.hasPadding{padding:20px}.solid.cardLink.hasPadding ::ng-deep>*{border-radius:4px!important}.solid.cardLink.hasPadding:hover{border:2px solid var(--primary-lighter)!important}.solid.cardLink.hasShadow{border:2px solid var(--primary-base);box-shadow:0 4px 8px 0 var(--neutral-black-shadow, rgba(38, 38, 38, .16))}.solid.cardLink:not(.hasPadding).hasShadow ::ng-deep>*{border-radius:12px!important}.solid.cardLink.dark{background-color:var(--neutral-purewhite);border:2px solid var(--neutral-purewhite)}.solid.cardLink.dark:hover{border:2px solid var(--primary-lighter)}.transparent{background-color:transparent;border:0;border-radius:12px;padding:0;overflow:hidden}.transparent ::ng-deep>*{border-radius:12px}.transparent.hasPadding{padding:20px}.transparent.hasPadding ::ng-deep>*{border-radius:4px}.transparent.cardLink{background-color:transparent;border:2px solid var(--primary-base);overflow:hidden;border-radius:12px;padding:0;box-shadow:none}.transparent.cardLink ::ng-deep>*{border-radius:0!important}.transparent.cardLink:hover{border:2px solid var(--primary-lighter)!important}.transparent.cardLink.light{background-color:var(--neutral-purewhite);border:2px solid var(--primary-base)}.transparent.cardLink.light ::ng-deep>*{border-radius:12px!important}.transparent.cardLink.light:hover{border-color:var(--primary-lighter)!important}.transparent.cardLink.dark{background-color:transparent;border:2px solid var(--neutral-purewhite)}.transparent.cardLink.dark:hover{border:0}.transparent.cardLink.hasPadding{padding:20px}.transparent.cardLink.hasPadding ::ng-deep>*{border-radius:4px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
83
80
|
}
|
|
84
81
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CuraCardComponent, decorators: [{
|
|
85
82
|
type: Component,
|
|
86
|
-
args: [{ selector: 'cura-card', imports: [CommonModule], host: {
|
|
87
|
-
'[attr.role]': 'hostRole()',
|
|
88
|
-
}, template: "@if (isLink()) {\r\n <a [class]=\"containerClasses()\" [ngStyle]=\"cardStyles()\" [target]=\"target()\" [href]=\"href()\">\r\n <ng-content></ng-content>\r\n </a>\r\n} @else {\r\n <div [class]=\"containerClasses()\" [ngStyle]=\"cardStyles()\">\r\n <ng-content></ng-content>\r\n </div>\r\n}\r\n", styles: [":host{display:block;box-sizing:border-box;font-size:var(--font-size);font-family:var(--font-family)}:host a::ng-deep>*,:host div::ng-deep>*{display:flex;align-items:center;justify-content:center;font-size:var(--font-size);font-family:var(--font-family)}a{display:block;text-decoration:none!important;color:inherit}.solid{background-color:var(--neutral-purewhite);border:2px solid var(--neutral-base);border-radius:12px;overflow:hidden;padding:0;box-shadow:none}.solid ::ng-deep>*{border-radius:0}.solid.hasPadding{padding:20px}.solid.hasPadding ::ng-deep>*{border-radius:4px!important}.solid.hasShadow{border:2px solid var(--neutral-base);box-shadow:0 1px 4px 0 var(--neutral-black-shadow, rgba(38, 38, 38, .16))}.solid.cardLink{background-color:var(--neutral-purewhite);border:2px solid var(--primary-base);border-radius:12px;padding:0;box-shadow:none;cursor:pointer}.solid.cardLink ::ng-deep>*{border-radius:0}.solid.cardLink:hover{border:2px solid var(--primary-lighter)!important}.solid.cardLink.hasPadding{padding:20px}.solid.cardLink.hasPadding ::ng-deep>*{border-radius:4px!important}.solid.cardLink.hasPadding:hover{border:2px solid var(--primary-lighter)!important}.solid.cardLink.hasShadow{border:2px solid var(--primary-base);box-shadow:0 4px 8px 0 var(--neutral-black-shadow, rgba(38, 38, 38, .16))}.solid.cardLink:not(.hasPadding).hasShadow ::ng-deep>*{border-radius:12px!important}.solid.cardLink.dark{background-color:var(--neutral-purewhite);border:2px solid var(--neutral-purewhite)}.solid.cardLink.dark:hover{border:2px solid var(--primary-lighter)}.transparent{background-color:transparent;border:0;border-radius:12px;padding:0;overflow:hidden}.transparent ::ng-deep>*{border-radius:12px}.transparent.hasPadding{padding:20px}.transparent.hasPadding ::ng-deep>*{border-radius:4px}.transparent.cardLink{background-color:transparent;border:2px solid var(--primary-base);overflow:hidden;border-radius:12px;padding:0;box-shadow:none}.transparent.cardLink ::ng-deep>*{border-radius:0!important}.transparent.cardLink:hover{border:2px solid var(--primary-lighter)!important}.transparent.cardLink.light{background-color:var(--neutral-purewhite);border:2px solid var(--primary-base)}.transparent.cardLink.light ::ng-deep>*{border-radius:12px!important}.transparent.cardLink.light:hover{border-color:var(--primary-lighter)!important}.transparent.cardLink.dark{background-color:transparent;border:2px solid var(--neutral-purewhite)}.transparent.cardLink.dark:hover{border:0}.transparent.cardLink.hasPadding{padding:20px}.transparent.cardLink.hasPadding ::ng-deep>*{border-radius:4px!important}\n"] }]
|
|
83
|
+
args: [{ selector: 'cura-card', imports: [CommonModule], template: "@if (isLink()) {\r\n <a [class]=\"containerClasses()\" [ngStyle]=\"cardStyles()\" [target]=\"target()\" [href]=\"href()\">\r\n <ng-content></ng-content>\r\n </a>\r\n} @else {\r\n <div [class]=\"containerClasses()\" [ngStyle]=\"cardStyles()\">\r\n <ng-content></ng-content>\r\n </div>\r\n}\r\n", styles: [":host{display:block;box-sizing:border-box;font-size:var(--font-size);font-family:var(--font-family)}:host a::ng-deep>*,:host div::ng-deep>*{display:flex;align-items:center;justify-content:center;font-size:var(--font-size);font-family:var(--font-family)}a{display:block;text-decoration:none!important;color:inherit}.solid{background-color:var(--neutral-purewhite);border:2px solid var(--neutral-base);border-radius:12px;overflow:hidden;padding:0;box-shadow:none}.solid ::ng-deep>*{border-radius:0}.solid.hasPadding{padding:20px}.solid.hasPadding ::ng-deep>*{border-radius:4px!important}.solid.hasShadow{border:2px solid var(--neutral-base);box-shadow:0 1px 4px 0 var(--neutral-black-shadow, rgba(38, 38, 38, .16))}.solid.cardLink{background-color:var(--neutral-purewhite);border:2px solid var(--primary-base);border-radius:12px;padding:0;box-shadow:none;cursor:pointer}.solid.cardLink ::ng-deep>*{border-radius:0}.solid.cardLink:hover{border:2px solid var(--primary-lighter)!important}.solid.cardLink.hasPadding{padding:20px}.solid.cardLink.hasPadding ::ng-deep>*{border-radius:4px!important}.solid.cardLink.hasPadding:hover{border:2px solid var(--primary-lighter)!important}.solid.cardLink.hasShadow{border:2px solid var(--primary-base);box-shadow:0 4px 8px 0 var(--neutral-black-shadow, rgba(38, 38, 38, .16))}.solid.cardLink:not(.hasPadding).hasShadow ::ng-deep>*{border-radius:12px!important}.solid.cardLink.dark{background-color:var(--neutral-purewhite);border:2px solid var(--neutral-purewhite)}.solid.cardLink.dark:hover{border:2px solid var(--primary-lighter)}.transparent{background-color:transparent;border:0;border-radius:12px;padding:0;overflow:hidden}.transparent ::ng-deep>*{border-radius:12px}.transparent.hasPadding{padding:20px}.transparent.hasPadding ::ng-deep>*{border-radius:4px}.transparent.cardLink{background-color:transparent;border:2px solid var(--primary-base);overflow:hidden;border-radius:12px;padding:0;box-shadow:none}.transparent.cardLink ::ng-deep>*{border-radius:0!important}.transparent.cardLink:hover{border:2px solid var(--primary-lighter)!important}.transparent.cardLink.light{background-color:var(--neutral-purewhite);border:2px solid var(--primary-base)}.transparent.cardLink.light ::ng-deep>*{border-radius:12px!important}.transparent.cardLink.light:hover{border-color:var(--primary-lighter)!important}.transparent.cardLink.dark{background-color:transparent;border:2px solid var(--neutral-purewhite)}.transparent.cardLink.dark:hover{border:0}.transparent.cardLink.hasPadding{padding:20px}.transparent.cardLink.hasPadding ::ng-deep>*{border-radius:4px!important}\n"] }]
|
|
89
84
|
}] });
|
|
90
85
|
|
|
91
86
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rededor-site-front-end-lib-cura-cards-cura-card.mjs","sources":["../../../projects/site-front-end-lib/cura/cards/cura-card/cura-card.component.ts","../../../projects/site-front-end-lib/cura/cards/cura-card/cura-card.component.html","../../../projects/site-front-end-lib/cura/cards/cura-card/rededor-site-front-end-lib-cura-cards-cura-card.ts"],"sourcesContent":["import { Component, inject, input, computed } from '@angular/core';\
|
|
1
|
+
{"version":3,"file":"rededor-site-front-end-lib-cura-cards-cura-card.mjs","sources":["../../../projects/site-front-end-lib/cura/cards/cura-card/cura-card.component.ts","../../../projects/site-front-end-lib/cura/cards/cura-card/cura-card.component.html","../../../projects/site-front-end-lib/cura/cards/cura-card/rededor-site-front-end-lib-cura-cards-cura-card.ts"],"sourcesContent":["import { Component, inject, input, computed } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { CuraApiService } from '@rededor/site-front-end-lib/cura/api';\nimport { CardType, CardColorMode, CardTarget } from './cura-cards.definitions';\n\n@Component({\n selector: 'cura-card',\n imports: [CommonModule],\n templateUrl: './cura-card.component.html',\n styleUrls: ['./cura-card.component.scss'],\n})\nexport class CuraCardComponent {\n private curaApi = inject(CuraApiService);\n\n /**\n * Determines whether the card should have padding.\n * @default true\n */\n hasPadding = input<boolean>(true);\n\n /**\n * Determines whether the card should have a shadow effect.\n * @default false\n */\n hasShadow = input<boolean>(false);\n\n /**\n * Sets the type of the card background.\n * - 'solid': A solid background.\n * - 'transparent': A transparent background.\n * @default 'solid'\n */\n type = input<CardType>('solid');\n\n /**\n * Sets the color mode of the card.\n * - 'light': Light mode for the card.\n * - 'dark': Dark mode for the card.\n * @default 'light'\n */\n colorMode = input<CardColorMode>('light');\n\n /**\n * The URL that the card should link to (if set).\n * If not set, the card acts as a normal card.\n */\n href = input<string>('');\n\n /**\n * The target attribute for the link.\n * Applicable only if `href` is set.\n * @default '_self'\n */\n target = input<CardTarget>('_self');\n\n containerClasses = computed(() => {\n const classes = [];\n\n classes.push(this.type());\n classes.push(this.colorMode());\n\n if (this.href()) classes.push('cardLink');\n if (this.hasPadding()) classes.push('hasPadding');\n if (this.hasShadow()) classes.push('hasShadow');\n\n return classes.join(' ');\n });\n\n isLink = computed(() => {\n return !!this.href();\n });\n\n // Computed signal\n cardStyles = computed(() => {\n const styles: { [key: string]: string } = {};\n\n styles['--base-spacing'] = this.curaApi.theme.spacing.getSpacing();\n styles['--neutral-purewhite'] = this.curaApi.theme.colors.getColor('neutral-purewhite');\n styles['--neutral-white'] = this.curaApi.theme.colors.getColor('neutral-white');\n styles['--neutral-base'] = this.curaApi.theme.colors.getColor('neutral-base');\n styles['--neutral-dark'] = this.curaApi.theme.colors.getColor('neutral-dark');\n styles['--neutral-black'] = this.curaApi.theme.colors.getColor('neutral-black');\n styles['--neutral-black-shadow'] = this.curaApi.theme.colors.getColor('neutral-black', 0.16);\n styles['--primary-lighter'] = this.curaApi.theme.colors.getColor('primary-lighter');\n styles['--primary-base'] = this.curaApi.theme.colors.getColor('primary-base');\n styles['--font-size'] = this.curaApi.theme.fonts.getSize();\n styles['--font-family'] = this.curaApi.theme.fonts.getFamily();\n styles['--font-weight-medium'] = this.curaApi.theme.fonts.getWeights().medium;\n\n return styles;\n });\n}\n","@if (isLink()) {\r\n <a [class]=\"containerClasses()\" [ngStyle]=\"cardStyles()\" [target]=\"target()\" [href]=\"href()\">\r\n <ng-content></ng-content>\r\n </a>\r\n} @else {\r\n <div [class]=\"containerClasses()\" [ngStyle]=\"cardStyles()\">\r\n <ng-content></ng-content>\r\n </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -29,7 +29,12 @@ class CuraSelectOptionComponent {
|
|
|
29
29
|
* Whether the option is visible (for search filtering)
|
|
30
30
|
*/
|
|
31
31
|
this.visible = model(true, ...(ngDevMode ? [{ debugName: "visible" }] : []));
|
|
32
|
+
/**
|
|
33
|
+
* Unique ID for the option (for accessibility)
|
|
34
|
+
*/
|
|
35
|
+
this.componentId = `cura-select-option-${Math.random().toString(36).substring(2, 8)}`;
|
|
32
36
|
// Computed signals
|
|
37
|
+
this.optionId = computed(() => this.componentId, ...(ngDevMode ? [{ debugName: "optionId" }] : []));
|
|
33
38
|
this.internalSize = computed(() => {
|
|
34
39
|
const sizeMap = {
|
|
35
40
|
large: { label: 'medium', icon: 20 },
|
|
@@ -64,13 +69,15 @@ class CuraSelectOptionComponent {
|
|
|
64
69
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
65
70
|
}
|
|
66
71
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CuraSelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
67
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: CuraSelectOptionComponent, isStandalone: true, selector: "cura-select-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", active: "activeChange", size: "sizeChange", visible: "visibleChange" }, host: { attributes: { "role": "option" }, properties: { "attr.aria-selected": "selected()" } }, ngImport: i0, template: "<div [class]=\"classes()\" [style]=\"styles()\" [hidden]=\"!visible()\">\r\n <cura-label [color]=\"selected() ? 'primary-base' : 'neutral-black'\" [size]=\"internalSize().label\" marginBlock=\"0\">\r\n <ng-content></ng-content>\r\n </cura-label>\r\n\r\n @if (selected()) {\r\n <cura-icon name=\"check\" [size]=\"internalSize().icon\" color=\"primary-base\"> </cura-icon>\r\n }\r\n</div>\r\n", styles: [":host{display:block}.item{display:flex;padding:12px 8px;cursor:pointer;justify-content:space-between;align-items:center;box-sizing:border-box;background:var(--neutral-purewhite)}.item.selected{background-color:var(--primary-lighter-50);border-bottom:1px solid var(--primary-light)}.item:hover:not(.selected){background:var(--neutral-white);border-bottom:1px solid var(--neutral-light)}.item.active{background:var(--neutral-white)!important;border-bottom:1px solid var(--neutral-light)}.item.selected.active{background-color:var(--primary-lighter-50)!important;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] }); }
|
|
72
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: CuraSelectOptionComponent, isStandalone: true, selector: "cura-select-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", active: "activeChange", size: "sizeChange", visible: "visibleChange" }, host: { attributes: { "role": "option" }, properties: { "attr.aria-selected": "selected()", "attr.id": "optionId()", "attr.aria-disabled": "false" } }, ngImport: i0, template: "<div [class]=\"classes()\" [style]=\"styles()\" [hidden]=\"!visible()\">\r\n <cura-label [color]=\"selected() ? 'primary-base' : 'neutral-black'\" [size]=\"internalSize().label\" marginBlock=\"0\">\r\n <ng-content></ng-content>\r\n </cura-label>\r\n\r\n @if (selected()) {\r\n <cura-icon name=\"check\" [size]=\"internalSize().icon\" color=\"primary-base\"> </cura-icon>\r\n }\r\n</div>\r\n", styles: [":host{display:block}.item{display:flex;padding:12px 8px;cursor:pointer;justify-content:space-between;align-items:center;box-sizing:border-box;background:var(--neutral-purewhite)}.item.selected{background-color:var(--primary-lighter-50);border-bottom:1px solid var(--primary-light)}.item:hover:not(.selected){background:var(--neutral-white);border-bottom:1px solid var(--neutral-light)}.item.active{background:var(--neutral-white)!important;border-bottom:1px solid var(--neutral-light)}.item.selected.active{background-color:var(--primary-lighter-50)!important;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] }); }
|
|
68
73
|
}
|
|
69
74
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CuraSelectOptionComponent, decorators: [{
|
|
70
75
|
type: Component,
|
|
71
76
|
args: [{ selector: 'cura-select-option', imports: [CommonModule, CuraLabelComponent, CuraIconComponent], host: {
|
|
72
77
|
role: 'option',
|
|
73
78
|
'[attr.aria-selected]': 'selected()',
|
|
79
|
+
'[attr.id]': 'optionId()',
|
|
80
|
+
'[attr.aria-disabled]': 'false',
|
|
74
81
|
}, template: "<div [class]=\"classes()\" [style]=\"styles()\" [hidden]=\"!visible()\">\r\n <cura-label [color]=\"selected() ? 'primary-base' : 'neutral-black'\" [size]=\"internalSize().label\" marginBlock=\"0\">\r\n <ng-content></ng-content>\r\n </cura-label>\r\n\r\n @if (selected()) {\r\n <cura-icon name=\"check\" [size]=\"internalSize().icon\" color=\"primary-base\"> </cura-icon>\r\n }\r\n</div>\r\n", styles: [":host{display:block}.item{display:flex;padding:12px 8px;cursor:pointer;justify-content:space-between;align-items:center;box-sizing:border-box;background:var(--neutral-purewhite)}.item.selected{background-color:var(--primary-lighter-50);border-bottom:1px solid var(--primary-light)}.item:hover:not(.selected){background:var(--neutral-white);border-bottom:1px solid var(--neutral-light)}.item.active{background:var(--neutral-white)!important;border-bottom:1px solid var(--neutral-light)}.item.selected.active{background-color:var(--primary-lighter-50)!important;box-shadow:none}\n"] }]
|
|
75
82
|
}] });
|
|
76
83
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rededor-site-front-end-lib-cura-forms-cura-select-option.mjs","sources":["../../../projects/site-front-end-lib/cura/forms/cura-select-option/cura-select-option.component.ts","../../../projects/site-front-end-lib/cura/forms/cura-select-option/cura-select-option.component.html","../../../projects/site-front-end-lib/cura/forms/cura-select-option/rededor-site-front-end-lib-cura-forms-cura-select-option.ts"],"sourcesContent":["import { Component, input, computed, inject, model, ElementRef } from '@angular/core';\
|
|
1
|
+
{"version":3,"file":"rededor-site-front-end-lib-cura-forms-cura-select-option.mjs","sources":["../../../projects/site-front-end-lib/cura/forms/cura-select-option/cura-select-option.component.ts","../../../projects/site-front-end-lib/cura/forms/cura-select-option/cura-select-option.component.html","../../../projects/site-front-end-lib/cura/forms/cura-select-option/rededor-site-front-end-lib-cura-forms-cura-select-option.ts"],"sourcesContent":["import { Component, input, computed, inject, model, ElementRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { CuraApiService } from '@rededor/site-front-end-lib/cura/api';\nimport { CuraLabelComponent } from '@rededor/site-front-end-lib/cura/forms/cura-label';\nimport { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';\nimport { SelectOptionSize, SelectOptionSizeConfig } from './cura-select-option.definitions';\n\n@Component({\n selector: 'cura-select-option',\n imports: [CommonModule, CuraLabelComponent, CuraIconComponent],\n templateUrl: './cura-select-option.component.html',\n styleUrls: ['./cura-select-option.component.scss'],\n host: {\n role: 'option',\n '[attr.aria-selected]': 'selected()',\n '[attr.id]': 'optionId()',\n '[attr.aria-disabled]': 'false',\n },\n})\nexport class CuraSelectOptionComponent {\n private curaApi: CuraApiService = inject(CuraApiService);\n public elementRef = inject(ElementRef);\n\n /**\n * Value associated with the select option\n */\n value = input<string | any>('');\n\n /**\n * Whether the option is selected\n */\n selected = model<boolean>(false);\n\n /**\n * Whether the option is active (highlighted)\n */\n active = model<boolean>(false);\n\n /**\n * Size of the select option\n */\n size = model<SelectOptionSize>('small');\n\n /**\n * Whether the option is visible (for search filtering)\n */\n visible = model<boolean>(true);\n\n /**\n * Unique ID for the option (for accessibility)\n */\n private componentId = `cura-select-option-${Math.random().toString(36).substring(2, 8)}`;\n\n // Computed signals\n optionId = computed(() => this.componentId);\n\n internalSize = computed(() => {\n const sizeMap: { [key in SelectOptionSize]: SelectOptionSizeConfig } = {\n large: { label: 'medium', icon: 20 },\n medium: { label: 'small', icon: 16 },\n small: { label: 'xsmall', icon: 'micro' },\n xsmall: { label: 'xsmall', icon: 'micro' },\n };\n return sizeMap[this.size()] || sizeMap['medium'];\n });\n\n styles = computed(() => {\n const colors = [\n { name: '--primary-lighter-50', theme: 'primary-lighter', opacity: 0.5 },\n { name: '--primary-light', theme: 'primary-light' },\n { name: '--neutral-light', theme: 'neutral-light' },\n { name: '--neutral-purewhite', theme: 'neutral-purewhite' },\n ];\n\n const colorStyles: { [key: string]: string } = {};\n colors.forEach((color) => {\n if (this.curaApi) {\n colorStyles[color.name] = this.curaApi.theme.colors.getColor(color.theme, color.opacity);\n }\n });\n\n return { ...colorStyles };\n });\n\n classes = computed(() => {\n const classes = ['item'];\n\n if (this.selected()) classes.push('selected');\n if (this.active()) classes.push('active');\n\n return classes.join(' ');\n });\n}\n","<div [class]=\"classes()\" [style]=\"styles()\" [hidden]=\"!visible()\">\r\n <cura-label [color]=\"selected() ? 'primary-base' : 'neutral-black'\" [size]=\"internalSize().label\" marginBlock=\"0\">\r\n <ng-content></ng-content>\r\n </cura-label>\r\n\r\n @if (selected()) {\r\n <cura-icon name=\"check\" [size]=\"internalSize().icon\" color=\"primary-base\"> </cura-icon>\r\n }\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -77,6 +77,8 @@ class CuraSelectComponent {
|
|
|
77
77
|
this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
78
78
|
this.activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
|
|
79
79
|
this.textInput = signal('', ...(ngDevMode ? [{ debugName: "textInput" }] : []));
|
|
80
|
+
// Unique ID for accessibility
|
|
81
|
+
this.componentId = `cura-select-${Math.random().toString(36).substring(2, 8)}`;
|
|
80
82
|
// Form control callbacks
|
|
81
83
|
this.onChange = (value) => { };
|
|
82
84
|
this.onTouched = () => { };
|
|
@@ -121,6 +123,12 @@ class CuraSelectComponent {
|
|
|
121
123
|
this.labelColor = computed(() => this.colorConfig().label, ...(ngDevMode ? [{ debugName: "labelColor" }] : []));
|
|
122
124
|
this.textColor = computed(() => this.colorConfig().text, ...(ngDevMode ? [{ debugName: "textColor" }] : []));
|
|
123
125
|
this.iconColor = computed(() => this.colorConfig().icon, ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
|
|
126
|
+
// Accessibility computed signals
|
|
127
|
+
this.listboxId = computed(() => `${this.componentId}-listbox`, ...(ngDevMode ? [{ debugName: "listboxId" }] : []));
|
|
128
|
+
this.activeOptionId = computed(() => {
|
|
129
|
+
const activeOption = this.options()?.[this.activeIndex()];
|
|
130
|
+
return activeOption?.optionId() || '';
|
|
131
|
+
}, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : []));
|
|
124
132
|
this.styles = computed(() => {
|
|
125
133
|
const { fonts, colors } = this.curaApi?.theme || { fonts: null, colors: null };
|
|
126
134
|
const baseStyles = {};
|
|
@@ -344,13 +352,13 @@ class CuraSelectComponent {
|
|
|
344
352
|
document.removeEventListener('click', this.handleClickOutside);
|
|
345
353
|
}
|
|
346
354
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CuraSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
347
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: CuraSelectComponent, isStandalone: true, selector: "cura-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, searchBehavior: { classPropertyName: "searchBehavior", publicName: "searchBehavior", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selected: "selected", searchTermInput: "searchTermInput" }, host: { attributes: { "role": "combobox" }, properties: { "attr.aria-label": "label()", "attr.aria-required": "required()", "attr.aria-disabled": "disabled()", "attr.aria-invalid": "status() === \"error\"" } }, providers: [
|
|
355
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: CuraSelectComponent, isStandalone: true, selector: "cura-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, searchBehavior: { classPropertyName: "searchBehavior", publicName: "searchBehavior", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selected: "selected", searchTermInput: "searchTermInput" }, host: { attributes: { "role": "combobox" }, properties: { "attr.aria-label": "label()", "attr.aria-required": "required()", "attr.aria-disabled": "disabled()", "attr.aria-invalid": "status() === \"error\"", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "listboxId()", "attr.aria-activedescendant": "activeOptionId()" } }, providers: [
|
|
348
356
|
{
|
|
349
357
|
provide: NG_VALUE_ACCESSOR,
|
|
350
358
|
useExisting: forwardRef(() => CuraSelectComponent),
|
|
351
359
|
multi: true,
|
|
352
360
|
},
|
|
353
|
-
], queries: [{ propertyName: "options", predicate: CuraSelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"containerClasses()\" [style]=\"styles()\" (mouseenter)=\"isHovered.set(true)\" (mouseleave)=\"isHovered.set(false)\" (click)=\"handleClick($event)\">\r\n @if (label()) {\r\n <cura-label class=\"label\" weight=\"bold\" [size]=\"size() === 'large' ? 'small' : 'xsmall'\" [color]=\"labelColor()\">\r\n {{ label() }}\r\n @if (required()) {\r\n <span class=\"required\">*</span>\r\n }\r\n </cura-label>\r\n }\r\n\r\n <div\r\n [ngClass]=\"{\r\n 'cura-input-field': true,\r\n open: isOpen(),\r\n }\"\r\n >\r\n @if (status() !== 'default' || iconName()) {\r\n <cura-icon\r\n class=\"feedback-icon\"\r\n [name]=\"currentIconName()\"\r\n iconset=\"default\"\r\n [size]=\"size() === 'large' ? 20 : 16\"\r\n [color]=\"iconColor()\"\r\n [style]=\"styles()\"\r\n >\r\n </cura-icon>\r\n }\r\n\r\n <input\r\n #inputElement\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n [placeholder]=\"placeholder()\"\r\n [disabled]=\"disabled()\"\r\n [required]=\"required()\"\r\n [readonly]=\"!searchBehavior()\"\r\n [value]=\"textInput()\"\r\n [attr.aria-required]=\"required()\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [attr.aria-invalid]=\"status() === 'error'\"\r\n [style]=\"styles()\"\r\n (focus)=\"isFocused.set(true)\"\r\n (blur)=\"isFocused.set(false)\"\r\n (input)=\"handleInputChange($event)\"\r\n (keydown)=\"handleKeyNavigation($event)\"\r\n />\r\n\r\n <button class=\"up-down-button\" type=\"button\">\r\n <cura-icon [name]=\"isOpen() ? 'up' : 'down'\" class=\"up-down-icon\" [color]=\"disabled() ? 'neutral-dark' : 'primary-base'\" [size]=\"16\" iconset=\"default\">\r\n </cura-icon>\r\n </button>\r\n </div>\r\n\r\n <cura-label class=\"helper-text\" size=\"xsmall\" [color]=\"textColor()\" [weight]=\"mode() === 'transparent' ? 'bold' : 'regular'\">\r\n <ng-content></ng-content>\r\n </cura-label>\r\n\r\n @if (isOpen()) {\r\n <div\r\n [ngClass]=\"{\r\n menu: true,\r\n open: isOpen(),\r\n }\"\r\n [style]=\"{ '--max-height': maxHeight() }\"\r\n >\r\n <ng-content select=\"cura-select-option\"></ng-content>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block;position:relative;font-family:var(--font-family)}.wrapper{width:100%;-webkit-user-select:none;user-select:none;text-align:left!important}.wrapper cura-label{margin-bottom:8px}.wrapper .helper-text{margin-top:8px;color:var(--neutral-dark)}.wrapper .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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper .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}.wrapper .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper .cura-input-field .feedback-icon{padding-left:12px}.wrapper .cura-input-field .feedback-icon{box-sizing:content-box}.wrapper .cura-input-field .up-down-icon{order:3;margin-right:6px;cursor:pointer;pointer-events:all}.wrapper .cura-input-field .up-down-button{background-color:transparent;border:none}.wrapper .cura-input-field input{padding:0 12px 0 8px;cursor:pointer}.wrapper .cura-input-field.open{border-radius:4px 4px 0 0!important}.wrapper.transparent{background-color:transparent;padding:0;max-height:80px}.wrapper.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);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}.wrapper.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}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.transparent .cura-input-field .feedback-icon{padding-left:12px}.wrapper.transparent .cura-input-field input{color:var(--neutral-black)!important;font-size:16px;font-weight:var(--font-weight-bold)!important;padding:0}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.wrapper.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.wrapper.transparent:focus-within .cura-input-field{border:none!important;background-color:transparent!important}.wrapper.transparent:focus-within .cura-input-field input{border:none!important;outline:none}.wrapper.transparent .helper-text{margin-top:0}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper:focus-within:not(.selection) .cura-input-field{border:2px solid var(--info-base)!important;background-color:var(--neutral-purewhite);outline:none}.wrapper:focus-within:not(.selection) .cura-input-field input{color:var(--neutral-black)!important}.wrapper:focus-within.selection .cura-input-field{border-radius:4px 4px 0 0}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success .cura-input-field .feedback-icon{padding-left:12px}.wrapper.success .cura-input-field input{color:var(--success-darker)!important}.wrapper.success .cura-input-field input::placeholder{color:var(--success-darker)!important}.wrapper.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: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}.wrapper.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}.wrapper.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field input{color:var(--error-darker)!important}.wrapper.error .cura-input-field input::placeholder{color:var(--error-darker)!important}.wrapper.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: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}.wrapper.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}.wrapper.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.small .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.wrapper.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.small.label .menu{top:53px}.wrapper.small .menu{top:33px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.medium .cura-input-field .feedback-icon{padding-left:12px}.wrapper.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.wrapper.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.medium.label .menu{top:61px}.wrapper.medium .menu{top:40px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.large .cura-input-field .feedback-icon{padding-left:12px}.wrapper.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.wrapper.large.label .menu{top:69px}.wrapper.large .menu{top:47px}.wrapper.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.wrapper.disabled .cura-input-field input{color:var(--neutral-medium)}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.required{color:red}.menu{position:absolute;left:0;right:-1px;background:#fff;border:2px solid var(--neutral-light);border-radius:4px;z-index:1000;max-height:285px;overflow:hidden;border-top:transparent;align-items:center;scrollbar-color:var(--neutral-medium) var(--neutral-black-20);overflow-y:auto;box-shadow:0 4px 8px #26262629}.menu.open{border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] }); }
|
|
361
|
+
], queries: [{ propertyName: "options", predicate: CuraSelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"containerClasses()\" [style]=\"styles()\" (mouseenter)=\"isHovered.set(true)\" (mouseleave)=\"isHovered.set(false)\" (click)=\"handleClick($event)\">\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\n [ngClass]=\"{\n 'cura-input-field': true,\n open: isOpen(),\n }\"\n >\n @if (status() !== 'default' || iconName()) {\n <cura-icon\n class=\"feedback-icon\"\n [name]=\"currentIconName()\"\n iconset=\"default\"\n [size]=\"size() === 'large' ? 20 : 16\"\n [color]=\"iconColor()\"\n [style]=\"styles()\"\n >\n </cura-icon>\n }\n\n <input\n #inputElement\n type=\"text\"\n autocomplete=\"off\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [readonly]=\"!searchBehavior()\"\n [value]=\"textInput()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-invalid]=\"status() === 'error'\"\n [attr.aria-autocomplete]=\"searchBehavior() ? 'list' : 'none'\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n role=\"combobox\"\n [style]=\"styles()\"\n (focus)=\"isFocused.set(true)\"\n (blur)=\"isFocused.set(false)\"\n (input)=\"handleInputChange($event)\"\n (keydown)=\"handleKeyNavigation($event)\"\n />\n\n <button\n class=\"up-down-button\"\n type=\"button\"\n [attr.aria-label]=\"isOpen() ? 'Fechar lista de op\u00E7\u00F5es' : 'Abrir lista de op\u00E7\u00F5es'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [disabled]=\"disabled()\"\n tabindex=\"-1\"\n >\n <cura-icon [name]=\"isOpen() ? 'up' : 'down'\" class=\"up-down-icon\" [color]=\"disabled() ? 'neutral-dark' : 'primary-base'\" [size]=\"16\" iconset=\"default\">\n </cura-icon>\n </button>\n </div>\n\n <cura-label class=\"helper-text\" size=\"xsmall\" [color]=\"textColor()\" [weight]=\"mode() === 'transparent' ? 'bold' : 'regular'\">\n <ng-content></ng-content>\n </cura-label>\n\n @if (isOpen()) {\n <div\n [ngClass]=\"{\n menu: true,\n open: isOpen(),\n }\"\n [style]=\"{ '--max-height': maxHeight() }\"\n role=\"listbox\"\n [id]=\"listboxId()\"\n [attr.aria-label]=\"'Lista de op\u00E7\u00F5es para ' + (label() || 'sele\u00E7\u00E3o')\"\n [attr.aria-multiselectable]=\"false\"\n >\n <ng-content select=\"cura-select-option\"></ng-content>\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative;font-family:var(--font-family)}.wrapper{width:100%;-webkit-user-select:none;user-select:none;text-align:left!important}.wrapper cura-label{margin-bottom:8px}.wrapper .helper-text{margin-top:8px;color:var(--neutral-dark)}.wrapper .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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper .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}.wrapper .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper .cura-input-field .feedback-icon{padding-left:12px}.wrapper .cura-input-field .feedback-icon{box-sizing:content-box}.wrapper .cura-input-field .up-down-icon{order:3;margin-right:6px;cursor:pointer;pointer-events:all}.wrapper .cura-input-field .up-down-button{background-color:transparent;border:none}.wrapper .cura-input-field input{padding:0 12px 0 8px;cursor:pointer}.wrapper .cura-input-field.open{border-radius:4px 4px 0 0!important}.wrapper.transparent{background-color:transparent;padding:0;max-height:80px}.wrapper.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);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}.wrapper.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}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.transparent .cura-input-field .feedback-icon{padding-left:12px}.wrapper.transparent .cura-input-field input{color:var(--neutral-black)!important;font-size:16px;font-weight:var(--font-weight-bold)!important;padding:0}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.wrapper.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.wrapper.transparent:focus-within .cura-input-field{border:none!important;background-color:transparent!important}.wrapper.transparent:focus-within .cura-input-field input{border:none!important;outline:none}.wrapper.transparent .helper-text{margin-top:0}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper:focus-within:not(.selection) .cura-input-field{border:2px solid var(--info-base)!important;background-color:var(--neutral-purewhite);outline:none}.wrapper:focus-within:not(.selection) .cura-input-field input{color:var(--neutral-black)!important}.wrapper:focus-within.selection .cura-input-field{border-radius:4px 4px 0 0}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success .cura-input-field .feedback-icon{padding-left:12px}.wrapper.success .cura-input-field input{color:var(--success-darker)!important}.wrapper.success .cura-input-field input::placeholder{color:var(--success-darker)!important}.wrapper.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: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}.wrapper.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}.wrapper.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field input{color:var(--error-darker)!important}.wrapper.error .cura-input-field input::placeholder{color:var(--error-darker)!important}.wrapper.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: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}.wrapper.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}.wrapper.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.small .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.wrapper.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.small.label .menu{top:53px}.wrapper.small .menu{top:33px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.medium .cura-input-field .feedback-icon{padding-left:12px}.wrapper.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.wrapper.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.medium.label .menu{top:61px}.wrapper.medium .menu{top:40px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.large .cura-input-field .feedback-icon{padding-left:12px}.wrapper.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.wrapper.large.label .menu{top:69px}.wrapper.large .menu{top:47px}.wrapper.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.wrapper.disabled .cura-input-field input{color:var(--neutral-medium)}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.required{color:red}.menu{position:absolute;left:0;right:-1px;background:#fff;border:2px solid var(--neutral-light);border-radius:4px;z-index:1000;max-height:285px;overflow:hidden;border-top:transparent;align-items:center;scrollbar-color:var(--neutral-medium) var(--neutral-black-20);overflow-y:auto;box-shadow:0 4px 8px #26262629}.menu.open{border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] }); }
|
|
354
362
|
}
|
|
355
363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CuraSelectComponent, decorators: [{
|
|
356
364
|
type: Component,
|
|
@@ -360,13 +368,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
|
|
|
360
368
|
'[attr.aria-required]': 'required()',
|
|
361
369
|
'[attr.aria-disabled]': 'disabled()',
|
|
362
370
|
'[attr.aria-invalid]': 'status() === "error"',
|
|
371
|
+
'[attr.aria-expanded]': 'isOpen()',
|
|
372
|
+
'[attr.aria-controls]': 'listboxId()',
|
|
373
|
+
'[attr.aria-activedescendant]': 'activeOptionId()',
|
|
363
374
|
}, providers: [
|
|
364
375
|
{
|
|
365
376
|
provide: NG_VALUE_ACCESSOR,
|
|
366
377
|
useExisting: forwardRef(() => CuraSelectComponent),
|
|
367
378
|
multi: true,
|
|
368
379
|
},
|
|
369
|
-
], template: "<div [ngClass]=\"containerClasses()\" [style]=\"styles()\" (mouseenter)=\"isHovered.set(true)\" (mouseleave)=\"isHovered.set(false)\" (click)=\"handleClick($event)\">\r\n @if (label()) {\r\n <cura-label class=\"label\" weight=\"bold\" [size]=\"size() === 'large' ? 'small' : 'xsmall'\" [color]=\"labelColor()\">\r\n {{ label() }}\r\n @if (required()) {\r\n <span class=\"required\">*</span>\r\n }\r\n </cura-label>\r\n }\r\n\r\n <div\r\n [ngClass]=\"{\r\n 'cura-input-field': true,\r\n open: isOpen(),\r\n }\"\r\n >\r\n @if (status() !== 'default' || iconName()) {\r\n <cura-icon\r\n class=\"feedback-icon\"\r\n [name]=\"currentIconName()\"\r\n iconset=\"default\"\r\n [size]=\"size() === 'large' ? 20 : 16\"\r\n [color]=\"iconColor()\"\r\n [style]=\"styles()\"\r\n >\r\n </cura-icon>\r\n }\r\n\r\n <input\r\n #inputElement\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n [placeholder]=\"placeholder()\"\r\n [disabled]=\"disabled()\"\r\n [required]=\"required()\"\r\n [readonly]=\"!searchBehavior()\"\r\n [value]=\"textInput()\"\r\n [attr.aria-required]=\"required()\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [attr.aria-invalid]=\"status() === 'error'\"\r\n [style]=\"styles()\"\r\n (focus)=\"isFocused.set(true)\"\r\n (blur)=\"isFocused.set(false)\"\r\n (input)=\"handleInputChange($event)\"\r\n (keydown)=\"handleKeyNavigation($event)\"\r\n />\r\n\r\n <button class=\"up-down-button\" type=\"button\">\r\n <cura-icon [name]=\"isOpen() ? 'up' : 'down'\" class=\"up-down-icon\" [color]=\"disabled() ? 'neutral-dark' : 'primary-base'\" [size]=\"16\" iconset=\"default\">\r\n </cura-icon>\r\n </button>\r\n </div>\r\n\r\n <cura-label class=\"helper-text\" size=\"xsmall\" [color]=\"textColor()\" [weight]=\"mode() === 'transparent' ? 'bold' : 'regular'\">\r\n <ng-content></ng-content>\r\n </cura-label>\r\n\r\n @if (isOpen()) {\r\n <div\r\n [ngClass]=\"{\r\n menu: true,\r\n open: isOpen(),\r\n }\"\r\n [style]=\"{ '--max-height': maxHeight() }\"\r\n >\r\n <ng-content select=\"cura-select-option\"></ng-content>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block;position:relative;font-family:var(--font-family)}.wrapper{width:100%;-webkit-user-select:none;user-select:none;text-align:left!important}.wrapper cura-label{margin-bottom:8px}.wrapper .helper-text{margin-top:8px;color:var(--neutral-dark)}.wrapper .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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper .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}.wrapper .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper .cura-input-field .feedback-icon{padding-left:12px}.wrapper .cura-input-field .feedback-icon{box-sizing:content-box}.wrapper .cura-input-field .up-down-icon{order:3;margin-right:6px;cursor:pointer;pointer-events:all}.wrapper .cura-input-field .up-down-button{background-color:transparent;border:none}.wrapper .cura-input-field input{padding:0 12px 0 8px;cursor:pointer}.wrapper .cura-input-field.open{border-radius:4px 4px 0 0!important}.wrapper.transparent{background-color:transparent;padding:0;max-height:80px}.wrapper.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);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}.wrapper.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}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.transparent .cura-input-field .feedback-icon{padding-left:12px}.wrapper.transparent .cura-input-field input{color:var(--neutral-black)!important;font-size:16px;font-weight:var(--font-weight-bold)!important;padding:0}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.wrapper.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.wrapper.transparent:focus-within .cura-input-field{border:none!important;background-color:transparent!important}.wrapper.transparent:focus-within .cura-input-field input{border:none!important;outline:none}.wrapper.transparent .helper-text{margin-top:0}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper:focus-within:not(.selection) .cura-input-field{border:2px solid var(--info-base)!important;background-color:var(--neutral-purewhite);outline:none}.wrapper:focus-within:not(.selection) .cura-input-field input{color:var(--neutral-black)!important}.wrapper:focus-within.selection .cura-input-field{border-radius:4px 4px 0 0}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success .cura-input-field .feedback-icon{padding-left:12px}.wrapper.success .cura-input-field input{color:var(--success-darker)!important}.wrapper.success .cura-input-field input::placeholder{color:var(--success-darker)!important}.wrapper.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: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}.wrapper.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}.wrapper.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field input{color:var(--error-darker)!important}.wrapper.error .cura-input-field input::placeholder{color:var(--error-darker)!important}.wrapper.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: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}.wrapper.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}.wrapper.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.small .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.wrapper.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.small.label .menu{top:53px}.wrapper.small .menu{top:33px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.medium .cura-input-field .feedback-icon{padding-left:12px}.wrapper.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.wrapper.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.medium.label .menu{top:61px}.wrapper.medium .menu{top:40px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.large .cura-input-field .feedback-icon{padding-left:12px}.wrapper.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.wrapper.large.label .menu{top:69px}.wrapper.large .menu{top:47px}.wrapper.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.wrapper.disabled .cura-input-field input{color:var(--neutral-medium)}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.required{color:red}.menu{position:absolute;left:0;right:-1px;background:#fff;border:2px solid var(--neutral-light);border-radius:4px;z-index:1000;max-height:285px;overflow:hidden;border-top:transparent;align-items:center;scrollbar-color:var(--neutral-medium) var(--neutral-black-20);overflow-y:auto;box-shadow:0 4px 8px #26262629}.menu.open{border-radius:0!important}\n"] }]
|
|
380
|
+
], template: "<div [ngClass]=\"containerClasses()\" [style]=\"styles()\" (mouseenter)=\"isHovered.set(true)\" (mouseleave)=\"isHovered.set(false)\" (click)=\"handleClick($event)\">\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\n [ngClass]=\"{\n 'cura-input-field': true,\n open: isOpen(),\n }\"\n >\n @if (status() !== 'default' || iconName()) {\n <cura-icon\n class=\"feedback-icon\"\n [name]=\"currentIconName()\"\n iconset=\"default\"\n [size]=\"size() === 'large' ? 20 : 16\"\n [color]=\"iconColor()\"\n [style]=\"styles()\"\n >\n </cura-icon>\n }\n\n <input\n #inputElement\n type=\"text\"\n autocomplete=\"off\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [readonly]=\"!searchBehavior()\"\n [value]=\"textInput()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-invalid]=\"status() === 'error'\"\n [attr.aria-autocomplete]=\"searchBehavior() ? 'list' : 'none'\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n role=\"combobox\"\n [style]=\"styles()\"\n (focus)=\"isFocused.set(true)\"\n (blur)=\"isFocused.set(false)\"\n (input)=\"handleInputChange($event)\"\n (keydown)=\"handleKeyNavigation($event)\"\n />\n\n <button\n class=\"up-down-button\"\n type=\"button\"\n [attr.aria-label]=\"isOpen() ? 'Fechar lista de op\u00E7\u00F5es' : 'Abrir lista de op\u00E7\u00F5es'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [disabled]=\"disabled()\"\n tabindex=\"-1\"\n >\n <cura-icon [name]=\"isOpen() ? 'up' : 'down'\" class=\"up-down-icon\" [color]=\"disabled() ? 'neutral-dark' : 'primary-base'\" [size]=\"16\" iconset=\"default\">\n </cura-icon>\n </button>\n </div>\n\n <cura-label class=\"helper-text\" size=\"xsmall\" [color]=\"textColor()\" [weight]=\"mode() === 'transparent' ? 'bold' : 'regular'\">\n <ng-content></ng-content>\n </cura-label>\n\n @if (isOpen()) {\n <div\n [ngClass]=\"{\n menu: true,\n open: isOpen(),\n }\"\n [style]=\"{ '--max-height': maxHeight() }\"\n role=\"listbox\"\n [id]=\"listboxId()\"\n [attr.aria-label]=\"'Lista de op\u00E7\u00F5es para ' + (label() || 'sele\u00E7\u00E3o')\"\n [attr.aria-multiselectable]=\"false\"\n >\n <ng-content select=\"cura-select-option\"></ng-content>\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative;font-family:var(--font-family)}.wrapper{width:100%;-webkit-user-select:none;user-select:none;text-align:left!important}.wrapper cura-label{margin-bottom:8px}.wrapper .helper-text{margin-top:8px;color:var(--neutral-dark)}.wrapper .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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper .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}.wrapper .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper .cura-input-field .feedback-icon{padding-left:12px}.wrapper .cura-input-field .feedback-icon{box-sizing:content-box}.wrapper .cura-input-field .up-down-icon{order:3;margin-right:6px;cursor:pointer;pointer-events:all}.wrapper .cura-input-field .up-down-button{background-color:transparent;border:none}.wrapper .cura-input-field input{padding:0 12px 0 8px;cursor:pointer}.wrapper .cura-input-field.open{border-radius:4px 4px 0 0!important}.wrapper.transparent{background-color:transparent;padding:0;max-height:80px}.wrapper.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);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}.wrapper.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}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.transparent .cura-input-field .feedback-icon{padding-left:12px}.wrapper.transparent .cura-input-field input{color:var(--neutral-black)!important;font-size:16px;font-weight:var(--font-weight-bold)!important;padding:0}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.wrapper.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.wrapper.transparent:focus-within .cura-input-field{border:none!important;background-color:transparent!important}.wrapper.transparent:focus-within .cura-input-field input{border:none!important;outline:none}.wrapper.transparent .helper-text{margin-top:0}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper:focus-within:not(.selection) .cura-input-field{border:2px solid var(--info-base)!important;background-color:var(--neutral-purewhite);outline:none}.wrapper:focus-within:not(.selection) .cura-input-field input{color:var(--neutral-black)!important}.wrapper:focus-within.selection .cura-input-field{border-radius:4px 4px 0 0}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success .cura-input-field .feedback-icon{padding-left:12px}.wrapper.success .cura-input-field input{color:var(--success-darker)!important}.wrapper.success .cura-input-field input::placeholder{color:var(--success-darker)!important}.wrapper.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: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}.wrapper.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}.wrapper.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field input{color:var(--error-darker)!important}.wrapper.error .cura-input-field input::placeholder{color:var(--error-darker)!important}.wrapper.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: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}.wrapper.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}.wrapper.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.small .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field input{line-height:13px;letter-spacing:.72px}.wrapper.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.small.label .menu{top:53px}.wrapper.small .menu{top:33px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.medium .cura-input-field .feedback-icon{padding-left:12px}.wrapper.medium .cura-input-field input{line-height:16px;letter-spacing:.56px}.wrapper.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.medium.label .menu{top:61px}.wrapper.medium .menu{top:40px}.wrapper.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:4px;color:var(--primary-base);letter-spacing:.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.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}.wrapper.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.large .cura-input-field .feedback-icon{padding-left:12px}.wrapper.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.wrapper.large.label .menu{top:69px}.wrapper.large .menu{top:47px}.wrapper.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.wrapper.disabled .cura-input-field input{color:var(--neutral-medium)}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.required{color:red}.menu{position:absolute;left:0;right:-1px;background:#fff;border:2px solid var(--neutral-light);border-radius:4px;z-index:1000;max-height:285px;overflow:hidden;border-top:transparent;align-items:center;scrollbar-color:var(--neutral-medium) var(--neutral-black-20);overflow-y:auto;box-shadow:0 4px 8px #26262629}.menu.open{border-radius:0!important}\n"] }]
|
|
370
381
|
}], ctorParameters: () => [] });
|
|
371
382
|
|
|
372
383
|
/**
|