@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.
- package/dist/cjs/{cura-accordion_20.cjs.entry.js → cura-accordion_21.cjs.entry.js} +1815 -20
- package/dist/cjs/cura-accordion_21.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-modal.cjs.entry.js +10 -2
- package/dist/cjs/cura-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-modal.entry.cjs.js.map +1 -1
- package/dist/cjs/cura.cjs.js +1 -1
- package/dist/cjs/index-BK9MSAiE.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/cura-dropdown-search/cura-dropdown-search.css +1 -1
- package/dist/collection/components/cura-dropdown-search/cura-dropdown-search.js +24 -4
- package/dist/collection/components/cura-dropdown-search/cura-dropdown-search.js.map +1 -1
- package/dist/collection/components/cura-modal/cura-modal.js +30 -2
- package/dist/collection/components/cura-modal/cura-modal.js.map +1 -1
- package/dist/collection/components/cura-modal/cura-modal.stories.js +10 -0
- package/dist/collection/components/cura-modal/cura-modal.stories.js.map +1 -1
- package/dist/collection/components/forms/cura-input-text/cura-input-text.js +1 -1
- package/dist/collection/components/forms/cura-select/cura-select.css +3 -148
- package/dist/collection/components/forms/cura-select/cura-select.js +103 -11
- package/dist/collection/components/forms/cura-select/cura-select.js.map +1 -1
- package/dist/collection/components/forms/cura-select-options/cura-select-option.css +15 -0
- package/dist/components/cura-calendar.js +1 -1
- package/dist/components/cura-dropdown-search.js +25 -5
- package/dist/components/cura-dropdown-search.js.map +1 -1
- package/dist/components/cura-input-date.js +3 -3
- package/dist/components/cura-modal.js +11 -2
- package/dist/components/cura-modal.js.map +1 -1
- package/dist/components/cura-select-option.js +1 -1
- package/dist/components/cura-select.js +1 -1
- package/dist/components/p-CvdWbsfO.js +2147 -0
- package/dist/components/p-CvdWbsfO.js.map +1 -0
- package/dist/components/p-D1cPOZpG.js.map +1 -1
- package/dist/components/{p-BGnJiNyu.js → p-DETZu2ie.js} +4 -4
- package/dist/components/{p-BGnJiNyu.js.map → p-DETZu2ie.js.map} +1 -1
- package/dist/components/{p-DpIu_Oxz.js → p-Dt450DkQ.js} +3 -3
- package/dist/components/p-Dt450DkQ.js.map +1 -0
- package/dist/cura/cura-modal.entry.esm.js.map +1 -1
- package/dist/cura/cura.esm.js +1 -1
- package/dist/cura/p-2ab58335.entry.js +2 -0
- package/dist/cura/p-2ab58335.entry.js.map +1 -0
- package/dist/cura/p-5ed7ce95.entry.js +2 -0
- package/dist/cura/p-5ed7ce95.entry.js.map +1 -0
- package/dist/cura/p-PPMZr_VE.js.map +1 -1
- package/dist/esm/{cura-accordion_20.entry.js → cura-accordion_21.entry.js} +1815 -21
- package/dist/esm/cura-accordion_21.entry.js.map +1 -0
- package/dist/esm/cura-modal.entry.js +10 -2
- package/dist/esm/cura-modal.entry.js.map +1 -1
- package/dist/esm/cura.js +1 -1
- package/dist/esm/index-OdKytJIH.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cura-dropdown-search/cura-dropdown-search.d.ts +2 -0
- package/dist/types/components/cura-modal/cura-modal.d.ts +5 -0
- package/dist/types/components/cura-modal/cura-modal.stories.d.ts +11 -0
- package/dist/types/components/forms/cura-select/cura-select.d.ts +21 -0
- package/dist/types/components.d.ts +10 -0
- package/package.json +3 -2
- package/dist/cjs/cura-accordion_20.cjs.entry.js.map +0 -1
- package/dist/cjs/cura-card.cjs.entry.js +0 -81
- package/dist/cjs/cura-card.cjs.entry.js.map +0 -1
- package/dist/cjs/cura-card.entry.cjs.js.map +0 -1
- package/dist/components/p-BTt-pVTn.js +0 -442
- package/dist/components/p-BTt-pVTn.js.map +0 -1
- package/dist/components/p-DpIu_Oxz.js.map +0 -1
- package/dist/cura/cura-card.entry.esm.js.map +0 -1
- package/dist/cura/p-d8aeca82.entry.js +0 -2
- package/dist/cura/p-d8aeca82.entry.js.map +0 -1
- package/dist/cura/p-deb0b764.entry.js +0 -2
- package/dist/cura/p-deb0b764.entry.js.map +0 -1
- package/dist/cura/p-df7cb250.entry.js +0 -2
- package/dist/cura/p-df7cb250.entry.js.map +0 -1
- package/dist/esm/cura-accordion_20.entry.js.map +0 -1
- package/dist/esm/cura-card.entry.js +0 -79
- 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
|