wcs-core 7.1.0 → 7.2.1

package/dist/wcs/p-1438530e.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as c}from"./p-32e583ea.js";const r=":host{--wcs-badge-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-badge-height-l:calc(4 * var(--wcs-semantic-size-base));--wcs-badge-font-size-l:var(--wcs-semantic-font-size-label-1);--wcs-badge-height-m:calc(3 * var(--wcs-semantic-size-base));--wcs-badge-font-size-m:var(--wcs-semantic-font-size-label-2);--wcs-badge-height-s:calc(2.5 * var(--wcs-semantic-size-base));--wcs-badge-font-size-s:var(--wcs-semantic-font-size-label-3);--wcs-badge-border-radius-default:var(--wcs-semantic-border-radius-base);--wcs-badge-border-radius-circular:var(--wcs-semantic-border-radius-full);--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse);--wcs-badge-gap:var(--wcs-semantic-spacing-base);--wcs-badge-padding-horizontal-l:var(--wcs-semantic-spacing-base);--wcs-badge-padding-horizontal-m:var(--wcs-semantic-spacing-base);--wcs-badge-padding-horizontal-s:calc(0.75 * var(--wcs-semantic-spacing-base));display:inline-flex;gap:var(--wcs-badge-gap);padding:0 var(--wcs-badge-padding-horizontal);height:var(--wcs-badge-height);inline-size:fit-content;font-size:var(--wcs-badge-font-size);box-sizing:border-box;font-weight:var(--wcs-badge-font-weight);line-height:1;text-align:center;align-content:center;align-items:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--wcs-badge-border-radius-default);color:var(--wcs-badge-color);background-color:var(--wcs-badge-background-color)}:host([color=lighter]){--wcs-badge-color:var(--wcs-badge-color-lighter) !important;--wcs-badge-background-color:var(--wcs-badge-background-color-lighter) !important}:host([shape=rounded]){border-radius:var(--wcs-badge-border-radius-circular)}:host([size=l]){--wcs-badge-height:var(--wcs-badge-height-l);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-large) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-l);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-l)}:host([size=m]){--wcs-badge-height:var(--wcs-badge-height-m);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-base) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-m);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-m)}:host([size=s]){--wcs-badge-height:var(--wcs-badge-height-s);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-small) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-s);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-s)}:host(.wcs-secondary){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-secondary);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-success){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-success-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-success-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-info){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-information-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-information-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-warning){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-warning-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-warning-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-inverse);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-critical),:host(.wcs-danger){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-critical-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-critical-lightest);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-critical)}";const s=r;const e=class{constructor(c){a(this,c);this.shape="normal";this.color="initial";this.size="m"}render(){return c("slot",{key:"03ddc8c170819c33674104a70697291ef5e56a9d"})}};e.style=s;export{e as wcs_badge};
-//# sourceMappingURL=p-1438530e.entry.js.map

package/dist/wcs/p-1438530e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["badgeCss","WcsBadgeStyle0","Badge","render","h","key"],"sources":["src/components/badge/badge.scss?tag=wcs-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":[":host {\n    --wcs-badge-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-badge-height-l: calc(4 * var(--wcs-semantic-size-base));\n    --wcs-badge-font-size-l: var(--wcs-semantic-font-size-label-1);\n    --wcs-badge-height-m: calc(3 * var(--wcs-semantic-size-base));\n    --wcs-badge-font-size-m: var(--wcs-semantic-font-size-label-2);\n    --wcs-badge-height-s: calc(2.5 * var(--wcs-semantic-size-base));\n    --wcs-badge-font-size-s: var(--wcs-semantic-font-size-label-3);\n\n    --wcs-badge-border-radius-default: var(--wcs-semantic-border-radius-base);\n    --wcs-badge-border-radius-circular: var(--wcs-semantic-border-radius-full);\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-brand);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n    --wcs-badge-gap: var(--wcs-semantic-spacing-base);\n    --wcs-badge-padding-horizontal-l: var(--wcs-semantic-spacing-base);\n    --wcs-badge-padding-horizontal-m: var(--wcs-semantic-spacing-base);\n    --wcs-badge-padding-horizontal-s: calc(0.75 * var(--wcs-semantic-spacing-base));\n\n    display: inline-flex;\n    gap: var(--wcs-badge-gap);\n    padding: 0 var(--wcs-badge-padding-horizontal);\n    height: var(--wcs-badge-height);\n    inline-size: fit-content;\n    font-size: var(--wcs-badge-font-size);\n    box-sizing: border-box;\n    font-weight: var(--wcs-badge-font-weight);\n    line-height: 1;\n    text-align: center;\n    align-content: center;\n    align-items: center;\n    white-space: nowrap;\n    vertical-align: baseline;\n    border-radius: var(--wcs-badge-border-radius-default);\n    color: var(--wcs-badge-color);\n    background-color: var(--wcs-badge-background-color);\n}\n\n:host([color=lighter]) {\n    --wcs-badge-color: var(--wcs-badge-color-lighter) !important;\n    --wcs-badge-background-color: var(--wcs-badge-background-color-lighter) !important;\n}\n\n:host([shape=rounded]){\n    border-radius: var(--wcs-badge-border-radius-circular);\n}\n\n:host([size=l]) {\n    --wcs-badge-height: var(--wcs-badge-height-l);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-large) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-l);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-l);\n}\n\n:host([size=m]) { // Default\n    --wcs-badge-height: var(--wcs-badge-height-m);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-base) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-m);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-m);\n}\n\n:host([size=s]) {\n    --wcs-badge-height: var(--wcs-badge-height-s);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-small) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-s);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-s);\n}\n\n\n/* Color variants */\n\n:host(.wcs-secondary) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-inverse);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-secondary);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-success) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-success-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-success-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-info) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-information-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-information-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-warning) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-warning-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-warning-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-inverse);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-critical), :host(.wcs-danger) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-critical-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-critical-lightest);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-critical);\n}\n","import { Component, ComponentInterface, h, Prop } from '@stencil/core';\nimport { BadgeColor, BadgeShape, BadgeSize } from './badge-interface';\n\n/**\n * The badge component is a small label, generally appearing inside or in proximity to another larger interface component,\n * representing a status, property, or some other metadata.  \n *\n * @cssprop --wcs-badge-font-weight - Define the font weight of the badge\n * @cssprop --wcs-badge-height-l - Large height of the badge\n * @cssprop --wcs-badge-font-size-l - Large font size of the badge\n * @cssprop --wcs-badge-height-m - Medium height of the badge\n * @cssprop --wcs-badge-font-size-m - Font size of the badge\n * @cssprop --wcs-badge-height-s - Small height of the badge\n * @cssprop --wcs-badge-font-size-s - Small font size of the badge\n * @cssprop --wcs-badge-border-radius-default - Default border radius of the badge\n * @cssprop --wcs-badge-border-radius-circular - Circular border radius of the badge\n * \n * @cssprop --wcs-badge-background-color - Background color of the badge\n * @cssprop --wcs-badge-background-color-lighter - Background color of the lighter badge\n * @cssprop --wcs-badge-color - Text color of the badge\n * @cssprop --wcs-badge-color-lighter - Text color of the lighter badge\n * @cssporp --wcs-badge-gap - The gap inside the badge\n * \n * @cssprop --wcs-badge-padding-horizontal-l - Horizontal padding of the size L badge\n * @cssprop --wcs-badge-padding-horizontal-m - Horizontal padding of the size M badge\n * @cssprop --wcs-badge-padding-horizontal-s - Horizontal padding of the size S badge\n */\n@Component({\n    tag: 'wcs-badge',\n    styleUrl: 'badge.scss',\n    shadow: true\n})\nexport class Badge implements ComponentInterface {\n    /**\n     * Define the shape of the badge\n     */\n    @Prop() shape: BadgeShape = 'normal';\n    /**\n     * Allows you to change the color of the badge to make it less bright (based on the color chosen by the CSS class).\n     */\n    @Prop() color: BadgeColor = 'initial';\n\n    /**\n     * Specify the size of the badge.\n     */\n    @Prop({ reflect: true }) size: BadgeSize = 'm';\n\n    render() {\n        return (\n            <slot/>\n        );\n    }\n}\n"],"mappings":"2CAAA,MAAMA,EAAW,0vIACjB,MAAAC,EAAeD,E,MC+BFE,EAAK,M,oCAIc,S,WAIA,U,UAKe,G,CAE3C,MAAAC,GACI,OACIC,EAAA,QAAAC,IAAA,4C"}

package/dist/wcs/p-206c01d5.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["textareaCss","WcsTextareaStyle0","TEXTAREA_INHERITED_ATTRS","Textarea","this","inputId","textareaIds","inheritedAttributes","onInput","ev","nativeInput","value","wcsInput","emit","onChange","_","wcsChange","onFocus","fireFocusEvents","wcsFocus","onBlur","wcsBlur","debounceChanged","debounceEvent","debounce","valueChanged","getValue","runAutoGrow","connectedCallback","document","dispatchEvent","CustomEvent","detail","el","disconnectedCallback","componentWillLoad","Object","assign","inheritAriaAttributes","inheritAttributes","componentDidLoad","raf","autoGrow","readTask","style","height","scrollHeight","setAriaAttribute","attr","setOrRemoveAttribute","fitContent","setBlur","blur","getInputElement","Promise","resolve","render","resize","h","Host","key","disabled","icon","size","class","ref","autoCapitalize","autocapitalize","autoFocus","autofocus","enterKeyHint","enterkeyhint","inputMode","inputmode","maxLength","maxlength","minLength","minlength","name","placeholder","readOnly","readonly","required","spellcheck","cols","rows","wrap"],"sources":["src/components/textarea/textarea.scss?tag=wcs-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../../style/placeholder.scss';\n\n:host {\n    --wcs-textarea-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-textarea-value-color: var(--wcs-semantic-color-text-primary);\n    --wcs-textarea-value-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-textarea-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-textarea-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-textarea-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n    --wcs-textarea-icon-color-default: var(--wcs-semantic-color-foreground-brand);\n    --wcs-textarea-icon-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n    --wcs-textarea-icon-color-focus: var(--wcs-semantic-color-foreground-brand);\n\n    --wcs-textarea-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-textarea-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n    --wcs-textarea-border-color-error: var(--wcs-semantic-color-border-critical);\n    --wcs-textarea-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n\n    --wcs-textarea-border-style-default: solid;\n    --wcs-textarea-border-style-error: solid;\n    --wcs-textarea-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-internal-textarea-border-radius-left: var(--wcs-textarea-border-radius-left, var(--wcs-semantic-border-radius-base)); // Overridden from prefix suffix group in form-field\n    --wcs-internal-textarea-border-radius-right: var(--wcs-textarea-border-radius-right, var(--wcs-semantic-border-radius-base)); // Overridden from prefix suffix group in form-field\n\n    --wcs-textarea-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-textarea-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-textarea-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-textarea-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-textarea-padding-bottom: var(--wcs-semantic-spacing-base);\n    --wcs-internal-textarea-padding-left: var(--wcs-textarea-padding-left, var(--wcs-semantic-spacing-large));\n    --wcs-internal-textarea-padding-right: var(--wcs-textarea-padding-right, var(--wcs-semantic-spacing-large));\n\n    --wcs-textarea-min-height: var(--wcs-semantic-size-m);\n    --wcs-internal-textarea-max-height: var(--wcs-textarea-max-height, unset);\n\n    --wcs-textarea-background-color: var(--wcs-semantic-color-background-control-default);\n\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--wcs-textarea-gap);\n    width: 100%;\n    border-radius: var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);\n    background-color: var(--wcs-textarea-background-color);\n    outline: var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-default);\n    outline-offset: calc(-1 * var(--wcs-textarea-border-width));\n    background-clip: padding-box;\n\n    box-sizing: border-box;\n\n    textarea {\n        box-sizing: border-box;\n        font-family: inherit;\n        overflow: auto;\n        flex: 1;\n        width: 100%;\n        min-height: var(--wcs-textarea-min-height);\n        max-height: var(--wcs-internal-textarea-max-height);\n        background-color: transparent;\n        color: var(--wcs-textarea-value-color);\n        font-weight: var(--wcs-textarea-value-font-weight) !important;\n        border: none;\n        padding-top: var(--wcs-textarea-padding-top);\n        padding-bottom: var(--wcs-textarea-padding-bottom);\n        padding-left: var(--wcs-internal-textarea-padding-left);\n        padding-right: var(--wcs-internal-textarea-padding-right);\n        font-size: 1rem;\n        line-height: 1.5;\n\n        &::placeholder {\n            @include placeholder(var(--wcs-textarea-placeholder-color), var(--wcs-textarea-placeholder-font-weight), var(--wcs-textarea-placeholder-font-style));\n        }\n    }\n\n    textarea:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    wcs-mat-icon {\n        margin-left: var(--wcs-internal-textarea-padding-left);\n        color: var(--wcs-textarea-icon-color-default);\n    }\n}\n\n:host([disabled]) {\n    --wcs-textarea-background-color: var(--wcs-semantic-color-background-control-disabled);\n    outline: var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-disabled);\n\n    textarea {\n        color: var(--wcs-textarea-text-color-disabled);\n        cursor: not-allowed;\n\n        &::placeholder {\n            color: var(--wcs-textarea-text-color-disabled);\n        }\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-textarea-icon-color-disabled);\n    }\n}\n\n:host([icon]) {\n    textarea {\n        padding-left: 0;\n    }\n}\n\n:host([state=error]) {\n    outline-color: var(--wcs-textarea-border-color-error) !important;\n}\n\n:host(:focus-within) {\n    outline: var(--wcs-textarea-border-style-focus) var(--wcs-textarea-border-width-focus) var(--wcs-textarea-border-color-focus);\n    outline-offset: calc(var(--wcs-textarea-border-width-focus) * -1);\n\n    wcs-mat-icon {\n        color: var(--wcs-textarea-icon-color-focus);\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Method,\n    Prop,\n    Watch,\n    h,\n    Host,\n    EventEmitter,\n    Element,\n    Event,\n    Build,\n    readTask\n} from '@stencil/core';\nimport {\n    debounceEvent,\n    inheritAriaAttributes,\n    inheritAttributes,\n    raf,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { \n    TextareaChangeEventDetail,\n    WcsTextareaInputMode, \n    WcsTextareaEnterKeyHint, \n    WcsTextareaResize, \n    WcsTextareaInputState,\n    WcsTextareaWrap\n} from './textarea-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst TEXTAREA_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * Mainly inspired from Ionic Textarea Component.\n * \n * ## Accessibility guidelines 💡\n * > - If you use wcs-textarea outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n *\n * @cssprop --wcs-textarea-icon-color-default - Default icon color whe the textarea is not focused\n * @cssprop --wcs-textarea-icon-color-focus - Icon color when the textarea is focused \n * @cssprop --wcs-textarea-icon-color-disabled - Icon color when the textarea is disabled\n * \n * @cssprop --wcs-textarea-background-color - Background color of the textarea\n *\n * @cssprop --wcs-textarea-border-radius-left - Border radius of the left side of the textarea\n * @cssprop --wcs-textarea-border-radius-right - Border radius of the right side of the textarea\n * \n * @cssprop --wcs-textarea-border-width - Border width of the textarea when not focused\n * @cssprop --wcs-textarea-border-width-focus - Border width of the textarea when focused\n * \n * @cssprop --wcs-textarea-border-color-default - Default border color of the textarea when not focused\n * @cssprop --wcs-textarea-border-color-disabled - Border color of the textarea when disabled\n * @cssprop --wcs-textarea-border-color-error - Border color of the textarea when in error state\n * @cssprop --wcs-textarea-border-color-focus -  Border color of the textarea when focused\n * \n * @cssprop --wcs-textarea-value-color - Color of the value when the textarea is not focused\n * @cssprop --wcs-textarea-value-font-weight - Font weight of the textarea value\n * \n * @cssprop --wcs-textarea-placeholder-color - Color of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-weight - Font weight of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-style - Font style of the textarea placeholder\n * \n * @cssprop --wcs-textarea-text-color-disabled - Color of the value when the textarea is disabled\n * \n * @cssprop --wcs-textarea-border-style-default - Border style default of the textarea when not focused\n * @cssprop --wcs-textarea-border-style-error - Border style default of the textarea in error state\n * @cssprop --wcs-textarea-border-style-focus - Border style default of the textarea when focused\n * \n * @cssprop --wcs-textarea-min-height - Min height of the textarea component\n * @cssprop --wcs-textarea-max-height - Max height of the textarea component\n * \n * @cssprop --wcs-textarea-padding-top - Padding top of the textarea\n * @cssprop --wcs-textarea-padding-bottom - Padding bottom of the textarea\n * @cssprop --wcs-textarea-padding-left - Padding left of the textarea\n * @cssprop --wcs-textarea-padding-right - Padding right of the textarea\n * \n * @cssprop --wcs-textarea-gap - Gap between textarea and icon (prefix/suffix)\n */\n@Component({\n    tag: 'wcs-textarea',\n    styleUrl: 'textarea.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Textarea implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeInput?: HTMLTextAreaElement;\n    private inputId = `wcs-textarea-${textareaIds++}`;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents = true;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     */\n    @Prop() autocapitalize = 'none';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus = false;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n     * This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n    }\n\n    /**\n     * If `true`, the user cannot interact with the textarea.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     */\n    @Prop() inputmode?: WcsTextareaInputMode;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     */\n    @Prop() enterkeyhint?: WcsTextareaEnterKeyHint;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop({ reflect: true }) readonly = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop() required = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an initial state but you can set it to 'error' state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: WcsTextareaInputState = 'initial';\n\n    /**\n     * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.  \n     * Note : at the moment, modifying the width is only possible if you add some custom CSS to the component,\n     * for example by overriding the `width` CSS property. See the Resize section for an example on how to do it.\n     */\n    @Prop() cols?: number;\n\n    /**\n     * The number of visible text lines for the control.\n     */\n    @Prop() rows?: number;\n\n    /**\n     * Indicates how the control wraps text.\n     */\n    @Prop() wrap?: WcsTextareaWrap;\n\n    /**\n     * If `true`, the element height will increase based on the value.\n     */\n    @Prop() autoGrow = false;\n\n    /**\n     * The value of the textarea.\n     */\n    @Prop({mutable: true}) value?: string | null = '';\n\n    /**\n     * Indicates how the textarea should be resizable.  \n     * Note : at the moment horizontal resizing is only possible if you add custom CSS to the component,\n     * see the Resize section for an example.\n     */\n    @Prop({reflect: true}) resize?: WcsTextareaResize;\n\n    /**\n     * Update the native input element when the value changes\n     */\n    @Watch('value')\n    protected valueChanged() {\n        const nativeInput = this.nativeInput;\n        const value = this.getValue();\n        if (nativeInput && nativeInput.value !== value) {\n            nativeInput.value = value;\n        }\n        this.runAutoGrow();\n    }\n\n    /**\n     * Emitted when the input value has changed.- See https://developer.mozilla.org/en-US/docs/Web/Events/change\n     */\n    @Event() wcsChange!: EventEmitter<TextareaChangeEventDetail>;\n\n    /**\n     * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, TEXTAREA_INHERITED_ATTRS)\n        };\n    }\n\n    componentDidLoad() {\n        raf(() => this.runAutoGrow());\n    }\n\n    private runAutoGrow() {\n        const nativeInput = this.nativeInput;\n        if (nativeInput && this.autoGrow) {\n            readTask(() => {\n                nativeInput.style.height = 'auto';\n                nativeInput.style.height = nativeInput.scrollHeight + 'px';\n            });\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    /**\n     * This method make the textarea automatically adopt the size of the content without a scroll bar\n     */\n    @Method()\n    async fitContent() {\n        raf(() => this.runAutoGrow());\n    }\n\n    /**\n     * Sets blur on the native `textarea` in `wcs-textarea`. Use this method instead of the global\n     * `textarea.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<textarea>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLTextAreaElement> {\n        // tslint:disable-next-line:no-non-null-assertion\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    private getValue(): string {\n        return this.value || '';\n    }\n\n    private onInput = (ev: Event) => {\n        if (this.nativeInput) {\n            this.value = this.nativeInput.value;\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n    \n    private onChange = (_: Event) => {\n        this.wcsChange.emit({value: this.nativeInput.value});\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    render() {\n        const value = this.getValue();\n        const style = {\n            ...(this.resize && {'resize': this.resize})\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n            >\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <textarea\n                    class=\"native-textarea\"\n                    ref={el => this.nativeInput = el}\n                    autoCapitalize={this.autocapitalize}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    disabled={this.disabled}\n                    maxLength={this.maxlength}\n                    minLength={this.minlength}\n                    name={this.name}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    cols={this.cols}\n                    rows={this.rows}\n                    wrap={this.wrap}\n                    onInput={this.onInput}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    style={style}\n                    {...this.inheritedAttributes}\n                >\n            {value}\n          </textarea>\n            </Host>\n        );\n    }\n}\n\nlet textareaIds = 0;\n"],"mappings":"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"}