@cds/core 5.2.1 → 5.4.1

package/alert/alert-actions.element.d.ts

@@ -1,5 +1,5 @@
 import { AlertGroupTypes } from '@cds/core/alert';
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 /**
  * Web component alert actions to be used inside default and banner alerts.
  *
@@ -29,8 +29,8 @@ export declare class CdsAlertActions extends LitElement {
      */
     type: AlertGroupTypes;
     private buttons;
-    render(): import("lit-element").TemplateResult;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     updated(props: Map<string, any>): void;
-    static get styles(): import("lit-element").CSSResult[];
+    static get styles(): import("lit").CSSResultGroup[];
 }

package/alert/alert-actions.element.js

@@ -1,68 +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 { assignSlotNames, baseStyles, querySlotAll, internalProperty } from '@cds/core/internal';
-import { html, LitElement } from 'lit-element';
-import { styles } from './alert-actions.element.css.js';
-/**
- * Web component alert actions to be used inside default and banner alerts.
- *
- * ```typescript
- * import '@cds/core/alert/register.js';
- * ```
- *
- * ```html
- * <cds-alert>
- *   Lorem ipsum dolor sit amet
- *   <cds-alert-actions>
- *     <cds-button>Fix</cds-button>
- *   </cds-alert-actions>
- * </cds-alert>
- * ```
- *
- * @element cds-alert-actions
- * @slot
- * @cssprop --action-text-color
- * @cssprop --action-hover-text-color
- * @cssprop --action-font-size
- */
-export class CdsAlertActions extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * @type {default | banner | light}
-         * @private
-         */
-        this.type = 'light';
-    }
-    render() {
-        return html `<div class="private-host" cds-layout="horizontal wrap:none gap:sm align:vertical-center">
-      <slot></slot>
-    </div>`;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        assignSlotNames([this, 'actions']);
-    }
-    updated(props) {
-        super.updated(props);
-        this.buttons.forEach(b => {
-            b.status = this.type === 'banner' ? 'inverse' : 'primary';
-            b.size = this.type === 'banner' ? 'sm' : 'md';
-            b.style.setProperty('--color', 'inherit');
-        });
-    }
-    static get styles() {
-        return [baseStyles, styles];
-    }
-}
-__decorate([
-    internalProperty({ type: String, reflect: true })
-], CdsAlertActions.prototype, "type", void 0);
-__decorate([
-    querySlotAll('cds-button')
-], CdsAlertActions.prototype, "buttons", void 0);
-//# sourceMappingURL=alert-actions.element.js.map
+import{__decorate as t}from"tslib";import{assignSlotNames as e,baseStyles as r,state as s,querySlotAll as o}from"@cds/core/internal";import{LitElement as i,html as n}from"lit";import a from"./alert-actions.element.scss.js";class p extends i{constructor(){super(...arguments),this.type="light"}render(){return n`<div class="private-host" cds-layout="horizontal wrap:none gap:sm align:vertical-center"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),e([this,"actions"])}updated(t){super.updated(t),this.buttons.forEach((t=>{t.status="banner"===this.type?"inverse":"primary",t.size="banner"===this.type?"sm":"md",t.style.setProperty("--color","inherit")}))}static get styles(){return[r,a]}}t([s({type:String,reflect:!0})],p.prototype,"type",void 0),t([o("cds-button")],p.prototype,"buttons",void 0);export{p as CdsAlertActions};
+//# sourceMappingURL=alert-actions.element.js.map

package/alert/alert-actions.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-actions.element.js","sourceRoot":"","sources":["../../../src/alert/alert-actions.element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAIH,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjG,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,OAAO,eAAgB,SAAQ,UAAU;IAA/C;;QACE;;;WAGG;QAEH,SAAI,GAAoB,OAAO,CAAC;IA4BlC,CAAC;IAvBC,MAAM;QACJ,OAAO,IAAI,CAAA;;WAEJ,CAAC;IACV,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,eAAe,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IACrC,CAAC;IAED,OAAO,CAAC,KAAuB;QAC7B,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YACvB,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;YAC1D,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;YAC9C,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IAC9B,CAAC;CACF;AA5BC;IADC,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAClB;AAGhC;IADC,YAAY,CAAC,YAAY,CAAC;gDACY","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 { AlertGroupTypes } from '@cds/core/alert';\nimport { CdsButton } from '@cds/core/button';\nimport { assignSlotNames, baseStyles, querySlotAll, internalProperty } from '@cds/core/internal';\nimport { html, LitElement } from 'lit-element';\nimport { styles } from './alert-actions.element.css.js';\n\n/**\n * Web component alert actions to be used inside default and banner alerts.\n *\n * ```typescript\n * import '@cds/core/alert/register.js';\n * ```\n *\n * ```html\n * <cds-alert>\n *   Lorem ipsum dolor sit amet\n *   <cds-alert-actions>\n *     <cds-button>Fix</cds-button>\n *   </cds-alert-actions>\n * </cds-alert>\n * ```\n *\n * @element cds-alert-actions\n * @slot\n * @cssprop --action-text-color\n * @cssprop --action-hover-text-color\n * @cssprop --action-font-size\n */\nexport class CdsAlertActions extends LitElement {\n  /**\n   * @type {default | banner | light}\n   * @private\n   */\n  @internalProperty({ type: String, reflect: true })\n  type: AlertGroupTypes = 'light';\n\n  @querySlotAll('cds-button')\n  private buttons: NodeListOf<CdsButton>;\n\n  render() {\n    return html`<div class=\"private-host\" cds-layout=\"horizontal wrap:none gap:sm align:vertical-center\">\n      <slot></slot>\n    </div>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    assignSlotNames([this, 'actions']);\n  }\n\n  updated(props: Map<string, any>) {\n    super.updated(props);\n    this.buttons.forEach(b => {\n      b.status = this.type === 'banner' ? 'inverse' : 'primary';\n      b.size = this.type === 'banner' ? 'sm' : 'md';\n      b.style.setProperty('--color', 'inherit');\n    });\n  }\n\n  static get styles() {\n    return [baseStyles, styles];\n  }\n}\n"]}
+{"version":3,"file":"alert-actions.element.js","sources":["../../../src/alert/alert-actions.element.ts"],"sourcesContent":null,"names":["CdsAlertActions","LitElement","[object Object]","super","arguments","this","type","html","connectedCallback","assignSlotNames","props","updated","buttons","forEach","b","status","size","style","setProperty","styles","baseStyles","__decorate","state","String","reflect","prototype","querySlotAll"],"mappings":"+NA+BO,MAAMA,UAAwBC,EACjCC,cACIC,SAASC,WAKTC,KAAKC,KAAO,QAEhBJ,SACI,OAAOK,CAAK,+GAIhBL,oBACIC,MAAMK,oBACNC,EAAgB,CAACJ,KAAM,YAE3BH,QAAQQ,GACJP,MAAMQ,QAAQD,GACdL,KAAKO,QAAQC,SAAQC,IACjBA,EAAEC,OAAuB,WAAdV,KAAKC,KAAoB,UAAY,UAChDQ,EAAEE,KAAqB,WAAdX,KAAKC,KAAoB,KAAO,KACzCQ,EAAEG,MAAMC,YAAY,UAAW,cAGvCC,oBACI,MAAO,CAACC,EAAYD,IAG5BE,EAAW,CACPC,EAAM,CAAEhB,KAAMiB,OAAQC,SAAS,KAChCxB,EAAgByB,UAAW,YAAQ,GACtCJ,EAAW,CACPK,EAAa,eACd1B,EAAgByB,UAAW,eAAW"}

package/alert/alert-actions.element.scss.js

@@ -0,0 +1,2 @@
+import{css as t}from"lit";var o=t`:host{--action-hover-text-color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--action-text-color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--action-font-size:var(--cds-global-typography-font-size-3, calc((13 / var(--cds-global-base, 20)) * 1rem));white-space:nowrap}:host([_type=light]){display:none!important}:host([_type=default]) ::slotted(cds-button),:host([_type=light]) ::slotted(cds-button){--color:var(--action-text-color);--border-color:var(--action-text-color);--background:none;--padding:none;--box-shadow-color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--text-transform:none;--text-decoration:underline;--border-width:0;--height:var(--action-size, auto);--min-width:initial;display:inline-block}:host([_type=default]) ::slotted(cds-button:hover),:host([_type=light]) ::slotted(cds-button:hover){--color:var(--action-hover-text-color);--border-color:var(--action-hover-text-color)}:host([_type=default]) ::slotted([cds-text~=link]),:host([_type=light]) ::slotted([cds-text~=link]){color:var(--action-text-color)!important;font-size:var(--action-font-size)!important;font-weight:var(--cds-global-typography-font-weight-medium,500)}:host([_type=default]) ::slotted([cds-text~=link]:hover),:host([_type=light]) ::slotted([cds-text~=link]:hover){color:var(--action-hover-text-color)!important}:host([_type=default]){--action-size:calc(var(--cds-global-space-9, calc((24 / var(--cds-global-base, 20)) * 1rem)) - var(--cds-global-space-3, calc((4 / var(--cds-global-base, 20)) * 1rem)))}:host([_type=banner]){--action-size:var(--cds-global-space-9, calc((24 / var(--cds-global-base, 20)) * 1rem))}:host([_type=banner]) ::slotted(cds-button){--color:var(--action-text-color);--border-color:var(--action-text-color)}:host([_type=banner])::slotted(a),:host([_type=default])::slotted(a){color:var(--action-text-color)}:host([_type=default]) .private-host{height:calc(var(--action-size) + var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem)))}:host([_type=default]) ::slotted(cds-button){--font-size:var(--action-font-size);--letter-spacing:normal;--height:var(--action-size);line-height:1em}`;export default o;
+//# sourceMappingURL=alert-actions.element.scss.js.map

package/alert/alert-actions.element.scss.js.map

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

package/alert/alert-group.element.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 import { AlertGroupTypes, AlertStatusTypes, AlertSizes } from './alert.interfaces.js';
 /**
  * Alert groups are containers for a set of alerts. Alert groups can hold one or many alerts
@@ -68,10 +68,10 @@ export declare class CdsAlertGroup extends LitElement {
     /** @private */
     pager: HTMLElement;
     private alertSlot;
-    render(): import("lit-element").TemplateResult;
+    render(): import("lit-html").TemplateResult<1>;
     firstUpdated(props: Map<string, any>): void;
     private setupAlertsUpdate;
     private syncAlerts;
     updated(props: Map<string, any>): void;
-    static get styles(): import("lit-element").CSSResult[];
+    static get styles(): import("lit").CSSResultGroup[];
 }

package/alert/alert-group.element.js

@@ -1,147 +1,2 @@
-/*
- * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-import { __decorate } from "tslib";
-import { html, LitElement, query } from 'lit-element';
-import { baseStyles, property, querySlot, querySlotAll, syncProps } from '@cds/core/internal';
-import { styles } from './alert-group.element.css.js';
-/**
- * Alert groups are containers for a set of alerts. Alert groups can hold one or many alerts
- * inside of them with the expectation that all alerts will be of the same type. The exception
- * to this rule is the `loading` alert type, which will be displayed regardless of the type
- * of alert group containing it.
- *
- * ```typescript
- * import '@cds/core/alert/register.js';
- * ```
- *
- * ```html
- *   <cds-alert-group type="danger">
- *     <cds-alert closable="true">
- *       Single alert
- *       <cds-alert-actions>
- *         buttons, links
- *       </cds-alert-actions>
- *     </cds-alert>
- *     <cds-alert type="loading">
- *       Single Alert
- *     </cds-alert>
- *     <cds-alert closable="true">
- *       Another alert
- *       <cds-alert-actions>
- *         buttons, links
- *       </cds-alert-actions>
- *     </cds-alert>
- *   </cds-alert-group>
- * ```
- *
- * @element cds-alert-group
- * @slot - Content slot for the alerts
- * @cssprop --color
- * @cssprop --icon-color
- * @cssprop --icon-size
- * @cssprop --font-size
- * @cssprop --font-weight
- * @cssprop --letter-spacing
- * @cssprop --padding
- * @cssprop --background
- * @cssprop --border-color
- * @cssprop --border-width
- * @cssprop --border-radius
- */
-export class CdsAlertGroup extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * @type {default | sm}
-         * Sets the overall height and width of the alerts inside the alert group
-         */
-        this.size = 'default';
-        /**
-         * @type {default | banner | light}
-         * Passed down into the alerts inside the alert-group
-         */
-        this.type = 'default';
-        /**
-         * Autosets the alert groups aria role to 'region'
-         */
-        this.role = 'region';
-        /**
-         * @type {neutral | info | success | warning | danger | alt | loading}
-         * Sets the status of the alerts inside the alert group
-         */
-        this.status = 'neutral';
-    }
-    render() {
-        return html `
-      <div
-        cds-layout="${this.pager ? 'horizontal wrap:none' : 'horizontal'}"
-        class="${this.pager ? 'private-host' : 'private-host no-pager'}"
-      >
-        <div class="pager-wrapper" cds-layout="p-x:lg">
-          <slot name="pager"></slot>
-        </div>
-        <div class="alert-group-wrapper">
-          <div
-            class="alerts"
-            cds-layout="vertical wrap:none align:horizontal-stretch fill ${this.size === 'sm' ? 'gap:none' : 'gap:sm'}"
-          >
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    firstUpdated(props) {
-        super.firstUpdated(props);
-        this.setupAlertsUpdate();
-    }
-    setupAlertsUpdate() {
-        var _a;
-        const propsToSync = { status: true, type: true, size: true };
-        (_a = this.alertSlot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', () => this.syncAlerts(propsToSync));
-    }
-    async syncAlerts(propsToSync) {
-        await Promise.all(Array.from(this.alerts).map(a => a.updateComplete));
-        this.alerts.forEach(alert => syncProps(alert, this, {
-            status: propsToSync.status && this.type !== 'light' && alert.status !== 'loading',
-            type: propsToSync.type,
-            size: propsToSync.size,
-        }));
-    }
-    updated(props) {
-        super.updated(props);
-        this.syncAlerts({
-            status: props.has('status'),
-            type: props.has('type'),
-            size: props.has('size'),
-        });
-    }
-    static get styles() {
-        return [baseStyles, styles];
-    }
-}
-__decorate([
-    property({ type: String })
-], CdsAlertGroup.prototype, "size", void 0);
-__decorate([
-    property({ type: String })
-], CdsAlertGroup.prototype, "type", void 0);
-__decorate([
-    property({ type: String })
-], CdsAlertGroup.prototype, "role", void 0);
-__decorate([
-    property({ type: String })
-], CdsAlertGroup.prototype, "status", void 0);
-__decorate([
-    querySlotAll('cds-alert')
-], CdsAlertGroup.prototype, "alerts", void 0);
-__decorate([
-    querySlot('.pager', { assign: 'pager' })
-], CdsAlertGroup.prototype, "pager", void 0);
-__decorate([
-    query('.alerts')
-], CdsAlertGroup.prototype, "alertSlot", void 0);
-//# sourceMappingURL=alert-group.element.js.map
+import{__decorate as t}from"tslib";import{LitElement as s,html as e}from"lit";import{query as r}from"lit/decorators/query.js";import{syncProps as a,baseStyles as o,property as i,querySlotAll as p,querySlot as l}from"@cds/core/internal";import d from"./alert-group.element.scss.js";class n extends s{constructor(){super(...arguments),this.size="default",this.type="default",this.role="region",this.status="neutral"}render(){return e`<div cds-layout="${this.pager?"horizontal wrap:none":"horizontal"}" class="${this.pager?"private-host":"private-host no-pager"}"><div class="pager-wrapper" cds-layout="p-x:lg"><slot name="pager"></slot></div><div class="alert-group-wrapper"><div class="alerts" cds-layout="vertical wrap:none align:horizontal-stretch fill ${"sm"===this.size?"gap:none":"gap:sm"}"><slot></slot></div></div></div>`}firstUpdated(t){super.firstUpdated(t),this.setupAlertsUpdate()}setupAlertsUpdate(){var t;const s={status:!0,type:!0,size:!0};null===(t=this.alertSlot)||void 0===t||t.addEventListener("slotchange",(()=>this.syncAlerts(s)))}async syncAlerts(t){await Promise.all(Array.from(this.alerts).map((t=>t.updateComplete))),this.alerts.forEach((s=>a(s,this,{status:t.status&&"light"!==this.type&&"loading"!==s.status,type:t.type,size:t.size})))}updated(t){super.updated(t),this.syncAlerts({status:t.has("status"),type:t.has("type"),size:t.has("size")})}static get styles(){return[o,d]}}t([i({type:String})],n.prototype,"size",void 0),t([i({type:String})],n.prototype,"type",void 0),t([i({type:String})],n.prototype,"role",void 0),t([i({type:String})],n.prototype,"status",void 0),t([p("cds-alert")],n.prototype,"alerts",void 0),t([l(".pager",{assign:"pager"})],n.prototype,"pager",void 0),t([r(".alerts")],n.prototype,"alertSlot",void 0);export{n as CdsAlertGroup};
+//# sourceMappingURL=alert-group.element.js.map

package/alert/alert-group.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-group.element.js","sourceRoot":"","sources":["../../../src/alert/alert-group.element.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\n\nimport { html, LitElement, query } from 'lit-element';\nimport { baseStyles, property, querySlot, querySlotAll, syncProps } from '@cds/core/internal';\nimport { CdsAlert } from './alert.element.js';\nimport { AlertGroupTypes, AlertStatusTypes, AlertSizes } from './alert.interfaces.js';\nimport { styles } from './alert-group.element.css.js';\n\n/**\n * Alert groups are containers for a set of alerts. Alert groups can hold one or many alerts\n * inside of them with the expectation that all alerts will be of the same type. The exception\n * to this rule is the `loading` alert type, which will be displayed regardless of the type\n * of alert group containing it.\n *\n * ```typescript\n * import '@cds/core/alert/register.js';\n * ```\n *\n * ```html\n *   <cds-alert-group type=\"danger\">\n *     <cds-alert closable=\"true\">\n *       Single alert\n *       <cds-alert-actions>\n *         buttons, links\n *       </cds-alert-actions>\n *     </cds-alert>\n *     <cds-alert type=\"loading\">\n *       Single Alert\n *     </cds-alert>\n *     <cds-alert closable=\"true\">\n *       Another alert\n *       <cds-alert-actions>\n *         buttons, links\n *       </cds-alert-actions>\n *     </cds-alert>\n *   </cds-alert-group>\n * ```\n *\n * @element cds-alert-group\n * @slot - Content slot for the alerts\n * @cssprop --color\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --letter-spacing\n * @cssprop --padding\n * @cssprop --background\n * @cssprop --border-color\n * @cssprop --border-width\n * @cssprop --border-radius\n */\nexport class CdsAlertGroup extends LitElement {\n  /**\n   * @type {default | sm}\n   * Sets the overall height and width of the alerts inside the alert group\n   */\n  @property({ type: String })\n  size: AlertSizes = 'default';\n\n  /**\n   * @type {default | banner | light}\n   * Passed down into the alerts inside the alert-group\n   */\n  @property({ type: String })\n  type: AlertGroupTypes = 'default';\n\n  /**\n   * Autosets the alert groups aria role to 'region'\n   */\n  @property({ type: String })\n  role = 'region';\n\n  /**\n   * @type {neutral | info | success | warning | danger | alt | loading}\n   * Sets the status of the alerts inside the alert group\n   */\n  @property({ type: String })\n  status: AlertStatusTypes = 'neutral';\n\n  @querySlotAll('cds-alert') private alerts: NodeListOf<CdsAlert>;\n\n  /** @private */\n  @querySlot('.pager', { assign: 'pager' }) pager: HTMLElement;\n\n  @query('.alerts') private alertSlot: HTMLElement;\n\n  render() {\n    return html`\n      <div\n        cds-layout=\"${this.pager ? 'horizontal wrap:none' : 'horizontal'}\"\n        class=\"${this.pager ? 'private-host' : 'private-host no-pager'}\"\n      >\n        <div class=\"pager-wrapper\" cds-layout=\"p-x:lg\">\n          <slot name=\"pager\"></slot>\n        </div>\n        <div class=\"alert-group-wrapper\">\n          <div\n            class=\"alerts\"\n            cds-layout=\"vertical wrap:none align:horizontal-stretch fill ${this.size === 'sm' ? 'gap:none' : 'gap:sm'}\"\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  firstUpdated(props: Map<string, any>) {\n    super.firstUpdated(props);\n    this.setupAlertsUpdate();\n  }\n\n  private setupAlertsUpdate() {\n    const propsToSync = { status: true, type: true, size: true };\n    this.alertSlot?.addEventListener('slotchange', () => this.syncAlerts(propsToSync));\n  }\n\n  private async syncAlerts(propsToSync: { status: boolean; type: boolean; size: boolean }) {\n    await Promise.all(Array.from(this.alerts).map(a => a.updateComplete));\n\n    this.alerts.forEach(alert =>\n      syncProps(alert, this, {\n        status: propsToSync.status && this.type !== 'light' && alert.status !== 'loading',\n        type: propsToSync.type,\n        size: propsToSync.size,\n      })\n    );\n  }\n\n  updated(props: Map<string, any>) {\n    super.updated(props);\n    this.syncAlerts({\n      status: props.has('status'),\n      type: props.has('type'),\n      size: props.has('size'),\n    });\n  }\n\n  static get styles() {\n    return [baseStyles, styles];\n  }\n}\n"]}
+{"version":3,"file":"alert-group.element.js","sources":["../../../src/alert/alert-group.element.ts"],"sourcesContent":null,"names":["CdsAlertGroup","LitElement","[object Object]","super","arguments","this","size","type","role","status","html","pager","props","firstUpdated","setupAlertsUpdate","_a","propsToSync","alertSlot","addEventListener","syncAlerts","Promise","all","Array","from","alerts","map","a","updateComplete","forEach","alert","syncProps","updated","has","styles","baseStyles","__decorate","property","String","prototype","querySlotAll","querySlot","assign","query"],"mappings":"yRAsDO,MAAMA,UAAsBC,EAC/BC,cACIC,SAASC,WAKTC,KAAKC,KAAO,UAKZD,KAAKE,KAAO,UAIZF,KAAKG,KAAO,SAKZH,KAAKI,OAAS,UAElBP,SACI,OAAOQ,CAAK,oBAEEL,KAAKM,MAAQ,uBAAyB,wBAC3CN,KAAKM,MAAQ,eAAiB,6NAQ0C,OAAdN,KAAKC,KAAgB,WAAa,4CAQzGJ,aAAaU,GACTT,MAAMU,aAAaD,GACnBP,KAAKS,oBAETZ,oBACI,IAAIa,EACJ,MAAMC,EAAc,CAAEP,QAAQ,EAAMF,MAAM,EAAMD,MAAM,GAC5B,QAAzBS,EAAKV,KAAKY,iBAA8B,IAAPF,GAAyBA,EAAGG,iBAAiB,cAAc,IAAMb,KAAKc,WAAWH,KAEvHd,iBAAiBc,SACPI,QAAQC,IAAIC,MAAMC,KAAKlB,KAAKmB,QAAQC,KAAIC,GAAKA,EAAEC,kBACrDtB,KAAKmB,OAAOI,SAAQC,GAASC,EAAUD,EAAOxB,KAAM,CAChDI,OAAQO,EAAYP,QAAwB,UAAdJ,KAAKE,MAAqC,YAAjBsB,EAAMpB,OAC7DF,KAAMS,EAAYT,KAClBD,KAAMU,EAAYV,SAG1BJ,QAAQU,GACJT,MAAM4B,QAAQnB,GACdP,KAAKc,WAAW,CACZV,OAAQG,EAAMoB,IAAI,UAClBzB,KAAMK,EAAMoB,IAAI,QAChB1B,KAAMM,EAAMoB,IAAI,UAGxBC,oBACI,MAAO,CAACC,EAAYD,IAG5BE,EAAW,CACPC,EAAS,CAAE7B,KAAM8B,UAClBrC,EAAcsC,UAAW,YAAQ,GACpCH,EAAW,CACPC,EAAS,CAAE7B,KAAM8B,UAClBrC,EAAcsC,UAAW,YAAQ,GACpCH,EAAW,CACPC,EAAS,CAAE7B,KAAM8B,UAClBrC,EAAcsC,UAAW,YAAQ,GACpCH,EAAW,CACPC,EAAS,CAAE7B,KAAM8B,UAClBrC,EAAcsC,UAAW,cAAU,GACtCH,EAAW,CACPI,EAAa,cACdvC,EAAcsC,UAAW,cAAU,GACtCH,EAAW,CACPK,EAAU,SAAU,CAAEC,OAAQ,WAC/BzC,EAAcsC,UAAW,aAAS,GACrCH,EAAW,CACPO,EAAM,YACP1C,EAAcsC,UAAW,iBAAa"}

package/alert/alert-group.element.scss.js

@@ -0,0 +1,2 @@
+import{css as a}from"lit";var r=a`:host{--icon-color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--icon-size:var(--cds-global-space-8, calc((18 / var(--cds-global-base, 20)) * 1rem));--font-size:var(--cds-global-typography-body-font-size, calc((14 / var(--cds-global-base, 20)) * 1rem));--font-weight:var(--cds-global-typography-body-font-weight, 400);--letter-spacing:var(--cds-global-typography-body-letter-spacing, -0.014286em);--padding:var(--cds-global-space-5, calc((8 / var(--cds-global-base, 20)) * 1rem)) var(--cds-global-space-5, calc((8 / var(--cds-global-base, 20)) * 1rem)) var(--cds-global-space-4, calc((6 / var(--cds-global-base, 20)) * 1rem)) var(--cds-global-space-6, calc((12 / var(--cds-global-base, 20)) * 1rem));--background:var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8));--border-color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--border-width:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem));--border-radius:var(--cds-alias-object-border-radius-100, calc((4 / var(--cds-global-base, 20)) * 1rem));--pager-background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));width:100%}.private-host{background:var(--background);border-width:var(--border-width);border-color:var(--border-color);border-style:solid;border-radius:var(--border-radius)}.alert-group-wrapper{width:100%;padding:var(--padding)}:host([status=info]){--background:var(--cds-alias-status-info-tint, var(--cds-global-color-blue-50, #e6f7ff));--border-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([status=success]){--background:var(--cds-alias-status-success-tint, var(--cds-global-color-green-50, #eefce3));--border-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([status=warning]){--background:var(--cds-alias-status-warning-tint, var(--cds-global-color-ochre-100, #fff2d6));--border-color:var(--cds-alias-status-warning, var(--cds-global-color-ochre-500, #ffb92e))}:host([status=danger]){--background:var(--cds-alias-status-danger-tint, var(--cds-global-color-red-50, #fff2f0));--border-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([type=default][size=sm]){--padding:var(--cds-global-space-3, calc((4 / var(--cds-global-base, 20)) * 1rem)) var(--cds-global-space-3, calc((4 / var(--cds-global-base, 20)) * 1rem)) var(--cds-global-space-2, calc((2 / var(--cds-global-base, 20)) * 1rem)) var(--cds-global-space-4, calc((6 / var(--cds-global-base, 20)) * 1rem))}:host([type=light]){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--border-radius:0;--padding:0}:host([type=light]) .private-host{border:0}:host([type=banner]){--border-color:var(--background);--padding:var(--cds-global-space-1, calc((1 / var(--cds-global-base, 20)) * 1rem)) var(--cds-global-space-6, calc((12 / var(--cds-global-base, 20)) * 1rem));--border-width:0;--background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--border-radius:0}:host([type=banner][status=info]){--background:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--pager-background:var(--cds-alias-status-info-shade, var(--cds-global-color-blue-800, #00608a))}:host([type=banner][status=warning]){--background:var(--cds-alias-status-warning, var(--cds-global-color-ochre-500, #ffb92e));--pager-background:var(--cds-alias-status-warning-shade, var(--cds-global-color-ochre-600, #ffa600))}:host([type=banner][status=danger]){--background:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200));--pager-background:var(--cds-alias-status-danger-shade, var(--cds-global-color-red-800, #c21d00))}:host([type=banner][status=success]){--background:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--pager-background:var(--cds-alias-status-success-shade, var(--cds-global-color-green-800, #366a0c))}:host([type=banner][status=neutral]){--background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--pager-background:var(--cds-alias-status-neutral-shade, var(--cds-global-color-construction-700, #3a4d55))}:host([type=banner][status=alt]){--background:var(--cds-alias-status-alt, var(--cds-global-color-violet-700, #7c12a5));--pager-background:var(--cds-alias-status-alt-shade, var(--cds-global-color-violet-900, #440061))}.no-pager .pager-wrapper{display:none}.pager-wrapper{background-color:var(--pager-background);padding-top:var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem));padding-bottom:var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem))}:host([type=banner]) .alert-group-wrapper{padding-top:var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem));padding-bottom:var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem))}::slotted(.pager){color:var(--cds-global-typography-color-100,var(--cds-global-color-white,#fff));width:calc(2*var(--cds-global-space-12,calc((48 / var(--cds-global-base,20)) * 1rem)));height:100%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;justify-content:center;align-items:center}`;export default r;
+//# sourceMappingURL=alert-group.element.scss.js.map

package/alert/alert-group.element.scss.js.map

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

package/alert/alert.element.d.ts

@@ -1,11 +1,11 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 import { CdsIcon } from '@cds/core/icon/icon.element.js';
 import { AlertGroupTypes, AlertStatusTypes, AlertSizes } from './alert.interfaces.js';
 export declare function getIconStatusTuple(status: string): [string, string];
 export declare function iconShapeIsAlertStatusType(shape: string): boolean;
 export declare function getIconStatusLabel(status: string): string;
 export declare function getIconStatusShape(status: string): string;
-export declare function getAlertContentLayout(containerType: 'wrapper' | 'content' | 'actions', alertGroupType: AlertGroupTypes, alertGroupHasPager: boolean): "align:stretch" | "" | "align:shrink";
+export declare function getAlertContentLayout(containerType: 'wrapper' | 'content' | 'actions', alertGroupType: AlertGroupTypes, alertGroupHasPager: boolean): "" | "align:stretch" | "align:shrink";
 /**
  * Alerts are banners that communicate a message with a severity attached to it.
  * They grab the user’s attention to provide critical information needed in context.
@@ -83,8 +83,8 @@ export declare class CdsAlert extends LitElement {
     connectedCallback(): void;
     updated(props: Map<string, any>): void;
     private get parentGroupHasPager();
-    render(): import("lit-element").TemplateResult;
+    render(): import("lit-html").TemplateResult<1>;
     constructor();
     private closeAlert;
-    static get styles(): import("lit-element").CSSResult[];
+    static get styles(): import("lit").CSSResultGroup[];
 }

package/alert/alert.element.js

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