@cds/core 5.2.1 → 5.4.1

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

@@ -1,5 +1,4 @@
-/// <reference types="@types/resize-observer-browser" />
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 import { EventEmitter } from '@cds/core/internal';
 import { CdsControl } from '../control/control.element.js';
 import { ControlStatus, FormLayout, ControlWidth } from '../utils/interfaces.js';
@@ -64,13 +63,13 @@ export declare class CdsInternalControlGroup extends LitElement {
     protected isInlineControlGroup: boolean;
     protected isControlGroup: boolean;
     protected observers: (MutationObserver | ResizeObserver)[];
-    static get styles(): import("lit-element").CSSResult[];
-    protected get messagesTemplate(): import("lit-element").TemplateResult;
-    protected get controlsTemplate(): import("lit-element").TemplateResult;
+    static get styles(): import("lit").CSSResultGroup[];
+    protected get messagesTemplate(): import("lit-html").TemplateResult<1>;
+    protected get controlsTemplate(): import("lit-html").TemplateResult<1>;
     private get inlineControlLayout();
     private get primaryLabelLayout();
     private get controlMessageLayout();
-    render(): import("lit-element").TemplateResult;
+    render(): import("lit-html").TemplateResult<1>;
     constructor();
     connectedCallback(): void;
     firstUpdated(props: Map<string, any>): void;

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

@@ -1,211 +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 { __decorate } from "tslib";
-import { html, LitElement, query } from 'lit-element';
-import { baseStyles, property, querySlot, querySlotAll, id, event, syncDefinedProps, describeElementByElements, updateComponentLayout, setAttributes, syncProps, } from '@cds/core/internal';
-import { ClarityIcons } from '@cds/core/icon/icon.service.js';
-import { exclamationCircleIcon } from '@cds/core/icon/shapes/exclamation-circle.js';
-import { checkCircleIcon } from '@cds/core/icon/shapes/check-circle.js';
-import { styles } from './control-group.element.css.js';
-import { getStatusIcon, controlIsWrapped, formLayouts, inlineControlListIsWrapped, defaultFormLayout, defaultControlWidth, getCurrentMessageStatus, } from '../utils/index.js';
-/**
- * Internal Control Group
- *
- * ```typescript
- * import '@cds/core/forms/register.js';
- * ```
- *
- * ```html
- * <cds-internal-control-group>
- *   <label>...</label>
- *   <cds-control>
- *     <label></label>
- *     <input ... />
- *   </cds-control>
- *   <cds-control>
- *     <label></label>
- *     <input ... />
- *   </cds-control>
- * </cds-internal-control-group>
- * ```
- *
- * @element cds-internal-control-group
- * @slot - For projecting control group
- */
-export class CdsInternalControlGroup extends LitElement {
-    constructor() {
-        super();
-        /**
-         * @type {neutral | error | success}
-         * Set the status of control group validation
-         */
-        this.status = 'neutral';
-        /** @type {horizontal | horizontal-inline | vertical | vertical-inline | compact} */
-        this.layout = defaultFormLayout;
-        /** Align the labels of controls within group left or right */
-        this.controlAlign = 'left';
-        /** Disable all controls within a control group or omit and disable controls individually */
-        this.disabled = false;
-        /**
-         * @type {stretch | shrink}
-         * Adjust the control from the default full width or the browser default width
-         */
-        this.controlWidth = defaultControlWidth;
-        /**
-         * By default forms will collapse to layout that prevents overflow.
-         * If disabled control layout may break or overflow in unexpected ways.
-         */
-        this.responsive = true;
-        this.isInlineControlGroup = false;
-        this.isControlGroup = true;
-        this.observers = [];
-        ClarityIcons.addIcons(exclamationCircleIcon, checkCircleIcon);
-    }
-    static get styles() {
-        return [baseStyles, styles];
-    }
-    get messagesTemplate() {
-        var _a;
-        return html `
-      <div cds-layout="horizontal align:shrink ${((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) ? 'gap:sm' : ''}" class="messages-container">
-        ${!this.isInlineControlGroup ? getStatusIcon(this.status) : ''}
-        <div class="messages">
-          <slot name="message"></slot>
-        </div>
-      </div>
-    `;
-    }
-    get controlsTemplate() {
-        return this.isInlineControlGroup
-            ? html `
-          <div cds-layout="horizontal gap:sm align:horizontal-stretch" class="input-container">
-            <div class="controls" cds-layout="horizontal align:horizontal-stretch">
-              <slot name="controls"></slot>
-            </div>
-            ${getStatusIcon(this.status)}
-          </div>
-        `
-            : html `
-          <div cds-layout="horizontal align:shrink" class="input-container">
-            <div class="controls" cds-layout="${this.inlineControlLayout}">
-              <slot name="controls"></slot>
-            </div>
-          </div>
-        `;
-    }
-    get inlineControlLayout() {
-        return !this.layout.includes('inline') && this.layout !== 'compact' ? 'vertical gap:sm' : 'horizontal gap:md';
-    }
-    get primaryLabelLayout() {
-        return !this.layout.includes('vertical') ? 'horizontal gap:lg' : 'vertical gap:sm';
-    }
-    get controlMessageLayout() {
-        return `${this.layout === 'compact' ? 'horizontal' : 'vertical'} gap:sm wrap:none align:stretch`;
-    }
-    render() {
-        var _a;
-        return html `
-      <div class="private-host" cds-layout="${this.primaryLabelLayout}">
-        <cds-internal-control-label .disabled=${this.disabled} cds-layout="align:top" action="primary">
-          <slot name="label"></slot>
-        </cds-internal-control-label>
-        <div cds-layout="${this.controlMessageLayout}">
-          ${this.controlsTemplate} ${((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) ? this.messagesTemplate : ''}
-        </div>
-      </div>
-    `;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        setAttributes(this, ['role', 'group'], ['cds-control-group', '']);
-    }
-    firstUpdated(props) {
-        super.firstUpdated(props);
-        this.associateLabelAndGroup();
-        this.setupDescribedByUpdates();
-        this.setupResponsive();
-    }
-    updated(props) {
-        super.updated(props);
-        props.set('isControlGroup', true);
-        this.controls.forEach((c) => (c.isControlGroup = true));
-        this.messages.forEach(message => syncProps(message, this, { disabled: props.has('disabled') }));
-        syncDefinedProps(props, this, Array.from(this.controls));
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.observers.forEach(o => o.disconnect());
-    }
-    get layoutStable() {
-        return (!inlineControlListIsWrapped(Array.from(this.controls), this.layout) &&
-            !controlIsWrapped(this.controlSlot, this.controlLabel, this.layout));
-    }
-    associateLabelAndGroup() {
-        this.setAttribute('aria-labelledby', this.groupLabelId);
-        this.label.setAttribute('id', this.groupLabelId);
-    }
-    setupDescribedByUpdates() {
-        var _a;
-        (_a = this.messageSlot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', () => {
-            describeElementByElements(this, Array.from(this.messages));
-            getCurrentMessageStatus(Array.from(this.messages)).then(s => (this.status = s));
-        });
-    }
-    setupResponsive() {
-        if (this.responsive) {
-            const layoutConfig = { layouts: formLayouts, initialLayout: this.layout };
-            const observer = updateComponentLayout(this, layoutConfig, () => this.layoutChange.emit(this.layout, { bubbles: true }));
-            this.observers.push(observer);
-        }
-    }
-}
-__decorate([
-    property({ type: String })
-], CdsInternalControlGroup.prototype, "status", void 0);
-__decorate([
-    property({ type: String })
-], CdsInternalControlGroup.prototype, "layout", void 0);
-__decorate([
-    property({ type: String })
-], CdsInternalControlGroup.prototype, "controlAlign", void 0);
-__decorate([
-    property({ type: Boolean })
-], CdsInternalControlGroup.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String })
-], CdsInternalControlGroup.prototype, "controlWidth", void 0);
-__decorate([
-    property({ type: Boolean })
-], CdsInternalControlGroup.prototype, "responsive", void 0);
-__decorate([
-    querySlot('label', {
-        assign: 'label',
-        required: 'warning',
-        requiredMessage: 'To meet a11y standards a <label> should be provided',
-    })
-], CdsInternalControlGroup.prototype, "label", void 0);
-__decorate([
-    querySlotAll('cds-control, [cds-control]')
-], CdsInternalControlGroup.prototype, "controls", void 0);
-__decorate([
-    querySlotAll('cds-control-message')
-], CdsInternalControlGroup.prototype, "messages", void 0);
-__decorate([
-    query('cds-internal-control-label[action=primary]')
-], CdsInternalControlGroup.prototype, "controlLabel", void 0);
-__decorate([
-    query('.controls')
-], CdsInternalControlGroup.prototype, "controlSlot", void 0);
-__decorate([
-    query('.messages')
-], CdsInternalControlGroup.prototype, "messageSlot", void 0);
-__decorate([
-    id()
-], CdsInternalControlGroup.prototype, "groupLabelId", void 0);
-__decorate([
-    event()
-], CdsInternalControlGroup.prototype, "layoutChange", void 0);
-//# sourceMappingURL=control-group.element.js.map
+import{__decorate as t}from"tslib";import{LitElement as o,html as s}from"lit";import{query as e}from"lit/decorators/query.js";import{baseStyles as i,setAttributes as r,syncProps as a,syncDefinedProps as l,describeElementByElements as n,updateComponentLayout as c,property as d,querySlot as p,querySlotAll as h,id as u,event as y}from"@cds/core/internal";import{ClarityIcons as m}from"@cds/core/icon/icon.service.js";import{exclamationCircleIcon as g}from"@cds/core/icon/shapes/exclamation-circle.js";import{checkCircleIcon as v}from"@cds/core/icon/shapes/check-circle.js";import b from"./control-group.element.scss.js";import{defaultFormLayout as f,defaultControlWidth as L,getStatusIcon as C,inlineControlListIsWrapped as A,controlIsWrapped as z,getCurrentMessageStatus as S,formLayouts as $}from"../utils/index.js";class G extends o{constructor(){super(),this.status="neutral",this.layout=f,this.controlAlign="left",this.disabled=!1,this.controlWidth=L,this.responsive=!0,this.isInlineControlGroup=!1,this.isControlGroup=!0,this.observers=[],m.addIcons(g,v)}static get styles(){return[i,b]}get messagesTemplate(){var t;return s`<div cds-layout="horizontal align:shrink ${(null===(t=this.messages)||void 0===t?void 0:t.length)?"gap:sm":""}" class="messages-container">${this.isInlineControlGroup?"":C(this.status)}<div class="messages"><slot name="message"></slot></div></div>`}get controlsTemplate(){return this.isInlineControlGroup?s`<div cds-layout="horizontal gap:sm align:horizontal-stretch" class="input-container"><div class="controls" cds-layout="horizontal align:horizontal-stretch"><slot name="controls"></slot></div>${C(this.status)}</div>`:s`<div cds-layout="horizontal align:shrink" class="input-container"><div class="controls" cds-layout="${this.inlineControlLayout}"><slot name="controls"></slot></div></div>`}get inlineControlLayout(){return this.layout.includes("inline")||"compact"===this.layout?"horizontal gap:md":"vertical gap:sm"}get primaryLabelLayout(){return this.layout.includes("vertical")?"vertical gap:sm":"horizontal gap:lg"}get controlMessageLayout(){return("compact"===this.layout?"horizontal":"vertical")+" gap:sm wrap:none align:stretch"}render(){var t;return s`<div class="private-host" cds-layout="${this.primaryLabelLayout}"><cds-internal-control-label .disabled="${this.disabled}" cds-layout="align:top" action="primary"><slot name="label"></slot></cds-internal-control-label><div cds-layout="${this.controlMessageLayout}">${this.controlsTemplate} ${(null===(t=this.messages)||void 0===t?void 0:t.length)?this.messagesTemplate:""}</div></div>`}connectedCallback(){super.connectedCallback(),r(this,["role","group"],["cds-control-group",""])}firstUpdated(t){super.firstUpdated(t),this.associateLabelAndGroup(),this.setupDescribedByUpdates(),this.setupResponsive()}updated(t){super.updated(t),t.set("isControlGroup",!0),this.controls.forEach((t=>t.isControlGroup=!0)),this.messages.forEach((o=>a(o,this,{disabled:t.has("disabled")}))),l(t,this,Array.from(this.controls))}disconnectedCallback(){super.disconnectedCallback(),this.observers.forEach((t=>t.disconnect()))}get layoutStable(){return!A(Array.from(this.controls),this.layout)&&!z(this.controlSlot,this.controlLabel,this.layout)}associateLabelAndGroup(){this.setAttribute("aria-labelledby",this.groupLabelId),this.label.setAttribute("id",this.groupLabelId)}setupDescribedByUpdates(){var t;null===(t=this.messageSlot)||void 0===t||t.addEventListener("slotchange",(()=>{n(this,Array.from(this.messages)),S(Array.from(this.messages)).then((t=>this.status=t))}))}setupResponsive(){if(this.responsive){const t={layouts:$,initialLayout:this.layout},o=c(this,t,(()=>this.layoutChange.emit(this.layout,{bubbles:!0})));this.observers.push(o)}}}t([d({type:String})],G.prototype,"status",void 0),t([d({type:String})],G.prototype,"layout",void 0),t([d({type:String})],G.prototype,"controlAlign",void 0),t([d({type:Boolean})],G.prototype,"disabled",void 0),t([d({type:String})],G.prototype,"controlWidth",void 0),t([d({type:Boolean})],G.prototype,"responsive",void 0),t([p("label",{assign:"label",required:"warning",requiredMessage:"To meet a11y standards a <label> should be provided"})],G.prototype,"label",void 0),t([h("cds-control, [cds-control]")],G.prototype,"controls",void 0),t([h("cds-control-message")],G.prototype,"messages",void 0),t([e("cds-internal-control-label[action=primary]")],G.prototype,"controlLabel",void 0),t([e(".controls")],G.prototype,"controlSlot",void 0),t([e(".messages")],G.prototype,"messageSlot",void 0),t([u()],G.prototype,"groupLabelId",void 0),t([y()],G.prototype,"layoutChange",void 0);export{G as CdsInternalControlGroup};
+//# sourceMappingURL=control-group.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"control-group.element.js","sourceRoot":"","sources":["../../../../src/forms/control-group/control-group.element.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, LitElement, query } from 'lit-element';\nimport {\n  baseStyles,\n  property,\n  querySlot,\n  querySlotAll,\n  id,\n  event,\n  EventEmitter,\n  syncDefinedProps,\n  describeElementByElements,\n  updateComponentLayout,\n  setAttributes,\n  syncProps,\n} from '@cds/core/internal';\nimport { ClarityIcons } from '@cds/core/icon/icon.service.js';\nimport { exclamationCircleIcon } from '@cds/core/icon/shapes/exclamation-circle.js';\nimport { checkCircleIcon } from '@cds/core/icon/shapes/check-circle.js';\nimport { CdsControl } from '../control/control.element.js';\nimport { styles } from './control-group.element.css.js';\nimport { ControlStatus, FormLayout, ControlWidth } from '../utils/interfaces.js';\nimport { CdsControlMessage } from '../control-message/control-message.element.js';\nimport { CdsInternalControlInline } from './../control-inline/control-inline.element.js';\nimport { CdsInternalControlLabel } from '../control-label/control-label.element.js';\nimport {\n  getStatusIcon,\n  controlIsWrapped,\n  formLayouts,\n  inlineControlListIsWrapped,\n  defaultFormLayout,\n  defaultControlWidth,\n  getCurrentMessageStatus,\n} from '../utils/index.js';\n\n/**\n * Internal Control Group\n *\n * ```typescript\n * import '@cds/core/forms/register.js';\n * ```\n *\n * ```html\n * <cds-internal-control-group>\n *   <label>...</label>\n *   <cds-control>\n *     <label></label>\n *     <input ... />\n *   </cds-control>\n *   <cds-control>\n *     <label></label>\n *     <input ... />\n *   </cds-control>\n * </cds-internal-control-group>\n * ```\n *\n * @element cds-internal-control-group\n * @slot - For projecting control group\n */\nexport class CdsInternalControlGroup extends LitElement {\n  /**\n   * @type {neutral | error | success}\n   * Set the status of control group validation\n   */\n  @property({ type: String }) status: ControlStatus = 'neutral';\n\n  /** @type {horizontal | horizontal-inline | vertical | vertical-inline | compact} */\n  @property({ type: String }) layout: FormLayout = defaultFormLayout;\n\n  /** Align the labels of controls within group left or right */\n  @property({ type: String }) controlAlign: 'left' | 'right' = 'left';\n\n  /** Disable all controls within a control group or omit and disable controls individually */\n  @property({ type: Boolean }) disabled = false;\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 = defaultControlWidth;\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  @querySlot('label', {\n    assign: 'label',\n    required: 'warning',\n    requiredMessage: 'To meet a11y standards a <label> should be provided',\n  })\n  protected label: HTMLLabelElement;\n\n  @querySlotAll('cds-control, [cds-control]')\n  protected controls: NodeListOf<CdsControl | CdsInternalControlInline>;\n\n  @querySlotAll('cds-control-message') protected messages: NodeListOf<CdsControlMessage>;\n\n  /** @private */\n  @query('cds-internal-control-label[action=primary]') controlLabel: CdsInternalControlLabel;\n\n  @query('.controls') private controlSlot: HTMLElement;\n\n  @query('.messages') private messageSlot: HTMLElement;\n\n  @id() private groupLabelId: string;\n\n  @event() protected layoutChange: EventEmitter<FormLayout>;\n\n  protected isInlineControlGroup = false;\n\n  protected isControlGroup = true;\n\n  protected observers: (MutationObserver | ResizeObserver)[] = [];\n\n  static get styles() {\n    return [baseStyles, styles];\n  }\n\n  protected get messagesTemplate() {\n    return html`\n      <div cds-layout=\"horizontal align:shrink ${this.messages?.length ? 'gap:sm' : ''}\" class=\"messages-container\">\n        ${!this.isInlineControlGroup ? getStatusIcon(this.status) : ''}\n        <div class=\"messages\">\n          <slot name=\"message\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  protected get controlsTemplate() {\n    return this.isInlineControlGroup\n      ? html`\n          <div cds-layout=\"horizontal gap:sm align:horizontal-stretch\" class=\"input-container\">\n            <div class=\"controls\" cds-layout=\"horizontal align:horizontal-stretch\">\n              <slot name=\"controls\"></slot>\n            </div>\n            ${getStatusIcon(this.status)}\n          </div>\n        `\n      : html`\n          <div cds-layout=\"horizontal align:shrink\" class=\"input-container\">\n            <div class=\"controls\" cds-layout=\"${this.inlineControlLayout}\">\n              <slot name=\"controls\"></slot>\n            </div>\n          </div>\n        `;\n  }\n\n  private get inlineControlLayout(): string {\n    return !this.layout.includes('inline') && this.layout !== 'compact' ? 'vertical gap:sm' : 'horizontal gap:md';\n  }\n\n  private get primaryLabelLayout() {\n    return !this.layout.includes('vertical') ? 'horizontal gap:lg' : 'vertical gap:sm';\n  }\n\n  private get controlMessageLayout() {\n    return `${this.layout === 'compact' ? 'horizontal' : 'vertical'} gap:sm wrap:none align:stretch`;\n  }\n\n  render() {\n    return html`\n      <div class=\"private-host\" cds-layout=\"${this.primaryLabelLayout}\">\n        <cds-internal-control-label .disabled=${this.disabled} cds-layout=\"align:top\" action=\"primary\">\n          <slot name=\"label\"></slot>\n        </cds-internal-control-label>\n        <div cds-layout=\"${this.controlMessageLayout}\">\n          ${this.controlsTemplate} ${this.messages?.length ? this.messagesTemplate : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    ClarityIcons.addIcons(exclamationCircleIcon, checkCircleIcon);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    setAttributes(this, ['role', 'group'], ['cds-control-group', '']);\n  }\n\n  firstUpdated(props: Map<string, any>) {\n    super.firstUpdated(props);\n    this.associateLabelAndGroup();\n    this.setupDescribedByUpdates();\n    this.setupResponsive();\n  }\n\n  updated(props: Map<string, any>) {\n    super.updated(props);\n    props.set('isControlGroup', true);\n    this.controls.forEach((c: any) => (c.isControlGroup = true));\n    this.messages.forEach(message => syncProps(message, this, { disabled: props.has('disabled') }));\n    syncDefinedProps(props, this, Array.from(this.controls));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.observers.forEach(o => o.disconnect());\n  }\n\n  get layoutStable() {\n    return (\n      !inlineControlListIsWrapped(Array.from(this.controls), this.layout) &&\n      !controlIsWrapped(this.controlSlot, this.controlLabel, this.layout)\n    );\n  }\n\n  private associateLabelAndGroup() {\n    this.setAttribute('aria-labelledby', this.groupLabelId);\n    this.label.setAttribute('id', this.groupLabelId);\n  }\n\n  private setupDescribedByUpdates() {\n    this.messageSlot?.addEventListener('slotchange', () => {\n      describeElementByElements(this, Array.from(this.messages));\n      getCurrentMessageStatus(Array.from(this.messages)).then(s => (this.status = s));\n    });\n  }\n\n  private setupResponsive() {\n    if (this.responsive) {\n      const layoutConfig = { layouts: formLayouts, initialLayout: this.layout };\n      const observer = updateComponentLayout(this, layoutConfig, () =>\n        this.layoutChange.emit(this.layout, { bubbles: true })\n      );\n      this.observers.push(observer);\n    }\n  }\n}\n"]}
+{"version":3,"file":"control-group.element.js","sources":["../../../../src/forms/control-group/control-group.element.ts"],"sourcesContent":null,"names":["CdsInternalControlGroup","LitElement","[object Object]","super","this","status","layout","defaultFormLayout","controlAlign","disabled","controlWidth","defaultControlWidth","responsive","isInlineControlGroup","isControlGroup","observers","ClarityIcons","addIcons","exclamationCircleIcon","checkCircleIcon","styles","baseStyles","messagesTemplate","_a","html","messages","length","getStatusIcon","controlsTemplate","inlineControlLayout","includes","primaryLabelLayout","controlMessageLayout","connectedCallback","setAttributes","props","firstUpdated","associateLabelAndGroup","setupDescribedByUpdates","setupResponsive","updated","set","controls","forEach","c","message","syncProps","has","syncDefinedProps","Array","from","disconnectedCallback","o","disconnect","layoutStable","inlineControlListIsWrapped","controlIsWrapped","controlSlot","controlLabel","setAttribute","groupLabelId","label","messageSlot","addEventListener","describeElementByElements","getCurrentMessageStatus","then","s","layoutConfig","layouts","formLayouts","initialLayout","observer","updateComponentLayout","layoutChange","emit","bubbles","push","__decorate","property","type","String","prototype","Boolean","querySlot","assign","required","requiredMessage","querySlotAll","query","id","event"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{css as a}from"lit";var t=a`:host{width:100%}:host([control-width=shrink]){width:auto}cds-control-action.status{height:var(--cds-global-space-7,calc((16 / var(--cds-global-base,20)) * 1rem))}:host([layout=compact]) .messages,:host([layout=compact]) cds-internal-control-label[action=primary],:host([layout=horizontal-inline]) cds-internal-control-label[action=primary],:host([layout=horizontal]) cds-internal-control-label[action=primary],:host([status=error]) .messages,:host([status=success]) .messages{padding-top:var(--cds-global-space-3,calc((4 / var(--cds-global-base,20)) * 1rem))}`;export default t;
+//# sourceMappingURL=control-group.element.scss.js.map

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

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

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

@@ -28,8 +28,8 @@ export declare class CdsInternalControlInline extends CdsControl {
     /** @private */
     protected checkedChange: EventEmitter<boolean>;
     protected supportsPrefixSuffixActions: boolean;
-    static get styles(): import("lit-element").CSSResult[];
-    render(): import("lit-element").TemplateResult;
+    static get styles(): import("lit").CSSResultGroup[];
+    render(): import("lit-html").TemplateResult<1>;
     firstUpdated(props: Map<string, any>): void;
     updated(props: Map<string, any>): void;
 }

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

@@ -1,101 +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 { __decorate } from "tslib";
-import { html } from 'lit-element';
-import { property, event, getElementUpdates, internalProperty } from '@cds/core/internal';
-import { styles } from './control-inline.element.css.js';
-import { CdsControl } from '../control/control.element.js';
-import { getStatusIcon } from '../utils/index.js';
-/**
- * Internal Control Inline
- *
- * ```typescript
- * import '@cds/core/forms/register.js';
- * ```
- *
- * ```html
- * <cds-internal-control-inline>
- *   <label>inline</label>
- *   <input type="radio" />
- * </ds-internal-control-inline>
- * ```
- *
- * @slot - For projecting inline input and label
- */
-export class CdsInternalControlInline extends CdsControl {
-    constructor() {
-        super(...arguments);
-        /** Align the labels of controls within group left or right */
-        this.controlAlign = 'left';
-        /** @private */
-        this.checked = false;
-        /** @private */
-        this.indeterminate = false;
-        this.supportsPrefixSuffixActions = false;
-    }
-    static get styles() {
-        return [...super.styles, styles];
-    }
-    render() {
-        var _a, _b;
-        return html `
-      <div class="private-host" cds-layout="vertical gap:sm">
-        <div cds-layout="horizontal gap:sm wrap:none ${this.controlAlign === 'right' ? 'order:reverse' : ''}">
-          <div class="input" @click=${() => this.inputControl.click()}></div>
-          <cds-internal-control-label
-            action="secondary"
-            .disabled="${this.disabled}"
-            cds-layout="align:vertical-center"
-          >
-            <slot name="label"></slot>
-          </cds-internal-control-label>
-        </div>
-        ${!this.isControlGroup && ((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length)
-            ? html ` <div cds-layout="horizontal wrap:none ${((_b = this.messages) === null || _b === void 0 ? void 0 : _b.length) ? 'gap:sm' : ''}">
-              ${getStatusIcon(this.status)}
-              <div cds-layout="align:vertical-center" class="messages">
-                <slot name="message"></slot>
-              </div>
-            </div>`
-            : ''}
-      </div>
-      <div cds-layout="display:screen-reader-only">
-        <slot name="input"></slot>
-      </div>
-    `;
-    }
-    firstUpdated(props) {
-        super.firstUpdated(props);
-        this.inputControl.addEventListener('change', () => (this.checked = this.inputControl.checked));
-        this.observers.push(getElementUpdates(this.inputControl, 'checked', (value) => (this.checked = value === '' ? true : value)), getElementUpdates(this.inputControl, 'indeterminate', (value) => (this.indeterminate = value === '' ? true : value)));
-    }
-    updated(props) {
-        super.updated(props);
-        if (props.has('indeterminate') && props.get('indeterminate') !== this.indeterminate && this.indeterminate) {
-            this.checked = false;
-        }
-        if (props.has('checked') && props.get('checked') !== this.checked && this.checked) {
-            this.indeterminate = false;
-            this.checkedChange.emit(this.checked);
-        }
-    }
-}
-__decorate([
-    property({ type: String })
-], CdsInternalControlInline.prototype, "controlAlign", void 0);
-__decorate([
-    internalProperty()
-], CdsInternalControlInline.prototype, "isControlGroup", void 0);
-__decorate([
-    internalProperty({ type: Boolean, reflect: true })
-], CdsInternalControlInline.prototype, "checked", void 0);
-__decorate([
-    internalProperty({ type: Boolean, reflect: true })
-], CdsInternalControlInline.prototype, "indeterminate", void 0);
-__decorate([
-    event()
-], CdsInternalControlInline.prototype, "checkedChange", void 0);
-//# sourceMappingURL=control-inline.element.js.map
+import{__decorate as e}from"tslib";import{html as t}from"lit";import{getElementUpdates as i,property as s,state as o,event as r}from"@cds/core/internal";import n from"./control-inline.element.scss.js";import{CdsControl as l}from"../control/control.element.js";import{getStatusIcon as d}from"../utils/index.js";class c extends l{constructor(){super(...arguments),this.controlAlign="left",this.checked=!1,this.indeterminate=!1,this.supportsPrefixSuffixActions=!1}static get styles(){return[...super.styles,n]}render(){var e,i;return t`<div class="private-host" cds-layout="vertical gap:sm"><div cds-layout="horizontal gap:sm wrap:none ${"right"===this.controlAlign?"order:reverse":""}"><div class="input" @click="${()=>this.inputControl.click()}"></div><cds-internal-control-label action="secondary" .disabled="${this.disabled}" cds-layout="align:vertical-center"><slot name="label"></slot></cds-internal-control-label></div>${!this.isControlGroup&&(null===(e=this.messages)||void 0===e?void 0:e.length)?t`<div cds-layout="horizontal wrap:none ${(null===(i=this.messages)||void 0===i?void 0:i.length)?"gap:sm":""}">${d(this.status)}<div cds-layout="align:vertical-center" class="messages"><slot name="message"></slot></div></div>`:""}</div><div cds-layout="display:screen-reader-only"><slot name="input"></slot></div>`}firstUpdated(e){super.firstUpdated(e),this.inputControl.addEventListener("change",(()=>this.checked=this.inputControl.checked)),this.observers.push(i(this.inputControl,"checked",(e=>this.checked=""===e||e)),i(this.inputControl,"indeterminate",(e=>this.indeterminate=""===e||e)))}updated(e){super.updated(e),e.has("indeterminate")&&e.get("indeterminate")!==this.indeterminate&&this.indeterminate&&(this.checked=!1),e.has("checked")&&e.get("checked")!==this.checked&&this.checked&&(this.indeterminate=!1,this.checkedChange.emit(this.checked))}}e([s({type:String})],c.prototype,"controlAlign",void 0),e([o()],c.prototype,"isControlGroup",void 0),e([o({type:Boolean,reflect:!0})],c.prototype,"checked",void 0),e([o({type:Boolean,reflect:!0})],c.prototype,"indeterminate",void 0),e([r()],c.prototype,"checkedChange",void 0);export{c as CdsInternalControlInline};
+//# sourceMappingURL=control-inline.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"control-inline.element.js","sourceRoot":"","sources":["../../../../src/forms/control-inline/control-inline.element.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 { EventEmitter, property, event, getElementUpdates, internalProperty } from '@cds/core/internal';\nimport { styles } from './control-inline.element.css.js';\nimport { CdsControl } from '../control/control.element.js';\nimport { getStatusIcon } from '../utils/index.js';\n\n/**\n * Internal Control Inline\n *\n * ```typescript\n * import '@cds/core/forms/register.js';\n * ```\n *\n * ```html\n * <cds-internal-control-inline>\n *   <label>inline</label>\n *   <input type=\"radio\" />\n * </ds-internal-control-inline>\n * ```\n *\n * @slot - For projecting inline input and label\n */\nexport class CdsInternalControlInline extends CdsControl {\n  /** Align the labels of controls within group left or right */\n  @property({ type: String }) controlAlign: 'left' | 'right' = 'left';\n\n  /** @private */\n  @internalProperty() isControlGroup: boolean;\n\n  /** @private */\n  @internalProperty({ type: Boolean, reflect: true }) protected checked = false;\n\n  /** @private */\n  @internalProperty({ type: Boolean, reflect: true }) protected indeterminate = false;\n\n  /** @private */\n  @event() protected checkedChange: EventEmitter<boolean>;\n\n  protected supportsPrefixSuffixActions = false;\n\n  static get styles() {\n    return [...super.styles, styles];\n  }\n\n  render() {\n    return html`\n      <div class=\"private-host\" cds-layout=\"vertical gap:sm\">\n        <div cds-layout=\"horizontal gap:sm wrap:none ${this.controlAlign === 'right' ? 'order:reverse' : ''}\">\n          <div class=\"input\" @click=${() => this.inputControl.click()}></div>\n          <cds-internal-control-label\n            action=\"secondary\"\n            .disabled=\"${this.disabled}\"\n            cds-layout=\"align:vertical-center\"\n          >\n            <slot name=\"label\"></slot>\n          </cds-internal-control-label>\n        </div>\n        ${!this.isControlGroup && this.messages?.length\n          ? html` <div cds-layout=\"horizontal wrap:none ${this.messages?.length ? 'gap:sm' : ''}\">\n              ${getStatusIcon(this.status)}\n              <div cds-layout=\"align:vertical-center\" class=\"messages\">\n                <slot name=\"message\"></slot>\n              </div>\n            </div>`\n          : ''}\n      </div>\n      <div cds-layout=\"display:screen-reader-only\">\n        <slot name=\"input\"></slot>\n      </div>\n    `;\n  }\n\n  firstUpdated(props: Map<string, any>) {\n    super.firstUpdated(props);\n    this.inputControl.addEventListener('change', () => (this.checked = this.inputControl.checked));\n    this.observers.push(\n      getElementUpdates(this.inputControl, 'checked', (value: any) => (this.checked = value === '' ? true : value)),\n      getElementUpdates(\n        this.inputControl,\n        'indeterminate',\n        (value: any) => (this.indeterminate = value === '' ? true : value)\n      )\n    );\n  }\n\n  updated(props: Map<string, any>) {\n    super.updated(props);\n\n    if (props.has('indeterminate') && props.get('indeterminate') !== this.indeterminate && this.indeterminate) {\n      this.checked = false;\n    }\n\n    if (props.has('checked') && props.get('checked') !== this.checked && this.checked) {\n      this.indeterminate = false;\n      this.checkedChange.emit(this.checked);\n    }\n  }\n}\n"]}
+{"version":3,"file":"control-inline.element.js","sources":["../../../../src/forms/control-inline/control-inline.element.ts"],"sourcesContent":null,"names":["CdsInternalControlInline","CdsControl","[object Object]","super","arguments","this","controlAlign","checked","indeterminate","supportsPrefixSuffixActions","styles","_a","_b","html","inputControl","click","disabled","isControlGroup","messages","length","getStatusIcon","status","props","firstUpdated","addEventListener","observers","push","getElementUpdates","value","updated","has","get","checkedChange","emit","__decorate","property","type","String","prototype","state","Boolean","reflect","event"],"mappings":"sTA2BO,MAAMA,UAAiCC,EAC1CC,cACIC,SAASC,WAETC,KAAKC,aAAe,OAEpBD,KAAKE,SAAU,EAEfF,KAAKG,eAAgB,EACrBH,KAAKI,6BAA8B,EAEvCC,oBACI,MAAO,IAAIP,MAAMO,OAAQA,GAE7BR,SACI,IAAIS,EAAIC,EACR,OAAOC,CAAK,uGAEyD,UAAtBR,KAAKC,aAA2B,gBAAkB,kCACnE,IAAMD,KAAKS,aAAaC,4EAGrCV,KAAKW,8GAMnBX,KAAKY,iBAA4C,QAAxBN,EAAKN,KAAKa,gBAA6B,IAAPP,OAAgB,EAASA,EAAGQ,QAClFN,CAAK,0CAAoE,QAAxBD,EAAKP,KAAKa,gBAA6B,IAAPN,OAAgB,EAASA,EAAGO,QAAU,SAAW,OAChIC,EAAcf,KAAKgB,2GAKrB,wFAOVnB,aAAaoB,GACTnB,MAAMoB,aAAaD,GACnBjB,KAAKS,aAAaU,iBAAiB,UAAU,IAAOnB,KAAKE,QAAUF,KAAKS,aAAaP,UACrFF,KAAKoB,UAAUC,KAAKC,EAAkBtB,KAAKS,aAAc,WAAYc,GAAWvB,KAAKE,QAAoB,KAAVqB,GAAsBA,IAASD,EAAkBtB,KAAKS,aAAc,iBAAkBc,GAAWvB,KAAKG,cAA0B,KAAVoB,GAAsBA,KAE/O1B,QAAQoB,GACJnB,MAAM0B,QAAQP,GACVA,EAAMQ,IAAI,kBAAoBR,EAAMS,IAAI,mBAAqB1B,KAAKG,eAAiBH,KAAKG,gBACxFH,KAAKE,SAAU,GAEfe,EAAMQ,IAAI,YAAcR,EAAMS,IAAI,aAAe1B,KAAKE,SAAWF,KAAKE,UACtEF,KAAKG,eAAgB,EACrBH,KAAK2B,cAAcC,KAAK5B,KAAKE,WAIzC2B,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBrC,EAAyBsC,UAAW,oBAAgB,GACvDJ,EAAW,CACPK,KACDvC,EAAyBsC,UAAW,sBAAkB,GACzDJ,EAAW,CACPK,EAAM,CAAEH,KAAMI,QAASC,SAAS,KACjCzC,EAAyBsC,UAAW,eAAW,GAClDJ,EAAW,CACPK,EAAM,CAAEH,KAAMI,QAASC,SAAS,KACjCzC,EAAyBsC,UAAW,qBAAiB,GACxDJ,EAAW,CACPQ,KACD1C,EAAyBsC,UAAW,qBAAiB"}

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

@@ -0,0 +1,2 @@
+import{css as a}from"lit";var t=a`:host{width:initial}::slotted(label){white-space:nowrap}cds-internal-control-label{padding-top:var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem))}cds-control-action.status{padding-top:0!important}`;export default t;
+//# sourceMappingURL=control-inline.element.scss.js.map

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

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

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 /**
  * Label
  *
@@ -14,10 +14,11 @@ import { LitElement } from 'lit-element';
  * @internal
  * @element cds-internal-control-label
  * @slot - For projecting label text
+ * @cssprop --label-width
  */
 export declare class CdsInternalControlLabel extends LitElement {
     disabled: boolean;
     action: 'primary' | 'secondary';
-    static get styles(): import("lit-element").CSSResult[];
-    render(): import("lit-element").TemplateResult;
+    static get styles(): import("lit").CSSResultGroup[];
+    render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1,49 +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 } from '@cds/core/internal';
-import { styles } from './control-label.element.css.js';
-/**
- * Label
- *
- * ```typescript
- * import '@cds/core/forms/register.js';
- * ```
- *
- * ```html
- * <cds-internal-control-label status="primary | secondary">
- *   <label>...</label>
- * </cds-internal-control-label>
- * ```
- * @internal
- * @element cds-internal-control-label
- * @slot - For projecting label text
- */
-export class CdsInternalControlLabel extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.disabled = false;
-        this.action = 'primary';
-    }
-    static get styles() {
-        return [baseStyles, styles];
-    }
-    render() {
-        return html `
-      <div class="private-host" cds-layout="horizontal gap:sm align:shrink">
-        <slot></slot>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ type: Boolean })
-], CdsInternalControlLabel.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String })
-], CdsInternalControlLabel.prototype, "action", void 0);
-//# sourceMappingURL=control-label.element.js.map
+import{__decorate as t}from"tslib";import{LitElement as o,html as r}from"lit";import{baseStyles as s,property as e}from"@cds/core/internal";import i from"./control-label.element.scss.js";class l extends o{constructor(){super(...arguments),this.disabled=!1,this.action="primary"}static get styles(){return[s,i]}render(){return r`<div class="private-host" cds-layout="horizontal gap:sm align:shrink"><slot></slot></div>`}}t([e({type:Boolean})],l.prototype,"disabled",void 0),t([e({type:String})],l.prototype,"action",void 0);export{l as CdsInternalControlLabel};
+//# sourceMappingURL=control-label.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"control-label.element.js","sourceRoot":"","sources":["../../../../src/forms/control-label/control-label.element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAExD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,OAAO,uBAAwB,SAAQ,UAAU;IAAvD;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAElB,WAAM,GAA4B,SAAS,CAAC;IAa1E,CAAC;IAXC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF;AAf8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDAAkB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA6C","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 } from '@cds/core/internal';\nimport { styles } from './control-label.element.css.js';\n\n/**\n * Label\n *\n * ```typescript\n * import '@cds/core/forms/register.js';\n * ```\n *\n * ```html\n * <cds-internal-control-label status=\"primary | secondary\">\n *   <label>...</label>\n * </cds-internal-control-label>\n * ```\n * @internal\n * @element cds-internal-control-label\n * @slot - For projecting label text\n */\nexport class CdsInternalControlLabel extends LitElement {\n  @property({ type: Boolean }) disabled = false;\n\n  @property({ type: String }) action: 'primary' | 'secondary' = 'primary';\n\n  static get styles() {\n    return [baseStyles, styles];\n  }\n\n  render() {\n    return html`\n      <div class=\"private-host\" cds-layout=\"horizontal gap:sm align:shrink\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"control-label.element.js","sources":["../../../../src/forms/control-label/control-label.element.ts"],"sourcesContent":null,"names":["CdsInternalControlLabel","LitElement","[object Object]","super","arguments","this","disabled","action","styles","baseStyles","html","__decorate","property","type","Boolean","prototype","String"],"mappings":"2LA0BO,MAAMA,UAAgCC,EACzCC,cACIC,SAASC,WACTC,KAAKC,UAAW,EAChBD,KAAKE,OAAS,UAElBC,oBACI,MAAO,CAACC,EAAYD,GAExBN,SACI,OAAOQ,CAAK,6FAOpBC,EAAW,CACPC,EAAS,CAAEC,KAAMC,WAClBd,EAAwBe,UAAW,gBAAY,GAClDJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,UAClBhB,EAAwBe,UAAW,cAAU"}

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

@@ -0,0 +1,2 @@
+import{css as a}from"lit";var t=a`:host{contain:inherit!important;--text-transform:initial}:host([action=primary]){min-width:var(--label-width,var(--internal-label-min-width));max-width:var(--label-width,var(--internal-label-max-width))}::slotted([slot=label]){font-family:var(--cds-global-typography-font-family, "Clarity City", "Avenir Next", sans-serif)!important;display:inline-block!important;text-transform:var(--text-transform)!important;cursor:pointer!important;font-size:var(--cds-global-typography-secondary-font-size,calc((13 / var(--cds-global-base,20)) * 1rem))!important;font-weight:var(--cds-global-typography-secondary-font-weight,400)!important;color:var(--cds-global-typography-color-300,var(--cds-global-color-construction-800,#2d4048))!important;line-height:var(--cds-global-typography-secondary-line-height,1.23077em)!important;letter-spacing:var(--cds-global-typography-secondary-letter-spacing,-.007692em)!important}::slotted([slot=label])::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height,.1475em) + calc((var(--cds-global-typography-secondary-line-height,1.23077em) - 1em)/ 2))*-1) + .037em)}::slotted([slot=label])::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height,.1475em) - var(--cds-global-typography-ascender-height,.1703em) - var(--cds-global-typography-x-height,.517em)) + calc((var(--cds-global-typography-secondary-line-height,1.23077em) - 1em)/ 2))*-1) - .044em)}:host([disabled]) ::slotted([slot=label]){color:var(--cds-alias-status-disabled,var(--cds-global-color-construction-300,#aeb8bc))!important;cursor:not-allowed!important}:host([action=primary]) ::slotted([slot=label]){font-weight:700!important}::slotted(cds-control-action){padding:var(--cds-global-space-4,calc((6 / var(--cds-global-base,20)) * 1rem)) 0 var(--cds-global-space-3,calc((4 / var(--cds-global-base,20)) * 1rem)) 0!important;margin-bottom:calc(-1*var(--cds-global-space-5,calc((8 / var(--cds-global-base,20)) * 1rem)))!important;margin-top:calc(-1*calc(var(--cds-global-space-6,calc((12 / var(--cds-global-base,20)) * 1rem)) - var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem))))!important}`;export default t;
+//# sourceMappingURL=control-label.element.scss.js.map

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

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

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 import { ControlStatus } from '../utils/interfaces.js';
 import { ValidityStateKey } from '../utils/validate.js';
 /**
@@ -34,7 +34,7 @@ export declare class CdsControlMessage extends LitElement {
      */
     error: ValidityStateKey;
     protected disabled: boolean;
-    render(): import("lit-element").TemplateResult;
-    static get styles(): import("lit-element").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): import("lit").CSSResultGroup[];
     connectedCallback(): void;
 }