@cds/core 6.0.3 → 6.1.1

package/alert/alert.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{LitElement as e,html as s}from"lit";import{I18nService as r,setAttributes as a,syncDefinedProps as n,baseStyles as o,property as i,state as c,id as l,i18n as p,querySlot as d,querySlotAll as h,closable as u}from"@cds/core/internal";import{ClarityIcons as g}from"@cds/core/icon/icon.service.js";import{infoStandardIcon as y}from"@cds/core/icon/shapes/info-standard.js";import{successStandardIcon as m}from"@cds/core/icon/shapes/success-standard.js";import{warningStandardIcon as b}from"@cds/core/icon/shapes/warning-standard.js";import{errorStandardIcon as f}from"@cds/core/icon/shapes/error-standard.js";import{helpIcon as $}from"@cds/core/icon/shapes/help.js";import w from"./alert.element.scss.js";function v(t){const e={info:[g.getIconNameFromShape(y),r.keys.alert.info],success:[g.getIconNameFromShape(m),r.keys.alert.success],warning:[g.getIconNameFromShape(b),r.keys.alert.warning],danger:[g.getIconNameFromShape(f),r.keys.alert.danger],unknown:[g.getIconNameFromShape($),r.keys.alert.info],loading:["loading",r.keys.alert.loading]};return e[t]?e[t]:e.info}function k(t){return["info","success","warning","danger","unknown"].map((t=>F(t))).indexOf(t)>-1}function z(t){return v(t)[1]}function F(t){return v(t)[0]}function S(t,e,s){const r="align:stretch";switch(e){case"light":return"";case"banner":switch(t){case"wrapper":case"actions":return s?r:"";case"content":return"align:shrink align:vertical-center";default:return""}default:switch(t){case"wrapper":case"content":return r;case"actions":return"align:shrink";default:return""}}}let j=class extends e{constructor(){super();this.size="default",this.type="light",this.closable=!1,this.status="neutral",this.i18n=r.keys.alert,g.addIcons(y,f,m,b,$)}connectedCallback(){super.connectedCallback(),a(this,["aria-describedby",this.idForAriaDescriber],["role","region"])}updated(t){super.updated(t),n(t,this,[this.alertActions])}get parentGroupHasPager(){return"banner"===this.type&&!!this.parentElement.pager}render(){return s`<div class="private-host" cds-layout="${"banner"===this.type?"horizontal wrap:none gap:xs align:vertical-center align:horizontal-center":"horizontal wrap:none gap:xs"}">${"banner"!==this.type||this.parentGroupHasPager?s``:s`<span class="alert-spacer" cds-layout="align:stretch"> </span>`} <span class="alert-icon-wrapper" cds-layout="horizontal">${"loading"===this.status?s`<cds-progress-circle class="alert-spinner" status="info" size="${"banner"===this.type?"20":"18"}" aria-label="${z(this.status)}" role="img" cds-layout="align:horizontal-center"></cds-progress-circle>`:s`<slot name="alert-icon"><cds-icon class="alert-status-icon" shape="${F(this.status)}" role="img" aria-label="${z(this.status)}" cds-layout="align:horizontal-center"></cds-icon></slot>`} </span><span class="alert-content-wrapper" cds-layout="horizontal wrap:none ${S("wrapper",this.type,this.parentGroupHasPager)}"><span id="${this.idForAriaDescriber}" role="status" class="alert-content" cds-layout="${S("content",this.type,this.parentGroupHasPager)}"><slot></slot>${"light"===this.type?s`<slot name="actions"></slot>`:s``} </span>${"light"===this.type?s``:s`<span class="alert-actions-wrapper" cds-layout="${this.alertActions?"p-l:md":""} ${S("actions",this.type,this.parentGroupHasPager)}"><slot name="actions"></slot></span>`} </span>${"banner"!==this.type||this.parentGroupHasPager?s``:s`<span class="alert-spacer" cds-layout="align:stretch"> </span>`} ${"light"!==this.type&&this.closable?s`<slot name="close-button"><cds-internal-close-button icon-size="${"banner"===this.type?"20":"16"}" @click="${()=>this.closableController.close(!0)}" aria-label="${this.i18n.closeButtonAriaLabel}"></cds-internal-close-button></slot>`:s``}</div>`}static get styles(){return[o,w]}};t([i({type:String})],j.prototype,"size",void 0),t([c({type:String,reflect:!0})],j.prototype,"type",void 0),t([l()],j.prototype,"idForAriaDescriber",void 0),t([i({type:Boolean})],j.prototype,"closable",void 0),t([i({type:String})],j.prototype,"status",void 0),t([p()],j.prototype,"i18n",void 0),t([d("cds-alert-actions")],j.prototype,"alertActions",void 0),t([h("cds-icon",{assign:"alert-icon"})],j.prototype,"alertIcons",void 0),t([d("cds-internal-close-button",{assign:"close-button"})],j.prototype,"closeButton",void 0),j=t([u({escape:!1})],j);export{j as CdsAlert,S as getAlertContentLayout,z as getIconStatusLabel,F as getIconStatusShape,v as getIconStatusTuple,k as iconShapeIsAlertStatusType};
+import{__decorate as t}from"tslib";import{LitElement as e,html as s}from"lit";import{I18nService as a,setAttributes as r,syncDefinedProps as n,baseStyles as o,property as i,state as c,id as l,i18n as p,querySlot as d,querySlotAll as h,closable as u}from"@cds/core/internal";import{ClarityIcons as g}from"@cds/core/icon/icon.service.js";import{infoStandardIcon as y}from"@cds/core/icon/shapes/info-standard.js";import{successStandardIcon as m}from"@cds/core/icon/shapes/success-standard.js";import{warningStandardIcon as b}from"@cds/core/icon/shapes/warning-standard.js";import{errorStandardIcon as f}from"@cds/core/icon/shapes/error-standard.js";import{helpIcon as w}from"@cds/core/icon/shapes/help.js";import $ from"./alert.element.scss.js";function v(t){const e={info:[g.getIconNameFromShape(y),a.keys.alert.info],success:[g.getIconNameFromShape(m),a.keys.alert.success],warning:[g.getIconNameFromShape(b),a.keys.alert.warning],danger:[g.getIconNameFromShape(f),a.keys.alert.danger],unknown:[g.getIconNameFromShape(w),a.keys.alert.info],loading:["loading",a.keys.alert.loading]};return e[t]?e[t]:e.info}function k(t){return["info","success","warning","danger","unknown"].map((t=>F(t))).indexOf(t)>-1}function z(t){return v(t)[1]}function F(t){return v(t)[0]}function S(t,e,s){const a="align:stretch";switch(e){case"light":return"";case"banner":switch(t){case"wrapper":case"actions":return s?a:"";case"content":return"align:shrink align:vertical-center";default:return""}default:switch(t){case"wrapper":case"content":return a;case"actions":return"align:shrink";default:return""}}}let j=class extends e{constructor(){super();this.size="default",this.type="light",this.closable=!1,this.status="neutral",this.i18n=a.keys.alert,g.addIcons(y,f,m,b,w)}connectedCallback(){super.connectedCallback(),r(this,["aria-describedby",this.idForAriaDescriber],["role","region"])}updated(t){super.updated(t),n(t,this,[this.alertActions])}get parentGroupHasPager(){return"banner"===this.type&&!!this.parentElement.pager}render(){return s`<div class="private-host" cds-layout="${"banner"===this.type?"horizontal wrap:none gap:xs align:vertical-center align:horizontal-center":"horizontal wrap:none gap:xs"}">${"banner"!==this.type||this.parentGroupHasPager?s``:s`<span class="alert-spacer" cds-layout="align:stretch"> </span>`} <span class="alert-icon-wrapper" cds-layout="horizontal">${"loading"===this.status?s`<cds-progress-circle class="alert-spinner" status="info" size="${"banner"===this.type?"20":"18"}" aria-label="${z(this.status)}" role="img" cds-layout="align:horizontal-center"></cds-progress-circle>`:s`<slot name="alert-icon"><cds-icon class="alert-status-icon" shape="${F(this.status)}" role="img" aria-label="${z(this.status)}" cds-layout="align:horizontal-center"></cds-icon></slot>`} </span><span class="alert-content-wrapper" cds-layout="horizontal wrap:none ${S("wrapper",this.type,this.parentGroupHasPager)}"><span id="${this.idForAriaDescriber}" role="status" class="alert-content" cds-layout="${S("content",this.type,this.parentGroupHasPager)}"><slot></slot>${"light"===this.type?s`<slot name="actions"></slot>`:s``} </span>${"light"===this.type?s``:s`<span class="alert-actions-wrapper" cds-layout="${this.alertActions?"p-l:md":""} ${S("actions",this.type,this.parentGroupHasPager)}"><slot name="actions"></slot></span>`} </span>${"banner"!==this.type||this.parentGroupHasPager?s``:s`<span class="alert-spacer" cds-layout="align:stretch"> </span>`} ${"light"!==this.type&&this.closable?s`<span class="alert-close-wrapper"><slot name="close-button"><cds-internal-close-button icon-size="${"banner"===this.type?"20":"16"}" @click="${()=>this.closableController.close(!0)}" aria-label="${this.i18n.closeButtonAriaLabel}"></cds-internal-close-button></slot></span>`:s``}</div>`}static get styles(){return[o,$]}};t([i({type:String})],j.prototype,"size",void 0),t([c({type:String,reflect:!0})],j.prototype,"type",void 0),t([l()],j.prototype,"idForAriaDescriber",void 0),t([i({type:Boolean})],j.prototype,"closable",void 0),t([i({type:String})],j.prototype,"status",void 0),t([p()],j.prototype,"i18n",void 0),t([d("cds-alert-actions")],j.prototype,"alertActions",void 0),t([h("cds-icon",{assign:"alert-icon"})],j.prototype,"alertIcons",void 0),t([d("cds-internal-close-button",{assign:"close-button"})],j.prototype,"closeButton",void 0),j=t([u({escape:!1})],j);export{j as CdsAlert,S as getAlertContentLayout,z as getIconStatusLabel,F as getIconStatusShape,v as getIconStatusTuple,k as iconShapeIsAlertStatusType};
 //# sourceMappingURL=alert.element.js.map

package/alert/alert.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.element.js","sources":["../../../src/alert/alert.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { baseStyles, property, querySlot, querySlotAll, setAttributes, syncDefinedProps, state, id, I18nService, i18n, closable, } from '@cds/core/internal';\nimport { ClarityIcons } from '@cds/core/icon/icon.service.js';\nimport { infoStandardIcon } from '@cds/core/icon/shapes/info-standard.js';\nimport { successStandardIcon } from '@cds/core/icon/shapes/success-standard.js';\nimport { warningStandardIcon } from '@cds/core/icon/shapes/warning-standard.js';\nimport { errorStandardIcon } from '@cds/core/icon/shapes/error-standard.js';\nimport { helpIcon } from '@cds/core/icon/shapes/help.js';\nimport styles from './alert.element.scss';\nexport function getIconStatusTuple(status) {\n    const statusIcons = {\n        info: [ClarityIcons.getIconNameFromShape(infoStandardIcon), I18nService.keys.alert.info],\n        success: [ClarityIcons.getIconNameFromShape(successStandardIcon), I18nService.keys.alert.success],\n        warning: [ClarityIcons.getIconNameFromShape(warningStandardIcon), I18nService.keys.alert.warning],\n        danger: [ClarityIcons.getIconNameFromShape(errorStandardIcon), I18nService.keys.alert.danger],\n        unknown: [ClarityIcons.getIconNameFromShape(helpIcon), I18nService.keys.alert.info],\n        loading: ['loading', I18nService.keys.alert.loading],\n    };\n    return statusIcons[status] ? statusIcons[status] : statusIcons.info;\n}\nexport function iconShapeIsAlertStatusType(shape) {\n    const statusShapes = ['info', 'success', 'warning', 'danger', 'unknown'].map(s => {\n        return getIconStatusShape(s);\n    });\n    return statusShapes.indexOf(shape) > -1;\n}\nexport function getIconStatusLabel(status) {\n    return getIconStatusTuple(status)[1];\n}\nexport function getIconStatusShape(status) {\n    return getIconStatusTuple(status)[0];\n}\nexport function getAlertContentLayout(containerType, alertGroupType, alertGroupHasPager) {\n    const fillLayoutValue = 'align:stretch';\n    switch (alertGroupType) {\n        case 'light':\n            return '';\n        case 'banner':\n            switch (containerType) {\n                case 'wrapper':\n                    return alertGroupHasPager ? fillLayoutValue : '';\n                case 'content':\n                    return 'align:shrink align:vertical-center';\n                case 'actions':\n                    return alertGroupHasPager ? fillLayoutValue : '';\n                default:\n                    return '';\n            }\n        default:\n            switch (containerType) {\n                case 'wrapper':\n                    return fillLayoutValue;\n                case 'content':\n                    return fillLayoutValue;\n                case 'actions':\n                    return 'align:shrink';\n                default:\n                    return '';\n            }\n    }\n}\n/**\n * Alerts are banners that communicate a message with a severity attached to it.\n * They grab the user’s attention to provide critical information needed in context.\n *\n * Alerts outside of a cds-alert-group or cds-app-alert-group component will be\n * displayed as a \"lightweight alert\". Lightweight alerts, by default, provide no\n * close button component and they inherit no status (a.k.a. success, danger, etc.).\n *\n * Alerts inside a cds-alert-group component inherit their status from the containing\n * alert group.\n *\n * Alerts inside a cds-app-alert-group component inherit their status as a default from\n * the containing app-alert group, although it can be overridden on individual alerts.\n *\n * ```typescript\n * import '@cds/core/alert/register.js';\n * ```\n *\n * ```html\n *   <cds-alert>\n *     Single Alert\n *     <cds-alert-actions>\n *       buttons, links\n *     </cds-alert-actions>\n *   </cds-alert>\n * ```\n *\n * @element cds-alert\n * @slot - Content slot for inside the alert\n * @event closeChange - notify when the user has clicked the dismiss button\n * @cssprop --color\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border-color\n * @cssprop --icon-color\n * @cssprop --close-icon-color\n * @cssprop --close-icon-color-hover\n */\nlet CdsAlert = class CdsAlert extends LitElement {\n    constructor() {\n        super();\n        /**\n         * Sets the overall height and width of the alert and icon based on value\n         * @type {default | sm}\n         */\n        this.size = 'default';\n        /**\n         * Sets up the buttons, layouts, close-button and other properties based on the alert group container\n         * Internal Use Only\n         * @private\n         */\n        this.type = 'light';\n        /**\n         * If false, the alert will not render the close button.\n         *\n         * Lightweight alerts do not display close buttons\n         */\n        this.closable = false;\n        /**\n         * Sets the color of the alert from a predefined list of statuses\n         * @type {neutral | info | success | warning | danger | alt | loading}\n         */\n        this.status = 'neutral';\n        this.i18n = I18nService.keys.alert;\n        ClarityIcons.addIcons(infoStandardIcon, errorStandardIcon, successStandardIcon, warningStandardIcon, helpIcon);\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        setAttributes(this, ['aria-describedby', this.idForAriaDescriber], ['role', 'region']);\n    }\n    updated(props) {\n        super.updated(props);\n        syncDefinedProps(props, this, [this.alertActions]);\n    }\n    get parentGroupHasPager() {\n        return this.type === 'banner' && !!this.parentElement.pager;\n    }\n    render() {\n        return html `\n      <div\n        class=\"private-host\"\n        cds-layout=\"${this.type === 'banner'\n            ? 'horizontal wrap:none gap:xs align:vertical-center align:horizontal-center'\n            : 'horizontal wrap:none gap:xs'}\"\n      >\n        ${this.type === 'banner' && !this.parentGroupHasPager\n            ? html `<span class=\"alert-spacer\" cds-layout=\"align:stretch\">&nbsp;</span>`\n            : html ``}\n        <span class=\"alert-icon-wrapper\" cds-layout=\"horizontal\">\n          ${this.status === 'loading'\n            ? html `<cds-progress-circle\n                class=\"alert-spinner\"\n                status=\"info\"\n                size=\"${this.type === 'banner' ? '20' : '18'}\"\n                aria-label=\"${getIconStatusLabel(this.status)}\"\n                role=\"img\"\n                cds-layout=\"align:horizontal-center\"\n              ></cds-progress-circle>`\n            : html `<slot name=\"alert-icon\"\n                ><cds-icon\n                  class=\"alert-status-icon\"\n                  shape=\"${getIconStatusShape(this.status)}\"\n                  role=\"img\"\n                  aria-label=\"${getIconStatusLabel(this.status)}\"\n                  cds-layout=\"align:horizontal-center\"\n                ></cds-icon\n              ></slot>`}\n        </span>\n        <span\n          class=\"alert-content-wrapper\"\n          cds-layout=\"horizontal wrap:none ${getAlertContentLayout('wrapper', this.type, this.parentGroupHasPager)}\"\n        >\n          <span\n            id=\"${this.idForAriaDescriber}\"\n            role=\"status\"\n            class=\"alert-content\"\n            cds-layout=\"${getAlertContentLayout('content', this.type, this.parentGroupHasPager)}\"\n          >\n            <slot></slot>\n            ${this.type === 'light' ? html `<slot name=\"actions\"></slot>` : html ``}\n          </span>\n          ${this.type === 'light'\n            ? html ``\n            : html `<span\n                class=\"alert-actions-wrapper\"\n                cds-layout=\"${this.alertActions ? 'p-l:md' : ''} ${getAlertContentLayout('actions', this.type, this.parentGroupHasPager)}\"\n                ><slot name=\"actions\"></slot\n              ></span>`}\n        </span>\n\n        ${this.type === 'banner' && !this.parentGroupHasPager\n            ? html `<span class=\"alert-spacer\" cds-layout=\"align:stretch\">&nbsp;</span>`\n            : html ``}\n        ${this.type !== 'light' && this.closable\n            ? html `<slot name=\"close-button\">\n              <cds-internal-close-button\n                icon-size=\"${this.type === 'banner' ? '20' : '16'}\"\n                @click=\"${() => this.closableController.close(true)}\"\n                aria-label=\"${this.i18n.closeButtonAriaLabel}\"\n              ></cds-internal-close-button\n            ></slot>`\n            : html ``}\n      </div>\n    `;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsAlert.prototype, \"size\", void 0);\n__decorate([\n    state({ type: String, reflect: true })\n], CdsAlert.prototype, \"type\", void 0);\n__decorate([\n    id()\n], CdsAlert.prototype, \"idForAriaDescriber\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsAlert.prototype, \"closable\", void 0);\n__decorate([\n    property({ type: String })\n], CdsAlert.prototype, \"status\", void 0);\n__decorate([\n    i18n()\n], CdsAlert.prototype, \"i18n\", void 0);\n__decorate([\n    querySlot('cds-alert-actions')\n], CdsAlert.prototype, \"alertActions\", void 0);\n__decorate([\n    querySlotAll('cds-icon', { assign: 'alert-icon' })\n], CdsAlert.prototype, \"alertIcons\", void 0);\n__decorate([\n    querySlot('cds-internal-close-button', { assign: 'close-button' })\n], CdsAlert.prototype, \"closeButton\", void 0);\nCdsAlert = __decorate([\n    closable({ escape: false })\n], CdsAlert);\nexport { CdsAlert };\n"],"names":["getIconStatusTuple","status","statusIcons","info","ClarityIcons","getIconNameFromShape","infoStandardIcon","I18nService","keys","alert","success","successStandardIcon","warning","warningStandardIcon","danger","errorStandardIcon","unknown","helpIcon","loading","iconShapeIsAlertStatusType","shape","map","s","getIconStatusShape","indexOf","getIconStatusLabel","getAlertContentLayout","containerType","alertGroupType","alertGroupHasPager","fillLayoutValue","CdsAlert","LitElement","constructor","super","this","size","type","closable","i18n","addIcons","connectedCallback","setAttributes","idForAriaDescriber","updated","props","syncDefinedProps","alertActions","parentGroupHasPager","parentElement","pager","render","html","closableController","close","closeButtonAriaLabel","styles","baseStyles","__decorate","property","String","prototype","state","reflect","id","Boolean","querySlot","querySlotAll","assign","escape"],"mappings":"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"}
+{"version":3,"file":"alert.element.js","sources":["../../../src/alert/alert.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { baseStyles, property, querySlot, querySlotAll, setAttributes, syncDefinedProps, state, id, I18nService, i18n, closable, } from '@cds/core/internal';\nimport { ClarityIcons } from '@cds/core/icon/icon.service.js';\nimport { infoStandardIcon } from '@cds/core/icon/shapes/info-standard.js';\nimport { successStandardIcon } from '@cds/core/icon/shapes/success-standard.js';\nimport { warningStandardIcon } from '@cds/core/icon/shapes/warning-standard.js';\nimport { errorStandardIcon } from '@cds/core/icon/shapes/error-standard.js';\nimport { helpIcon } from '@cds/core/icon/shapes/help.js';\nimport styles from './alert.element.scss';\nexport function getIconStatusTuple(status) {\n    const statusIcons = {\n        info: [ClarityIcons.getIconNameFromShape(infoStandardIcon), I18nService.keys.alert.info],\n        success: [ClarityIcons.getIconNameFromShape(successStandardIcon), I18nService.keys.alert.success],\n        warning: [ClarityIcons.getIconNameFromShape(warningStandardIcon), I18nService.keys.alert.warning],\n        danger: [ClarityIcons.getIconNameFromShape(errorStandardIcon), I18nService.keys.alert.danger],\n        unknown: [ClarityIcons.getIconNameFromShape(helpIcon), I18nService.keys.alert.info],\n        loading: ['loading', I18nService.keys.alert.loading],\n    };\n    return statusIcons[status] ? statusIcons[status] : statusIcons.info;\n}\nexport function iconShapeIsAlertStatusType(shape) {\n    const statusShapes = ['info', 'success', 'warning', 'danger', 'unknown'].map(s => {\n        return getIconStatusShape(s);\n    });\n    return statusShapes.indexOf(shape) > -1;\n}\nexport function getIconStatusLabel(status) {\n    return getIconStatusTuple(status)[1];\n}\nexport function getIconStatusShape(status) {\n    return getIconStatusTuple(status)[0];\n}\nexport function getAlertContentLayout(containerType, alertGroupType, alertGroupHasPager) {\n    const fillLayoutValue = 'align:stretch';\n    switch (alertGroupType) {\n        case 'light':\n            return '';\n        case 'banner':\n            switch (containerType) {\n                case 'wrapper':\n                    return alertGroupHasPager ? fillLayoutValue : '';\n                case 'content':\n                    return 'align:shrink align:vertical-center';\n                case 'actions':\n                    return alertGroupHasPager ? fillLayoutValue : '';\n                default:\n                    return '';\n            }\n        default:\n            switch (containerType) {\n                case 'wrapper':\n                    return fillLayoutValue;\n                case 'content':\n                    return fillLayoutValue;\n                case 'actions':\n                    return 'align:shrink';\n                default:\n                    return '';\n            }\n    }\n}\n/**\n * Alerts are banners that communicate a message with a severity attached to it.\n * They grab the user’s attention to provide critical information needed in context.\n *\n * Alerts outside of a cds-alert-group or cds-app-alert-group component will be\n * displayed as a \"lightweight alert\". Lightweight alerts, by default, provide no\n * close button component and they inherit no status (a.k.a. success, danger, etc.).\n *\n * Alerts inside a cds-alert-group component inherit their status from the containing\n * alert group.\n *\n * Alerts inside a cds-app-alert-group component inherit their status as a default from\n * the containing app-alert group, although it can be overridden on individual alerts.\n *\n * ```typescript\n * import '@cds/core/alert/register.js';\n * ```\n *\n * ```html\n *   <cds-alert>\n *     Single Alert\n *     <cds-alert-actions>\n *       buttons, links\n *     </cds-alert-actions>\n *   </cds-alert>\n * ```\n *\n * @element cds-alert\n * @slot - Content slot for inside the alert\n * @event closeChange - notify when the user has clicked the dismiss button\n * @cssprop --color\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border-color\n * @cssprop --icon-color\n * @cssprop --close-icon-color\n * @cssprop --close-icon-color-hover\n */\nlet CdsAlert = class CdsAlert extends LitElement {\n    constructor() {\n        super();\n        /**\n         * Sets the overall height and width of the alert and icon based on value\n         * @type {default | sm}\n         */\n        this.size = 'default';\n        /**\n         * Sets up the buttons, layouts, close-button and other properties based on the alert group container\n         * Internal Use Only\n         * @private\n         */\n        this.type = 'light';\n        /**\n         * If false, the alert will not render the close button.\n         *\n         * Lightweight alerts do not display close buttons\n         */\n        this.closable = false;\n        /**\n         * Sets the color of the alert from a predefined list of statuses\n         * @type {neutral | info | success | warning | danger | alt | loading}\n         */\n        this.status = 'neutral';\n        this.i18n = I18nService.keys.alert;\n        ClarityIcons.addIcons(infoStandardIcon, errorStandardIcon, successStandardIcon, warningStandardIcon, helpIcon);\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        setAttributes(this, ['aria-describedby', this.idForAriaDescriber], ['role', 'region']);\n    }\n    updated(props) {\n        super.updated(props);\n        syncDefinedProps(props, this, [this.alertActions]);\n    }\n    get parentGroupHasPager() {\n        return this.type === 'banner' && !!this.parentElement.pager;\n    }\n    render() {\n        return html `\n      <div\n        class=\"private-host\"\n        cds-layout=\"${this.type === 'banner'\n            ? 'horizontal wrap:none gap:xs align:vertical-center align:horizontal-center'\n            : 'horizontal wrap:none gap:xs'}\"\n      >\n        ${this.type === 'banner' && !this.parentGroupHasPager\n            ? html `<span class=\"alert-spacer\" cds-layout=\"align:stretch\">&nbsp;</span>`\n            : html ``}\n        <span class=\"alert-icon-wrapper\" cds-layout=\"horizontal\">\n          ${this.status === 'loading'\n            ? html `<cds-progress-circle\n                class=\"alert-spinner\"\n                status=\"info\"\n                size=\"${this.type === 'banner' ? '20' : '18'}\"\n                aria-label=\"${getIconStatusLabel(this.status)}\"\n                role=\"img\"\n                cds-layout=\"align:horizontal-center\"\n              ></cds-progress-circle>`\n            : html `<slot name=\"alert-icon\"\n                ><cds-icon\n                  class=\"alert-status-icon\"\n                  shape=\"${getIconStatusShape(this.status)}\"\n                  role=\"img\"\n                  aria-label=\"${getIconStatusLabel(this.status)}\"\n                  cds-layout=\"align:horizontal-center\"\n                ></cds-icon\n              ></slot>`}\n        </span>\n        <span\n          class=\"alert-content-wrapper\"\n          cds-layout=\"horizontal wrap:none ${getAlertContentLayout('wrapper', this.type, this.parentGroupHasPager)}\"\n        >\n          <span\n            id=\"${this.idForAriaDescriber}\"\n            role=\"status\"\n            class=\"alert-content\"\n            cds-layout=\"${getAlertContentLayout('content', this.type, this.parentGroupHasPager)}\"\n          >\n            <slot></slot>\n            ${this.type === 'light' ? html `<slot name=\"actions\"></slot>` : html ``}\n          </span>\n          ${this.type === 'light'\n            ? html ``\n            : html `<span\n                class=\"alert-actions-wrapper\"\n                cds-layout=\"${this.alertActions ? 'p-l:md' : ''} ${getAlertContentLayout('actions', this.type, this.parentGroupHasPager)}\"\n                ><slot name=\"actions\"></slot\n              ></span>`}\n        </span>\n\n        ${this.type === 'banner' && !this.parentGroupHasPager\n            ? html `<span class=\"alert-spacer\" cds-layout=\"align:stretch\">&nbsp;</span>`\n            : html ``}\n        ${this.type !== 'light' && this.closable\n            ? html `<span class=\"alert-close-wrapper\"\n              ><slot name=\"close-button\">\n                <cds-internal-close-button\n                  icon-size=\"${this.type === 'banner' ? '20' : '16'}\"\n                  @click=\"${() => this.closableController.close(true)}\"\n                  aria-label=\"${this.i18n.closeButtonAriaLabel}\"\n                >\n                </cds-internal-close-button> </slot\n            ></span>`\n            : html ``}\n      </div>\n    `;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsAlert.prototype, \"size\", void 0);\n__decorate([\n    state({ type: String, reflect: true })\n], CdsAlert.prototype, \"type\", void 0);\n__decorate([\n    id()\n], CdsAlert.prototype, \"idForAriaDescriber\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsAlert.prototype, \"closable\", void 0);\n__decorate([\n    property({ type: String })\n], CdsAlert.prototype, \"status\", void 0);\n__decorate([\n    i18n()\n], CdsAlert.prototype, \"i18n\", void 0);\n__decorate([\n    querySlot('cds-alert-actions')\n], CdsAlert.prototype, \"alertActions\", void 0);\n__decorate([\n    querySlotAll('cds-icon', { assign: 'alert-icon' })\n], CdsAlert.prototype, \"alertIcons\", void 0);\n__decorate([\n    querySlot('cds-internal-close-button', { assign: 'close-button' })\n], CdsAlert.prototype, \"closeButton\", void 0);\nCdsAlert = __decorate([\n    closable({ escape: false })\n], CdsAlert);\nexport { CdsAlert };\n"],"names":["getIconStatusTuple","status","statusIcons","info","ClarityIcons","getIconNameFromShape","infoStandardIcon","I18nService","keys","alert","success","successStandardIcon","warning","warningStandardIcon","danger","errorStandardIcon","unknown","helpIcon","loading","iconShapeIsAlertStatusType","shape","map","s","getIconStatusShape","indexOf","getIconStatusLabel","getAlertContentLayout","containerType","alertGroupType","alertGroupHasPager","fillLayoutValue","CdsAlert","LitElement","constructor","super","this","size","type","closable","i18n","addIcons","connectedCallback","setAttributes","idForAriaDescriber","updated","props","syncDefinedProps","alertActions","parentGroupHasPager","parentElement","pager","render","html","closableController","close","closeButtonAriaLabel","styles","baseStyles","__decorate","property","String","prototype","state","reflect","id","Boolean","querySlot","querySlotAll","assign","escape"],"mappings":"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"}

package/alert/alert.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var l=a`:host{--container-padding:var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))) 0;--min-height:var(--cds-global-space-9, calc(24 * 1rem / var(--cds-global-base, 20)));--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--font-size:var(--cds-global-typography-secondary-font-size, calc(13 * 1rem / var(--cds-global-base, 20)));--font-weight:var(--cds-global-typography-secondary-font-weight, 400);--letter-spacing:var(--cds-global-typography-body-letter-spacing, -0.014286em);--icon-size:var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20)));--icon-color:var(--color);width:100%}.private-host{min-height:var(--min-height);color:var(--color)}:host([_type=banner]){--icon-size:var(--cds-global-space-9, calc(24 * 1rem / var(--cds-global-base, 20)))}.alert-status-icon,::slotted(cds-icon){height:var(--icon-size);width:var(--icon-size);--color:var(--icon-color)}cds-internal-close-button{--color:inherit}.alert-content-wrapper,.alert-icon-wrapper{display:flex;min-height:var(--cds-global-space-6,calc(12 * 1rem / var(--cds-global-base,20)));padding:var(--container-padding)}.alert-icon-wrapper{min-width:var(--icon-size)}.alert-content-wrapper{display:inline-flex;align-items:center;transform:translateY(var(--cds-global-space-1,calc(1 * 1rem / var(--cds-global-base,20))));color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);line-height:var(--cds-global-typography-body-line-height,1.42857em)}::slotted(cds-alert-actions){--action-text-color:var(--color);--action-size:var(--cds-global-typography-body-line-height, 1.42857em);display:none}:host([_type=banner]) ::slotted(cds-alert-actions),:host([_type=default]) ::slotted(cds-alert-actions){--action-size:calc(var(--min-height) - var(--cds-global-space-4, calc(6 * 1rem / var(--cds-global-base, 20))));white-space:nowrap;display:block}:host([_type=default]) cds-internal-close-button{height:var(--cds-global-space-8,calc(18 * 1rem / var(--cds-global-base,20)))}:host([_type=default]) .alert-content-wrapper{align-items:self-start}:host([_type=light][status=info]){--icon-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([_type=light][status=success]){--icon-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_type=light][status=warning]){--icon-color:var(--cds-alias-status-warning-dark, var(--cds-global-color-ochre-800, #a36500))}:host([_type=light][status=danger]){--icon-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=loading][_type=banner]) .alert-spinner,:host([status=loading][_type=default]) .alert-spinner{--ring-color:var(--cds-alias-object-opacity-200, rgba(0, 0, 0, 0.4))}:host([status=loading][_type=banner]) .alert-spinner{--fill-color:var(--icon-color)}:host([size=sm]:not([_type=banner])){--font-size:var(--cds-global-typography-font-size-1, calc(11 * 1rem / var(--cds-global-base, 20)));--letter-spacing:normal}:host([_type=banner]){--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([_type=banner][status=warning]),:host([_type=default][status=warning]){--color:var(--cds-global-color-construction-900, #21333b)}:host([_type=banner][status=warning]) cds-alert-actions,:host([_type=default][status=warning]) cds-alert-actions{--action-hover-text-color:var(--color);--action-text-color:var(--color)}:host([_type=banner]) .spinner{height:calc(var(--cds-global-space-8,calc(18 * 1rem / var(--cds-global-base,20))) + var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20))));width:calc(var(--cds-global-space-8,calc(18 * 1rem / var(--cds-global-base,20))) + var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20))));min-height:calc(var(--cds-global-space-8,calc(18 * 1rem / var(--cds-global-base,20))) + var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20))));min-width:calc(var(--cds-global-space-8,calc(18 * 1rem / var(--cds-global-base,20))) + var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20))));margin-top:var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20)))}:host([_type=banner]) cds-internal-close-button{height:var(--cds-global-space-9,calc(24 * 1rem / var(--cds-global-base,20)));margin-top:var(--cds-global-space-3,calc(4 * 1rem / var(--cds-global-base,20)))}@supports (-moz-appearance:none) and (text-emphasis:none){:host(:not([_type=banner]):not([size=sm])) .alert-content{transform:translateY(calc(-1*var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20)))))}}`;export{l as default};
+import{css as a}from"lit";var l=a`:host{--container-padding:var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))) 0;--min-height:var(--cds-global-space-9, calc(24 * 1rem / var(--cds-global-base, 20)));--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--font-size:var(--cds-global-typography-secondary-font-size, calc(13 * 1rem / var(--cds-global-base, 20)));--font-weight:var(--cds-global-typography-secondary-font-weight, 400);--letter-spacing:var(--cds-global-typography-body-letter-spacing, -0.014286em);--icon-size:var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20)));--icon-color:var(--color);width:100%}.private-host{min-height:var(--min-height);color:var(--color)}:host([_type=banner]){--icon-size:var(--cds-global-space-9, calc(24 * 1rem / var(--cds-global-base, 20)))}.alert-status-icon,::slotted(cds-icon){height:var(--icon-size);width:var(--icon-size);--color:var(--icon-color)}.alert-close-wrapper{padding:var(--container-padding);padding-bottom:0}cds-internal-close-button{--color:inherit}.alert-content-wrapper,.alert-icon-wrapper{display:flex;min-height:var(--cds-global-space-6,calc(12 * 1rem / var(--cds-global-base,20)));padding:var(--container-padding);min-width:0}.alert-icon-wrapper{min-width:var(--icon-size)}.alert-content-wrapper{display:inline-flex;align-items:center;transform:translateY(var(--cds-global-space-1,calc(1 * 1rem / var(--cds-global-base,20))));color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);line-height:var(--cds-global-typography-body-line-height,1.42857em)}.alert-content{min-width:0}::slotted(cds-alert-actions){--action-text-color:var(--color);--action-size:var(--cds-global-typography-body-line-height, 1.42857em);display:none}:host([_type=banner]) ::slotted(cds-alert-actions),:host([_type=default]) ::slotted(cds-alert-actions){--action-size:calc(var(--min-height) - var(--cds-global-space-4, calc(6 * 1rem / var(--cds-global-base, 20))));white-space:nowrap;display:block}:host([_type=default]) cds-internal-close-button{height:var(--cds-global-space-8,calc(18 * 1rem / var(--cds-global-base,20)))}:host([_type=default]) .alert-content-wrapper{align-items:self-start}:host([_type=light][status=info]){--icon-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([_type=light][status=success]){--icon-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_type=light][status=warning]){--icon-color:var(--cds-alias-status-warning-dark, var(--cds-global-color-ochre-800, #a36500))}:host([_type=light][status=danger]){--icon-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=loading][_type=banner]) .alert-spinner,:host([status=loading][_type=default]) .alert-spinner{--ring-color:var(--cds-alias-object-opacity-200, rgba(0, 0, 0, 0.4))}:host([status=loading][_type=banner]) .alert-spinner{--fill-color:var(--icon-color)}:host([size=sm]:not([_type=banner])){--font-size:var(--cds-global-typography-font-size-1, calc(11 * 1rem / var(--cds-global-base, 20)));--letter-spacing:normal}:host([_type=banner]){--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([_type=banner][status=warning]),:host([_type=default][status=warning]){--color:var(--cds-global-color-construction-900, #21333b)}:host([_type=banner][status=warning]) cds-alert-actions,:host([_type=default][status=warning]) cds-alert-actions{--action-hover-text-color:var(--color);--action-text-color:var(--color)}:host([_type=banner]) .spinner{height:calc(var(--cds-global-space-8,calc(18 * 1rem / var(--cds-global-base,20))) + var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20))));width:calc(var(--cds-global-space-8,calc(18 * 1rem / var(--cds-global-base,20))) + var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20))));min-height:calc(var(--cds-global-space-8,calc(18 * 1rem / var(--cds-global-base,20))) + var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20))));min-width:calc(var(--cds-global-space-8,calc(18 * 1rem / var(--cds-global-base,20))) + var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20))));margin-top:var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20)))}:host([_type=banner]) cds-internal-close-button{height:var(--cds-global-space-9,calc(24 * 1rem / var(--cds-global-base,20)));margin-top:var(--cds-global-space-3,calc(4 * 1rem / var(--cds-global-base,20)))}@supports (-moz-appearance:none) and (text-emphasis:none){:host(:not([_type=banner]):not([size=sm])) .alert-content{transform:translateY(calc(-1*var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20)))))}}`;export{l as default};
 //# sourceMappingURL=alert.element.scss.js.map

package/button/button.element.d.ts

@@ -64,12 +64,14 @@ export declare class CdsButton extends CdsBaseButton {
      * - `error`: shows the content of the button (in the context of application, this state is usually entered from a LOADING state. the application should show appropriate error message)
      */
     loadingState: keyof typeof ClrLoadingState;
+    get disabled(): boolean;
+    set disabled(value: boolean);
     firstUpdated(props: PropertyValues<this>): void;
     update(props: PropertyValues<this>): void;
-    private _disabled;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
     isDefaultLoadingState(state: string): boolean;
     private disableButton;
-    private enableButton;
+    private restoreButton;
+    private _disabledExternally;
 }

package/button/button.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{html as s}from"lit";import{CdsBaseButton as i,getElementWidth as e,baseStyles as a,property as o}from"@cds/core/internal";import d from"./button.element.scss.js";var r;!function(t){t.default="default",t.loading="loading",t.success="success",t.error="error"}(r||(r={}));class l extends i{constructor(){super(...arguments);this.action="solid",this.status="primary",this.size="md",this.block=!1,this.loadingState=r.default,this._disabled=!1}firstUpdated(t){super.firstUpdated(t),this.isDefaultLoadingState(this.loadingState)||(this.disabled=!0)}update(t){t.has("loadingState")&&(this.isDefaultLoadingState(t.get("loadingState"))&&(this._disabled=this.disabled),void 0!==t.get("loadingState")&&(this.isDefaultLoadingState(this.loadingState)?this.enableButton():this.disableButton())),super.update(t)}render(){return s`<div class="private-host" cds-layout="horizontal gap:xs wrap:none align:center">${this.loadingState===r.success?s`<cds-icon shape="check" status="success" size="18"></cds-icon>`:""} ${this.loadingState===r.error?s`<cds-icon shape="error-standard" status="danger" size="18"></cds-icon>`:""} ${this.loadingState===r.loading?s`<cds-progress-circle .size="${"sm"===this.size?"12":"18"}" status="info"></cds-progress-circle>`:""} ${this.loadingState===r.default?s`<slot></slot>`:""}</div>`}isDefaultLoadingState(t){return t===r.default}disableButton(){this.style.width=e(this),this.disabled=!0}enableButton(){this.style.removeProperty("width"),this.disabled=this._disabled}}l.styles=[a,d],t([o({type:String})],l.prototype,"action",void 0),t([o({type:String})],l.prototype,"status",void 0),t([o({type:String})],l.prototype,"size",void 0),t([o({type:Boolean})],l.prototype,"block",void 0),t([o({type:String})],l.prototype,"loadingState",void 0);export{l as CdsButton,r as ClrLoadingState};
+import{__decorate as t}from"tslib";import{html as s}from"lit";import{CdsBaseButton as e,getElementWidth as i,baseStyles as a,property as o}from"@cds/core/internal";import r from"./button.element.scss.js";var d;!function(t){t.default="default",t.loading="loading",t.success="success",t.error="error"}(d||(d={}));class l extends e{constructor(){super(...arguments);this.action="solid",this.status="primary",this.size="md",this.block=!1,this.loadingState=d.default,this._disabledExternally=!1}get disabled(){return super.disabled}set disabled(t){this._disabledExternally=t,super.disabled=t}firstUpdated(t){super.firstUpdated(t),this.isDefaultLoadingState(this.loadingState)||(this.disabled=!0)}update(t){t.has("loadingState")&&void 0!==t.get("loadingState")&&(this.isDefaultLoadingState(this.loadingState)?this.restoreButton():this.disableButton()),super.update(t)}render(){return s`<div class="private-host" cds-layout="horizontal gap:xs wrap:none align:center">${this.loadingState===d.success?s`<cds-icon shape="check" status="success" size="18"></cds-icon>`:""} ${this.loadingState===d.error?s`<cds-icon shape="error-standard" status="danger" size="18"></cds-icon>`:""} ${this.loadingState===d.loading?s`<cds-progress-circle .size="${"sm"===this.size?"12":"18"}" status="info"></cds-progress-circle>`:""} ${this.loadingState===d.default?s`<slot></slot>`:""}</div>`}isDefaultLoadingState(t){return t===d.default}disableButton(){this.style.width=i(this),super.disabled=!0}restoreButton(){this.style.removeProperty("width"),super.disabled=this._disabledExternally}}l.styles=[a,r],t([o({type:String})],l.prototype,"action",void 0),t([o({type:String})],l.prototype,"status",void 0),t([o({type:String})],l.prototype,"size",void 0),t([o({type:Boolean})],l.prototype,"block",void 0),t([o({type:String})],l.prototype,"loadingState",void 0),t([o({type:Boolean})],l.prototype,"disabled",null);export{l as CdsButton,d as ClrLoadingState};
 //# sourceMappingURL=button.element.js.map

package/button/button.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.element.js","sources":["../../../src/button/button.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html } from 'lit';\nimport { baseStyles, CdsBaseButton, getElementWidth, property } from '@cds/core/internal';\nimport styles from './button.element.scss';\nexport var ClrLoadingState;\n(function (ClrLoadingState) {\n    ClrLoadingState[\"default\"] = \"default\";\n    ClrLoadingState[\"loading\"] = \"loading\";\n    ClrLoadingState[\"success\"] = \"success\";\n    ClrLoadingState[\"error\"] = \"error\";\n})(ClrLoadingState || (ClrLoadingState = {}));\n/**\n * Buttons allow an application to communicate action and direct user intent.\n *\n * ```typescript\n * import '@cds/core/button/register.js';\n * ```\n *\n * ```html\n * <cds-button>submit</cds-button>\n * ```\n *\n * @element cds-button\n * @slot - Content slot for inside the button\n * @cssprop --background\n * @cssprop --border-color\n * @cssprop --border-radius\n * @cssprop --border-width\n * @cssprop --box-shadow-color\n * @cssprop --color\n * @cssprop --font-family\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --height\n * @cssprop --letter-spacing\n * @cssprop --min-width\n * @cssprop --padding\n * @cssprop --text-decoration\n * @cssprop --text-transform\n */\nexport class CdsButton extends CdsBaseButton {\n    constructor() {\n        super(...arguments);\n        /**\n         * Define the type of action the button triggers\n         *\n         * - `solid`: buttons direct the user’s attention to the primary action the application is suggesting that the user take.\n         * - `outline`: buttons indicate secondary actions that compliments a primary action or reduces visual noise when there are many actions on the page.\n         * - `flat`: buttons are used as tertiary buttons. Can also be used inline because they are different from content in style and recognizable as buttons alongside content.\n         */\n        this.action = 'solid';\n        /**\n         * Sets the color of the button to match the following string statuses\n         */\n        this.status = 'primary';\n        /**\n         * Sets the overall height and width of the button based on the following string values:\n         */\n        this.size = 'md';\n        /** Sets if the button should be full width with display block */\n        this.block = false;\n        /**\n         * Changes the button content based on the value passed.\n         * @type {default | loading | success | error}\n         *\n         * - `default`: shows the content of the button\n         * - `loading`: disables the button and shows a spinner inside the button\n         * - `success`: disables the button and shows a check mark inside the button; auto-triggers to change back to DEFAULT state after 1000 ms\n         * - `error`: shows the content of the button (in the context of application, this state is usually entered from a LOADING state. the application should show appropriate error message)\n         */\n        this.loadingState = ClrLoadingState.default;\n        this._disabled = false;\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        if (!this.isDefaultLoadingState(this.loadingState)) {\n            this.disabled = true;\n        }\n    }\n    update(props) {\n        if (props.has('loadingState')) {\n            if (this.isDefaultLoadingState(props.get('loadingState'))) {\n                // track prior disabled state to set prior value after button is re-enabled from a loading state\n                this._disabled = this.disabled;\n            }\n            if (props.get('loadingState') !== undefined) {\n                if (this.isDefaultLoadingState(this.loadingState)) {\n                    this.enableButton();\n                }\n                else {\n                    this.disableButton();\n                }\n            }\n        }\n        super.update(props);\n    }\n    render() {\n        return html `<div class=\"private-host\" cds-layout=\"horizontal gap:xs wrap:none align:center\">\n      ${this.loadingState === ClrLoadingState.success\n            ? html `<cds-icon shape=\"check\" status=\"success\" size=\"18\"></cds-icon>`\n            : ''}\n      ${this.loadingState === ClrLoadingState.error\n            ? html `<cds-icon shape=\"error-standard\" status=\"danger\" size=\"18\"></cds-icon>`\n            : ''}\n      ${this.loadingState === ClrLoadingState.loading\n            ? html `<cds-progress-circle .size=${this.size === 'sm' ? '12' : '18'} status=\"info\"></cds-progress-circle>`\n            : ''}\n      ${this.loadingState === ClrLoadingState.default ? html `<slot></slot>` : ''}\n    </div>`;\n    }\n    isDefaultLoadingState(state) {\n        return state === ClrLoadingState.default;\n    }\n    disableButton() {\n        this.style.width = getElementWidth(this);\n        this.disabled = true;\n    }\n    enableButton() {\n        this.style.removeProperty('width');\n        this.disabled = this._disabled;\n    }\n}\nCdsButton.styles = [baseStyles, styles];\n__decorate([\n    property({ type: String })\n], CdsButton.prototype, \"action\", void 0);\n__decorate([\n    property({ type: String })\n], CdsButton.prototype, \"status\", void 0);\n__decorate([\n    property({ type: String })\n], CdsButton.prototype, \"size\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsButton.prototype, \"block\", void 0);\n__decorate([\n    property({ type: String })\n], CdsButton.prototype, \"loadingState\", void 0);\n"],"names":["ClrLoadingState","CdsButton","CdsBaseButton","constructor","super","this","action","status","size","block","loadingState","default","_disabled","firstUpdated","props","isDefaultLoadingState","disabled","update","has","get","undefined","enableButton","disableButton","render","html","success","error","loading","state","style","width","getElementWidth","removeProperty","styles","baseStyles","__decorate","property","type","String","prototype","Boolean"],"mappings":"4MASU,IAACA,GACX,SAAWA,GACPA,EAAyB,QAAI,UAC7BA,EAAyB,QAAI,UAC7BA,EAAyB,QAAI,UAC7BA,EAAuB,MAAI,QAJ/B,CAKGA,IAAoBA,EAAkB,KA8BlC,MAAMC,UAAkBC,EAC3BC,cACIC,oBAQAC,KAAKC,OAAS,QAIdD,KAAKE,OAAS,UAIdF,KAAKG,KAAO,KAEZH,KAAKI,OAAQ,EAUbJ,KAAKK,aAAeV,EAAgBW,QACpCN,KAAKO,WAAY,EAErBC,aAAaC,GACTV,MAAMS,aAAaC,GACdT,KAAKU,sBAAsBV,KAAKK,gBACjCL,KAAKW,UAAW,GAGxBC,OAAOH,GACCA,EAAMI,IAAI,kBACNb,KAAKU,sBAAsBD,EAAMK,IAAI,mBAErCd,KAAKO,UAAYP,KAAKW,eAEQI,IAA9BN,EAAMK,IAAI,kBACNd,KAAKU,sBAAsBV,KAAKK,cAChCL,KAAKgB,eAGLhB,KAAKiB,kBAIjBlB,MAAMa,OAAOH,GAEjBS,SACI,OAAOC,CAAK,mFACZnB,KAAKK,eAAiBV,EAAgByB,QAChCD,CAAK,iEACL,MACNnB,KAAKK,eAAiBV,EAAgB0B,MAChCF,CAAK,yEACL,MACNnB,KAAKK,eAAiBV,EAAgB2B,QAChCH,CAAK,+BAA4C,OAAdnB,KAAKG,KAAgB,KAAO,6CAC/D,MACNH,KAAKK,eAAiBV,EAAgBW,QAAUa,CAAK,gBAAkB,WAG3ET,sBAAsBa,GAClB,OAAOA,IAAU5B,EAAgBW,QAErCW,gBACIjB,KAAKwB,MAAMC,MAAQC,EAAgB1B,MACnCA,KAAKW,UAAW,EAEpBK,eACIhB,KAAKwB,MAAMG,eAAe,SAC1B3B,KAAKW,SAAWX,KAAKO,WAG7BX,EAAUgC,OAAS,CAACC,EAAYD,GAChCE,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBrC,EAAUsC,UAAW,cAAU,GAClCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBrC,EAAUsC,UAAW,cAAU,GAClCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBrC,EAAUsC,UAAW,YAAQ,GAChCJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,WAClBvC,EAAUsC,UAAW,aAAS,GACjCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBrC,EAAUsC,UAAW,oBAAgB"}
+{"version":3,"file":"button.element.js","sources":["../../../src/button/button.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html } from 'lit';\nimport { baseStyles, CdsBaseButton, getElementWidth, property } from '@cds/core/internal';\nimport styles from './button.element.scss';\nexport var ClrLoadingState;\n(function (ClrLoadingState) {\n    ClrLoadingState[\"default\"] = \"default\";\n    ClrLoadingState[\"loading\"] = \"loading\";\n    ClrLoadingState[\"success\"] = \"success\";\n    ClrLoadingState[\"error\"] = \"error\";\n})(ClrLoadingState || (ClrLoadingState = {}));\n/**\n * Buttons allow an application to communicate action and direct user intent.\n *\n * ```typescript\n * import '@cds/core/button/register.js';\n * ```\n *\n * ```html\n * <cds-button>submit</cds-button>\n * ```\n *\n * @element cds-button\n * @slot - Content slot for inside the button\n * @cssprop --background\n * @cssprop --border-color\n * @cssprop --border-radius\n * @cssprop --border-width\n * @cssprop --box-shadow-color\n * @cssprop --color\n * @cssprop --font-family\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --height\n * @cssprop --letter-spacing\n * @cssprop --min-width\n * @cssprop --padding\n * @cssprop --text-decoration\n * @cssprop --text-transform\n */\nexport class CdsButton extends CdsBaseButton {\n    constructor() {\n        super(...arguments);\n        /**\n         * Define the type of action the button triggers\n         *\n         * - `solid`: buttons direct the user’s attention to the primary action the application is suggesting that the user take.\n         * - `outline`: buttons indicate secondary actions that compliments a primary action or reduces visual noise when there are many actions on the page.\n         * - `flat`: buttons are used as tertiary buttons. Can also be used inline because they are different from content in style and recognizable as buttons alongside content.\n         */\n        this.action = 'solid';\n        /**\n         * Sets the color of the button to match the following string statuses\n         */\n        this.status = 'primary';\n        /**\n         * Sets the overall height and width of the button based on the following string values:\n         */\n        this.size = 'md';\n        /** Sets if the button should be full width with display block */\n        this.block = false;\n        /**\n         * Changes the button content based on the value passed.\n         * @type {default | loading | success | error}\n         *\n         * - `default`: shows the content of the button\n         * - `loading`: disables the button and shows a spinner inside the button\n         * - `success`: disables the button and shows a check mark inside the button; auto-triggers to change back to DEFAULT state after 1000 ms\n         * - `error`: shows the content of the button (in the context of application, this state is usually entered from a LOADING state. the application should show appropriate error message)\n         */\n        this.loadingState = ClrLoadingState.default;\n        // when the loading state changes, the disabled state should be set to what the consumer manually set, if set\n        // the setter here should never be called in the component, call super instead\n        //  https://github.com/vmware-clarity/core/issues/129\n        this._disabledExternally = false;\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    set disabled(value) {\n        this._disabledExternally = value;\n        super.disabled = value;\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        if (!this.isDefaultLoadingState(this.loadingState)) {\n            this.disabled = true;\n        }\n    }\n    update(props) {\n        if (props.has('loadingState') && props.get('loadingState') !== undefined) {\n            if (this.isDefaultLoadingState(this.loadingState)) {\n                this.restoreButton();\n            }\n            else {\n                this.disableButton();\n            }\n        }\n        super.update(props);\n    }\n    render() {\n        return html `<div class=\"private-host\" cds-layout=\"horizontal gap:xs wrap:none align:center\">\n      ${this.loadingState === ClrLoadingState.success\n            ? html `<cds-icon shape=\"check\" status=\"success\" size=\"18\"></cds-icon>`\n            : ''}\n      ${this.loadingState === ClrLoadingState.error\n            ? html `<cds-icon shape=\"error-standard\" status=\"danger\" size=\"18\"></cds-icon>`\n            : ''}\n      ${this.loadingState === ClrLoadingState.loading\n            ? html `<cds-progress-circle .size=${this.size === 'sm' ? '12' : '18'} status=\"info\"></cds-progress-circle>`\n            : ''}\n      ${this.loadingState === ClrLoadingState.default ? html `<slot></slot>` : ''}\n    </div>`;\n    }\n    isDefaultLoadingState(state) {\n        return state === ClrLoadingState.default;\n    }\n    disableButton() {\n        this.style.width = getElementWidth(this);\n        super.disabled = true;\n    }\n    restoreButton() {\n        this.style.removeProperty('width');\n        super.disabled = this._disabledExternally;\n    }\n}\nCdsButton.styles = [baseStyles, styles];\n__decorate([\n    property({ type: String })\n], CdsButton.prototype, \"action\", void 0);\n__decorate([\n    property({ type: String })\n], CdsButton.prototype, \"status\", void 0);\n__decorate([\n    property({ type: String })\n], CdsButton.prototype, \"size\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsButton.prototype, \"block\", void 0);\n__decorate([\n    property({ type: String })\n], CdsButton.prototype, \"loadingState\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsButton.prototype, \"disabled\", null);\n"],"names":["ClrLoadingState","CdsButton","CdsBaseButton","constructor","super","this","action","status","size","block","loadingState","default","_disabledExternally","disabled","value","firstUpdated","props","isDefaultLoadingState","update","has","undefined","get","restoreButton","disableButton","render","html","success","error","loading","state","style","width","getElementWidth","removeProperty","styles","baseStyles","__decorate","property","type","String","prototype","Boolean"],"mappings":"4MASU,IAACA,GACX,SAAWA,GACPA,EAAyB,QAAI,UAC7BA,EAAyB,QAAI,UAC7BA,EAAyB,QAAI,UAC7BA,EAAuB,MAAI,QAJ/B,CAKGA,IAAoBA,EAAkB,KA8BlC,MAAMC,UAAkBC,EAC3BC,cACIC,oBAQAC,KAAKC,OAAS,QAIdD,KAAKE,OAAS,UAIdF,KAAKG,KAAO,KAEZH,KAAKI,OAAQ,EAUbJ,KAAKK,aAAeV,EAAgBW,QAIpCN,KAAKO,qBAAsB,EAE3BC,eACA,OAAOT,MAAMS,SAEbA,aAASC,GACTT,KAAKO,oBAAsBE,EAC3BV,MAAMS,SAAWC,EAErBC,aAAaC,GACTZ,MAAMW,aAAaC,GACdX,KAAKY,sBAAsBZ,KAAKK,gBACjCL,KAAKQ,UAAW,GAGxBK,OAAOF,GACCA,EAAMG,IAAI,sBAAiDC,IAA9BJ,EAAMK,IAAI,kBACnChB,KAAKY,sBAAsBZ,KAAKK,cAChCL,KAAKiB,gBAGLjB,KAAKkB,iBAGbnB,MAAMc,OAAOF,GAEjBQ,SACI,OAAOC,CAAK,mFACZpB,KAAKK,eAAiBV,EAAgB0B,QAChCD,CAAK,iEACL,MACNpB,KAAKK,eAAiBV,EAAgB2B,MAChCF,CAAK,yEACL,MACNpB,KAAKK,eAAiBV,EAAgB4B,QAChCH,CAAK,+BAA4C,OAAdpB,KAAKG,KAAgB,KAAO,6CAC/D,MACNH,KAAKK,eAAiBV,EAAgBW,QAAUc,CAAK,gBAAkB,WAG3ER,sBAAsBY,GAClB,OAAOA,IAAU7B,EAAgBW,QAErCY,gBACIlB,KAAKyB,MAAMC,MAAQC,EAAgB3B,MACnCD,MAAMS,UAAW,EAErBS,gBACIjB,KAAKyB,MAAMG,eAAe,SAC1B7B,MAAMS,SAAWR,KAAKO,qBAG9BX,EAAUiC,OAAS,CAACC,EAAYD,GAChCE,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBtC,EAAUuC,UAAW,cAAU,GAClCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBtC,EAAUuC,UAAW,cAAU,GAClCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBtC,EAAUuC,UAAW,YAAQ,GAChCJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,WAClBxC,EAAUuC,UAAW,aAAS,GACjCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBtC,EAAUuC,UAAW,oBAAgB,GACxCJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,WAClBxC,EAAUuC,UAAW,WAAY"}

package/button-action/button-action.element.d.ts

@@ -31,6 +31,7 @@ import { CdsBaseButton } from '@cds/core/internal';
 export declare class CdsButtonAction extends CdsBaseButton {
     shape: string;
     action: string;
+    iconSize: string;
     i18n: {
         sort: string;
         expand: string;

package/button-action/button-action.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{html as e}from"lit";import{CdsBaseButton as i,I18nService as s,LogService as o,baseStyles as r,property as a,i18n as n,state as d}from"@cds/core/internal";import p from"./button-action.element.scss.js";class c extends i{constructor(){super(...arguments);this.i18n=s.keys.actions,this.cdsButtonAction=!0}render(){return e`<div class="private-host"><slot><cds-icon .shape="${this.shape?this.shape:"ellipsis-vertical"}" ?solid="${this.pressed||this.expanded}" inner-offset="${1}"></cds-icon></slot></div>`}updated(t){super.updated(t),this.ariaLabel||this.readonly||o.warn("A aria-label is required for interactive cds-button-action type",this),t.has("readonly")&&(this.readonly&&!this.hasAttribute("aria-label")?this.ariaHidden="true":this.ariaHidden=null)}}c.styles=[r,p],t([a({type:String})],c.prototype,"shape",void 0),t([a({type:String,reflect:!0})],c.prototype,"action",void 0),t([n()],c.prototype,"i18n",void 0),t([d({type:Boolean,reflect:!0,attribute:"cds-button-action"})],c.prototype,"cdsButtonAction",void 0);export{c as CdsButtonAction};
+import{__decorate as t}from"tslib";import{html as i}from"lit";import{CdsBaseButton as e,I18nService as s,LogService as o,baseStyles as r,property as n,i18n as a,state as d}from"@cds/core/internal";import p from"./button-action.element.scss.js";class c extends e{constructor(){super(...arguments);this.i18n=s.keys.actions,this.cdsButtonAction=!0}render(){return i`<div class="private-host"><slot><cds-icon .shape="${this.shape?this.shape:"ellipsis-vertical"}" .size="${this.iconSize}" ?solid="${this.pressed||this.expanded}" inner-offset="${1}"></cds-icon></slot></div>`}updated(t){super.updated(t),this.ariaLabel||this.readonly||o.warn("A aria-label is required for interactive cds-button-action type",this),t.has("readonly")&&(this.readonly&&!this.hasAttribute("aria-label")?this.ariaHidden="true":this.ariaHidden=null)}}c.styles=[r,p],t([n({type:String})],c.prototype,"shape",void 0),t([n({type:String,reflect:!0})],c.prototype,"action",void 0),t([n({type:String})],c.prototype,"iconSize",void 0),t([a()],c.prototype,"i18n",void 0),t([d({type:Boolean,reflect:!0,attribute:"cds-button-action"})],c.prototype,"cdsButtonAction",void 0);export{c as CdsButtonAction};
 //# sourceMappingURL=button-action.element.js.map

package/button-action/button-action.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-action.element.js","sources":["../../../src/button-action/button-action.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html } from 'lit';\nimport { property, baseStyles, CdsBaseButton, LogService, state, i18n, I18nService } from '@cds/core/internal';\nimport styles from './button-action.element.scss';\n/**\n * Action Button\n *\n * ```typescript\n * import '@cds/core/button-action/register.js';\n * ```\n *\n * ```html\n * <cds-button-action></cds-button-action>\n * ```\n * @beta\n * @element cds-button-action\n * @slot - For projecting text content or cds-icon\n * @property pressed\n * @cssprop --icon-width\n * @cssprop --icon-height\n * @cssprop --width\n * @cssprop --height\n * @cssprop --cursor\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --background\n * @cssprop --padding\n * @cssprop --outline\n * @cssprop --outline-offset\n * @property pressed - boolean\n * @property expanded - boolean\n */\nexport class CdsButtonAction extends CdsBaseButton {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.actions;\n        this.cdsButtonAction = true;\n    }\n    render() {\n        return html `\n      <div class=\"private-host\">\n        <slot\n          ><cds-icon\n            .shape=${this.shape ? this.shape : 'ellipsis-vertical'}\n            ?solid=${this.pressed || this.expanded}\n            inner-offset=${1}\n          ></cds-icon\n        ></slot>\n      </div>\n    `;\n    }\n    updated(props) {\n        super.updated(props);\n        if (!this.ariaLabel && !this.readonly) {\n            LogService.warn('A aria-label is required for interactive cds-button-action type', this);\n        }\n        if (props.has('readonly')) {\n            this.readonly && !this.hasAttribute('aria-label') ? (this.ariaHidden = 'true') : (this.ariaHidden = null);\n        }\n    }\n}\nCdsButtonAction.styles = [baseStyles, styles];\n__decorate([\n    property({ type: String })\n], CdsButtonAction.prototype, \"shape\", void 0);\n__decorate([\n    property({ type: String, reflect: true })\n], CdsButtonAction.prototype, \"action\", void 0);\n__decorate([\n    i18n()\n], CdsButtonAction.prototype, \"i18n\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true, attribute: 'cds-button-action' })\n], CdsButtonAction.prototype, \"cdsButtonAction\", void 0);\n"],"names":["CdsButtonAction","CdsBaseButton","constructor","super","this","i18n","I18nService","keys","actions","cdsButtonAction","render","html","shape","pressed","expanded","updated","props","ariaLabel","readonly","LogService","warn","has","hasAttribute","ariaHidden","styles","baseStyles","__decorate","property","type","String","prototype","reflect","state","Boolean","attribute"],"mappings":"oPAqCO,MAAMA,UAAwBC,EACjCC,cACIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,QAC7BJ,KAAKK,iBAAkB,EAE3BC,SACI,OAAOC,CAAK,qDAICP,KAAKQ,MAAQR,KAAKQ,MAAQ,gCAC1BR,KAAKS,SAAWT,KAAKU,2BACf,8BAMvBC,QAAQC,GACJb,MAAMY,QAAQC,GACTZ,KAAKa,WAAcb,KAAKc,UACzBC,EAAWC,KAAK,kEAAmEhB,MAEnFY,EAAMK,IAAI,cACVjB,KAAKc,WAAad,KAAKkB,aAAa,cAAiBlB,KAAKmB,WAAa,OAAWnB,KAAKmB,WAAa,OAIhHvB,EAAgBwB,OAAS,CAACC,EAAYD,GACtCE,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClB7B,EAAgB8B,UAAW,aAAS,GACvCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,OAAQE,SAAS,KACnC/B,EAAgB8B,UAAW,cAAU,GACxCJ,EAAW,CACPrB,KACDL,EAAgB8B,UAAW,YAAQ,GACtCJ,EAAW,CACPM,EAAM,CAAEJ,KAAMK,QAASF,SAAS,EAAMG,UAAW,uBAClDlC,EAAgB8B,UAAW,uBAAmB"}
+{"version":3,"file":"button-action.element.js","sources":["../../../src/button-action/button-action.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html } from 'lit';\nimport { property, baseStyles, CdsBaseButton, LogService, state, i18n, I18nService } from '@cds/core/internal';\nimport styles from './button-action.element.scss';\n/**\n * Action Button\n *\n * ```typescript\n * import '@cds/core/button-action/register.js';\n * ```\n *\n * ```html\n * <cds-button-action></cds-button-action>\n * ```\n * @beta\n * @element cds-button-action\n * @slot - For projecting text content or cds-icon\n * @property pressed\n * @cssprop --icon-width\n * @cssprop --icon-height\n * @cssprop --width\n * @cssprop --height\n * @cssprop --cursor\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --background\n * @cssprop --padding\n * @cssprop --outline\n * @cssprop --outline-offset\n * @property pressed - boolean\n * @property expanded - boolean\n */\nexport class CdsButtonAction extends CdsBaseButton {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.actions;\n        this.cdsButtonAction = true;\n    }\n    render() {\n        return html `\n      <div class=\"private-host\">\n        <slot\n          ><cds-icon\n            .shape=${this.shape ? this.shape : 'ellipsis-vertical'}\n            .size=${this.iconSize}\n            ?solid=${this.pressed || this.expanded}\n            inner-offset=${1}\n          ></cds-icon\n        ></slot>\n      </div>\n    `;\n    }\n    updated(props) {\n        super.updated(props);\n        if (!this.ariaLabel && !this.readonly) {\n            LogService.warn('A aria-label is required for interactive cds-button-action type', this);\n        }\n        if (props.has('readonly')) {\n            this.readonly && !this.hasAttribute('aria-label') ? (this.ariaHidden = 'true') : (this.ariaHidden = null);\n        }\n    }\n}\nCdsButtonAction.styles = [baseStyles, styles];\n__decorate([\n    property({ type: String })\n], CdsButtonAction.prototype, \"shape\", void 0);\n__decorate([\n    property({ type: String, reflect: true })\n], CdsButtonAction.prototype, \"action\", void 0);\n__decorate([\n    property({ type: String })\n], CdsButtonAction.prototype, \"iconSize\", void 0);\n__decorate([\n    i18n()\n], CdsButtonAction.prototype, \"i18n\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true, attribute: 'cds-button-action' })\n], CdsButtonAction.prototype, \"cdsButtonAction\", void 0);\n"],"names":["CdsButtonAction","CdsBaseButton","constructor","super","this","i18n","I18nService","keys","actions","cdsButtonAction","render","html","shape","iconSize","pressed","expanded","updated","props","ariaLabel","readonly","LogService","warn","has","hasAttribute","ariaHidden","styles","baseStyles","__decorate","property","type","String","prototype","reflect","state","Boolean","attribute"],"mappings":"oPAqCO,MAAMA,UAAwBC,EACjCC,cACIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,QAC7BJ,KAAKK,iBAAkB,EAE3BC,SACI,OAAOC,CAAK,qDAICP,KAAKQ,MAAQR,KAAKQ,MAAQ,+BAC3BR,KAAKS,qBACJT,KAAKU,SAAWV,KAAKW,2BACf,8BAMvBC,QAAQC,GACJd,MAAMa,QAAQC,GACTb,KAAKc,WAAcd,KAAKe,UACzBC,EAAWC,KAAK,kEAAmEjB,MAEnFa,EAAMK,IAAI,cACVlB,KAAKe,WAAaf,KAAKmB,aAAa,cAAiBnB,KAAKoB,WAAa,OAAWpB,KAAKoB,WAAa,OAIhHxB,EAAgByB,OAAS,CAACC,EAAYD,GACtCE,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClB9B,EAAgB+B,UAAW,aAAS,GACvCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,OAAQE,SAAS,KACnChC,EAAgB+B,UAAW,cAAU,GACxCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClB9B,EAAgB+B,UAAW,gBAAY,GAC1CJ,EAAW,CACPtB,KACDL,EAAgB+B,UAAW,YAAQ,GACtCJ,EAAW,CACPM,EAAM,CAAEJ,KAAMK,QAASF,SAAS,EAAMG,UAAW,uBAClDnC,EAAgB+B,UAAW,uBAAmB"}