@cds/core 5.2.1 → 5.4.1

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

@@ -1,10 +1,15 @@
-/// <reference types="@types/resize-observer-browser" />
-import { LitElement } from 'lit-element';
+import { LitElement, TemplateResult } from 'lit';
 import { EventEmitter } from '@cds/core/internal';
 import { CdsControlMessage } from './../control-message/control-message.element.js';
 import { ControlStatus, ControlLayout, ControlWidth } from './../utils/interfaces.js';
 import { CdsInternalControlLabel } from '../control-label/control-label.element.js';
 import { CdsControlAction } from '../control-action/control-action.element.js';
+export declare const enum ControlLabelLayout {
+    default = "default",
+    ariaLabel = "aria-label",
+    inputGroup = "input-group",
+    hiddenLabel = "hidden-label"
+}
 /**
  * Generic Control
  *
@@ -18,8 +23,9 @@ import { CdsControlAction } from '../control-action/control-action.element.js';
  *   <input type="text" />
  * </cds-control>
  * ```
- *
+ * @element cds-control
  * @slot - For projecting input and label
+ * @cssprop --label-width
  */
 export declare class CdsControl extends LitElement {
     /**
@@ -49,15 +55,14 @@ export declare class CdsControl extends LitElement {
     get layout(): ControlLayout;
     set layout(value: ControlLayout);
     private _layout;
-    private inputHasAriaLabel;
     protected focused: boolean;
     protected disabled: boolean;
     protected readonly: boolean;
     protected fixedControlWidth: boolean;
     protected supportsPrefixSuffixActions: boolean;
     protected get isRTL(): boolean;
-    /** @private Used for hiding label for input groups */
-    hiddenLabel: boolean;
+    /** @private */
+    labelLayout: ControlLabelLayout;
     /** @private Used for control/form groups */
     inputControl: HTMLInputElement;
     protected label: HTMLLabelElement;
@@ -72,14 +77,14 @@ export declare class CdsControl extends LitElement {
     private messageSlot;
     layoutChange: EventEmitter<ControlLayout>;
     protected observers: (MutationObserver | ResizeObserver)[];
-    static get styles(): import("lit-element").CSSResult[];
-    render(): import("lit-element").TemplateResult;
-    protected get inputTemplate(): import("lit-element").TemplateResult;
-    protected get prefixDefaultTemplate(): import("lit-element").TemplateResult;
-    protected get suffixDefaultTemplate(): import("lit-element").TemplateResult;
+    static get styles(): import("lit").CSSResultGroup[];
+    render(): TemplateResult<1>;
+    protected get inputTemplate(): TemplateResult<1>;
+    protected get prefixDefaultTemplate(): TemplateResult | null;
+    protected get suffixDefaultTemplate(): TemplateResult | null;
     private get hasControlActions();
     private get primaryLabelTemplate();
-    protected get messagesTemplate(): import("lit-element").TemplateResult;
+    protected get messagesTemplate(): TemplateResult<1>;
     private get prefixTemplate();
     private get suffixTemplate();
     constructor();
@@ -93,7 +98,6 @@ export declare class CdsControl extends LitElement {
     private setActionOffsetPadding;
     get layoutStable(): boolean;
     private setupResponsive;
-    private setupHiddenLabel;
-    private setupInputAriaLabel;
+    private setupLabelLayout;
     private assignSlotIfInControlGroup;
 }

package/forms/control/control.element.js

@@ -1,334 +1,5 @@
-/*
- * 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, childrenUpdateComplete, getElementLanguageDirection, event, describeElementByElements, updateComponentLayout, internalProperty, syncProps, pxToRem, getElementUpdates, } 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.element.css.js';
-import { syncHTML5Validation } from '../utils/validate.js';
-import { associateInputToDatalist, getStatusIcon, associateInputAndLabel, controlIsWrapped, formLayouts, defaultFormLayout, defaultControlWidth, getCurrentMessageStatus, } from '../utils/index.js';
-/**
- * Generic Control
- *
- * ```typescript
- * import '@cds/core/forms/register.js';
- * ```
- *
- * ```html
- * <cds-control>
- *   <label>control</label>
- *   <input type="text" />
- * </cds-control>
- * ```
- *
- * @slot - For projecting input and label
- */
-export class CdsControl extends LitElement {
-    constructor() {
-        super();
-        /**
-         * @type {neutral | error | success}
-         * Set the status of form control validation
-         */
-        this.status = 'neutral';
-        /**
-         * @type {stretch | shrink}
-         * Adjust the control from the default full width or the browser default width
-         */
-        this.controlWidth = defaultControlWidth;
-        /**
-         * Set the validate attribute to sync with HTML5 native validation
-         * https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
-         */
-        this.validate = false;
-        /**
-         * 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._layout = defaultFormLayout;
-        this.inputHasAriaLabel = false;
-        this.focused = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.fixedControlWidth = false;
-        this.supportsPrefixSuffixActions = true;
-        /** @private Used for hiding label for input groups */
-        this.hiddenLabel = false;
-        this.observers = [];
-        ClarityIcons.addIcons(exclamationCircleIcon, checkCircleIcon);
-    }
-    /**
-     * @type {vertical | horizontal | compact}
-     * Set to adjust the default control layout. When `responsive` is true this will be the largest size to scale to.
-     */
-    get layout() {
-        return this._layout;
-    }
-    set layout(value) {
-        const oldValue = this._layout;
-        this._layout = value ? value.replace('-inline', '') : defaultFormLayout; // auto convert any form-layouts from parent groups
-        this.requestUpdate('layout', oldValue);
-    }
-    get isRTL() {
-        return getElementLanguageDirection(this) === 'rtl';
-    }
-    static get styles() {
-        return [baseStyles, styles];
-    }
-    render() {
-        var _a;
-        return html `
-      ${this.hiddenLabel ? html `<span cds-layout="display:screen-reader-only"><slot name="label"></slot></span>` : ''}
-      <div
-        cds-layout="${this.layout === 'vertical' ? 'vertical gap:sm' : 'horizontal gap:lg'} align:stretch"
-        class="private-host ${this.isRTL ? 'rtl' : ''}"
-      >
-        ${this.primaryLabelTemplate}
-        <div
-          cds-layout="
-          ${this.layout === 'compact' ? 'horizontal' : 'vertical'}
-          ${this.controlWidth === 'stretch' && !this.fixedControlWidth ? 'align:horizontal-stretch' : ''}
-          ${((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) ? 'gap:sm' : ''}"
-        >
-          <div cds-layout="horizontal gap:sm wrap:none">
-            <div
-              cds-layout="horizontal align:top wrap:none ${this.controlWidth === 'shrink' || this.fixedControlWidth
-            ? 'align:shrink'
-            : 'align:horizontal-stretch'}"
-              class="input-container"
-            >
-              ${this.inputTemplate} ${this.prefixTemplate}
-              <slot name="input"></slot>
-              ${this.suffixTemplate}
-            </div>
-            ${this.hiddenLabel ? '' : getStatusIcon(this.status)}
-          </div>
-          ${this.messagesTemplate}
-        </div>
-      </div>
-    `;
-    }
-    get inputTemplate() {
-        return html ``;
-    }
-    get prefixDefaultTemplate() {
-        return html ``;
-    }
-    get suffixDefaultTemplate() {
-        return html ``;
-    }
-    get hasControlActions() {
-        return (this.controlActions.length ||
-            this.prefixDefaultTemplate.getHTML().length ||
-            this.suffixDefaultTemplate.getHTML().length);
-    }
-    get primaryLabelTemplate() {
-        return html `
-      ${!this.inputHasAriaLabel && !this.hiddenLabel
-            ? html ` <cds-internal-control-label
-            .disabled="${this.disabled}"
-            cds-layout="align:shrink align:top"
-            action="primary"
-          >
-            <slot name="label"></slot>
-          </cds-internal-control-label>`
-            : ''}
-    `;
-    }
-    get messagesTemplate() {
-        return html `
-      <div cds-layout="${this.layout === 'compact' ? 'align:shrink' : ''}" class="messages">
-        <slot name="message"></slot>
-      </div>
-    `;
-    }
-    get prefixTemplate() {
-        return html `
-      <div cds-layout="align:shrink align:vertical-center" class="prefix">
-        <div cds-layout="horizontal gap:xs">
-          ${this.prefixDefaultTemplate}
-          <slot name="prefix"></slot>
-        </div>
-      </div>
-    `;
-    }
-    get suffixTemplate() {
-        return html `
-      <div cds-layout="align:shrink align:vertical-center" class="suffix">
-        <div cds-layout="horizontal gap:xs">
-          <slot name="suffix"></slot>
-          ${this.suffixDefaultTemplate}
-        </div>
-      </div>
-    `;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute('cds-control', '');
-    }
-    firstUpdated(props) {
-        super.firstUpdated(props);
-        associateInputAndLabel(this.inputControl, this.label, this.inputControlId);
-        associateInputToDatalist(this.inputControl, this.datalistControl);
-        this.setupHostAttributes();
-        this.setupHTML5Validation();
-        this.setActionOffsetPadding();
-        this.setupResponsive();
-        this.setupDescribedByUpdates();
-        this.setupHiddenLabel();
-        this.setupInputAriaLabel();
-        this.assignSlotIfInControlGroup();
-    }
-    updated(props) {
-        super.updated(props);
-        this.messages.forEach(message => syncProps(message, this, { disabled: props.has('disabled') }));
-        syncProps(this.inputControl, this, { disabled: props.has('disabled') });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.observers.forEach(o => o.disconnect());
-    }
-    setupDescribedByUpdates() {
-        var _a;
-        (_a = this.messageSlot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', async () => {
-            describeElementByElements(this.inputControl, Array.from(this.messages));
-            getCurrentMessageStatus(Array.from(this.messages)).then(s => (this.status = s));
-        });
-    }
-    setupHostAttributes() {
-        this.inputControl.addEventListener('focusin', () => (this.focused = true));
-        this.inputControl.addEventListener('focusout', () => (this.focused = false));
-        this.observers.push(getElementUpdates(this.inputControl, 'disabled', (value) => (this.disabled = value === '' ? true : value)), getElementUpdates(this.inputControl, 'readonly', (value) => (this.readonly = value === '' ? true : value)));
-    }
-    setupHTML5Validation() {
-        var _a, _b;
-        if (!((_b = (_a = this.inputControl) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.noValidate) && this.validate) {
-            syncHTML5Validation(this, Array.from(this.messages));
-        }
-    }
-    async setActionOffsetPadding() {
-        await childrenUpdateComplete(this.controlActions);
-        if (this.supportsPrefixSuffixActions && this.hasControlActions) {
-            const start = pxToRem(this.prefixAction.getBoundingClientRect().width + 6);
-            const end = pxToRem(this.suffixAction.getBoundingClientRect().width + 6);
-            this.inputControl.style.setProperty('padding-left', this.isRTL ? end : start, 'important');
-            this.inputControl.style.setProperty('padding-right', this.isRTL ? start : end, 'important');
-        }
-    }
-    get layoutStable() {
-        return this.hiddenLabel || !controlIsWrapped(this.inputControl, this.controlLabel, this.layout);
-    }
-    setupResponsive() {
-        if (this.responsive && !this.hiddenLabel && this.controlLabel) {
-            const layoutConfig = { layouts: formLayouts, initialLayout: this.layout };
-            const observer = updateComponentLayout(this, layoutConfig, () => this.layoutChange.emit(this.layout, { bubbles: true }));
-            this.observers.push(observer);
-        }
-    }
-    setupHiddenLabel() {
-        var _a, _b;
-        if ((_b = (_a = this.label) === null || _a === void 0 ? void 0 : _a.getAttribute('cds-layout')) === null || _b === void 0 ? void 0 : _b.includes('display:screen-reader-only')) {
-            this.hiddenLabel = true;
-        }
-    }
-    setupInputAriaLabel() {
-        if (this.inputControl) {
-            this.inputHasAriaLabel =
-                typeof this.inputControl.hasAttribute === 'function' && this.inputControl.hasAttribute('aria-label');
-        }
-    }
-    assignSlotIfInControlGroup() {
-        var _a;
-        if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('cds-control-group')) {
-            this.setAttribute('slot', 'controls');
-        }
-    }
-}
-__decorate([
-    property({ type: String })
-], CdsControl.prototype, "status", void 0);
-__decorate([
-    property({ type: String })
-], CdsControl.prototype, "controlWidth", void 0);
-__decorate([
-    property({ type: Boolean })
-], CdsControl.prototype, "validate", void 0);
-__decorate([
-    property({ type: Boolean })
-], CdsControl.prototype, "responsive", void 0);
-__decorate([
-    property({ type: String })
-], CdsControl.prototype, "layout", null);
-__decorate([
-    internalProperty({ type: Boolean, reflect: true })
-], CdsControl.prototype, "focused", void 0);
-__decorate([
-    internalProperty({ type: Boolean, reflect: true })
-], CdsControl.prototype, "disabled", void 0);
-__decorate([
-    internalProperty({ type: Boolean, reflect: true })
-], CdsControl.prototype, "readonly", void 0);
-__decorate([
-    internalProperty()
-], CdsControl.prototype, "fixedControlWidth", void 0);
-__decorate([
-    internalProperty()
-], CdsControl.prototype, "supportsPrefixSuffixActions", void 0);
-__decorate([
-    internalProperty()
-], CdsControl.prototype, "isRTL", null);
-__decorate([
-    internalProperty()
-], CdsControl.prototype, "hiddenLabel", void 0);
-__decorate([
-    querySlot('input, select, textarea, [cds-control]', {
-        required: 'error',
-        requiredMessage: 'input element is missing',
-        assign: 'input',
-    })
-], CdsControl.prototype, "inputControl", void 0);
-__decorate([
-    querySlot('label', {
-        required: 'error',
-        requiredMessage: 'To meet a11y standards either a <label> or input[aria-label] should be provided.',
-        assign: 'label',
-        exemptOn: _this => {
-            var _a;
-            return (_a = _this.inputControl) === null || _a === void 0 ? void 0 : _a.hasAttribute('aria-label');
-        },
-    })
-], CdsControl.prototype, "label", void 0);
-__decorate([
-    query('cds-internal-control-label[action=primary]')
-], CdsControl.prototype, "controlLabel", void 0);
-__decorate([
-    querySlot('datalist')
-], CdsControl.prototype, "datalistControl", void 0);
-__decorate([
-    querySlotAll('cds-control-message')
-], CdsControl.prototype, "messages", void 0);
-__decorate([
-    querySlotAll('cds-control-action')
-], CdsControl.prototype, "controlActions", void 0);
-__decorate([
-    id()
-], CdsControl.prototype, "inputControlId", void 0);
-__decorate([
-    query('.prefix')
-], CdsControl.prototype, "prefixAction", void 0);
-__decorate([
-    query('.suffix')
-], CdsControl.prototype, "suffixAction", void 0);
-__decorate([
-    query('.messages')
-], CdsControl.prototype, "messageSlot", void 0);
-__decorate([
-    event()
-], CdsControl.prototype, "layoutChange", void 0);
-//# sourceMappingURL=control.element.js.map
+import{__decorate as t}from"tslib";import{LitElement as e,html as i}from"lit";import{query as s}from"lit/decorators/query.js";import{getElementLanguageDirection as o,baseStyles as l,syncProps as a,describeElementByElements as r,getElementUpdates as n,childrenUpdateComplete as d,pxToRem as p,updateComponentLayout as u,property as h,state as c,querySlot as y,querySlotAll as f,id as v,event as m}from"@cds/core/internal";import{ClarityIcons as b}from"@cds/core/icon/icon.service.js";import{exclamationCircleIcon as g}from"@cds/core/icon/shapes/exclamation-circle.js";import{checkCircleIcon as x}from"@cds/core/icon/shapes/check-circle.js";import C from"./control.element.scss.js";import{syncHTML5Validation as L}from"../utils/validate.js";import{defaultControlWidth as A,defaultFormLayout as T,getStatusIcon as $,associateInputAndLabel as k,associateInputToDatalist as S,getCurrentMessageStatus as B,controlIsWrapped as R,formLayouts as z}from"../utils/index.js";var D;!function(t){t.default="default",t.ariaLabel="aria-label",t.inputGroup="input-group",t.hiddenLabel="hidden-label"}(D||(D={}));class W extends e{constructor(){super(),this.status="neutral",this.controlWidth=A,this.validate=!1,this.responsive=!0,this._layout=T,this.focused=!1,this.disabled=!1,this.readonly=!1,this.fixedControlWidth=!1,this.supportsPrefixSuffixActions=!0,this.labelLayout=D.default,this.observers=[],b.addIcons(g,x)}get layout(){return this._layout}set layout(t){const e=this._layout;this._layout=t?t.replace("-inline",""):T,this.requestUpdate("layout",e)}get isRTL(){return"rtl"===o(this)}static get styles(){return[l,C]}render(){var t;return i`${this.labelLayout===D.hiddenLabel||this.labelLayout===D.inputGroup?i`<span cds-layout="display:screen-reader-only"><slot name="label"></slot></span>`:""}<div cds-layout="${"vertical"===this.layout?"vertical gap:sm":"horizontal gap:lg"} align:stretch" class="private-host ${this.isRTL?"rtl":""}">${this.primaryLabelTemplate}<div cds-layout="
+          ${"compact"===this.layout?"horizontal":"vertical"}
+          ${"stretch"!==this.controlWidth||this.fixedControlWidth?"":"align:horizontal-stretch"}
+          ${(null===(t=this.messages)||void 0===t?void 0:t.length)?"gap:sm":""}"><div cds-layout="horizontal gap:sm wrap:none"><div cds-layout="horizontal align:top wrap:none ${"shrink"===this.controlWidth||this.fixedControlWidth?"align:shrink":"align:horizontal-stretch"}" class="input-container">${this.inputTemplate} ${this.prefixTemplate}<slot name="input"></slot>${this.suffixTemplate}</div>${this.labelLayout!==D.inputGroup?$(this.status):""}</div>${this.messagesTemplate}</div></div>`}get inputTemplate(){return i``}get prefixDefaultTemplate(){return null}get suffixDefaultTemplate(){return null}get hasControlActions(){return this.controlActions.length>0||this.prefixDefaultTemplate||this.suffixDefaultTemplate}get primaryLabelTemplate(){return i`${this.labelLayout===D.default?i`<cds-internal-control-label .disabled="${this.disabled}" cds-layout="align:shrink align:top" action="primary"><slot name="label"></slot></cds-internal-control-label>`:""}`}get messagesTemplate(){return i`<div cds-layout="${"compact"===this.layout?"align:shrink":""}" class="messages"><slot name="message"></slot></div>`}get prefixTemplate(){return i`<div cds-layout="align:shrink align:vertical-center" class="prefix"><div cds-layout="horizontal gap:xs">${this.prefixDefaultTemplate}<slot name="prefix"></slot></div></div>`}get suffixTemplate(){return i`<div cds-layout="align:shrink align:vertical-center" class="suffix"><div cds-layout="horizontal gap:xs"><slot name="suffix"></slot>${this.suffixDefaultTemplate}</div></div>`}connectedCallback(){super.connectedCallback(),this.setAttribute("cds-control","")}firstUpdated(t){super.firstUpdated(t),k(this.inputControl,this.label,this.inputControlId),S(this.inputControl,this.datalistControl),this.setupHostAttributes(),this.setupHTML5Validation(),this.setActionOffsetPadding(),this.setupResponsive(),this.setupDescribedByUpdates(),this.setupLabelLayout(),this.assignSlotIfInControlGroup()}updated(t){super.updated(t),this.messages.forEach((e=>a(e,this,{disabled:t.has("disabled")}))),a(this.inputControl,this,{disabled:t.has("disabled")})}disconnectedCallback(){super.disconnectedCallback(),this.observers.forEach((t=>t.disconnect()))}setupDescribedByUpdates(){var t;null===(t=this.messageSlot)||void 0===t||t.addEventListener("slotchange",(async()=>{r(this.inputControl,Array.from(this.messages)),B(Array.from(this.messages)).then((t=>this.status=t))}))}setupHostAttributes(){this.inputControl.addEventListener("focusin",(()=>this.focused=!0)),this.inputControl.addEventListener("focusout",(()=>this.focused=!1)),this.observers.push(n(this.inputControl,"disabled",(t=>this.disabled=""===t||t)),n(this.inputControl,"readonly",(t=>this.readonly=""===t||t)))}setupHTML5Validation(){var t,e;!(null===(e=null===(t=this.inputControl)||void 0===t?void 0:t.form)||void 0===e?void 0:e.noValidate)&&this.validate&&L(this,Array.from(this.messages))}async setActionOffsetPadding(){if(await d(this.controlActions),this.supportsPrefixSuffixActions&&this.hasControlActions){const t=p(this.prefixAction.getBoundingClientRect().width+6),e=p(this.suffixAction.getBoundingClientRect().width+6);this.inputControl.style.setProperty("padding-left",this.isRTL?e:t,"important"),this.inputControl.style.setProperty("padding-right",this.isRTL?t:e,"important")}}get layoutStable(){return this.labelLayout!==D.default||!R(this.inputControl,this.controlLabel,this.layout)}setupResponsive(){if(this.responsive&&this.labelLayout===D.default&&this.controlLabel){const t={layouts:z,initialLayout:this.layout},e=u(this,t,(()=>this.layoutChange.emit(this.layout,{bubbles:!0})));this.observers.push(e)}}setupLabelLayout(){var t,e;(null===(e=null===(t=this.label)||void 0===t?void 0:t.getAttribute("cds-layout"))||void 0===e?void 0:e.includes("display:screen-reader-only"))&&(this.labelLayout=D.hiddenLabel),this.inputControl.hasAttribute("aria-label")&&(this.labelLayout=D.ariaLabel)}assignSlotIfInControlGroup(){var t;(null===(t=this.parentElement)||void 0===t?void 0:t.hasAttribute("cds-control-group"))&&this.setAttribute("slot","controls")}}t([h({type:String})],W.prototype,"status",void 0),t([h({type:String})],W.prototype,"controlWidth",void 0),t([h({type:Boolean})],W.prototype,"validate",void 0),t([h({type:Boolean})],W.prototype,"responsive",void 0),t([h({type:String})],W.prototype,"layout",null),t([c({type:Boolean,reflect:!0})],W.prototype,"focused",void 0),t([c({type:Boolean,reflect:!0})],W.prototype,"disabled",void 0),t([c({type:Boolean,reflect:!0})],W.prototype,"readonly",void 0),t([c()],W.prototype,"fixedControlWidth",void 0),t([c()],W.prototype,"supportsPrefixSuffixActions",void 0),t([c()],W.prototype,"isRTL",null),t([c()],W.prototype,"labelLayout",void 0),t([y("input, select, textarea, [cds-control]",{required:"error",requiredMessage:"input element is missing",assign:"input"})],W.prototype,"inputControl",void 0),t([y("label",{required:"error",requiredMessage:"To meet a11y standards either a <label> or input[aria-label] should be provided.",assign:"label",exemptOn:t=>{var e;return null===(e=t.inputControl)||void 0===e?void 0:e.hasAttribute("aria-label")}})],W.prototype,"label",void 0),t([s("cds-internal-control-label[action=primary]")],W.prototype,"controlLabel",void 0),t([y("datalist")],W.prototype,"datalistControl",void 0),t([f("cds-control-message")],W.prototype,"messages",void 0),t([f("cds-control-action")],W.prototype,"controlActions",void 0),t([v()],W.prototype,"inputControlId",void 0),t([s(".prefix")],W.prototype,"prefixAction",void 0),t([s(".suffix")],W.prototype,"suffixAction",void 0),t([s(".messages")],W.prototype,"messageSlot",void 0),t([m()],W.prototype,"layoutChange",void 0);export{W as CdsControl,D as ControlLabelLayout};
+//# sourceMappingURL=control.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"control.element.js","sourceRoot":"","sources":["../../../../src/forms/control/control.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  childrenUpdateComplete,\n  getElementLanguageDirection,\n  event,\n  EventEmitter,\n  describeElementByElements,\n  updateComponentLayout,\n  internalProperty,\n  syncProps,\n  pxToRem,\n  getElementUpdates,\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 { CdsControlMessage } from './../control-message/control-message.element.js';\nimport { styles } from './control.element.css.js';\nimport { ControlStatus, ControlLayout, ControlWidth } from './../utils/interfaces.js';\nimport { syncHTML5Validation } from '../utils/validate.js';\nimport {\n  associateInputToDatalist,\n  getStatusIcon,\n  associateInputAndLabel,\n  controlIsWrapped,\n  formLayouts,\n  defaultFormLayout,\n  defaultControlWidth,\n  getCurrentMessageStatus,\n} from '../utils/index.js';\nimport { CdsInternalControlLabel } from '../control-label/control-label.element.js';\nimport { CdsControlAction } from '../control-action/control-action.element.js';\n\n/**\n * Generic Control\n *\n * ```typescript\n * import '@cds/core/forms/register.js';\n * ```\n *\n * ```html\n * <cds-control>\n *   <label>control</label>\n *   <input type=\"text\" />\n * </cds-control>\n * ```\n *\n * @slot - For projecting input and label\n */\nexport class CdsControl extends LitElement {\n  /**\n   * @type {neutral | error | success}\n   * Set the status of form control validation\n   */\n  @property({ type: String }) status: ControlStatus = 'neutral';\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   * 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  /**\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   * @type {vertical | horizontal | compact}\n   * Set to adjust the default control layout. When `responsive` is true this will be the largest size to scale to.\n   */\n  @property({ type: String })\n  get layout(): ControlLayout {\n    return this._layout;\n  }\n\n  set layout(value: ControlLayout) {\n    const oldValue = this._layout;\n    this._layout = value ? (value.replace('-inline', '') as ControlLayout) : defaultFormLayout; // auto convert any form-layouts from parent groups\n    this.requestUpdate('layout', oldValue);\n  }\n\n  private _layout: ControlLayout = defaultFormLayout;\n\n  private inputHasAriaLabel = false;\n\n  @internalProperty({ type: Boolean, reflect: true }) protected focused = false;\n\n  @internalProperty({ type: Boolean, reflect: true }) protected disabled = false;\n\n  @internalProperty({ type: Boolean, reflect: true }) protected readonly = false;\n\n  @internalProperty() protected fixedControlWidth = false;\n\n  @internalProperty() protected supportsPrefixSuffixActions = true;\n\n  @internalProperty()\n  protected get isRTL() {\n    return getElementLanguageDirection(this) === 'rtl';\n  }\n\n  /** @private Used for hiding label for input groups */\n  @internalProperty() hiddenLabel = false;\n\n  /** @private Used for control/form groups */\n  @querySlot('input, select, textarea, [cds-control]', {\n    required: 'error',\n    requiredMessage: 'input element is missing',\n    assign: 'input',\n  })\n  inputControl: HTMLInputElement;\n\n  @querySlot('label', {\n    required: 'error',\n    requiredMessage: 'To meet a11y standards either a <label> or input[aria-label] should be provided.',\n    assign: 'label',\n    exemptOn: _this => {\n      return _this.inputControl?.hasAttribute('aria-label');\n    },\n  })\n  protected label: HTMLLabelElement;\n\n  /** @private */\n  @query('cds-internal-control-label[action=primary]') controlLabel: CdsInternalControlLabel;\n\n  @querySlot('datalist') protected datalistControl: HTMLDataListElement;\n\n  @querySlotAll('cds-control-message') protected messages: NodeListOf<CdsControlMessage>;\n\n  @querySlotAll('cds-control-action') protected controlActions: NodeListOf<CdsControlAction>;\n\n  @id() protected inputControlId: string;\n\n  @query('.prefix') private prefixAction: HTMLElement;\n\n  @query('.suffix') private suffixAction: HTMLElement;\n\n  @query('.messages') private messageSlot: HTMLElement;\n\n  @event() layoutChange: EventEmitter<ControlLayout>;\n\n  protected observers: (MutationObserver | ResizeObserver)[] = [];\n\n  static get styles() {\n    return [baseStyles, styles];\n  }\n\n  render() {\n    return html`\n      ${this.hiddenLabel ? html`<span cds-layout=\"display:screen-reader-only\"><slot name=\"label\"></slot></span>` : ''}\n      <div\n        cds-layout=\"${this.layout === 'vertical' ? 'vertical gap:sm' : 'horizontal gap:lg'} align:stretch\"\n        class=\"private-host ${this.isRTL ? 'rtl' : ''}\"\n      >\n        ${this.primaryLabelTemplate}\n        <div\n          cds-layout=\"\n          ${this.layout === 'compact' ? 'horizontal' : 'vertical'}\n          ${this.controlWidth === 'stretch' && !this.fixedControlWidth ? 'align:horizontal-stretch' : ''}\n          ${this.messages?.length ? 'gap:sm' : ''}\"\n        >\n          <div cds-layout=\"horizontal gap:sm wrap:none\">\n            <div\n              cds-layout=\"horizontal align:top wrap:none ${this.controlWidth === 'shrink' || this.fixedControlWidth\n                ? 'align:shrink'\n                : 'align:horizontal-stretch'}\"\n              class=\"input-container\"\n            >\n              ${this.inputTemplate} ${this.prefixTemplate}\n              <slot name=\"input\"></slot>\n              ${this.suffixTemplate}\n            </div>\n            ${this.hiddenLabel ? '' : getStatusIcon(this.status)}\n          </div>\n          ${this.messagesTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  protected get inputTemplate() {\n    return html``;\n  }\n\n  protected get prefixDefaultTemplate() {\n    return html``;\n  }\n\n  protected get suffixDefaultTemplate() {\n    return html``;\n  }\n\n  private get hasControlActions() {\n    return (\n      this.controlActions.length ||\n      this.prefixDefaultTemplate.getHTML().length ||\n      this.suffixDefaultTemplate.getHTML().length\n    );\n  }\n\n  private get primaryLabelTemplate() {\n    return html`\n      ${!this.inputHasAriaLabel && !this.hiddenLabel\n        ? html` <cds-internal-control-label\n            .disabled=\"${this.disabled}\"\n            cds-layout=\"align:shrink align:top\"\n            action=\"primary\"\n          >\n            <slot name=\"label\"></slot>\n          </cds-internal-control-label>`\n        : ''}\n    `;\n  }\n\n  protected get messagesTemplate() {\n    return html`\n      <div cds-layout=\"${this.layout === 'compact' ? 'align:shrink' : ''}\" class=\"messages\">\n        <slot name=\"message\"></slot>\n      </div>\n    `;\n  }\n\n  private get prefixTemplate() {\n    return html`\n      <div cds-layout=\"align:shrink align:vertical-center\" class=\"prefix\">\n        <div cds-layout=\"horizontal gap:xs\">\n          ${this.prefixDefaultTemplate}\n          <slot name=\"prefix\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private get suffixTemplate() {\n    return html`\n      <div cds-layout=\"align:shrink align:vertical-center\" class=\"suffix\">\n        <div cds-layout=\"horizontal gap:xs\">\n          <slot name=\"suffix\"></slot>\n          ${this.suffixDefaultTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    ClarityIcons.addIcons(exclamationCircleIcon, checkCircleIcon);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('cds-control', '');\n  }\n\n  firstUpdated(props: Map<string, any>) {\n    super.firstUpdated(props);\n    associateInputAndLabel(this.inputControl, this.label, this.inputControlId);\n    associateInputToDatalist(this.inputControl, this.datalistControl);\n    this.setupHostAttributes();\n    this.setupHTML5Validation();\n    this.setActionOffsetPadding();\n    this.setupResponsive();\n    this.setupDescribedByUpdates();\n    this.setupHiddenLabel();\n    this.setupInputAriaLabel();\n    this.assignSlotIfInControlGroup();\n  }\n\n  updated(props: Map<string, any>) {\n    super.updated(props);\n    this.messages.forEach(message => syncProps(message, this, { disabled: props.has('disabled') }));\n\n    syncProps(this.inputControl, this, { disabled: props.has('disabled') });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.observers.forEach(o => o.disconnect());\n  }\n\n  private setupDescribedByUpdates() {\n    this.messageSlot?.addEventListener('slotchange', async () => {\n      describeElementByElements(this.inputControl, Array.from(this.messages));\n      getCurrentMessageStatus(Array.from(this.messages)).then(s => (this.status = s));\n    });\n  }\n\n  private setupHostAttributes() {\n    this.inputControl.addEventListener('focusin', () => (this.focused = true));\n    this.inputControl.addEventListener('focusout', () => (this.focused = false));\n    this.observers.push(\n      getElementUpdates(this.inputControl, 'disabled', (value: any) => (this.disabled = value === '' ? true : value)),\n      getElementUpdates(this.inputControl, 'readonly', (value: any) => (this.readonly = value === '' ? true : value))\n    );\n  }\n\n  private setupHTML5Validation() {\n    if (!this.inputControl?.form?.noValidate && this.validate) {\n      syncHTML5Validation(this, Array.from(this.messages));\n    }\n  }\n\n  private async setActionOffsetPadding() {\n    await childrenUpdateComplete(this.controlActions);\n    if (this.supportsPrefixSuffixActions && this.hasControlActions) {\n      const start = pxToRem(this.prefixAction.getBoundingClientRect().width + 6);\n      const end = pxToRem(this.suffixAction.getBoundingClientRect().width + 6);\n      this.inputControl.style.setProperty('padding-left', this.isRTL ? end : start, 'important');\n      this.inputControl.style.setProperty('padding-right', this.isRTL ? start : end, 'important');\n    }\n  }\n\n  get layoutStable() {\n    return this.hiddenLabel || !controlIsWrapped(this.inputControl, this.controlLabel, this.layout);\n  }\n\n  private setupResponsive() {\n    if (this.responsive && !this.hiddenLabel && this.controlLabel) {\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  private setupHiddenLabel() {\n    if (this.label?.getAttribute('cds-layout')?.includes('display:screen-reader-only')) {\n      this.hiddenLabel = true;\n    }\n  }\n\n  private setupInputAriaLabel() {\n    if (this.inputControl) {\n      this.inputHasAriaLabel =\n        typeof this.inputControl.hasAttribute === 'function' && this.inputControl.hasAttribute('aria-label');\n    }\n  }\n\n  private assignSlotIfInControlGroup() {\n    if (this.parentElement?.hasAttribute('cds-control-group')) {\n      this.setAttribute('slot', 'controls');\n    }\n  }\n}\n"]}
+{"version":3,"file":"control.element.js","sources":["../../../../src/forms/control/control.element.ts"],"sourcesContent":null,"names":["ControlLabelLayout","CdsControl","LitElement","[object Object]","super","this","status","controlWidth","defaultControlWidth","validate","responsive","_layout","defaultFormLayout","focused","disabled","readonly","fixedControlWidth","supportsPrefixSuffixActions","labelLayout","default","observers","ClarityIcons","addIcons","exclamationCircleIcon","checkCircleIcon","layout","value","oldValue","replace","requestUpdate","isRTL","getElementLanguageDirection","styles","baseStyles","_a","html","hiddenLabel","inputGroup","primaryLabelTemplate","messages","length","inputTemplate","prefixTemplate","suffixTemplate","getStatusIcon","messagesTemplate","prefixDefaultTemplate","suffixDefaultTemplate","hasControlActions","controlActions","connectedCallback","setAttribute","props","firstUpdated","associateInputAndLabel","inputControl","label","inputControlId","associateInputToDatalist","datalistControl","setupHostAttributes","setupHTML5Validation","setActionOffsetPadding","setupResponsive","setupDescribedByUpdates","setupLabelLayout","assignSlotIfInControlGroup","updated","forEach","message","syncProps","has","disconnectedCallback","o","disconnect","messageSlot","addEventListener","async","describeElementByElements","Array","from","getCurrentMessageStatus","then","s","push","getElementUpdates","_b","form","noValidate","syncHTML5Validation","childrenUpdateComplete","start","pxToRem","prefixAction","getBoundingClientRect","width","end","suffixAction","style","setProperty","layoutStable","controlIsWrapped","controlLabel","layoutConfig","layouts","formLayouts","initialLayout","observer","updateComponentLayout","layoutChange","emit","bubbles","getAttribute","includes","hasAttribute","ariaLabel","parentElement","__decorate","property","type","String","prototype","Boolean","state","reflect","querySlot","required","requiredMessage","assign","exemptOn","_this","query","querySlotAll","id","event"],"mappings":"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"}

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

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

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

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

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

@@ -22,8 +22,8 @@ export declare class CdsControlAction extends CdsBaseButton {
     readonly: boolean;
     ariaLabel: string;
     protected icon: CdsIcon;
-    static get styles(): import("lit-element").CSSResult[];
-    render(): import("lit-element").TemplateResult;
+    static get styles(): import("lit").CSSResultGroup[];
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     private syncAria;
     updated(props: Map<string, any>): void;

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

@@ -1,87 +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, property } from 'lit-element';
-import { assignSlotNames, baseStyles, CdsBaseButton, hasAttributeAndIsNotEmpty, querySlot, setOrRemoveAttribute, } from '@cds/core/internal';
-import { styles } from './control-action.element.css.js';
-import { LogService } from '@cds/core/internal';
-/**
- * Control Action
- *
- * ```typescript
- * import '@cds/core/forms/register.js';
- * ```
- *
- * ```html
- * <cds-control-action>
- *
- * </cds-control-action>
- * ```
- * @internal
- * @element cds-control-action
- * @slot - For projecting text content or cds-icon
- */
-export class CdsControlAction extends CdsBaseButton {
-    constructor() {
-        super(...arguments);
-        this.readonly = false;
-        this.ariaLabel = '';
-    }
-    static get styles() {
-        return [baseStyles, styles];
-    }
-    render() {
-        return html `
-      <div class="private-host">
-        <slot></slot>
-      </div>
-    `;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.syncAria();
-    }
-    syncAria() {
-        const iAmReadonly = this.readonly;
-        const iHaveAriaLabel = hasAttributeAndIsNotEmpty(this, 'aria-label');
-        setOrRemoveAttribute(this, ['aria-hidden', 'true'], () => {
-            return iAmReadonly && !iHaveAriaLabel;
-        });
-    }
-    updated(props) {
-        super.updated(props);
-        if (props.has('action')) {
-            this.setSlotLocation();
-        }
-        if (props.has('readonly') || props.has('ariaLabel')) {
-            this.validateAriaLabel();
-            this.syncAria();
-        }
-    }
-    setSlotLocation() {
-        var _a;
-        assignSlotNames([this, (_a = this.action) !== null && _a !== void 0 ? _a : false]);
-    }
-    validateAriaLabel() {
-        var _a;
-        if (!this.readonly && !((_a = this.getAttribute('aria-label')) === null || _a === void 0 ? void 0 : _a.length)) {
-            LogService.warn('A aria-label is required for interactive cds-control-actions', this);
-        }
-    }
-}
-__decorate([
-    property({ type: String })
-], CdsControlAction.prototype, "action", void 0);
-__decorate([
-    property({ type: Boolean })
-], CdsControlAction.prototype, "readonly", void 0);
-__decorate([
-    property({ type: String })
-], CdsControlAction.prototype, "ariaLabel", void 0);
-__decorate([
-    querySlot('cds-icon')
-], CdsControlAction.prototype, "icon", void 0);
-//# sourceMappingURL=control-action.element.js.map
+import{__decorate as t}from"tslib";import{html as i}from"lit";import{CdsBaseButton as a,baseStyles as e,hasAttributeAndIsNotEmpty as o,setOrRemoveAttribute as r,assignSlotNames as s,LogService as l,property as n,querySlot as c}from"@cds/core/internal";import d from"./control-action.element.scss.js";class p extends a{constructor(){super(...arguments),this.readonly=!1,this.ariaLabel=""}static get styles(){return[e,d]}render(){return i`<div class="private-host"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.syncAria()}syncAria(){const t=this.readonly,i=o(this,"aria-label");r(this,["aria-hidden","true"],(()=>t&&!i))}updated(t){super.updated(t),t.has("action")&&this.setSlotLocation(),(t.has("readonly")||t.has("ariaLabel"))&&(this.validateAriaLabel(),this.syncAria())}setSlotLocation(){var t;s([this,null!==(t=this.action)&&void 0!==t&&t])}validateAriaLabel(){var t;this.readonly||(null===(t=this.getAttribute("aria-label"))||void 0===t?void 0:t.length)||l.warn("A aria-label is required for interactive cds-control-actions",this)}}t([n({type:String})],p.prototype,"action",void 0),t([n({type:Boolean})],p.prototype,"readonly",void 0),t([n({type:String})],p.prototype,"ariaLabel",void 0),t([c("cds-icon")],p.prototype,"icon",void 0);export{p as CdsControlAction};
+//# sourceMappingURL=control-action.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"control-action.element.js","sourceRoot":"","sources":["../../../../src/forms/control-action/control-action.element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,EACL,eAAe,EACf,UAAU,EACV,aAAa,EACb,yBAAyB,EACzB,SAAS,EACT,oBAAoB,GACrB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,OAAO,gBAAiB,SAAQ,aAAa;IAAnD;;QAI+B,aAAQ,GAAG,KAAK,CAAC;QAElB,cAAS,GAAG,EAAE,CAAC;IAkD7C,CAAC;IA9CC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAEO,QAAQ;QACd,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC;QAClC,MAAM,cAAc,GAAG,yBAAyB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;QACrE,oBAAoB,CAAC,IAAI,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,GAAG,EAAE;YACvD,OAAO,WAAW,IAAI,CAAC,cAAc,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CAAC,KAAuB;QAC7B,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACvB,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;QAED,IAAI,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YACnD,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;IACH,CAAC;IAED,eAAe;;QACb,eAAe,CAAC,CAAC,IAAI,QAAE,IAAI,CAAC,MAAM,mCAAI,KAAK,CAAC,CAAC,CAAC;IAChD,CAAC;IAEO,iBAAiB;;QACvB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,QAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,0CAAE,MAAM,CAAA,EAAE;YAC9D,UAAU,CAAC,IAAI,CAAC,8DAA8D,EAAE,IAAI,CAAC,CAAC;SACvF;IACH,CAAC;CACF;AAtD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAuC;AAErC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAkB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAgB;AAEpB;IAAtB,SAAS,CAAC,UAAU,CAAC;8CAAyB","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, property } from 'lit-element';\nimport { CdsIcon } from '@cds/core/icon/icon.element.js';\nimport {\n  assignSlotNames,\n  baseStyles,\n  CdsBaseButton,\n  hasAttributeAndIsNotEmpty,\n  querySlot,\n  setOrRemoveAttribute,\n} from '@cds/core/internal';\nimport { styles } from './control-action.element.css.js';\nimport { LogService } from '@cds/core/internal';\n\n/**\n * Control Action\n *\n * ```typescript\n * import '@cds/core/forms/register.js';\n * ```\n *\n * ```html\n * <cds-control-action>\n *\n * </cds-control-action>\n * ```\n * @internal\n * @element cds-control-action\n * @slot - For projecting text content or cds-icon\n */\nexport class CdsControlAction extends CdsBaseButton {\n  /** Set the action type placement within the supporting input control */\n  @property({ type: String }) action: 'label' | 'prefix' | 'suffix';\n\n  @property({ type: Boolean }) readonly = false;\n\n  @property({ type: String }) ariaLabel = '';\n\n  @querySlot('cds-icon') protected icon: CdsIcon;\n\n  static get styles() {\n    return [baseStyles, styles];\n  }\n\n  render() {\n    return html`\n      <div class=\"private-host\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.syncAria();\n  }\n\n  private syncAria() {\n    const iAmReadonly = this.readonly;\n    const iHaveAriaLabel = hasAttributeAndIsNotEmpty(this, 'aria-label');\n    setOrRemoveAttribute(this, ['aria-hidden', 'true'], () => {\n      return iAmReadonly && !iHaveAriaLabel;\n    });\n  }\n\n  updated(props: Map<string, any>) {\n    super.updated(props);\n    if (props.has('action')) {\n      this.setSlotLocation();\n    }\n\n    if (props.has('readonly') || props.has('ariaLabel')) {\n      this.validateAriaLabel();\n      this.syncAria();\n    }\n  }\n\n  setSlotLocation() {\n    assignSlotNames([this, this.action ?? false]);\n  }\n\n  private validateAriaLabel() {\n    if (!this.readonly && !this.getAttribute('aria-label')?.length) {\n      LogService.warn('A aria-label is required for interactive cds-control-actions', this);\n    }\n  }\n}\n"]}
+{"version":3,"file":"control-action.element.js","sources":["../../../../src/forms/control-action/control-action.element.ts"],"sourcesContent":null,"names":["CdsControlAction","CdsBaseButton","[object Object]","super","arguments","this","readonly","ariaLabel","styles","baseStyles","html","connectedCallback","syncAria","iAmReadonly","iHaveAriaLabel","hasAttributeAndIsNotEmpty","setOrRemoveAttribute","props","updated","has","setSlotLocation","validateAriaLabel","_a","assignSlotNames","action","getAttribute","length","LogService","warn","__decorate","property","type","String","prototype","Boolean","querySlot"],"mappings":"4SA0BO,MAAMA,UAAyBC,EAClCC,cACIC,SAASC,WACTC,KAAKC,UAAW,EAChBD,KAAKE,UAAY,GAErBC,oBACI,MAAO,CAACC,EAAYD,GAExBN,SACI,OAAOQ,CAAK,gDAMhBR,oBACIC,MAAMQ,oBACNN,KAAKO,WAETV,WACI,MAAMW,EAAcR,KAAKC,SACnBQ,EAAiBC,EAA0BV,KAAM,cACvDW,EAAqBX,KAAM,CAAC,cAAe,SAAS,IACzCQ,IAAgBC,IAG/BZ,QAAQe,GACJd,MAAMe,QAAQD,GACVA,EAAME,IAAI,WACVd,KAAKe,mBAELH,EAAME,IAAI,aAAeF,EAAME,IAAI,gBACnCd,KAAKgB,oBACLhB,KAAKO,YAGbV,kBACI,IAAIoB,EACJC,EAAgB,CAAClB,KAA6B,QAAtBiB,EAAKjB,KAAKmB,cAA2B,IAAPF,GAAgBA,IAE1EpB,oBACI,IAAIoB,EACCjB,KAAKC,WAAyD,QAA1CgB,EAAKjB,KAAKoB,aAAa,qBAAkC,IAAPH,OAAgB,EAASA,EAAGI,SACnGC,EAAWC,KAAK,+DAAgEvB,OAI5FwB,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBhC,EAAiBiC,UAAW,cAAU,GACzCJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,WAClBlC,EAAiBiC,UAAW,gBAAY,GAC3CJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBhC,EAAiBiC,UAAW,iBAAa,GAC5CJ,EAAW,CACPM,EAAU,aACXnC,EAAiBiC,UAAW,YAAQ"}

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

@@ -0,0 +1,2 @@
+import{css as a}from"lit";var c=a`:host{pointer-events:none;display:inline-block}:host([role=button]){cursor:pointer;min-width:var(--cds-global-space-9,calc((24 / var(--cds-global-base,20)) * 1rem));pointer-events:initial}.private-host{color:var(--cds-global-typography-color-300,var(--cds-global-color-construction-800,#2d4048));font-size:var(--cds-global-typography-font-size-3,calc((13 / var(--cds-global-base,20)) * 1rem));display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;line-height:calc(var(--cds-global-space-9,calc((24 / var(--cds-global-base,20)) * 1rem)) - var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem)))}::slotted(cds-icon){width:calc(var(--cds-global-space-9,calc((24 / var(--cds-global-base,20)) * 1rem)) - var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem)));height:calc(var(--cds-global-space-9,calc((24 / var(--cds-global-base,20)) * 1rem)) - var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem)));margin-bottom:var(--cds-global-space-1,calc((1 / var(--cds-global-base,20)) * 1rem));pointer-events:none}::slotted(cds-icon[shape=angle]){height:var(--cds-global-space-8,calc((18 / var(--cds-global-base,20)) * 1rem));width:var(--cds-global-space-8,calc((18 / var(--cds-global-base,20)) * 1rem));margin-right:var(--cds-global-space-3,calc((4 / var(--cds-global-base,20)) * 1rem))}:host(:hover) ::slotted(cds-icon){--color:var(--cds-alias-object-interaction-color-active, var(--cds-global-color-construction-1000, #1b2b32))}:host([_disabled]) ::slotted(cds-icon){--color:var(--cds-alias-object-interaction-color-disabled, var(--cds-global-color-construction-300, #aeb8bc))}`;export default c;
+//# sourceMappingURL=control-action.element.scss.js.map

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

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