@rededor/cura 1.8.2-alpha.0 → 2.0.0-alpha.4

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.
Files changed (72) hide show
  1. package/dist/cjs/{cura-accordion_20.cjs.entry.js → cura-accordion_21.cjs.entry.js} +1815 -20
  2. package/dist/cjs/cura-accordion_21.cjs.entry.js.map +1 -0
  3. package/dist/cjs/cura-modal.cjs.entry.js +10 -2
  4. package/dist/cjs/cura-modal.cjs.entry.js.map +1 -1
  5. package/dist/cjs/cura-modal.entry.cjs.js.map +1 -1
  6. package/dist/cjs/cura.cjs.js +1 -1
  7. package/dist/cjs/index-BK9MSAiE.js.map +1 -1
  8. package/dist/cjs/loader.cjs.js +1 -1
  9. package/dist/collection/components/cura-dropdown-search/cura-dropdown-search.css +1 -1
  10. package/dist/collection/components/cura-dropdown-search/cura-dropdown-search.js +24 -4
  11. package/dist/collection/components/cura-dropdown-search/cura-dropdown-search.js.map +1 -1
  12. package/dist/collection/components/cura-modal/cura-modal.js +30 -2
  13. package/dist/collection/components/cura-modal/cura-modal.js.map +1 -1
  14. package/dist/collection/components/cura-modal/cura-modal.stories.js +10 -0
  15. package/dist/collection/components/cura-modal/cura-modal.stories.js.map +1 -1
  16. package/dist/collection/components/forms/cura-input-text/cura-input-text.js +1 -1
  17. package/dist/collection/components/forms/cura-select/cura-select.css +3 -148
  18. package/dist/collection/components/forms/cura-select/cura-select.js +103 -11
  19. package/dist/collection/components/forms/cura-select/cura-select.js.map +1 -1
  20. package/dist/collection/components/forms/cura-select-options/cura-select-option.css +15 -0
  21. package/dist/components/cura-calendar.js +1 -1
  22. package/dist/components/cura-dropdown-search.js +25 -5
  23. package/dist/components/cura-dropdown-search.js.map +1 -1
  24. package/dist/components/cura-input-date.js +3 -3
  25. package/dist/components/cura-modal.js +11 -2
  26. package/dist/components/cura-modal.js.map +1 -1
  27. package/dist/components/cura-select-option.js +1 -1
  28. package/dist/components/cura-select.js +1 -1
  29. package/dist/components/p-CvdWbsfO.js +2147 -0
  30. package/dist/components/p-CvdWbsfO.js.map +1 -0
  31. package/dist/components/p-D1cPOZpG.js.map +1 -1
  32. package/dist/components/{p-BGnJiNyu.js → p-DETZu2ie.js} +4 -4
  33. package/dist/components/{p-BGnJiNyu.js.map → p-DETZu2ie.js.map} +1 -1
  34. package/dist/components/{p-DpIu_Oxz.js → p-Dt450DkQ.js} +3 -3
  35. package/dist/components/p-Dt450DkQ.js.map +1 -0
  36. package/dist/cura/cura-modal.entry.esm.js.map +1 -1
  37. package/dist/cura/cura.esm.js +1 -1
  38. package/dist/cura/p-2ab58335.entry.js +2 -0
  39. package/dist/cura/p-2ab58335.entry.js.map +1 -0
  40. package/dist/cura/p-5ed7ce95.entry.js +2 -0
  41. package/dist/cura/p-5ed7ce95.entry.js.map +1 -0
  42. package/dist/cura/p-PPMZr_VE.js.map +1 -1
  43. package/dist/esm/{cura-accordion_20.entry.js → cura-accordion_21.entry.js} +1815 -21
  44. package/dist/esm/cura-accordion_21.entry.js.map +1 -0
  45. package/dist/esm/cura-modal.entry.js +10 -2
  46. package/dist/esm/cura-modal.entry.js.map +1 -1
  47. package/dist/esm/cura.js +1 -1
  48. package/dist/esm/index-OdKytJIH.js.map +1 -1
  49. package/dist/esm/loader.js +1 -1
  50. package/dist/types/components/cura-dropdown-search/cura-dropdown-search.d.ts +2 -0
  51. package/dist/types/components/cura-modal/cura-modal.d.ts +5 -0
  52. package/dist/types/components/cura-modal/cura-modal.stories.d.ts +11 -0
  53. package/dist/types/components/forms/cura-select/cura-select.d.ts +21 -0
  54. package/dist/types/components.d.ts +10 -0
  55. package/package.json +3 -2
  56. package/dist/cjs/cura-accordion_20.cjs.entry.js.map +0 -1
  57. package/dist/cjs/cura-card.cjs.entry.js +0 -81
  58. package/dist/cjs/cura-card.cjs.entry.js.map +0 -1
  59. package/dist/cjs/cura-card.entry.cjs.js.map +0 -1
  60. package/dist/components/p-BTt-pVTn.js +0 -442
  61. package/dist/components/p-BTt-pVTn.js.map +0 -1
  62. package/dist/components/p-DpIu_Oxz.js.map +0 -1
  63. package/dist/cura/cura-card.entry.esm.js.map +0 -1
  64. package/dist/cura/p-d8aeca82.entry.js +0 -2
  65. package/dist/cura/p-d8aeca82.entry.js.map +0 -1
  66. package/dist/cura/p-deb0b764.entry.js +0 -2
  67. package/dist/cura/p-deb0b764.entry.js.map +0 -1
  68. package/dist/cura/p-df7cb250.entry.js +0 -2
  69. package/dist/cura/p-df7cb250.entry.js.map +0 -1
  70. package/dist/esm/cura-accordion_20.entry.js.map +0 -1
  71. package/dist/esm/cura-card.entry.js +0 -79
  72. package/dist/esm/cura-card.entry.js.map +0 -1
@@ -1,81 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-BK9MSAiE.js');
4
- require('./cura-theme-module-CJkmAxBA.js');
5
-
6
- const curaCardCss = ":host{display:block;box-sizing:border-box;font-size:var(--font-size);font-family:var(--font-family)}:host ::slotted(*){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:0px;box-shadow:none}.solid ::slotted(*){border-radius:0}.solid.hasPadding{padding:20px}.solid.hasPadding ::slotted(*){border-radius:4px !important}.solid.hasShadow{border:2px solid var(--neutral-base);box-shadow:0px 1px 4px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16))}.solid.cardLink{background-color:var(--neutral-purewhite);border:2px solid var(--primary-base);border-radius:12px;padding:0px;box-shadow:none;cursor:pointer}.solid.cardLink ::slotted(*){border-radius:0px}.solid.cardLink:hover{border:2px solid var(--primary-lighter) !important}.solid.cardLink.hasPadding{padding:20px}.solid.cardLink.hasPadding ::slotted(*){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:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16))}.solid.cardLink:not(.hasPadding).hasShadow ::slotted(*){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:0px;overflow:hidden}.transparent ::slotted(*){border-radius:12px}.transparent.hasPadding{padding:20px}.transparent.hasPadding ::slotted(*){border-radius:4px}.transparent.cardLink{background-color:transparent;border:2px solid var(--primary-base);overflow:hidden;border-radius:12px;padding:0px;box-shadow:none}.transparent.cardLink ::slotted(*){border-radius:0px !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 ::slotted(*){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 ::slotted(*){border-radius:4px !important}";
7
-
8
- const CuraCard = class {
9
- constructor(hostRef) {
10
- index.registerInstance(this, hostRef);
11
- /**
12
- * Determines whether the card should have padding.
13
- * @type {boolean}
14
- * @default false
15
- */
16
- this.hasPadding = true;
17
- /**
18
- * Determines whether the card should have a shadow effect.
19
- * @type {boolean}
20
- * @default false
21
- */
22
- this.hasShadow = false;
23
- /**
24
- * Sets the type of the card background.
25
- * - 'solid': A solid background.
26
- * - 'transparent': A transparent background.
27
- * @type {'solid' | 'transparent'}
28
- * @default 'solid'
29
- */
30
- this.type = 'solid';
31
- /**
32
- * Sets the color mode of the card.
33
- * - 'light': Light mode for the card.
34
- * - 'dark': Dark mode for the card.
35
- * @type {'light' | 'dark'}
36
- * @default 'light'
37
- */
38
- this.colorMode = 'light';
39
- /**
40
- * The target attribute for the link.
41
- * Applicable only if `href` is set.
42
- * @type {string}
43
- * @default '_self'
44
- */
45
- this.target = '_self';
46
- this.styles = {};
47
- }
48
- connectedCallback() {
49
- this.weights = window.CuraAPI.theme.fonts.getWeights();
50
- this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
51
- this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
52
- this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
53
- this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
54
- this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
55
- this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);
56
- this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);
57
- this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`);
58
- this.styles['--primary-base'] = window.CuraAPI.theme.colors.getColor(`primary-base`);
59
- this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
60
- this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
61
- this.styles['--font-weight-medium'] = this.weights.medium;
62
- }
63
- getClasses() {
64
- const classes = {};
65
- classes[this.type] = true;
66
- classes[`cardLink`] = this.href;
67
- classes[this.colorMode] = true;
68
- classes[`hasPadding`] = this.hasPadding;
69
- classes[`hasShadow`] = this.hasShadow;
70
- return classes;
71
- }
72
- render() {
73
- return (index.h(index.Host, { key: '9478ce754c108db722dbc5bcbb00a0884b6c6f38', role: this.href ? 'link' : 'div' }, this.href ? (index.h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, index.h("slot", null))) : (index.h("div", { class: this.getClasses(), style: this.styles }, index.h("slot", null)))));
74
- }
75
- };
76
- CuraCard.style = curaCardCss;
77
-
78
- exports.cura_card = CuraCard;
79
- //# sourceMappingURL=cura-card.entry.cjs.js.map
80
-
81
- //# sourceMappingURL=cura-card.cjs.entry.js.map
@@ -1 +0,0 @@
1
- {"file":"cura-card.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/cura-card/cura-card.scss?tag=cura-card&encapsulation=shadow","src/components/cura-card/cura-card.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/shadows.scss';\n\n:host {\n display: block;\n box-sizing: border-box;\n font-size: var(--font-size);\n font-family: var(--font-family);\n ::slotted(*) {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--font-size);\n font-family: var(--font-family);\n }\n \n}\n\na {\n display: block;\n text-decoration: none !important;\n color: inherit;\n}\n.solid {\n background-color: var(--neutral-purewhite);\n border: 2px solid var(--neutral-base);\n border-radius: 12px;\n overflow: hidden;\n padding: 0px;\n box-shadow: none;\n\n ::slotted(*) {\n \n border-radius: 0 ;\n }\n &.hasPadding {\n padding: 20px;\n ::slotted(*) {\n border-radius: 4px !important;\n }\n }\n\n &.hasShadow {\n border: 2px solid var(--neutral-base);\n\n @include shadow-level2(--neutral-black-shadow);\n }\n\n &.cardLink {\n background-color: var(--neutral-purewhite);\n border: 2px solid var(--primary-base);\n border-radius: 12px;\n padding: 0px;\n box-shadow: none;\n cursor: pointer;\n\n ::slotted(*) {\n border-radius: 0px;\n }\n &:hover {\n border: 2px solid var(--primary-lighter) !important;\n }\n &.hasPadding {\n padding: 20px;\n ::slotted(*) {\n border-radius: 4px !important;\n }\n &:hover {\n border: 2px solid var(--primary-lighter) !important;\n }\n }\n\n &.hasShadow {\n border: 2px solid var(--primary-base);\n\n @include shadow-level3(--neutral-black-shadow);\n }\n &:not(.hasPadding).hasShadow {\n ::slotted(*) {\n border-radius: 12px !important;\n }\n }\n\n &.dark {\n background-color: var(--neutral-purewhite);\n border: 2px solid var(--neutral-purewhite);\n &:hover {\n border: 2px solid var(--primary-lighter);\n }\n }\n }\n}\n\n.transparent {\n background-color: transparent;\n border: 0;\n border-radius: 12px;\n padding: 0px;\n overflow: hidden;\n ::slotted(*) {\n border-radius: 12px;\n }\n\n &.hasPadding {\n padding: 20px;\n\n ::slotted(*) {\n border-radius: 4px;\n }\n }\n\n &.cardLink {\n background-color: transparent;\n border: 2px solid var(--primary-base);\n overflow: hidden;\n border-radius: 12px;\n padding: 0px;\n box-shadow: none;\n ::slotted(*) {\n border-radius: 0px !important;\n }\n &:hover {\n border: 2px solid var(--primary-lighter) !important;\n }\n\n &.light {\n background-color: var(--neutral-purewhite);\n border: 2px solid var(--primary-base);\n ::slotted(*) {\n border-radius: 12px !important;\n }\n &:hover {\n border-color: var(--primary-lighter) !important;\n }\n }\n &.dark {\n background-color: transparent;\n\n border: 2px solid var(--neutral-purewhite);\n\n &:hover {\n border: 0;\n }\n }\n &.hasPadding {\n padding: 20px;\n\n ::slotted(*) {\n border-radius: 4px !important;\n }\n }\n }\n}\n","import { Component, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-card',\n styleUrl: 'cura-card.scss',\n shadow: true,\n})\nexport class CuraCard {\n /**\n * Determines whether the card should have padding.\n * @type {boolean}\n * @default false\n */\n @Prop({ mutable: true }) hasPadding: boolean = true;\n\n /**\n * Determines whether the card should have a shadow effect.\n * @type {boolean}\n * @default false\n */\n @Prop({ mutable: true }) hasShadow: boolean = false;\n\n /**\n * Sets the type of the card background.\n * - 'solid': A solid background.\n * - 'transparent': A transparent background.\n * @type {'solid' | 'transparent'}\n * @default 'solid'\n */\n @Prop({ mutable: true }) type: 'solid' | 'transparent' = '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 * @type {'light' | 'dark'}\n * @default 'light'\n */\n @Prop({ mutable: true }) colorMode: 'light' | 'dark' = '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 * @type {string | undefined}\n */\n @Prop({ mutable: true, reflect: true }) href?: string;\n\n /**\n * The target attribute for the link.\n * Applicable only if `href` is set.\n * @type {string}\n * @default '_self'\n */\n @Prop({ reflect: true }) target: string = '_self';\n\n @State() styles: any = {};\n\n weights;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);\n this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);\n this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`);\n this.styles['--primary-base'] = window.CuraAPI.theme.colors.getColor(`primary-base`);\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n }\n\n getClasses() {\n const classes = {};\n classes[this.type] = true;\n classes[`cardLink`] = this.href;\n classes[this.colorMode] = true;\n classes[`hasPadding`] = this.hasPadding;\n classes[`hasShadow`] = this.hasShadow;\n return classes;\n }\n\n render() {\n return (\n <Host role={this.href ? 'link' : 'div'}>\n {this.href ? (\n <a class={this.getClasses()} target={this.target} style={this.styles} href={this.href}>\n <slot></slot>\n </a>\n ) : (\n <div class={this.getClasses()} style={this.styles}>\n <slot></slot>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
@@ -1 +0,0 @@
1
- {"version":3,"file":"cura-card.entry.cjs.js","sources":["src/components/cura-card/cura-card.scss?tag=cura-card&encapsulation=shadow","src/components/cura-card/cura-card.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/shadows.scss';\n\n:host {\n display: block;\n box-sizing: border-box;\n font-size: var(--font-size);\n font-family: var(--font-family);\n ::slotted(*) {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--font-size);\n font-family: var(--font-family);\n }\n \n}\n\na {\n display: block;\n text-decoration: none !important;\n color: inherit;\n}\n.solid {\n background-color: var(--neutral-purewhite);\n border: 2px solid var(--neutral-base);\n border-radius: 12px;\n overflow: hidden;\n padding: 0px;\n box-shadow: none;\n\n ::slotted(*) {\n \n border-radius: 0 ;\n }\n &.hasPadding {\n padding: 20px;\n ::slotted(*) {\n border-radius: 4px !important;\n }\n }\n\n &.hasShadow {\n border: 2px solid var(--neutral-base);\n\n @include shadow-level2(--neutral-black-shadow);\n }\n\n &.cardLink {\n background-color: var(--neutral-purewhite);\n border: 2px solid var(--primary-base);\n border-radius: 12px;\n padding: 0px;\n box-shadow: none;\n cursor: pointer;\n\n ::slotted(*) {\n border-radius: 0px;\n }\n &:hover {\n border: 2px solid var(--primary-lighter) !important;\n }\n &.hasPadding {\n padding: 20px;\n ::slotted(*) {\n border-radius: 4px !important;\n }\n &:hover {\n border: 2px solid var(--primary-lighter) !important;\n }\n }\n\n &.hasShadow {\n border: 2px solid var(--primary-base);\n\n @include shadow-level3(--neutral-black-shadow);\n }\n &:not(.hasPadding).hasShadow {\n ::slotted(*) {\n border-radius: 12px !important;\n }\n }\n\n &.dark {\n background-color: var(--neutral-purewhite);\n border: 2px solid var(--neutral-purewhite);\n &:hover {\n border: 2px solid var(--primary-lighter);\n }\n }\n }\n}\n\n.transparent {\n background-color: transparent;\n border: 0;\n border-radius: 12px;\n padding: 0px;\n overflow: hidden;\n ::slotted(*) {\n border-radius: 12px;\n }\n\n &.hasPadding {\n padding: 20px;\n\n ::slotted(*) {\n border-radius: 4px;\n }\n }\n\n &.cardLink {\n background-color: transparent;\n border: 2px solid var(--primary-base);\n overflow: hidden;\n border-radius: 12px;\n padding: 0px;\n box-shadow: none;\n ::slotted(*) {\n border-radius: 0px !important;\n }\n &:hover {\n border: 2px solid var(--primary-lighter) !important;\n }\n\n &.light {\n background-color: var(--neutral-purewhite);\n border: 2px solid var(--primary-base);\n ::slotted(*) {\n border-radius: 12px !important;\n }\n &:hover {\n border-color: var(--primary-lighter) !important;\n }\n }\n &.dark {\n background-color: transparent;\n\n border: 2px solid var(--neutral-purewhite);\n\n &:hover {\n border: 0;\n }\n }\n &.hasPadding {\n padding: 20px;\n\n ::slotted(*) {\n border-radius: 4px !important;\n }\n }\n }\n}\n","import { Component, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-card',\n styleUrl: 'cura-card.scss',\n shadow: true,\n})\nexport class CuraCard {\n /**\n * Determines whether the card should have padding.\n * @type {boolean}\n * @default false\n */\n @Prop({ mutable: true }) hasPadding: boolean = true;\n\n /**\n * Determines whether the card should have a shadow effect.\n * @type {boolean}\n * @default false\n */\n @Prop({ mutable: true }) hasShadow: boolean = false;\n\n /**\n * Sets the type of the card background.\n * - 'solid': A solid background.\n * - 'transparent': A transparent background.\n * @type {'solid' | 'transparent'}\n * @default 'solid'\n */\n @Prop({ mutable: true }) type: 'solid' | 'transparent' = '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 * @type {'light' | 'dark'}\n * @default 'light'\n */\n @Prop({ mutable: true }) colorMode: 'light' | 'dark' = '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 * @type {string | undefined}\n */\n @Prop({ mutable: true, reflect: true }) href?: string;\n\n /**\n * The target attribute for the link.\n * Applicable only if `href` is set.\n * @type {string}\n * @default '_self'\n */\n @Prop({ reflect: true }) target: string = '_self';\n\n @State() styles: any = {};\n\n weights;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);\n this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);\n this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`);\n this.styles['--primary-base'] = window.CuraAPI.theme.colors.getColor(`primary-base`);\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n }\n\n getClasses() {\n const classes = {};\n classes[this.type] = true;\n classes[`cardLink`] = this.href;\n classes[this.colorMode] = true;\n classes[`hasPadding`] = this.hasPadding;\n classes[`hasShadow`] = this.hasShadow;\n return classes;\n }\n\n render() {\n return (\n <Host role={this.href ? 'link' : 'div'}>\n {this.href ? (\n <a class={this.getClasses()} target={this.target} style={this.styles} href={this.href}>\n <slot></slot>\n </a>\n ) : (\n <div class={this.getClasses()} style={this.styles}>\n <slot></slot>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":"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"}
@@ -1,442 +0,0 @@
1
- import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-D1cPOZpG.js';
2
- import { d as defineCustomElement$2 } from './p-B5aO1chh.js';
3
- import { d as defineCustomElement$1 } from './p-DR1RHrEX.js';
4
-
5
- const curaSelectCss = ":host{display:block;position:relative;font-family:var(--font-family)}.wrapper{width:100%;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:0.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:0px 12px 0px 8px}.wrapper .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper .cura-input-field .feedback-icon{padding-left:12px}.wrapper .cura-input-field .up-down-icon{order:3;padding-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:0px 12px 0px 8px;cursor:pointer}.wrapper .cura-input-field.open{border-radius:4px 4px 0 0 !important}.wrapper.transparent{background-color:transparent;padding:0px;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);border-radius:4px;color:var(--primary-base);letter-spacing:0.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:0px 12px 0px 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:0px}.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 0px 0px}.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:0.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:0px 12px 0px 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:0.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:0px 12px 0px 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:0.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:0px 12px 0px 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:0.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:0px 12px 0px 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:0.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:0px 12px 0px 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:0.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:0.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:0px 12px 0px 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:0.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:0.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:0px 12px 0px 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:var(--max-height);overflow:hidden;border-top:transparent;align-items:center;scrollbar-color:var(--neutral-medium) var(--neutral-black-20);overflow-y:auto;box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}.menu.open{border-radius:0 !important;padding:12px}";
6
-
7
- const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends H {
8
- constructor() {
9
- super();
10
- this.__registerHost();
11
- this.__attachShadow();
12
- this.selected = createEvent(this, "selected");
13
- this.searchTermInput = createEvent(this, "searchTermInput");
14
- this.internals = this.attachInternals();
15
- /**
16
- * The label text for the select component.
17
- * Reflects as an attribute in the DOM.
18
- */
19
- this.label = '';
20
- /**
21
- * Placeholder text for the input field.
22
- * Reflects as an attribute in the DOM.
23
- */
24
- this.placeholder = '';
25
- /**
26
- * Current value of the select component.
27
- * Reflects as an attribute in the DOM and is mutable.
28
- */
29
- this.value = '';
30
- /**
31
- * Display mode of the select component.
32
- * Can be 'default' or 'transparent'.
33
- */
34
- this.mode = 'default';
35
- /**
36
- * Size of the select component.
37
- * Can be 'small', 'medium', or 'large'.
38
- */
39
- this.size = 'medium';
40
- /**
41
- * Status of the select component.
42
- * Can be 'success', 'error', or 'default'.
43
- */
44
- this.status = 'default';
45
- /**
46
- * Whether the select component is disabled.
47
- * Reflects as an attribute in the DOM.
48
- */
49
- this.disabled = false;
50
- /**
51
- * Whether the select component is required.
52
- * Reflects as an attribute in the DOM.
53
- */
54
- this.required = false;
55
- /**
56
- * Enable / Disable search at options by term.
57
- * Default: false
58
- */
59
- this.searchBehavior = false;
60
- /**
61
- * The search will be sensitive to accents.
62
- * Default: true
63
- */
64
- this.caseSensitive = true;
65
- /**
66
- * CSS max-height property for dropdown item.
67
- * Can also be used by css property --max-height.
68
- * Default: 285px
69
- */
70
- this.maxHeight = '285px';
71
- /**
72
- * Internal state: Whether the input is hovered.
73
- * Default: false
74
- */
75
- this.isHovered = false;
76
- /**
77
- * Internal state: Whether the input is focused.
78
- * Default: false
79
- */
80
- this.isFocused = false;
81
- /**
82
- * Internal state: Whether the dropdown menu is open.
83
- * Default: false
84
- */
85
- this.isOpen = false;
86
- this.activeIndex = -1;
87
- this.textInput = '';
88
- /**
89
- * Styles to be applied to the component.
90
- */
91
- this.styles = {};
92
- /**
93
- * Theme object containing font and color information.
94
- */
95
- this.theme = window.CuraAPI.theme;
96
- /**
97
- * Handles mutations observed by the MutationObserver.
98
- * Updates the selected option or filters options based on the mutation type.
99
- */
100
- this.handleMutations = (mutations) => {
101
- mutations.forEach(mutation => {
102
- if (mutation.type === 'attributes') {
103
- if (mutation.attributeName === 'selected')
104
- this.updateSelectedOption();
105
- }
106
- });
107
- };
108
- /**
109
- * Handles the selection of an option.
110
- */
111
- this.onOptiselected = (event) => {
112
- const selectedOption = event.target;
113
- this.clearSelectedAttributes();
114
- selectedOption.setAttribute('selected', 'true');
115
- };
116
- this.handleKeyNavigation = (event) => {
117
- var _a;
118
- const { code: keyCode } = event;
119
- if (!this.isOpen && keyCode === 'ArrowDown') {
120
- this.isOpen = true;
121
- this.activeIndex = 0;
122
- return;
123
- }
124
- if (keyCode === 'ArrowDown') {
125
- event.preventDefault();
126
- this.updateActiveIndex(1);
127
- }
128
- if (keyCode === 'ArrowUp') {
129
- event.preventDefault();
130
- this.updateActiveIndex(-1);
131
- }
132
- if (keyCode === 'Enter' || keyCode === 'Space') {
133
- (_a = this.options[this.activeIndex]) === null || _a === void 0 ? void 0 : _a.click();
134
- }
135
- if (keyCode === 'Escape') {
136
- this.isOpen = false;
137
- }
138
- };
139
- this.handleInputChange = (e) => {
140
- this.textInput = e.target.value;
141
- this.isOpen = this.textInput.length > 0;
142
- this.internals.setFormValue(this.textInput);
143
- };
144
- this.handleClick = (event) => {
145
- if (this.disabled)
146
- return event.preventDefault();
147
- const target = event.target;
148
- if (target.tagName === 'CURA-SELECT-OPTION')
149
- return this.onOptiselected(event);
150
- this.isOpen = !this.isOpen;
151
- };
152
- this.handleClickOutside = (event) => {
153
- const clickedOutside = !this.host.contains(event.target);
154
- if (clickedOutside) {
155
- this.isOpen = false;
156
- }
157
- };
158
- }
159
- updateOptionHighlights(newActiveINdex) {
160
- this.options.forEach((option, index) => (option.active = index === newActiveINdex));
161
- }
162
- /**
163
- * Filters the options based on the current input value.
164
- */
165
- filterOptions(newText) {
166
- this.searchTermInput.emit(newText);
167
- if (!this.isOpen || !this.searchBehavior) {
168
- return;
169
- }
170
- const removeAccents = (str) => {
171
- return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
172
- };
173
- let searchTerm = newText;
174
- if (!this.caseSensitive) {
175
- searchTerm = removeAccents(searchTerm).toLocaleLowerCase();
176
- }
177
- this.options.forEach(option => {
178
- let optionValue = option.textContent || '';
179
- if (!this.caseSensitive) {
180
- optionValue = removeAccents(optionValue === null || optionValue === void 0 ? void 0 : optionValue.toLowerCase());
181
- }
182
- const isVisible = optionValue.includes(searchTerm);
183
- option.style.display = isVisible ? 'block' : 'none';
184
- });
185
- }
186
- /**
187
- * Callback for form association.
188
- */
189
- formAssociatedCallback(form) {
190
- form.ariaLabel = this.label;
191
- }
192
- /**
193
- * Callback to restore the switch state from the form.
194
- */
195
- formStateRestoreCallback(state) {
196
- this.textInput = state.value;
197
- this.updateSelectedOption();
198
- }
199
- /**
200
- * Callback to reset the switch state when the form is reset.
201
- */
202
- formResetCallback() {
203
- this.textInput = '';
204
- this.clearSelectedAttributes();
205
- this.internals.setFormValue('');
206
- this.internals.setValidity({});
207
- }
208
- /**
209
- * Callback to update the switch's disabled state when the form's disabled state changes.
210
- */
211
- formDisabledCallback(disabled) {
212
- this.disabled = disabled;
213
- }
214
- /**
215
- * Lifecycle method called before the component is rendered.
216
- * Initializes the options for the select component.
217
- */
218
- componentWillLoad() {
219
- this.initializeOptions();
220
- }
221
- /**
222
- * Lifecycle method called after the component is rendered.
223
- * Initializes select-related functionality.
224
- */
225
- componentDidLoad() {
226
- // this.initializeOptions();
227
- this.setupMutationObserver();
228
- this.addOutsideClickListener();
229
- }
230
- /**
231
- * Lifecycle method called when the component is connected to the DOM.
232
- * Applies styles based on the theme.
233
- */
234
- connectedCallback() {
235
- this.applyStyles();
236
- }
237
- /**
238
- * Lifecycle method called when the component is disconnected from the DOM.
239
- * Disconnects the MutationObserver if it exists.
240
- */
241
- disconnectedCallback() {
242
- var _a;
243
- (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
244
- this.removeOutsideClickListener();
245
- }
246
- initializeOptions() {
247
- var _a;
248
- this.options = this.host.querySelectorAll('cura-select-option');
249
- this.options.forEach(option => {
250
- option.setAttribute('size', this.size);
251
- const isSelected = this.value === option.value;
252
- option.setAttribute('selected', JSON.stringify(isSelected));
253
- if (isSelected) {
254
- this.value = option.value;
255
- this.internals.setFormValue(option.value);
256
- }
257
- });
258
- this.textInput = ((_a = Array.from(this.options).find(option => option.value === this.value)) === null || _a === void 0 ? void 0 : _a.textContent) || this.textInput;
259
- }
260
- /**
261
- * Applies styles to the component based on the theme.
262
- */
263
- applyStyles() {
264
- const { fonts, colors } = this.theme;
265
- const fontWeights = fonts.getWeights();
266
- this.styles = Object.assign(Object.assign({}, this.styles), { '--font-weight-medium': fontWeights.medium, '--font-weight-bold': fontWeights.bold, '--font-weight-regular': fontWeights.regular, '--font-color': fonts.getColor(), '--font-family': fonts.getFamily(), '--font-size': fonts.getSize() });
267
- const colorKeys = [
268
- 'primary-base',
269
- 'neutral-purewhite',
270
- 'neutral-white',
271
- 'neutral-black',
272
- 'neutral-medium',
273
- 'neutral-light',
274
- 'neutral-base',
275
- 'neutral-dark',
276
- 'success-dark',
277
- 'success-darker',
278
- 'success-lighter',
279
- 'error-lighter',
280
- 'error-dark',
281
- 'error-darker',
282
- 'error-base',
283
- 'info-base',
284
- ];
285
- colorKeys.forEach(key => {
286
- this.styles[`--${key}`] = colors.getColor(key);
287
- });
288
- }
289
- /**
290
- * Sets up a MutationObserver to watch for changes in the component.
291
- */
292
- setupMutationObserver() {
293
- this.mutationObserver = new MutationObserver(this.handleMutations);
294
- this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });
295
- }
296
- handleValueChange(newValue) {
297
- this.clearSelectedAttributes();
298
- const selectedOption = this.host.querySelector(`cura-select-option[value="${newValue}"]`);
299
- if (!selectedOption) {
300
- return;
301
- }
302
- selectedOption.setAttribute('selected', 'true');
303
- }
304
- updateSelectedOption() {
305
- const selectedOptionElement = this.host.querySelector('cura-select-option[selected]');
306
- if (!selectedOptionElement) {
307
- return;
308
- }
309
- this.value = selectedOptionElement.value;
310
- this.internals.setFormValue(this.value);
311
- if (this.textInput !== selectedOptionElement.textContent) {
312
- this.textInput = selectedOptionElement.textContent;
313
- this.isOpen = false;
314
- this.selected.emit(selectedOptionElement.value);
315
- }
316
- }
317
- /**
318
- * Clears the 'selected' attribute from all options.
319
- */
320
- clearSelectedAttributes() {
321
- this.options.forEach(option => option.removeAttribute('selected'));
322
- }
323
- updateActiveIndex(direction) {
324
- if (this.options.length === 0)
325
- return;
326
- this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;
327
- }
328
- getClasses() {
329
- return {
330
- wrapper: true,
331
- label: !!this.label,
332
- disabled: this.disabled,
333
- transparent: this.mode === 'transparent',
334
- [this.size.toLowerCase()]: true,
335
- [this.status.toLowerCase()]: true,
336
- };
337
- }
338
- /**
339
- * Determines the color based on the item type and component state.
340
- */
341
- getColor(item) {
342
- if (this.disabled)
343
- return 'neutral-medium';
344
- const isStatusDefault = this.status === 'default';
345
- const isHoveredOrFocused = this.isFocused || this.isHovered;
346
- if (item === 'label') {
347
- if (!isStatusDefault || isHoveredOrFocused)
348
- return 'neutral-black';
349
- return 'neutral-dark';
350
- }
351
- if (isHoveredOrFocused && isStatusDefault)
352
- return 'neutral-black';
353
- if (this.status === 'success')
354
- return 'success-dark';
355
- if (this.status === 'error')
356
- return 'error-dark';
357
- return 'neutral-dark';
358
- }
359
- /**
360
- * Renders the icon based on the component's status.
361
- */
362
- renderIcon() {
363
- if (this.status === 'default' && !this.iconName)
364
- return null;
365
- const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];
366
- return h("cura-icon", { class: "feedback-icon", name: icon, iconset: "default", size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles });
367
- }
368
- addOutsideClickListener() {
369
- document.addEventListener('click', this.handleClickOutside);
370
- }
371
- removeOutsideClickListener() {
372
- document.removeEventListener('click', this.handleClickOutside);
373
- }
374
- render() {
375
- return (h(Host, { key: '3aeecef0bff82a4b14c4dee8b222fdf6eb33b2f8', style: this.styles, role: "combobox", "aria-label": this.label, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error') }, h("div", { key: '00dd10ed04cd3bf0e848d9facc44db794e3580cf', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: 'd0c7293af9ba728293f2b531c2cc0354ba6f9fa0', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '2d1e87303eab87280dc8668e390bd5aa696814d9', class: "required" }, "* "))), h("div", { key: 'd0e8464016796145e088f459532a37dfb1852f96', class: {
376
- 'cura-input-field': true,
377
- 'open': this.isOpen,
378
- } }, this.renderIcon(), h("input", { key: '8110997e13827855169e58bfee9695a60bf4dbfa', type: "text", autocomplete: "off", onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("button", { key: '7b9b18aebd379b004c08f4bcdb4c72357f29c56c', class: "up-down-button" }, h("cura-icon", { key: '4e1fac2b43502e38db450e319e2283b97ed22fd7', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), h("cura-label", { key: '8e89021a023d6ff69a2adb2fe1b9052d1d813d06', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'a253ffc9f1f1ee84c9dcbc81dc3a650c5105c11e' })), this.isOpen && (h("div", { key: '938f552bebac510a7345c8e7b46d2ef911c19e12', class: {
379
- menu: true,
380
- open: this.isOpen,
381
- }, style: { '--max-height': this.maxHeight } }, h("slot", { key: '2d54c15bb8df7dfe33fac77cee7778c450946cf7', name: "option" }))))));
382
- }
383
- static get formAssociated() { return true; }
384
- get host() { return this; }
385
- static get watchers() { return {
386
- "activeIndex": ["updateOptionHighlights"],
387
- "textInput": ["filterOptions"],
388
- "value": ["handleValueChange"]
389
- }; }
390
- static get style() { return curaSelectCss; }
391
- }, [65, "cura-select", {
392
- "label": [513],
393
- "placeholder": [513],
394
- "value": [1537],
395
- "mode": [513],
396
- "size": [513],
397
- "iconName": [1, "icon-name"],
398
- "status": [1537],
399
- "disabled": [516],
400
- "required": [516],
401
- "searchBehavior": [516, "search-behavior"],
402
- "caseSensitive": [516, "case-sensitive"],
403
- "maxHeight": [513, "max-height"],
404
- "isHovered": [32],
405
- "isFocused": [32],
406
- "isOpen": [32],
407
- "options": [32],
408
- "activeIndex": [32],
409
- "textInput": [32]
410
- }, undefined, {
411
- "activeIndex": ["updateOptionHighlights"],
412
- "textInput": ["filterOptions"],
413
- "value": ["handleValueChange"]
414
- }]);
415
- function defineCustomElement() {
416
- if (typeof customElements === "undefined") {
417
- return;
418
- }
419
- const components = ["cura-select", "cura-icon", "cura-label"];
420
- components.forEach(tagName => { switch (tagName) {
421
- case "cura-select":
422
- if (!customElements.get(tagName)) {
423
- customElements.define(tagName, CuraSelect);
424
- }
425
- break;
426
- case "cura-icon":
427
- if (!customElements.get(tagName)) {
428
- defineCustomElement$2();
429
- }
430
- break;
431
- case "cura-label":
432
- if (!customElements.get(tagName)) {
433
- defineCustomElement$1();
434
- }
435
- break;
436
- } });
437
- }
438
-
439
- export { CuraSelect as C, defineCustomElement as d };
440
- //# sourceMappingURL=p-BTt-pVTn.js.map
441
-
442
- //# sourceMappingURL=p-BTt-pVTn.js.map