@cds/core 6.0.0-beta.3 → 6.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/alert/alert-group.element.js +1 -1
- package/alert/alert-group.element.js.map +1 -1
- package/alert/alert-group.element.scss.js +1 -1
- package/alert/alert.element.d.ts +1 -1
- package/alert/alert.element.js +1 -1
- package/alert/alert.element.js.map +1 -1
- package/alert/alert.element.scss.js +1 -1
- package/input/input.element.scss.js +1 -1
- package/internal/decorators/animate.d.ts +1 -1
- package/internal/decorators/animate.js +1 -1
- package/internal/decorators/animate.js.map +1 -1
- package/internal/utils/global.js +1 -1
- package/package.json +1 -1
- package/pagination/pagination.element.js +1 -1
- package/pagination/pagination.element.js.map +1 -1
- package/pagination/pagination.element.scss.js +1 -1
- package/radio/radio-group.element.js +1 -1
- package/radio/radio-group.element.js.map +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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
|
|
1
|
+
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 i,property as o,querySlotAll as p,querySlot as l}from"@cds/core/internal";import n from"./alert-group.element.scss.js";class d extends s{constructor(){super(...arguments);this.size="default",this.type="default",this.status="neutral"}render(){return e`<div cds-layout="horizontal wrap:none align:stretch" class="${this.pager?"private-host":"private-host no-pager"}"><div class="pager-wrapper"><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:xs"}"><slot></slot></div></div></div>`}connectedCallback(){super.connectedCallback(),this.role="region"}firstUpdated(t){super.firstUpdated(t),this.setupAlertsUpdate()}setupAlertsUpdate(){const t={status:!0,type:!0,size:!0};this.alertSlot?.addEventListener("slotchange",(()=>this.syncAlerts(t)))}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[i,n]}}t([o({type:String})],d.prototype,"size",void 0),t([o({type:String})],d.prototype,"type",void 0),t([o({type:String})],d.prototype,"status",void 0),t([p("cds-alert")],d.prototype,"alerts",void 0),t([l(".pager, cds-pagination",{assign:"pager"})],d.prototype,"pager",void 0),t([r(".alerts")],d.prototype,"alertSlot",void 0);export{d as CdsAlertGroup};
|
|
2
2
|
//# sourceMappingURL=alert-group.element.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-group.element.js","sources":["../../../src/alert/alert-group.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 { query } from 'lit/decorators/query.js';\nimport { baseStyles, property, querySlot, querySlotAll, syncProps } from '@cds/core/internal';\nimport styles from './alert-group.element.scss';\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 constructor() {\n super(...arguments);\n /**\n * Sets the overall height and width of the alerts inside the alert group\n * @type {default | sm}\n */\n this.size = 'default';\n /**\n * Passed down into the alerts inside the alert-group\n * @type {default | banner | light}\n */\n this.type = 'default';\n /**\n * Sets the status of the alerts inside the alert group\n * @type {neutral | info | success | warning | danger | alt | loading}\n */\n this.status = 'neutral';\n }\n render() {\n return html `\n <div\n cds-layout=\"
|
|
1
|
+
{"version":3,"file":"alert-group.element.js","sources":["../../../src/alert/alert-group.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 { query } from 'lit/decorators/query.js';\nimport { baseStyles, property, querySlot, querySlotAll, syncProps } from '@cds/core/internal';\nimport styles from './alert-group.element.scss';\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 constructor() {\n super(...arguments);\n /**\n * Sets the overall height and width of the alerts inside the alert group\n * @type {default | sm}\n */\n this.size = 'default';\n /**\n * Passed down into the alerts inside the alert-group\n * @type {default | banner | light}\n */\n this.type = 'default';\n /**\n * Sets the status of the alerts inside the alert group\n * @type {neutral | info | success | warning | danger | alt | loading}\n */\n this.status = 'neutral';\n }\n render() {\n return html `\n <div\n cds-layout=\"horizontal wrap:none align:stretch\"\n class=\"${this.pager ? 'private-host' : 'private-host no-pager'}\"\n >\n <div class=\"pager-wrapper\">\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:xs'}\"\n >\n <slot></slot>\n </div>\n </div>\n </div>\n `;\n }\n connectedCallback() {\n super.connectedCallback();\n this.role = 'region';\n }\n firstUpdated(props) {\n super.firstUpdated(props);\n this.setupAlertsUpdate();\n }\n setupAlertsUpdate() {\n const propsToSync = { status: true, type: true, size: true };\n this.alertSlot?.addEventListener('slotchange', () => this.syncAlerts(propsToSync));\n }\n async syncAlerts(propsToSync) {\n await Promise.all(Array.from(this.alerts).map(a => a.updateComplete));\n this.alerts.forEach(alert => syncProps(alert, this, {\n status: propsToSync.status && this.type !== 'light' && alert.status !== 'loading',\n type: propsToSync.type,\n size: propsToSync.size,\n }));\n }\n updated(props) {\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 static get styles() {\n return [baseStyles, styles];\n }\n}\n__decorate([\n property({ type: String })\n], CdsAlertGroup.prototype, \"size\", void 0);\n__decorate([\n property({ type: String })\n], CdsAlertGroup.prototype, \"type\", void 0);\n__decorate([\n property({ type: String })\n], CdsAlertGroup.prototype, \"status\", void 0);\n__decorate([\n querySlotAll('cds-alert')\n], CdsAlertGroup.prototype, \"alerts\", void 0);\n__decorate([\n querySlot('.pager, cds-pagination', { assign: 'pager' })\n], CdsAlertGroup.prototype, \"pager\", void 0);\n__decorate([\n query('.alerts')\n], CdsAlertGroup.prototype, \"alertSlot\", void 0);\n"],"names":["CdsAlertGroup","LitElement","constructor","super","this","size","type","status","render","html","pager","connectedCallback","role","firstUpdated","props","setupAlertsUpdate","propsToSync","alertSlot","addEventListener","syncAlerts","async","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,oBAKAC,KAAKC,KAAO,UAKZD,KAAKE,KAAO,UAKZF,KAAKG,OAAS,UAElBC,SACI,OAAOC,CAAK,+DAGHL,KAAKM,MAAQ,eAAiB,yMAQ0C,OAAdN,KAAKC,KAAgB,WAAa,4CAQzGM,oBACIR,MAAMQ,oBACNP,KAAKQ,KAAO,SAEhBC,aAAaC,GACTX,MAAMU,aAAaC,GACnBV,KAAKW,oBAETA,oBACI,MAAMC,EAAc,CAAET,QAAQ,EAAMD,MAAM,EAAMD,MAAM,GACtDD,KAAKa,WAAWC,iBAAiB,cAAc,IAAMd,KAAKe,WAAWH,KAEzEI,iBAAiBJ,SACPK,QAAQC,IAAIC,MAAMC,KAAKpB,KAAKqB,QAAQC,KAAIC,GAAKA,EAAEC,kBACrDxB,KAAKqB,OAAOI,SAAQC,GAASC,EAAUD,EAAO1B,KAAM,CAChDG,OAAQS,EAAYT,QAAwB,UAAdH,KAAKE,MAAqC,YAAjBwB,EAAMvB,OAC7DD,KAAMU,EAAYV,KAClBD,KAAMW,EAAYX,SAG1B2B,QAAQlB,GACJX,MAAM6B,QAAQlB,GACdV,KAAKe,WAAW,CACZZ,OAAQO,EAAMmB,IAAI,UAClB3B,KAAMQ,EAAMmB,IAAI,QAChB5B,KAAMS,EAAMmB,IAAI,UAGbC,oBACP,MAAO,CAACC,EAAYD,IAG5BE,EAAW,CACPC,EAAS,CAAE/B,KAAMgC,UAClBtC,EAAcuC,UAAW,YAAQ,GACpCH,EAAW,CACPC,EAAS,CAAE/B,KAAMgC,UAClBtC,EAAcuC,UAAW,YAAQ,GACpCH,EAAW,CACPC,EAAS,CAAE/B,KAAMgC,UAClBtC,EAAcuC,UAAW,cAAU,GACtCH,EAAW,CACPI,EAAa,cACdxC,EAAcuC,UAAW,cAAU,GACtCH,EAAW,CACPK,EAAU,yBAA0B,CAAEC,OAAQ,WAC/C1C,EAAcuC,UAAW,aAAS,GACrCH,EAAW,CACPO,EAAM,YACP3C,EAAcuC,UAAW,iBAAa"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{css as a}from"lit";var r=a`:host{--icon-color:var(--color);--icon-size:var(--cds-global-space-8, 1.125rem);--font-size:var(--cds-global-typography-secondary-font-size, 0.8125rem);--font-weight:var(--cds-global-typography-secondary-font-weight, 400);--letter-spacing:var(--cds-global-typography-body-letter-spacing, -0.014286em);--padding:var(--cds-global-space-5, 0.5rem) var(--cds-global-space-5, 0.5rem) var(--cds-global-space-4, 0.375rem) var(--cds-global-space-6, 0.75rem);--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, 0.0625rem);--border-radius:var(--cds-alias-object-border-radius-100, 0.25rem);--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, 0.25rem) var(--cds-global-space-3, 0.25rem) var(--cds-global-space-2, 0.125rem) var(--cds-global-space-4, 0.375rem)}: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, 0.0625rem) var(--cds-global-space-6, 0.75rem);--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
|
|
1
|
+
import{css as a}from"lit";var r=a`:host{--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white));--icon-color:var(--color);--icon-size:var(--cds-global-space-8, 1.125rem);--font-size:var(--cds-global-typography-secondary-font-size, 0.8125rem);--font-weight:var(--cds-global-typography-secondary-font-weight, 400);--letter-spacing:var(--cds-global-typography-body-letter-spacing, -0.014286em);--padding:var(--cds-global-space-5, 0.5rem) var(--cds-global-space-5, 0.5rem) var(--cds-global-space-4, 0.375rem) var(--cds-global-space-6, 0.75rem);--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, 0.0625rem);--border-radius:var(--cds-alias-object-border-radius-100, 0.25rem);--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));--color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black))}: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, 0.25rem) var(--cds-global-space-3, 0.25rem) var(--cds-global-space-2, 0.125rem) var(--cds-global-space-4, 0.375rem)}: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, 0.0625rem) var(--cds-global-space-6, 0.75rem);--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:var(--cds-global-space-3,.25rem) var(--cds-global-space-4,.375rem);width:calc(3*var(--cds-global-space-12,3rem));display:flex;align-items:center}:host([type=banner]) .alert-group-wrapper{padding-top:var(--cds-global-space-2,.125rem);padding-bottom:var(--cds-global-space-3,.25rem)}::slotted(cds-pagination){--color:var(--icon-color)}`;export{r as default};
|
|
2
2
|
//# sourceMappingURL=alert-group.element.scss.js.map
|
package/alert/alert.element.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export declare function getIconStatusTuple(status: string): [string, string];
|
|
|
6
6
|
export declare function iconShapeIsAlertStatusType(shape: string): boolean;
|
|
7
7
|
export declare function getIconStatusLabel(status: string): string;
|
|
8
8
|
export declare function getIconStatusShape(status: string): string;
|
|
9
|
-
export declare function getAlertContentLayout(containerType: 'wrapper' | 'content' | 'actions', alertGroupType: AlertGroupTypes, alertGroupHasPager: boolean): "" | "align:stretch" | "align:shrink";
|
|
9
|
+
export declare function getAlertContentLayout(containerType: 'wrapper' | 'content' | 'actions', alertGroupType: AlertGroupTypes, alertGroupHasPager: boolean): "" | "align:stretch" | "align:shrink align:vertical-center" | "align:shrink";
|
|
10
10
|
/**
|
|
11
11
|
* Alerts are banners that communicate a message with a severity attached to it.
|
|
12
12
|
* They grab the user’s attention to provide critical information needed in context.
|
package/alert/alert.element.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=alert.element.js.map
|
|
@@ -1 +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';\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\"> </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\"> </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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"}
|
|
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\"> </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\"> </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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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{css as a}from"lit";var t=a`:host{--container-padding:var(--cds-global-space-2, 0.125rem) 0;--min-height:var(--cds-global-space-9, 1.5rem);--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--font-size:var(--cds-global-typography-secondary-font-size, 0.8125rem);--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, 1.125rem);--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, 1.5rem)}.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,.75rem);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,.0625rem));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, 0.375rem));white-space:nowrap;display:block}:host([_type=default]) cds-internal-close-button{height:var(--cds-global-space-8,1.125rem)}: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, 0.6875rem);--letter-spacing:normal}:host([_type=banner])
|
|
1
|
+
import{css as a}from"lit";var t=a`:host{--container-padding:var(--cds-global-space-2, 0.125rem) 0;--min-height:var(--cds-global-space-9, 1.5rem);--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--font-size:var(--cds-global-typography-secondary-font-size, 0.8125rem);--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, 1.125rem);--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, 1.5rem)}.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,.75rem);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,.0625rem));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, 0.375rem));white-space:nowrap;display:block}:host([_type=default]) cds-internal-close-button{height:var(--cds-global-space-8,1.125rem)}: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, 0.6875rem);--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,1.125rem) + var(--cds-global-space-2,.125rem));width:calc(var(--cds-global-space-8,1.125rem) + var(--cds-global-space-2,.125rem));min-height:calc(var(--cds-global-space-8,1.125rem) + var(--cds-global-space-2,.125rem));min-width:calc(var(--cds-global-space-8,1.125rem) + var(--cds-global-space-2,.125rem));margin-top:var(--cds-global-space-2,.125rem)}:host([_type=banner]) cds-internal-close-button{height:var(--cds-global-space-9,1.5rem);margin-top:var(--cds-global-space-3,.25rem)}@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,.125rem)))}}`;export{t as default};
|
|
2
2
|
//# sourceMappingURL=alert.element.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{css as o}from"lit";var r=o`:host{--background-size:0% 100%;--background-color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--background:linear-gradient(180deg, var(--background-color) 95%, var(--border-color) 0) no-repeat;--border-color:var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--border:0;--border-bottom:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--border-color);--border-radius:0;--outline:var(--cds-alias-object-interaction-outline);--outline-offset:var(--cds-alias-object-interaction-outline-offset);--cds-alias-object-interaction-outline:none;--cds-alias-object-interaction-outline-offset:0;--padding:var(--cds-global-space-2, 0.125rem) var(--cds-global-space-4, 0.375rem) 0 var(--cds-global-space-4, 0.375rem);--font-size:var(--cds-global-typography-font-size-3, 0.8125rem);--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--line-height:var(--cds-global-space-9, 1.5rem);--transition:background-size var(--cds-global-animation-duration-quick, 0.2s) ease;--text-align:inherit;display:block;width:100%;--icon-color:var(--color)}::slotted([slot=input]:not([multiple]):not([size])){text-transform:var(--text-transform)!important;border:var(--border)!important;padding:var(--padding);font-size:var(--font-size)!important;color:var(--color)!important;line-height:var(--line-height)!important;height:var(--line-height)!important;border-radius:var(--border-radius)!important;width:100%!important;-webkit-appearance:none!important;background:var(--cds-alias-object-opacity-0,rgba(0,0,0,0))!important;box-shadow:none!important;text-align:var(--text-align)!important}::slotted([slot=input]:not([multiple]):not([size]))::placeholder{--color:var(--cds-global-typography-color-200, var(--cds-global-color-construction-600, #4f6169))!important}::slotted([slot=input]){margin:0!important}::slotted([cds-button-action]),[cds-button-action]{--color:var(--icon-color)}::slotted([slot=input]:focus){outline:var(--outline)!important;outline-offset:var(--outline-offset)!important}.input-container{transition:var(--transition);background:var(--background);background-size:var(--background-size);border-bottom:var(--border-bottom);border-radius:var(--border-radius)!important;position:relative}.prefix,.suffix{line-height:0;position:absolute;pointer-events:none}.prefix{left:0}.suffix{right:0}.rtl .prefix{left:initial;right:0}.rtl .suffix{right:initial;left:0}.rtl ::slotted([slot=input]){text-align:right}:host([_focused]){--background-size:100% 100%;--border-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([_readonly]){--border-bottom:0;--background-size:0% 100%;--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([status=error]),:host([status=error][_focused]){--border-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=success]){--border-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_disabled]){--border-color:var(--cds-alias-object-border-color-tint, var(--cds-global-color-construction-100, #e3eaed));--color:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}`;export{r as default};
|
|
1
|
+
import{css as o}from"lit";var r=o`:host{--background-size:0% 100%;--background-color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--background:linear-gradient(180deg, var(--background-color) 95%, var(--border-color) 0) no-repeat;--border-color:var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--border:0;--border-bottom:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--border-color);--border-radius:0;--outline:var(--cds-alias-object-interaction-outline);--outline-offset:var(--cds-alias-object-interaction-outline-offset);--cds-alias-object-interaction-outline:none;--cds-alias-object-interaction-outline-offset:0;--padding:var(--cds-global-space-2, 0.125rem) var(--cds-global-space-4, 0.375rem) 0 var(--cds-global-space-4, 0.375rem);--font-size:var(--cds-global-typography-font-size-3, 0.8125rem);--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--line-height:var(--cds-global-space-9, 1.5rem);--transition:background-size var(--cds-global-animation-duration-quick, 0.2s) ease;--text-align:inherit;display:block;width:100%;--icon-color:var(--color)}::slotted([slot=input]:not(select[multiple]):not(select[size])){text-transform:var(--text-transform)!important;border:var(--border)!important;padding:var(--padding);font-size:var(--font-size)!important;color:var(--color)!important;line-height:var(--line-height)!important;height:var(--line-height)!important;border-radius:var(--border-radius)!important;width:100%!important;-webkit-appearance:none!important;background:var(--cds-alias-object-opacity-0,rgba(0,0,0,0))!important;box-shadow:none!important;text-align:var(--text-align)!important}::slotted([slot=input]:not(select[multiple]):not(select[size]))::placeholder{--color:var(--cds-global-typography-color-200, var(--cds-global-color-construction-600, #4f6169))!important}::slotted([slot=input]){margin:0!important}::slotted([cds-button-action]),[cds-button-action]{--color:var(--icon-color)}::slotted([slot=input]:focus){outline:var(--outline)!important;outline-offset:var(--outline-offset)!important}.input-container{transition:var(--transition);background:var(--background);background-size:var(--background-size);border-bottom:var(--border-bottom);border-radius:var(--border-radius)!important;position:relative}.prefix,.suffix{line-height:0;position:absolute;pointer-events:none}.prefix{left:0}.suffix{right:0}.rtl .prefix{left:initial;right:0}.rtl .suffix{right:initial;left:0}.rtl ::slotted([slot=input]){text-align:right}:host([_focused]){--background-size:100% 100%;--border-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([_readonly]){--border-bottom:0;--background-size:0% 100%;--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([status=error]),:host([status=error][_focused]){--border-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=success]){--border-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_disabled]){--border-color:var(--cds-alias-object-border-color-tint, var(--cds-global-color-construction-100, #e3eaed));--color:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}`;export{r as default};
|
|
2
2
|
//# sourceMappingURL=input.element.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { AnimatableElement, PropertyDrivenAnimation } from '../motion/interfaces.js';
|
|
2
|
-
export declare function animate(config: PropertyDrivenAnimation): <T extends new (...args: any[]) => AnimatableElement>(constructor: T) => T;
|
|
2
|
+
export declare function animate(config: PropertyDrivenAnimation): (() => void) | (<T extends new (...args: any[]) => AnimatableElement>(constructor: T) => T);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{PRIVATE_ANIMATION_STATUS_ATTR_NAME as t,AnimationStatus as i}from"../motion/interfaces.js";import{runPropertyAnimations as o}from"../motion/utils.js";function e(e){return function(n){return class extends n{constructor(){super(...arguments);this._animationReady=!1,this._animationDemoMode=!1,this._animations=e}updated(
|
|
1
|
+
import{PRIVATE_ANIMATION_STATUS_ATTR_NAME as t,AnimationStatus as i}from"../motion/interfaces.js";import{runPropertyAnimations as o}from"../motion/utils.js";import{isJestTest as n}from"../utils/environment.js";function e(e){return n()?function(){}:function(n){return class extends n{constructor(){super(...arguments);this._animationReady=!1,this._animationDemoMode=!1,this._animations=e}updated(n){if(super.updated(n),!this._animationReady&&!this.hasAttribute(t))return this.setAttribute(t,i.ready),void(this._animationReady=!0);!0===this._animationDemoMode||this.hasAttribute("_demo-mode")?this._animationDemoMode=!0:o(n,this)}}}}export{e as animate};
|
|
2
2
|
//# sourceMappingURL=animate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animate.js","sources":["../../../../src/internal/decorators/animate.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 { AnimationStatus, PRIVATE_ANIMATION_STATUS_ATTR_NAME, } from '../motion/interfaces.js';\nimport { runPropertyAnimations } from '../motion/utils.js';\n// decorator factory that extends the component constructor to inject animations code into it\nexport function animate(config) {\n // eslint-disable-next-line @typescript-eslint/ban-types\n return function _animationDecorator(constructor) {\n return class extends constructor {\n constructor() {\n super(...arguments);\n this._animationReady = false;\n this._animationDemoMode = false;\n this._animations = config;\n }\n updated(props) {\n super.updated(props);\n if (!this._animationReady && !this.hasAttribute(PRIVATE_ANIMATION_STATUS_ATTR_NAME)) {\n // this prevents animations from loading onpageload\n this.setAttribute(PRIVATE_ANIMATION_STATUS_ATTR_NAME, AnimationStatus.ready);\n this._animationReady = true;\n return;\n }\n if (this._animationDemoMode === true || this.hasAttribute('_demo-mode')) {\n // ignore if element has the _demo-mode attribute set;\n // _demo-mode is used for docs, static examples, and stories\n // _demo-mode is not intended for external use\n this._animationDemoMode = true;\n return;\n }\n runPropertyAnimations(props, this);\n }\n };\n };\n}\n"],"names":["animate","config","constructor","super","this","_animationReady","_animationDemoMode","_animations","updated","props","hasAttribute","PRIVATE_ANIMATION_STATUS_ATTR_NAME","setAttribute","AnimationStatus","ready","runPropertyAnimations"],"mappings":"
|
|
1
|
+
{"version":3,"file":"animate.js","sources":["../../../../src/internal/decorators/animate.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 { AnimationStatus, PRIVATE_ANIMATION_STATUS_ATTR_NAME, } from '../motion/interfaces.js';\nimport { runPropertyAnimations } from '../motion/utils.js';\nimport { isJestTest } from '../utils/environment.js';\n// decorator factory that extends the component constructor to inject animations code into it\nexport function animate(config) {\n if (isJestTest()) {\n return function () {\n // jsdom doesn't like the class returned from the decorator below\n // do nothing\n };\n }\n // eslint-disable-next-line @typescript-eslint/ban-types\n return function _animationDecorator(constructor) {\n return class extends constructor {\n constructor() {\n super(...arguments);\n this._animationReady = false;\n this._animationDemoMode = false;\n this._animations = config;\n }\n updated(props) {\n super.updated(props);\n if (!this._animationReady && !this.hasAttribute(PRIVATE_ANIMATION_STATUS_ATTR_NAME)) {\n // this prevents animations from loading onpageload\n this.setAttribute(PRIVATE_ANIMATION_STATUS_ATTR_NAME, AnimationStatus.ready);\n this._animationReady = true;\n return;\n }\n if (this._animationDemoMode === true || this.hasAttribute('_demo-mode')) {\n // ignore if element has the _demo-mode attribute set;\n // _demo-mode is used for docs, static examples, and stories\n // _demo-mode is not intended for external use\n this._animationDemoMode = true;\n return;\n }\n runPropertyAnimations(props, this);\n }\n };\n };\n}\n"],"names":["animate","config","isJestTest","constructor","super","this","_animationReady","_animationDemoMode","_animations","updated","props","hasAttribute","PRIVATE_ANIMATION_STATUS_ATTR_NAME","setAttribute","AnimationStatus","ready","runPropertyAnimations"],"mappings":"kNASO,SAASA,EAAQC,GACpB,OAAIC,IACO,aAMJ,SAA6BC,GAChC,OAAO,cAAcA,EACjBA,cACIC,oBACAC,KAAKC,iBAAkB,EACvBD,KAAKE,oBAAqB,EAC1BF,KAAKG,YAAcP,EAEvBQ,QAAQC,GAEJ,GADAN,MAAMK,QAAQC,IACTL,KAAKC,kBAAoBD,KAAKM,aAAaC,GAI5C,OAFAP,KAAKQ,aAAaD,EAAoCE,EAAgBC,YACtEV,KAAKC,iBAAkB,IAGK,IAA5BD,KAAKE,oBAA+BF,KAAKM,aAAa,cAItDN,KAAKE,oBAAqB,EAG9BS,EAAsBN,EAAOL"}
|
package/internal/utils/global.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{isBrowser as e}from"./environment.js";import{getAngularVersion as n,getAngularJSVersion as o,getReactVersion as t,getVueVersion as i}from"./framework.js";import{browserFeatures as s}from"./supports.js";import{LogService as r}from"../services/log.service.js";function w(){e()&&(window.CDS=window.CDS||{_version:[],_react:{version:void 0},_supports:s.supports,_isStateProxied:!1,_state:{focusTrapItems:[],layerElements:[],i18nRegistry:{},elementRegistry:{},iconRegistry:{},motionRegistry:{}},environment:{production:!1},getDetails:a,logDetails:d},function(){const e="6.0.0-beta.
|
|
1
|
+
import{isBrowser as e}from"./environment.js";import{getAngularVersion as n,getAngularJSVersion as o,getReactVersion as t,getVueVersion as i}from"./framework.js";import{browserFeatures as s}from"./supports.js";import{LogService as r}from"../services/log.service.js";function w(){e()&&(window.CDS=window.CDS||{_version:[],_react:{version:void 0},_supports:s.supports,_isStateProxied:!1,_state:{focusTrapItems:[],layerElements:[],i18nRegistry:{},elementRegistry:{},iconRegistry:{},motionRegistry:{}},environment:{production:!1},getDetails:a,logDetails:d},function(){const e="6.0.0-beta.4";window.CDS._version.indexOf(e)<0&&(window.CDS._version.push(e),document.querySelector("body")?.setAttribute("cds-version",window.CDS._version.join(" "))),window.CDS._version.length>1&&r.warn("Running more than one version of Clarity can cause unexpected issues. Please ensure only one version is loaded.")}(),window.CDS._isStateProxied||(window.CDS._isStateProxied=!0,window.CDS._state=new Proxy(window.CDS._state,{set:(e,n,o)=>{const t={key:n,prev:window.CDS._state[n],current:o};return e[n]=o,document.dispatchEvent(new CustomEvent("CDS_STATE_UPDATE",{detail:t})),!0}})))}function a(){return{versions:window.CDS._version,environment:window.CDS.environment,userAgent:navigator.userAgent,supports:window.CDS._supports,angularVersion:n(!1),angularJSVersion:o(!1),reactVersion:t(!1),vueVersion:i(!1),state:{...window.CDS._state,iconRegistry:Object.keys(window.CDS._state.iconRegistry),motionRegistry:Object.keys(window.CDS._state.motionRegistry),focusTrapRegistry:Object.keys(window.CDS._state.focusTrapItems.map((e=>e.focusTrapId)))}}}function d(){r.log(JSON.stringify(a(),null,2))}export{w as setupCDSGlobal};
|
|
2
2
|
//# sourceMappingURL=global.js.map
|
package/package.json
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{LitElement as i,css as s,html as e}from"lit";import{cache as r}from"lit/directives/cache.js";import{baseStyles as n,notProductionEnvironment as o,LogService as a,globalStyle as l,querySlot as p}from"@cds/core/internal";import u from"./pagination.element.scss.js";class m extends i{constructor(){super(...arguments);this.globalStyles=s`[cds-pagination-number]>cds-control-message{--min-width:initial}`}render(){const t=e`<slot></slot>`,i=e`<div cds-layout="horizontal gap:sm align:center"><slot></slot></div>`;return e`${r(this.hasAttribute("cds-layout")?t:i)}`}static get styles(){return[n,u]}firstUpdated(t){super.firstUpdated(t),this.setupNumberInput(),this.validateAriaLabel()}setupNumberInput(){this.numberInput&&(this.numberInput.controlWidth="shrink",this.numberInput.layout="compact")}validateAriaLabel(){o()&&!this.getAttribute("aria-label")?.length&&a.warn("An aria-label is missing",this)}}t([l()],m.prototype,"globalStyles",void 0),t([p("cds-input[cds-pagination-number]")],m.prototype,"numberInput",void 0);export{m as CdsPagination};
|
|
1
|
+
import{__decorate as t}from"tslib";import{LitElement as i,css as s,html as e}from"lit";import{cache as r}from"lit/directives/cache.js";import{baseStyles as n,notProductionEnvironment as o,LogService as a,globalStyle as l,querySlot as p}from"@cds/core/internal";import u from"./pagination.element.scss.js";class m extends i{constructor(){super(...arguments);this.globalStyles=s`[cds-pagination-number]>cds-control-message{--min-width:initial}`}render(){const t=e`<slot></slot>`,i=e`<div cds-layout="horizontal gap:sm align:center wrap:none"><slot></slot></div>`;return e`${r(this.hasAttribute("cds-layout")?t:i)}`}static get styles(){return[n,u]}firstUpdated(t){super.firstUpdated(t),this.setupNumberInput(),this.validateAriaLabel()}setupNumberInput(){this.numberInput&&(this.numberInput.controlWidth="shrink",this.numberInput.layout="compact")}validateAriaLabel(){o()&&!this.getAttribute("aria-label")?.length&&a.warn("An aria-label is missing",this)}}t([l()],m.prototype,"globalStyles",void 0),t([p("cds-input[cds-pagination-number]")],m.prototype,"numberInput",void 0);export{m as CdsPagination};
|
|
2
2
|
//# sourceMappingURL=pagination.element.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.element.js","sources":["../../../src/pagination/pagination.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 { css, html, LitElement } from 'lit';\nimport { cache } from 'lit/directives/cache.js';\nimport { baseStyles, globalStyle, LogService, notProductionEnvironment, querySlot } from '@cds/core/internal';\nimport styles from './pagination.element.scss';\n/**\n * Web component pagination.\n *\n * ```typescript\n * import '@cds/core/pagination/register.js';\n * ```\n *\n * ```html\n * <cds-pagination>\n * <cds-pagination-button action=\"first\" disabled></cds-pagination-button>\n * <cds-pagination-button action=\"prev\" disabled></cds-pagination-button>\n * <span aria-label=\"current page\">1 / 3</span>\n * <cds-pagination-button action=\"next\"></cds-pagination-button>\n * <cds-pagination-button action=\"last\"></cds-pagination-button>\n * </cds-pagination>\n * ```\n *\n * @beta\n * @element cds-pagination\n * @slot\n * @slot cds-pagination-button\n * @cssprop --color\n * @cssprop --font-size\n */\nexport class CdsPagination extends LitElement {\n constructor() {\n super(...arguments);\n this.globalStyles = css `\n [cds-pagination-number] > cds-control-message {\n --min-width: initial;\n }\n `;\n }\n render() {\n const userLayout = html `<slot></slot>`;\n const defaultLayout = html `<div cds-layout=\"horizontal gap:sm align:center\"><slot></slot></div>`;\n return html `${cache(this.hasAttribute('cds-layout') ? userLayout : defaultLayout)}`;\n }\n static get styles() {\n return [baseStyles, styles];\n }\n firstUpdated(props) {\n super.firstUpdated(props);\n this.setupNumberInput();\n this.validateAriaLabel();\n }\n setupNumberInput() {\n if (this.numberInput) {\n this.numberInput.controlWidth = 'shrink';\n this.numberInput.layout = 'compact';\n }\n }\n validateAriaLabel() {\n if (notProductionEnvironment() && !this.getAttribute('aria-label')?.length) {\n LogService.warn('An aria-label is missing', this);\n }\n }\n}\n__decorate([\n globalStyle()\n], CdsPagination.prototype, \"globalStyles\", void 0);\n__decorate([\n querySlot('cds-input[cds-pagination-number]')\n], CdsPagination.prototype, \"numberInput\", void 0);\n"],"names":["CdsPagination","LitElement","constructor","super","this","globalStyles","css","render","userLayout","html","defaultLayout","cache","hasAttribute","styles","baseStyles","firstUpdated","props","setupNumberInput","validateAriaLabel","numberInput","controlWidth","layout","notProductionEnvironment","getAttribute","length","LogService","warn","__decorate","globalStyle","prototype","querySlot"],"mappings":"iTAkCO,MAAMA,UAAsBC,EAC/BC,cACIC,oBACAC,KAAKC,aAAeC,CAAI,mEAM5BC,SACI,MAAMC,EAAaC,CAAK,gBAClBC,EAAgBD,CAAK,
|
|
1
|
+
{"version":3,"file":"pagination.element.js","sources":["../../../src/pagination/pagination.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 { css, html, LitElement } from 'lit';\nimport { cache } from 'lit/directives/cache.js';\nimport { baseStyles, globalStyle, LogService, notProductionEnvironment, querySlot } from '@cds/core/internal';\nimport styles from './pagination.element.scss';\n/**\n * Web component pagination.\n *\n * ```typescript\n * import '@cds/core/pagination/register.js';\n * ```\n *\n * ```html\n * <cds-pagination>\n * <cds-pagination-button action=\"first\" disabled></cds-pagination-button>\n * <cds-pagination-button action=\"prev\" disabled></cds-pagination-button>\n * <span aria-label=\"current page\">1 / 3</span>\n * <cds-pagination-button action=\"next\"></cds-pagination-button>\n * <cds-pagination-button action=\"last\"></cds-pagination-button>\n * </cds-pagination>\n * ```\n *\n * @beta\n * @element cds-pagination\n * @slot\n * @slot cds-pagination-button\n * @cssprop --color\n * @cssprop --font-size\n */\nexport class CdsPagination extends LitElement {\n constructor() {\n super(...arguments);\n this.globalStyles = css `\n [cds-pagination-number] > cds-control-message {\n --min-width: initial;\n }\n `;\n }\n render() {\n const userLayout = html `<slot></slot>`;\n const defaultLayout = html `<div cds-layout=\"horizontal gap:sm align:center wrap:none\"><slot></slot></div>`;\n return html `${cache(this.hasAttribute('cds-layout') ? userLayout : defaultLayout)}`;\n }\n static get styles() {\n return [baseStyles, styles];\n }\n firstUpdated(props) {\n super.firstUpdated(props);\n this.setupNumberInput();\n this.validateAriaLabel();\n }\n setupNumberInput() {\n if (this.numberInput) {\n this.numberInput.controlWidth = 'shrink';\n this.numberInput.layout = 'compact';\n }\n }\n validateAriaLabel() {\n if (notProductionEnvironment() && !this.getAttribute('aria-label')?.length) {\n LogService.warn('An aria-label is missing', this);\n }\n }\n}\n__decorate([\n globalStyle()\n], CdsPagination.prototype, \"globalStyles\", void 0);\n__decorate([\n querySlot('cds-input[cds-pagination-number]')\n], CdsPagination.prototype, \"numberInput\", void 0);\n"],"names":["CdsPagination","LitElement","constructor","super","this","globalStyles","css","render","userLayout","html","defaultLayout","cache","hasAttribute","styles","baseStyles","firstUpdated","props","setupNumberInput","validateAriaLabel","numberInput","controlWidth","layout","notProductionEnvironment","getAttribute","length","LogService","warn","__decorate","globalStyle","prototype","querySlot"],"mappings":"iTAkCO,MAAMA,UAAsBC,EAC/BC,cACIC,oBACAC,KAAKC,aAAeC,CAAI,mEAM5BC,SACI,MAAMC,EAAaC,CAAK,gBAClBC,EAAgBD,CAAK,iFAC3B,OAAOA,CAAK,GAAGE,EAAMP,KAAKQ,aAAa,cAAgBJ,EAAaE,KAE7DG,oBACP,MAAO,CAACC,EAAYD,GAExBE,aAAaC,GACTb,MAAMY,aAAaC,GACnBZ,KAAKa,mBACLb,KAAKc,oBAETD,mBACQb,KAAKe,cACLf,KAAKe,YAAYC,aAAe,SAChChB,KAAKe,YAAYE,OAAS,WAGlCH,oBACQI,MAA+BlB,KAAKmB,aAAa,eAAeC,QAChEC,EAAWC,KAAK,2BAA4BtB,OAIxDuB,EAAW,CACPC,KACD5B,EAAc6B,UAAW,oBAAgB,GAC5CF,EAAW,CACPG,EAAU,qCACX9B,EAAc6B,UAAW,mBAAe"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{css as o}from"lit";var a=o`:host{--color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--font-size:var(--cds-global-typography-font-size-3, 0.8125rem);color:var(--color);display:flex;width:
|
|
1
|
+
import{css as o}from"lit";var a=o`:host{--color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--font-size:var(--cds-global-typography-font-size-3, 0.8125rem);--action-color:var(--color);color:var(--color);display:flex;width:100%;flex-wrap:none;font-size:var(--font-size)}::slotted(cds-input[cds-pagination-number]){--background:var(--cds-alias-object-container-background);--border-radius:var(--cds-alias-object-border-radius-100);--border:var(--cds-alias-object-border-width-100) solid var(--cds-alias-object-border-color);--border-bottom:0;--padding:var(--cds-global-space-2) var(--cds-global-space-4) 0;--font-size:var(--cds-global-typography-font-size-3, 0.8125rem);--text-align:center}::slotted(span){display:block}::slotted(cds-pagination-button){--color:var(--action-color)}::slotted([cds-control]){--min-width:initial;--label-width:0;--control-width:initial;width:auto}`;export{a as default};
|
|
2
2
|
//# sourceMappingURL=pagination.element.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{querySlotAll as o,id as r}from"@cds/core/internal";import{CdsInternalControlGroup as s}from"@cds/core/forms";class e extends s{static get styles(){return[...super.styles]}firstUpdated(t){super.firstUpdated(t),this.associateRadioControls(),this.syncRadioControls()}associateRadioControls(){this.controls.forEach((t=>{t&&!t.inputControl.getAttribute("name")&&t.inputControl.setAttribute("name",this.radioName)}))}syncRadioControls(){this.controls.forEach((t=>t.addEventListener("checkedChange",(t=>{t.detail&&(Array.from(this.controls).forEach((t=>t.inputControl.checked=!1)),t.target.inputControl.checked=!0)}))))}}t([o("cds-radio, cds-radio")],e.prototype,"controls",void 0),t([r()],e.prototype,"radioName",void 0);export{e as CdsRadioGroup};
|
|
1
|
+
import{__decorate as t}from"tslib";import{querySlotAll as o,id as r}from"@cds/core/internal";import{CdsInternalControlGroup as s}from"@cds/core/forms";class e extends s{static get styles(){return[...super.styles]}firstUpdated(t){super.firstUpdated(t),this.associateRadioControls(),this.syncRadioControls()}associateRadioControls(){this.controls.forEach((t=>{t&&!t.inputControl.getAttribute("name")&&t.inputControl.setAttribute("name",this.radioName)}))}syncRadioControls(){this.controls.forEach((t=>t.addEventListener("checkedChange",(t=>{t.detail&&(Array.from(this.controls).forEach((t=>t.inputControl.checked=!1)),t.target.inputControl.checked=!0)}))))}}t([o("cds-radio, cds-radio-panel")],e.prototype,"controls",void 0),t([r()],e.prototype,"radioName",void 0);export{e as CdsRadioGroup};
|
|
2
2
|
//# sourceMappingURL=radio-group.element.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.element.js","sources":["../../../src/radio/radio-group.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 { querySlotAll, id } from '@cds/core/internal';\nimport { CdsInternalControlGroup } from '@cds/core/forms';\n/**\n * Radio Group\n *\n * ```typescript\n * import '@cds/core/radio/register.js';\n * ```\n *\n * ```html\n * <cds-radio-group>\n * <label>radio group</label>\n * <cds-radio>\n * <label>item 1</label>\n * <input type=\"radio\" />\n * </cds-radio>\n *\n * <cds-radio>\n * <label>item 2</label>\n * <input type=\"radio\" />\n * </cds-radio>\n * </cds-radio-group>\n * ```\n *\n * @element cds-radio-group\n * @slot - For projecting cds-radio controls\n */\nexport class CdsRadioGroup extends CdsInternalControlGroup {\n static get styles() {\n return [...super.styles];\n }\n firstUpdated(props) {\n super.firstUpdated(props);\n this.associateRadioControls();\n this.syncRadioControls();\n }\n associateRadioControls() {\n this.controls.forEach(radio => {\n if (radio && !radio.inputControl.getAttribute('name')) {\n radio.inputControl.setAttribute('name', this.radioName);\n }\n });\n }\n syncRadioControls() {\n this.controls.forEach(c => c.addEventListener('checkedChange', (e) => {\n if (e.detail) {\n Array.from(this.controls).forEach(c => (c.inputControl.checked = false));\n e.target.inputControl.checked = true;\n }\n }));\n }\n}\n__decorate([\n querySlotAll('cds-radio, cds-radio')\n], CdsRadioGroup.prototype, \"controls\", void 0);\n__decorate([\n id()\n], CdsRadioGroup.prototype, \"radioName\", void 0);\n"],"names":["CdsRadioGroup","CdsInternalControlGroup","styles","super","firstUpdated","props","this","associateRadioControls","syncRadioControls","controls","forEach","radio","inputControl","getAttribute","setAttribute","radioName","c","addEventListener","e","detail","Array","from","checked","target","__decorate","querySlotAll","prototype","id"],"mappings":"uJAiCO,MAAMA,UAAsBC,EACpBC,oBACP,MAAO,IAAIC,MAAMD,QAErBE,aAAaC,GACTF,MAAMC,aAAaC,GACnBC,KAAKC,yBACLD,KAAKE,oBAETD,yBACID,KAAKG,SAASC,SAAQC,IACdA,IAAUA,EAAMC,aAAaC,aAAa,SAC1CF,EAAMC,aAAaE,aAAa,OAAQR,KAAKS,cAIzDP,oBACIF,KAAKG,SAASC,SAAQM,GAAKA,EAAEC,iBAAiB,iBAAkBC,IACxDA,EAAEC,SACFC,MAAMC,KAAKf,KAAKG,UAAUC,SAAQM,GAAMA,EAAEJ,aAAaU,SAAU,IACjEJ,EAAEK,OAAOX,aAAaU,SAAU,SAKhDE,EAAW,CACPC,EAAa,
|
|
1
|
+
{"version":3,"file":"radio-group.element.js","sources":["../../../src/radio/radio-group.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 { querySlotAll, id } from '@cds/core/internal';\nimport { CdsInternalControlGroup } from '@cds/core/forms';\n/**\n * Radio Group\n *\n * ```typescript\n * import '@cds/core/radio/register.js';\n * ```\n *\n * ```html\n * <cds-radio-group>\n * <label>radio group</label>\n * <cds-radio>\n * <label>item 1</label>\n * <input type=\"radio\" />\n * </cds-radio>\n *\n * <cds-radio>\n * <label>item 2</label>\n * <input type=\"radio\" />\n * </cds-radio>\n * </cds-radio-group>\n * ```\n *\n * @element cds-radio-group\n * @slot - For projecting cds-radio controls\n */\nexport class CdsRadioGroup extends CdsInternalControlGroup {\n static get styles() {\n return [...super.styles];\n }\n firstUpdated(props) {\n super.firstUpdated(props);\n this.associateRadioControls();\n this.syncRadioControls();\n }\n associateRadioControls() {\n this.controls.forEach(radio => {\n if (radio && !radio.inputControl.getAttribute('name')) {\n radio.inputControl.setAttribute('name', this.radioName);\n }\n });\n }\n syncRadioControls() {\n this.controls.forEach(c => c.addEventListener('checkedChange', (e) => {\n if (e.detail) {\n Array.from(this.controls).forEach(c => (c.inputControl.checked = false));\n e.target.inputControl.checked = true;\n }\n }));\n }\n}\n__decorate([\n querySlotAll('cds-radio, cds-radio-panel')\n], CdsRadioGroup.prototype, \"controls\", void 0);\n__decorate([\n id()\n], CdsRadioGroup.prototype, \"radioName\", void 0);\n"],"names":["CdsRadioGroup","CdsInternalControlGroup","styles","super","firstUpdated","props","this","associateRadioControls","syncRadioControls","controls","forEach","radio","inputControl","getAttribute","setAttribute","radioName","c","addEventListener","e","detail","Array","from","checked","target","__decorate","querySlotAll","prototype","id"],"mappings":"uJAiCO,MAAMA,UAAsBC,EACpBC,oBACP,MAAO,IAAIC,MAAMD,QAErBE,aAAaC,GACTF,MAAMC,aAAaC,GACnBC,KAAKC,yBACLD,KAAKE,oBAETD,yBACID,KAAKG,SAASC,SAAQC,IACdA,IAAUA,EAAMC,aAAaC,aAAa,SAC1CF,EAAMC,aAAaE,aAAa,OAAQR,KAAKS,cAIzDP,oBACIF,KAAKG,SAASC,SAAQM,GAAKA,EAAEC,iBAAiB,iBAAkBC,IACxDA,EAAEC,SACFC,MAAMC,KAAKf,KAAKG,UAAUC,SAAQM,GAAMA,EAAEJ,aAAaU,SAAU,IACjEJ,EAAEK,OAAOX,aAAaU,SAAU,SAKhDE,EAAW,CACPC,EAAa,+BACdzB,EAAc0B,UAAW,gBAAY,GACxCF,EAAW,CACPG,KACD3B,EAAc0B,UAAW,iBAAa"}
|