wcs-core 4.0.0 → 4.0.2
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/wcs-native-select.cjs.entry.js +2 -2
- package/dist/cjs/wcs-native-select.cjs.entry.js.map +1 -1
- package/dist/collection/components/native-select/native-select.component.js +1 -1
- package/dist/collection/components/native-select/native-select.component.js.map +1 -1
- package/dist/collection/components/native-select/native-select.css +1 -1
- package/dist/esm/wcs-native-select.entry.js +2 -2
- package/dist/esm/wcs-native-select.entry.js.map +1 -1
- package/dist/wcs/p-5a7999bb.entry.js +2 -0
- package/dist/wcs/p-5a7999bb.entry.js.map +1 -0
- package/dist/wcs/wcs.esm.js +1 -1
- package/package.json +1 -1
- package/dist/wcs/p-029eb12a.entry.js +0 -2
- package/dist/wcs/p-029eb12a.entry.js.map +0 -1
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-ca67a6dc.js');
|
|
6
6
|
const selectArrow = require('./select-arrow-c9583ea9.js');
|
|
7
7
|
|
|
8
|
-
const nativeSelectCss = ":host{width:100%;box-sizing:border-box}::slotted(select){box-sizing:border-box;-moz-appearance:none !important;-webkit-appearance:none !important;appearance:none !important;--wcs-select-native-ligther-percentage:40;--wcs-select-native-border-radius:var(--wcs-border-radius);--wcs-select-native-background-color:var(--wcs-light);--wcs-select-native-placeholder-color:var(--wcs-text-medium);--wcs-select-native-value-color:var(--wcs-primary);--wcs-select-native-border-color:transparent;--wcs-select-native-overlay-max-height:360px;--wcs-select-native-border-width:2px;background-color:var(--wcs-select-native-background-color);color:var(--wcs-select-native-color);border-radius:var(--wcs-border-radius);border:none;outline:none;user-select:none;cursor:pointer;line-height:1.5;font-size:1rem;width:100%;padding-right:calc(var(--wcs-base-margin) * 2);padding-left:calc(var(--wcs-base-margin) * 2)}::slotted(select:disabled){cursor:not-allowed;color:var(--wcs-text-disabled)}:host([data-disabled]) .select-wrapper .arrow-container .arrow{fill:var(--wcs-text-medium)}:host([data-size=m]) ::slotted(select){height:var(--wcs-size-m)}:host([data-size=l]) ::slotted(select){height:var(--wcs-size-l)}::slotted(select:focus){background-clip:padding-box;box-shadow:inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-
|
|
8
|
+
const nativeSelectCss = ":host{width:100%;box-sizing:border-box}::slotted(select){box-sizing:border-box;-moz-appearance:none !important;-webkit-appearance:none !important;appearance:none !important;--wcs-select-native-ligther-percentage:40;--wcs-select-native-border-radius:var(--wcs-border-radius);--wcs-select-native-background-color:var(--wcs-light);--wcs-select-native-placeholder-color:var(--wcs-text-medium);--wcs-select-native-value-color:var(--wcs-primary);--wcs-select-native-border-color:transparent;--wcs-select-native-overlay-max-height:360px;--wcs-select-native-border-width:2px;background-color:var(--wcs-select-native-background-color);color:var(--wcs-select-native-color);border-radius:var(--wcs-border-radius);border:none;outline:none;user-select:none;cursor:pointer;line-height:1.5;font-size:1rem;width:100%;padding-right:calc(var(--wcs-base-margin) * 2);padding-left:calc(var(--wcs-base-margin) * 2)}::slotted(select:disabled){cursor:not-allowed;color:var(--wcs-text-disabled)}:host([data-disabled]) .select-wrapper .arrow-container .arrow{fill:var(--wcs-text-medium)}:host([data-size=m]) ::slotted(select){height:var(--wcs-size-m)}:host([data-size=l]) ::slotted(select){height:var(--wcs-size-l)}::slotted(select:focus){background-clip:padding-box;box-shadow:inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-primary);background-color:var(--wcs-white)}.select-wrapper{position:relative}svg{flex-shrink:0}.arrow{fill:var(--wcs-primary)}.arrow-container{pointer-events:none;display:flex;align-items:center;vertical-align:center;position:absolute;top:0;bottom:0;right:calc(var(--wcs-padding) - 1px);margin:auto 0}";
|
|
9
9
|
|
|
10
10
|
const NativeSelect = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -52,7 +52,7 @@ const NativeSelect = class {
|
|
|
52
52
|
* @private
|
|
53
53
|
*/
|
|
54
54
|
applySelectedOptionStylesOnNativeSlottedSelectElement() {
|
|
55
|
-
this.selectElement.style.color = "var(--wcs-
|
|
55
|
+
this.selectElement.style.color = "var(--wcs-primary)";
|
|
56
56
|
this.selectElement.style.fontStyle = 'normal';
|
|
57
57
|
this.selectElement.style.fontWeight = '500';
|
|
58
58
|
Array.from(this.selectElement.options).forEach(option => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"wcs-native-select.entry.cjs.js","mappings":"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","names":["h","Host","SelectArrow"],"sources":["./src/components/native-select/native-select.scss?tag=wcs-native-select&encapsulation=shadow","./src/components/native-select/native-select.component.tsx"],"sourcesContent":["// TODO: voir pour mettre en commun avec le style du composant personnalisée\n@import '../../style/focus-outline.scss';\n\n:host {\n width: 100%;\n box-sizing: border-box;\n}\n\n::slotted(select) {\n box-sizing: border-box;\n -moz-appearance:none !important;\n -webkit-appearance: none !important;\n appearance: none !important;\n\n --wcs-select-native-ligther-percentage: 40;\n --wcs-select-native-border-radius: var(--wcs-border-radius);\n --wcs-select-native-background-color: var(--wcs-light);\n --wcs-select-native-placeholder-color: var(--wcs-text-medium);\n --wcs-select-native-value-color: var(--wcs-primary);\n --wcs-select-native-border-color: transparent;\n --wcs-select-native-overlay-max-height: 360px;\n --wcs-select-native-border-width: 2px;\n\n background-color: var(--wcs-select-native-background-color);\n\n color: var(--wcs-select-native-color);\n\n border-radius: var(--wcs-border-radius);\n border: none;\n\n outline: none;\n user-select: none;\n cursor: pointer;\n line-height: 1.5;\n font-size: 1rem;\n width: 100%;\n padding-right: calc(var(--wcs-base-margin) * 2);\n padding-left: calc(var(--wcs-base-margin) * 2);\n}\n\n::slotted(select:disabled) {\n cursor: not-allowed;\n color: var(--wcs-text-disabled);\n}\n\n:host([data-disabled]) {\n .select-wrapper {\n .arrow-container {\n .arrow {\n fill: var(--wcs-text-medium);\n }\n }\n }\n}\n\n:host([data-size=m]) {\n ::slotted(select) {\n height: var(--wcs-size-m);\n }\n}\n\n:host([data-size=l]) {\n ::slotted(select) {\n height: var(--wcs-size-l);\n }\n}\n\n::slotted(select:focus) {\n background-clip: padding-box;\n box-shadow: inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-blue);\n background-color: var(--wcs-white);\n}\n\n.select-wrapper {\n position: relative;\n}\n\n// So the arrow on the right doesn't shrink when text overflows.\nsvg {\n flex-shrink: 0;\n}\n\n.arrow {\n fill: var(--wcs-primary);\n}\n\n.arrow-container {\n pointer-events: none;\n display: flex;\n align-items: center;\n vertical-align: center;\n\n position: absolute;\n top: 0;\n bottom: 0;\n right: calc(var(--wcs-padding) - 1px);\n margin: auto 0;\n}\n","import { Component, h, ComponentInterface, State, Prop, Host, Element } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsSize } from \"../../shared-types\";\n\nexport type WcsNativeSelectSize = Extract<WcsSize, 'l' | 'm'>; // todo: move into common file with custom select\n\n\n\n/**\n * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice\n * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the\n * properties of the <select> and <option> elements in this component.\n *\n * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * Example usage:\n *\n * <wcs-native-select>\n * <select>\n * <option value=\"option1\">Option 1</option>\n * <option value=\"option2\">Option 2</option>\n * <option value=\"option3\">Option 3</option>\n * </select>\n * </wcs-native-select>\n */\n@Component({\n tag: 'wcs-native-select',\n styleUrl: 'native-select.scss',\n shadow: true\n})\nexport class NativeSelect implements ComponentInterface {\n /**\n * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n * There are two possible size options:\n * - 'm': medium size\n * - 'l': large size\n *\n * The default value is 'm'.\n */\n @Prop({ reflect: true }) size: WcsNativeSelectSize = 'm';\n\n @Element() private el!: HTMLWcsNativeSelectElement;\n\n @State() private expanded: boolean = false;\n @State() private disabled: boolean;\n\n private selectElement: HTMLSelectElement;\n private observer: MutationObserver;\n\n\n private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n componentWillLoad() {\n this.selectElement = this.el.querySelector('select');\n if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n this.onSelectedOptionChange();\n\n /**\n * We use an event listener to apply the default style to the select when user chose an active option\n */\n this.selectElement.addEventListener('change', () => {\n this.onSelectedOptionChange();\n });\n\n this.observer = new MutationObserver(mutations => {\n const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n if (hasSpiedAttrMutation) {\n this.updateHostAttributeWithSlottedSelect();\n }\n });\n this.updateHostAttributeWithSlottedSelect();\n this.observer.observe(this.selectElement, {attributes: true});\n }\n\n private onSelectedOptionChange(): void {\n if (this.isPlaceholderOptionSelected()) {\n this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n } else {\n this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n }\n }\n\n private isPlaceholderOptionSelected() {\n return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n }\n\n /**\n * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n * @private\n */\n private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n this.selectElement.style.color = \"var(--wcs-blue)\";\n this.selectElement.style.fontStyle = 'normal';\n this.selectElement.style.fontWeight = '500';\n Array.from(this.selectElement.options).forEach(option => {\n option.style.fontStyle = 'normal';\n if (!option.disabled) {\n option.style.color = \"black\";\n }\n });\n }\n\n /**\n * This method apply styles when the placeholder is shown.\n *\n * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n * @private\n */\n private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n this.selectElement.style.color = \"var(--wcs-text-medium)\";\n this.selectElement.style.fontWeight = '400';\n this.selectElement.style.fontStyle = 'italic';\n Array.from(this.selectElement.options).forEach(option => {\n option.style.fontStyle = 'normal';\n if (!option.disabled) {\n option.style.color = \"black\";\n }\n });\n }\n\n private updateHostAttributeWithSlottedSelect() {\n this.disabled = this.selectElement?.hasAttribute('disabled');\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.selectElement?.removeEventListener(\"change\", () => {\n this.onSelectedOptionChange();\n });\n }\n\n render() {\n return (\n <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n <div class=\"select-wrapper\">\n <slot></slot>\n <div class=\"arrow-container\">\n <SelectArrow up={this.expanded}></SelectArrow>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"wcs-native-select.entry.cjs.js","mappings":"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","names":["h","Host","SelectArrow"],"sources":["./src/components/native-select/native-select.scss?tag=wcs-native-select&encapsulation=shadow","./src/components/native-select/native-select.component.tsx"],"sourcesContent":["// TODO: voir pour mettre en commun avec le style du composant personnalisée\n@import '../../style/focus-outline.scss';\n\n:host {\n width: 100%;\n box-sizing: border-box;\n}\n\n::slotted(select) {\n box-sizing: border-box;\n -moz-appearance:none !important;\n -webkit-appearance: none !important;\n appearance: none !important;\n\n --wcs-select-native-ligther-percentage: 40;\n --wcs-select-native-border-radius: var(--wcs-border-radius);\n --wcs-select-native-background-color: var(--wcs-light);\n --wcs-select-native-placeholder-color: var(--wcs-text-medium);\n --wcs-select-native-value-color: var(--wcs-primary);\n --wcs-select-native-border-color: transparent;\n --wcs-select-native-overlay-max-height: 360px;\n --wcs-select-native-border-width: 2px;\n\n background-color: var(--wcs-select-native-background-color);\n\n color: var(--wcs-select-native-color);\n\n border-radius: var(--wcs-border-radius);\n border: none;\n\n outline: none;\n user-select: none;\n cursor: pointer;\n line-height: 1.5;\n font-size: 1rem;\n width: 100%;\n padding-right: calc(var(--wcs-base-margin) * 2);\n padding-left: calc(var(--wcs-base-margin) * 2);\n}\n\n::slotted(select:disabled) {\n cursor: not-allowed;\n color: var(--wcs-text-disabled);\n}\n\n:host([data-disabled]) {\n .select-wrapper {\n .arrow-container {\n .arrow {\n fill: var(--wcs-text-medium);\n }\n }\n }\n}\n\n:host([data-size=m]) {\n ::slotted(select) {\n height: var(--wcs-size-m);\n }\n}\n\n:host([data-size=l]) {\n ::slotted(select) {\n height: var(--wcs-size-l);\n }\n}\n\n::slotted(select:focus) {\n background-clip: padding-box;\n box-shadow: inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-primary);\n background-color: var(--wcs-white);\n}\n\n.select-wrapper {\n position: relative;\n}\n\n// So the arrow on the right doesn't shrink when text overflows.\nsvg {\n flex-shrink: 0;\n}\n\n.arrow {\n fill: var(--wcs-primary);\n}\n\n.arrow-container {\n pointer-events: none;\n display: flex;\n align-items: center;\n vertical-align: center;\n\n position: absolute;\n top: 0;\n bottom: 0;\n right: calc(var(--wcs-padding) - 1px);\n margin: auto 0;\n}\n","import { Component, h, ComponentInterface, State, Prop, Host, Element } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsSize } from \"../../shared-types\";\n\nexport type WcsNativeSelectSize = Extract<WcsSize, 'l' | 'm'>; // todo: move into common file with custom select\n\n\n\n/**\n * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice\n * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the\n * properties of the <select> and <option> elements in this component.\n *\n * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * Example usage:\n *\n * <wcs-native-select>\n * <select>\n * <option value=\"option1\">Option 1</option>\n * <option value=\"option2\">Option 2</option>\n * <option value=\"option3\">Option 3</option>\n * </select>\n * </wcs-native-select>\n */\n@Component({\n tag: 'wcs-native-select',\n styleUrl: 'native-select.scss',\n shadow: true\n})\nexport class NativeSelect implements ComponentInterface {\n /**\n * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n * There are two possible size options:\n * - 'm': medium size\n * - 'l': large size\n *\n * The default value is 'm'.\n */\n @Prop({ reflect: true }) size: WcsNativeSelectSize = 'm';\n\n @Element() private el!: HTMLWcsNativeSelectElement;\n\n @State() private expanded: boolean = false;\n @State() private disabled: boolean;\n\n private selectElement: HTMLSelectElement;\n private observer: MutationObserver;\n\n\n private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n componentWillLoad() {\n this.selectElement = this.el.querySelector('select');\n if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n this.onSelectedOptionChange();\n\n /**\n * We use an event listener to apply the default style to the select when user chose an active option\n */\n this.selectElement.addEventListener('change', () => {\n this.onSelectedOptionChange();\n });\n\n this.observer = new MutationObserver(mutations => {\n const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n if (hasSpiedAttrMutation) {\n this.updateHostAttributeWithSlottedSelect();\n }\n });\n this.updateHostAttributeWithSlottedSelect();\n this.observer.observe(this.selectElement, {attributes: true});\n }\n\n private onSelectedOptionChange(): void {\n if (this.isPlaceholderOptionSelected()) {\n this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n } else {\n this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n }\n }\n\n private isPlaceholderOptionSelected() {\n return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n }\n\n /**\n * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n * @private\n */\n private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n this.selectElement.style.color = \"var(--wcs-primary)\";\n this.selectElement.style.fontStyle = 'normal';\n this.selectElement.style.fontWeight = '500';\n Array.from(this.selectElement.options).forEach(option => {\n option.style.fontStyle = 'normal';\n if (!option.disabled) {\n option.style.color = \"black\";\n }\n });\n }\n\n /**\n * This method apply styles when the placeholder is shown.\n *\n * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n * @private\n */\n private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n this.selectElement.style.color = \"var(--wcs-text-medium)\";\n this.selectElement.style.fontWeight = '400';\n this.selectElement.style.fontStyle = 'italic';\n Array.from(this.selectElement.options).forEach(option => {\n option.style.fontStyle = 'normal';\n if (!option.disabled) {\n option.style.color = \"black\";\n }\n });\n }\n\n private updateHostAttributeWithSlottedSelect() {\n this.disabled = this.selectElement?.hasAttribute('disabled');\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.selectElement?.removeEventListener(\"change\", () => {\n this.onSelectedOptionChange();\n });\n }\n\n render() {\n return (\n <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n <div class=\"select-wrapper\">\n <slot></slot>\n <div class=\"arrow-container\">\n <SelectArrow up={this.expanded}></SelectArrow>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -62,7 +62,7 @@ export class NativeSelect {
|
|
|
62
62
|
* @private
|
|
63
63
|
*/
|
|
64
64
|
applySelectedOptionStylesOnNativeSlottedSelectElement() {
|
|
65
|
-
this.selectElement.style.color = "var(--wcs-
|
|
65
|
+
this.selectElement.style.color = "var(--wcs-primary)";
|
|
66
66
|
this.selectElement.style.fontStyle = 'normal';
|
|
67
67
|
this.selectElement.style.fontWeight = '500';
|
|
68
68
|
Array.from(this.selectElement.options).forEach(option => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"native-select.component.js","sourceRoot":"","sources":["../../../src/components/native-select/native-select.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAOrD;;;;;;;;;;;;;;;;;GAiBG;AAMH,MAAM,OAAO,YAAY;;IAoBJ,2CAAsC,GAAG,CAAC,UAAU,CAAC,CAAC;gBAXlB,GAAG;oBAInB,KAAK;;;EAS1C,iBAAiB;IACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACrD,IAAI,CAAC,IAAI,CAAC,aAAa;MAAE,MAAM,IAAI,KAAK,CAAC,iGAAiG,CAAC,CAAC;IAE5I,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAE9B;;OAEG;IACH,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;MAC/C,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;MAC7C,MAAM,oBAAoB,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,sCAAsC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;MACrI,IAAI,oBAAoB,EAAE;QACtB,IAAI,CAAC,oCAAoC,EAAE,CAAC;OAC/C;IACL,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,oCAAoC,EAAE,CAAC;IAC5C,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC,CAAC;EAClE,CAAC;EAEO,sBAAsB;IAC1B,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;MACpC,IAAI,CAAC,kDAAkD,EAAE,CAAC;KAC7D;SAAM;MACH,IAAI,CAAC,qDAAqD,EAAE,CAAC;KAChE;EACL,CAAC;EAEO,2BAA2B;;IAC/B,OAAO,CAAA,MAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,0CAAE,QAAQ,KAAI,IAAI,CAAC;EAC/F,CAAC;EAED;;;KAGG;EACK,qDAAqD;IACzD,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,
|
|
1
|
+
{"version":3,"file":"native-select.component.js","sourceRoot":"","sources":["../../../src/components/native-select/native-select.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, ComponentInterface, State, Prop, Host, Element } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsSize } from \"../../shared-types\";\n\nexport type WcsNativeSelectSize = Extract<WcsSize, 'l' | 'm'>; // todo: move into common file with custom select\n\n\n\n/**\n * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice\n * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the\n * properties of the <select> and <option> elements in this component.\n *\n * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * Example usage:\n *\n * <wcs-native-select>\n * <select>\n * <option value=\"option1\">Option 1</option>\n * <option value=\"option2\">Option 2</option>\n * <option value=\"option3\">Option 3</option>\n * </select>\n * </wcs-native-select>\n */\n@Component({\n tag: 'wcs-native-select',\n styleUrl: 'native-select.scss',\n shadow: true\n})\nexport class NativeSelect implements ComponentInterface {\n /**\n * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n * There are two possible size options:\n * - 'm': medium size\n * - 'l': large size\n *\n * The default value is 'm'.\n */\n @Prop({ reflect: true }) size: WcsNativeSelectSize = 'm';\n\n @Element() private el!: HTMLWcsNativeSelectElement;\n\n @State() private expanded: boolean = false;\n @State() private disabled: boolean;\n\n private selectElement: HTMLSelectElement;\n private observer: MutationObserver;\n\n\n private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n componentWillLoad() {\n this.selectElement = this.el.querySelector('select');\n if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n this.onSelectedOptionChange();\n\n /**\n * We use an event listener to apply the default style to the select when user chose an active option\n */\n this.selectElement.addEventListener('change', () => {\n this.onSelectedOptionChange();\n });\n\n this.observer = new MutationObserver(mutations => {\n const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n if (hasSpiedAttrMutation) {\n this.updateHostAttributeWithSlottedSelect();\n }\n });\n this.updateHostAttributeWithSlottedSelect();\n this.observer.observe(this.selectElement, {attributes: true});\n }\n\n private onSelectedOptionChange(): void {\n if (this.isPlaceholderOptionSelected()) {\n this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n } else {\n this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n }\n }\n\n private isPlaceholderOptionSelected() {\n return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n }\n\n /**\n * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n * @private\n */\n private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n this.selectElement.style.color = \"var(--wcs-primary)\";\n this.selectElement.style.fontStyle = 'normal';\n this.selectElement.style.fontWeight = '500';\n Array.from(this.selectElement.options).forEach(option => {\n option.style.fontStyle = 'normal';\n if (!option.disabled) {\n option.style.color = \"black\";\n }\n });\n }\n\n /**\n * This method apply styles when the placeholder is shown.\n *\n * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n * @private\n */\n private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n this.selectElement.style.color = \"var(--wcs-text-medium)\";\n this.selectElement.style.fontWeight = '400';\n this.selectElement.style.fontStyle = 'italic';\n Array.from(this.selectElement.options).forEach(option => {\n option.style.fontStyle = 'normal';\n if (!option.disabled) {\n option.style.color = \"black\";\n }\n });\n }\n\n private updateHostAttributeWithSlottedSelect() {\n this.disabled = this.selectElement?.hasAttribute('disabled');\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.selectElement?.removeEventListener(\"change\", () => {\n this.onSelectedOptionChange();\n });\n }\n\n render() {\n return (\n <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n <div class=\"select-wrapper\">\n <slot></slot>\n <div class=\"arrow-container\">\n <SelectArrow up={this.expanded}></SelectArrow>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
|
|
50
50
|
::slotted(select:focus) {
|
|
51
51
|
background-clip: padding-box;
|
|
52
|
-
box-shadow: inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-
|
|
52
|
+
box-shadow: inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-primary);
|
|
53
53
|
background-color: var(--wcs-white);
|
|
54
54
|
}
|
|
55
55
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-dc4d96d4.js';
|
|
2
2
|
import { S as SelectArrow } from './select-arrow-81d069f7.js';
|
|
3
3
|
|
|
4
|
-
const nativeSelectCss = ":host{width:100%;box-sizing:border-box}::slotted(select){box-sizing:border-box;-moz-appearance:none !important;-webkit-appearance:none !important;appearance:none !important;--wcs-select-native-ligther-percentage:40;--wcs-select-native-border-radius:var(--wcs-border-radius);--wcs-select-native-background-color:var(--wcs-light);--wcs-select-native-placeholder-color:var(--wcs-text-medium);--wcs-select-native-value-color:var(--wcs-primary);--wcs-select-native-border-color:transparent;--wcs-select-native-overlay-max-height:360px;--wcs-select-native-border-width:2px;background-color:var(--wcs-select-native-background-color);color:var(--wcs-select-native-color);border-radius:var(--wcs-border-radius);border:none;outline:none;user-select:none;cursor:pointer;line-height:1.5;font-size:1rem;width:100%;padding-right:calc(var(--wcs-base-margin) * 2);padding-left:calc(var(--wcs-base-margin) * 2)}::slotted(select:disabled){cursor:not-allowed;color:var(--wcs-text-disabled)}:host([data-disabled]) .select-wrapper .arrow-container .arrow{fill:var(--wcs-text-medium)}:host([data-size=m]) ::slotted(select){height:var(--wcs-size-m)}:host([data-size=l]) ::slotted(select){height:var(--wcs-size-l)}::slotted(select:focus){background-clip:padding-box;box-shadow:inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-
|
|
4
|
+
const nativeSelectCss = ":host{width:100%;box-sizing:border-box}::slotted(select){box-sizing:border-box;-moz-appearance:none !important;-webkit-appearance:none !important;appearance:none !important;--wcs-select-native-ligther-percentage:40;--wcs-select-native-border-radius:var(--wcs-border-radius);--wcs-select-native-background-color:var(--wcs-light);--wcs-select-native-placeholder-color:var(--wcs-text-medium);--wcs-select-native-value-color:var(--wcs-primary);--wcs-select-native-border-color:transparent;--wcs-select-native-overlay-max-height:360px;--wcs-select-native-border-width:2px;background-color:var(--wcs-select-native-background-color);color:var(--wcs-select-native-color);border-radius:var(--wcs-border-radius);border:none;outline:none;user-select:none;cursor:pointer;line-height:1.5;font-size:1rem;width:100%;padding-right:calc(var(--wcs-base-margin) * 2);padding-left:calc(var(--wcs-base-margin) * 2)}::slotted(select:disabled){cursor:not-allowed;color:var(--wcs-text-disabled)}:host([data-disabled]) .select-wrapper .arrow-container .arrow{fill:var(--wcs-text-medium)}:host([data-size=m]) ::slotted(select){height:var(--wcs-size-m)}:host([data-size=l]) ::slotted(select){height:var(--wcs-size-l)}::slotted(select:focus){background-clip:padding-box;box-shadow:inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-primary);background-color:var(--wcs-white)}.select-wrapper{position:relative}svg{flex-shrink:0}.arrow{fill:var(--wcs-primary)}.arrow-container{pointer-events:none;display:flex;align-items:center;vertical-align:center;position:absolute;top:0;bottom:0;right:calc(var(--wcs-padding) - 1px);margin:auto 0}";
|
|
5
5
|
|
|
6
6
|
const NativeSelect = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -48,7 +48,7 @@ const NativeSelect = class {
|
|
|
48
48
|
* @private
|
|
49
49
|
*/
|
|
50
50
|
applySelectedOptionStylesOnNativeSlottedSelectElement() {
|
|
51
|
-
this.selectElement.style.color = "var(--wcs-
|
|
51
|
+
this.selectElement.style.color = "var(--wcs-primary)";
|
|
52
52
|
this.selectElement.style.fontStyle = 'normal';
|
|
53
53
|
this.selectElement.style.fontWeight = '500';
|
|
54
54
|
Array.from(this.selectElement.options).forEach(option => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"wcs-native-select.entry.js","mappings":"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","names":[],"sources":["./src/components/native-select/native-select.scss?tag=wcs-native-select&encapsulation=shadow","./src/components/native-select/native-select.component.tsx"],"sourcesContent":["// TODO: voir pour mettre en commun avec le style du composant personnalisée\n@import '../../style/focus-outline.scss';\n\n:host {\n width: 100%;\n box-sizing: border-box;\n}\n\n::slotted(select) {\n box-sizing: border-box;\n -moz-appearance:none !important;\n -webkit-appearance: none !important;\n appearance: none !important;\n\n --wcs-select-native-ligther-percentage: 40;\n --wcs-select-native-border-radius: var(--wcs-border-radius);\n --wcs-select-native-background-color: var(--wcs-light);\n --wcs-select-native-placeholder-color: var(--wcs-text-medium);\n --wcs-select-native-value-color: var(--wcs-primary);\n --wcs-select-native-border-color: transparent;\n --wcs-select-native-overlay-max-height: 360px;\n --wcs-select-native-border-width: 2px;\n\n background-color: var(--wcs-select-native-background-color);\n\n color: var(--wcs-select-native-color);\n\n border-radius: var(--wcs-border-radius);\n border: none;\n\n outline: none;\n user-select: none;\n cursor: pointer;\n line-height: 1.5;\n font-size: 1rem;\n width: 100%;\n padding-right: calc(var(--wcs-base-margin) * 2);\n padding-left: calc(var(--wcs-base-margin) * 2);\n}\n\n::slotted(select:disabled) {\n cursor: not-allowed;\n color: var(--wcs-text-disabled);\n}\n\n:host([data-disabled]) {\n .select-wrapper {\n .arrow-container {\n .arrow {\n fill: var(--wcs-text-medium);\n }\n }\n }\n}\n\n:host([data-size=m]) {\n ::slotted(select) {\n height: var(--wcs-size-m);\n }\n}\n\n:host([data-size=l]) {\n ::slotted(select) {\n height: var(--wcs-size-l);\n }\n}\n\n::slotted(select:focus) {\n background-clip: padding-box;\n box-shadow: inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-blue);\n background-color: var(--wcs-white);\n}\n\n.select-wrapper {\n position: relative;\n}\n\n// So the arrow on the right doesn't shrink when text overflows.\nsvg {\n flex-shrink: 0;\n}\n\n.arrow {\n fill: var(--wcs-primary);\n}\n\n.arrow-container {\n pointer-events: none;\n display: flex;\n align-items: center;\n vertical-align: center;\n\n position: absolute;\n top: 0;\n bottom: 0;\n right: calc(var(--wcs-padding) - 1px);\n margin: auto 0;\n}\n","import { Component, h, ComponentInterface, State, Prop, Host, Element } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsSize } from \"../../shared-types\";\n\nexport type WcsNativeSelectSize = Extract<WcsSize, 'l' | 'm'>; // todo: move into common file with custom select\n\n\n\n/**\n * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice\n * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the\n * properties of the <select> and <option> elements in this component.\n *\n * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * Example usage:\n *\n * <wcs-native-select>\n * <select>\n * <option value=\"option1\">Option 1</option>\n * <option value=\"option2\">Option 2</option>\n * <option value=\"option3\">Option 3</option>\n * </select>\n * </wcs-native-select>\n */\n@Component({\n tag: 'wcs-native-select',\n styleUrl: 'native-select.scss',\n shadow: true\n})\nexport class NativeSelect implements ComponentInterface {\n /**\n * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n * There are two possible size options:\n * - 'm': medium size\n * - 'l': large size\n *\n * The default value is 'm'.\n */\n @Prop({ reflect: true }) size: WcsNativeSelectSize = 'm';\n\n @Element() private el!: HTMLWcsNativeSelectElement;\n\n @State() private expanded: boolean = false;\n @State() private disabled: boolean;\n\n private selectElement: HTMLSelectElement;\n private observer: MutationObserver;\n\n\n private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n componentWillLoad() {\n this.selectElement = this.el.querySelector('select');\n if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n this.onSelectedOptionChange();\n\n /**\n * We use an event listener to apply the default style to the select when user chose an active option\n */\n this.selectElement.addEventListener('change', () => {\n this.onSelectedOptionChange();\n });\n\n this.observer = new MutationObserver(mutations => {\n const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n if (hasSpiedAttrMutation) {\n this.updateHostAttributeWithSlottedSelect();\n }\n });\n this.updateHostAttributeWithSlottedSelect();\n this.observer.observe(this.selectElement, {attributes: true});\n }\n\n private onSelectedOptionChange(): void {\n if (this.isPlaceholderOptionSelected()) {\n this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n } else {\n this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n }\n }\n\n private isPlaceholderOptionSelected() {\n return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n }\n\n /**\n * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n * @private\n */\n private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n this.selectElement.style.color = \"var(--wcs-blue)\";\n this.selectElement.style.fontStyle = 'normal';\n this.selectElement.style.fontWeight = '500';\n Array.from(this.selectElement.options).forEach(option => {\n option.style.fontStyle = 'normal';\n if (!option.disabled) {\n option.style.color = \"black\";\n }\n });\n }\n\n /**\n * This method apply styles when the placeholder is shown.\n *\n * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n * @private\n */\n private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n this.selectElement.style.color = \"var(--wcs-text-medium)\";\n this.selectElement.style.fontWeight = '400';\n this.selectElement.style.fontStyle = 'italic';\n Array.from(this.selectElement.options).forEach(option => {\n option.style.fontStyle = 'normal';\n if (!option.disabled) {\n option.style.color = \"black\";\n }\n });\n }\n\n private updateHostAttributeWithSlottedSelect() {\n this.disabled = this.selectElement?.hasAttribute('disabled');\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.selectElement?.removeEventListener(\"change\", () => {\n this.onSelectedOptionChange();\n });\n }\n\n render() {\n return (\n <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n <div class=\"select-wrapper\">\n <slot></slot>\n <div class=\"arrow-container\">\n <SelectArrow up={this.expanded}></SelectArrow>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"wcs-native-select.entry.js","mappings":"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","names":[],"sources":["./src/components/native-select/native-select.scss?tag=wcs-native-select&encapsulation=shadow","./src/components/native-select/native-select.component.tsx"],"sourcesContent":["// TODO: voir pour mettre en commun avec le style du composant personnalisée\n@import '../../style/focus-outline.scss';\n\n:host {\n width: 100%;\n box-sizing: border-box;\n}\n\n::slotted(select) {\n box-sizing: border-box;\n -moz-appearance:none !important;\n -webkit-appearance: none !important;\n appearance: none !important;\n\n --wcs-select-native-ligther-percentage: 40;\n --wcs-select-native-border-radius: var(--wcs-border-radius);\n --wcs-select-native-background-color: var(--wcs-light);\n --wcs-select-native-placeholder-color: var(--wcs-text-medium);\n --wcs-select-native-value-color: var(--wcs-primary);\n --wcs-select-native-border-color: transparent;\n --wcs-select-native-overlay-max-height: 360px;\n --wcs-select-native-border-width: 2px;\n\n background-color: var(--wcs-select-native-background-color);\n\n color: var(--wcs-select-native-color);\n\n border-radius: var(--wcs-border-radius);\n border: none;\n\n outline: none;\n user-select: none;\n cursor: pointer;\n line-height: 1.5;\n font-size: 1rem;\n width: 100%;\n padding-right: calc(var(--wcs-base-margin) * 2);\n padding-left: calc(var(--wcs-base-margin) * 2);\n}\n\n::slotted(select:disabled) {\n cursor: not-allowed;\n color: var(--wcs-text-disabled);\n}\n\n:host([data-disabled]) {\n .select-wrapper {\n .arrow-container {\n .arrow {\n fill: var(--wcs-text-medium);\n }\n }\n }\n}\n\n:host([data-size=m]) {\n ::slotted(select) {\n height: var(--wcs-size-m);\n }\n}\n\n:host([data-size=l]) {\n ::slotted(select) {\n height: var(--wcs-size-l);\n }\n}\n\n::slotted(select:focus) {\n background-clip: padding-box;\n box-shadow: inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-primary);\n background-color: var(--wcs-white);\n}\n\n.select-wrapper {\n position: relative;\n}\n\n// So the arrow on the right doesn't shrink when text overflows.\nsvg {\n flex-shrink: 0;\n}\n\n.arrow {\n fill: var(--wcs-primary);\n}\n\n.arrow-container {\n pointer-events: none;\n display: flex;\n align-items: center;\n vertical-align: center;\n\n position: absolute;\n top: 0;\n bottom: 0;\n right: calc(var(--wcs-padding) - 1px);\n margin: auto 0;\n}\n","import { Component, h, ComponentInterface, State, Prop, Host, Element } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsSize } from \"../../shared-types\";\n\nexport type WcsNativeSelectSize = Extract<WcsSize, 'l' | 'm'>; // todo: move into common file with custom select\n\n\n\n/**\n * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice\n * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the\n * properties of the <select> and <option> elements in this component.\n *\n * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * Example usage:\n *\n * <wcs-native-select>\n * <select>\n * <option value=\"option1\">Option 1</option>\n * <option value=\"option2\">Option 2</option>\n * <option value=\"option3\">Option 3</option>\n * </select>\n * </wcs-native-select>\n */\n@Component({\n tag: 'wcs-native-select',\n styleUrl: 'native-select.scss',\n shadow: true\n})\nexport class NativeSelect implements ComponentInterface {\n /**\n * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n * There are two possible size options:\n * - 'm': medium size\n * - 'l': large size\n *\n * The default value is 'm'.\n */\n @Prop({ reflect: true }) size: WcsNativeSelectSize = 'm';\n\n @Element() private el!: HTMLWcsNativeSelectElement;\n\n @State() private expanded: boolean = false;\n @State() private disabled: boolean;\n\n private selectElement: HTMLSelectElement;\n private observer: MutationObserver;\n\n\n private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n componentWillLoad() {\n this.selectElement = this.el.querySelector('select');\n if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n this.onSelectedOptionChange();\n\n /**\n * We use an event listener to apply the default style to the select when user chose an active option\n */\n this.selectElement.addEventListener('change', () => {\n this.onSelectedOptionChange();\n });\n\n this.observer = new MutationObserver(mutations => {\n const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n if (hasSpiedAttrMutation) {\n this.updateHostAttributeWithSlottedSelect();\n }\n });\n this.updateHostAttributeWithSlottedSelect();\n this.observer.observe(this.selectElement, {attributes: true});\n }\n\n private onSelectedOptionChange(): void {\n if (this.isPlaceholderOptionSelected()) {\n this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n } else {\n this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n }\n }\n\n private isPlaceholderOptionSelected() {\n return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n }\n\n /**\n * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n * @private\n */\n private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n this.selectElement.style.color = \"var(--wcs-primary)\";\n this.selectElement.style.fontStyle = 'normal';\n this.selectElement.style.fontWeight = '500';\n Array.from(this.selectElement.options).forEach(option => {\n option.style.fontStyle = 'normal';\n if (!option.disabled) {\n option.style.color = \"black\";\n }\n });\n }\n\n /**\n * This method apply styles when the placeholder is shown.\n *\n * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n * @private\n */\n private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n this.selectElement.style.color = \"var(--wcs-text-medium)\";\n this.selectElement.style.fontWeight = '400';\n this.selectElement.style.fontStyle = 'italic';\n Array.from(this.selectElement.options).forEach(option => {\n option.style.fontStyle = 'normal';\n if (!option.disabled) {\n option.style.color = \"black\";\n }\n });\n }\n\n private updateHostAttributeWithSlottedSelect() {\n this.disabled = this.selectElement?.hasAttribute('disabled');\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.selectElement?.removeEventListener(\"change\", () => {\n this.onSelectedOptionChange();\n });\n }\n\n render() {\n return (\n <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n <div class=\"select-wrapper\">\n <slot></slot>\n <div class=\"arrow-container\">\n <SelectArrow up={this.expanded}></SelectArrow>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as t,H as s,g as i}from"./p-a2df3a49.js";import{S as r}from"./p-d6c3e615.js";const a=":host{width:100%;box-sizing:border-box}::slotted(select){box-sizing:border-box;-moz-appearance:none !important;-webkit-appearance:none !important;appearance:none !important;--wcs-select-native-ligther-percentage:40;--wcs-select-native-border-radius:var(--wcs-border-radius);--wcs-select-native-background-color:var(--wcs-light);--wcs-select-native-placeholder-color:var(--wcs-text-medium);--wcs-select-native-value-color:var(--wcs-primary);--wcs-select-native-border-color:transparent;--wcs-select-native-overlay-max-height:360px;--wcs-select-native-border-width:2px;background-color:var(--wcs-select-native-background-color);color:var(--wcs-select-native-color);border-radius:var(--wcs-border-radius);border:none;outline:none;user-select:none;cursor:pointer;line-height:1.5;font-size:1rem;width:100%;padding-right:calc(var(--wcs-base-margin) * 2);padding-left:calc(var(--wcs-base-margin) * 2)}::slotted(select:disabled){cursor:not-allowed;color:var(--wcs-text-disabled)}:host([data-disabled]) .select-wrapper .arrow-container .arrow{fill:var(--wcs-text-medium)}:host([data-size=m]) ::slotted(select){height:var(--wcs-size-m)}:host([data-size=l]) ::slotted(select){height:var(--wcs-size-l)}::slotted(select:focus){background-clip:padding-box;box-shadow:inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-primary);background-color:var(--wcs-white)}.select-wrapper{position:relative}svg{flex-shrink:0}.arrow{fill:var(--wcs-primary)}.arrow-container{pointer-events:none;display:flex;align-items:center;vertical-align:center;position:absolute;top:0;bottom:0;right:calc(var(--wcs-padding) - 1px);margin:auto 0}";const o=class{constructor(t){e(this,t);this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST=["disabled"];this.size="m";this.expanded=false;this.disabled=undefined}componentWillLoad(){this.selectElement=this.el.querySelector("select");if(!this.selectElement)throw new Error("wcs-native-select must be used with a native slotted select, please refer to the documentation.");this.onSelectedOptionChange();this.selectElement.addEventListener("change",(()=>{this.onSelectedOptionChange()}));this.observer=new MutationObserver((e=>{const t=e.filter((e=>this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(e.attributeName))).length>0;if(t){this.updateHostAttributeWithSlottedSelect()}}));this.updateHostAttributeWithSlottedSelect();this.observer.observe(this.selectElement,{attributes:true})}onSelectedOptionChange(){if(this.isPlaceholderOptionSelected()){this.applyPlaceholderStylesOnNativeSlottedSelectElement()}else{this.applySelectedOptionStylesOnNativeSlottedSelectElement()}}isPlaceholderOptionSelected(){var e;return((e=Array.from(this.selectElement.options).filter((e=>e.selected))[0])===null||e===void 0?void 0:e.disabled)==true}applySelectedOptionStylesOnNativeSlottedSelectElement(){this.selectElement.style.color="var(--wcs-primary)";this.selectElement.style.fontStyle="normal";this.selectElement.style.fontWeight="500";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="normal";if(!e.disabled){e.style.color="black"}}))}applyPlaceholderStylesOnNativeSlottedSelectElement(){this.selectElement.style.color="var(--wcs-text-medium)";this.selectElement.style.fontWeight="400";this.selectElement.style.fontStyle="italic";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="normal";if(!e.disabled){e.style.color="black"}}))}updateHostAttributeWithSlottedSelect(){var e;this.disabled=(e=this.selectElement)===null||e===void 0?void 0:e.hasAttribute("disabled")}disconnectedCallback(){var e,t;(e=this.observer)===null||e===void 0?void 0:e.disconnect();(t=this.selectElement)===null||t===void 0?void 0:t.removeEventListener("change",(()=>{this.onSelectedOptionChange()}))}render(){return t(s,{class:`${this.expanded?"expanded":""}`,"data-disabled":this.disabled,"data-size":this.size},t("div",{class:"select-wrapper"},t("slot",null),t("div",{class:"arrow-container"},t(r,{up:this.expanded}))))}get el(){return i(this)}};o.style=a;export{o as wcs_native_select};
|
|
2
|
+
//# sourceMappingURL=p-5a7999bb.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["nativeSelectCss","NativeSelect","this","SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST","componentWillLoad","selectElement","el","querySelector","Error","onSelectedOptionChange","addEventListener","observer","MutationObserver","mutations","hasSpiedAttrMutation","filter","m","includes","attributeName","length","updateHostAttributeWithSlottedSelect","observe","attributes","isPlaceholderOptionSelected","applyPlaceholderStylesOnNativeSlottedSelectElement","applySelectedOptionStylesOnNativeSlottedSelectElement","_a","Array","from","options","o","selected","disabled","style","color","fontStyle","fontWeight","forEach","option","hasAttribute","disconnectedCallback","disconnect","_b","removeEventListener","render","h","Host","class","expanded","size","SelectArrow","up"],"sources":["./src/components/native-select/native-select.scss?tag=wcs-native-select&encapsulation=shadow","./src/components/native-select/native-select.component.tsx"],"sourcesContent":["// TODO: voir pour mettre en commun avec le style du composant personnalisée\n@import '../../style/focus-outline.scss';\n\n:host {\n width: 100%;\n box-sizing: border-box;\n}\n\n::slotted(select) {\n box-sizing: border-box;\n -moz-appearance:none !important;\n -webkit-appearance: none !important;\n appearance: none !important;\n\n --wcs-select-native-ligther-percentage: 40;\n --wcs-select-native-border-radius: var(--wcs-border-radius);\n --wcs-select-native-background-color: var(--wcs-light);\n --wcs-select-native-placeholder-color: var(--wcs-text-medium);\n --wcs-select-native-value-color: var(--wcs-primary);\n --wcs-select-native-border-color: transparent;\n --wcs-select-native-overlay-max-height: 360px;\n --wcs-select-native-border-width: 2px;\n\n background-color: var(--wcs-select-native-background-color);\n\n color: var(--wcs-select-native-color);\n\n border-radius: var(--wcs-border-radius);\n border: none;\n\n outline: none;\n user-select: none;\n cursor: pointer;\n line-height: 1.5;\n font-size: 1rem;\n width: 100%;\n padding-right: calc(var(--wcs-base-margin) * 2);\n padding-left: calc(var(--wcs-base-margin) * 2);\n}\n\n::slotted(select:disabled) {\n cursor: not-allowed;\n color: var(--wcs-text-disabled);\n}\n\n:host([data-disabled]) {\n .select-wrapper {\n .arrow-container {\n .arrow {\n fill: var(--wcs-text-medium);\n }\n }\n }\n}\n\n:host([data-size=m]) {\n ::slotted(select) {\n height: var(--wcs-size-m);\n }\n}\n\n:host([data-size=l]) {\n ::slotted(select) {\n height: var(--wcs-size-l);\n }\n}\n\n::slotted(select:focus) {\n background-clip: padding-box;\n box-shadow: inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-primary);\n background-color: var(--wcs-white);\n}\n\n.select-wrapper {\n position: relative;\n}\n\n// So the arrow on the right doesn't shrink when text overflows.\nsvg {\n flex-shrink: 0;\n}\n\n.arrow {\n fill: var(--wcs-primary);\n}\n\n.arrow-container {\n pointer-events: none;\n display: flex;\n align-items: center;\n vertical-align: center;\n\n position: absolute;\n top: 0;\n bottom: 0;\n right: calc(var(--wcs-padding) - 1px);\n margin: auto 0;\n}\n","import { Component, h, ComponentInterface, State, Prop, Host, Element } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsSize } from \"../../shared-types\";\n\nexport type WcsNativeSelectSize = Extract<WcsSize, 'l' | 'm'>; // todo: move into common file with custom select\n\n\n\n/**\n * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice\n * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the\n * properties of the <select> and <option> elements in this component.\n *\n * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * Example usage:\n *\n * <wcs-native-select>\n * <select>\n * <option value=\"option1\">Option 1</option>\n * <option value=\"option2\">Option 2</option>\n * <option value=\"option3\">Option 3</option>\n * </select>\n * </wcs-native-select>\n */\n@Component({\n tag: 'wcs-native-select',\n styleUrl: 'native-select.scss',\n shadow: true\n})\nexport class NativeSelect implements ComponentInterface {\n /**\n * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n * There are two possible size options:\n * - 'm': medium size\n * - 'l': large size\n *\n * The default value is 'm'.\n */\n @Prop({ reflect: true }) size: WcsNativeSelectSize = 'm';\n\n @Element() private el!: HTMLWcsNativeSelectElement;\n\n @State() private expanded: boolean = false;\n @State() private disabled: boolean;\n\n private selectElement: HTMLSelectElement;\n private observer: MutationObserver;\n\n\n private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n componentWillLoad() {\n this.selectElement = this.el.querySelector('select');\n if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n this.onSelectedOptionChange();\n\n /**\n * We use an event listener to apply the default style to the select when user chose an active option\n */\n this.selectElement.addEventListener('change', () => {\n this.onSelectedOptionChange();\n });\n\n this.observer = new MutationObserver(mutations => {\n const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n if (hasSpiedAttrMutation) {\n this.updateHostAttributeWithSlottedSelect();\n }\n });\n this.updateHostAttributeWithSlottedSelect();\n this.observer.observe(this.selectElement, {attributes: true});\n }\n\n private onSelectedOptionChange(): void {\n if (this.isPlaceholderOptionSelected()) {\n this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n } else {\n this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n }\n }\n\n private isPlaceholderOptionSelected() {\n return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n }\n\n /**\n * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n * @private\n */\n private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n this.selectElement.style.color = \"var(--wcs-primary)\";\n this.selectElement.style.fontStyle = 'normal';\n this.selectElement.style.fontWeight = '500';\n Array.from(this.selectElement.options).forEach(option => {\n option.style.fontStyle = 'normal';\n if (!option.disabled) {\n option.style.color = \"black\";\n }\n });\n }\n\n /**\n * This method apply styles when the placeholder is shown.\n *\n * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n * @private\n */\n private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n this.selectElement.style.color = \"var(--wcs-text-medium)\";\n this.selectElement.style.fontWeight = '400';\n this.selectElement.style.fontStyle = 'italic';\n Array.from(this.selectElement.options).forEach(option => {\n option.style.fontStyle = 'normal';\n if (!option.disabled) {\n option.style.color = \"black\";\n }\n });\n }\n\n private updateHostAttributeWithSlottedSelect() {\n this.disabled = this.selectElement?.hasAttribute('disabled');\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.selectElement?.removeEventListener(\"change\", () => {\n this.onSelectedOptionChange();\n });\n }\n\n render() {\n return (\n <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n <div class=\"select-wrapper\">\n <slot></slot>\n <div class=\"arrow-container\">\n <SelectArrow up={this.expanded}></SelectArrow>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,ilD,MC+BXC,EAAY,M,yBAoBJC,KAAAC,uCAAyC,CAAC,Y,UAXN,I,cAIhB,M,wBASrCC,oBACIF,KAAKG,cAAgBH,KAAKI,GAAGC,cAAc,UAC3C,IAAKL,KAAKG,cAAe,MAAM,IAAIG,MAAM,mGAEzCN,KAAKO,yBAKLP,KAAKG,cAAcK,iBAAiB,UAAU,KAC1CR,KAAKO,wBAAwB,IAGjCP,KAAKS,SAAW,IAAIC,kBAAiBC,IACjC,MAAMC,EAAuBD,EAAUE,QAAOC,GAAKd,KAAKC,uCAAuCc,SAASD,EAAEE,iBAAgBC,OAAS,EACnI,GAAIL,EAAsB,CACtBZ,KAAKkB,sC,KAGblB,KAAKkB,uCACLlB,KAAKS,SAASU,QAAQnB,KAAKG,cAAe,CAACiB,WAAY,M,CAGnDb,yBACJ,GAAIP,KAAKqB,8BAA+B,CACpCrB,KAAKsB,oD,KACF,CACHtB,KAAKuB,uD,EAILF,8B,MACJ,QAAOG,EAAAC,MAAMC,KAAK1B,KAAKG,cAAcwB,SAASd,QAAOe,GAAKA,EAAEC,WAAU,MAAE,MAAAL,SAAA,SAAAA,EAAEM,WAAY,I,CAOlFP,wDACJvB,KAAKG,cAAc4B,MAAMC,MAAQ,qBACjChC,KAAKG,cAAc4B,MAAME,UAAY,SACrCjC,KAAKG,cAAc4B,MAAMG,WAAa,MACtCT,MAAMC,KAAK1B,KAAKG,cAAcwB,SAASQ,SAAQC,IAC3CA,EAAOL,MAAME,UAAY,SACzB,IAAKG,EAAON,SAAU,CAClBM,EAAOL,MAAMC,MAAQ,O,KAWzBV,qDACJtB,KAAKG,cAAc4B,MAAMC,MAAQ,yBACjChC,KAAKG,cAAc4B,MAAMG,WAAa,MACtClC,KAAKG,cAAc4B,MAAME,UAAY,SACrCR,MAAMC,KAAK1B,KAAKG,cAAcwB,SAASQ,SAAQC,IAC3CA,EAAOL,MAAME,UAAY,SACzB,IAAKG,EAAON,SAAU,CAClBM,EAAOL,MAAMC,MAAQ,O,KAKzBd,uC,MACJlB,KAAK8B,UAAWN,EAAAxB,KAAKG,iBAAa,MAAAqB,SAAA,SAAAA,EAAEa,aAAa,W,CAGrDC,uB,SACId,EAAAxB,KAAKS,YAAQ,MAAAe,SAAA,SAAAA,EAAEe,cACfC,EAAAxC,KAAKG,iBAAa,MAAAqC,SAAA,SAAAA,EAAEC,oBAAoB,UAAU,KAC9CzC,KAAKO,wBAAwB,G,CAIrCmC,SACI,OACIC,EAACC,EAAI,CAACC,MAAO,GAAG7C,KAAK8C,SAAW,WAAa,KAAI,gBAAiB9C,KAAK8B,SAAQ,YAAa9B,KAAK+C,MAC7FJ,EAAA,OAAKE,MAAM,kBACPF,EAAA,aACAA,EAAA,OAAKE,MAAM,mBACPF,EAACK,EAAW,CAACC,GAAIjD,KAAK8C,a"}
|
package/dist/wcs/wcs.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as n}from"./p-a2df3a49.js";export{s as setNonce}from"./p-a2df3a49.js";const o=()=>{const n=import.meta.url;const o={};if(n!==""){o.resourcesUrl=new URL(".",n).href}return e(o)};o().then((e=>n([["p-9ecdeaf9",[[1,"wcs-editable-field",{type:[1],label:[1],readonly:[4],value:[1032],validateFn:[16],formatFn:[16],errorMsg:[1,"error-msg"],size:[513],currentState:[32],isError:[32]},[[8,"click","onWindowClickEvent"]]]]],["p-d6b3f742",[[1,"wcs-horizontal-stepper",{currentStep:[1026,"current-step"],steps:[16],mode:[1],checkOnComplete:[4,"check-on-complete"],internalCurrentStep:[32],previous:[64],next:[64]}]]],["p-a24fa4f4",[[1,"wcs-counter",{size:[513],label:[1],min:[1026],max:[1026],step:[1026],value:[1026],currentValue:[32],displayedValue:[32]}]]],["p-bcb8b731",[[1,"wcs-grid",{serverMode:[4,"server-mode"],data:[16],loading:[4],selectionConfig:[1,"selection-config"],selectedItems:[8,"selected-items"],wcsGridPaginationId:[1,"wcs-grid-pagination-id"],rowIdPath:[1,"row-id-path"],columns:[32],paginationEl:[32],rows:[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["p-463667c9",[[1,"wcs-grid-pagination",{availablePageSizes:[16],currentPage:[2,"current-page"],pageSize:[2,"page-size"],itemsCount:[2,"items-count"],pageCount:[2,"page-count"]}]]],["p-94d95b99",[[4,"wcs-modal",{withoutBackdrop:[516,"without-backdrop"],show:[516],showCloseButton:[516,"show-close-button"],size:[1],hideActions:[516,"hide-actions"]},[[4,"keydown","onKeyDown"]]]]],["p-732b2faa",[[1,"wcs-dropdown",{noArrow:[4,"no-arrow"],mode:[1],shape:[1],disabled:[4],placement:[1],expanded:[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]]]]],["p-966a241e",[[1,"wcs-galactic-menu",{text:[1],showPopoverMenu:[32]},[[8,"click","onWindowClickEvent"]]]]],["p-d2da0c9f",[[17,"wcs-input",{fireFocusEvents:[4,"fire-focus-events"],accept:[1],autocapitalize:[1],autocomplete:[1],autocorrect:[1],autofocus:[4],clearInput:[4,"clear-input"],clearOnEdit:[4,"clear-on-edit"],debounce:[2],prefixLabel:[1,"prefix-label"],suffixLabel:[1,"suffix-label"],disabled:[4],enterkeyhint:[1],size:[513],icon:[1],inputmode:[1],max:[1],maxlength:[2],min:[1],minlength:[2],multiple:[4],name:[1],pattern:[1],placeholder:[1],readonly:[4],required:[4],spellcheck:[4],state:[513],step:[1],type:[1],value:[1032],hasFocus:[32],passwordReveal:[32],setFocus:[64],setBlur:[64],getInputElement:[64]}]]],["p-26c4c983",[[1,"wcs-textarea",{fireFocusEvents:[4,"fire-focus-events"],autocapitalize:[1],autofocus:[4],clearOnEdit:[1028,"clear-on-edit"],debounce:[2],disabled:[4],icon:[1],inputmode:[1],enterkeyhint:[1],maxlength:[2],minlength:[2],name:[1],placeholder:[1],readonly:[4],required:[4],spellcheck:[4],state:[513],cols:[2],rows:[2],wrap:[1],autoGrow:[4,"auto-grow"],value:[1025],resize:[513],hasFocus:[32],fitContent:[64],setFocus:[64],setBlur:[64],getInputElement:[64]}]]],["p-b6160b7c",[[1,"wcs-accordion",{hideActionText:[516,"hide-action-text"],highlight:[516],groupContentWithHeader:[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["p-cdd172b4",[[1,"wcs-accordion-content"]]],["p-8d57835f",[[1,"wcs-accordion-header"]]],["p-810aff71",[[1,"wcs-accordion-panel",{open:[1540],hideActionText:[516,"hide-action-text"],highlight:[516],groupContentWithHeader:[516,"group-content-with-header"],close:[64]}]]],["p-fc3f5b53",[[1,"wcs-action-bar",{gutter:[4],hasTabs:[32]}]]],["p-31a8d23f",[[1,"wcs-app"]]],["p-02b95dbf",[[1,"wcs-badge",{shape:[1],color:[1]}]]],["p-d084dd61",[[1,"wcs-card",{mode:[1537]}]]],["p-7a3f70da",[[1,"wcs-card-body"]]],["p-f386bb8b",[[1,"wcs-com-nav",{appName:[1,"app-name"],mobileMenuOpen:[32],currentActiveSizing:[32]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"]]]]],["p-f82e7a61",[[1,"wcs-com-nav-category",{label:[1],categoryOpen:[32],close:[64],open:[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["p-b6cd196d",[[1,"wcs-com-nav-submenu",{label:[1],panelTitle:[1,"panel-title"],panelDescription:[1,"panel-description"],menuOpen:[32],close:[64],open:[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["p-17630eea",[[1,"wcs-divider"]]],["p-91b3e4b5",[[1,"wcs-dropdown-divider"]]],["p-269d244c",[[1,"wcs-dropdown-header"]]],["p-4b4d53e2",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"],[0,"keydown","onKeyDown"]]]]],["p-d3f1cafe",[[1,"wcs-field"]]],["p-257b15b9",[[1,"wcs-field-content"]]],["p-cc03627c",[[1,"wcs-field-label"]]],["p-1e43122f",[[1,"wcs-footer"]]],["p-ee453b6e",[[1,"wcs-galactic",{text:[1],show:[32]}]]],["p-627bbb6a",[[1,"wcs-grid-column",{path:[1],name:[1],sort:[4],sortFn:[16],formatter:[16],sortOrder:[1025,"sort-order"],width:[1],customCells:[4,"custom-cells"],hidden:[4]}]]],["p-30d8f9c3",[[1,"wcs-grid-custom-cell",{columnId:[1,"column-id"],rowId:[8,"row-id"]}]]],["p-47d8ece5",[[1,"wcs-header"]]],["p-50dce764",[[1,"wcs-hint",{small:[1540]}]]],["p-c7494651",[[0,"wcs-icon",{icon:[1],size:[1]}]]],["p-54e29233",[[1,"wcs-label",{required:[516]}]]],["p-0ede0c37",[[1,"wcs-list-item",{activated:[1028]}]]],["p-ff9967eb",[[1,"wcs-list-item-properties"]]],["p-747a5962",[[1,"wcs-list-item-property"]]],["p-
|
|
1
|
+
import{p as e,b as n}from"./p-a2df3a49.js";export{s as setNonce}from"./p-a2df3a49.js";const o=()=>{const n=import.meta.url;const o={};if(n!==""){o.resourcesUrl=new URL(".",n).href}return e(o)};o().then((e=>n([["p-9ecdeaf9",[[1,"wcs-editable-field",{type:[1],label:[1],readonly:[4],value:[1032],validateFn:[16],formatFn:[16],errorMsg:[1,"error-msg"],size:[513],currentState:[32],isError:[32]},[[8,"click","onWindowClickEvent"]]]]],["p-d6b3f742",[[1,"wcs-horizontal-stepper",{currentStep:[1026,"current-step"],steps:[16],mode:[1],checkOnComplete:[4,"check-on-complete"],internalCurrentStep:[32],previous:[64],next:[64]}]]],["p-a24fa4f4",[[1,"wcs-counter",{size:[513],label:[1],min:[1026],max:[1026],step:[1026],value:[1026],currentValue:[32],displayedValue:[32]}]]],["p-bcb8b731",[[1,"wcs-grid",{serverMode:[4,"server-mode"],data:[16],loading:[4],selectionConfig:[1,"selection-config"],selectedItems:[8,"selected-items"],wcsGridPaginationId:[1,"wcs-grid-pagination-id"],rowIdPath:[1,"row-id-path"],columns:[32],paginationEl:[32],rows:[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["p-463667c9",[[1,"wcs-grid-pagination",{availablePageSizes:[16],currentPage:[2,"current-page"],pageSize:[2,"page-size"],itemsCount:[2,"items-count"],pageCount:[2,"page-count"]}]]],["p-94d95b99",[[4,"wcs-modal",{withoutBackdrop:[516,"without-backdrop"],show:[516],showCloseButton:[516,"show-close-button"],size:[1],hideActions:[516,"hide-actions"]},[[4,"keydown","onKeyDown"]]]]],["p-732b2faa",[[1,"wcs-dropdown",{noArrow:[4,"no-arrow"],mode:[1],shape:[1],disabled:[4],placement:[1],expanded:[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]]]]],["p-966a241e",[[1,"wcs-galactic-menu",{text:[1],showPopoverMenu:[32]},[[8,"click","onWindowClickEvent"]]]]],["p-d2da0c9f",[[17,"wcs-input",{fireFocusEvents:[4,"fire-focus-events"],accept:[1],autocapitalize:[1],autocomplete:[1],autocorrect:[1],autofocus:[4],clearInput:[4,"clear-input"],clearOnEdit:[4,"clear-on-edit"],debounce:[2],prefixLabel:[1,"prefix-label"],suffixLabel:[1,"suffix-label"],disabled:[4],enterkeyhint:[1],size:[513],icon:[1],inputmode:[1],max:[1],maxlength:[2],min:[1],minlength:[2],multiple:[4],name:[1],pattern:[1],placeholder:[1],readonly:[4],required:[4],spellcheck:[4],state:[513],step:[1],type:[1],value:[1032],hasFocus:[32],passwordReveal:[32],setFocus:[64],setBlur:[64],getInputElement:[64]}]]],["p-26c4c983",[[1,"wcs-textarea",{fireFocusEvents:[4,"fire-focus-events"],autocapitalize:[1],autofocus:[4],clearOnEdit:[1028,"clear-on-edit"],debounce:[2],disabled:[4],icon:[1],inputmode:[1],enterkeyhint:[1],maxlength:[2],minlength:[2],name:[1],placeholder:[1],readonly:[4],required:[4],spellcheck:[4],state:[513],cols:[2],rows:[2],wrap:[1],autoGrow:[4,"auto-grow"],value:[1025],resize:[513],hasFocus:[32],fitContent:[64],setFocus:[64],setBlur:[64],getInputElement:[64]}]]],["p-b6160b7c",[[1,"wcs-accordion",{hideActionText:[516,"hide-action-text"],highlight:[516],groupContentWithHeader:[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["p-cdd172b4",[[1,"wcs-accordion-content"]]],["p-8d57835f",[[1,"wcs-accordion-header"]]],["p-810aff71",[[1,"wcs-accordion-panel",{open:[1540],hideActionText:[516,"hide-action-text"],highlight:[516],groupContentWithHeader:[516,"group-content-with-header"],close:[64]}]]],["p-fc3f5b53",[[1,"wcs-action-bar",{gutter:[4],hasTabs:[32]}]]],["p-31a8d23f",[[1,"wcs-app"]]],["p-02b95dbf",[[1,"wcs-badge",{shape:[1],color:[1]}]]],["p-d084dd61",[[1,"wcs-card",{mode:[1537]}]]],["p-7a3f70da",[[1,"wcs-card-body"]]],["p-f386bb8b",[[1,"wcs-com-nav",{appName:[1,"app-name"],mobileMenuOpen:[32],currentActiveSizing:[32]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"]]]]],["p-f82e7a61",[[1,"wcs-com-nav-category",{label:[1],categoryOpen:[32],close:[64],open:[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["p-b6cd196d",[[1,"wcs-com-nav-submenu",{label:[1],panelTitle:[1,"panel-title"],panelDescription:[1,"panel-description"],menuOpen:[32],close:[64],open:[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["p-17630eea",[[1,"wcs-divider"]]],["p-91b3e4b5",[[1,"wcs-dropdown-divider"]]],["p-269d244c",[[1,"wcs-dropdown-header"]]],["p-4b4d53e2",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"],[0,"keydown","onKeyDown"]]]]],["p-d3f1cafe",[[1,"wcs-field"]]],["p-257b15b9",[[1,"wcs-field-content"]]],["p-cc03627c",[[1,"wcs-field-label"]]],["p-1e43122f",[[1,"wcs-footer"]]],["p-ee453b6e",[[1,"wcs-galactic",{text:[1],show:[32]}]]],["p-627bbb6a",[[1,"wcs-grid-column",{path:[1],name:[1],sort:[4],sortFn:[16],formatter:[16],sortOrder:[1025,"sort-order"],width:[1],customCells:[4,"custom-cells"],hidden:[4]}]]],["p-30d8f9c3",[[1,"wcs-grid-custom-cell",{columnId:[1,"column-id"],rowId:[8,"row-id"]}]]],["p-47d8ece5",[[1,"wcs-header"]]],["p-50dce764",[[1,"wcs-hint",{small:[1540]}]]],["p-c7494651",[[0,"wcs-icon",{icon:[1],size:[1]}]]],["p-54e29233",[[1,"wcs-label",{required:[516]}]]],["p-0ede0c37",[[1,"wcs-list-item",{activated:[1028]}]]],["p-ff9967eb",[[1,"wcs-list-item-properties"]]],["p-747a5962",[[1,"wcs-list-item-property"]]],["p-5a7999bb",[[1,"wcs-native-select",{size:[513],expanded:[32],disabled:[32]}]]],["p-429bd9fb",[[1,"wcs-nav"]]],["p-554ca93c",[[4,"wcs-nav-item",{text:[513],href:[513]},[[0,"keydown","onKeyDown"]]]]],["p-d5a0e271",[[1,"wcs-progress-radial",{size:[2],showLabel:[4,"show-label"],value:[2]}]]],["p-069555a1",[[1,"wcs-radio-group",{value:[8],name:[520],mode:[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["p-a5cd4c07",[[1,"wcs-switch",{name:[1],checked:[516],labelAlignment:[513,"label-alignment"],disabled:[4]}]]],["p-64dd7356",[[1,"wcs-tab",{header:[513],itemKey:[8,"item-key"]}]]],["p-07b8cd36",[[1,"wcs-tabs",{align:[513],selectedIndex:[2,"selected-index"],selectedKey:[8,"selected-key"],headersOnly:[4,"headers-only"],gutter:[4],headers:[32],currentActiveTabIndex:[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["p-4a9f8e94",[[1,"wcs-tooltip",{for:[1],position:[513],interactive:[4],maxWidth:[8,"max-width"],delay:[2],duration:[2],trigger:[1],theme:[1],content:[1],appendTo:[1,"append-to"],hide:[64],show:[64],disable:[64],enable:[64]}]]],["p-9d798de4",[[1,"wcs-progress-bar",{small:[4],showLabel:[4,"show-label"],value:[2]}]]],["p-b856f2f6",[[1,"wcs-radio",{mode:[513],value:[1544],label:[1537],checked:[1540],disabled:[1028]},[[0,"keydown","onKeyDown"]]]]],["p-26e7de5c",[[4,"wcs-select-option",{disabled:[1540],selected:[1540],value:[8],chipColor:[1,"chip-color"],chipBackgroundColor:[1,"chip-background-color"],multiple:[1540]},[[1,"mousedown","onMouseDown"],[0,"keydown","handleKeydown"]]],[1,"wcs-select",{size:[513],value:[1032],placeholder:[1537],disabled:[1028],multiple:[516],chips:[516],name:[1],compareWith:[16],expanded:[32],hasLoaded:[32],displayText:[32],focused:[32],overlayDirection:[32],open:[64],close:[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["p-4b2d8a6d",[[1,"wcs-error"],[1,"wcs-form-field",{isError:[1540,"is-error"],hasPrefix:[32],hasSuffix:[32],spiedElement:[32]}]]],["p-6acbf38a",[[1,"wcs-checkbox",{name:[1],indeterminate:[1540],checked:[1540],labelAlignment:[1537,"label-alignment"],disabled:[4]}]]],["p-b229a91c",[[17,"wcs-button",{type:[1025],href:[1],target:[1],disabled:[516],ripple:[4],size:[513],shape:[513],mode:[513],loading:[1028]},[[0,"click","onClick"]]]]],["p-e86c6cbb",[[1,"wcs-mat-icon",{icon:[1],size:[1],family:[1]}]]],["p-9910fedd",[[1,"wcs-spinner",{mode:[513]}]]]],e)));
|
|
2
2
|
//# sourceMappingURL=wcs.esm.js.map
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,h as t,H as s,g as i}from"./p-a2df3a49.js";import{S as a}from"./p-d6c3e615.js";const r=":host{width:100%;box-sizing:border-box}::slotted(select){box-sizing:border-box;-moz-appearance:none !important;-webkit-appearance:none !important;appearance:none !important;--wcs-select-native-ligther-percentage:40;--wcs-select-native-border-radius:var(--wcs-border-radius);--wcs-select-native-background-color:var(--wcs-light);--wcs-select-native-placeholder-color:var(--wcs-text-medium);--wcs-select-native-value-color:var(--wcs-primary);--wcs-select-native-border-color:transparent;--wcs-select-native-overlay-max-height:360px;--wcs-select-native-border-width:2px;background-color:var(--wcs-select-native-background-color);color:var(--wcs-select-native-color);border-radius:var(--wcs-border-radius);border:none;outline:none;user-select:none;cursor:pointer;line-height:1.5;font-size:1rem;width:100%;padding-right:calc(var(--wcs-base-margin) * 2);padding-left:calc(var(--wcs-base-margin) * 2)}::slotted(select:disabled){cursor:not-allowed;color:var(--wcs-text-disabled)}:host([data-disabled]) .select-wrapper .arrow-container .arrow{fill:var(--wcs-text-medium)}:host([data-size=m]) ::slotted(select){height:var(--wcs-size-m)}:host([data-size=l]) ::slotted(select){height:var(--wcs-size-l)}::slotted(select:focus){background-clip:padding-box;box-shadow:inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-blue);background-color:var(--wcs-white)}.select-wrapper{position:relative}svg{flex-shrink:0}.arrow{fill:var(--wcs-primary)}.arrow-container{pointer-events:none;display:flex;align-items:center;vertical-align:center;position:absolute;top:0;bottom:0;right:calc(var(--wcs-padding) - 1px);margin:auto 0}";const o=class{constructor(t){e(this,t);this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST=["disabled"];this.size="m";this.expanded=false;this.disabled=undefined}componentWillLoad(){this.selectElement=this.el.querySelector("select");if(!this.selectElement)throw new Error("wcs-native-select must be used with a native slotted select, please refer to the documentation.");this.onSelectedOptionChange();this.selectElement.addEventListener("change",(()=>{this.onSelectedOptionChange()}));this.observer=new MutationObserver((e=>{const t=e.filter((e=>this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(e.attributeName))).length>0;if(t){this.updateHostAttributeWithSlottedSelect()}}));this.updateHostAttributeWithSlottedSelect();this.observer.observe(this.selectElement,{attributes:true})}onSelectedOptionChange(){if(this.isPlaceholderOptionSelected()){this.applyPlaceholderStylesOnNativeSlottedSelectElement()}else{this.applySelectedOptionStylesOnNativeSlottedSelectElement()}}isPlaceholderOptionSelected(){var e;return((e=Array.from(this.selectElement.options).filter((e=>e.selected))[0])===null||e===void 0?void 0:e.disabled)==true}applySelectedOptionStylesOnNativeSlottedSelectElement(){this.selectElement.style.color="var(--wcs-blue)";this.selectElement.style.fontStyle="normal";this.selectElement.style.fontWeight="500";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="normal";if(!e.disabled){e.style.color="black"}}))}applyPlaceholderStylesOnNativeSlottedSelectElement(){this.selectElement.style.color="var(--wcs-text-medium)";this.selectElement.style.fontWeight="400";this.selectElement.style.fontStyle="italic";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="normal";if(!e.disabled){e.style.color="black"}}))}updateHostAttributeWithSlottedSelect(){var e;this.disabled=(e=this.selectElement)===null||e===void 0?void 0:e.hasAttribute("disabled")}disconnectedCallback(){var e,t;(e=this.observer)===null||e===void 0?void 0:e.disconnect();(t=this.selectElement)===null||t===void 0?void 0:t.removeEventListener("change",(()=>{this.onSelectedOptionChange()}))}render(){return t(s,{class:`${this.expanded?"expanded":""}`,"data-disabled":this.disabled,"data-size":this.size},t("div",{class:"select-wrapper"},t("slot",null),t("div",{class:"arrow-container"},t(a,{up:this.expanded}))))}get el(){return i(this)}};o.style=r;export{o as wcs_native_select};
|
|
2
|
-
//# sourceMappingURL=p-029eb12a.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["nativeSelectCss","NativeSelect","this","SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST","componentWillLoad","selectElement","el","querySelector","Error","onSelectedOptionChange","addEventListener","observer","MutationObserver","mutations","hasSpiedAttrMutation","filter","m","includes","attributeName","length","updateHostAttributeWithSlottedSelect","observe","attributes","isPlaceholderOptionSelected","applyPlaceholderStylesOnNativeSlottedSelectElement","applySelectedOptionStylesOnNativeSlottedSelectElement","_a","Array","from","options","o","selected","disabled","style","color","fontStyle","fontWeight","forEach","option","hasAttribute","disconnectedCallback","disconnect","_b","removeEventListener","render","h","Host","class","expanded","size","SelectArrow","up"],"sources":["./src/components/native-select/native-select.scss?tag=wcs-native-select&encapsulation=shadow","./src/components/native-select/native-select.component.tsx"],"sourcesContent":["// TODO: voir pour mettre en commun avec le style du composant personnalisée\n@import '../../style/focus-outline.scss';\n\n:host {\n width: 100%;\n box-sizing: border-box;\n}\n\n::slotted(select) {\n box-sizing: border-box;\n -moz-appearance:none !important;\n -webkit-appearance: none !important;\n appearance: none !important;\n\n --wcs-select-native-ligther-percentage: 40;\n --wcs-select-native-border-radius: var(--wcs-border-radius);\n --wcs-select-native-background-color: var(--wcs-light);\n --wcs-select-native-placeholder-color: var(--wcs-text-medium);\n --wcs-select-native-value-color: var(--wcs-primary);\n --wcs-select-native-border-color: transparent;\n --wcs-select-native-overlay-max-height: 360px;\n --wcs-select-native-border-width: 2px;\n\n background-color: var(--wcs-select-native-background-color);\n\n color: var(--wcs-select-native-color);\n\n border-radius: var(--wcs-border-radius);\n border: none;\n\n outline: none;\n user-select: none;\n cursor: pointer;\n line-height: 1.5;\n font-size: 1rem;\n width: 100%;\n padding-right: calc(var(--wcs-base-margin) * 2);\n padding-left: calc(var(--wcs-base-margin) * 2);\n}\n\n::slotted(select:disabled) {\n cursor: not-allowed;\n color: var(--wcs-text-disabled);\n}\n\n:host([data-disabled]) {\n .select-wrapper {\n .arrow-container {\n .arrow {\n fill: var(--wcs-text-medium);\n }\n }\n }\n}\n\n:host([data-size=m]) {\n ::slotted(select) {\n height: var(--wcs-size-m);\n }\n}\n\n:host([data-size=l]) {\n ::slotted(select) {\n height: var(--wcs-size-l);\n }\n}\n\n::slotted(select:focus) {\n background-clip: padding-box;\n box-shadow: inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-blue);\n background-color: var(--wcs-white);\n}\n\n.select-wrapper {\n position: relative;\n}\n\n// So the arrow on the right doesn't shrink when text overflows.\nsvg {\n flex-shrink: 0;\n}\n\n.arrow {\n fill: var(--wcs-primary);\n}\n\n.arrow-container {\n pointer-events: none;\n display: flex;\n align-items: center;\n vertical-align: center;\n\n position: absolute;\n top: 0;\n bottom: 0;\n right: calc(var(--wcs-padding) - 1px);\n margin: auto 0;\n}\n","import { Component, h, ComponentInterface, State, Prop, Host, Element } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsSize } from \"../../shared-types\";\n\nexport type WcsNativeSelectSize = Extract<WcsSize, 'l' | 'm'>; // todo: move into common file with custom select\n\n\n\n/**\n * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice\n * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the\n * properties of the <select> and <option> elements in this component.\n *\n * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * Example usage:\n *\n * <wcs-native-select>\n * <select>\n * <option value=\"option1\">Option 1</option>\n * <option value=\"option2\">Option 2</option>\n * <option value=\"option3\">Option 3</option>\n * </select>\n * </wcs-native-select>\n */\n@Component({\n tag: 'wcs-native-select',\n styleUrl: 'native-select.scss',\n shadow: true\n})\nexport class NativeSelect implements ComponentInterface {\n /**\n * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n * There are two possible size options:\n * - 'm': medium size\n * - 'l': large size\n *\n * The default value is 'm'.\n */\n @Prop({ reflect: true }) size: WcsNativeSelectSize = 'm';\n\n @Element() private el!: HTMLWcsNativeSelectElement;\n\n @State() private expanded: boolean = false;\n @State() private disabled: boolean;\n\n private selectElement: HTMLSelectElement;\n private observer: MutationObserver;\n\n\n private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n componentWillLoad() {\n this.selectElement = this.el.querySelector('select');\n if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n this.onSelectedOptionChange();\n\n /**\n * We use an event listener to apply the default style to the select when user chose an active option\n */\n this.selectElement.addEventListener('change', () => {\n this.onSelectedOptionChange();\n });\n\n this.observer = new MutationObserver(mutations => {\n const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n if (hasSpiedAttrMutation) {\n this.updateHostAttributeWithSlottedSelect();\n }\n });\n this.updateHostAttributeWithSlottedSelect();\n this.observer.observe(this.selectElement, {attributes: true});\n }\n\n private onSelectedOptionChange(): void {\n if (this.isPlaceholderOptionSelected()) {\n this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n } else {\n this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n }\n }\n\n private isPlaceholderOptionSelected() {\n return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n }\n\n /**\n * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n * @private\n */\n private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n this.selectElement.style.color = \"var(--wcs-blue)\";\n this.selectElement.style.fontStyle = 'normal';\n this.selectElement.style.fontWeight = '500';\n Array.from(this.selectElement.options).forEach(option => {\n option.style.fontStyle = 'normal';\n if (!option.disabled) {\n option.style.color = \"black\";\n }\n });\n }\n\n /**\n * This method apply styles when the placeholder is shown.\n *\n * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n * @private\n */\n private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n this.selectElement.style.color = \"var(--wcs-text-medium)\";\n this.selectElement.style.fontWeight = '400';\n this.selectElement.style.fontStyle = 'italic';\n Array.from(this.selectElement.options).forEach(option => {\n option.style.fontStyle = 'normal';\n if (!option.disabled) {\n option.style.color = \"black\";\n }\n });\n }\n\n private updateHostAttributeWithSlottedSelect() {\n this.disabled = this.selectElement?.hasAttribute('disabled');\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.selectElement?.removeEventListener(\"change\", () => {\n this.onSelectedOptionChange();\n });\n }\n\n render() {\n return (\n <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n <div class=\"select-wrapper\">\n <slot></slot>\n <div class=\"arrow-container\">\n <SelectArrow up={this.expanded}></SelectArrow>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,8kD,MC+BXC,EAAY,M,yBAoBJC,KAAAC,uCAAyC,CAAC,Y,UAXN,I,cAIhB,M,wBASrCC,oBACIF,KAAKG,cAAgBH,KAAKI,GAAGC,cAAc,UAC3C,IAAKL,KAAKG,cAAe,MAAM,IAAIG,MAAM,mGAEzCN,KAAKO,yBAKLP,KAAKG,cAAcK,iBAAiB,UAAU,KAC1CR,KAAKO,wBAAwB,IAGjCP,KAAKS,SAAW,IAAIC,kBAAiBC,IACjC,MAAMC,EAAuBD,EAAUE,QAAOC,GAAKd,KAAKC,uCAAuCc,SAASD,EAAEE,iBAAgBC,OAAS,EACnI,GAAIL,EAAsB,CACtBZ,KAAKkB,sC,KAGblB,KAAKkB,uCACLlB,KAAKS,SAASU,QAAQnB,KAAKG,cAAe,CAACiB,WAAY,M,CAGnDb,yBACJ,GAAIP,KAAKqB,8BAA+B,CACpCrB,KAAKsB,oD,KACF,CACHtB,KAAKuB,uD,EAILF,8B,MACJ,QAAOG,EAAAC,MAAMC,KAAK1B,KAAKG,cAAcwB,SAASd,QAAOe,GAAKA,EAAEC,WAAU,MAAE,MAAAL,SAAA,SAAAA,EAAEM,WAAY,I,CAOlFP,wDACJvB,KAAKG,cAAc4B,MAAMC,MAAQ,kBACjChC,KAAKG,cAAc4B,MAAME,UAAY,SACrCjC,KAAKG,cAAc4B,MAAMG,WAAa,MACtCT,MAAMC,KAAK1B,KAAKG,cAAcwB,SAASQ,SAAQC,IAC3CA,EAAOL,MAAME,UAAY,SACzB,IAAKG,EAAON,SAAU,CAClBM,EAAOL,MAAMC,MAAQ,O,KAWzBV,qDACJtB,KAAKG,cAAc4B,MAAMC,MAAQ,yBACjChC,KAAKG,cAAc4B,MAAMG,WAAa,MACtClC,KAAKG,cAAc4B,MAAME,UAAY,SACrCR,MAAMC,KAAK1B,KAAKG,cAAcwB,SAASQ,SAAQC,IAC3CA,EAAOL,MAAME,UAAY,SACzB,IAAKG,EAAON,SAAU,CAClBM,EAAOL,MAAMC,MAAQ,O,KAKzBd,uC,MACJlB,KAAK8B,UAAWN,EAAAxB,KAAKG,iBAAa,MAAAqB,SAAA,SAAAA,EAAEa,aAAa,W,CAGrDC,uB,SACId,EAAAxB,KAAKS,YAAQ,MAAAe,SAAA,SAAAA,EAAEe,cACfC,EAAAxC,KAAKG,iBAAa,MAAAqC,SAAA,SAAAA,EAAEC,oBAAoB,UAAU,KAC9CzC,KAAKO,wBAAwB,G,CAIrCmC,SACI,OACIC,EAACC,EAAI,CAACC,MAAO,GAAG7C,KAAK8C,SAAW,WAAa,KAAI,gBAAiB9C,KAAK8B,SAAQ,YAAa9B,KAAK+C,MAC7FJ,EAAA,OAAKE,MAAM,kBACPF,EAAA,aACAA,EAAA,OAAKE,MAAM,mBACPF,EAACK,EAAW,CAACC,GAAIjD,KAAK8C,a"}
|