@cds/core 6.0.0-next.5 → 6.0.1

package/forms/control/control.element.d.ts

@@ -1,9 +1,9 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
 import { EventEmitter } from '@cds/core/internal';
+import { CdsControlAction } from '../control-action/control-action.element.js';
 import { CdsControlMessage } from './../control-message/control-message.element.js';
 import { ControlStatus, ControlLayout, ControlWidth } from './../utils/interfaces.js';
 import { CdsInternalControlLabel } from '../control-label/control-label.element.js';
-import { CdsControlAction } from '../control-action/control-action.element.js';
 export declare const enum ControlLabelLayout {
     default = "default",
     ariaLabel = "aria-label",
@@ -90,8 +90,8 @@ export declare class CdsControl extends LitElement {
     private get prefixTemplate();
     private get suffixTemplate();
     connectedCallback(): void;
-    firstUpdated(props: Map<string, any>): void;
-    updated(props: Map<string, any>): void;
+    firstUpdated(props: PropertyValues<this>): void;
+    updated(props: PropertyValues<any>): void;
     disconnectedCallback(): void;
     protected associateInputAndLabel(): void;
     private associateInputToDatalist;

package/forms/control/control.element.js

@@ -1,6 +1,6 @@
-import{__decorate as t}from"tslib";import{LitElement as e,html as s}from"lit";import{query as i}from"lit/decorators/query.js";import{getElementLanguageDirection as o,baseStyles as a,hasAriaLabelTypeAttr as l,syncProps as r,describeElementByElements as n,getElementUpdates as p,childrenUpdateComplete as u,pxToRem as d,updateComponentLayout as h,property as c,state as y,querySlot as f,querySlotAll as g,event as b}from"@cds/core/internal";import m from"./control.element.scss.js";import{syncHTML5Validation as v}from"../utils/validate.js";import{defaultControlWidth as x,defaultFormLayout as L,getStatusIcon as C,associateInputAndLabel as A,associateInputToDatalist as T,getCurrentMessageStatus as $,controlIsWrapped as S,formLayouts as I}from"../utils/utils.js";var k;!function(t){t.default="default",t.ariaLabel="aria-label",t.inputGroup="input-group",t.hiddenLabel="hidden-label"}(k||(k={}));class w extends e{constructor(){super(...arguments);this.status="neutral",this.controlWidth=x,this.validate=!1,this.responsive=!0,this._layout=L,this.focused=!1,this.disabled=!1,this.readonly=!1,this.fixedControlWidth=!1,this.supportsPrefixSuffixActions=!0,this.labelLayout=k.default,this.observers=[]}get layout(){return this._layout}set layout(t){const e=this._layout;this._layout=t?t.replace("-inline",""):L,this.requestUpdate("layout",e)}get isRTL(){return"rtl"===o(this)}static get styles(){return[a,m]}get hasAriaLabelTypeAttr(){return l(this.inputControl)}get hasStatusIcon(){return this.labelLayout!==k.inputGroup&&("error"===this.status||"success"===this.status)}render(){return s`${this.labelLayout===k.hiddenLabel||this.labelLayout===k.inputGroup?s`<span cds-layout="display:screen-reader-only"><slot name="label" @slotchange="${()=>this.associateInputAndLabel()}"></slot></span>`:""}<div cds-layout="${"vertical"===this.layout?"vertical gap:xs":"horizontal gap:lg"} align:stretch" class="private-host ${this.isRTL?"rtl":""}">${this.primaryLabelTemplate}<div class="input-message-container" cds-layout="
+import{__decorate as t}from"tslib";import{LitElement as e,html as s}from"lit";import{query as i}from"lit/decorators/query.js";import{getElementLanguageDirection as o,baseStyles as a,hasAriaLabelTypeAttr as l,syncProps as r,describeElementByElements as n,getElementUpdates as p,childrenUpdateComplete as u,pxToRem as d,calculateOptimalLayout as h,property as c,state as y,querySlot as f,querySlotAll as g,event as b,responsive as m}from"@cds/core/internal";import v from"./control.element.scss.js";import{syncHTML5Validation as x}from"../utils/validate.js";import{defaultControlWidth as L,defaultFormLayout as C,getStatusIcon as A,associateInputAndLabel as T,associateInputToDatalist as $,getCurrentMessageStatus as S,controlIsWrapped as I,formLayouts as k}from"../utils/utils.js";var w;!function(t){t.default="default",t.ariaLabel="aria-label",t.inputGroup="input-group",t.hiddenLabel="hidden-label"}(w||(w={}));let D=class extends e{constructor(){super(...arguments);this.status="neutral",this.controlWidth=L,this.validate=!1,this.responsive=!0,this._layout=C,this.focused=!1,this.disabled=!1,this.readonly=!1,this.fixedControlWidth=!1,this.supportsPrefixSuffixActions=!0,this.labelLayout=w.default,this.observers=[]}get layout(){return this._layout}set layout(t){const e=this._layout;this._layout=t?t.replace("-inline",""):C,this.requestUpdate("layout",e)}get isRTL(){return"rtl"===o(this)}static get styles(){return[a,v]}get hasAriaLabelTypeAttr(){return l(this.inputControl)}get hasStatusIcon(){return this.labelLayout!==w.inputGroup&&("error"===this.status||"success"===this.status)}render(){return s`${this.labelLayout===w.hiddenLabel||this.labelLayout===w.inputGroup?s`<span cds-layout="display:screen-reader-only"><slot name="label" @slotchange="${()=>this.associateInputAndLabel()}"></slot></span>`:""}<div cds-layout="${"vertical"===this.layout?"vertical gap:xs":"horizontal gap:lg"} align:stretch" class="private-host ${this.isRTL?"rtl":""}">${this.primaryLabelTemplate}<div class="input-message-container" cds-layout="
           wrap:none
           ${"compact"===this.layout?"horizontal":"vertical"}
           ${"stretch"!==this.controlWidth||this.fixedControlWidth?"":"align:horizontal-stretch"}
-          ${this.messages?.length?"gap:xs":""}"><div cds-layout="horizontal gap:xs wrap:none"><div cds-layout="horizontal align:top wrap:none ${"shrink"===this.controlWidth||this.fixedControlWidth?"align:shrink":"align:horizontal-stretch"}" class="${this.hasStatusIcon?"input-container with-status-icon":"input-container"}">${this.inputTemplate} ${this.prefixTemplate}<slot name="input"></slot>${this.suffixTemplate}</div>${this.hasStatusIcon?C(this.status):""}</div>${this.messagesTemplate}<slot name="datalist" @slotchange="${()=>this.associateInputToDatalist()}"></slot></div></div>`}get inputTemplate(){return s``}get prefixDefaultTemplate(){return null}get suffixDefaultTemplate(){return null}get isGenericControl(){return"cds-control"===this.tagName.toLowerCase()}get hasControlActions(){return this.controlActions.length>0||this.prefixDefaultTemplate||this.suffixDefaultTemplate}get primaryLabelTemplate(){return s`${this.labelLayout===k.default?s`<cds-internal-control-label .disabled="${this.disabled}" cds-layout="align:shrink align:top" action="primary"><slot name="label" @slotchange="${()=>this.associateInputAndLabel()}"></slot></cds-internal-control-label>`:""}`}get messagesTemplate(){return s`<div cds-layout="${"compact"===this.layout?"align:shrink":""}" class="messages"><slot name="message"></slot></div>`}get prefixTemplate(){return s`<div cds-layout="align:shrink align:vertical-center" class="prefix"><div cds-layout="horizontal gap:xxs">${this.prefixDefaultTemplate}<slot name="prefix"></slot></div></div>`}get suffixTemplate(){return s`<div cds-layout="align:shrink align:vertical-center" class="suffix"><div cds-layout="horizontal gap:xxs"><slot name="suffix"></slot>${this.suffixDefaultTemplate}</div></div>`}connectedCallback(){super.connectedCallback(),this.setAttribute("cds-control","")}firstUpdated(t){super.firstUpdated(t),this.setupHostAttributes(),this.setupHTML5Validation(),this.setActionOffsetPadding(),this.setupResponsive(),this.setupDescribedByUpdates(),this.setupLabelLayout(),this.assignSlotIfInControlGroup()}updated(t){super.updated(t),this.messages.forEach((e=>r(e,this,{disabled:t.has("disabled")}))),r(this.inputControl,this,{disabled:t.has("disabled")})}disconnectedCallback(){super.disconnectedCallback(),this.observers.forEach((t=>t.disconnect()))}associateInputAndLabel(){A(this.inputControl,this.label)}associateInputToDatalist(){T(this.inputControl,this.datalistControl)}setupDescribedByUpdates(){this.messageSlot?.addEventListener("slotchange",(async()=>{n(this.inputControl,Array.from(this.messages)),$(Array.from(this.messages)).then((t=>this.status=t))}))}setupHostAttributes(){this.inputControl.addEventListener("focusin",(()=>this.focused=!0)),this.inputControl.addEventListener("focusout",(()=>this.focused=!1)),this.observers.push(p(this.inputControl,"disabled",(t=>this.disabled=""===t||t)),p(this.inputControl,"aria-disabled",(t=>this.disabled="true"===t)),p(this.inputControl,"readonly",(t=>this.readonly=""===t||t)))}setupHTML5Validation(){!this.inputControl?.form?.noValidate&&this.validate&&v(this,Array.from(this.messages))}async setActionOffsetPadding(){const t=this.prefixAction?.updateComplete,e=this.suffixAction?.updateComplete;if(await t||Promise.resolve(!0),await e||Promise.resolve(!0),await u(this.controlActions),!this.isGenericControl&&this.supportsPrefixSuffixActions&&this.hasControlActions){const t=d(this.prefixAction.getBoundingClientRect().width+6),e=d(this.suffixAction.getBoundingClientRect().width+6);this.inputControl.style.setProperty("padding-left",this.isRTL?e:t,"important"),this.inputControl.style.setProperty("padding-right",this.isRTL?t:e,"important")}}get layoutStable(){return this.labelLayout!==k.default||!S(this.inputControl,this.controlLabel,this.layout)}setupResponsive(){if(this.responsive&&this.labelLayout===k.default&&this.controlLabel){const t={layouts:I,initialLayout:this.layout},e=h(this,t,(()=>this.layoutChange.emit(this.layout,{bubbles:!0})));this.observers.push(e)}}setupLabelLayout(){this.label?.getAttribute("cds-layout")?.includes("display:screen-reader-only")&&(this.labelLayout=k.hiddenLabel),this.hasAriaLabelTypeAttr&&(this.labelLayout=k.ariaLabel)}assignSlotIfInControlGroup(){this.parentElement?.hasAttribute("cds-control-group")&&this.setAttribute("slot","controls")}}t([c({type:String})],w.prototype,"status",void 0),t([c({type:String})],w.prototype,"controlWidth",void 0),t([c({type:Boolean})],w.prototype,"validate",void 0),t([c({type:Boolean})],w.prototype,"responsive",void 0),t([c({type:String})],w.prototype,"layout",null),t([y({type:Boolean,reflect:!0})],w.prototype,"focused",void 0),t([y({type:Boolean,reflect:!0})],w.prototype,"disabled",void 0),t([y({type:Boolean,reflect:!0})],w.prototype,"readonly",void 0),t([y()],w.prototype,"fixedControlWidth",void 0),t([y()],w.prototype,"supportsPrefixSuffixActions",void 0),t([y()],w.prototype,"isRTL",null),t([y()],w.prototype,"labelLayout",void 0),t([f("input, select, textarea, [cds-control]",{required:"error",requiredMessage:"input element is missing",assign:"input"})],w.prototype,"inputControl",void 0),t([f("label",{required:"error",requiredMessage:"To meet a11y standards either a <label> or input[aria-label] should be provided.",assign:"label",exemptOn:t=>t.hasAriaLabelTypeAttr})],w.prototype,"label",void 0),t([i("cds-internal-control-label[action=primary]")],w.prototype,"controlLabel",void 0),t([f("datalist",{assign:"datalist"})],w.prototype,"datalistControl",void 0),t([g("cds-control-message")],w.prototype,"messages",void 0),t([g("[cds-button-action]")],w.prototype,"controlActions",void 0),t([i(".prefix")],w.prototype,"prefixAction",void 0),t([i(".suffix")],w.prototype,"suffixAction",void 0),t([i(".messages")],w.prototype,"messageSlot",void 0),t([b()],w.prototype,"layoutChange",void 0);export{w as CdsControl,k as ControlLabelLayout};
+          ${this.messages?.length?"gap:xs":""}"><div cds-layout="horizontal gap:xs wrap:none"><div cds-layout="horizontal align:top wrap:none ${"shrink"===this.controlWidth||this.fixedControlWidth?"align:shrink":"align:horizontal-stretch"}" class="${this.hasStatusIcon?"input-container with-status-icon":"input-container"}">${this.inputTemplate} ${this.prefixTemplate}<slot name="input"></slot>${this.suffixTemplate}</div>${this.hasStatusIcon?A(this.status):""}</div>${this.messagesTemplate}<slot name="datalist" @slotchange="${()=>this.associateInputToDatalist()}"></slot></div></div>`}get inputTemplate(){return s``}get prefixDefaultTemplate(){return null}get suffixDefaultTemplate(){return null}get isGenericControl(){return"cds-control"===this.tagName.toLowerCase()}get hasControlActions(){return this.controlActions.length>0||this.prefixDefaultTemplate||this.suffixDefaultTemplate}get primaryLabelTemplate(){return s`${this.labelLayout===w.default?s`<cds-internal-control-label .disabled="${this.disabled}" cds-layout="align:shrink align:top" action="primary"><slot name="label" @slotchange="${()=>this.associateInputAndLabel()}"></slot></cds-internal-control-label>`:""}`}get messagesTemplate(){return s`<div cds-layout="${"compact"===this.layout?"align:shrink":""}" class="messages"><slot name="message"></slot></div>`}get prefixTemplate(){return s`<div cds-layout="align:shrink align:vertical-center" class="prefix"><div cds-layout="horizontal gap:xxs">${this.prefixDefaultTemplate}<slot name="prefix"></slot></div></div>`}get suffixTemplate(){return s`<div cds-layout="align:shrink align:vertical-center" class="suffix"><div cds-layout="horizontal gap:xxs"><slot name="suffix"></slot>${this.suffixDefaultTemplate}</div></div>`}connectedCallback(){super.connectedCallback(),this.setAttribute("cds-control","")}firstUpdated(t){super.firstUpdated(t),this.setupHostAttributes(),this.setupHTML5Validation(),this.setActionOffsetPadding(),this.setupResponsive(),this.setupDescribedByUpdates(),this.setupLabelLayout(),this.assignSlotIfInControlGroup()}updated(t){super.updated(t),this.messages.forEach((e=>r(e,this,{disabled:t.has("disabled")}))),r(this.inputControl,this,{disabled:t.has("disabled")})}disconnectedCallback(){super.disconnectedCallback(),this.observers.forEach((t=>t?.disconnect()))}associateInputAndLabel(){T(this.inputControl,this.label)}associateInputToDatalist(){$(this.inputControl,this.datalistControl)}setupDescribedByUpdates(){this.messageSlot?.addEventListener("slotchange",(async()=>{n(this.inputControl,Array.from(this.messages)),S(Array.from(this.messages)).then((t=>this.status=t))}))}setupHostAttributes(){this.inputControl.addEventListener("focusin",(()=>this.focused=!0)),this.inputControl.addEventListener("focusout",(()=>this.focused=!1)),this.observers.push(p(this.inputControl,"disabled",(t=>this.disabled=""===t||t)),p(this.inputControl,"aria-disabled",(t=>this.disabled="true"===t)),p(this.inputControl,"readonly",(t=>this.readonly=""===t||t)))}setupHTML5Validation(){!this.inputControl?.form?.noValidate&&this.validate&&x(this,Array.from(this.messages))}async setActionOffsetPadding(){const t=this.prefixAction?.updateComplete,e=this.suffixAction?.updateComplete;if(await t||Promise.resolve(!0),await e||Promise.resolve(!0),await u(this.controlActions),!this.isGenericControl&&this.supportsPrefixSuffixActions&&this.hasControlActions){const t=d(this.prefixAction.getBoundingClientRect().width+6),e=d(this.suffixAction.getBoundingClientRect().width+6);this.inputControl.style.setProperty("padding-left",this.isRTL?e:t,"important"),this.inputControl.style.setProperty("padding-right",this.isRTL?t:e,"important")}}get layoutStable(){return this.labelLayout!==w.default||!I(this.inputControl,this.controlLabel,this.layout)}setupResponsive(){if(this.responsive&&this.labelLayout===w.default&&this.controlLabel){const t={layouts:k,initialLayout:this.layout};this.addEventListener("cdsResizeChange",(()=>{h(this,t).then((t=>{t&&this.layoutChange.emit(this.layout,{bubbles:!0})}))}))}}setupLabelLayout(){this.label?.getAttribute("cds-layout")?.includes("display:screen-reader-only")&&(this.labelLayout=w.hiddenLabel),this.hasAriaLabelTypeAttr&&(this.labelLayout=w.ariaLabel)}assignSlotIfInControlGroup(){this.parentElement?.hasAttribute("cds-control-group")&&this.setAttribute("slot","controls")}};t([c({type:String})],D.prototype,"status",void 0),t([c({type:String})],D.prototype,"controlWidth",void 0),t([c({type:Boolean})],D.prototype,"validate",void 0),t([c({type:Boolean})],D.prototype,"responsive",void 0),t([c({type:String})],D.prototype,"layout",null),t([y({type:Boolean,reflect:!0})],D.prototype,"focused",void 0),t([y({type:Boolean,reflect:!0})],D.prototype,"disabled",void 0),t([y({type:Boolean,reflect:!0})],D.prototype,"readonly",void 0),t([y()],D.prototype,"fixedControlWidth",void 0),t([y()],D.prototype,"supportsPrefixSuffixActions",void 0),t([y()],D.prototype,"isRTL",null),t([y()],D.prototype,"labelLayout",void 0),t([f("input, select, textarea, [cds-control]",{required:"error",requiredMessage:"input element is missing",assign:"input"})],D.prototype,"inputControl",void 0),t([f("label",{required:"error",requiredMessage:"To meet a11y standards either a <label> or input[aria-label] should be provided.",assign:"label",exemptOn:t=>t.hasAriaLabelTypeAttr})],D.prototype,"label",void 0),t([i("cds-internal-control-label[action=primary]")],D.prototype,"controlLabel",void 0),t([f("datalist",{assign:"datalist"})],D.prototype,"datalistControl",void 0),t([g("cds-control-message")],D.prototype,"messages",void 0),t([g("[cds-button-action]")],D.prototype,"controlActions",void 0),t([i(".prefix")],D.prototype,"prefixAction",void 0),t([i(".suffix")],D.prototype,"suffixAction",void 0),t([i(".messages")],D.prototype,"messageSlot",void 0),t([b()],D.prototype,"layoutChange",void 0),D=t([m()],D);export{D as CdsControl,w as ControlLabelLayout};
 //# sourceMappingURL=control.element.js.map

package/forms/control/control.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"control.element.js","sources":["../../../../src/forms/control/control.element.ts"],"sourcesContent":null,"names":["ControlLabelLayout","CdsControl","LitElement","[object Object]","super","this","status","controlWidth","defaultControlWidth","validate","responsive","_layout","defaultFormLayout","focused","disabled","readonly","fixedControlWidth","supportsPrefixSuffixActions","labelLayout","default","observers","layout","value","oldValue","replace","requestUpdate","isRTL","getElementLanguageDirection","styles","baseStyles","hasAriaLabelTypeAttr","inputControl","hasStatusIcon","inputGroup","html","hiddenLabel","associateInputAndLabel","primaryLabelTemplate","messages","length","inputTemplate","prefixTemplate","suffixTemplate","getStatusIcon","messagesTemplate","associateInputToDatalist","prefixDefaultTemplate","suffixDefaultTemplate","isGenericControl","tagName","toLowerCase","hasControlActions","controlActions","connectedCallback","setAttribute","props","firstUpdated","setupHostAttributes","setupHTML5Validation","setActionOffsetPadding","setupResponsive","setupDescribedByUpdates","setupLabelLayout","assignSlotIfInControlGroup","updated","forEach","message","syncProps","has","disconnectedCallback","o","disconnect","label","datalistControl","messageSlot","addEventListener","async","describeElementByElements","Array","from","getCurrentMessageStatus","then","s","push","getElementUpdates","form","noValidate","syncHTML5Validation","prefix","prefixAction","updateComplete","suffix","suffixAction","Promise","resolve","childrenUpdateComplete","start","pxToRem","getBoundingClientRect","width","end","style","setProperty","layoutStable","controlIsWrapped","controlLabel","layoutConfig","layouts","formLayouts","initialLayout","observer","updateComponentLayout","layoutChange","emit","bubbles","getAttribute","includes","ariaLabel","parentElement","hasAttribute","__decorate","property","type","String","prototype","Boolean","state","reflect","querySlot","required","requiredMessage","assign","exemptOn","_this","query","querySlotAll","event"],"mappings":"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"}
+{"version":3,"file":"control.element.js","sources":["../../../../src/forms/control/control.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { query } from 'lit/decorators/query.js';\nimport { baseStyles, property, querySlot, querySlotAll, childrenUpdateComplete, getElementLanguageDirection, event, describeElementByElements, state, syncProps, pxToRem, getElementUpdates, hasAriaLabelTypeAttr, calculateOptimalLayout, responsive, } from '@cds/core/internal';\nimport styles from './control.element.scss';\nimport { syncHTML5Validation } from '../utils/validate.js';\nimport { associateInputToDatalist, getStatusIcon, associateInputAndLabel, controlIsWrapped, formLayouts, defaultFormLayout, defaultControlWidth, getCurrentMessageStatus, } from '../utils/utils.js';\nexport var ControlLabelLayout;\n(function (ControlLabelLayout) {\n    ControlLabelLayout[\"default\"] = \"default\";\n    ControlLabelLayout[\"ariaLabel\"] = \"aria-label\";\n    ControlLabelLayout[\"inputGroup\"] = \"input-group\";\n    ControlLabelLayout[\"hiddenLabel\"] = \"hidden-label\";\n})(ControlLabelLayout || (ControlLabelLayout = {}));\n/**\n * Generic Control\n *\n * ```typescript\n * import '@cds/core/forms/register.js';\n * ```\n *\n * ```html\n * <cds-control>\n *   <label>control</label>\n *   <input type=\"text\" />\n * </cds-control>\n * ```\n * @element cds-control\n * @slot - For projecting input and label\n * @cssprop --label-width\n */\nlet CdsControl = class CdsControl extends LitElement {\n    constructor() {\n        super(...arguments);\n        /**\n         * Set the status of form control validation\n         * @type {neutral | error | success}\n         */\n        this.status = 'neutral';\n        /**\n         * Adjust the control from the default full width or the browser default width\n         * @type {stretch | shrink}\n         */\n        this.controlWidth = defaultControlWidth;\n        /**\n         * Set the validate attribute to sync with HTML5 native validation\n         * https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation\n         */\n        this.validate = false;\n        /**\n         * By default forms will collapse to layout that prevents overflow.\n         * If disabled control layout may break or overflow in unexpected ways.\n         */\n        this.responsive = true;\n        this._layout = defaultFormLayout;\n        this.focused = false;\n        this.disabled = false;\n        this.readonly = false;\n        this.fixedControlWidth = false;\n        this.supportsPrefixSuffixActions = true;\n        /** @private */\n        this.labelLayout = ControlLabelLayout.default;\n        this.observers = [];\n    }\n    /**\n     * Set to adjust the default control layout. When `responsive` is true this will be the largest size to scale to.\n     * @type {vertical | horizontal | compact}\n     */\n    get layout() {\n        return this._layout;\n    }\n    set layout(value) {\n        const oldValue = this._layout;\n        this._layout = value ? value.replace('-inline', '') : defaultFormLayout; // auto convert any form-layouts from parent groups\n        this.requestUpdate('layout', oldValue);\n    }\n    get isRTL() {\n        return getElementLanguageDirection(this) === 'rtl';\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n    get hasAriaLabelTypeAttr() {\n        return hasAriaLabelTypeAttr(this.inputControl);\n    }\n    get hasStatusIcon() {\n        return this.labelLayout !== ControlLabelLayout.inputGroup && (this.status === 'error' || this.status === 'success');\n    }\n    render() {\n        return html `\n      ${this.labelLayout === ControlLabelLayout.hiddenLabel || this.labelLayout === ControlLabelLayout.inputGroup\n            ? html `<span cds-layout=\"display:screen-reader-only\"\n            ><slot name=\"label\" @slotchange=${() => this.associateInputAndLabel()}></slot\n          ></span>`\n            : ''}\n      <div\n        cds-layout=\"${this.layout === 'vertical' ? 'vertical gap:xs' : 'horizontal gap:lg'} align:stretch\"\n        class=\"private-host ${this.isRTL ? 'rtl' : ''}\"\n      >\n        ${this.primaryLabelTemplate}\n        <div\n          class=\"input-message-container\"\n          cds-layout=\"\n          wrap:none\n          ${this.layout === 'compact' ? 'horizontal' : 'vertical'}\n          ${this.controlWidth === 'stretch' && !this.fixedControlWidth ? 'align:horizontal-stretch' : ''}\n          ${this.messages?.length ? 'gap:xs' : ''}\"\n        >\n          <div cds-layout=\"horizontal gap:xs wrap:none\">\n            <div\n              cds-layout=\"horizontal align:top wrap:none ${this.controlWidth === 'shrink' || this.fixedControlWidth\n            ? 'align:shrink'\n            : 'align:horizontal-stretch'}\"\n              class=\"${this.hasStatusIcon ? 'input-container with-status-icon' : 'input-container'}\"\n            >\n              ${this.inputTemplate} ${this.prefixTemplate}\n              <slot name=\"input\"></slot>\n              ${this.suffixTemplate}\n            </div>\n            ${this.hasStatusIcon ? getStatusIcon(this.status) : ''}\n          </div>\n          ${this.messagesTemplate}\n          <slot name=\"datalist\" @slotchange=${() => this.associateInputToDatalist()}></slot>\n        </div>\n      </div>\n    `;\n    }\n    get inputTemplate() {\n        return html ``;\n    }\n    get prefixDefaultTemplate() {\n        return null;\n    }\n    get suffixDefaultTemplate() {\n        return null;\n    }\n    get isGenericControl() {\n        return this.tagName.toLowerCase() === 'cds-control';\n    }\n    get hasControlActions() {\n        return this.controlActions.length > 0 || this.prefixDefaultTemplate || this.suffixDefaultTemplate;\n    }\n    get primaryLabelTemplate() {\n        return html `\n      ${this.labelLayout === ControlLabelLayout.default\n            ? html ` <cds-internal-control-label\n            .disabled=\"${this.disabled}\"\n            cds-layout=\"align:shrink align:top\"\n            action=\"primary\"\n          >\n            <slot name=\"label\" @slotchange=${() => this.associateInputAndLabel()}></slot>\n          </cds-internal-control-label>`\n            : ''}\n    `;\n    }\n    get messagesTemplate() {\n        return html `\n      <div cds-layout=\"${this.layout === 'compact' ? 'align:shrink' : ''}\" class=\"messages\">\n        <slot name=\"message\"></slot>\n      </div>\n    `;\n    }\n    get prefixTemplate() {\n        return html `\n      <div cds-layout=\"align:shrink align:vertical-center\" class=\"prefix\">\n        <div cds-layout=\"horizontal gap:xxs\">\n          ${this.prefixDefaultTemplate}\n          <slot name=\"prefix\"></slot>\n        </div>\n      </div>\n    `;\n    }\n    get suffixTemplate() {\n        return html `\n      <div cds-layout=\"align:shrink align:vertical-center\" class=\"suffix\">\n        <div cds-layout=\"horizontal gap:xxs\">\n          <slot name=\"suffix\"></slot>\n          ${this.suffixDefaultTemplate}\n        </div>\n      </div>\n    `;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.setAttribute('cds-control', '');\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        this.setupHostAttributes();\n        this.setupHTML5Validation();\n        this.setActionOffsetPadding();\n        this.setupResponsive();\n        this.setupDescribedByUpdates();\n        this.setupLabelLayout();\n        this.assignSlotIfInControlGroup();\n    }\n    updated(props) {\n        super.updated(props);\n        this.messages.forEach(message => syncProps(message, this, { disabled: props.has('disabled') }));\n        syncProps(this.inputControl, this, { disabled: props.has('disabled') });\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        this.observers.forEach(o => o?.disconnect());\n    }\n    associateInputAndLabel() {\n        associateInputAndLabel(this.inputControl, this.label);\n    }\n    associateInputToDatalist() {\n        associateInputToDatalist(this.inputControl, this.datalistControl);\n    }\n    setupDescribedByUpdates() {\n        this.messageSlot?.addEventListener('slotchange', async () => {\n            describeElementByElements(this.inputControl, Array.from(this.messages));\n            getCurrentMessageStatus(Array.from(this.messages)).then(s => (this.status = s));\n        });\n    }\n    setupHostAttributes() {\n        this.inputControl.addEventListener('focusin', () => (this.focused = true));\n        this.inputControl.addEventListener('focusout', () => (this.focused = false));\n        this.observers.push(getElementUpdates(this.inputControl, 'disabled', (value) => (this.disabled = value === '' ? true : value)), getElementUpdates(this.inputControl, 'aria-disabled', (value) => (this.disabled = value === 'true' ? true : false)), getElementUpdates(this.inputControl, 'readonly', (value) => (this.readonly = value === '' ? true : value)));\n    }\n    setupHTML5Validation() {\n        if (!this.inputControl?.form?.noValidate && this.validate) {\n            syncHTML5Validation(this, Array.from(this.messages));\n        }\n    }\n    async setActionOffsetPadding() {\n        const prefix = this.prefixAction?.updateComplete;\n        const suffix = this.suffixAction?.updateComplete;\n        (await prefix) ? prefix : Promise.resolve(true);\n        (await suffix) ? suffix : Promise.resolve(true);\n        await childrenUpdateComplete(this.controlActions);\n        if (!this.isGenericControl && this.supportsPrefixSuffixActions && this.hasControlActions) {\n            const start = pxToRem(this.prefixAction.getBoundingClientRect().width + 6);\n            const end = pxToRem(this.suffixAction.getBoundingClientRect().width + 6);\n            this.inputControl.style.setProperty('padding-left', this.isRTL ? end : start, 'important');\n            this.inputControl.style.setProperty('padding-right', this.isRTL ? start : end, 'important');\n        }\n    }\n    /** @private */\n    get layoutStable() {\n        return (this.labelLayout !== ControlLabelLayout.default ||\n            !controlIsWrapped(this.inputControl, this.controlLabel, this.layout));\n    }\n    setupResponsive() {\n        if (this.responsive && this.labelLayout === ControlLabelLayout.default && this.controlLabel) {\n            const layoutConfig = { layouts: formLayouts, initialLayout: this.layout };\n            this.addEventListener('cdsResizeChange', () => {\n                calculateOptimalLayout(this, layoutConfig).then(updated => {\n                    if (updated) {\n                        this.layoutChange.emit(this.layout, { bubbles: true });\n                    }\n                });\n            });\n        }\n    }\n    setupLabelLayout() {\n        if (this.label?.getAttribute('cds-layout')?.includes('display:screen-reader-only')) {\n            this.labelLayout = ControlLabelLayout.hiddenLabel;\n        }\n        if (this.hasAriaLabelTypeAttr) {\n            this.labelLayout = ControlLabelLayout.ariaLabel;\n        }\n    }\n    assignSlotIfInControlGroup() {\n        if (this.parentElement?.hasAttribute('cds-control-group')) {\n            this.setAttribute('slot', 'controls');\n        }\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsControl.prototype, \"status\", void 0);\n__decorate([\n    property({ type: String })\n], CdsControl.prototype, \"controlWidth\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsControl.prototype, \"validate\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsControl.prototype, \"responsive\", void 0);\n__decorate([\n    property({ type: String })\n], CdsControl.prototype, \"layout\", null);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsControl.prototype, \"focused\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsControl.prototype, \"disabled\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsControl.prototype, \"readonly\", void 0);\n__decorate([\n    state()\n], CdsControl.prototype, \"fixedControlWidth\", void 0);\n__decorate([\n    state()\n], CdsControl.prototype, \"supportsPrefixSuffixActions\", void 0);\n__decorate([\n    state()\n], CdsControl.prototype, \"isRTL\", null);\n__decorate([\n    state()\n], CdsControl.prototype, \"labelLayout\", void 0);\n__decorate([\n    querySlot('input, select, textarea, [cds-control]', {\n        required: 'error',\n        requiredMessage: 'input element is missing',\n        assign: 'input',\n    })\n], CdsControl.prototype, \"inputControl\", void 0);\n__decorate([\n    querySlot('label', {\n        required: 'error',\n        requiredMessage: 'To meet a11y standards either a <label> or input[aria-label] should be provided.',\n        assign: 'label',\n        exemptOn: _this => {\n            return _this.hasAriaLabelTypeAttr;\n        },\n    })\n], CdsControl.prototype, \"label\", void 0);\n__decorate([\n    query('cds-internal-control-label[action=primary]')\n], CdsControl.prototype, \"controlLabel\", void 0);\n__decorate([\n    querySlot('datalist', { assign: 'datalist' })\n], CdsControl.prototype, \"datalistControl\", void 0);\n__decorate([\n    querySlotAll('cds-control-message')\n], CdsControl.prototype, \"messages\", void 0);\n__decorate([\n    querySlotAll('[cds-button-action]')\n], CdsControl.prototype, \"controlActions\", void 0);\n__decorate([\n    query('.prefix')\n], CdsControl.prototype, \"prefixAction\", void 0);\n__decorate([\n    query('.suffix')\n], CdsControl.prototype, \"suffixAction\", void 0);\n__decorate([\n    query('.messages')\n], CdsControl.prototype, \"messageSlot\", void 0);\n__decorate([\n    event()\n], CdsControl.prototype, \"layoutChange\", void 0);\nCdsControl = __decorate([\n    responsive()\n], CdsControl);\nexport { CdsControl };\n"],"names":["ControlLabelLayout","CdsControl","LitElement","constructor","super","this","status","controlWidth","defaultControlWidth","validate","responsive","_layout","defaultFormLayout","focused","disabled","readonly","fixedControlWidth","supportsPrefixSuffixActions","labelLayout","default","observers","layout","value","oldValue","replace","requestUpdate","isRTL","getElementLanguageDirection","styles","baseStyles","hasAriaLabelTypeAttr","inputControl","hasStatusIcon","inputGroup","render","html","hiddenLabel","associateInputAndLabel","primaryLabelTemplate","messages","length","inputTemplate","prefixTemplate","suffixTemplate","getStatusIcon","messagesTemplate","associateInputToDatalist","prefixDefaultTemplate","suffixDefaultTemplate","isGenericControl","tagName","toLowerCase","hasControlActions","controlActions","connectedCallback","setAttribute","firstUpdated","props","setupHostAttributes","setupHTML5Validation","setActionOffsetPadding","setupResponsive","setupDescribedByUpdates","setupLabelLayout","assignSlotIfInControlGroup","updated","forEach","message","syncProps","has","disconnectedCallback","o","disconnect","label","datalistControl","messageSlot","addEventListener","async","describeElementByElements","Array","from","getCurrentMessageStatus","then","s","push","getElementUpdates","form","noValidate","syncHTML5Validation","prefix","prefixAction","updateComplete","suffix","suffixAction","Promise","resolve","childrenUpdateComplete","start","pxToRem","getBoundingClientRect","width","end","style","setProperty","layoutStable","controlIsWrapped","controlLabel","layoutConfig","layouts","formLayouts","initialLayout","calculateOptimalLayout","layoutChange","emit","bubbles","getAttribute","includes","ariaLabel","parentElement","hasAttribute","__decorate","property","type","String","prototype","Boolean","state","reflect","querySlot","required","requiredMessage","assign","exemptOn","_this","query","querySlotAll","event"],"mappings":"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"}

package/forms/control/control.element.scss.js

@@ -1,2 +1,2 @@
-import{css as t}from"lit";var o=t`:host{contain:inherit;display:block;width:100%;--control-width:calc(var(--cds-global-layout-space-xxxl, 4rem) * 3)}:host([layout=compact]:not([control-width=shrink])) .input-container{min-width:var(--control-width)}:host(:not([layout*=vertical]):not([control-width=shrink])) .input-message-container{-ms-flex-preferred-size:calc(var(--cds-global-layout-space-xxxl,4rem)*3);flex-basis:calc(var(--cds-global-layout-space-xxxl,4rem)*3)}:host([layout=compact]:not([control-width=shrink])) ::slotted(cds-control-message){--max-width:calc(var(--cds-global-layout-space-xxxl, 4rem) * 3)}:host([layout*=vertical]) cds-internal-control-label{--label-width:100%}.input-container{line-height:0;max-width:100%}.input-container.with-status-icon{max-width:calc(100% - 1.2rem)}:host([_disabled]) ::slotted([slot=input]){cursor:not-allowed}:host([control-width=shrink]){width:auto}::slotted([cds-control]){width:100%}::slotted(input){margin:0!important;width:100%}::slotted(input[readonly]){cursor:default}[cds-button-action].status{height:var(--cds-global-space-7,1rem);padding-top:var(--cds-global-space-3,.25rem)}:host(:not([layout*=vertical])) cds-internal-control-label[action=primary],:host([layout=compact]) .messages,:host([layout=compact][status=error]) .messages,:host([layout=compact][status=success]) .messages{padding-top:var(--cds-global-space-5,.5rem)}`;export{o as default};
+import{css as t}from"lit";var o=t`:host{contain:inherit;display:block;width:100%;--control-width:calc(var(--cds-global-layout-space-xxxl, 4rem) * 3)}:host([layout=compact]:not([control-width=shrink])) .input-container{min-width:var(--control-width)}:host(:not([layout*=vertical]):not([control-width=shrink])) .input-message-container{flex-basis:calc(var(--cds-global-layout-space-xxxl,4rem)*3)}:host([layout=compact]:not([control-width=shrink])) ::slotted(cds-control-message){--max-width:calc(var(--cds-global-layout-space-xxxl, 4rem) * 3)}:host([layout*=vertical]) cds-internal-control-label{--label-width:100%}.input-container{line-height:0;max-width:100%}.input-container.with-status-icon{max-width:calc(100% - 1.2rem)}:host([_disabled]) ::slotted([slot=input]){cursor:not-allowed}:host([control-width=shrink]){width:auto}::slotted([cds-control]){width:100%}::slotted(input){margin:0!important;width:100%}::slotted(input[readonly]){cursor:default}[cds-button-action].status{height:var(--cds-global-space-7,1rem);padding-top:var(--cds-global-space-3,.25rem)}:host(:not([layout*=vertical])) cds-internal-control-label[action=primary],:host([layout=compact]) .messages,:host([layout=compact][status=error]) .messages,:host([layout=compact][status=success]) .messages{padding-top:var(--cds-global-space-5,.5rem)}`;export{o as default};
 //# sourceMappingURL=control.element.scss.js.map

package/forms/control/control.element.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"control.element.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
+{"version":3,"file":"control.element.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/forms/control-action/control-action.element.d.ts

@@ -18,5 +18,5 @@ import { CdsButtonAction } from '@cds/core/button-action';
  */
 export declare class CdsControlAction extends CdsButtonAction {
     action: 'label' | 'prefix' | 'suffix';
-    updated(props: PropertyValues): void;
+    updated(props: PropertyValues<this>): void;
 }

package/forms/control-action/control-action.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-action.element.js","sources":["../../../../src/forms/control-action/control-action.element.ts"],"sourcesContent":null,"names":["CdsControlAction","CdsButtonAction","[object Object]","props","super","updated","assignSlotNames","this","action","__decorate","property","type","String","reflect","prototype"],"mappings":"gKAwBO,MAAMA,UAAyBC,EAClCC,QAAQC,GACJC,MAAMC,QAAQF,GACdG,EAAgB,CAACC,KAAMA,KAAKC,SAAU,KAG9CC,EAAW,CACPC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KACnCb,EAAiBc,UAAW,cAAU"}
+{"version":3,"file":"control-action.element.js","sources":["../../../../src/forms/control-action/control-action.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { assignSlotNames, property } from '@cds/core/internal';\nimport { CdsButtonAction } from '@cds/core/button-action';\n/**\n * Control Action Button\n *\n * ```typescript\n * import '@cds/core/forms/register.js';\n * ```\n *\n * ```html\n * <cds-control-action>\n *\n * </cds-control-action>\n * ```\n *\n * @element cds-control-action\n * @slot - For projecting text content or cds-icon\n */\nexport class CdsControlAction extends CdsButtonAction {\n    updated(props) {\n        super.updated(props);\n        assignSlotNames([this, this.action ?? false]);\n    }\n}\n__decorate([\n    property({ type: String, reflect: true })\n], CdsControlAction.prototype, \"action\", void 0);\n"],"names":["CdsControlAction","CdsButtonAction","updated","props","super","assignSlotNames","this","action","__decorate","property","type","String","reflect","prototype"],"mappings":"gKAwBO,MAAMA,UAAyBC,EAClCC,QAAQC,GACJC,MAAMF,QAAQC,GACdE,EAAgB,CAACC,KAAMA,KAAKC,SAAU,KAG9CC,EAAW,CACPC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KACnCZ,EAAiBa,UAAW,cAAU"}

package/forms/control-group/control-group.element.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 import { EventEmitter } from '@cds/core/internal';
 import { CdsControl } from '../control/control.element.js';
 import { ControlStatus, FormLayout, ControlWidth } from '../utils/interfaces.js';
@@ -61,7 +61,6 @@ export declare class CdsInternalControlGroup extends LitElement {
     protected layoutChange: EventEmitter<FormLayout>;
     protected isInlineControlGroup: boolean;
     protected isControlGroup: boolean;
-    protected observers: (MutationObserver | ResizeObserver)[];
     static styles: import("lit").CSSResultGroup[];
     protected get messagesTemplate(): import("lit-html").TemplateResult<1>;
     protected get controlsTemplate(): import("lit-html").TemplateResult<1>;
@@ -70,10 +69,8 @@ export declare class CdsInternalControlGroup extends LitElement {
     private get controlMessageLayout();
     render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
-    firstUpdated(props: Map<string, any>): void;
-    updated(props: Map<string, any>): void;
-    disconnectedCallback(): void;
-    /** @private */
+    firstUpdated(props: PropertyValues<this>): void;
+    updated(props: PropertyValues<any>): void;
     get layoutStable(): boolean;
     private associateLabelAndGroup;
     private updateControlMessages;

package/forms/control-group/control-group.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{LitElement as o,html as s}from"lit";import{query as e}from"lit/decorators/query.js";import{setAttributes as i,syncProps as r,syncDefinedProps as a,describeElementByElements as l,updateComponentLayout as n,baseStyles as c,property as d,querySlot as p,querySlotAll as u,id as h,event as y}from"@cds/core/internal";import g from"./control-group.element.scss.js";import{defaultFormLayout as m,defaultControlWidth as v,getStatusIcon as b,inlineControlListIsWrapped as f,controlIsWrapped as C,getCurrentMessageStatus as L,formLayouts as $}from"../utils/utils.js";class A extends o{constructor(){super(...arguments);this.status="neutral",this.layout=m,this.controlAlign="left",this.disabled=!1,this.controlWidth=v,this.responsive=!0,this.isInlineControlGroup=!1,this.isControlGroup=!0,this.observers=[]}get messagesTemplate(){return s`<div ?hidden="${0===this.messages.length}" cds-layout="horizontal align:shrink gap:xs wrap:none" class="messages-container">${this.isInlineControlGroup?"":b(this.status)}<div class="messages"><slot name="message" @slotchange="${this.updateControlMessages}"></slot></div></div>`}get controlsTemplate(){return this.isInlineControlGroup?s`<div cds-layout="horizontal gap:xs align:horizontal-stretch" class="input-container"><div class="controls" cds-layout="horizontal align:horizontal-stretch wrap:none"><slot name="controls"></slot></div>${b(this.status)}</div>`:s`<div cds-layout="horizontal align:shrink" class="input-container"><div class="controls" cds-layout="${this.inlineControlLayout}"><slot name="controls"></slot></div></div>`}get inlineControlLayout(){return`${this.layout.includes("inline")||"compact"===this.layout?"horizontal gap:sm":"vertical gap:xs"} ${this.layout.includes("vertical")?"":"wrap:none"}`}get primaryLabelLayout(){return this.layout.includes("vertical")?"vertical gap:xs":"horizontal gap:lg"}get controlMessageLayout(){return("compact"===this.layout?"horizontal":"vertical")+" gap:xs wrap:none align:stretch"}render(){return s`<div class="private-host" cds-layout="${this.primaryLabelLayout}"><cds-internal-control-label .disabled="${this.disabled}" cds-layout="align:top" action="primary"><slot name="label"></slot></cds-internal-control-label><div class="control-message-container" cds-layout="${this.controlMessageLayout}">${this.controlsTemplate} ${this.messagesTemplate}</div></div>`}connectedCallback(){super.connectedCallback(),i(this,["role","group"],["cds-control-group",""])}firstUpdated(t){super.firstUpdated(t),this.associateLabelAndGroup(),this.setupResponsive()}updated(t){super.updated(t),t.set("isControlGroup",!0),this.controls.forEach((t=>t.isControlGroup=!0)),this.messages.forEach((o=>r(o,this,{disabled:t.has("disabled")}))),a(t,this,Array.from(this.controls))}disconnectedCallback(){super.disconnectedCallback(),this.observers.forEach((t=>t.disconnect()))}get layoutStable(){return!f(Array.from(this.controls),this.layout)&&!C(this.controlSlot,this.controlLabel,this.layout)}associateLabelAndGroup(){this.setAttribute("aria-labelledby",this.groupLabelId),this.label.setAttribute("id",this.groupLabelId)}async updateControlMessages(){l(this,Array.from(this.messages)),this.status=await L(Array.from(this.messages))}setupResponsive(){if(this.responsive){const t={layouts:$,initialLayout:this.layout};this.observers.push(n(this,t,(()=>this.layoutChange.emit(this.layout,{bubbles:!0}))))}}}A.styles=[c,g],t([d({type:String})],A.prototype,"status",void 0),t([d({type:String})],A.prototype,"layout",void 0),t([d({type:String})],A.prototype,"controlAlign",void 0),t([d({type:Boolean})],A.prototype,"disabled",void 0),t([d({type:String})],A.prototype,"controlWidth",void 0),t([d({type:Boolean})],A.prototype,"responsive",void 0),t([p("label",{assign:"label",required:"warning",requiredMessage:"To meet a11y standards a <label> should be provided"})],A.prototype,"label",void 0),t([u("cds-control, [cds-control]")],A.prototype,"controls",void 0),t([u("cds-control-message")],A.prototype,"messages",void 0),t([e("cds-internal-control-label[action=primary]",!0)],A.prototype,"controlLabel",void 0),t([e(".controls",!0)],A.prototype,"controlSlot",void 0),t([h()],A.prototype,"groupLabelId",void 0),t([y()],A.prototype,"layoutChange",void 0);export{A as CdsInternalControlGroup};
+import{__decorate as t}from"tslib";import{LitElement as o,html as s}from"lit";import{query as e}from"lit/decorators/query.js";import{setAttributes as i,syncProps as a,syncDefinedProps as r,describeElementByElements as l,calculateOptimalLayout as n,baseStyles as d,property as p,querySlot as c,querySlotAll as u,id as h,event as y,responsive as g}from"@cds/core/internal";import m from"./control-group.element.scss.js";import{defaultFormLayout as v,defaultControlWidth as b,getStatusIcon as L,inlineControlListIsWrapped as f,controlIsWrapped as C,getCurrentMessageStatus as $,formLayouts as z}from"../utils/utils.js";let A=class extends o{constructor(){super(...arguments);this.status="neutral",this.layout=v,this.controlAlign="left",this.disabled=!1,this.controlWidth=b,this.responsive=!0,this.isInlineControlGroup=!1,this.isControlGroup=!0}get messagesTemplate(){return s`<div ?hidden="${0===this.messages.length}" cds-layout="horizontal align:shrink gap:xs wrap:none" class="messages-container">${this.isInlineControlGroup?"":L(this.status)}<div class="messages"><slot name="message" @slotchange="${this.updateControlMessages}"></slot></div></div>`}get controlsTemplate(){return this.isInlineControlGroup?s`<div cds-layout="horizontal gap:xs align:horizontal-stretch" class="input-container"><div class="controls" cds-layout="horizontal align:horizontal-stretch wrap:none"><slot name="controls"></slot></div>${L(this.status)}</div>`:s`<div cds-layout="horizontal align:shrink" class="input-container"><div class="controls" cds-layout="${this.inlineControlLayout}"><slot name="controls"></slot></div></div>`}get inlineControlLayout(){return`${this.layout.includes("inline")||"compact"===this.layout?"horizontal gap:sm":"vertical gap:xs"} ${this.layout.includes("vertical")?"":"wrap:none"}`}get primaryLabelLayout(){return this.layout.includes("vertical")?"vertical gap:xs":"horizontal gap:lg"}get controlMessageLayout(){return("compact"===this.layout?"horizontal":"vertical")+" gap:xs wrap:none align:stretch"}render(){return s`<div class="private-host" cds-layout="${this.primaryLabelLayout}"><cds-internal-control-label .disabled="${this.disabled}" cds-layout="align:top" action="primary"><slot name="label"></slot></cds-internal-control-label><div class="control-message-container" cds-layout="${this.controlMessageLayout}">${this.controlsTemplate} ${this.messagesTemplate}</div></div>`}connectedCallback(){super.connectedCallback(),i(this,["role","group"],["cds-control-group",""])}firstUpdated(t){super.firstUpdated(t),this.associateLabelAndGroup(),this.setupResponsive()}updated(t){super.updated(t),t.set("isControlGroup",!0),this.controls.forEach((t=>t.isControlGroup=!0)),this.messages.forEach((o=>a(o,this,{disabled:t.has("disabled")}))),r(t,this,Array.from(this.controls))}get layoutStable(){return!f(Array.from(this.controls),this.layout)&&!C(this.controlSlot,this.controlLabel,this.layout)}associateLabelAndGroup(){this.setAttribute("aria-labelledby",this.groupLabelId),this.label.setAttribute("id",this.groupLabelId)}async updateControlMessages(){l(this,Array.from(this.messages)),this.status=await $(Array.from(this.messages))}setupResponsive(){if(this.responsive){const t={layouts:z,initialLayout:this.layout};this.addEventListener("cdsResizeChange",(()=>n(this,t).then((()=>this.layoutChange.emit(this.layout,{bubbles:!0})))))}}};A.styles=[d,m],t([p({type:String})],A.prototype,"status",void 0),t([p({type:String})],A.prototype,"layout",void 0),t([p({type:String})],A.prototype,"controlAlign",void 0),t([p({type:Boolean})],A.prototype,"disabled",void 0),t([p({type:String})],A.prototype,"controlWidth",void 0),t([p({type:Boolean})],A.prototype,"responsive",void 0),t([c("label",{assign:"label",required:"warning",requiredMessage:"To meet a11y standards a <label> should be provided"})],A.prototype,"label",void 0),t([u("cds-control, [cds-control]")],A.prototype,"controls",void 0),t([u("cds-control-message")],A.prototype,"messages",void 0),t([e("cds-internal-control-label[action=primary]",!0)],A.prototype,"controlLabel",void 0),t([e(".controls",!0)],A.prototype,"controlSlot",void 0),t([h()],A.prototype,"groupLabelId",void 0),t([y()],A.prototype,"layoutChange",void 0),A=t([g()],A);export{A as CdsInternalControlGroup};
 //# sourceMappingURL=control-group.element.js.map

package/forms/control-group/control-group.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-group.element.js","sources":["../../../../src/forms/control-group/control-group.element.ts"],"sourcesContent":null,"names":["CdsInternalControlGroup","LitElement","[object Object]","super","this","status","layout","defaultFormLayout","controlAlign","disabled","controlWidth","defaultControlWidth","responsive","isInlineControlGroup","isControlGroup","observers","messagesTemplate","html","messages","length","getStatusIcon","updateControlMessages","controlsTemplate","inlineControlLayout","includes","primaryLabelLayout","controlMessageLayout","connectedCallback","setAttributes","props","firstUpdated","associateLabelAndGroup","setupResponsive","updated","set","controls","forEach","c","message","syncProps","has","syncDefinedProps","Array","from","disconnectedCallback","o","disconnect","layoutStable","inlineControlListIsWrapped","controlIsWrapped","controlSlot","controlLabel","setAttribute","groupLabelId","label","describeElementByElements","getCurrentMessageStatus","layoutConfig","layouts","formLayouts","initialLayout","push","updateComponentLayout","layoutChange","emit","bubbles","styles","baseStyles","__decorate","property","type","String","prototype","Boolean","querySlot","assign","required","requiredMessage","querySlotAll","query","id","event"],"mappings":"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"}
+{"version":3,"file":"control-group.element.js","sources":["../../../../src/forms/control-group/control-group.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { query } from 'lit/decorators/query.js';\nimport { baseStyles, property, querySlot, querySlotAll, id, event, syncDefinedProps, describeElementByElements, setAttributes, syncProps, calculateOptimalLayout, responsive, } from '@cds/core/internal';\nimport styles from './control-group.element.scss';\nimport { getStatusIcon, controlIsWrapped, formLayouts, inlineControlListIsWrapped, defaultFormLayout, defaultControlWidth, getCurrentMessageStatus, } from '../utils/utils.js';\n/**\n * Internal Control Group\n *\n * ```typescript\n * import '@cds/core/forms/register.js';\n * ```\n *\n * ```html\n * <cds-internal-control-group>\n *   <label>...</label>\n *   <cds-control>\n *     <label></label>\n *     <input ... />\n *   </cds-control>\n *   <cds-control>\n *     <label></label>\n *     <input ... />\n *   </cds-control>\n * </cds-internal-control-group>\n * ```\n *\n * @element cds-internal-control-group\n * @slot - For projecting control group\n */\nlet CdsInternalControlGroup = class CdsInternalControlGroup extends LitElement {\n    constructor() {\n        super(...arguments);\n        /**\n         * Set the status of control group validation\n         * @type {neutral | error | success}\n         */\n        this.status = 'neutral';\n        /** @type {horizontal | horizontal-inline | vertical | vertical-inline | compact} */\n        this.layout = defaultFormLayout;\n        /** Align the labels of controls within group left or right */\n        this.controlAlign = 'left';\n        /** Disable all controls within a control group or omit and disable controls individually */\n        this.disabled = false;\n        /**\n         * Adjust the control from the default full width or the browser default width\n         * @type {stretch | shrink}\n         */\n        this.controlWidth = defaultControlWidth;\n        /**\n         * By default forms will collapse to layout that prevents overflow.\n         * If disabled control layout may break or overflow in unexpected ways.\n         */\n        this.responsive = true;\n        this.isInlineControlGroup = false;\n        this.isControlGroup = true;\n    }\n    get messagesTemplate() {\n        return html ` <div\n      ?hidden=${this.messages.length === 0}\n      cds-layout=\"horizontal align:shrink gap:xs wrap:none\"\n      class=\"messages-container\"\n    >\n      ${!this.isInlineControlGroup ? getStatusIcon(this.status) : ''}\n      <div class=\"messages\">\n        <slot name=\"message\" @slotchange=${this.updateControlMessages}></slot>\n      </div>\n    </div>`;\n    }\n    get controlsTemplate() {\n        return this.isInlineControlGroup\n            ? html `\n          <div cds-layout=\"horizontal gap:xs align:horizontal-stretch\" class=\"input-container\">\n            <div class=\"controls\" cds-layout=\"horizontal align:horizontal-stretch wrap:none\">\n              <slot name=\"controls\"></slot>\n            </div>\n            ${getStatusIcon(this.status)}\n          </div>\n        `\n            : html `\n          <div cds-layout=\"horizontal align:shrink\" class=\"input-container\">\n            <div class=\"controls\" cds-layout=\"${this.inlineControlLayout}\">\n              <slot name=\"controls\"></slot>\n            </div>\n          </div>\n        `;\n    }\n    get inlineControlLayout() {\n        return `${!this.layout.includes('inline') && this.layout !== 'compact' ? 'vertical gap:xs' : 'horizontal gap:sm'} ${!this.layout.includes('vertical') ? 'wrap:none' : ''}`;\n    }\n    get primaryLabelLayout() {\n        return !this.layout.includes('vertical') ? 'horizontal gap:lg' : 'vertical gap:xs';\n    }\n    get controlMessageLayout() {\n        return `${this.layout === 'compact' ? 'horizontal' : 'vertical'} gap:xs wrap:none align:stretch`;\n    }\n    render() {\n        return html `\n      <div class=\"private-host\" cds-layout=${this.primaryLabelLayout}>\n        <cds-internal-control-label .disabled=${this.disabled} cds-layout=\"align:top\" action=\"primary\">\n          <slot name=\"label\"></slot>\n        </cds-internal-control-label>\n        <div class=\"control-message-container\" cds-layout=${this.controlMessageLayout}>\n          ${this.controlsTemplate} ${this.messagesTemplate}\n        </div>\n      </div>\n    `;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        setAttributes(this, ['role', 'group'], ['cds-control-group', '']);\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        this.associateLabelAndGroup();\n        this.setupResponsive();\n    }\n    updated(props) {\n        super.updated(props);\n        props.set('isControlGroup', true);\n        this.controls.forEach((c) => (c.isControlGroup = true));\n        this.messages.forEach(message => syncProps(message, this, { disabled: props.has('disabled') }));\n        syncDefinedProps(props, this, Array.from(this.controls));\n    }\n    get layoutStable() {\n        return (!inlineControlListIsWrapped(Array.from(this.controls), this.layout) &&\n            !controlIsWrapped(this.controlSlot, this.controlLabel, this.layout));\n    }\n    associateLabelAndGroup() {\n        this.setAttribute('aria-labelledby', this.groupLabelId);\n        this.label.setAttribute('id', this.groupLabelId);\n    }\n    async updateControlMessages() {\n        describeElementByElements(this, Array.from(this.messages));\n        this.status = await getCurrentMessageStatus(Array.from(this.messages));\n    }\n    setupResponsive() {\n        if (this.responsive) {\n            const layoutConfig = { layouts: formLayouts, initialLayout: this.layout };\n            this.addEventListener('cdsResizeChange', () => calculateOptimalLayout(this, layoutConfig).then(() => this.layoutChange.emit(this.layout, { bubbles: true })));\n        }\n    }\n};\nCdsInternalControlGroup.styles = [baseStyles, styles];\n__decorate([\n    property({ type: String })\n], CdsInternalControlGroup.prototype, \"status\", void 0);\n__decorate([\n    property({ type: String })\n], CdsInternalControlGroup.prototype, \"layout\", void 0);\n__decorate([\n    property({ type: String })\n], CdsInternalControlGroup.prototype, \"controlAlign\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsInternalControlGroup.prototype, \"disabled\", void 0);\n__decorate([\n    property({ type: String })\n], CdsInternalControlGroup.prototype, \"controlWidth\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsInternalControlGroup.prototype, \"responsive\", void 0);\n__decorate([\n    querySlot('label', {\n        assign: 'label',\n        required: 'warning',\n        requiredMessage: 'To meet a11y standards a <label> should be provided',\n    })\n], CdsInternalControlGroup.prototype, \"label\", void 0);\n__decorate([\n    querySlotAll('cds-control, [cds-control]')\n], CdsInternalControlGroup.prototype, \"controls\", void 0);\n__decorate([\n    querySlotAll('cds-control-message')\n], CdsInternalControlGroup.prototype, \"messages\", void 0);\n__decorate([\n    query('cds-internal-control-label[action=primary]', true)\n], CdsInternalControlGroup.prototype, \"controlLabel\", void 0);\n__decorate([\n    query('.controls', true)\n], CdsInternalControlGroup.prototype, \"controlSlot\", void 0);\n__decorate([\n    id()\n], CdsInternalControlGroup.prototype, \"groupLabelId\", void 0);\n__decorate([\n    event()\n], CdsInternalControlGroup.prototype, \"layoutChange\", void 0);\nCdsInternalControlGroup = __decorate([\n    responsive()\n], CdsInternalControlGroup);\nexport { CdsInternalControlGroup };\n"],"names":["CdsInternalControlGroup","LitElement","constructor","super","this","status","layout","defaultFormLayout","controlAlign","disabled","controlWidth","defaultControlWidth","responsive","isInlineControlGroup","isControlGroup","messagesTemplate","html","messages","length","getStatusIcon","updateControlMessages","controlsTemplate","inlineControlLayout","includes","primaryLabelLayout","controlMessageLayout","render","connectedCallback","setAttributes","firstUpdated","props","associateLabelAndGroup","setupResponsive","updated","set","controls","forEach","c","message","syncProps","has","syncDefinedProps","Array","from","layoutStable","inlineControlListIsWrapped","controlIsWrapped","controlSlot","controlLabel","setAttribute","groupLabelId","label","async","describeElementByElements","getCurrentMessageStatus","layoutConfig","layouts","formLayouts","initialLayout","addEventListener","calculateOptimalLayout","then","layoutChange","emit","bubbles","styles","baseStyles","__decorate","property","type","String","prototype","Boolean","querySlot","assign","required","requiredMessage","querySlotAll","query","id","event"],"mappings":"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"}

package/forms/control-group/control-group.element.scss.js

@@ -1,2 +1,2 @@
-import{css as t}from"lit";var a=t`:host{width:100%}:host([layout=compact]:not([control-width=shrink])) ::slotted(cds-control-message){--max-width:calc(var(--cds-global-layout-space-xxxl, 4rem) * 3)}.control-message-container{-ms-flex-preferred-size:0;flex-basis:0}[cds-button-action].status{height:var(--cds-global-space-7,1rem)}:host([layout=compact]) .messages,:host([layout=compact]) cds-internal-control-label[action=primary],:host([layout=horizontal-inline]) cds-internal-control-label[action=primary],:host([layout=horizontal]) cds-internal-control-label[action=primary],:host([status=error]) .messages,:host([status=success]) .messages{padding-top:var(--cds-global-space-3,.25rem)}:host([layout*=vertical]) cds-internal-control-label{--label-width:100%}`;export{a as default};
+import{css as t}from"lit";var a=t`:host{width:100%}:host([layout=compact]:not([control-width=shrink])) ::slotted(cds-control-message){--max-width:calc(var(--cds-global-layout-space-xxxl, 4rem) * 3)}.control-message-container{flex-basis:0}[cds-button-action].status{height:var(--cds-global-space-7,1rem)}:host([layout=compact]) .messages,:host([layout=compact]) cds-internal-control-label[action=primary],:host([layout=horizontal-inline]) cds-internal-control-label[action=primary],:host([layout=horizontal]) cds-internal-control-label[action=primary],:host([status=error]) .messages,:host([status=success]) .messages{padding-top:var(--cds-global-space-3,.25rem)}:host([layout*=vertical]) cds-internal-control-label{--label-width:100%}`;export{a as default};
 //# sourceMappingURL=control-group.element.scss.js.map

package/forms/control-group/control-group.element.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-group.element.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
+{"version":3,"file":"control-group.element.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/forms/control-inline/control-inline.element.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from 'lit';
 import { EventEmitter } from '@cds/core/internal';
 import { CdsControl } from '../control/control.element.js';
 /**
@@ -29,9 +30,9 @@ export declare class CdsInternalControlInline extends CdsControl {
     protected checkedChange: EventEmitter<boolean>;
     protected supportsPrefixSuffixActions: boolean;
     static get styles(): import("lit").CSSResultGroup[];
-    protected get internalLabelTemplate(): import("lit-html").TemplateResult<1>;
+    protected get internalLabelTemplate(): "" | import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
-    firstUpdated(props: Map<string, any>): void;
-    updated(props: Map<string, any>): void;
+    firstUpdated(props: PropertyValues<this>): void;
+    updated(props: PropertyValues<any>): void;
     private selectInput;
 }

package/forms/control-inline/control-inline.element.js

@@ -1,2 +1,2 @@
-import{__decorate as e}from"tslib";import{html as t}from"lit";import{getElementUpdates as i,property as s,state as n,event as o}from"@cds/core/internal";import r from"./control-inline.element.scss.js";import{CdsControl as l}from"../control/control.element.js";import{getStatusIcon as a}from"../utils/utils.js";class c extends l{constructor(){super(...arguments);this.controlAlign="left",this.checked=!1,this.indeterminate=!1,this.supportsPrefixSuffixActions=!1}static get styles(){return[...super.styles,r]}get internalLabelTemplate(){return t`<cds-internal-control-label action="secondary" .disabled="${this.disabled}" cds-layout="align:vertical-center"><slot name="label" @slotchange="${()=>this.associateInputAndLabel()}"></slot></cds-internal-control-label>`}render(){return t`<div class="private-host" cds-layout="${this.isControlGroup?"horizontal align:vertical-center":"vertical"} gap:xs"><div cds-layout="horizontal gap:xs wrap:none align:vertical-center ${"right"===this.controlAlign?"order:reverse":""}"><div role="presentation" class="input" @click="${this.selectInput}"></div><div role="presentation" focusable @click="${this.selectInput}"></div>${this.internalLabelTemplate}</div>${this.messages?.length?t`<div cds-layout="horizontal wrap:none ${this.messages?.length?"gap:xs":""}">${a(this.status)}<div cds-layout="align:vertical-center" class="messages"><slot name="message"></slot></div></div>`:""}</div><div cds-layout="display:screen-reader-only"><slot name="input"></slot></div>`}firstUpdated(e){super.firstUpdated(e),this.inputControl.addEventListener("change",(()=>this.checked=this.inputControl.checked)),this.observers.push(i(this.inputControl,"checked",(e=>this.checked=""===e||e)),i(this.inputControl,"indeterminate",(e=>this.indeterminate=""===e||e)))}updated(e){super.updated(e),e.has("indeterminate")&&e.get("indeterminate")!==this.indeterminate&&this.indeterminate&&(this.checked=!1),e.has("checked")&&e.get("checked")!==this.checked&&this.checked&&(this.indeterminate=!1,this.checkedChange.emit(this.checked,{bubbles:!this.isControlGroup}))}selectInput(e){this.inputControl.click(),e.preventDefault()}}e([s({type:String})],c.prototype,"controlAlign",void 0),e([n()],c.prototype,"isControlGroup",void 0),e([n({type:Boolean,reflect:!0})],c.prototype,"checked",void 0),e([n({type:Boolean,reflect:!0})],c.prototype,"indeterminate",void 0),e([o()],c.prototype,"checkedChange",void 0);export{c as CdsInternalControlInline};
+import{__decorate as e}from"tslib";import{html as t}from"lit";import{getElementUpdates as i,property as s,state as n,event as o}from"@cds/core/internal";import r from"./control-inline.element.scss.js";import{CdsControl as l,ControlLabelLayout as a}from"../control/control.element.js";import{getStatusIcon as c}from"../utils/utils.js";class d extends l{constructor(){super(...arguments);this.controlAlign="left",this.checked=!1,this.indeterminate=!1,this.supportsPrefixSuffixActions=!1}static get styles(){return[...super.styles,r]}get internalLabelTemplate(){return this.labelLayout!==a.ariaLabel?t`<cds-internal-control-label action="secondary" .disabled="${this.disabled}" cds-layout="align:vertical-center"><slot name="label" @slotchange="${()=>this.associateInputAndLabel()}"></slot></cds-internal-control-label>`:""}render(){return t`<div class="private-host" cds-layout="${this.isControlGroup?"horizontal align:vertical-center":"vertical"} gap:xs"><div cds-layout="horizontal gap:xs wrap:none align:vertical-center ${"right"===this.controlAlign?"order:reverse":""}"><div role="presentation" class="input" @click="${this.selectInput}"></div><div role="presentation" focusable @click="${this.selectInput}"></div>${this.internalLabelTemplate}</div>${this.messages?.length?t`<div cds-layout="horizontal wrap:none ${this.messages?.length?"gap:xs":""}">${c(this.status)}<div cds-layout="align:vertical-center" class="messages"><slot name="message"></slot></div></div>`:""}</div><div cds-layout="display:screen-reader-only"><slot name="input"></slot></div>`}firstUpdated(e){super.firstUpdated(e),this.inputControl.addEventListener("change",(()=>this.checked=this.inputControl.checked)),this.observers.push(i(this.inputControl,"checked",(e=>this.checked=""===e||e)),i(this.inputControl,"indeterminate",(e=>this.indeterminate=""===e||e)))}updated(e){super.updated(e),e.has("indeterminate")&&e.get("indeterminate")!==this.indeterminate&&this.indeterminate&&(this.checked=!1),e.has("checked")&&e.get("checked")!==this.checked&&this.checked&&(this.indeterminate=!1,this.checkedChange.emit(this.checked,{bubbles:!this.isControlGroup}))}selectInput(e){this.inputControl.click(),e.preventDefault()}}e([s({type:String})],d.prototype,"controlAlign",void 0),e([n()],d.prototype,"isControlGroup",void 0),e([n({type:Boolean,reflect:!0})],d.prototype,"checked",void 0),e([n({type:Boolean,reflect:!0})],d.prototype,"indeterminate",void 0),e([o()],d.prototype,"checkedChange",void 0);export{d as CdsInternalControlInline};
 //# sourceMappingURL=control-inline.element.js.map

package/forms/control-inline/control-inline.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-inline.element.js","sources":["../../../../src/forms/control-inline/control-inline.element.ts"],"sourcesContent":null,"names":["CdsInternalControlInline","CdsControl","[object Object]","super","this","controlAlign","checked","indeterminate","supportsPrefixSuffixActions","styles","internalLabelTemplate","html","disabled","associateInputAndLabel","isControlGroup","selectInput","messages","length","getStatusIcon","status","props","firstUpdated","inputControl","addEventListener","observers","push","getElementUpdates","value","updated","has","get","checkedChange","emit","bubbles","e","click","preventDefault","__decorate","property","type","String","prototype","state","Boolean","reflect","event"],"mappings":"sTA2BO,MAAMA,UAAiCC,EAC1CC,cACIC,oBAEAC,KAAKC,aAAe,OAEpBD,KAAKE,SAAU,EAEfF,KAAKG,eAAgB,EACrBH,KAAKI,6BAA8B,EAEvCC,oBACI,MAAO,IAAIN,MAAMM,OAAQA,GAE7BC,4BACI,OAAOC,CAAK,6DAC8CP,KAAKQ,gFAC9B,IAAMR,KAAKS,iEAIhDX,SACI,OAAOS,CAAK,yCAGEP,KAAKU,eAAiB,mCAAqC,yFAGe,UAAtBV,KAAKC,aACjE,gBACA,sDAE4CD,KAAKW,iEACTX,KAAKW,sBAC/CX,KAAKM,8BAEPN,KAAKY,UAAUC,OACXN,CAAK,yCAA0CP,KAAKY,UAAUC,OAAS,SAAW,OAChFC,EAAcd,KAAKe,2GAKrB,wFAOVjB,aAAakB,GACTjB,MAAMkB,aAAaD,GACnBhB,KAAKkB,aAAaC,iBAAiB,UAAU,IAAOnB,KAAKE,QAAUF,KAAKkB,aAAahB,UACrFF,KAAKoB,UAAUC,KAAKC,EAAkBtB,KAAKkB,aAAc,WAAYK,GAAWvB,KAAKE,QAAoB,KAAVqB,GAAsBA,IAASD,EAAkBtB,KAAKkB,aAAc,iBAAkBK,GAAWvB,KAAKG,cAA0B,KAAVoB,GAAsBA,KAE/OzB,QAAQkB,GACJjB,MAAMyB,QAAQR,GACVA,EAAMS,IAAI,kBAAoBT,EAAMU,IAAI,mBAAqB1B,KAAKG,eAAiBH,KAAKG,gBACxFH,KAAKE,SAAU,GAEfc,EAAMS,IAAI,YAAcT,EAAMU,IAAI,aAAe1B,KAAKE,SAAWF,KAAKE,UACtEF,KAAKG,eAAgB,EACrBH,KAAK2B,cAAcC,KAAK5B,KAAKE,QAAS,CAAE2B,SAAU7B,KAAKU,kBAG/DZ,YAAYgC,GACR9B,KAAKkB,aAAaa,QAClBD,EAAEE,kBAGVC,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBxC,EAAyByC,UAAW,oBAAgB,GACvDJ,EAAW,CACPK,KACD1C,EAAyByC,UAAW,sBAAkB,GACzDJ,EAAW,CACPK,EAAM,CAAEH,KAAMI,QAASC,SAAS,KACjC5C,EAAyByC,UAAW,eAAW,GAClDJ,EAAW,CACPK,EAAM,CAAEH,KAAMI,QAASC,SAAS,KACjC5C,EAAyByC,UAAW,qBAAiB,GACxDJ,EAAW,CACPQ,KACD7C,EAAyByC,UAAW,qBAAiB"}
+{"version":3,"file":"control-inline.element.js","sources":["../../../../src/forms/control-inline/control-inline.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html } from 'lit';\nimport { property, event, getElementUpdates, state } from '@cds/core/internal';\nimport styles from './control-inline.element.scss';\nimport { CdsControl, ControlLabelLayout } from '../control/control.element.js';\nimport { getStatusIcon } from '../utils/utils.js';\n/**\n * Internal Control Inline (boolean types)\n *\n * ```typescript\n * import '@cds/core/forms/register.js';\n * ```\n *\n * ```html\n * <cds-internal-control-inline>\n *   <label>inline</label>\n *   <input type=\"radio\" />\n * </ds-internal-control-inline>\n * ```\n * @element cds-internal-control-inline\n * @slot - For projecting inline input and label\n */\nexport class CdsInternalControlInline extends CdsControl {\n    constructor() {\n        super(...arguments);\n        /** Align the labels of controls within group left or right */\n        this.controlAlign = 'left';\n        /** @private */\n        this.checked = false;\n        /** @private */\n        this.indeterminate = false;\n        this.supportsPrefixSuffixActions = false;\n    }\n    static get styles() {\n        return [...super.styles, styles];\n    }\n    get internalLabelTemplate() {\n        return this.labelLayout !== ControlLabelLayout.ariaLabel\n            ? html `\n          <cds-internal-control-label\n            action=\"secondary\"\n            .disabled=\"${this.disabled}\"\n            cds-layout=\"align:vertical-center\"\n          >\n            <slot name=\"label\" @slotchange=${() => this.associateInputAndLabel()}></slot>\n          </cds-internal-control-label>\n        `\n            : '';\n    }\n    render() {\n        return html `\n      <div\n        class=\"private-host\"\n        cds-layout=\"${this.isControlGroup ? 'horizontal align:vertical-center' : 'vertical'} gap:xs\"\n      >\n        <div\n          cds-layout=\"horizontal gap:xs wrap:none align:vertical-center ${this.controlAlign === 'right'\n            ? 'order:reverse'\n            : ''}\"\n        >\n          <div role=\"presentation\" class=\"input\" @click=${this.selectInput}></div>\n          <div role=\"presentation\" focusable @click=${this.selectInput}></div>\n          ${this.internalLabelTemplate}\n        </div>\n        ${this.messages?.length\n            ? html ` <div cds-layout=\"horizontal wrap:none ${this.messages?.length ? 'gap:xs' : ''}\">\n              ${getStatusIcon(this.status)}\n              <div cds-layout=\"align:vertical-center\" class=\"messages\">\n                <slot name=\"message\"></slot>\n              </div>\n            </div>`\n            : ''}\n      </div>\n      <div cds-layout=\"display:screen-reader-only\">\n        <slot name=\"input\"></slot>\n      </div>\n    `;\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        this.inputControl.addEventListener('change', () => (this.checked = this.inputControl.checked));\n        this.observers.push(getElementUpdates(this.inputControl, 'checked', (value) => (this.checked = value === '' ? true : value)), getElementUpdates(this.inputControl, 'indeterminate', (value) => (this.indeterminate = value === '' ? true : value)));\n    }\n    updated(props) {\n        super.updated(props);\n        if (props.has('indeterminate') && props.get('indeterminate') !== this.indeterminate && this.indeterminate) {\n            this.checked = false;\n        }\n        if (props.has('checked') && props.get('checked') !== this.checked && this.checked) {\n            this.indeterminate = false;\n            this.checkedChange.emit(this.checked, { bubbles: !this.isControlGroup }); // if not a group then bubble to notify the other associated controls\n        }\n    }\n    selectInput(e) {\n        this.inputControl.click();\n        e.preventDefault(); // prevent any events from the input div, only the native input\n    }\n}\n__decorate([\n    property({ type: String })\n], CdsInternalControlInline.prototype, \"controlAlign\", void 0);\n__decorate([\n    state()\n], CdsInternalControlInline.prototype, \"isControlGroup\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsInternalControlInline.prototype, \"checked\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsInternalControlInline.prototype, \"indeterminate\", void 0);\n__decorate([\n    event()\n], CdsInternalControlInline.prototype, \"checkedChange\", void 0);\n"],"names":["CdsInternalControlInline","CdsControl","constructor","super","this","controlAlign","checked","indeterminate","supportsPrefixSuffixActions","styles","internalLabelTemplate","labelLayout","ControlLabelLayout","ariaLabel","html","disabled","associateInputAndLabel","render","isControlGroup","selectInput","messages","length","getStatusIcon","status","firstUpdated","props","inputControl","addEventListener","observers","push","getElementUpdates","value","updated","has","get","checkedChange","emit","bubbles","e","click","preventDefault","__decorate","property","type","String","prototype","state","Boolean","reflect","event"],"mappings":"8UA2BO,MAAMA,UAAiCC,EAC1CC,cACIC,oBAEAC,KAAKC,aAAe,OAEpBD,KAAKE,SAAU,EAEfF,KAAKG,eAAgB,EACrBH,KAAKI,6BAA8B,EAE5BC,oBACP,MAAO,IAAIN,MAAMM,OAAQA,GAEzBC,4BACA,OAAON,KAAKO,cAAgBC,EAAmBC,UACzCC,CAAK,6DAGMV,KAAKW,gFAGe,IAAMX,KAAKY,iEAG1C,GAEVC,SACI,OAAOH,CAAK,yCAGEV,KAAKc,eAAiB,mCAAqC,yFAGe,UAAtBd,KAAKC,aACjE,gBACA,sDAE4CD,KAAKe,iEACTf,KAAKe,sBAC/Cf,KAAKM,8BAEPN,KAAKgB,UAAUC,OACXP,CAAK,yCAA0CV,KAAKgB,UAAUC,OAAS,SAAW,OAChFC,EAAclB,KAAKmB,2GAKrB,wFAOVC,aAAaC,GACTtB,MAAMqB,aAAaC,GACnBrB,KAAKsB,aAAaC,iBAAiB,UAAU,IAAOvB,KAAKE,QAAUF,KAAKsB,aAAapB,UACrFF,KAAKwB,UAAUC,KAAKC,EAAkB1B,KAAKsB,aAAc,WAAYK,GAAW3B,KAAKE,QAAoB,KAAVyB,GAAsBA,IAASD,EAAkB1B,KAAKsB,aAAc,iBAAkBK,GAAW3B,KAAKG,cAA0B,KAAVwB,GAAsBA,KAE/OC,QAAQP,GACJtB,MAAM6B,QAAQP,GACVA,EAAMQ,IAAI,kBAAoBR,EAAMS,IAAI,mBAAqB9B,KAAKG,eAAiBH,KAAKG,gBACxFH,KAAKE,SAAU,GAEfmB,EAAMQ,IAAI,YAAcR,EAAMS,IAAI,aAAe9B,KAAKE,SAAWF,KAAKE,UACtEF,KAAKG,eAAgB,EACrBH,KAAK+B,cAAcC,KAAKhC,KAAKE,QAAS,CAAE+B,SAAUjC,KAAKc,kBAG/DC,YAAYmB,GACRlC,KAAKsB,aAAaa,QAClBD,EAAEE,kBAGVC,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClB5C,EAAyB6C,UAAW,oBAAgB,GACvDJ,EAAW,CACPK,KACD9C,EAAyB6C,UAAW,sBAAkB,GACzDJ,EAAW,CACPK,EAAM,CAAEH,KAAMI,QAASC,SAAS,KACjChD,EAAyB6C,UAAW,eAAW,GAClDJ,EAAW,CACPK,EAAM,CAAEH,KAAMI,QAASC,SAAS,KACjChD,EAAyB6C,UAAW,qBAAiB,GACxDJ,EAAW,CACPQ,KACDjD,EAAyB6C,UAAW,qBAAiB"}

package/forms/control-inline/control-inline.element.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-inline.element.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
+{"version":3,"file":"control-inline.element.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/forms/control-label/control-label.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-label.element.js","sources":["../../../../src/forms/control-label/control-label.element.ts"],"sourcesContent":null,"names":["CdsInternalControlLabel","LitElement","[object Object]","super","this","disabled","action","styles","baseStyles","html","__decorate","property","type","Boolean","prototype","String"],"mappings":"2LA0BO,MAAMA,UAAgCC,EACzCC,cACIC,oBACAC,KAAKC,UAAW,EAChBD,KAAKE,OAAS,UAElBC,oBACI,MAAO,CAACC,EAAYD,GAExBL,SACI,OAAOO,CAAK,6FAOpBC,EAAW,CACPC,EAAS,CAAEC,KAAMC,WAClBb,EAAwBc,UAAW,gBAAY,GAClDJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,UAClBf,EAAwBc,UAAW,cAAU"}
+{"version":3,"file":"control-label.element.js","sources":["../../../../src/forms/control-label/control-label.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { baseStyles, property } from '@cds/core/internal';\nimport styles from './control-label.element.scss';\n/**\n * Label\n *\n * ```typescript\n * import '@cds/core/forms/register.js';\n * ```\n *\n * ```html\n * <cds-internal-control-label status=\"primary | secondary\">\n *   <label>...</label>\n * </cds-internal-control-label>\n * ```\n *\n * @element cds-internal-control-label\n * @slot - For projecting label text\n * @cssprop --label-width\n */\nexport class CdsInternalControlLabel extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.disabled = false;\n        this.action = 'primary';\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n    render() {\n        return html `\n      <div class=\"private-host\" cds-layout=\"horizontal gap:xs align:shrink\">\n        <slot></slot>\n      </div>\n    `;\n    }\n}\n__decorate([\n    property({ type: Boolean })\n], CdsInternalControlLabel.prototype, \"disabled\", void 0);\n__decorate([\n    property({ type: String })\n], CdsInternalControlLabel.prototype, \"action\", void 0);\n"],"names":["CdsInternalControlLabel","LitElement","constructor","super","this","disabled","action","styles","baseStyles","render","html","__decorate","property","type","Boolean","prototype","String"],"mappings":"2LA0BO,MAAMA,UAAgCC,EACzCC,cACIC,oBACAC,KAAKC,UAAW,EAChBD,KAAKE,OAAS,UAEPC,oBACP,MAAO,CAACC,EAAYD,GAExBE,SACI,OAAOC,CAAK,6FAOpBC,EAAW,CACPC,EAAS,CAAEC,KAAMC,WAClBd,EAAwBe,UAAW,gBAAY,GAClDJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,UAClBhB,EAAwBe,UAAW,cAAU"}

package/forms/control-label/control-label.element.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-label.element.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
+{"version":3,"file":"control-label.element.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/forms/control-message/control-message.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-message.element.js","sources":["../../../../src/forms/control-message/control-message.element.ts"],"sourcesContent":null,"names":["CdsControlMessage","LitElement","[object Object]","super","this","status","disabled","html","styles","baseStyles","connectedCallback","assignSlotNames","__decorate","property","type","String","prototype","state","Boolean","reflect"],"mappings":"6NAgCO,MAAMA,UAA0BC,EACnCC,cACIC,oBAKAC,KAAKC,OAAS,UACdD,KAAKE,UAAW,EAEpBJ,SACI,OAAOK,CAAK,gDAMhBC,oBACI,MAAO,CAACC,EAAYD,GAExBN,oBACIC,MAAMO,oBACNC,EAAgB,CAACP,KAAM,aAG/BQ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBf,EAAkBgB,UAAW,cAAU,GAC1CJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBf,EAAkBgB,UAAW,aAAS,GACzCJ,EAAW,CACPK,EAAM,CAAEH,KAAMI,QAASC,SAAS,KACjCnB,EAAkBgB,UAAW,gBAAY"}
+{"version":3,"file":"control-message.element.js","sources":["../../../../src/forms/control-message/control-message.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { baseStyles, property, assignSlotNames, state } from '@cds/core/internal';\nimport styles from './control-message.element.scss';\n/**\n * Control Message\n *\n * ```typescript\n * import '@cds/core/forms/register.js';\n * ```\n *\n * ```html\n * <cds-control>\n *   <label>Test</label>\n *   <input type=\"text\" />\n *   <cds-control-message>helper text</cds-control-message>\n * </cds-control>\n * ```\n *\n * @element cds-control-message\n * @slot - For projecting helper message text\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --max-width\n * @cssprop --min-width\n */\nexport class CdsControlMessage extends LitElement {\n    constructor() {\n        super(...arguments);\n        /**\n         * Set the status of form control message validation\n         * @type {neutral | error | success}\n         */\n        this.status = 'neutral';\n        this.disabled = false;\n    }\n    render() {\n        return html `\n      <div class=\"private-host\">\n        <slot></slot>\n      </div>\n    `;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        assignSlotNames([this, 'message']);\n    }\n}\n__decorate([\n    property({ type: String })\n], CdsControlMessage.prototype, \"status\", void 0);\n__decorate([\n    property({ type: String })\n], CdsControlMessage.prototype, \"error\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsControlMessage.prototype, \"disabled\", void 0);\n"],"names":["CdsControlMessage","LitElement","constructor","super","this","status","disabled","render","html","styles","baseStyles","connectedCallback","assignSlotNames","__decorate","property","type","String","prototype","state","Boolean","reflect"],"mappings":"6NAgCO,MAAMA,UAA0BC,EACnCC,cACIC,oBAKAC,KAAKC,OAAS,UACdD,KAAKE,UAAW,EAEpBC,SACI,OAAOC,CAAK,gDAMLC,oBACP,MAAO,CAACC,EAAYD,GAExBE,oBACIR,MAAMQ,oBACNC,EAAgB,CAACR,KAAM,aAG/BS,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBhB,EAAkBiB,UAAW,cAAU,GAC1CJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBhB,EAAkBiB,UAAW,aAAS,GACzCJ,EAAW,CACPK,EAAM,CAAEH,KAAMI,QAASC,SAAS,KACjCpB,EAAkBiB,UAAW,gBAAY"}

package/forms/control-message/control-message.element.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-message.element.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
+{"version":3,"file":"control-message.element.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/forms/form-group/form-group.element.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 import { FormLayout, ControlWidth } from '../utils/interfaces.js';
 /**
  * Form
@@ -54,8 +54,8 @@ export declare class CdsFormGroup extends LitElement {
     static get styles(): import("lit").CSSResultGroup[];
     render(): import("lit-html").TemplateResult<1>;
     private overflowElement;
-    firstUpdated(props: Map<string, any>): void;
-    updated(props: Map<string, any>): void;
+    firstUpdated(props: PropertyValues<this>): void;
+    updated(props: PropertyValues<this>): void;
     disconnectedCallback(): void;
     private setControlLabelWidths;
     private syncLayouts;

package/forms/form-group/form-group.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{LitElement as o,html as s}from"lit";import{baseStyles as e,elementVisible as r,syncDefinedProps as i,childrenUpdateComplete as l,elementResize as a,pxToRem as n,property as p,querySlotAll as d}from"@cds/core/internal";import{defaultFormLayout as h,getLargestPrimaryLabelWidth as c,isVerticalLayout as u}from"../utils/utils.js";import y from"./form-group.element.scss.js";class m extends o{constructor(){super(...arguments);this.layout=h,this.responsive=!0,this.validate=!1,this.observers=[]}get controlsAndGroups(){return[...Array.from(this.groups),...Array.from(this.controls)]}static get styles(){return[e,y]}render(){return s`<div class="private-host" cds-layout="vertical gap:${"compact"===this.layout?"sm":"lg"}"><slot></slot></div>`}firstUpdated(t){super.firstUpdated(t),this.syncLayouts(),this.setControlLabelWidths(),this.observers.push(r(this,(()=>this.setControlLabelWidths())))}updated(t){super.updated(t),i(t,this,this.controlsAndGroups)}disconnectedCallback(){super.disconnectedCallback(),this.observers.forEach((t=>t.disconnect()))}async setControlLabelWidths(){"horizontal"!==this.layout&&"horizontal-inline"!==this.layout&&"compact"!==this.layout||(await l(this.controlsAndGroups),this.style.setProperty("--internal-label-min-width",await c(this.controlsAndGroups)),a(this,(()=>this.style.setProperty("--internal-label-max-width",n(this.getBoundingClientRect().width)))))}syncLayouts(){this.addEventListener("layoutChange",(t=>{t.preventDefault(),!this.overflowElement&&u(t.detail)&&this.collapseForm(t.target),t.target!==this.overflowElement||u(t.detail)||this.expandForm(t.detail)}))}collapseForm(t){this.overflowElement=t,this.responsive=!1,this.layout="vertical",t.updateComplete.then((()=>t.responsive=!0))}expandForm(t){this.responsive=!0,this.overflowElement=null,this.layout=t}}t([p({type:String})],m.prototype,"layout",void 0),t([p({type:String})],m.prototype,"controlWidth",void 0),t([p({type:Boolean})],m.prototype,"responsive",void 0),t([p({type:Boolean})],m.prototype,"validate",void 0),t([d("[cds-control]")],m.prototype,"controls",void 0),t([d("[cds-control-group]")],m.prototype,"groups",void 0);export{m as CdsFormGroup};
+import{__decorate as t}from"tslib";import{LitElement as o,html as s}from"lit";import{baseStyles as e,elementVisible as r,syncDefinedProps as i,childrenUpdateComplete as l,elementResize as a,pxToRem as n,property as p,querySlotAll as d}from"@cds/core/internal";import{defaultFormLayout as h,getLargestPrimaryLabelWidth as c,isVerticalLayout as u}from"../utils/utils.js";import y from"./form-group.element.scss.js";class m extends o{constructor(){super(...arguments);this.layout=h,this.responsive=!0,this.validate=!1,this.observers=[]}get controlsAndGroups(){return[...Array.from(this.groups),...Array.from(this.controls)]}static get styles(){return[e,y]}render(){return s`<div class="private-host" cds-layout="vertical gap:${"compact"===this.layout?"sm":"lg"}"><slot></slot></div>`}firstUpdated(t){super.firstUpdated(t),this.syncLayouts(),this.setControlLabelWidths(),this.observers.push(r(this,(()=>this.setControlLabelWidths())))}updated(t){super.updated(t),i(t,this,this.controlsAndGroups)}disconnectedCallback(){super.disconnectedCallback(),this.observers.forEach((t=>t?.disconnect()))}async setControlLabelWidths(){"horizontal"!==this.layout&&"horizontal-inline"!==this.layout&&"compact"!==this.layout||(await l(this.controlsAndGroups),this.style.setProperty("--internal-label-min-width",await c(this.controlsAndGroups)),a(this,(()=>this.style.setProperty("--internal-label-max-width",n(this.getBoundingClientRect().width)))))}syncLayouts(){this.addEventListener("layoutChange",(t=>{t.preventDefault(),!this.overflowElement&&u(t.detail)&&this.collapseForm(t.target),t.target!==this.overflowElement||u(t.detail)||this.expandForm(t.detail)}))}collapseForm(t){this.overflowElement=t,this.responsive=!1,this.layout="vertical",t.updateComplete.then((()=>t.responsive=!0))}expandForm(t){this.responsive=!0,this.overflowElement=null,this.layout=t}}t([p({type:String})],m.prototype,"layout",void 0),t([p({type:String})],m.prototype,"controlWidth",void 0),t([p({type:Boolean})],m.prototype,"responsive",void 0),t([p({type:Boolean})],m.prototype,"validate",void 0),t([d("[cds-control]")],m.prototype,"controls",void 0),t([d("[cds-control-group]")],m.prototype,"groups",void 0);export{m as CdsFormGroup};
 //# sourceMappingURL=form-group.element.js.map

package/forms/form-group/form-group.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-group.element.js","sources":["../../../../src/forms/form-group/form-group.element.ts"],"sourcesContent":null,"names":["CdsFormGroup","LitElement","[object Object]","super","this","layout","defaultFormLayout","responsive","validate","observers","controlsAndGroups","Array","from","groups","controls","styles","baseStyles","html","props","firstUpdated","syncLayouts","setControlLabelWidths","push","elementVisible","updated","syncDefinedProps","disconnectedCallback","forEach","o","disconnect","childrenUpdateComplete","style","setProperty","getLargestPrimaryLabelWidth","elementResize","pxToRem","getBoundingClientRect","width","addEventListener","e","preventDefault","overflowElement","isVerticalLayout","detail","collapseForm","target","expandForm","control","updateComplete","then","__decorate","property","type","String","prototype","Boolean","querySlotAll"],"mappings":"6ZAmCO,MAAMA,UAAqBC,EAC9BC,cACIC,oBAMAC,KAAKC,OAASC,EAKdF,KAAKG,YAAa,EAKlBH,KAAKI,UAAW,EAChBJ,KAAKK,UAAY,GAErBC,wBACI,MAAO,IAAIC,MAAMC,KAAKR,KAAKS,WAAYF,MAAMC,KAAKR,KAAKU,WAE3DC,oBACI,MAAO,CAACC,EAAYD,GAExBb,SACI,OAAOe,CAAK,sDACuD,YAAhBb,KAAKC,OAAuB,KAAO,4BAK1FH,aAAagB,GACTf,MAAMgB,aAAaD,GACnBd,KAAKgB,cACLhB,KAAKiB,wBACLjB,KAAKK,UAAUa,KAAKC,EAAenB,MAAM,IAAMA,KAAKiB,2BAExDnB,QAAQgB,GACJf,MAAMqB,QAAQN,GACdO,EAAiBP,EAAOd,KAAMA,KAAKM,mBAEvCR,uBACIC,MAAMuB,uBACNtB,KAAKK,UAAUkB,SAAQC,GAAKA,EAAEC,eAElC3B,8BACwB,eAAhBE,KAAKC,QAA2C,sBAAhBD,KAAKC,QAAkD,YAAhBD,KAAKC,eACtEyB,EAAuB1B,KAAKM,mBAClCN,KAAK2B,MAAMC,YAAY,mCAAoCC,EAA4B7B,KAAKM,oBAC5FwB,EAAc9B,MAAM,IAAMA,KAAK2B,MAAMC,YAAY,6BAA8BG,EAAQ/B,KAAKgC,wBAAwBC,WAG5HnC,cACIE,KAAKkC,iBAAiB,gBAAiBC,IACnCA,EAAEC,kBACGpC,KAAKqC,iBAAmBC,EAAiBH,EAAEI,SAC5CvC,KAAKwC,aAAaL,EAAEM,QAEpBN,EAAEM,SAAWzC,KAAKqC,iBAAoBC,EAAiBH,EAAEI,SACzDvC,KAAK0C,WAAWP,EAAEI,WAI9BzC,aAAa6C,GACT3C,KAAKqC,gBAAkBM,EACvB3C,KAAKG,YAAa,EAClBH,KAAKC,OAAS,WACd0C,EAAQC,eAAeC,MAAK,IAAOF,EAAQxC,YAAa,IAE5DL,WAAWG,GACPD,KAAKG,YAAa,EAClBH,KAAKqC,gBAAkB,KACvBrC,KAAKC,OAASA,GAGtB6C,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBrD,EAAasD,UAAW,cAAU,GACrCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBrD,EAAasD,UAAW,oBAAgB,GAC3CJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,WAClBvD,EAAasD,UAAW,kBAAc,GACzCJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,WAClBvD,EAAasD,UAAW,gBAAY,GACvCJ,EAAW,CACPM,EAAa,kBACdxD,EAAasD,UAAW,gBAAY,GACvCJ,EAAW,CACPM,EAAa,wBACdxD,EAAasD,UAAW,cAAU"}
+{"version":3,"file":"form-group.element.js","sources":["../../../../src/forms/form-group/form-group.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { LitElement, html } from 'lit';\nimport { baseStyles, querySlotAll, property, childrenUpdateComplete, elementResize, pxToRem, syncDefinedProps, elementVisible, } from '@cds/core/internal';\nimport { getLargestPrimaryLabelWidth, isVerticalLayout, defaultFormLayout } from '../utils/utils.js';\nimport styles from './form-group.element.scss';\n/**\n * Form\n *\n * ```typescript\n * import '@cds/core/forms/register.js';\n * ```\n *\n * ```html\n * <cds-form-group layout=\"horizontal\">\n *   <cds-input>\n *     <label>Test</label>\n *     <input type=\"text\" />\n *   </cds-input>\n *\n *   <cds-input>\n *     <label>Test</label>\n *     <input type=\"text\" />\n *   </cds-input>\n * </cds-form-group>\n * ```\n *\n * @element cds-form-group\n * @slot - For projecting input controls\n * @cssprop --label-width\n */\nexport class CdsFormGroup extends LitElement {\n    constructor() {\n        super(...arguments);\n        /**\n         * Set to adjust the default control layout for all controls within form group.\n         * When `responsive` is true this will be the largest size to scale to.\n         * @type {horizontal | horizontal-inline | vertical | vertical-inline | compact}\n         */\n        this.layout = defaultFormLayout;\n        /**\n         * By default forms will collapse to layout that prevents overflow.\n         * If disabled control layout may break or overflow in unexpected ways.\n         */\n        this.responsive = true;\n        /**\n         * Set the validate attribute to sync with HTML5 native validation\n         * https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation\n         */\n        this.validate = false;\n        this.observers = [];\n    }\n    get controlsAndGroups() {\n        return [...Array.from(this.groups), ...Array.from(this.controls)];\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n    render() {\n        return html `\n      <div class=\"private-host\" cds-layout=\"vertical gap:${this.layout === 'compact' ? 'sm' : 'lg'}\">\n        <slot></slot>\n      </div>\n    `;\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        this.syncLayouts();\n        this.setControlLabelWidths();\n        this.observers.push(elementVisible(this, () => this.setControlLabelWidths()));\n    }\n    updated(props) {\n        super.updated(props);\n        syncDefinedProps(props, this, this.controlsAndGroups);\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        this.observers.forEach(o => o?.disconnect());\n    }\n    async setControlLabelWidths() {\n        if (this.layout === 'horizontal' || this.layout === 'horizontal-inline' || this.layout === 'compact') {\n            await childrenUpdateComplete(this.controlsAndGroups);\n            this.style.setProperty('--internal-label-min-width', await getLargestPrimaryLabelWidth(this.controlsAndGroups));\n            elementResize(this, () => this.style.setProperty('--internal-label-max-width', pxToRem(this.getBoundingClientRect().width)));\n        }\n    }\n    syncLayouts() {\n        this.addEventListener('layoutChange', (e) => {\n            e.preventDefault();\n            if (!this.overflowElement && isVerticalLayout(e.detail)) {\n                this.collapseForm(e.target);\n            }\n            if (e.target === this.overflowElement && !isVerticalLayout(e.detail)) {\n                this.expandForm(e.detail);\n            }\n        });\n    }\n    collapseForm(control) {\n        this.overflowElement = control;\n        this.responsive = false;\n        this.layout = 'vertical';\n        control.updateComplete.then(() => (control.responsive = true));\n    }\n    expandForm(layout) {\n        this.responsive = true;\n        this.overflowElement = null;\n        this.layout = layout;\n    }\n}\n__decorate([\n    property({ type: String })\n], CdsFormGroup.prototype, \"layout\", void 0);\n__decorate([\n    property({ type: String })\n], CdsFormGroup.prototype, \"controlWidth\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsFormGroup.prototype, \"responsive\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsFormGroup.prototype, \"validate\", void 0);\n__decorate([\n    querySlotAll('[cds-control]')\n], CdsFormGroup.prototype, \"controls\", void 0);\n__decorate([\n    querySlotAll('[cds-control-group]')\n], CdsFormGroup.prototype, \"groups\", void 0);\n"],"names":["CdsFormGroup","LitElement","constructor","super","this","layout","defaultFormLayout","responsive","validate","observers","controlsAndGroups","Array","from","groups","controls","styles","baseStyles","render","html","firstUpdated","props","syncLayouts","setControlLabelWidths","push","elementVisible","updated","syncDefinedProps","disconnectedCallback","forEach","o","disconnect","async","childrenUpdateComplete","style","setProperty","getLargestPrimaryLabelWidth","elementResize","pxToRem","getBoundingClientRect","width","addEventListener","e","preventDefault","overflowElement","isVerticalLayout","detail","collapseForm","target","expandForm","control","updateComplete","then","__decorate","property","type","String","prototype","Boolean","querySlotAll"],"mappings":"6ZAmCO,MAAMA,UAAqBC,EAC9BC,cACIC,oBAMAC,KAAKC,OAASC,EAKdF,KAAKG,YAAa,EAKlBH,KAAKI,UAAW,EAChBJ,KAAKK,UAAY,GAEjBC,wBACA,MAAO,IAAIC,MAAMC,KAAKR,KAAKS,WAAYF,MAAMC,KAAKR,KAAKU,WAEhDC,oBACP,MAAO,CAACC,EAAYD,GAExBE,SACI,OAAOC,CAAK,sDACuD,YAAhBd,KAAKC,OAAuB,KAAO,4BAK1Fc,aAAaC,GACTjB,MAAMgB,aAAaC,GACnBhB,KAAKiB,cACLjB,KAAKkB,wBACLlB,KAAKK,UAAUc,KAAKC,EAAepB,MAAM,IAAMA,KAAKkB,2BAExDG,QAAQL,GACJjB,MAAMsB,QAAQL,GACdM,EAAiBN,EAAOhB,KAAMA,KAAKM,mBAEvCiB,uBACIxB,MAAMwB,uBACNvB,KAAKK,UAAUmB,SAAQC,GAAKA,GAAGC,eAEnCC,8BACwB,eAAhB3B,KAAKC,QAA2C,sBAAhBD,KAAKC,QAAkD,YAAhBD,KAAKC,eACtE2B,EAAuB5B,KAAKM,mBAClCN,KAAK6B,MAAMC,YAAY,mCAAoCC,EAA4B/B,KAAKM,oBAC5F0B,EAAchC,MAAM,IAAMA,KAAK6B,MAAMC,YAAY,6BAA8BG,EAAQjC,KAAKkC,wBAAwBC,WAG5HlB,cACIjB,KAAKoC,iBAAiB,gBAAiBC,IACnCA,EAAEC,kBACGtC,KAAKuC,iBAAmBC,EAAiBH,EAAEI,SAC5CzC,KAAK0C,aAAaL,EAAEM,QAEpBN,EAAEM,SAAW3C,KAAKuC,iBAAoBC,EAAiBH,EAAEI,SACzDzC,KAAK4C,WAAWP,EAAEI,WAI9BC,aAAaG,GACT7C,KAAKuC,gBAAkBM,EACvB7C,KAAKG,YAAa,EAClBH,KAAKC,OAAS,WACd4C,EAAQC,eAAeC,MAAK,IAAOF,EAAQ1C,YAAa,IAE5DyC,WAAW3C,GACPD,KAAKG,YAAa,EAClBH,KAAKuC,gBAAkB,KACvBvC,KAAKC,OAASA,GAGtB+C,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBvD,EAAawD,UAAW,cAAU,GACrCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBvD,EAAawD,UAAW,oBAAgB,GAC3CJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,WAClBzD,EAAawD,UAAW,kBAAc,GACzCJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,WAClBzD,EAAawD,UAAW,gBAAY,GACvCJ,EAAW,CACPM,EAAa,kBACd1D,EAAawD,UAAW,gBAAY,GACvCJ,EAAW,CACPM,EAAa,wBACd1D,EAAawD,UAAW,cAAU"}

package/forms/form-group/form-group.element.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-group.element.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
+{"version":3,"file":"form-group.element.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/forms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/forms/register.js.map

@@ -1 +1 @@
-{"version":3,"file":"register.js","sources":["../../../src/forms/register.ts"],"sourcesContent":null,"names":["registerElementSafely","CdsControl","CdsControlAction","CdsInternalControlGroup","CdsInternalControlInline","CdsInternalControlLabel","CdsControlMessage","CdsFormGroup","ClarityIcons","addIcons","exclamationCircleIcon","checkCircleIcon"],"mappings":"23BAkBAA,EAAsB,cAAeC,GACrCD,EAAsB,qBAAsBE,GAC5CF,EAAsB,6BAA8BG,GACpDH,EAAsB,8BAA+BI,GACrDJ,EAAsB,6BAA8BK,GACpDL,EAAsB,sBAAuBM,GAC7CN,EAAsB,iBAAkBO,GACxCC,EAAaC,SAASC,EAAuBC"}
+{"version":3,"file":"register.js","sources":["../../../src/forms/register.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport '@cds/core/icon/register.js';\nimport '@cds/core/button-action/register.js';\nimport { ClarityIcons } from '@cds/core/icon/icon.service.js';\nimport { exclamationCircleIcon } from '@cds/core/icon/shapes/exclamation-circle.js';\nimport { checkCircleIcon } from '@cds/core/icon/shapes/check-circle.js';\nimport { registerElementSafely } from '@cds/core/internal';\nimport { CdsControl } from './control/control.element.js';\nimport { CdsControlAction } from './control-action/control-action.element.js';\nimport { CdsInternalControlGroup } from './control-group/control-group.element.js';\nimport { CdsInternalControlInline } from './control-inline/control-inline.element.js';\nimport { CdsInternalControlLabel } from './control-label/control-label.element.js';\nimport { CdsControlMessage } from './control-message/control-message.element.js';\nimport { CdsFormGroup } from './form-group/form-group.element.js';\nregisterElementSafely('cds-control', CdsControl);\nregisterElementSafely('cds-control-action', CdsControlAction);\nregisterElementSafely('cds-internal-control-group', CdsInternalControlGroup);\nregisterElementSafely('cds-internal-control-inline', CdsInternalControlInline);\nregisterElementSafely('cds-internal-control-label', CdsInternalControlLabel);\nregisterElementSafely('cds-control-message', CdsControlMessage);\nregisterElementSafely('cds-form-group', CdsFormGroup);\nClarityIcons.addIcons(exclamationCircleIcon, checkCircleIcon);\n"],"names":["registerElementSafely","CdsControl","CdsControlAction","CdsInternalControlGroup","CdsInternalControlInline","CdsInternalControlLabel","CdsControlMessage","CdsFormGroup","ClarityIcons","addIcons","exclamationCircleIcon","checkCircleIcon"],"mappings":"23BAkBAA,EAAsB,cAAeC,GACrCD,EAAsB,qBAAsBE,GAC5CF,EAAsB,6BAA8BG,GACpDH,EAAsB,8BAA+BI,GACrDJ,EAAsB,6BAA8BK,GACpDL,EAAsB,sBAAuBM,GAC7CN,EAAsB,iBAAkBO,GACxCC,EAAaC,SAASC,EAAuBC"}

package/forms/utils/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
+{"version":3,"file":"interfaces.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/forms/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/forms/utils/utils.ts"],"sourcesContent":null,"names":["formLayouts","defaultFormLayout","defaultControlWidth","associateInputAndLabel","input","label","assignInputId","setAttribute","id","associateInputToDatalist","datalist","length","createId","layoutGroupToControlMapper","horizontal-inline","vertical-inline","horizontal","vertical","compact","getStatusIcon","status","html","async","getLargestPrimaryLabelWidth","controls","Promise","all","map","c","updateComplete","then","primaryLabels","filter","controlLabel","action","pxToRem","Math","max","getBoundingClientRect","width","controlIsWrapped","layout","top","inlineControlListIsWrapped","inlineControls","first","last","isVerticalLayout","getCurrentMessageStatus","messages","message","find","m","hidden"],"mappings":"sFAOY,MAACA,EAAc,CAAC,WAAY,kBAAmB,aAAc,oBAAqB,WACjFC,EAAoB,aACpBC,EAAsB,UAC5B,SAASC,EAAuBC,EAAOC,GACtCD,GAASC,IACTC,EAAcF,GACdC,EAAME,aAAa,MAAOH,EAAMI,KAGjC,SAASC,EAAyBL,EAAOM,GACxCA,IACAJ,EAAcF,GACdM,EAASF,GAAQJ,EAAMI,GAAT,YACdJ,EAAMG,aAAa,OAAQG,EAASF,KAGrC,SAASF,EAAcF,GACrBA,EAAMI,GAAGG,SACVP,EAAMI,GAAKI,KAGP,MAACC,EAA6B,CACtCC,oBAAqB,aACrBC,kBAAmB,WACnBC,WAAY,aACZC,SAAU,WACVC,QAAS,WAEN,SAASC,EAAcC,GAC1B,OAAOC,CAAK,GAAc,YAAXD,EACTC,CAAK,qGAEgB,UAAXD,EAAqB,SAAW,qBACtB,UAAXA,EAAqB,qBAAuB,2CAEtC,qCAGf,KAEHE,eAAeC,EAA4BC,GAC9C,OAAOC,QAAQC,IAAIF,EAASG,KAAIC,GAAKA,EAAEC,kBAAiBC,MAAK,KACzD,MAAMC,EAAgBP,EAASQ,QAAOJ,GAAgC,YAA3BA,EAAEK,cAAcC,SAC3D,OAAOC,EAAQC,KAAKC,OAAON,EAAcJ,KAAIC,GAAKA,EAAEK,aAAaK,wBAAwBC,aAG1F,SAASC,EAAiBpC,EAAOC,EAAOoC,GAC3C,MAAmB,aAAXA,GACO,oBAAXA,GACArC,EAAMkC,wBAAwBI,IAAMrC,GAAOiC,wBAAwBI,IAAM,GAG1E,SAASC,EAA2BC,EAAgBH,GACvD,MAAMI,EAAQD,EAAe,GACvBE,EAAOF,EAAeA,EAAejC,OAAS,GAEpD,OADkC,oBAAX8B,GAA2C,sBAAXA,IAC9BK,EAAKR,wBAAwBI,IAAMG,EAAMP,wBAAwBI,IAEvF,SAASK,EAAiBN,GAC7B,MAAkB,aAAXA,GAAoC,oBAAXA,EAK7BnB,eAAe0B,EAAwBC,GAC1C,MAAMC,EAAUD,EAASE,MAAKC,GAAkB,YAAbA,EAAEhC,SAErC,aADM8B,GAASrB,gBACRqB,IAAYA,EAAQG,OAASH,EAAQ9B,OAAS"}
+{"version":3,"file":"utils.js","sources":["../../../../src/forms/utils/utils.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { html } from 'lit';\nimport { createId, pxToRem } from '@cds/core/internal';\nexport const formLayouts = ['vertical', 'vertical-inline', 'horizontal', 'horizontal-inline', 'compact'];\nexport const defaultFormLayout = 'horizontal';\nexport const defaultControlWidth = 'stretch';\nexport function associateInputAndLabel(input, label) {\n    if (input && label) {\n        assignInputId(input);\n        label.setAttribute('for', input.id);\n    }\n}\nexport function associateInputToDatalist(input, datalist) {\n    if (datalist) {\n        assignInputId(input);\n        datalist.id = `${input.id}-datalist`;\n        input.setAttribute('list', datalist.id);\n    }\n}\nexport function assignInputId(input) {\n    if (!input.id.length) {\n        input.id = createId();\n    }\n}\nexport const layoutGroupToControlMapper = {\n    'horizontal-inline': 'horizontal',\n    'vertical-inline': 'vertical',\n    horizontal: 'horizontal',\n    vertical: 'vertical',\n    compact: 'compact',\n};\nexport function getStatusIcon(status) {\n    return html `${status !== 'neutral'\n        ? html ` <cds-button-action readonly class=\"status\" cds-layout=\"align:shrink\">\n        <cds-icon\n          status=\"${status === 'error' ? 'danger' : 'success'}\"\n          shape=\"${status === 'error' ? 'exclamation-circle' : 'check-circle'}\"\n          size=\"16\"\n          inner-offset=${4}\n        ></cds-icon>\n      </cds-button-action>`\n        : ''} `;\n}\nexport async function getLargestPrimaryLabelWidth(controls) {\n    return Promise.all(controls.map(c => c.updateComplete)).then(() => {\n        const primaryLabels = controls.filter(c => c.controlLabel?.action === 'primary');\n        return pxToRem(Math.max(...primaryLabels.map(c => c.controlLabel.getBoundingClientRect().width)));\n    });\n}\nexport function controlIsWrapped(input, label, layout) {\n    return (layout !== 'vertical' &&\n        layout !== 'vertical-inline' &&\n        input.getBoundingClientRect().top > label?.getBoundingClientRect().top + 12 // 12px buffer for rounding and inputs that are thin like the range input\n    );\n}\nexport function inlineControlListIsWrapped(inlineControls, layout) {\n    const first = inlineControls[0];\n    const last = inlineControls[inlineControls.length - 1];\n    const isInlineLayout = layout === 'vertical-inline' || layout === 'horizontal-inline';\n    return isInlineLayout && last.getBoundingClientRect().top > first.getBoundingClientRect().top;\n}\nexport function isVerticalLayout(layout) {\n    return layout === 'vertical' || layout === 'vertical-inline';\n}\n/**\n * Returns updated message status unless hidden then returns 'neutral'\n */\nexport async function getCurrentMessageStatus(messages) {\n    const message = messages.find(m => m.status !== 'neutral');\n    await message?.updateComplete;\n    return message && !message.hidden ? message.status : 'neutral';\n}\n"],"names":["formLayouts","defaultFormLayout","defaultControlWidth","associateInputAndLabel","input","label","assignInputId","setAttribute","id","associateInputToDatalist","datalist","length","createId","layoutGroupToControlMapper","horizontal","vertical","compact","getStatusIcon","status","html","async","getLargestPrimaryLabelWidth","controls","Promise","all","map","c","updateComplete","then","primaryLabels","filter","controlLabel","action","pxToRem","Math","max","getBoundingClientRect","width","controlIsWrapped","layout","top","inlineControlListIsWrapped","inlineControls","first","last","isVerticalLayout","getCurrentMessageStatus","messages","message","find","m","hidden"],"mappings":"sFAOY,MAACA,EAAc,CAAC,WAAY,kBAAmB,aAAc,oBAAqB,WACjFC,EAAoB,aACpBC,EAAsB,UAC5B,SAASC,EAAuBC,EAAOC,GACtCD,GAASC,IACTC,EAAcF,GACdC,EAAME,aAAa,MAAOH,EAAMI,KAGjC,SAASC,EAAyBL,EAAOM,GACxCA,IACAJ,EAAcF,GACdM,EAASF,GAAQJ,EAAMI,GAAT,YACdJ,EAAMG,aAAa,OAAQG,EAASF,KAGrC,SAASF,EAAcF,GACrBA,EAAMI,GAAGG,SACVP,EAAMI,GAAKI,KAGP,MAACC,EAA6B,CACtC,oBAAqB,aACrB,kBAAmB,WACnBC,WAAY,aACZC,SAAU,WACVC,QAAS,WAEN,SAASC,EAAcC,GAC1B,OAAOC,CAAK,GAAc,YAAXD,EACTC,CAAK,qGAEgB,UAAXD,EAAqB,SAAW,qBACtB,UAAXA,EAAqB,qBAAuB,2CAEtC,qCAGf,KAEHE,eAAeC,EAA4BC,GAC9C,OAAOC,QAAQC,IAAIF,EAASG,KAAIC,GAAKA,EAAEC,kBAAiBC,MAAK,KACzD,MAAMC,EAAgBP,EAASQ,QAAOJ,GAAgC,YAA3BA,EAAEK,cAAcC,SAC3D,OAAOC,EAAQC,KAAKC,OAAON,EAAcJ,KAAIC,GAAKA,EAAEK,aAAaK,wBAAwBC,aAG1F,SAASC,EAAiBlC,EAAOC,EAAOkC,GAC3C,MAAmB,aAAXA,GACO,oBAAXA,GACAnC,EAAMgC,wBAAwBI,IAAMnC,GAAO+B,wBAAwBI,IAAM,GAG1E,SAASC,EAA2BC,EAAgBH,GACvD,MAAMI,EAAQD,EAAe,GACvBE,EAAOF,EAAeA,EAAe/B,OAAS,GAEpD,OADkC,oBAAX4B,GAA2C,sBAAXA,IAC9BK,EAAKR,wBAAwBI,IAAMG,EAAMP,wBAAwBI,IAEvF,SAASK,EAAiBN,GAC7B,MAAkB,aAAXA,GAAoC,oBAAXA,EAK7BnB,eAAe0B,EAAwBC,GAC1C,MAAMC,EAAUD,EAASE,MAAKC,GAAkB,YAAbA,EAAEhC,SAErC,aADM8B,GAASrB,gBACRqB,IAAYA,EAAQG,OAASH,EAAQ9B,OAAS"}

package/forms/utils/validate.js.map

@@ -1 +1 @@
-{"version":3,"file":"validate.js","sources":["../../../../src/forms/utils/validate.ts"],"sourcesContent":null,"names":["syncHTML5Validation","control","messages","filter","m","hasAttribute","forEach","setAttribute","status","inputControl","addEventListener","checkValidity","message","find","validity","error","removeAttribute","valid"],"mappings":"AAKO,SAASA,EAAoBC,EAASC,GACzCA,EACKC,QAAOC,GAAKA,EAAEC,aAAa,WAC3BC,SAAQF,IACTA,EAAEG,aAAa,SAAU,IACzBH,EAAEI,OAAS,WAEfP,EAAQQ,aAAaC,iBAAiB,QAAQ,IAAMT,EAAQQ,aAAaE,kBACzEV,EAAQQ,aAAaC,iBAAiB,WAAW,KAC7CR,EAASI,SAAQM,GAAWA,EAAQL,aAAa,SAAU,MAC3DL,EAASW,MAAKD,GAAWX,EAAQQ,aAAaK,SAASF,EAAQG,UAASC,gBAAgB,UACxFf,EAAQO,OAAS,WAErBP,EAAQQ,aAAaC,iBAAiB,SAAS,KAC3CT,EAAQO,OAASP,EAAQQ,aAAaK,SAASG,MAAQ,UAAYhB,EAAQO,OAC3EN,EACKC,QAAOC,GAAKH,EAAQQ,aAAaK,SAASG,OAASb,EAAEW,QAAUd,EAAQQ,aAAaK,SAASV,EAAEW,SAC/FT,SAAQM,GAAWA,EAAQL,aAAa,SAAU"}
+{"version":3,"file":"validate.js","sources":["../../../../src/forms/utils/validate.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nexport function syncHTML5Validation(control, messages) {\n    messages\n        .filter(m => m.hasAttribute('error'))\n        .forEach(m => {\n        m.setAttribute('hidden', '');\n        m.status = 'error';\n    });\n    control.inputControl.addEventListener('blur', () => control.inputControl.checkValidity());\n    control.inputControl.addEventListener('invalid', () => {\n        messages.forEach(message => message.setAttribute('hidden', ''));\n        messages.find(message => control.inputControl.validity[message.error])?.removeAttribute('hidden');\n        control.status = 'error';\n    });\n    control.inputControl.addEventListener('input', () => {\n        control.status = control.inputControl.validity.valid ? 'neutral' : control.status;\n        messages\n            .filter(m => control.inputControl.validity.valid && m.error && !control.inputControl.validity[m.error])\n            .forEach(message => message.setAttribute('hidden', ''));\n    });\n}\n"],"names":["syncHTML5Validation","control","messages","filter","m","hasAttribute","forEach","setAttribute","status","inputControl","addEventListener","checkValidity","message","find","validity","error","removeAttribute","valid"],"mappings":"AAKO,SAASA,EAAoBC,EAASC,GACzCA,EACKC,QAAOC,GAAKA,EAAEC,aAAa,WAC3BC,SAAQF,IACTA,EAAEG,aAAa,SAAU,IACzBH,EAAEI,OAAS,WAEfP,EAAQQ,aAAaC,iBAAiB,QAAQ,IAAMT,EAAQQ,aAAaE,kBACzEV,EAAQQ,aAAaC,iBAAiB,WAAW,KAC7CR,EAASI,SAAQM,GAAWA,EAAQL,aAAa,SAAU,MAC3DL,EAASW,MAAKD,GAAWX,EAAQQ,aAAaK,SAASF,EAAQG,UAASC,gBAAgB,UACxFf,EAAQO,OAAS,WAErBP,EAAQQ,aAAaC,iBAAiB,SAAS,KAC3CT,EAAQO,OAASP,EAAQQ,aAAaK,SAASG,MAAQ,UAAYhB,EAAQO,OAC3EN,EACKC,QAAOC,GAAKH,EAAQQ,aAAaK,SAASG,OAASb,EAAEW,QAAUd,EAAQQ,aAAaK,SAASV,EAAEW,SAC/FT,SAAQM,GAAWA,EAAQL,aAAa,SAAU"}