@cds/core 6.2.0 → 6.2.2

package/custom-elements.json

@@ -5088,6 +5088,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -5780,6 +5789,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -6419,6 +6437,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -7812,6 +7839,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -9119,6 +9155,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -9760,6 +9805,11 @@
               "name": "setupHTML5Validation",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -36100,6 +36150,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -48941,15 +49000,6 @@
               "privacy": "protected",
               "default": "false"
             },
-            {
-              "kind": "field",
-              "name": "modalFooterTemplate",
-              "type": {
-                "text": "TemplateResult"
-              },
-              "privacy": "private",
-              "readonly": true
-            },
             {
               "kind": "field",
               "name": "observers",
@@ -51417,6 +51467,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -52910,6 +52969,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -53602,6 +53670,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -54279,6 +54356,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -54968,6 +55054,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -55694,6 +55789,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -56487,6 +56591,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -58302,6 +58415,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -58973,6 +59095,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -60150,6 +60281,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",

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

@@ -98,6 +98,7 @@ export declare class CdsControl extends LitElement {
     private setupDescribedByUpdates;
     private setupHostAttributes;
     private setupHTML5Validation;
+    private setupPositioningListeners;
     private setActionOffsetPadding;
     /** @private */
     get layoutStable(): boolean;

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,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="
+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,elementVisible as u,childrenUpdateComplete as d,pxToRem as h,calculateOptimalLayout as c,property as y,state as f,querySlot as g,querySlotAll as b,event as m,responsive as v}from"@cds/core/internal";import L from"./control.element.scss.js";import{syncHTML5Validation as x}from"../utils/validate.js";import{defaultControlWidth as C,defaultFormLayout as A,getStatusIcon as T,associateInputAndLabel as $,associateInputToDatalist as S,getCurrentMessageStatus as I,controlIsWrapped as P,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=C,this.validate=!1,this.responsive=!0,this._layout=A,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",""):A,this.requestUpdate("layout",e)}get isRTL(){return"rtl"===o(this)}static get styles(){return[a,L]}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?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};
+          ${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?T(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.setupPositioningListeners(),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(){$(this.inputControl,this.label)}associateInputToDatalist(){S(this.inputControl,this.datalistControl)}setupDescribedByUpdates(){this.messageSlot?.addEventListener("slotchange",(async()=>{n(this.inputControl,Array.from(this.messages)),I(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))}setupPositioningListeners(){this.setActionOffsetPadding(),this.observers.push(u(this.inputControl,(()=>this.setActionOffsetPadding())))}async setActionOffsetPadding(){const t=this.prefixAction?.updateComplete,e=this.suffixAction?.updateComplete;if(await t||Promise.resolve(!0),await e||Promise.resolve(!0),await d(this.controlActions),!this.isGenericControl&&this.supportsPrefixSuffixActions&&this.hasControlActions){const t=h(this.prefixAction.getBoundingClientRect().width+6),e=h(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||!P(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",(()=>{c(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([y({type:String})],D.prototype,"status",void 0),t([y({type:String})],D.prototype,"controlWidth",void 0),t([y({type:Boolean})],D.prototype,"validate",void 0),t([y({type:Boolean})],D.prototype,"responsive",void 0),t([y({type:String})],D.prototype,"layout",null),t([f({type:Boolean,reflect:!0})],D.prototype,"focused",void 0),t([f({type:Boolean,reflect:!0})],D.prototype,"disabled",void 0),t([f({type:Boolean,reflect:!0})],D.prototype,"readonly",void 0),t([f()],D.prototype,"fixedControlWidth",void 0),t([f()],D.prototype,"supportsPrefixSuffixActions",void 0),t([f()],D.prototype,"isRTL",null),t([f()],D.prototype,"labelLayout",void 0),t([g("input, select, textarea, [cds-control]",{required:"error",requiredMessage:"input element is missing",assign:"input"})],D.prototype,"inputControl",void 0),t([g("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([g("datalist",{assign:"datalist"})],D.prototype,"datalistControl",void 0),t([b("cds-control-message")],D.prototype,"messages",void 0),t([b("[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([m()],D.prototype,"layoutChange",void 0),D=t([v()],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":["/*\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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"}
+{"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, elementVisible, } 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.setupPositioningListeners();\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    setupPositioningListeners() {\n        this.setActionOffsetPadding();\n        // https://github.com/vmware-clarity/core/issues/182\n        this.observers.push(elementVisible(this.inputControl, () => this.setActionOffsetPadding()));\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","setupPositioningListeners","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","setActionOffsetPadding","elementVisible","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/internal/utils/global.js

@@ -1,2 +1,2 @@
-import{isBrowser as e}from"./environment.js";import{getAngularVersion as n,getAngularJSVersion as o,getReactVersion as t,getVueVersion as i}from"./framework.js";import{browserFeatures as s}from"./supports.js";import{LogService as r}from"../services/log.service.js";function w(){e()&&(window.CDS=window.CDS||{_version:[],_react:{version:void 0},_supports:s.supports,_isStateProxied:!1,_state:{focusTrapItems:[],layerElements:[],i18nRegistry:{},elementRegistry:{},iconRegistry:{},motionRegistry:{}},environment:{production:!1},getDetails:a,logDetails:d},function(){const e="6.2.0";window.CDS._version.indexOf(e)<0&&(window.CDS._version.push(e),document.querySelector("body")?.setAttribute("cds-version",window.CDS._version.join(" "))),window.CDS._version.length>1&&r.warn("Running more than one version of Clarity can cause unexpected issues. Please ensure only one version is loaded.")}(),window.CDS._isStateProxied||(window.CDS._isStateProxied=!0,window.CDS._state=new Proxy(window.CDS._state,{set:(e,n,o)=>{const t={key:n,prev:window.CDS._state[n],current:o};return e[n]=o,document.dispatchEvent(new CustomEvent("CDS_STATE_UPDATE",{detail:t})),!0}})))}function a(){return{versions:window.CDS._version,environment:window.CDS.environment,userAgent:navigator.userAgent,supports:window.CDS._supports,angularVersion:n(!1),angularJSVersion:o(!1),reactVersion:t(!1),vueVersion:i(!1),state:{...window.CDS._state,iconRegistry:Object.keys(window.CDS._state.iconRegistry),motionRegistry:Object.keys(window.CDS._state.motionRegistry),focusTrapRegistry:Object.keys(window.CDS._state.focusTrapItems.map((e=>e.focusTrapId)))}}}function d(){r.log(JSON.stringify(a(),null,2))}export{w as setupCDSGlobal};
+import{isBrowser as e}from"./environment.js";import{getAngularVersion as n,getAngularJSVersion as o,getReactVersion as t,getVueVersion as i}from"./framework.js";import{browserFeatures as s}from"./supports.js";import{LogService as r}from"../services/log.service.js";function w(){e()&&(window.CDS=window.CDS||{_version:[],_react:{version:void 0},_supports:s.supports,_isStateProxied:!1,_state:{focusTrapItems:[],layerElements:[],i18nRegistry:{},elementRegistry:{},iconRegistry:{},motionRegistry:{}},environment:{production:!1},getDetails:a,logDetails:d},function(){const e="6.2.2";window.CDS._version.indexOf(e)<0&&(window.CDS._version.push(e),document.querySelector("body")?.setAttribute("cds-version",window.CDS._version.join(" "))),window.CDS._version.length>1&&r.warn("Running more than one version of Clarity can cause unexpected issues. Please ensure only one version is loaded.")}(),window.CDS._isStateProxied||(window.CDS._isStateProxied=!0,window.CDS._state=new Proxy(window.CDS._state,{set:(e,n,o)=>{const t={key:n,prev:window.CDS._state[n],current:o};return e[n]=o,document.dispatchEvent(new CustomEvent("CDS_STATE_UPDATE",{detail:t})),!0}})))}function a(){return{versions:window.CDS._version,environment:window.CDS.environment,userAgent:navigator.userAgent,supports:window.CDS._supports,angularVersion:n(!1),angularJSVersion:o(!1),reactVersion:t(!1),vueVersion:i(!1),state:{...window.CDS._state,iconRegistry:Object.keys(window.CDS._state.iconRegistry),motionRegistry:Object.keys(window.CDS._state.motionRegistry),focusTrapRegistry:Object.keys(window.CDS._state.focusTrapItems.map((e=>e.focusTrapId)))}}}function d(){r.log(JSON.stringify(a(),null,2))}export{w as setupCDSGlobal};
 //# sourceMappingURL=global.js.map

package/modal/modal.element.d.ts

@@ -1,4 +1,3 @@
-import { TemplateResult } from 'lit';
 import { CdsInternalOverlay } from '@cds/core/internal-components/overlay';
 import { CdsModalHeader } from './modal-header.element';
 import { CdsModalActions } from './modal-actions.element';
@@ -58,9 +57,8 @@ export declare class CdsModal extends CdsInternalOverlay {
     modalHeader: CdsModalHeader;
     modalFooter: CdsModalActions;
     protected isScrollable: boolean;
-    private get modalFooterTemplate();
     protected observers: (MutationObserver | ResizeObserver)[];
-    render(): TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private setScrollableProperties;

package/modal/modal.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{html as e}from"lit";import{query as o}from"lit/decorators/query.js";import{I18nService as s,getElementUpdates as l,isScrollable as a,i18n as i,property as r,querySlot as d,animate as n,reverseAnimation as c,AnimationModalEnterName as m}from"@cds/core/internal";import{CdsInternalOverlay as p}from"@cds/core/internal-components/overlay";import h from"./modal.element.scss.js";let v=class extends p{constructor(){super(...arguments);this.i18n=s.keys.modal,this.closable=!0,this.isScrollable=!1,this.observers=[]}get customBumpers(){return[this.modalHeader,this.modalFooter]}static get styles(){return[...super.styles,h]}get modalFooterTemplate(){return this.modalFooter?e`<div cds-layout="align-stretch p-x:lg"><slot name="modal-actions"></slot></div>`:e``}render(){return e`${this.backdropTemplate}<div class="modal-dialog private-host" tabindex="-1" cds-layout="m:md m@md:xl"><div cds-layout="display:screen-reader-only">${this.i18n.contentStart}</div><div class="modal-content" cds-layout="vertical gap:sm gap@md:lg align:stretch p-y:lg"><div cds-layout="horizontal gap:sm wrap:none align:vertical-center p-x:lg"><div><slot name="modal-header"></slot></div><div cds-layout="align:right"><slot name="modal-header-actions"></slot></div>${this.closable?this.closeButtonTemplate:""}</div><div class="modal-body" cds-layout="p-x:lg"><slot></slot></div>${this.modalFooterTemplate}</div><div cds-layout="display:screen-reader-only">${this.i18n.contentEnd}</div></div>`}connectedCallback(){super.connectedCallback(),this.observers.push(l(this,"hidden",(()=>this.setScrollableProperties())))}disconnectedCallback(){super.disconnectedCallback(),this.observers.forEach((t=>t?.disconnect()))}async setScrollableProperties(){const t=this.content;!1===this.hidden&&null!==t&&(await this.updateComplete,this.isScrollable=a(t),t.tabIndex=this.isScrollable?0:-1,t.ariaLabel=this.isScrollable?this.i18n.contentBox:null)}};t([i()],v.prototype,"i18n",void 0),t([r({type:Boolean})],v.prototype,"closable",void 0),t([r({type:String})],v.prototype,"size",void 0),t([o(".modal-body")],v.prototype,"content",void 0),t([d("cds-modal-header")],v.prototype,"modalHeader",void 0),t([d("cds-modal-actions")],v.prototype,"modalFooter",void 0),v=t([n({hidden:{true:c(m),false:m}})],v);export{v as CdsModal};
+import{__decorate as t}from"tslib";import{html as e}from"lit";import{query as o}from"lit/decorators/query.js";import{I18nService as s,getElementUpdates as l,isScrollable as i,i18n as a,property as d,querySlot as r,animate as n,reverseAnimation as c,AnimationModalEnterName as p}from"@cds/core/internal";import{CdsInternalOverlay as m}from"@cds/core/internal-components/overlay";import h from"./modal.element.scss.js";let v=class extends m{constructor(){super(...arguments);this.i18n=s.keys.modal,this.closable=!0,this.isScrollable=!1,this.observers=[]}get customBumpers(){return[this.modalHeader,this.modalFooter]}static get styles(){return[...super.styles,h]}render(){return e`${this.backdropTemplate}<div class="modal-dialog private-host" tabindex="-1" cds-layout="m:md m@md:xl"><div cds-layout="display:screen-reader-only">${this.i18n.contentStart}</div><div class="modal-content" cds-layout="vertical gap:sm gap@md:lg align:stretch p-y:lg"><div cds-layout="horizontal gap:sm wrap:none align:vertical-center p-x:lg"><div><slot name="modal-header"></slot></div><div cds-layout="align:right"><slot name="modal-header-actions"></slot></div>${this.closable?this.closeButtonTemplate:""}</div><div class="modal-body" cds-layout="p-x:lg"><slot></slot></div><div cds-layout="align-stretch p-x:lg" ?hidden="${!this.modalFooter}"><slot name="modal-actions" @slotchange="${()=>this.requestUpdate()}"></slot></div></div><div cds-layout="display:screen-reader-only">${this.i18n.contentEnd}</div></div>`}connectedCallback(){super.connectedCallback(),this.observers.push(l(this,"hidden",(()=>this.setScrollableProperties())))}disconnectedCallback(){super.disconnectedCallback(),this.observers.forEach((t=>t?.disconnect()))}async setScrollableProperties(){const t=this.content;!1===this.hidden&&null!==t&&(await this.updateComplete,this.isScrollable=i(t),t.tabIndex=this.isScrollable?0:-1,t.ariaLabel=this.isScrollable?this.i18n.contentBox:null)}};t([a()],v.prototype,"i18n",void 0),t([d({type:Boolean})],v.prototype,"closable",void 0),t([d({type:String})],v.prototype,"size",void 0),t([o(".modal-body")],v.prototype,"content",void 0),t([r("cds-modal-header")],v.prototype,"modalHeader",void 0),t([r("cds-modal-actions")],v.prototype,"modalFooter",void 0),v=t([n({hidden:{true:c(p),false:p}})],v);export{v as CdsModal};
 //# sourceMappingURL=modal.element.js.map

package/modal/modal.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.element.js","sources":["../../../src/modal/modal.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 { query } from 'lit/decorators/query.js';\nimport { animate, AnimationModalEnterName, i18n, I18nService, isScrollable, property, reverseAnimation, querySlot, getElementUpdates, } from '@cds/core/internal';\nimport { CdsInternalOverlay } from '@cds/core/internal-components/overlay';\nimport styles from './modal.element.scss';\n/**\n * Web component modal.\n *\n * ```typescript\n * import '@cds/core/modal/register.js';\n * ```\n *\n * ```html\n * <cds-modal>\n *   <cds-modal-header>\n *      <h3 cds-text=\"title\">My Modal</h3>\n *   </cds-modal-header>\n *   <cds-modal-content>\n *     <p>Lorem Ipsum</p>\n *   </cds-modal-content>\n *   <cds-modal-actions>\n *       <cds-button>Ok</cds-button>\n *   </cds-modal-actions>\n * </cds-modal>\n * ```\n *\n * @element cds-modal\n * @slot\n * @slot cds-modal-content\n * @slot cds-modal-header\n * @slot cds-modal-actions\n * @event closeChange - notify when the user has clicked the close button\n * @cssprop --backdrop-background - inherited from the internal overlay component\n * @cssprop --layered-backdrop-background - inherited from the internal overlay component\n * @cssprop --border-color\n * @cssprop --border-width\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --box-shadow\n * @cssprop --width\n * @cssprop --content-overflow - set as { x, y }. take care when customizing because overflow settings can have unintended side effects.\n * @cssprop --max-height - sets hard limit on height of modal\n * @cssprop --tablet-max-height - sets hard limit on height of modal when on a tablet in landscape mode\n */\nlet CdsModal = class CdsModal extends CdsInternalOverlay {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.modal;\n        /** If false, the modal will not render the close button.  */\n        this.closable = true;\n        this.isScrollable = false;\n        this.observers = [];\n    }\n    get customBumpers() {\n        return [this.modalHeader, this.modalFooter];\n    }\n    static get styles() {\n        return [...super.styles, styles];\n    }\n    get modalFooterTemplate() {\n        if (this.modalFooter) {\n            return html `<div cds-layout=\"align-stretch p-x:lg\">\n        <slot name=\"modal-actions\"></slot>\n      </div>`;\n        }\n        else {\n            return html ``;\n        }\n    }\n    // modal-body requires a tab index so it can be scrolled\n    render() {\n        return html `\n      ${this.backdropTemplate}\n      <div class=\"modal-dialog private-host\" tabindex=\"-1\" cds-layout=\"m:md m@md:xl\">\n        <div cds-layout=\"display:screen-reader-only\">${this.i18n.contentStart}</div>\n        <div class=\"modal-content\" cds-layout=\"vertical gap:sm gap@md:lg align:stretch p-y:lg\">\n          <div cds-layout=\"horizontal gap:sm wrap:none align:vertical-center p-x:lg\">\n            <div>\n              <slot name=\"modal-header\"></slot>\n            </div>\n            <div cds-layout=\"align:right\">\n              <slot name=\"modal-header-actions\"></slot>\n            </div>\n            ${this.closable ? this.closeButtonTemplate : ''}\n          </div>\n          <div class=\"modal-body\" cds-layout=\"p-x:lg\">\n            <slot></slot>\n          </div>\n          ${this.modalFooterTemplate}\n        </div>\n        <div cds-layout=\"display:screen-reader-only\">${this.i18n.contentEnd}</div>\n      </div>\n    `;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.observers.push(getElementUpdates(this, 'hidden', () => this.setScrollableProperties()));\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        this.observers.forEach(o => o?.disconnect());\n    }\n    async setScrollableProperties() {\n        const contentElement = this.content;\n        if (this.hidden === false && contentElement !== null) {\n            await this.updateComplete; // wait until after render to measure if scrollable\n            this.isScrollable = isScrollable(contentElement);\n            contentElement.tabIndex = this.isScrollable ? 0 : -1;\n            contentElement.ariaLabel = this.isScrollable ? this.i18n.contentBox : null;\n        }\n    }\n};\n__decorate([\n    i18n()\n], CdsModal.prototype, \"i18n\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsModal.prototype, \"closable\", void 0);\n__decorate([\n    property({ type: String })\n], CdsModal.prototype, \"size\", void 0);\n__decorate([\n    query('.modal-body')\n], CdsModal.prototype, \"content\", void 0);\n__decorate([\n    querySlot('cds-modal-header')\n], CdsModal.prototype, \"modalHeader\", void 0);\n__decorate([\n    querySlot('cds-modal-actions')\n], CdsModal.prototype, \"modalFooter\", void 0);\nCdsModal = __decorate([\n    animate({\n        hidden: {\n            true: reverseAnimation(AnimationModalEnterName),\n            false: AnimationModalEnterName,\n        },\n    })\n], CdsModal);\nexport { CdsModal };\n"],"names":["CdsModal","CdsInternalOverlay","constructor","super","this","i18n","I18nService","keys","modal","closable","isScrollable","observers","customBumpers","modalHeader","modalFooter","styles","modalFooterTemplate","html","render","backdropTemplate","contentStart","closeButtonTemplate","contentEnd","connectedCallback","push","getElementUpdates","setScrollableProperties","disconnectedCallback","forEach","o","disconnect","async","contentElement","content","hidden","updateComplete","tabIndex","ariaLabel","contentBox","__decorate","prototype","property","type","Boolean","String","query","querySlot","animate","true","reverseAnimation","AnimationModalEnterName","false"],"mappings":"iaAkDG,IAACA,EAAW,cAAuBC,EAClCC,cACIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,MAE7BJ,KAAKK,UAAW,EAChBL,KAAKM,cAAe,EACpBN,KAAKO,UAAY,GAEjBC,oBACA,MAAO,CAACR,KAAKS,YAAaT,KAAKU,aAExBC,oBACP,MAAO,IAAIZ,MAAMY,OAAQA,GAEzBC,0BACA,OAAIZ,KAAKU,YACEG,CAAK,kFAKLA,CAAK,GAIpBC,SACI,OAAOD,CAAK,GACZb,KAAKe,+IAE0Cf,KAAKC,KAAKe,gTASnDhB,KAAKK,SAAWL,KAAKiB,oBAAsB,0EAK7CjB,KAAKY,yEAEsCZ,KAAKC,KAAKiB,yBAI7DC,oBACIpB,MAAMoB,oBACNnB,KAAKO,UAAUa,KAAKC,EAAkBrB,KAAM,UAAU,IAAMA,KAAKsB,6BAErEC,uBACIxB,MAAMwB,uBACNvB,KAAKO,UAAUiB,SAAQC,GAAKA,GAAGC,eAEnCC,gCACI,MAAMC,EAAiB5B,KAAK6B,SACR,IAAhB7B,KAAK8B,QAAuC,OAAnBF,UACnB5B,KAAK+B,eACX/B,KAAKM,aAAeA,EAAasB,GACjCA,EAAeI,SAAWhC,KAAKM,aAAe,GAAK,EACnDsB,EAAeK,UAAYjC,KAAKM,aAAeN,KAAKC,KAAKiC,WAAa,QAIlFC,EAAW,CACPlC,KACDL,EAASwC,UAAW,YAAQ,GAC/BD,EAAW,CACPE,EAAS,CAAEC,KAAMC,WAClB3C,EAASwC,UAAW,gBAAY,GACnCD,EAAW,CACPE,EAAS,CAAEC,KAAME,UAClB5C,EAASwC,UAAW,YAAQ,GAC/BD,EAAW,CACPM,EAAM,gBACP7C,EAASwC,UAAW,eAAW,GAClCD,EAAW,CACPO,EAAU,qBACX9C,EAASwC,UAAW,mBAAe,GACtCD,EAAW,CACPO,EAAU,sBACX9C,EAASwC,UAAW,mBAAe,GACtCxC,EAAWuC,EAAW,CAClBQ,EAAQ,CACJb,OAAQ,CACJc,KAAMC,EAAiBC,GACvBC,MAAOD,MAGhBlD"}
+{"version":3,"file":"modal.element.js","sources":["../../../src/modal/modal.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 { query } from 'lit/decorators/query.js';\nimport { animate, AnimationModalEnterName, i18n, I18nService, isScrollable, property, reverseAnimation, querySlot, getElementUpdates, } from '@cds/core/internal';\nimport { CdsInternalOverlay } from '@cds/core/internal-components/overlay';\nimport styles from './modal.element.scss';\n/**\n * Web component modal.\n *\n * ```typescript\n * import '@cds/core/modal/register.js';\n * ```\n *\n * ```html\n * <cds-modal>\n *   <cds-modal-header>\n *      <h3 cds-text=\"title\">My Modal</h3>\n *   </cds-modal-header>\n *   <cds-modal-content>\n *     <p>Lorem Ipsum</p>\n *   </cds-modal-content>\n *   <cds-modal-actions>\n *       <cds-button>Ok</cds-button>\n *   </cds-modal-actions>\n * </cds-modal>\n * ```\n *\n * @element cds-modal\n * @slot\n * @slot cds-modal-content\n * @slot cds-modal-header\n * @slot cds-modal-actions\n * @event closeChange - notify when the user has clicked the close button\n * @cssprop --backdrop-background - inherited from the internal overlay component\n * @cssprop --layered-backdrop-background - inherited from the internal overlay component\n * @cssprop --border-color\n * @cssprop --border-width\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --box-shadow\n * @cssprop --width\n * @cssprop --content-overflow - set as { x, y }. take care when customizing because overflow settings can have unintended side effects.\n * @cssprop --max-height - sets hard limit on height of modal\n * @cssprop --tablet-max-height - sets hard limit on height of modal when on a tablet in landscape mode\n */\nlet CdsModal = class CdsModal extends CdsInternalOverlay {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.modal;\n        /** If false, the modal will not render the close button.  */\n        this.closable = true;\n        this.isScrollable = false;\n        this.observers = [];\n    }\n    get customBumpers() {\n        return [this.modalHeader, this.modalFooter];\n    }\n    static get styles() {\n        return [...super.styles, styles];\n    }\n    // modal-body requires a tab index so it can be scrolled\n    render() {\n        return html `\n      ${this.backdropTemplate}\n      <div class=\"modal-dialog private-host\" tabindex=\"-1\" cds-layout=\"m:md m@md:xl\">\n        <div cds-layout=\"display:screen-reader-only\">${this.i18n.contentStart}</div>\n        <div class=\"modal-content\" cds-layout=\"vertical gap:sm gap@md:lg align:stretch p-y:lg\">\n          <div cds-layout=\"horizontal gap:sm wrap:none align:vertical-center p-x:lg\">\n            <div>\n              <slot name=\"modal-header\"></slot>\n            </div>\n            <div cds-layout=\"align:right\">\n              <slot name=\"modal-header-actions\"></slot>\n            </div>\n            ${this.closable ? this.closeButtonTemplate : ''}\n          </div>\n          <div class=\"modal-body\" cds-layout=\"p-x:lg\">\n            <slot></slot>\n          </div>\n          <div cds-layout=\"align-stretch p-x:lg\" ?hidden=${!this.modalFooter}>\n            <slot name=\"modal-actions\" @slotchange=${() => this.requestUpdate()}></slot>\n          </div>\n        </div>\n        <div cds-layout=\"display:screen-reader-only\">${this.i18n.contentEnd}</div>\n      </div>\n    `;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.observers.push(getElementUpdates(this, 'hidden', () => this.setScrollableProperties()));\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        this.observers.forEach(o => o?.disconnect());\n    }\n    async setScrollableProperties() {\n        const contentElement = this.content;\n        if (this.hidden === false && contentElement !== null) {\n            await this.updateComplete; // wait until after render to measure if scrollable\n            this.isScrollable = isScrollable(contentElement);\n            contentElement.tabIndex = this.isScrollable ? 0 : -1;\n            contentElement.ariaLabel = this.isScrollable ? this.i18n.contentBox : null;\n        }\n    }\n};\n__decorate([\n    i18n()\n], CdsModal.prototype, \"i18n\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsModal.prototype, \"closable\", void 0);\n__decorate([\n    property({ type: String })\n], CdsModal.prototype, \"size\", void 0);\n__decorate([\n    query('.modal-body')\n], CdsModal.prototype, \"content\", void 0);\n__decorate([\n    querySlot('cds-modal-header')\n], CdsModal.prototype, \"modalHeader\", void 0);\n__decorate([\n    querySlot('cds-modal-actions')\n], CdsModal.prototype, \"modalFooter\", void 0);\nCdsModal = __decorate([\n    animate({\n        hidden: {\n            true: reverseAnimation(AnimationModalEnterName),\n            false: AnimationModalEnterName,\n        },\n    })\n], CdsModal);\nexport { CdsModal };\n"],"names":["CdsModal","CdsInternalOverlay","constructor","super","this","i18n","I18nService","keys","modal","closable","isScrollable","observers","customBumpers","modalHeader","modalFooter","styles","render","html","backdropTemplate","contentStart","closeButtonTemplate","requestUpdate","contentEnd","connectedCallback","push","getElementUpdates","setScrollableProperties","disconnectedCallback","forEach","o","disconnect","async","contentElement","content","hidden","updateComplete","tabIndex","ariaLabel","contentBox","__decorate","prototype","property","type","Boolean","String","query","querySlot","animate","true","reverseAnimation","AnimationModalEnterName","false"],"mappings":"iaAkDG,IAACA,EAAW,cAAuBC,EAClCC,cACIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,MAE7BJ,KAAKK,UAAW,EAChBL,KAAKM,cAAe,EACpBN,KAAKO,UAAY,GAEjBC,oBACA,MAAO,CAACR,KAAKS,YAAaT,KAAKU,aAExBC,oBACP,MAAO,IAAIZ,MAAMY,OAAQA,GAG7BC,SACI,OAAOC,CAAK,GACZb,KAAKc,+IAE0Cd,KAAKC,KAAKc,gTASnDf,KAAKK,SAAWL,KAAKgB,oBAAsB,2HAKGhB,KAAKU,wDACZ,IAAMV,KAAKiB,oFAGTjB,KAAKC,KAAKiB,yBAI7DC,oBACIpB,MAAMoB,oBACNnB,KAAKO,UAAUa,KAAKC,EAAkBrB,KAAM,UAAU,IAAMA,KAAKsB,6BAErEC,uBACIxB,MAAMwB,uBACNvB,KAAKO,UAAUiB,SAAQC,GAAKA,GAAGC,eAEnCC,gCACI,MAAMC,EAAiB5B,KAAK6B,SACR,IAAhB7B,KAAK8B,QAAuC,OAAnBF,UACnB5B,KAAK+B,eACX/B,KAAKM,aAAeA,EAAasB,GACjCA,EAAeI,SAAWhC,KAAKM,aAAe,GAAK,EACnDsB,EAAeK,UAAYjC,KAAKM,aAAeN,KAAKC,KAAKiC,WAAa,QAIlFC,EAAW,CACPlC,KACDL,EAASwC,UAAW,YAAQ,GAC/BD,EAAW,CACPE,EAAS,CAAEC,KAAMC,WAClB3C,EAASwC,UAAW,gBAAY,GACnCD,EAAW,CACPE,EAAS,CAAEC,KAAME,UAClB5C,EAASwC,UAAW,YAAQ,GAC/BD,EAAW,CACPM,EAAM,gBACP7C,EAASwC,UAAW,eAAW,GAClCD,EAAW,CACPO,EAAU,qBACX9C,EAASwC,UAAW,mBAAe,GACtCD,EAAW,CACPO,EAAU,sBACX9C,EAASwC,UAAW,mBAAe,GACtCxC,EAAWuC,EAAW,CAClBQ,EAAQ,CACJb,OAAQ,CACJc,KAAMC,EAAiBC,GACvBC,MAAOD,MAGhBlD"}

package/package.json

@@ -256,5 +256,5 @@
     "./tokens/tokens.ios.swift": "./tokens/tokens.ios.swift",
     "./tokens/tokens.android.xml": "./tokens/tokens.android.xml"
   },
-  "version": "6.2.0"
+  "version": "6.2.2"
 }