wcs-core 4.0.2 → 4.1.0

package/dist/cjs/wcs-counter.cjs.entry.js

@@ -19,23 +19,35 @@ const Counter = class {
     index.registerInstance(this, hostRef);
     this.wcsChange = index.createEvent(this, "wcsChange", 7);
     this.wcsBlur = index.createEvent(this, "wcsBlur", 7);
+    this.animateRunning = false;
     this.getCounterContainer = () => {
       return Array.from(this.el.shadowRoot.children)
         .find(el => el.tagName === 'DIV');
     };
     this.handleDecrement = () => {
-      if (this.min === undefined || this.currentValue > this.min) {
-        this.currentValue -= this.step;
+      if (this.min === undefined || this.value > this.min) {
+        // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value
+        // before the animation runs.
+        this.animateRunning = true;
+        this.value -= this.step;
+        this.notifyChange();
         this.animate('up');
       }
     };
     this.handleIncrement = () => {
-      if (this.max === undefined || this.currentValue < this.max) {
-        this.currentValue += this.step;
+      if (this.max === undefined || this.value < this.max) {
+        // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value
+        // before the animation runs.
+        this.animateRunning = true;
+        this.value += this.step;
+        this.notifyChange();
         this.animate('down');
       }
     };
     this.animate = (direction) => {
+      // In case someone call animate function, we want ensured that animateRunning is set to true to prevent other 
+      // method to mutate the displayedValue.
+      this.animateRunning = true;
       const counterContainer = this.getCounterContainer();
       const outliers = Array.from(counterContainer.children)
         .filter((span) => span.classList.contains('outliers'));
@@ -48,7 +60,8 @@ const Counter = class {
         outliers.forEach((span) => {
           span.classList.add('hidden');
         });
-        this.displayedValue = this.currentValue;
+        this.displayedValue = this.value;
+        this.animateRunning = false;
       }, 1000 * ANIMATION_DURATION - 20);
     };
     this.size = 'm';
@@ -57,41 +70,45 @@ const Counter = class {
     this.max = undefined;
     this.step = 1;
     this.value = undefined;
-    this.currentValue = undefined;
     this.displayedValue = undefined;
   }
   componentWillLoad() {
-    var _a, _b;
-    this.currentValue = (_b = (_a = this.value) !== null && _a !== void 0 ? _a : this.min) !== null && _b !== void 0 ? _b : 0;
-    this.displayedValue = this.currentValue;
+    this.handleValueChange();
     if (!isWcsCounterSize(this.size)) {
       console.error(`Invalid size value for wcs-counter : "${this.size}". Must be one of "${WcsCounterSizeValues.join(', ')}"`);
       this.size = "m"; // Default fallback value
     }
   }
-  /**
-   * Value change programmatically => update currentValue and displayedValue
-   */
-  valueChanged() {
-    var _a, _b;
-    this.currentValue = (_b = (_a = this.value) !== null && _a !== void 0 ? _a : this.min) !== null && _b !== void 0 ? _b : 0;
-    this.displayedValue = this.currentValue;
-  }
   /**
    * Current value change => handle event and interval
    */
-  currentValueChanged(newVal, oldVal) {
-    if (this.max !== undefined && this.currentValue > this.max) {
-      this.currentValue = this.max;
+  valueChange(newVal, oldVal) {
+    if (oldVal === newVal)
+      return;
+    this.handleValueChange();
+  }
+  handleValueChange() {
+    this.setMinimumIfValueIsUndefinedOrNull();
+    this.ensureValueIsNotOutOfMinMax();
+    this.updateDisplayValueIfNoAnimationRunning();
+  }
+  updateDisplayValueIfNoAnimationRunning() {
+    if (!this.animateRunning) {
+      this.displayedValue = this.value;
+    }
+  }
+  ensureValueIsNotOutOfMinMax() {
+    if (this.max !== undefined && this.value > this.max) {
+      this.value = this.max;
     }
-    else if (this.min !== undefined && this.currentValue < this.min) {
-      this.currentValue = this.min;
+    else if (this.min !== undefined && this.value < this.min) {
+      this.value = this.min;
     }
-    // Emit event only if value has changed and if it's not at component initialization
-    if (newVal !== oldVal && oldVal !== undefined) {
-      this.wcsChange.emit({
-        value: this.currentValue
-      });
+  }
+  setMinimumIfValueIsUndefinedOrNull() {
+    var _a;
+    if (this.value === undefined || this.value === null) {
+      this.value = (_a = this.min) !== null && _a !== void 0 ? _a : 0;
     }
   }
   onKeyDown(_event) {
@@ -105,22 +122,32 @@ const Counter = class {
     }
     if (helpers.isHomeKey(_event)) {
       _event.preventDefault();
-      this.currentValue = this.min;
-      this.displayedValue = this.currentValue;
+      if (this.min != null) {
+        this.value = this.min;
+        this.displayedValue = this.value;
+        this.notifyChange();
+      }
     }
     if (helpers.isEndKey(_event)) {
       _event.preventDefault();
-      this.currentValue = this.max;
-      this.displayedValue = this.currentValue;
+      if (this.max != null) {
+        this.value = this.max;
+        this.displayedValue = this.value;
+        this.notifyChange();
+      }
     }
   }
+  notifyChange() {
+    this.wcsChange.emit({
+      value: this.value
+    });
+  }
   render() {
-    return (index.h(index.Host, null, index.h("wcs-button", { class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.currentValue === this.min }, index.h("wcs-mat-icon", { icon: "remove", size: "s" })), index.h("div", { class: "counter-container" }, index.h("span", { id: "outlier-down", class: "outliers hidden", "aria-hidden": "true" }, this.displayedValue - this.step), index.h("span", { tabindex: "0", role: "spinbutton", class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-valuenow": this.currentValue, "aria-valuetext": this.currentValue, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.displayedValue), index.h("span", { id: "outlier-up", class: "outliers hidden", "aria-hidden": "true" }, this.displayedValue + this.step)), index.h("wcs-button", { class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.currentValue === this.max }, index.h("wcs-mat-icon", { icon: "add", size: "s" }))));
+    return (index.h(index.Host, null, index.h("wcs-button", { class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.value === this.min }, index.h("wcs-mat-icon", { icon: "remove", size: "s" })), index.h("div", { class: "counter-container" }, index.h("span", { id: "outlier-down", class: "outliers hidden", "aria-hidden": "true" }, this.displayedValue - this.step), index.h("span", { tabindex: "0", role: "spinbutton", class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-valuenow": this.value, "aria-valuetext": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.displayedValue), index.h("span", { id: "outlier-up", class: "outliers hidden", "aria-hidden": "true" }, this.displayedValue + this.step)), index.h("wcs-button", { class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.value === this.max }, index.h("wcs-mat-icon", { icon: "add", size: "s" }))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
-    "value": ["valueChanged"],
-    "currentValue": ["currentValueChanged"]
+    "value": ["valueChange"]
   }; }
 };
 Counter.style = counterCss;

package/dist/cjs/wcs-counter.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-counter.entry.cjs.js","mappings":"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","names":["isKeyup","isKeydown","isHomeKey","isEndKey","h","Host"],"sources":["./src/components/counter/counter-interface.ts","./src/components/counter/counter.scss?tag=wcs-counter&encapsulation=shadow","./src/components/counter/counter.tsx"],"sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface CounterChangeEventDetail {\n    value: number;\n}\n\nexport const WcsCounterSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsCounterSize = Extract<WcsSize, typeof WcsCounterSizeValues[number]>;\n\nexport function isWcsCounterSize(size: string): size is WcsCounterSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsCounterSizeValues.includes(size);\n}\n","@import '../../style/focus-outline.scss';\n\n@keyframes spin-animation-up {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n@keyframes spin-animation-down {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(-30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n:host {\n    box-sizing: border-box;\n    height: var(--wcs-counter-host-height);\n    --wcs-input-icon-color: var(--wcs-text-medium);\n    --wcs-internal-input-border-radius: calc(var(--wcs-border-radius) * 10); // 80 px\n    --wcs-internal-input-border-width: 2px;\n    font-family: var(--wcs-font-sans-serif);\n    font-size: var(--wcs-counter-font-size);\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    padding: var(--wcs-counter-host-padding);\n    width: fit-content;\n    overflow: hidden;\n    border-radius: var(--wcs-internal-input-border-radius);\n    background-color: var(--wcs-light);\n    border: var(--wcs-internal-input-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    .counter-container {\n        height: var(--wcs-counter-host-height);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        margin: 0 calc(2* var(--wcs-base-margin));\n        position: relative;\n    }\n\n    .outliers {\n        position: absolute;\n    }\n\n    #outlier-down {\n        top: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    #outlier-up {\n        bottom: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    span.current-value {\n        &:focus-visible {\n            @include focus-outline;\n        }\n    }\n\n    .animate-up {\n        animation: spin-animation-up 0.175s ease-in-out;\n    }\n\n    .animate-down {\n        animation: spin-animation-down 0.175s ease-in-out;\n    }\n\n    .hidden {\n        opacity: 0;\n    }\n}\n\n:host([size='m']) { // Default\n    --wcs-counter-host-padding: 4px;\n    --wcs-counter-host-height: var(--wcs-size-m);\n    --wcs-counter-font-size: 1rem;\n}\n\n:host([size='l']) {\n    --wcs-counter-host-padding: 8px;\n    --wcs-counter-host-height: var(--wcs-size-l);\n    --wcs-counter-font-size: 1.0625rem;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport { isEndKey, isHomeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { CounterChangeEventDetail, isWcsCounterSize, WcsCounterSize, WcsCounterSizeValues } from './counter-interface';\n\nconst ANIMATION_DURATION = 0.175 // seconds\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: true,\n})\nexport class Counter implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * Allow to change currentValue programmatically\n     */\n    @Prop({mutable: true}) value?: number;\n\n    /**\n     * The current value of the counter.\n     */\n    @State() private currentValue!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.currentValue = this.value ?? this.min ?? 0;\n        this.displayedValue = this.currentValue;\n\n        if (!isWcsCounterSize(this.size)) {\n            console.error(`Invalid size value for wcs-counter : \"${this.size}\". Must be one of \"${WcsCounterSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    /**\n     * Value change programmatically => update currentValue and displayedValue\n     */\n    @Watch('value')\n    valueChanged() {\n        this.currentValue = this.value ?? this.min ?? 0;\n        this.displayedValue = this.currentValue;\n    }\n\n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('currentValue')\n    currentValueChanged(newVal: any, oldVal: any) {\n        if (this.max !== undefined && this.currentValue > this.max) {\n            this.currentValue = this.max;\n        } else if (this.min !== undefined && this.currentValue < this.min) {\n            this.currentValue = this.min;\n        }\n\n        // Emit event only if value has changed and if it's not at component initialization\n        if (newVal !== oldVal && oldVal !== undefined) {\n            this.wcsChange.emit({\n                value: this.currentValue\n            });\n        }\n    }\n\n    onKeyDown(_event: KeyboardEvent) {\n        if (isKeyup(_event)) {\n            _event.preventDefault();\n            this.handleIncrement()\n        }\n        if (isKeydown(_event)) {\n            _event.preventDefault();\n            this.handleDecrement()\n        }\n        if (isHomeKey(_event)) {\n            _event.preventDefault();\n            this.currentValue = this.min;\n            this.displayedValue = this.currentValue;\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            this.currentValue = this.max;\n            this.displayedValue = this.currentValue;\n        }\n    }\n\n    private getCounterContainer = (): HTMLDivElement => {\n        return Array.from(this.el.shadowRoot.children)\n            .find(el => el.tagName === 'DIV') as HTMLDivElement;\n    }\n\n    private handleDecrement = () => {\n        if (this.min === undefined || this.currentValue > this.min) {\n            this.currentValue -= this.step;\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.max === undefined || this.currentValue < this.max) {\n            this.currentValue += this.step;\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down') => {\n        const counterContainer = this.getCounterContainer();\n        const outliers = Array.from(counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.classList.remove('hidden')\n        });\n        setTimeout(() => {\n            counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.classList.add('hidden')\n            });\n            this.displayedValue = this.currentValue;\n        }, 1000 * ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleDecrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.currentValue === this.min}>\n                    <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n                <div class=\"counter-container\">\n                    <span id=\"outlier-down\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                    <span tabindex=\"0\"\n                          role=\"spinbutton\"\n                          class=\"current-value\"\n                          onBlur={(event) => this.wcsBlur.emit(event)}\n                          onKeyDown={(event) => this.onKeyDown(event)}\n                          aria-valuenow={this.currentValue}\n                          aria-valuetext={this.currentValue}\n                          aria-valuemin={this.min}\n                          aria-valuemax={this.max}\n                          aria-label={this.label}>{this.displayedValue}</span>\n                    <span id=\"outlier-up\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                </div>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleIncrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.currentValue === this.max}>\n                    <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-counter.entry.cjs.js","mappings":"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","names":["isKeyup","isKeydown","isHomeKey","isEndKey","h","Host"],"sources":["./src/components/counter/counter-interface.ts","./src/components/counter/counter.scss?tag=wcs-counter&encapsulation=shadow","./src/components/counter/counter.tsx"],"sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface CounterChangeEventDetail {\n    value: number;\n}\n\nexport const WcsCounterSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsCounterSize = Extract<WcsSize, typeof WcsCounterSizeValues[number]>;\n\nexport function isWcsCounterSize(size: string): size is WcsCounterSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsCounterSizeValues.includes(size);\n}\n","@import '../../style/focus-outline.scss';\n\n@keyframes spin-animation-up {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n@keyframes spin-animation-down {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(-30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n:host {\n    box-sizing: border-box;\n    height: var(--wcs-counter-host-height);\n    --wcs-input-icon-color: var(--wcs-text-medium);\n    --wcs-internal-input-border-radius: calc(var(--wcs-border-radius) * 10); // 80 px\n    --wcs-internal-input-border-width: 2px;\n    font-family: var(--wcs-font-sans-serif);\n    font-size: var(--wcs-counter-font-size);\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    padding: var(--wcs-counter-host-padding);\n    width: fit-content;\n    overflow: hidden;\n    border-radius: var(--wcs-internal-input-border-radius);\n    background-color: var(--wcs-light);\n    border: var(--wcs-internal-input-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    .counter-container {\n        height: var(--wcs-counter-host-height);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        margin: 0 calc(2* var(--wcs-base-margin));\n        position: relative;\n    }\n\n    .outliers {\n        position: absolute;\n    }\n\n    #outlier-down {\n        top: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    #outlier-up {\n        bottom: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    span.current-value {\n        &:focus-visible {\n            @include focus-outline;\n        }\n    }\n\n    .animate-up {\n        animation: spin-animation-up 0.175s ease-in-out;\n    }\n\n    .animate-down {\n        animation: spin-animation-down 0.175s ease-in-out;\n    }\n\n    .hidden {\n        opacity: 0;\n    }\n}\n\n:host([size='m']) { // Default\n    --wcs-counter-host-padding: 4px;\n    --wcs-counter-host-height: var(--wcs-size-m);\n    --wcs-counter-font-size: 1rem;\n}\n\n:host([size='l']) {\n    --wcs-counter-host-padding: 8px;\n    --wcs-counter-host-height: var(--wcs-size-l);\n    --wcs-counter-font-size: 1.0625rem;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport { isEndKey, isHomeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { CounterChangeEventDetail, isWcsCounterSize, WcsCounterSize, WcsCounterSizeValues } from './counter-interface';\n\nconst ANIMATION_DURATION = 0.175 // seconds\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: true,\n})\nexport class Counter implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * The current value of the counter.\n     */\n    @Prop({mutable: true}) value!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    private animateRunning = false;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.handleValueChange();\n\n        if (!isWcsCounterSize(this.size)) {\n            console.error(`Invalid size value for wcs-counter : \"${this.size}\". Must be one of \"${WcsCounterSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('value')\n    valueChange(newVal: any, oldVal: any) {\n        if(oldVal === newVal) return;\n\n        this.handleValueChange();\n    }\n\n    private handleValueChange() {\n        this.setMinimumIfValueIsUndefinedOrNull();\n        this.ensureValueIsNotOutOfMinMax();\n        this.updateDisplayValueIfNoAnimationRunning();\n    }\n\n    private updateDisplayValueIfNoAnimationRunning() {\n        if (!this.animateRunning) {\n            this.displayedValue = this.value;\n        }\n    }\n\n    private ensureValueIsNotOutOfMinMax() {\n        if (this.max !== undefined && this.value > this.max) {\n            this.value = this.max;\n        } else if (this.min !== undefined && this.value < this.min) {\n            this.value = this.min;\n        }\n    }\n\n    private setMinimumIfValueIsUndefinedOrNull() {\n        if (this.value === undefined || this.value === null) {\n            this.value = this.min ?? 0;\n        }\n    }\n\n    onKeyDown(_event: KeyboardEvent) {\n        if (isKeyup(_event)) {\n            _event.preventDefault();\n            this.handleIncrement()\n        }\n        if (isKeydown(_event)) {\n            _event.preventDefault();\n            this.handleDecrement()\n        }\n        if (isHomeKey(_event)) {\n            _event.preventDefault();\n            if (this.min != null) {\n                this.value = this.min;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            if (this.max != null) {\n                this.value = this.max;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n    }\n\n    private notifyChange() {\n        this.wcsChange.emit({\n            value: this.value\n        });\n    }\n    \n    private getCounterContainer = (): HTMLDivElement => {\n        return Array.from(this.el.shadowRoot.children)\n            .find(el => el.tagName === 'DIV') as HTMLDivElement;\n    }\n\n    private handleDecrement = () => {\n        if (this.min === undefined || this.value > this.min) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value -= this.step;\n            this.notifyChange();\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.max === undefined || this.value < this.max) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value += this.step;\n            this.notifyChange();\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down'): void => {\n        // In case someone call animate function, we want ensured that animateRunning is set to true to prevent other \n        // method to mutate the displayedValue.\n        this.animateRunning = true;  \n\n        const counterContainer = this.getCounterContainer();\n        const outliers = Array.from(counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.classList.remove('hidden')\n        });\n        setTimeout(() => {\n            counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.classList.add('hidden')\n            });\n            this.displayedValue = this.value;\n\n            this.animateRunning = false;\n        }, 1000 * ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleDecrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.value === this.min}>\n                    <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n                <div class=\"counter-container\">\n                    <span id=\"outlier-down\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                    <span tabindex=\"0\"\n                          role=\"spinbutton\"\n                          class=\"current-value\"\n                          onBlur={(event) => this.wcsBlur.emit(event)}\n                          onKeyDown={(event) => this.onKeyDown(event)}\n                          aria-valuenow={this.value}\n                          aria-valuetext={this.value}\n                          aria-valuemin={this.min}\n                          aria-valuemax={this.max}\n                          aria-label={this.label}>{this.displayedValue}</span>\n                    <span id=\"outlier-up\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                </div>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleIncrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.value === this.max}>\n                    <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/wcs-error_2.cjs.entry.js

@@ -80,7 +80,7 @@ const FormField = class {
   }
   initSpiedElement() {
     var _a, _b;
-    const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select'];
+    const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];
     this.spiedElement = (_a = this.el.shadowRoot.querySelector('slot:not([name])')) === null || _a === void 0 ? void 0 : _a.assignedElements().filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];
     // If the component is used in another web component
     if (((_b = this.spiedElement) === null || _b === void 0 ? void 0 : _b.tagName) === 'SLOT') {

package/dist/cjs/wcs-error_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-error.wcs-form-field.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","./src/components/error/error.tsx","./src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","./src/components/form-field/form-field.tsx"],"sourcesContent":[":host {\n    margin-top: 0.25rem;\n    color: var(--wcs-red);\n}","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-error',\n    styleUrl: 'error.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface {\n    render() {\n        return (\n            <Host slot=\"error\">\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    --wcs-form-field-border-radius-left: var(--wcs-border-radius);\n    --wcs-form-field-border-radius-right: var(--wcs-border-radius);\n\n    display: flex;\n    flex-direction: column;\n}\n\n.input-container {\n    display: flex;\n}\n\n::slotted(wcs-radio-group) {\n    margin-left: var(--wcs-base-margin);\n}\n\n::slotted(wcs-radio-group[mode=option]) {\n    margin-left: 0;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n// Label style\n::slotted(label) {\n    font-weight: 500;\n    margin-bottom: 8px;\n}\n\n// Make input square on left side if there is a prefix\n:host(.has-prefix) {\n    --wcs-input-border-radius-left: 0;\n}\n\n// Make input square on right side if there is a suffix\n:host(.has-suffix) {\n    --wcs-input-border-radius-right: 0;\n}\n\n// Prefixed select\n::slotted([slot=prefix]) {\n    --wcs-select-border-radius: var(--wcs-border-radius) 0 0 var(--wcs-border-radius);\n    --wcs-select-background-color: var(--wcs-gray-light);\n    --wcs-select-value-color: var(--wcs-white);\n    --wcs-select-placeholder-color: var(--wcs-white);\n    --wcs-select-border-color: var(--wcs-gray-light);\n}\n\n::slotted([slot=suffix]) {\n    // Make button square on left side\n    --wcs-button-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0;\n\n    // Make select square on left side\n    --wcs-select-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0 ;\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\n/**\n * TODO:\n * - [ ] Suffix button style\n */\n@Component({\n    tag: 'wcs-form-field',\n    styleUrl: 'form-field.scss',\n    shadow: true,\n})\nexport class FormField implements ComponentInterface {\n    @Element() private el!: HTMLWcsFormFieldElement;\n\n    /**\n     * Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n     */\n    @Prop({mutable: true, reflect: true}) isError = false;\n\n    @State() private hasPrefix = false;\n    @State() private hasSuffix = false;\n    @State() private spiedElement: Element;\n\n    private observer: MutationObserver;\n\n    componentWillLoad() {\n        this.hasSuffix = this.el.querySelector('wcs-button') !== null;\n        this.hasPrefix = this.el.querySelector('wcs-select') !== null;\n    }\n\n    componentDidLoad() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n\n\n    @Watch('isError')\n    // @ts-ignore\n    private isErrorChange(newValue: boolean) {\n        this.updateErrorStateOnInput(newValue);\n    }\n\n    private updateErrorStateOnInput(newValue: boolean) {\n        if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n            if (newValue) {\n                this.spiedElement.setAttribute('state', 'error');\n            } else {\n                this.spiedElement.setAttribute('state', 'initial');\n            }\n        }\n    }\n\n    /**\n     * This function return true if the form field contains an element with tagName matches a value of the types param\n     * @param types\n     * @private\n     */\n    private spiedElementIsOfType(...types: string[]): boolean {\n        for (const type of types) {\n            if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n        }\n        return false\n    }\n\n\n    private addRequiredMarkerToLabel() {\n        // TODO: deprecate this in favor of the 'required' component attribute\n        const label = this.el.querySelector('wcs-label');\n        this.observer = new MutationObserver(mutations => {\n            const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n            if (requiredAttMutation) {\n                this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n            }\n        });\n        if (this.spiedElement) {\n            this.observer.observe(this.spiedElement, {attributes: true});\n        }\n\n        const isRequired = this.spiedElement?.hasAttribute('required');\n        this.updateLabelRequiredFlag(isRequired, label);\n    }\n\n\n    private initSpiedElement() {\n        const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select'];\n\n        this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n            ?.assignedElements()\n            .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n        // If the component is used in another web component\n        if (this.spiedElement?.tagName === 'SLOT') {\n            this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n                .assignedElements()\n                .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n        }\n\n        if (!this.spiedElement) {\n            // tslint:disable-next-line:no-console\n            console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n            return;\n        }\n    }\n\n    private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n        if (isRequired && label) {\n            label.setAttribute('required', 'true');\n        } else if (!isRequired && label) {\n            label.removeAttribute('required');\n        }\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n    }\n\n    render() {\n        let classes = '';\n        const isError = this.isError;\n\n        if (this.hasSuffix) {\n            classes += ' has-suffix';\n        }\n        if (this.hasPrefix) {\n            classes += ' has-prefix';\n        }\n        return (\n            <Host class={classes}>\n                <slot name=\"label\"/>\n                <div class=\"input-container\">\n                    <slot name=\"prefix\"/>\n                    <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n                    <slot name=\"suffix\"/>\n                </div>\n                {\n                    isError ? (<slot name=\"error\"/>) : ''\n                }\n                <slot name=\"messages\"/>\n            </Host>\n        );\n    }\n\n    private onFormInputSlotChange() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n}\n"],"version":3}
+{"file":"wcs-error.wcs-form-field.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","./src/components/error/error.tsx","./src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","./src/components/form-field/form-field.tsx"],"sourcesContent":[":host {\n    margin-top: 0.25rem;\n    color: var(--wcs-red);\n}","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-error',\n    styleUrl: 'error.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface {\n    render() {\n        return (\n            <Host slot=\"error\">\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    --wcs-form-field-border-radius-left: var(--wcs-border-radius);\n    --wcs-form-field-border-radius-right: var(--wcs-border-radius);\n\n    display: flex;\n    flex-direction: column;\n}\n\n.input-container {\n    display: flex;\n}\n\n::slotted(wcs-radio-group) {\n    margin-left: var(--wcs-base-margin);\n}\n\n::slotted(wcs-radio-group[mode=option]) {\n    margin-left: 0;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n// Label style\n::slotted(label) {\n    font-weight: 500;\n    margin-bottom: 8px;\n}\n\n// Make input square on left side if there is a prefix\n:host(.has-prefix) {\n    --wcs-input-border-radius-left: 0;\n}\n\n// Make input square on right side if there is a suffix\n:host(.has-suffix) {\n    --wcs-input-border-radius-right: 0;\n}\n\n// Prefixed select\n::slotted([slot=prefix]) {\n    --wcs-select-border-radius: var(--wcs-border-radius) 0 0 var(--wcs-border-radius);\n    --wcs-select-background-color: var(--wcs-gray-light);\n    --wcs-select-value-color: var(--wcs-white);\n    --wcs-select-placeholder-color: var(--wcs-white);\n    --wcs-select-border-color: var(--wcs-gray-light);\n}\n\n::slotted([slot=suffix]) {\n    // Make button square on left side\n    --wcs-button-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0;\n\n    // Make select square on left side\n    --wcs-select-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0 ;\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\n/**\n * TODO:\n * - [ ] Suffix button style\n */\n@Component({\n    tag: 'wcs-form-field',\n    styleUrl: 'form-field.scss',\n    shadow: true,\n})\nexport class FormField implements ComponentInterface {\n    @Element() private el!: HTMLWcsFormFieldElement;\n\n    /**\n     * Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n     */\n    @Prop({mutable: true, reflect: true}) isError = false;\n\n    @State() private hasPrefix = false;\n    @State() private hasSuffix = false;\n    @State() private spiedElement: Element;\n\n    private observer: MutationObserver;\n\n    componentWillLoad() {\n        this.hasSuffix = this.el.querySelector('wcs-button') !== null;\n        this.hasPrefix = this.el.querySelector('wcs-select') !== null;\n    }\n\n    componentDidLoad() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n\n\n    @Watch('isError')\n    // @ts-ignore\n    private isErrorChange(newValue: boolean) {\n        this.updateErrorStateOnInput(newValue);\n    }\n\n    private updateErrorStateOnInput(newValue: boolean) {\n        if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n            if (newValue) {\n                this.spiedElement.setAttribute('state', 'error');\n            } else {\n                this.spiedElement.setAttribute('state', 'initial');\n            }\n        }\n    }\n\n    /**\n     * This function return true if the form field contains an element with tagName matches a value of the types param\n     * @param types\n     * @private\n     */\n    private spiedElementIsOfType(...types: string[]): boolean {\n        for (const type of types) {\n            if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n        }\n        return false\n    }\n\n\n    private addRequiredMarkerToLabel() {\n        // TODO: deprecate this in favor of the 'required' component attribute\n        const label = this.el.querySelector('wcs-label');\n        this.observer = new MutationObserver(mutations => {\n            const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n            if (requiredAttMutation) {\n                this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n            }\n        });\n        if (this.spiedElement) {\n            this.observer.observe(this.spiedElement, {attributes: true});\n        }\n\n        const isRequired = this.spiedElement?.hasAttribute('required');\n        this.updateLabelRequiredFlag(isRequired, label);\n    }\n\n\n    private initSpiedElement() {\n        const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];\n\n        this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n            ?.assignedElements()\n            .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n        // If the component is used in another web component\n        if (this.spiedElement?.tagName === 'SLOT') {\n            this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n                .assignedElements()\n                .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n        }\n\n        if (!this.spiedElement) {\n            // tslint:disable-next-line:no-console\n            console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n            return;\n        }\n    }\n\n    private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n        if (isRequired && label) {\n            label.setAttribute('required', 'true');\n        } else if (!isRequired && label) {\n            label.removeAttribute('required');\n        }\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n    }\n\n    render() {\n        let classes = '';\n        const isError = this.isError;\n\n        if (this.hasSuffix) {\n            classes += ' has-suffix';\n        }\n        if (this.hasPrefix) {\n            classes += ' has-prefix';\n        }\n        return (\n            <Host class={classes}>\n                <slot name=\"label\"/>\n                <div class=\"input-container\">\n                    <slot name=\"prefix\"/>\n                    <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n                    <slot name=\"suffix\"/>\n                </div>\n                {\n                    isError ? (<slot name=\"error\"/>) : ''\n                }\n                <slot name=\"messages\"/>\n            </Host>\n        );\n    }\n\n    private onFormInputSlotChange() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n}\n"],"version":3}

package/dist/cjs/wcs-grid-column.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-grid-column.entry.cjs.js","mappings":";;;;;;AAOO,MAAM,aAAa,GAA4C,CAAC,EAAE,KAAK,EAAE,MAC5EA,iBAAK,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;EAC7GA,mBAAO,IAAI,EAAC,UAAU,IAAE;;;;;;;;;;;;;;;;;;;SAmBvB,CAAS;EACVA,eAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,iBAAiB;IAClCA,kBAAM,KAAK,EAAE,CAAC,KAAK,KAAK,KAAK,GAAG,QAAQ,GAAG,EAAE,IAAI,QAAQ,EAAE,CAAC,EAAC,gDAAgD,GAAG;IAChHA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAG,CACtC;EACJA,eAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB;IACnCA,kBAAM,KAAK,EAAE,CAAC,KAAK,KAAK,MAAM,GAAG,QAAQ,GAAG,EAAE,IAAI,QAAQ,EAAE,CAAC,EAAC,gDAAgD,GAAG;IACjHA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAG,CACtC,CACF,CACT;;ACtCD,MAAM,aAAa,GAAG,gqBAAgqB;;MCSzqB,UAAU;;;;;;;gBAIK,KAAK;;;qBAGoB,MAAM;;uBAKxB,KAAK;kBACV,KAAK;;EAK/B,iBAAiB,CAAC,QAAiB;IAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACvC;EAGD,eAAe,CAAC,CAAe;IAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;GACzB;EAED,cAAc;IACV,IAAI,CAAC,IAAI,CAAC,IAAI;MAAE,OAAO;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;MACpB,MAAM,EAAE,IAAI,CAAC,EAAE;MACf,KAAK,EAAE,IAAI,CAAC,SAAS;MACrB,MAAM,EAAE,IAAI,CAAC,MAAM;KACtB,CAAC,CAAC;GACN;EAED,MAAM;IACF,QAAQA,QAACC,UAAI,IAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,aAAa,IAClED,gBAAI,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,EAAE,IAC7DA,iBAAK,KAAK,EAAC,wBAAwB,IAC/BA,sBAAO,IAAI,CAAC,IAAI,CAAQ,EAEpB,IAAI,CAAC,IAAI,GAAGA,QAAC,aAAa,IAAC,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,GAAG,EAAE,CAE1D,CACL,CACF,EAAC;GACX;EAEO,WAAW;;IAEf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;GAC5F;;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/grid-column/grid-sort-arrow.tsx","./src/components/grid-column/grid-column.scss?tag=wcs-grid-column&encapsulation=shadow","./src/components/grid-column/grid-column.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { WcsSortOrder } from '../grid/grid-interface';\n\ninterface GridSortArrowProps {\n  state: WcsSortOrder;\n}\n\nexport const GridSortArrow: FunctionalComponent<GridSortArrowProps> = ({ state }) => (\n    <svg style={{ marginLeft: 'auto' }} xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n        <style type=\"text/css\">{`\n            .arrow-group {\n                transform-origin: 50% 51%;\n                transition: transform 175ms ease-in-out;\n            }\n            .arrow{\n                transition: fill 175ms ease-in-out;\n                fill: var(--wcs-text-light);\n            }\n            .asc {\n                transform: scaleY(1) translateY(-6px);\n            }\n            .desc {\n                transform: scaleY(-1) translateY(-6px);\n            }\n            .active {\n                fill: var(--wcs-primary);\n            }\n\n        `}</style>\n        <g fill=\"none\" class='asc arrow-group'>\n            <path class={(state === 'asc' ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n        </g>\n        <g fill=\"none\" class='desc arrow-group'>\n            <path class={(state === 'desc' ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n        </g>\n    </svg>\n);\n",":host {\n    --wcs-grid-column-border-left: solid 1px var(--wcs-text-light);\n\n    display: contents;\n\n    th {\n        color: var(--wcs-gray-dark);\n        background-color: var(--wcs-light);\n        border-left: var(--wcs-grid-column-border-left);\n        padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);\n        text-align: left;\n\n        .grid-column-th-content {\n            display: inline-flex;\n            flex-direction: row;\n\n            span {\n                user-select: none;\n            }\n        }\n    }\n\n    .pointer {\n        cursor: pointer;\n    }\n}\n\n:host([sort-order=\"asc\"]) {\n    img {\n        transform: scaleY(1);\n    }\n}\n\n:host([sort-order=\"desc\"]) {\n    img {\n        transform: scaleY(-1);\n    }\n}\n\n:host([sort-order=\"none\"]) {\n    img {\n        display: none;\n    }\n\n    th:hover {\n        img {\n            display: inline-block;\n        }\n    }\n}\n\n:host([hidden]) {\n    display: none !important;\n}\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core';\nimport { WcsCellFormatter, WcsGridColumnSortChangeEventDetails, WcsSortFn, WcsSortOrder } from '../grid/grid-interface';\nimport { GridSortArrow } from './grid-sort-arrow';\n\n@Component({\n    tag: 'wcs-grid-column',\n    styleUrl: 'grid-column.scss',\n    shadow: true\n})\nexport class GridColumn implements ComponentInterface {\n    @Element() private el: HTMLWcsGridColumnElement;\n    @Prop() path: string;\n    @Prop() name: string;\n    @Prop() sort: boolean = false;\n    @Prop() sortFn: WcsSortFn;\n    @Prop() formatter: WcsCellFormatter;\n    @Prop({mutable: true}) sortOrder: WcsSortOrder = 'none';\n    /**\n     * Set the column <th> element width\n     */\n    @Prop() width: string;\n    @Prop() customCells: boolean = false;\n    @Prop() hidden: boolean = false;\n    @Event() wcsSortChange!: EventEmitter<WcsGridColumnSortChangeEventDetails>;\n    @Event() wcsHiddenChange!: EventEmitter<boolean>;\n\n    @Watch('hidden')\n    parseMyObjectProp(newValue: boolean) {\n        this.wcsHiddenChange.emit(newValue);\n    }\n\n    @Watch('sortOrder')\n    sortOrderChange(_: WcsSortOrder) {\n        this.emitSortConfig();\n    }\n\n    emitSortConfig() {\n        if (!this.sort) return;\n        this.wcsSortChange.emit({\n            column: this.el,\n            order: this.sortOrder,\n            sortFn: this.sortFn\n        });\n    }\n\n    render(): any {\n        return (<Host onClick={this.onSortClick.bind(this)} slot=\"grid-column\">\n            <th style={{width: this.width}} class={this.sort ? 'pointer' : ''}>\n                <div class=\"grid-column-th-content\">\n                    <span>{this.name}</span>\n                    {\n                        this.sort ? <GridSortArrow state={this.sortOrder}/> : ''\n                    }\n                </div>\n            </th>\n        </Host>)\n    }\n\n    private onSortClick() {\n        // @Watch on sortOrder property will trigger wcsSortChange event\n        this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';\n    }\n}\n"],"version":3}
+{"file":"wcs-grid-column.entry.cjs.js","mappings":";;;;;;AAOO,MAAM,aAAa,GAA4C,CAAC,EAAE,KAAK,EAAE,MAC5EA,iBAAK,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;EAC7GA,mBAAO,IAAI,EAAC,UAAU,IAAE;;;;;;;;;;;;;;;;;;;SAmBvB,CAAS;EACVA,eAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,iBAAiB;IAClCA,kBAAM,KAAK,EAAE,CAAC,KAAK,KAAK,KAAK,GAAG,QAAQ,GAAG,EAAE,IAAI,QAAQ,EAAE,CAAC,EAAC,gDAAgD,GAAG;IAChHA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAG,CACtC;EACJA,eAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB;IACnCA,kBAAM,KAAK,EAAE,CAAC,KAAK,KAAK,MAAM,GAAG,QAAQ,GAAG,EAAE,IAAI,QAAQ,EAAE,CAAC,EAAC,gDAAgD,GAAG;IACjHA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAG,CACtC,CACF,CACT;;ACtCD,MAAM,aAAa,GAAG,gqBAAgqB;;MCczqB,UAAU;;;;;;;gBAaK,KAAK;;;qBAaoB,MAAM;;uBAQxB,KAAK;kBAIV,KAAK;;EAW/B,iBAAiB,CAAC,QAAiB;IAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACvC;EAGD,eAAe,CAAC,CAAe;IAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;GACzB;EAED,cAAc;IACV,IAAI,CAAC,IAAI,CAAC,IAAI;MAAE,OAAO;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;MACpB,MAAM,EAAE,IAAI,CAAC,EAAE;MACf,KAAK,EAAE,IAAI,CAAC,SAAS;MACrB,MAAM,EAAE,IAAI,CAAC,MAAM;KACtB,CAAC,CAAC;GACN;EAED,MAAM;IACF,QAAQA,QAACC,UAAI,IAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,aAAa,IAClED,gBAAI,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,EAAE,IAC7DA,iBAAK,KAAK,EAAC,wBAAwB,IAC/BA,sBAAO,IAAI,CAAC,IAAI,CAAQ,EAEpB,IAAI,CAAC,IAAI,GAAGA,QAAC,aAAa,IAAC,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,GAAG,EAAE,CAE1D,CACL,CACF,EAAC;GACX;EAEO,WAAW;;IAEf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;GAC5F;;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/grid-column/grid-sort-arrow.tsx","./src/components/grid-column/grid-column.scss?tag=wcs-grid-column&encapsulation=shadow","./src/components/grid-column/grid-column.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { WcsSortOrder } from '../grid/grid-interface';\n\ninterface GridSortArrowProps {\n  state: WcsSortOrder;\n}\n\nexport const GridSortArrow: FunctionalComponent<GridSortArrowProps> = ({ state }) => (\n    <svg style={{ marginLeft: 'auto' }} xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n        <style type=\"text/css\">{`\n            .arrow-group {\n                transform-origin: 50% 51%;\n                transition: transform 175ms ease-in-out;\n            }\n            .arrow{\n                transition: fill 175ms ease-in-out;\n                fill: var(--wcs-text-light);\n            }\n            .asc {\n                transform: scaleY(1) translateY(-6px);\n            }\n            .desc {\n                transform: scaleY(-1) translateY(-6px);\n            }\n            .active {\n                fill: var(--wcs-primary);\n            }\n\n        `}</style>\n        <g fill=\"none\" class='asc arrow-group'>\n            <path class={(state === 'asc' ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n        </g>\n        <g fill=\"none\" class='desc arrow-group'>\n            <path class={(state === 'desc' ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n        </g>\n    </svg>\n);\n",":host {\n    --wcs-grid-column-border-left: solid 1px var(--wcs-text-light);\n\n    display: contents;\n\n    th {\n        color: var(--wcs-gray-dark);\n        background-color: var(--wcs-light);\n        border-left: var(--wcs-grid-column-border-left);\n        padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);\n        text-align: left;\n\n        .grid-column-th-content {\n            display: inline-flex;\n            flex-direction: row;\n\n            span {\n                user-select: none;\n            }\n        }\n    }\n\n    .pointer {\n        cursor: pointer;\n    }\n}\n\n:host([sort-order=\"asc\"]) {\n    img {\n        transform: scaleY(1);\n    }\n}\n\n:host([sort-order=\"desc\"]) {\n    img {\n        transform: scaleY(-1);\n    }\n}\n\n:host([sort-order=\"none\"]) {\n    img {\n        display: none;\n    }\n\n    th:hover {\n        img {\n            display: inline-block;\n        }\n    }\n}\n\n:host([hidden]) {\n    display: none !important;\n}\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core';\nimport { WcsCellFormatter, WcsGridColumnSortChangeEventDetails, WcsSortFn, WcsSortOrder } from '../grid/grid-interface';\nimport { GridSortArrow } from './grid-sort-arrow';\n\n/**\n * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.\n * @cssprop --wcs-grid-column-border-left - Border separator between column names\n * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column\n */\n@Component({\n    tag: 'wcs-grid-column',\n    styleUrl: 'grid-column.scss',\n    shadow: true\n})\nexport class GridColumn implements ComponentInterface {\n    @Element() private el: HTMLWcsGridColumnElement;\n    /**\n     * Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...)\n     */\n    @Prop() path: string;\n    /**\n     * The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...)\n     */\n    @Prop() name: string;\n    /**\n     * Make the column sortable.\n     */\n    @Prop() sort: boolean = false;\n    /**\n     * Customizable sort function to change the comparison of values.\n     */\n    @Prop() sortFn: WcsSortFn;\n    /**\n     * Customizable formatter function to render the cell differently.\n     */\n    @Prop() formatter: WcsCellFormatter;\n    /**\n     * Defines if the column sort is ascending or descending.  \n     * `none` = the column is not sorted.\n     */\n    @Prop({mutable: true}) sortOrder: WcsSortOrder = 'none';\n    /**\n     * Set the column `<th>` element width.\n     */\n    @Prop() width: string;\n    /**\n     * Set to true if using a `wcs-custom-cell` linked to it.\n     */\n    @Prop() customCells: boolean = false;\n    /**\n     * Flag to hide the column.\n     */\n    @Prop() hidden: boolean = false;\n    /**\n     * Event emitted when the sort of the column is changed.\n     */\n    @Event() wcsSortChange!: EventEmitter<WcsGridColumnSortChangeEventDetails>;\n    /**\n     * Event emitted if the column is dynamically switching visibility.\n     */\n    @Event() wcsHiddenChange!: EventEmitter<boolean>;\n\n    @Watch('hidden')\n    parseMyObjectProp(newValue: boolean) {\n        this.wcsHiddenChange.emit(newValue);\n    }\n\n    @Watch('sortOrder')\n    sortOrderChange(_: WcsSortOrder) {\n        this.emitSortConfig();\n    }\n\n    emitSortConfig() {\n        if (!this.sort) return;\n        this.wcsSortChange.emit({\n            column: this.el,\n            order: this.sortOrder,\n            sortFn: this.sortFn\n        });\n    }\n\n    render(): any {\n        return (<Host onClick={this.onSortClick.bind(this)} slot=\"grid-column\">\n            <th style={{width: this.width}} class={this.sort ? 'pointer' : ''}>\n                <div class=\"grid-column-th-content\">\n                    <span>{this.name}</span>\n                    {\n                        this.sort ? <GridSortArrow state={this.sortOrder}/> : ''\n                    }\n                </div>\n            </th>\n        </Host>)\n    }\n\n    private onSortClick() {\n        // @Watch on sortOrder property will trigger wcsSortChange event\n        this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';\n    }\n}\n"],"version":3}

package/dist/cjs/wcs-grid-custom-cell.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-grid-custom-cell.entry.cjs.js","mappings":";;;;;;MAMa,cAAc;;;;;;EAUvB,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,IACxCD,qBAAQ,CACL,EACT;GACL;;;;;","names":["h","Host"],"sources":["./src/components/grid-custom-cell/grid-custom-cell.tsx"],"sourcesContent":["import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-grid-custom-cell',\n    shadow: true\n})\nexport class GridCustomCell implements ComponentInterface {\n    /**\n     * ID of the column for which to render the cell\n     */\n    @Prop() columnId: string;\n    /**\n     * Key value of the object rendered for the cell's row\n     */\n    @Prop() rowId: any;\n\n    render(): any {\n        return (\n            <Host slot={this.columnId + '-' + this.rowId}>\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-grid-custom-cell.entry.cjs.js","mappings":";;;;;;MASa,cAAc;;;;;;EAUvB,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,IACxCD,qBAAQ,CACL,EACT;GACL;;;;;","names":["h","Host"],"sources":["./src/components/grid-custom-cell/grid-custom-cell.tsx"],"sourcesContent":["import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n/**\n * The grid custom cell is a subcomponent of `wcs-grid`.\n */\n@Component({\n    tag: 'wcs-grid-custom-cell',\n    shadow: true\n})\nexport class GridCustomCell implements ComponentInterface {\n    /**\n     * ID of the column for which to render the cell\n     */\n    @Prop() columnId: string;\n    /**\n     * Key value of the object rendered for the cell's row\n     */\n    @Prop() rowId: any;\n\n    render(): any {\n        return (\n            <Host slot={this.columnId + '-' + this.rowId}>\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"version":3}