wcs-core 3.0.0 → 4.0.1

package/dist/types/components.d.ts

@@ -6,20 +6,22 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BadgeColor, BadgeShape } from "./components/badge/badge-interface";
-import { WcsButtonMode, WcsButtonShape, WcsButtonType } from "./components/button/button-interface";
+import { WcsButtonMode, WcsButtonShape, WcsButtonSize, WcsButtonType } from "./components/button/button-interface";
 import { CardMode } from "./components/card/card-interface";
 import { CheckboxChangeEventDetail, CheckboxLabelAlignment } from "./components/checkbox/checkbox-interface";
 import { CategoryOpenedEventDetail, MenuOpenedEventDetail } from "./components/com-nav/com-nav-interface";
+import { CounterChangeEventDetail, WcsCounterSize } from "./components/counter/counter-interface";
 import { WcsDropdownPlacement } from "./components/dropdown/dropdown-interface";
-import { EditableComponentUpdateEvent, EditableFieldType, FormatFn, ValidateFn } from "./components/editable-field/editable-field-interface";
+import { EditableComponentUpdateEvent, EditableFieldType, FormatFn, ValidateFn, WcsEditableFieldSize } from "./components/editable-field/editable-field-interface";
 import { WcsCellFormatter, WcsGridAllRowSelectedEventDetails, WcsGridColumnSortChangeEventDetails, WcsGridPaginationChangeEventDetails, WcsGridRowSelectedEventDetails, WcsGridSelectionConfig, WcsSortFn, WcsSortOrder } from "./components/grid/grid-interface";
 import { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode } from "./components/horizontal-stepper/horizontal-stepper-interface";
-import { AutocompleteTypes, InputChangeEventDetail, TextFieldTypes } from "./components/input/input-interface";
+import { AutocompleteTypes, InputChangeEventDetail, TextFieldTypes, WcsInputSize } from "./components/input/input-interface";
 import { MaterialIconFamily, MaterialIconSize } from "./components/mat-icon/mat-icon-interface";
 import { ModalSize } from "./components/modal/modal-interface";
+import { WcsNativeSelectSize } from "./components/native-select/native-select.component";
 import { RadioGroupChangeEventDetail, RadioGroupMode } from "./components/radio-group/radio-group-interface";
 import { RadioChosedEvent } from "./components/radio/radio-interface";
-import { SelectChangeEventDetail } from "./components/select/select-interface";
+import { SelectChangeEventDetail, WcsSelectSize } from "./components/select/select-interface";
 import { SelectOptionChosedEvent } from "./components/select-option/select-option-interface";
 import { WcsSpinnerMode } from "./components/spinner/spinner-interface";
 import { SwitchChangeEventDetail, SwitchLabelAlignment } from "./components/switch/switch-interface";
@@ -27,20 +29,22 @@ import { WcsTabChangeEvent, WcsTabsAlignment } from "./components/tabs/tabs-inte
 import { TextareaChangeEventDetail } from "./components/textarea/textarea-interface";
 import { WcsTooltipAppendTo, WcsTooltipPosition } from "./components/tooltip/tooltip-interface";
 export { BadgeColor, BadgeShape } from "./components/badge/badge-interface";
-export { WcsButtonMode, WcsButtonShape, WcsButtonType } from "./components/button/button-interface";
+export { WcsButtonMode, WcsButtonShape, WcsButtonSize, WcsButtonType } from "./components/button/button-interface";
 export { CardMode } from "./components/card/card-interface";
 export { CheckboxChangeEventDetail, CheckboxLabelAlignment } from "./components/checkbox/checkbox-interface";
 export { CategoryOpenedEventDetail, MenuOpenedEventDetail } from "./components/com-nav/com-nav-interface";
+export { CounterChangeEventDetail, WcsCounterSize } from "./components/counter/counter-interface";
 export { WcsDropdownPlacement } from "./components/dropdown/dropdown-interface";
-export { EditableComponentUpdateEvent, EditableFieldType, FormatFn, ValidateFn } from "./components/editable-field/editable-field-interface";
+export { EditableComponentUpdateEvent, EditableFieldType, FormatFn, ValidateFn, WcsEditableFieldSize } from "./components/editable-field/editable-field-interface";
 export { WcsCellFormatter, WcsGridAllRowSelectedEventDetails, WcsGridColumnSortChangeEventDetails, WcsGridPaginationChangeEventDetails, WcsGridRowSelectedEventDetails, WcsGridSelectionConfig, WcsSortFn, WcsSortOrder } from "./components/grid/grid-interface";
 export { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode } from "./components/horizontal-stepper/horizontal-stepper-interface";
-export { AutocompleteTypes, InputChangeEventDetail, TextFieldTypes } from "./components/input/input-interface";
+export { AutocompleteTypes, InputChangeEventDetail, TextFieldTypes, WcsInputSize } from "./components/input/input-interface";
 export { MaterialIconFamily, MaterialIconSize } from "./components/mat-icon/mat-icon-interface";
 export { ModalSize } from "./components/modal/modal-interface";
+export { WcsNativeSelectSize } from "./components/native-select/native-select.component";
 export { RadioGroupChangeEventDetail, RadioGroupMode } from "./components/radio-group/radio-group-interface";
 export { RadioChosedEvent } from "./components/radio/radio-interface";
-export { SelectChangeEventDetail } from "./components/select/select-interface";
+export { SelectChangeEventDetail, WcsSelectSize } from "./components/select/select-interface";
 export { SelectOptionChosedEvent } from "./components/select-option/select-option-interface";
 export { WcsSpinnerMode } from "./components/spinner/spinner-interface";
 export { SwitchChangeEventDetail, SwitchLabelAlignment } from "./components/switch/switch-interface";
@@ -105,11 +109,11 @@ export namespace Components {
      */
     interface WcsButton {
         /**
-          * Specify wether the button is disabled or not.
+          * Specify whether the button is disabled or not.
          */
         "disabled": boolean;
         /**
-          * Set a URL to point to. If specified use a `a` tag instead of `btn`.
+          * Set a URL to point to.<br/> If specified use a `a` tag instead of `btn`.
          */
         "href"?: string;
         /**
@@ -121,13 +125,21 @@ export namespace Components {
          */
         "mode": WcsButtonMode;
         /**
-          * Specify wether the button should have a ripple effect or not.
+          * Specify whether the button should have a ripple effect or not.
          */
         "ripple": boolean;
         /**
           * Specify the shape of the button.
          */
         "shape": WcsButtonShape;
+        /**
+          * Specify the size of the button.
+         */
+        "size": WcsButtonSize;
+        /**
+          * Specifies where to open the linked document when using href (see prop above)<br/> Default '_self' will open the linked document in the same frame as it was clicked
+         */
+        "target"?: '_blank' | '_self';
         /**
           * Specify the button type.
          */
@@ -187,6 +199,36 @@ export namespace Components {
         "panelDescription": string;
         "panelTitle": string;
     }
+    /**
+     * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>
+     * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)
+     */
+    interface WcsCounter {
+        /**
+          * The label of the counter.<br/> e.g. Number of passengers, train carriages, railroad tracks...
+         */
+        "label": string;
+        /**
+          * The maximum value of the counter. If the value of the max attribute isn't set, then the element has no maximum value.
+         */
+        "max"?: number;
+        /**
+          * The minimum value of the counter. If the value of the min attribute isn't set, then the element has no minimum value.
+         */
+        "min"?: number;
+        /**
+          * Specify the size (height) of the counter.
+         */
+        "size": WcsCounterSize;
+        /**
+          * Defines by how much the counter will be incremented or decremented.
+         */
+        "step": number;
+        /**
+          * Allow to change currentValue programmatically
+         */
+        "value"?: number;
+    }
     interface WcsDivider {
     }
     interface WcsDropdown {
@@ -234,6 +276,10 @@ export namespace Components {
           * Specify whether the field is editable or not
          */
         "readonly": boolean;
+        /**
+          * Specify the size (height) of the editable field.
+         */
+        "size": WcsEditableFieldSize;
         /**
           * Specifies which component is used for editing
          */
@@ -337,6 +383,9 @@ export namespace Components {
     interface WcsHeader {
     }
     interface WcsHint {
+        /**
+          * Whether the component should display the small version of the hint
+         */
         "small": boolean;
     }
     interface WcsHorizontalStepper {
@@ -476,9 +525,9 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
+          * Specify the size (height) of the input.
          */
-        "size"?: number;
+        "size": WcsInputSize;
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -553,6 +602,27 @@ export namespace Components {
          */
         "withoutBackdrop": boolean;
     }
+    /**
+     * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice
+     * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the
+     * properties of the <select> and <option> elements in this component.
+     * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native
+     * functionality and accessibility.
+     * Example usage:
+     * <wcs-native-select>
+     *   <select>
+     *     <option value="option1">Option 1</option>
+     *     <option value="option2">Option 2</option>
+     *     <option value="option3">Option 3</option>
+     *   </select>
+     * </wcs-native-select>
+     */
+    interface WcsNativeSelect {
+        /**
+          * The `size` property controls the size of the slotted `select` element by adjusting its padding. There are two possible size options: - 'm': medium size - 'l': large size  The default value is 'm'.
+         */
+        "size": WcsNativeSelectSize;
+    }
     interface WcsNav {
     }
     interface WcsNavItem {
@@ -611,7 +681,6 @@ export namespace Components {
      * <wcs-select>
      * <wcs-select-option value="1">One</wcs-select-option>
      * </wcs-select>```
-     * @todo Complete keyboard navigation.
      */
     interface WcsSelect {
         /**
@@ -646,6 +715,10 @@ export namespace Components {
           * The text to display when the select is empty.
          */
         "placeholder"?: string | null;
+        /**
+          * Specify the size (height) of the select.
+         */
+        "size": WcsSelectSize;
         /**
           * The currently selected value.
          */
@@ -744,6 +817,7 @@ export namespace Components {
     }
     /**
      * Mainly inspired from Ionic Textarea Component
+     * @cssprop --wcs-textarea-max-height - Max height of the text area component
      */
     interface WcsTextarea {
         /**
@@ -822,6 +896,10 @@ export namespace Components {
           * If `true`, the user must fill in a value before submitting a form.
          */
         "required": boolean;
+        /**
+          * Indicates how the textarea should be resizable. Possible values 'both' | 'none' | 'vertical' | 'horizontal'
+         */
+        "resize"?: 'both' | 'none' | 'vertical' | 'horizontal';
         /**
           * The number of visible text lines for the control.
          */
@@ -933,6 +1011,10 @@ export interface WcsComNavSubmenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLWcsComNavSubmenuElement;
 }
+export interface WcsCounterCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLWcsCounterElement;
+}
 export interface WcsDropdownItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLWcsDropdownItemElement;
@@ -1085,6 +1167,16 @@ declare global {
         prototype: HTMLWcsComNavSubmenuElement;
         new (): HTMLWcsComNavSubmenuElement;
     };
+    /**
+     * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>
+     * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)
+     */
+    interface HTMLWcsCounterElement extends Components.WcsCounter, HTMLStencilElement {
+    }
+    var HTMLWcsCounterElement: {
+        prototype: HTMLWcsCounterElement;
+        new (): HTMLWcsCounterElement;
+    };
     interface HTMLWcsDividerElement extends Components.WcsDivider, HTMLStencilElement {
     }
     var HTMLWcsDividerElement: {
@@ -1266,6 +1358,27 @@ declare global {
         prototype: HTMLWcsModalElement;
         new (): HTMLWcsModalElement;
     };
+    /**
+     * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice
+     * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the
+     * properties of the <select> and <option> elements in this component.
+     * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native
+     * functionality and accessibility.
+     * Example usage:
+     * <wcs-native-select>
+     *   <select>
+     *     <option value="option1">Option 1</option>
+     *     <option value="option2">Option 2</option>
+     *     <option value="option3">Option 3</option>
+     *   </select>
+     * </wcs-native-select>
+     */
+    interface HTMLWcsNativeSelectElement extends Components.WcsNativeSelect, HTMLStencilElement {
+    }
+    var HTMLWcsNativeSelectElement: {
+        prototype: HTMLWcsNativeSelectElement;
+        new (): HTMLWcsNativeSelectElement;
+    };
     interface HTMLWcsNavElement extends Components.WcsNav, HTMLStencilElement {
     }
     var HTMLWcsNavElement: {
@@ -1311,7 +1424,6 @@ declare global {
      * <wcs-select>
      * <wcs-select-option value="1">One</wcs-select-option>
      * </wcs-select>```
-     * @todo Complete keyboard navigation.
      */
     interface HTMLWcsSelectElement extends Components.WcsSelect, HTMLStencilElement {
     }
@@ -1368,6 +1480,7 @@ declare global {
     };
     /**
      * Mainly inspired from Ionic Textarea Component
+     * @cssprop --wcs-textarea-max-height - Max height of the text area component
      */
     interface HTMLWcsTextareaElement extends Components.WcsTextarea, HTMLStencilElement {
     }
@@ -1402,6 +1515,7 @@ declare global {
         "wcs-com-nav": HTMLWcsComNavElement;
         "wcs-com-nav-category": HTMLWcsComNavCategoryElement;
         "wcs-com-nav-submenu": HTMLWcsComNavSubmenuElement;
+        "wcs-counter": HTMLWcsCounterElement;
         "wcs-divider": HTMLWcsDividerElement;
         "wcs-dropdown": HTMLWcsDropdownElement;
         "wcs-dropdown-divider": HTMLWcsDropdownDividerElement;
@@ -1431,6 +1545,7 @@ declare global {
         "wcs-list-item-property": HTMLWcsListItemPropertyElement;
         "wcs-mat-icon": HTMLWcsMatIconElement;
         "wcs-modal": HTMLWcsModalElement;
+        "wcs-native-select": HTMLWcsNativeSelectElement;
         "wcs-nav": HTMLWcsNavElement;
         "wcs-nav-item": HTMLWcsNavItemElement;
         "wcs-progress-bar": HTMLWcsProgressBarElement;
@@ -1505,11 +1620,11 @@ declare namespace LocalJSX {
      */
     interface WcsButton {
         /**
-          * Specify wether the button is disabled or not.
+          * Specify whether the button is disabled or not.
          */
         "disabled"?: boolean;
         /**
-          * Set a URL to point to. If specified use a `a` tag instead of `btn`.
+          * Set a URL to point to.<br/> If specified use a `a` tag instead of `btn`.
          */
         "href"?: string;
         /**
@@ -1521,13 +1636,21 @@ declare namespace LocalJSX {
          */
         "mode"?: WcsButtonMode;
         /**
-          * Specify wether the button should have a ripple effect or not.
+          * Specify whether the button should have a ripple effect or not.
          */
         "ripple"?: boolean;
         /**
           * Specify the shape of the button.
          */
         "shape"?: WcsButtonShape;
+        /**
+          * Specify the size of the button.
+         */
+        "size"?: WcsButtonSize;
+        /**
+          * Specifies where to open the linked document when using href (see prop above)<br/> Default '_self' will open the linked document in the same frame as it was clicked
+         */
+        "target"?: '_blank' | '_self';
         /**
           * Specify the button type.
          */
@@ -1582,6 +1705,44 @@ declare namespace LocalJSX {
         "panelDescription"?: string;
         "panelTitle"?: string;
     }
+    /**
+     * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>
+     * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)
+     */
+    interface WcsCounter {
+        /**
+          * The label of the counter.<br/> e.g. Number of passengers, train carriages, railroad tracks...
+         */
+        "label": string;
+        /**
+          * The maximum value of the counter. If the value of the max attribute isn't set, then the element has no maximum value.
+         */
+        "max"?: number;
+        /**
+          * The minimum value of the counter. If the value of the min attribute isn't set, then the element has no minimum value.
+         */
+        "min"?: number;
+        /**
+          * Emitted when the counter loses focus.
+         */
+        "onWcsBlur"?: (event: WcsCounterCustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the value of the counter has changed.
+         */
+        "onWcsChange"?: (event: WcsCounterCustomEvent<CounterChangeEventDetail>) => void;
+        /**
+          * Specify the size (height) of the counter.
+         */
+        "size"?: WcsCounterSize;
+        /**
+          * Defines by how much the counter will be incremented or decremented.
+         */
+        "step"?: number;
+        /**
+          * Allow to change currentValue programmatically
+         */
+        "value"?: number;
+    }
     interface WcsDivider {
     }
     interface WcsDropdown {
@@ -1634,6 +1795,10 @@ declare namespace LocalJSX {
           * Specify whether the field is editable or not
          */
         "readonly"?: boolean;
+        /**
+          * Specify the size (height) of the editable field.
+         */
+        "size"?: WcsEditableFieldSize;
         /**
           * Specifies which component is used for editing
          */
@@ -1748,6 +1913,9 @@ declare namespace LocalJSX {
     interface WcsHeader {
     }
     interface WcsHint {
+        /**
+          * Whether the component should display the small version of the hint
+         */
         "small"?: boolean;
     }
     interface WcsHorizontalStepper {
@@ -1889,9 +2057,9 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
+          * Specify the size (height) of the input.
          */
-        "size"?: number;
+        "size"?: WcsInputSize;
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -1970,6 +2138,27 @@ declare namespace LocalJSX {
          */
         "withoutBackdrop"?: boolean;
     }
+    /**
+     * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice
+     * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the
+     * properties of the <select> and <option> elements in this component.
+     * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native
+     * functionality and accessibility.
+     * Example usage:
+     * <wcs-native-select>
+     *   <select>
+     *     <option value="option1">Option 1</option>
+     *     <option value="option2">Option 2</option>
+     *     <option value="option3">Option 3</option>
+     *   </select>
+     * </wcs-native-select>
+     */
+    interface WcsNativeSelect {
+        /**
+          * The `size` property controls the size of the slotted `select` element by adjusting its padding. There are two possible size options: - 'm': medium size - 'l': large size  The default value is 'm'.
+         */
+        "size"?: WcsNativeSelectSize;
+    }
     interface WcsNav {
     }
     interface WcsNavItem {
@@ -2033,7 +2222,6 @@ declare namespace LocalJSX {
      * <wcs-select>
      * <wcs-select-option value="1">One</wcs-select-option>
      * </wcs-select>```
-     * @todo Complete keyboard navigation.
      */
     interface WcsSelect {
         /**
@@ -2072,6 +2260,10 @@ declare namespace LocalJSX {
           * The text to display when the select is empty.
          */
         "placeholder"?: string | null;
+        /**
+          * Specify the size (height) of the select.
+         */
+        "size"?: WcsSelectSize;
         /**
           * The currently selected value.
          */
@@ -2180,6 +2372,7 @@ declare namespace LocalJSX {
     }
     /**
      * Mainly inspired from Ionic Textarea Component
+     * @cssprop --wcs-textarea-max-height - Max height of the text area component
      */
     interface WcsTextarea {
         /**
@@ -2262,6 +2455,10 @@ declare namespace LocalJSX {
           * If `true`, the user must fill in a value before submitting a form.
          */
         "required"?: boolean;
+        /**
+          * Indicates how the textarea should be resizable. Possible values 'both' | 'none' | 'vertical' | 'horizontal'
+         */
+        "resize"?: 'both' | 'none' | 'vertical' | 'horizontal';
         /**
           * The number of visible text lines for the control.
          */
@@ -2347,6 +2544,7 @@ declare namespace LocalJSX {
         "wcs-com-nav": WcsComNav;
         "wcs-com-nav-category": WcsComNavCategory;
         "wcs-com-nav-submenu": WcsComNavSubmenu;
+        "wcs-counter": WcsCounter;
         "wcs-divider": WcsDivider;
         "wcs-dropdown": WcsDropdown;
         "wcs-dropdown-divider": WcsDropdownDivider;
@@ -2376,6 +2574,7 @@ declare namespace LocalJSX {
         "wcs-list-item-property": WcsListItemProperty;
         "wcs-mat-icon": WcsMatIcon;
         "wcs-modal": WcsModal;
+        "wcs-native-select": WcsNativeSelect;
         "wcs-nav": WcsNav;
         "wcs-nav-item": WcsNavItem;
         "wcs-progress-bar": WcsProgressBar;
@@ -2413,6 +2612,11 @@ declare module "@stencil/core" {
             "wcs-com-nav": LocalJSX.WcsComNav & JSXBase.HTMLAttributes<HTMLWcsComNavElement>;
             "wcs-com-nav-category": LocalJSX.WcsComNavCategory & JSXBase.HTMLAttributes<HTMLWcsComNavCategoryElement>;
             "wcs-com-nav-submenu": LocalJSX.WcsComNavSubmenu & JSXBase.HTMLAttributes<HTMLWcsComNavSubmenuElement>;
+            /**
+             * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>
+             * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)
+             */
+            "wcs-counter": LocalJSX.WcsCounter & JSXBase.HTMLAttributes<HTMLWcsCounterElement>;
             "wcs-divider": LocalJSX.WcsDivider & JSXBase.HTMLAttributes<HTMLWcsDividerElement>;
             "wcs-dropdown": LocalJSX.WcsDropdown & JSXBase.HTMLAttributes<HTMLWcsDropdownElement>;
             "wcs-dropdown-divider": LocalJSX.WcsDropdownDivider & JSXBase.HTMLAttributes<HTMLWcsDropdownDividerElement>;
@@ -2449,6 +2653,22 @@ declare module "@stencil/core" {
             "wcs-list-item-property": LocalJSX.WcsListItemProperty & JSXBase.HTMLAttributes<HTMLWcsListItemPropertyElement>;
             "wcs-mat-icon": LocalJSX.WcsMatIcon & JSXBase.HTMLAttributes<HTMLWcsMatIconElement>;
             "wcs-modal": LocalJSX.WcsModal & JSXBase.HTMLAttributes<HTMLWcsModalElement>;
+            /**
+             * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice
+             * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the
+             * properties of the <select> and <option> elements in this component.
+             * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native
+             * functionality and accessibility.
+             * Example usage:
+             * <wcs-native-select>
+             *   <select>
+             *     <option value="option1">Option 1</option>
+             *     <option value="option2">Option 2</option>
+             *     <option value="option3">Option 3</option>
+             *   </select>
+             * </wcs-native-select>
+             */
+            "wcs-native-select": LocalJSX.WcsNativeSelect & JSXBase.HTMLAttributes<HTMLWcsNativeSelectElement>;
             "wcs-nav": LocalJSX.WcsNav & JSXBase.HTMLAttributes<HTMLWcsNavElement>;
             "wcs-nav-item": LocalJSX.WcsNavItem & JSXBase.HTMLAttributes<HTMLWcsNavItemElement>;
             /**
@@ -2464,7 +2684,6 @@ declare module "@stencil/core" {
              * <wcs-select>
              * <wcs-select-option value="1">One</wcs-select-option>
              * </wcs-select>```
-             * @todo Complete keyboard navigation.
              */
             "wcs-select": LocalJSX.WcsSelect & JSXBase.HTMLAttributes<HTMLWcsSelectElement>;
             /**
@@ -2491,6 +2710,7 @@ declare module "@stencil/core" {
             "wcs-tabs": LocalJSX.WcsTabs & JSXBase.HTMLAttributes<HTMLWcsTabsElement>;
             /**
              * Mainly inspired from Ionic Textarea Component
+             * @cssprop --wcs-textarea-max-height - Max height of the text area component
              */
             "wcs-textarea": LocalJSX.WcsTextarea & JSXBase.HTMLAttributes<HTMLWcsTextareaElement>;
             /**

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './shared-types';

package/dist/types/shared-types.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Meant to be extracted with TS and used in each component differently, depending on the use case.
+ * Global size guideline (with basis at 8px) :
+ * xl = 56 px
+ * l = 48 px
+ * m = 40 px (default)
+ * s = 32 px
+ * xs = 24 px
+ */
+export type WcsSize = 'xs' | 's' | 'm' | 'l' | 'xl';

package/dist/types/utils/helpers.d.ts

@@ -27,8 +27,18 @@ export declare const raf: (h: any) => any;
  */
 export declare const clickInsideElement: (event: MouseEvent, element: HTMLElement) => boolean;
 export declare const clickTargetIsElementOrChildren: (mouseEvent: MouseEvent, element: HTMLElement) => boolean;
+export declare function generateUniqueId(componentName: string): string;
 export declare function isKeyup(evt: KeyboardEvent): boolean;
 export declare function isKeydown(evt: KeyboardEvent): boolean;
 export declare function isEscapeKey(evt: KeyboardEvent): boolean;
 export declare function isSpaceKey(evt: KeyboardEvent): boolean;
 export declare function isEnterKey(evt: KeyboardEvent): boolean;
+export declare function isHomeKey(evt: KeyboardEvent): boolean;
+export declare function isEndKey(evt: KeyboardEvent): boolean;
+export declare function isUpArrowKey(evt: KeyboardEvent): boolean;
+export declare function isDownArrowKey(evt: KeyboardEvent): boolean;
+export declare function isLeftArrowKey(evt: KeyboardEvent): boolean;
+export declare function isRightArrowKey(evt: KeyboardEvent): boolean;
+export declare function isPageDownKey(evt: KeyboardEvent): boolean;
+export declare function isPageUpKey(evt: KeyboardEvent): boolean;
+export declare function isTabKey(evt: KeyboardEvent): boolean;

package/dist/wcs/p-029eb12a.entry.js

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=p-029eb12a.entry.js.map

package/dist/wcs/p-029eb12a.entry.js.map

@@ -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"}

package/dist/wcs/p-069555a1.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["radioGroupCss","RadioGroup","onValueChangeHandler","newValue","this","updateOptionsState","componentDidLoad","value","mode","option","options","opts","el","querySelectorAll","slot","querySelector","length","assignedElements","selectedOptionChanged","event","detail","wcsChange","emit","markAsChecked","removeAttribute","setAttribute","render","h","Host","name"],"sources":["./src/components/radio-group/radio-group.scss?tag=wcs-radio-group&encapsulation=shadow","./src/components/radio-group/radio-group.tsx"],"sourcesContent":[":host {\n    display: flex;\n}\n\n:host([mode=radio]) {\n    flex-direction: column;\n\n    ::slotted([slot=option]:first-child) {\n        margin-top: 0;\n    }\n\n    ::slotted([slot=option]:last-child) {\n        margin-bottom: 0;\n    }\n\n    ::slotted([slot=options]) {\n        margin-top: calc(var(--wcs-base-margin) / 2);\n        margin-bottom: calc(var(--wcs-base-margin) / 2);\n    }\n}\n\n:host([mode=option]) {\n    display: inline-flex;\n    flex-direction: row;\n    padding: calc(var(--wcs-base-margin) / 4);\n    background-color: #4d4f53;\n    border-radius: 0.6875rem;\n}\n\n:host([mode=horizontal]) {\n    justify-content: space-between;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { RadioGroupChangeEventDetail, RadioGroupMode } from './radio-group-interface';\nimport { RadioChosedEvent } from '../radio/radio-interface';\n\n@Component({\n    tag: 'wcs-radio-group',\n    styleUrl: 'radio-group.scss',\n    shadow: true\n})\nexport class RadioGroup implements ComponentInterface {\n    @Prop() value: any | any[] | undefined | null;\n    @Prop({reflect: true, mutable: false}) name;\n    @Prop({reflect: true, mutable: false}) mode: RadioGroupMode = 'radio';\n    @Element() el!: HTMLWcsRadioGroupElement;\n\n    /** Emitted when the value has changed. */\n    @Event() wcsChange!: EventEmitter<RadioGroupChangeEventDetail>;\n\n    @Watch('value')\n    onValueChangeHandler(newValue: any) {\n        this.updateOptionsState(newValue, true);\n    }\n\n    componentDidLoad() {\n        if (this.value) {\n            this.updateOptionsState(this.value, true);\n        }\n        if (this.mode === 'option' || this.mode === 'horizontal') {\n            for (const option of this.options) {\n                option.mode = this.mode;\n            }\n        }\n    }\n\n    private get options(): HTMLWcsRadioElement[] {\n        const opts = this.el.querySelectorAll('wcs-radio');\n        const slot = this.el.querySelector('slot');\n        return opts.length !== 0\n            ? opts as unknown as HTMLWcsRadioElement[]\n            : slot !== null\n                ? slot.assignedElements() as HTMLWcsRadioElement[]\n                : [];\n    }\n\n    @Listen('wcsRadioClick')\n    selectedOptionChanged(event: CustomEvent<RadioChosedEvent>) {\n        this.updateOptionsState(event.detail.value, false);\n        this.wcsChange.emit({\n            value: event.detail.value\n        })\n    }\n\n    private updateOptionsState(value: string, markAsChecked: boolean) {\n        for (const option of this.options) {\n            if (option.value !== value) {\n                option.removeAttribute('checked');\n            } else {\n                if (markAsChecked) {\n                    option.setAttribute('checked', '');\n                }\n            }\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <slot name=\"option\"/>\n            </Host>\n        );\n    }\n\n}\n"],"mappings":"gEAAA,MAAMA,EAAgB,oiB,MCoBTC,EAAU,M,iHAG2C,O,CAO9DC,qBAAqBC,GACjBC,KAAKC,mBAAmBF,EAAU,K,CAGtCG,mBACI,GAAIF,KAAKG,MAAO,CACZH,KAAKC,mBAAmBD,KAAKG,MAAO,K,CAExC,GAAIH,KAAKI,OAAS,UAAYJ,KAAKI,OAAS,aAAc,CACtD,IAAK,MAAMC,KAAUL,KAAKM,QAAS,CAC/BD,EAAOD,KAAOJ,KAAKI,I,GAKnBE,cACR,MAAMC,EAAOP,KAAKQ,GAAGC,iBAAiB,aACtC,MAAMC,EAAOV,KAAKQ,GAAGG,cAAc,QACnC,OAAOJ,EAAKK,SAAW,EACjBL,EACAG,IAAS,KACLA,EAAKG,mBACL,E,CAIdC,sBAAsBC,GAClBf,KAAKC,mBAAmBc,EAAMC,OAAOb,MAAO,OAC5CH,KAAKiB,UAAUC,KAAK,CAChBf,MAAOY,EAAMC,OAAOb,O,CAIpBF,mBAAmBE,EAAegB,GACtC,IAAK,MAAMd,KAAUL,KAAKM,QAAS,CAC/B,GAAID,EAAOF,QAAUA,EAAO,CACxBE,EAAOe,gBAAgB,U,KACpB,CACH,GAAID,EAAe,CACfd,EAAOgB,aAAa,UAAW,G,IAM/CC,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,QAAME,KAAK,W"}
+{"version":3,"names":["radioGroupCss","RadioGroup","onValueChangeHandler","newValue","this","updateOptionsState","componentDidLoad","value","mode","option","options","opts","el","querySelectorAll","slot","querySelector","length","assignedElements","selectedOptionChanged","event","detail","wcsChange","emit","markAsChecked","removeAttribute","setAttribute","render","h","Host","name"],"sources":["./src/components/radio-group/radio-group.scss?tag=wcs-radio-group&encapsulation=shadow","./src/components/radio-group/radio-group.tsx"],"sourcesContent":[":host {\n    display: flex;\n}\n\n:host([mode=radio]) {\n    flex-direction: column;\n\n    ::slotted([slot=option]:first-child) {\n        margin-top: 0;\n    }\n\n    ::slotted([slot=option]:last-child) {\n        margin-bottom: 0;\n    }\n\n    ::slotted([slot=options]) {\n        margin-top: calc(var(--wcs-base-margin) / 2);\n        margin-bottom: calc(var(--wcs-base-margin) / 2);\n    }\n}\n\n:host([mode=option]) {\n    display: inline-flex;\n    flex-direction: row;\n    padding: calc(var(--wcs-base-margin) / 4);\n    background-color: #4d4f53;\n    border-radius: 0.6875rem;\n}\n\n:host([mode=horizontal]) {\n    justify-content: space-between;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { RadioGroupChangeEventDetail, RadioGroupMode } from './radio-group-interface';\nimport { RadioChosedEvent } from '../radio/radio-interface';\n\n@Component({\n    tag: 'wcs-radio-group',\n    styleUrl: 'radio-group.scss',\n    shadow: true\n})\nexport class RadioGroup implements ComponentInterface {\n    @Prop() value: any | any[] | undefined | null;\n    @Prop({reflect: true, mutable: false}) name;\n    @Prop({reflect: true, mutable: false}) mode: RadioGroupMode = 'radio';\n    @Element() private el!: HTMLWcsRadioGroupElement;\n\n    /** Emitted when the value has changed. */\n    @Event() wcsChange!: EventEmitter<RadioGroupChangeEventDetail>;\n\n    @Watch('value')\n    onValueChangeHandler(newValue: any) {\n        this.updateOptionsState(newValue, true);\n    }\n\n    componentDidLoad() {\n        if (this.value) {\n            this.updateOptionsState(this.value, true);\n        }\n        if (this.mode === 'option' || this.mode === 'horizontal') {\n            for (const option of this.options) {\n                option.mode = this.mode;\n            }\n        }\n    }\n\n    private get options(): HTMLWcsRadioElement[] {\n        const opts = this.el.querySelectorAll('wcs-radio');\n        const slot = this.el.querySelector('slot');\n        return opts.length !== 0\n            ? opts as unknown as HTMLWcsRadioElement[]\n            : slot !== null\n                ? slot.assignedElements() as HTMLWcsRadioElement[]\n                : [];\n    }\n\n    @Listen('wcsRadioClick')\n    selectedOptionChanged(event: CustomEvent<RadioChosedEvent>) {\n        this.updateOptionsState(event.detail.value, false);\n        this.wcsChange.emit({\n            value: event.detail.value\n        })\n    }\n\n    private updateOptionsState(value: string, markAsChecked: boolean) {\n        for (const option of this.options) {\n            if (option.value !== value) {\n                option.removeAttribute('checked');\n            } else {\n                if (markAsChecked) {\n                    option.setAttribute('checked', '');\n                }\n            }\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <slot name=\"option\"/>\n            </Host>\n        );\n    }\n\n}\n"],"mappings":"gEAAA,MAAMA,EAAgB,oiB,MCoBTC,EAAU,M,iHAG2C,O,CAO9DC,qBAAqBC,GACjBC,KAAKC,mBAAmBF,EAAU,K,CAGtCG,mBACI,GAAIF,KAAKG,MAAO,CACZH,KAAKC,mBAAmBD,KAAKG,MAAO,K,CAExC,GAAIH,KAAKI,OAAS,UAAYJ,KAAKI,OAAS,aAAc,CACtD,IAAK,MAAMC,KAAUL,KAAKM,QAAS,CAC/BD,EAAOD,KAAOJ,KAAKI,I,GAKnBE,cACR,MAAMC,EAAOP,KAAKQ,GAAGC,iBAAiB,aACtC,MAAMC,EAAOV,KAAKQ,GAAGG,cAAc,QACnC,OAAOJ,EAAKK,SAAW,EACjBL,EACAG,IAAS,KACLA,EAAKG,mBACL,E,CAIdC,sBAAsBC,GAClBf,KAAKC,mBAAmBc,EAAMC,OAAOb,MAAO,OAC5CH,KAAKiB,UAAUC,KAAK,CAChBf,MAAOY,EAAMC,OAAOb,O,CAIpBF,mBAAmBE,EAAegB,GACtC,IAAK,MAAMd,KAAUL,KAAKM,QAAS,CAC/B,GAAID,EAAOF,QAAUA,EAAO,CACxBE,EAAOe,gBAAgB,U,KACpB,CACH,GAAID,EAAe,CACfd,EAAOgB,aAAa,UAAW,G,IAM/CC,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,QAAME,KAAK,W"}