@cds/core 5.2.1 → 5.4.1

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

@@ -1,65 +1,2 @@
-/*
- * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit-element';
-import { baseStyles, property, assignSlotNames, internalProperty } from '@cds/core/internal';
-import { styles } from './control-message.element.css.js';
-/**
- * Control Message
- *
- * ```typescript
- * import '@cds/core/forms/register.js';
- * ```
- *
- * ```html
- * <cds-control>
- *   <label>Test</label>
- *   <input type="text" />
- *   <cds-control-message>helper text</cds-control-message>
- * </cds-control>
- * ```
- *
- * @element cds-control-message
- * @slot - For projecting helper message text
- * @cssprop --color
- * @cssprop --font-size
- * @cssprop --font-weight
- */
-export class CdsControlMessage extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * @type {neutral | error | success}
-         * Set the status of form control message validation
-         */
-        this.status = 'neutral';
-        this.disabled = false;
-    }
-    render() {
-        return html `
-      <div class="private-host">
-        <slot></slot>
-      </div>
-    `;
-    }
-    static get styles() {
-        return [baseStyles, styles];
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        assignSlotNames([this, 'message']);
-    }
-}
-__decorate([
-    property({ type: String })
-], CdsControlMessage.prototype, "status", void 0);
-__decorate([
-    property({ type: String })
-], CdsControlMessage.prototype, "error", void 0);
-__decorate([
-    internalProperty({ type: Boolean, reflect: true })
-], CdsControlMessage.prototype, "disabled", void 0);
-//# sourceMappingURL=control-message.element.js.map
+import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{baseStyles as s,assignSlotNames as o,property as i,state as l}from"@cds/core/internal";import a from"./control-message.element.scss.js";class n extends e{constructor(){super(...arguments),this.status="neutral",this.disabled=!1}render(){return r`<div class="private-host"><slot></slot></div>`}static get styles(){return[s,a]}connectedCallback(){super.connectedCallback(),o([this,"message"])}}t([i({type:String})],n.prototype,"status",void 0),t([i({type:String})],n.prototype,"error",void 0),t([l({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0);export{n as CdsControlMessage};
+//# sourceMappingURL=control-message.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"control-message.element.js","sourceRoot":"","sources":["../../../../src/forms/control-message/control-message.element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE7F,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAG1D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,OAAO,iBAAkB,SAAQ,UAAU;IAAjD;;QACE;;;WAGG;QACyB,WAAM,GAAkB,SAAS,CAAC;QAQA,aAAQ,GAAG,KAAK,CAAC;IAkBjF,CAAC;IAhBC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IAC9B,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,eAAe,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IACrC,CAAC;CACF;AA1B6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAmC;AAMlC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAyB;AAEA;IAAnD,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAA4B","sourcesContent":["/*\n * Copyright (c) 2016-2020 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 */\n\nimport { html, LitElement } from 'lit-element';\nimport { baseStyles, property, assignSlotNames, internalProperty } from '@cds/core/internal';\nimport { ControlStatus } from '../utils/interfaces.js';\nimport { styles } from './control-message.element.css.js';\nimport { ValidityStateKey } from '../utils/validate.js';\n\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 */\nexport class CdsControlMessage extends LitElement {\n  /**\n   * @type {neutral | error | success}\n   * Set the status of form control message validation\n   */\n  @property({ type: String }) status: ControlStatus = 'neutral';\n\n  /**\n   * Defines the HTML5 ValidityState message of given control\n   * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n   */\n  @property({ type: String }) error: ValidityStateKey;\n\n  @internalProperty({ type: Boolean, reflect: true }) protected disabled = false;\n\n  render() {\n    return html`\n      <div class=\"private-host\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static get styles() {\n    return [baseStyles, styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    assignSlotNames([this, 'message']);\n  }\n}\n"]}
+{"version":3,"file":"control-message.element.js","sources":["../../../../src/forms/control-message/control-message.element.ts"],"sourcesContent":null,"names":["CdsControlMessage","LitElement","[object Object]","super","arguments","this","status","disabled","html","styles","baseStyles","connectedCallback","assignSlotNames","__decorate","property","type","String","prototype","state","Boolean","reflect"],"mappings":"6NA8BO,MAAMA,UAA0BC,EACnCC,cACIC,SAASC,WAKTC,KAAKC,OAAS,UACdD,KAAKE,UAAW,EAEpBL,SACI,OAAOM,CAAK,gDAMhBC,oBACI,MAAO,CAACC,EAAYD,GAExBP,oBACIC,MAAMQ,oBACNC,EAAgB,CAACP,KAAM,aAG/BQ,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

@@ -0,0 +1,2 @@
+import{css as o}from"lit";var a=o`:host{--color:var(--cds-global-typography-color-300, var(--cds-global-color-construction-800, #2d4048));--font-size:var(--cds-global-typography-font-size-1, calc((11 / var(--cds-global-base, 20)) * 1rem));--font-weight:var(--cds-global-typography-font-weight-regular, 400)}.private-host{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:1em}.private-host::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((.1475em + 0em)*-1) + .037em)}.private-host::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - .1475em - .1703em - .517em) + 0em)*-1) - .044em)}:host([status=error]){--color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=success]){--color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_disabled]){--color:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}::slotted(cds-control-action){margin-bottom:calc(-1*var(--cds-global-space-5,calc((8 / var(--cds-global-base,20)) * 1rem)))}`;export default a;
+//# sourceMappingURL=control-message.element.scss.js.map

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

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

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 import { FormLayout, ControlWidth } from '../utils/interfaces.js';
 /**
  * Form
@@ -23,6 +23,7 @@ import { FormLayout, ControlWidth } from '../utils/interfaces.js';
  *
  * @element cds-form-group
  * @slot - For projecting input controls
+ * @cssprop --label-width
  */
 export declare class CdsFormGroup extends LitElement {
     /**
@@ -48,12 +49,14 @@ export declare class CdsFormGroup extends LitElement {
     validate: boolean;
     private controls;
     private groups;
+    protected observers: (MutationObserver | ResizeObserver)[];
     private get controlsAndGroups();
-    static get styles(): import("lit-element").CSSResult[];
-    render(): import("lit-element").TemplateResult;
+    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;
+    disconnectedCallback(): void;
     private setControlLabelWidths;
     private syncLayouts;
     private collapseForm;

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

@@ -1,123 +1,2 @@
-/*
- * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-import { __decorate } from "tslib";
-import { LitElement, html } from 'lit-element';
-import { baseStyles, querySlotAll, property, childrenUpdateComplete, elementResize, pxToRem, syncDefinedProps, } from '@cds/core/internal';
-import { getLargestPrimaryLabelWidth, isVerticalLayout, defaultFormLayout } from '../utils/index.js';
-import { styles } from './form-group.element.css.js';
-/**
- * Form
- *
- * ```typescript
- * import '@cds/core/forms/register.js';
- * ```
- *
- * ```html
- * <cds-form-group layout="horizontal">
- *   <cds-input>
- *     <label>Test</label>
- *     <input type="text" />
- *   </cds-input>
- *
- *   <cds-input>
- *     <label>Test</label>
- *     <input type="text" />
- *   </cds-input>
- * </cds-form-group>
- * ```
- *
- * @element cds-form-group
- * @slot - For projecting input controls
- */
-export class CdsFormGroup extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * @type {horizontal | horizontal-inline | vertical | vertical-inline | compact}
-         * Set to adjust the default control layout for all controls within form group.
-         * When `responsive` is true this will be the largest size to scale to.
-         */
-        this.layout = defaultFormLayout;
-        /**
-         * By default forms will collapse to layout that prevents overflow.
-         * If disabled control layout may break or overflow in unexpected ways.
-         */
-        this.responsive = true;
-        /**
-         * Set the validate attribute to sync with HTML5 native validation
-         * https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
-         */
-        this.validate = false;
-    }
-    get controlsAndGroups() {
-        return [...Array.from(this.groups), ...Array.from(this.controls)];
-    }
-    static get styles() {
-        return [baseStyles, styles];
-    }
-    render() {
-        return html `
-      <div class="private-host" cds-layout="vertical gap:${this.layout === 'compact' ? 'md' : 'lg'}">
-        <slot></slot>
-      </div>
-    `;
-    }
-    firstUpdated(props) {
-        super.firstUpdated(props);
-        this.syncLayouts();
-        this.setControlLabelWidths();
-    }
-    updated(props) {
-        super.updated(props);
-        syncDefinedProps(props, this, this.controlsAndGroups);
-    }
-    async setControlLabelWidths() {
-        await childrenUpdateComplete(this.controlsAndGroups);
-        this.style.setProperty('--internal-label-min-width', await getLargestPrimaryLabelWidth(this.controlsAndGroups));
-        elementResize(this, () => this.style.setProperty('--internal-label-max-width', pxToRem(this.getBoundingClientRect().width)));
-    }
-    syncLayouts() {
-        this.addEventListener('layoutChange', (e) => {
-            e.preventDefault();
-            if (!this.overflowElement && isVerticalLayout(e.detail)) {
-                this.collapseForm(e.target);
-            }
-            if (e.target === this.overflowElement && !isVerticalLayout(e.detail)) {
-                this.expandForm(e.detail);
-            }
-        });
-    }
-    collapseForm(control) {
-        this.overflowElement = control;
-        this.responsive = false;
-        this.layout = 'vertical';
-        control.updateComplete.then(() => (control.responsive = true));
-    }
-    expandForm(layout) {
-        this.responsive = true;
-        this.overflowElement = null;
-        this.layout = layout;
-    }
-}
-__decorate([
-    property({ type: String })
-], CdsFormGroup.prototype, "layout", void 0);
-__decorate([
-    property({ type: String })
-], CdsFormGroup.prototype, "controlWidth", void 0);
-__decorate([
-    property({ type: Boolean })
-], CdsFormGroup.prototype, "responsive", void 0);
-__decorate([
-    property({ type: Boolean })
-], CdsFormGroup.prototype, "validate", void 0);
-__decorate([
-    querySlotAll('[cds-control]')
-], CdsFormGroup.prototype, "controls", void 0);
-__decorate([
-    querySlotAll('[cds-control-group]')
-], CdsFormGroup.prototype, "groups", void 0);
-//# sourceMappingURL=form-group.element.js.map
+import{__decorate as t}from"tslib";import{LitElement as o,html as e}from"lit";import{baseStyles as s,elementVisible as r,syncDefinedProps as i,childrenUpdateComplete as l,elementResize as n,pxToRem as a,property as p,querySlotAll as d}from"@cds/core/internal";import{defaultFormLayout as h,getLargestPrimaryLabelWidth as c,isVerticalLayout as u}from"../utils/index.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[s,y]}render(){return e`<div class="private-host" cds-layout="vertical gap:${"compact"===this.layout?"md":"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)),n(this,(()=>this.style.setProperty("--internal-label-max-width",a(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","sourceRoot":"","sources":["../../../../src/forms/form-group/form-group.element.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright (c) 2016-2020 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 */\n\nimport { LitElement, html } from 'lit-element';\nimport {\n  baseStyles,\n  querySlotAll,\n  property,\n  childrenUpdateComplete,\n  elementResize,\n  pxToRem,\n  syncDefinedProps,\n} from '@cds/core/internal';\nimport { CdsInternalControlGroup } from '../control-group/control-group.element.js';\nimport { CdsInternalControlInline } from '../control-inline/control-inline.element.js';\nimport { CdsControl } from '../control/control.element.js';\nimport { FormLayout, ControlWidth } from '../utils/interfaces.js';\nimport { getLargestPrimaryLabelWidth, isVerticalLayout, defaultFormLayout } from '../utils/index.js';\nimport { styles } from './form-group.element.css.js';\n\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 */\nexport class CdsFormGroup extends LitElement {\n  /**\n   * @type {horizontal | horizontal-inline | vertical | vertical-inline | compact}\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   */\n  @property({ type: String }) layout: FormLayout = defaultFormLayout;\n\n  /**\n   * @type {stretch | shrink}\n   * Adjust the control from the default full width or the browser default width\n   */\n  @property({ type: String }) controlWidth: ControlWidth; // no default given so child controls are not overridden unless explicity set by parent form group\n\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  @property({ type: Boolean }) responsive = true;\n\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  @property({ type: Boolean }) validate = false;\n\n  @querySlotAll('[cds-control]') private controls: NodeListOf<CdsControl | CdsInternalControlInline>;\n\n  @querySlotAll('[cds-control-group]') private groups: NodeListOf<CdsInternalControlGroup>;\n\n  private get controlsAndGroups() {\n    return [...Array.from(this.groups), ...Array.from(this.controls)];\n  }\n\n  static get styles() {\n    return [baseStyles, styles];\n  }\n\n  render() {\n    return html`\n      <div class=\"private-host\" cds-layout=\"vertical gap:${this.layout === 'compact' ? 'md' : 'lg'}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  private overflowElement: CdsControl | null;\n\n  firstUpdated(props: Map<string, any>) {\n    super.firstUpdated(props);\n    this.syncLayouts();\n    this.setControlLabelWidths();\n  }\n\n  updated(props: Map<string, any>) {\n    super.updated(props);\n    syncDefinedProps(props, this, this.controlsAndGroups);\n  }\n\n  private async setControlLabelWidths() {\n    await childrenUpdateComplete(this.controlsAndGroups);\n    this.style.setProperty('--internal-label-min-width', await getLargestPrimaryLabelWidth(this.controlsAndGroups));\n    elementResize(this, () =>\n      this.style.setProperty('--internal-label-max-width', pxToRem(this.getBoundingClientRect().width))\n    );\n  }\n\n  private syncLayouts() {\n    this.addEventListener<any>('layoutChange', (e: CustomEvent) => {\n      e.preventDefault();\n\n      if (!this.overflowElement && isVerticalLayout(e.detail)) {\n        this.collapseForm(e.target as CdsControl);\n      }\n\n      if (e.target === this.overflowElement && !isVerticalLayout(e.detail)) {\n        this.expandForm(e.detail);\n      }\n    });\n  }\n\n  private collapseForm(control: CdsControl) {\n    this.overflowElement = control;\n    this.responsive = false;\n    this.layout = 'vertical';\n    control.updateComplete.then(() => (control.responsive = true));\n  }\n\n  private expandForm(layout: FormLayout) {\n    this.responsive = true;\n    this.overflowElement = null;\n    this.layout = layout;\n  }\n}\n"]}
+{"version":3,"file":"form-group.element.js","sources":["../../../../src/forms/form-group/form-group.element.ts"],"sourcesContent":null,"names":["CdsFormGroup","LitElement","[object Object]","super","arguments","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,SAASC,WAMTC,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,GAExBd,SACI,OAAOgB,CAAK,sDACuD,YAAhBb,KAAKC,OAAuB,KAAO,4BAK1FJ,aAAaiB,GACThB,MAAMiB,aAAaD,GACnBd,KAAKgB,cACLhB,KAAKiB,wBACLjB,KAAKK,UAAUa,KAAKC,EAAenB,MAAM,IAAMA,KAAKiB,2BAExDpB,QAAQiB,GACJhB,MAAMsB,QAAQN,GACdO,EAAiBP,EAAOd,KAAMA,KAAKM,mBAEvCT,uBACIC,MAAMwB,uBACNtB,KAAKK,UAAUkB,SAAQC,GAAKA,EAAEC,eAElC5B,8BACwB,eAAhBG,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,WAG5HpC,cACIG,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,WAI9B1C,aAAa8C,GACT3C,KAAKqC,gBAAkBM,EACvB3C,KAAKG,YAAa,EAClBH,KAAKC,OAAS,WACd0C,EAAQC,eAAeC,MAAK,IAAOF,EAAQxC,YAAa,IAE5DN,WAAWI,GACPD,KAAKG,YAAa,EAClBH,KAAKqC,gBAAkB,KACvBrC,KAAKC,OAASA,GAGtB6C,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBtD,EAAauD,UAAW,cAAU,GACrCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBtD,EAAauD,UAAW,oBAAgB,GAC3CJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,WAClBxD,EAAauD,UAAW,kBAAc,GACzCJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,WAClBxD,EAAauD,UAAW,gBAAY,GACvCJ,EAAW,CACPM,EAAa,kBACdzD,EAAauD,UAAW,gBAAY,GACvCJ,EAAW,CACPM,EAAa,wBACdzD,EAAauD,UAAW,cAAU"}

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

@@ -0,0 +1,2 @@
+import{css as i}from"lit";var t=i`:host{--internal-label-min-width:initial;display:block;width:100%}.private-host{width:100%}`;export default t;
+//# sourceMappingURL=form-group.element.scss.js.map

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

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

package/forms/index.js

@@ -1,16 +1,2 @@
-/*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-export * from './control-message/control-message.element.js';
-export * from './control-action/control-action.element.js';
-export * from './control-group/control-group.element.js';
-export * from './control/control.element.js';
-export * from './form-group/form-group.element.js';
-export * from './utils/interfaces.js';
-/* @internal */
-export * from './control-inline/control-inline.element.js';
-/* @internal */
-export * from './control-label/control-label.element.js';
-//# sourceMappingURL=index.js.map
+export{CdsControlMessage}from"./control-message/control-message.element.js";export{CdsControlAction}from"./control-action/control-action.element.js";export{CdsInternalControlGroup}from"./control-group/control-group.element.js";export{CdsControl,ControlLabelLayout}from"./control/control.element.js";export{CdsFormGroup}from"./form-group/form-group.element.js";import"./utils/interfaces.js";export{CdsInternalControlInline}from"./control-inline/control-inline.element.js";export{CdsInternalControlLabel}from"./control-label/control-label.element.js";
+//# sourceMappingURL=index.js.map

package/forms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/forms/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,8CAA8C,CAAC;AAC7D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,0CAA0C,CAAC;AACzD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oCAAoC,CAAC;AACnD,cAAc,uBAAuB,CAAC;AAEtC,eAAe;AACf,cAAc,4CAA4C,CAAC;AAE3D,eAAe;AACf,cAAc,0CAA0C,CAAC","sourcesContent":["/*\n * Copyright (c) 2016-2021 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 */\n\nexport * from './control-message/control-message.element.js';\nexport * from './control-action/control-action.element.js';\nexport * from './control-group/control-group.element.js';\nexport * from './control/control.element.js';\nexport * from './form-group/form-group.element.js';\nexport * from './utils/interfaces.js';\n\n/* @internal */\nexport * from './control-inline/control-inline.element.js';\n\n/* @internal */\nexport * from './control-label/control-label.element.js';\n"]}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}

package/forms/register.js

@@ -1,22 +1,2 @@
-/*
- * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-import '@cds/core/icon/register.js';
-import { registerElementSafely } from '@cds/core/internal';
-import { CdsControl } from './control/control.element.js';
-import { CdsControlAction } from './control-action/control-action.element.js';
-import { CdsInternalControlGroup } from './control-group/control-group.element.js';
-import { CdsInternalControlInline } from './control-inline/control-inline.element.js';
-import { CdsInternalControlLabel } from './control-label/control-label.element.js';
-import { CdsControlMessage } from './control-message/control-message.element.js';
-import { CdsFormGroup } from './form-group/form-group.element.js';
-registerElementSafely('cds-control', CdsControl);
-registerElementSafely('cds-control-action', CdsControlAction);
-registerElementSafely('cds-internal-control-group', CdsInternalControlGroup);
-registerElementSafely('cds-internal-control-inline', CdsInternalControlInline);
-registerElementSafely('cds-internal-control-label', CdsInternalControlLabel);
-registerElementSafely('cds-control-message', CdsControlMessage);
-registerElementSafely('cds-form-group', CdsFormGroup);
-//# sourceMappingURL=register.js.map
+import"@cds/core/icon/register.js";import{registerElementSafely as o}from"@cds/core/internal";import{CdsControl as r}from"./control/control.element.js";import{CdsControlAction as n}from"./control-action/control-action.element.js";import{CdsInternalControlGroup as t}from"./control-group/control-group.element.js";import{CdsInternalControlInline as e}from"./control-inline/control-inline.element.js";import{CdsInternalControlLabel as l}from"./control-label/control-label.element.js";import{CdsControlMessage as c}from"./control-message/control-message.element.js";import{CdsFormGroup as m}from"./form-group/form-group.element.js";o("cds-control",r),o("cds-control-action",n),o("cds-internal-control-group",t),o("cds-internal-control-inline",e),o("cds-internal-control-label",l),o("cds-control-message",c),o("cds-form-group",m);
+//# sourceMappingURL=register.js.map

package/forms/register.js.map

@@ -1 +1 @@
-{"version":3,"file":"register.js","sourceRoot":"","sources":["../../../src/forms/register.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAC;AACnF,OAAO,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AACtF,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAElE,qBAAqB,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AACjD,qBAAqB,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC;AAC9D,qBAAqB,CAAC,4BAA4B,EAAE,uBAAuB,CAAC,CAAC;AAC7E,qBAAqB,CAAC,6BAA6B,EAAE,wBAAwB,CAAC,CAAC;AAC/E,qBAAqB,CAAC,4BAA4B,EAAE,uBAAuB,CAAC,CAAC;AAC7E,qBAAqB,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC;AAChE,qBAAqB,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC","sourcesContent":["/*\n * Copyright (c) 2016-2020 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 */\n\nimport '@cds/core/icon/register.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';\n\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);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cds-control': CdsControl;\n    'cds-control-action': CdsControlAction;\n    'cds-internal-control-group': CdsInternalControlGroup;\n    'cds-internal-control-inline': CdsInternalControlInline;\n    'cds-internal-control-label': CdsInternalControlLabel;\n    'cds-control-message': CdsControlMessage;\n    'cds-form-group': CdsFormGroup;\n  }\n}\n"]}
+{"version":3,"file":"register.js","sources":["../../../src/forms/register.ts"],"sourcesContent":null,"names":["registerElementSafely","CdsControl","CdsControlAction","CdsInternalControlGroup","CdsInternalControlInline","CdsInternalControlLabel","CdsControlMessage","CdsFormGroup"],"mappings":"qnBAcAA,EAAsB,cAAeC,GACrCD,EAAsB,qBAAsBE,GAC5CF,EAAsB,6BAA8BG,GACpDH,EAAsB,8BAA+BI,GACrDJ,EAAsB,6BAA8BK,GACpDL,EAAsB,sBAAuBM,GAC7CN,EAAsB,iBAAkBO"}

package/forms/utils/index.d.ts

@@ -10,7 +10,7 @@ export declare function associateInputToDatalist(input: HTMLInputElement, datali
 export declare const layoutGroupToControlMapper: {
     [key: string]: ControlLayout;
 };
-export declare function getStatusIcon(status: 'error' | 'success' | 'neutral'): import("lit-element").TemplateResult;
+export declare function getStatusIcon(status: 'error' | 'success' | 'neutral'): import("lit-html").TemplateResult<1>;
 export declare function getLargestPrimaryLabelWidth(controls: (CdsControl | CdsInternalControlGroup)[]): Promise<string>;
 export declare function controlIsWrapped(input: HTMLElement, label: HTMLElement, layout: FormLayout): boolean;
 export declare function inlineControlListIsWrapped(inlineControls: CdsControl[], layout: FormLayout): boolean;

package/forms/utils/index.js

@@ -1,68 +1,2 @@
-/*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-import { html } from 'lit-element';
-import { isVisible, pxToRem } from '@cds/core/internal';
-export const formLayouts = ['vertical', 'vertical-inline', 'horizontal', 'horizontal-inline', 'compact'];
-export const defaultFormLayout = 'horizontal';
-export const defaultControlWidth = 'stretch';
-export function associateInputAndLabel(input, label, id) {
-    if (input && label) {
-        input.id = id;
-        label.setAttribute('for', input.id);
-    }
-}
-export function associateInputToDatalist(input, datalist) {
-    if (datalist) {
-        datalist.id = `${input.id}-datalist`;
-        input.setAttribute('list', datalist.id);
-    }
-}
-export const layoutGroupToControlMapper = {
-    'horizontal-inline': 'horizontal',
-    'vertical-inline': 'vertical',
-    horizontal: 'horizontal',
-    vertical: 'vertical',
-    compact: 'compact',
-};
-export function getStatusIcon(status) {
-    return html `${status !== 'neutral'
-        ? html ` <cds-control-action readonly class="status" cds-layout="align:shrink">
-        <cds-icon
-          status="${status === 'error' ? 'danger' : 'success'}"
-          shape="${status === 'error' ? 'exclamation-circle' : 'check-circle'}"
-          size="16"
-          inner-offset=${4}
-        ></cds-icon>
-      </cds-control-action>`
-        : ''} `;
-}
-export async function getLargestPrimaryLabelWidth(controls) {
-    return Promise.all(controls.map(c => c.updateComplete)).then(() => {
-        const primaryLabels = controls.filter(c => { var _a; return ((_a = c.controlLabel) === null || _a === void 0 ? void 0 : _a.action) === 'primary'; });
-        return pxToRem(Math.max(...primaryLabels.map(c => c.controlLabel.getBoundingClientRect().width)));
-    });
-}
-export function controlIsWrapped(input, label, layout) {
-    return (layout !== 'vertical' &&
-        layout !== 'vertical-inline' &&
-        input.getBoundingClientRect().top > (label === null || label === void 0 ? void 0 : label.getBoundingClientRect().top) + 12 // 12px buffer for rounding and inputs that are thin like the range input
-    );
-}
-export function inlineControlListIsWrapped(inlineControls, layout) {
-    const first = inlineControls[0];
-    const last = inlineControls[inlineControls.length - 1];
-    const isInlineLayout = layout === 'vertical-inline' || layout === 'horizontal-inline';
-    return isInlineLayout && last.getBoundingClientRect().top > first.getBoundingClientRect().top;
-}
-export function isVerticalLayout(layout) {
-    return layout === 'vertical' || layout === 'vertical-inline';
-}
-export async function getCurrentMessageStatus(messages) {
-    const message = messages.find(m => m.status !== 'neutral');
-    await (message === null || message === void 0 ? void 0 : message.updateComplete);
-    return message && isVisible(message) ? message.status : 'neutral';
-}
-//# sourceMappingURL=index.js.map
+import{html as t}from"lit";import{pxToRem as n,isVisible as i}from"@cds/core/internal";const e=["vertical","vertical-inline","horizontal","horizontal-inline","compact"],o="horizontal",r="stretch";function l(t,n,i){t&&n&&(t.id=i,n.setAttribute("for",t.id))}function c(t,n){n&&(n.id=t.id+"-datalist",t.setAttribute("list",n.id))}const a={"horizontal-inline":"horizontal","vertical-inline":"vertical",horizontal:"horizontal",vertical:"vertical",compact:"compact"};function u(n){return t`${"neutral"!==n?t`<cds-control-action readonly="readonly" class="status" cds-layout="align:shrink"><cds-icon status="${"error"===n?"danger":"success"}" shape="${"error"===n?"exclamation-circle":"check-circle"}" size="16" inner-offset="${4}"></cds-icon></cds-control-action>`:""}`}async function s(t){return Promise.all(t.map((t=>t.updateComplete))).then((()=>{const i=t.filter((t=>{var n;return"primary"===(null===(n=t.controlLabel)||void 0===n?void 0:n.action)}));return n(Math.max(...i.map((t=>t.controlLabel.getBoundingClientRect().width))))}))}function d(t,n,i){return"vertical"!==i&&"vertical-inline"!==i&&t.getBoundingClientRect().top>(null==n?void 0:n.getBoundingClientRect().top)+12}function p(t,n){const i=t[0],e=t[t.length-1];return("vertical-inline"===n||"horizontal-inline"===n)&&e.getBoundingClientRect().top>i.getBoundingClientRect().top}function h(t){return"vertical"===t||"vertical-inline"===t}async function v(t){const n=t.find((t=>"neutral"!==t.status));return await(null==n?void 0:n.updateComplete),n&&i(n)?n.status:"neutral"}export{l as associateInputAndLabel,c as associateInputToDatalist,d as controlIsWrapped,r as defaultControlWidth,o as defaultFormLayout,e as formLayouts,v as getCurrentMessageStatus,s as getLargestPrimaryLabelWidth,u as getStatusIcon,p as inlineControlListIsWrapped,h as isVerticalLayout,a as layoutGroupToControlMapper};
+//# sourceMappingURL=index.js.map

package/forms/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/forms/utils/index.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright (c) 2016-2021 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 */\n\nimport { html } from 'lit-element';\nimport { isVisible, pxToRem } from '@cds/core/internal';\nimport { ControlLayout, FormLayout } from './interfaces.js';\nimport { CdsInternalControlGroup } from '../control-group/control-group.element.js';\nimport { CdsControl } from '../control/control.element.js';\nimport { CdsControlMessage } from '../control-message/control-message.element.js';\n\nexport const formLayouts: FormLayout[] = ['vertical', 'vertical-inline', 'horizontal', 'horizontal-inline', 'compact'];\n\nexport const defaultFormLayout = 'horizontal';\n\nexport const defaultControlWidth = 'stretch';\n\nexport function associateInputAndLabel(input: HTMLInputElement, label: HTMLLabelElement, id: string) {\n  if (input && label) {\n    input.id = id;\n    label.setAttribute('for', input.id);\n  }\n}\n\nexport function associateInputToDatalist(input: HTMLInputElement, datalist: HTMLDataListElement) {\n  if (datalist) {\n    datalist.id = `${input.id}-datalist`;\n    input.setAttribute('list', datalist.id);\n  }\n}\n\nexport const layoutGroupToControlMapper: { [key: string]: ControlLayout } = {\n  'horizontal-inline': 'horizontal',\n  'vertical-inline': 'vertical',\n  horizontal: 'horizontal',\n  vertical: 'vertical',\n  compact: 'compact',\n};\n\nexport function getStatusIcon(status: 'error' | 'success' | 'neutral') {\n  return html`${status !== 'neutral'\n    ? html` <cds-control-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-control-action>`\n    : ''} `;\n}\n\nexport async function getLargestPrimaryLabelWidth(controls: (CdsControl | CdsInternalControlGroup)[]) {\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}\n\nexport function controlIsWrapped(input: HTMLElement, label: HTMLElement, layout: FormLayout) {\n  return (\n    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}\n\nexport function inlineControlListIsWrapped(inlineControls: CdsControl[], layout: FormLayout) {\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}\n\nexport function isVerticalLayout(layout: FormLayout) {\n  return layout === 'vertical' || layout === 'vertical-inline';\n}\n\nexport async function getCurrentMessageStatus(messages: CdsControlMessage[]) {\n  const message = messages.find(m => m.status !== 'neutral');\n  await message?.updateComplete;\n  return message && isVisible(message) ? message.status : 'neutral';\n}\n"]}
+{"version":3,"file":"index.js","sources":["../../../../src/forms/utils/index.ts"],"sourcesContent":null,"names":["formLayouts","defaultFormLayout","defaultControlWidth","associateInputAndLabel","input","label","id","setAttribute","associateInputToDatalist","datalist","layoutGroupToControlMapper","horizontal-inline","vertical-inline","horizontal","vertical","compact","getStatusIcon","status","html","async","getLargestPrimaryLabelWidth","controls","Promise","all","map","c","updateComplete","then","primaryLabels","filter","_a","controlLabel","action","pxToRem","Math","max","getBoundingClientRect","width","controlIsWrapped","layout","top","inlineControlListIsWrapped","inlineControls","first","last","length","isVerticalLayout","getCurrentMessageStatus","messages","message","find","m","isVisible"],"mappings":"uFAOY,MAACA,EAAc,CAAC,WAAY,kBAAmB,aAAc,oBAAqB,WACjFC,EAAoB,aACpBC,EAAsB,UAC5B,SAASC,EAAuBC,EAAOC,EAAOC,GAC7CF,GAASC,IACTD,EAAME,GAAKA,EACXD,EAAME,aAAa,MAAOH,EAAME,KAGjC,SAASE,EAAyBJ,EAAOK,GACxCA,IACAA,EAASH,GAAQF,EAAME,GAAT,YACdF,EAAMG,aAAa,OAAQE,EAASH,KAGhC,MAACI,EAA6B,CACtCC,oBAAqB,aACrBC,kBAAmB,WACnBC,WAAY,aACZC,SAAU,WACVC,QAAS,WAEN,SAASC,EAAcC,GAC1B,OAAOC,CAAK,GAAc,YAAXD,EACTC,CAAK,sGAEgB,UAAXD,EAAqB,SAAW,qBACtB,UAAXA,EAAqB,qBAAuB,2CAEtC,sCAGf,KAEHE,eAAeC,EAA4BC,GAC9C,OAAOC,QAAQC,IAAIF,EAASG,KAAIC,GAAKA,EAAEC,kBAAiBC,MAAK,KACzD,MAAMC,EAAgBP,EAASQ,QAAOJ,IAAO,IAAIK,EAAI,MAAkF,aAAhD,QAAzBA,EAAKL,EAAEM,oBAAiC,IAAPD,OAAgB,EAASA,EAAGE,WAC3H,OAAOC,EAAQC,KAAKC,OAAOP,EAAcJ,KAAIC,GAAKA,EAAEM,aAAaK,wBAAwBC,aAG1F,SAASC,EAAiBlC,EAAOC,EAAOkC,GAC3C,MAAmB,aAAXA,GACO,oBAAXA,GACAnC,EAAMgC,wBAAwBI,KAAOnC,MAAAA,OAAqC,EAASA,EAAM+B,wBAAwBI,KAAO,GAGzH,SAASC,EAA2BC,EAAgBH,GACvD,MAAMI,EAAQD,EAAe,GACvBE,EAAOF,EAAeA,EAAeG,OAAS,GAEpD,OADkC,oBAAXN,GAA2C,sBAAXA,IAC9BK,EAAKR,wBAAwBI,IAAMG,EAAMP,wBAAwBI,IAEvF,SAASM,EAAiBP,GAC7B,MAAkB,aAAXA,GAAoC,oBAAXA,EAE7BpB,eAAe4B,EAAwBC,GAC1C,MAAMC,EAAUD,EAASE,MAAKC,GAAkB,YAAbA,EAAElC,SAErC,aADOgC,MAAAA,OAAyC,EAASA,EAAQvB,gBAC1DuB,GAAWG,EAAUH,GAAWA,EAAQhC,OAAS"}

package/forms/utils/interfaces.js

@@ -1,7 +1,2 @@
-/*
- * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-export {};
-//# sourceMappingURL=interfaces.js.map
+
+//# sourceMappingURL=interfaces.js.map

package/forms/utils/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/forms/utils/interfaces.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/*\n * Copyright (c) 2016-2020 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 */\n\nexport type FormLayout = 'horizontal' | 'horizontal-inline' | 'vertical' | 'vertical-inline' | 'compact';\n\nexport type ControlLayout = 'vertical' | 'horizontal' | 'compact';\n\nexport type ControlStatus = 'neutral' | 'error' | 'success';\n\nexport type ControlWidth = 'shrink' | 'stretch';\n"]}
+{"version":3,"file":"interfaces.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}

package/forms/utils/validate.d.ts

@@ -1,4 +1,4 @@
-import { CdsControlMessage } from '../control-message/control-message.element';
-import { CdsControl } from '../control/control.element';
+import { CdsControlMessage } from '../control-message/control-message.element.js';
+import { CdsControl } from '../control/control.element.js';
 export declare type ValidityStateKey = 'valueMissing' | 'badInput' | 'customError' | 'patternMismatch' | 'rangeOverflow' | 'rangeUnderflow' | 'stepMismatch' | 'tooLong' | 'tooShort' | 'typeMismatch' | 'valid';
 export declare function syncHTML5Validation(control: CdsControl, messages: CdsControlMessage[]): void;

package/forms/utils/validate.js

@@ -1,27 +1,2 @@
-/*
- * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-export function syncHTML5Validation(control, messages) {
-    messages
-        .filter(m => m.hasAttribute('error'))
-        .forEach(m => {
-        m.setAttribute('hidden', '');
-        m.status = 'error';
-    });
-    control.inputControl.addEventListener('blur', () => control.inputControl.checkValidity());
-    control.inputControl.addEventListener('invalid', () => {
-        var _a;
-        messages.forEach(message => message.setAttribute('hidden', ''));
-        (_a = messages.find(message => control.inputControl.validity[message.error])) === null || _a === void 0 ? void 0 : _a.removeAttribute('hidden');
-        control.status = 'error';
-    });
-    control.inputControl.addEventListener('input', () => {
-        control.status = control.inputControl.validity.valid ? 'neutral' : control.status;
-        messages
-            .filter(m => control.inputControl.validity.valid && m.error && !control.inputControl.validity[m.error])
-            .forEach(message => message.setAttribute('hidden', ''));
-    });
-}
-//# sourceMappingURL=validate.js.map
+function t(t,r){r.filter((t=>t.hasAttribute("error"))).forEach((t=>{t.setAttribute("hidden",""),t.status="error"})),t.inputControl.addEventListener("blur",(()=>t.inputControl.checkValidity())),t.inputControl.addEventListener("invalid",(()=>{var i;r.forEach((t=>t.setAttribute("hidden",""))),null===(i=r.find((r=>t.inputControl.validity[r.error])))||void 0===i||i.removeAttribute("hidden"),t.status="error"})),t.inputControl.addEventListener("input",(()=>{t.status=t.inputControl.validity.valid?"neutral":t.status,r.filter((r=>t.inputControl.validity.valid&&r.error&&!t.inputControl.validity[r.error])).forEach((t=>t.setAttribute("hidden","")))}))}export{t as syncHTML5Validation};
+//# sourceMappingURL=validate.js.map

package/forms/utils/validate.js.map

@@ -1 +1 @@
-{"version":3,"file":"validate.js","sourceRoot":"","sources":["../../../../src/forms/utils/validate.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAmBH,MAAM,UAAU,mBAAmB,CAAC,OAAmB,EAAE,QAA6B;IACpF,QAAQ;SACL,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SACpC,OAAO,CAAC,CAAC,CAAC,EAAE;QACX,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAC7B,CAAC,CAAC,MAAM,GAAG,OAAO,CAAC;IACrB,CAAC,CAAC,CAAC;IAEL,OAAO,CAAC,YAAY,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,CAAC,CAAC;IAE1F,OAAO,CAAC,YAAY,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE;;QACpD,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC;QAChE,MAAA,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,0CAAE,eAAe,CAAC,QAAQ,EAAE;QAClG,OAAO,CAAC,MAAM,GAAG,OAAO,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QAClD,OAAO,CAAC,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC;QAElF,QAAQ;aACL,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;aACtG,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["/*\n * Copyright (c) 2016-2020 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 */\n\nimport { CdsControlMessage } from '../control-message/control-message.element';\nimport { CdsControl } from '../control/control.element';\n\n// https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\nexport type ValidityStateKey =\n  | 'valueMissing'\n  | 'badInput'\n  | 'customError'\n  | 'patternMismatch'\n  | 'rangeOverflow'\n  | 'rangeUnderflow'\n  | 'stepMismatch'\n  | 'tooLong'\n  | 'tooShort'\n  | 'typeMismatch'\n  | 'valid';\n\nexport function syncHTML5Validation(control: CdsControl, messages: CdsControlMessage[]) {\n  messages\n    .filter(m => m.hasAttribute('error'))\n    .forEach(m => {\n      m.setAttribute('hidden', '');\n      m.status = 'error';\n    });\n\n  control.inputControl.addEventListener('blur', () => control.inputControl.checkValidity());\n\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\n  control.inputControl.addEventListener('input', () => {\n    control.status = control.inputControl.validity.valid ? 'neutral' : control.status;\n\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"]}
+{"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","_a","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,KAC7C,IAAIE,EACJV,EAASI,SAAQO,GAAWA,EAAQN,aAAa,SAAU,MACuB,QAAjFK,EAAKV,EAASY,MAAKD,GAAWZ,EAAQQ,aAAaM,SAASF,EAAQG,gBAA4B,IAAPJ,GAAyBA,EAAGK,gBAAgB,UACtIhB,EAAQO,OAAS,WAErBP,EAAQQ,aAAaC,iBAAiB,SAAS,KAC3CT,EAAQO,OAASP,EAAQQ,aAAaM,SAASG,MAAQ,UAAYjB,EAAQO,OAC3EN,EACKC,QAAOC,GAAKH,EAAQQ,aAAaM,SAASG,OAASd,EAAEY,QAAUf,EAAQQ,aAAaM,SAASX,EAAEY,SAC/FV,SAAQO,GAAWA,EAAQN,aAAa,SAAU"}