@cds/core 5.7.2 → 5.8.1
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.element.scss.js +1 -1
- package/icon/icon.element.js +1 -1
- package/icon/icon.element.js.map +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 +2 -2
- package/tag/tag.element.scss.js +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{css as a}from"lit";var l=a`:host{--container-padding:var(--cds-global-space-2, calc(2 / var(--cds-global-base, 20) * 1rem)) 0;--min-height:var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem));--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--font-size:var(--cds-global-typography-secondary-font-size, calc(13 / var(--cds-global-base, 20) * 1rem));--font-weight:var(--cds-global-typography-secondary-font-weight, 400);--letter-spacing:var(--cds-global-typography-body-letter-spacing, -0.014286em);--icon-size:var(--cds-global-space-8, calc(18 / var(--cds-global-base, 20) * 1rem));--icon-color:var(--color);width:100%}.private-host{min-height:var(--min-height);color:var(--color)}:host([_type=banner]) ::slotted(cds-alert-actions),:host([_type=default]) ::slotted(cds-alert-actions){--action-size:calc(var(--min-height) - var(--cds-global-space-4, calc(6 / var(--cds-global-base, 20) * 1rem)));white-space:nowrap;display:block}:host([_type=banner]){--icon-size:var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem))}.alert-status-icon,::slotted(cds-icon){height:var(--icon-size);width:var(--icon-size);--color:var(--icon-color)}cds-internal-close-button{--color:inherit}.alert-content-wrapper,.alert-icon-wrapper{display:flex;min-height:var(--cds-global-space-6,calc(12 / var(--cds-global-base,20) * 1rem));padding:var(--container-padding)}.alert-icon-wrapper{min-width:var(--icon-size)}.alert-content-wrapper{display:inline-flex;align-items:center;transform:translateY(var(--cds-global-space-1,calc(1 / var(--cds-global-base,20) * 1rem)));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=default]) cds-internal-close-button{height:var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem))}:host([_type=default]) .alert-content-wrapper{align-items:self-start}:host([_type=light][status=info]){--icon-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([_type=light][status=success]){--icon-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_type=light][status=warning]){--icon-color:var(--cds-alias-status-warning-dark, var(--cds-global-color-ochre-800, #a36500))}:host([_type=light][status=danger]){--icon-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=loading][_type=banner]) .alert-spinner,:host([status=loading][_type=default]) .alert-spinner{--ring-color:var(--cds-alias-object-opacity-200, rgba(0, 0, 0, 0.4))}:host([status=loading][_type=banner]) .alert-spinner{--fill-color:var(--icon-color)}:host([size=sm]:not([_type=banner])){--font-size:var(--cds-global-typography-font-size-1, calc(11 / var(--cds-global-base, 20) * 1rem));--letter-spacing:normal}:host([_type=banner]) .alert-content-wrapper{transform:none;min-height:var(--cds-global-space-10,calc(32 / var(--cds-global-base,20) * 1rem))}: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-black, black)}:host([_type=banner][status=warning]) cds-alert-actions,:host([_type=default][status=warning]) cds-alert-actions{--action-hover-text-color:var(--color);--action-text-color:var(--color)}:host([_type=banner]) .spinner{height:calc(var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem)) + var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)));width:calc(var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem)) + var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)));min-height:calc(var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem)) + var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)));min-width:calc(var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem)) + var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)));margin-top:var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem))}:host([_type=banner]) cds-internal-close-button{height:var(--cds-global-space-9,calc(24 / var(--cds-global-base,20) * 1rem));margin-top:var(--cds-global-space-3,calc(4 / var(--cds-global-base,20) * 1rem))}@supports (-moz-appearance:none) and (text-emphasis:none){:host(:not([_type=banner]):not([size=sm])) .alert-content{transform:translateY(calc(-1*var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem))))}}`;export{l as default};
|
|
1
|
+
import{css as a}from"lit";var l=a`:host{--container-padding:var(--cds-global-space-2, calc(2 / var(--cds-global-base, 20) * 1rem)) 0;--min-height:var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem));--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--font-size:var(--cds-global-typography-secondary-font-size, calc(13 / var(--cds-global-base, 20) * 1rem));--font-weight:var(--cds-global-typography-secondary-font-weight, 400);--letter-spacing:var(--cds-global-typography-body-letter-spacing, -0.014286em);--icon-size:var(--cds-global-space-8, calc(18 / var(--cds-global-base, 20) * 1rem));--icon-color:var(--color);width:100%}.private-host{min-height:var(--min-height);color:var(--color)}:host([_type=banner]) ::slotted(cds-alert-actions),:host([_type=default]) ::slotted(cds-alert-actions){--action-size:calc(var(--min-height) - var(--cds-global-space-4, calc(6 / var(--cds-global-base, 20) * 1rem)));white-space:nowrap;display:block}:host([_type=banner]){--icon-size:var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem))}.alert-status-icon,::slotted(cds-icon){height:var(--icon-size);width:var(--icon-size);--color:var(--icon-color)}cds-internal-close-button{--color:inherit}.alert-content-wrapper,.alert-icon-wrapper{display:flex;min-height:var(--cds-global-space-6,calc(12 / var(--cds-global-base,20) * 1rem));padding:var(--container-padding);min-width:0}.alert-icon-wrapper{min-width:var(--icon-size)}.alert-content-wrapper{display:inline-flex;align-items:center;transform:translateY(var(--cds-global-space-1,calc(1 / var(--cds-global-base,20) * 1rem)));color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);line-height:var(--cds-global-typography-body-line-height,1.42857em)}.alert-content{min-width:0}::slotted(cds-alert-actions){--action-text-color:var(--color);--action-size:var(--cds-global-typography-body-line-height, 1.42857em);display:none}:host([_type=default]) cds-internal-close-button{height:var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem))}:host([_type=default]) .alert-content-wrapper{align-items:self-start}:host([_type=light][status=info]){--icon-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([_type=light][status=success]){--icon-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_type=light][status=warning]){--icon-color:var(--cds-alias-status-warning-dark, var(--cds-global-color-ochre-800, #a36500))}:host([_type=light][status=danger]){--icon-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=loading][_type=banner]) .alert-spinner,:host([status=loading][_type=default]) .alert-spinner{--ring-color:var(--cds-alias-object-opacity-200, rgba(0, 0, 0, 0.4))}:host([status=loading][_type=banner]) .alert-spinner{--fill-color:var(--icon-color)}:host([size=sm]:not([_type=banner])){--font-size:var(--cds-global-typography-font-size-1, calc(11 / var(--cds-global-base, 20) * 1rem));--letter-spacing:normal}:host([_type=banner]) .alert-content-wrapper{transform:none;min-height:var(--cds-global-space-10,calc(32 / var(--cds-global-base,20) * 1rem))}: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-black, black)}:host([_type=banner][status=warning]) cds-alert-actions,:host([_type=default][status=warning]) cds-alert-actions{--action-hover-text-color:var(--color);--action-text-color:var(--color)}:host([_type=banner]) .spinner{height:calc(var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem)) + var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)));width:calc(var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem)) + var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)));min-height:calc(var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem)) + var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)));min-width:calc(var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem)) + var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)));margin-top:var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem))}:host([_type=banner]) cds-internal-close-button{height:var(--cds-global-space-9,calc(24 / var(--cds-global-base,20) * 1rem));margin-top:var(--cds-global-space-3,calc(4 / var(--cds-global-base,20) * 1rem))}@supports (-moz-appearance:none) and (text-emphasis:none){:host(:not([_type=banner]):not([size=sm])) .alert-content{transform:translateY(calc(-1*var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem))))}}`;export{l as default};
|
|
2
2
|
//# sourceMappingURL=alert.element.scss.js.map
|
package/icon/icon.element.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{baseStyles as s,hasStringPropertyChangedAndNotNil as e,hasStringPropertyChanged as i,pxToRem as r,GlobalStateService as o,isString as p,property as n,state as h}from"@cds/core/internal";import{LitElement as a,html as d,svg as
|
|
1
|
+
import{__decorate as t}from"tslib";import{baseStyles as s,hasStringPropertyChangedAndNotNil as e,hasStringPropertyChanged as i,pxToRem as r,GlobalStateService as o,isString as p,property as n,state as h}from"@cds/core/internal";import{LitElement as a,html as d,svg as c}from"lit";import{query as l}from"lit/decorators/query.js";import y from"./icon.element.scss.js";import{ClarityIcons as u}from"./icon.service.js";import{updateIconSizeStyle as g}from"./utils/icon.classnames.js";import{getIconSVG as f,getIconBadgeSVG as v}from"./utils/icon.svg-helpers.js";class m extends a{constructor(){super(...arguments);this._shape="unknown",this.solid=!1,this.inverse=!1}static get styles(){return[s,y]}get shape(){return this._shape}set shape(t){if(e(t,this._shape)){const s=this._shape;this._shape=t,this.requestUpdate("shape",s)}}get size(){return this._size}set size(t){if(i(t,this._size)){const s=this._size;this._size=t,g(this,t),this.requestUpdate("size",s)}}updated(t){if(t.has("innerOffset")&&this.innerOffset>0){const t=r(-1*this.innerOffset),s=`calc(100% + ${r(2*this.innerOffset)})`;this.svg.style.width=s,this.svg.style.height=s,this.svg.style.margin=`${t} 0 0 ${t}`}}firstUpdated(t){if(super.firstUpdated(t),this.isConnected){let t="unknown";this.subscription=o.stateUpdates.subscribe((s=>{"iconRegistry"===s.key&&u.registry[this.shape]&&t!==this.shape&&(t=this.shape,this.requestUpdate("shape"))}))}}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.subscription)||void 0===t||t.unsubscribe()}render(){return p(u.registry[this.shape])?d`<span .innerHTML="${u.registry[this.shape]}"></span>`:c`<svg .innerHTML="${f(this)+v(this)}" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>`}}t([n({type:String})],m.prototype,"shape",null),t([n({type:String})],m.prototype,"size",null),t([n({type:String})],m.prototype,"direction",void 0),t([n({type:String})],m.prototype,"flip",void 0),t([n({type:Boolean})],m.prototype,"solid",void 0),t([n({type:String})],m.prototype,"status",void 0),t([n({type:Boolean})],m.prototype,"inverse",void 0),t([n({type:String})],m.prototype,"badge",void 0),t([h({type:Number})],m.prototype,"innerOffset",void 0),t([l("svg")],m.prototype,"svg",void 0);export{m as CdsIcon};
|
|
2
2
|
//# sourceMappingURL=icon.element.js.map
|
package/icon/icon.element.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.element.js","sources":["../../../src/icon/icon.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 { baseStyles, hasStringPropertyChanged, hasStringPropertyChangedAndNotNil, property, state, isString, pxToRem, GlobalStateService, } from '@cds/core/internal';\nimport { html, LitElement, svg } from 'lit';\nimport { query } from 'lit/decorators/query.js';\nimport styles from './icon.element.scss';\nimport { ClarityIcons } from './icon.service.js';\nimport { updateIconSizeStyle } from './utils/icon.classnames.js';\nimport { getIconBadgeSVG, getIconSVG } from './utils/icon.svg-helpers.js';\n/**\n * Icon component that renders svg shapes that can be customized.\n * To load an icon, import the icon with the icon service.\n *\n * ```typescript\n * import '@cds/core/icon/register.js';\n * import { ClarityIcons, userIcon } from '@cds/core/icon';\n *\n * ClarityIcons.addIcons(userIcon);\n * ```\n *\n * ```html\n * <cds-icon shape=\"user\"></cds-icon>\n * ```\n *\n * @element cds-icon\n * @cssprop --color\n * @cssprop --badge-color\n */\nexport class CdsIcon extends LitElement {\n constructor() {\n super(...arguments);\n this._shape = 'unknown';\n /**\n * Displays most icons in their \"filled\" version if set to `true`.\n */\n this.solid = false;\n /**\n * Inverts color of icon fills and outlines if `true`.\n * Useful for displaying icons on a dark background.\n */\n this.inverse = false;\n }\n static get styles() {\n return [baseStyles, styles];\n }\n get shape() {\n return this._shape;\n }\n /**\n * Changes the svg glyph displayed in the icon component. Defaults to the 'unknown' icon if\n * the specified icon cannot be found in the icon registry.\n */\n set shape(val) {\n if (hasStringPropertyChangedAndNotNil(val, this._shape)) {\n const oldVal = this._shape;\n this._shape = val;\n this.requestUpdate('shape', oldVal);\n }\n }\n get size() {\n return this._size;\n }\n /**\n * Apply numerical width-height or a t-shirt-sized CSS classname\n * @type {string | xs | sm | md | lg | xl | xxl}\n */\n set size(val) {\n if (hasStringPropertyChanged(val, this._size)) {\n const oldVal = this._size;\n this._size = val;\n updateIconSizeStyle(this, val);\n this.requestUpdate('size', oldVal);\n }\n }\n updated(props) {\n if (props.has('innerOffset') && this.innerOffset > 0) {\n const val = pxToRem(-1 * this.innerOffset);\n const dimension = `calc(100% + ${pxToRem(this.innerOffset * 2)})`;\n this.svg.style.width = dimension;\n this.svg.style.height = dimension;\n this.svg.style.margin = `${val} 0 0 ${val}`;\n }\n }\n firstUpdated(props) {\n super.firstUpdated(props);\n let prior = 'unknown';\n
|
|
1
|
+
{"version":3,"file":"icon.element.js","sources":["../../../src/icon/icon.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 { baseStyles, hasStringPropertyChanged, hasStringPropertyChangedAndNotNil, property, state, isString, pxToRem, GlobalStateService, } from '@cds/core/internal';\nimport { html, LitElement, svg } from 'lit';\nimport { query } from 'lit/decorators/query.js';\nimport styles from './icon.element.scss';\nimport { ClarityIcons } from './icon.service.js';\nimport { updateIconSizeStyle } from './utils/icon.classnames.js';\nimport { getIconBadgeSVG, getIconSVG } from './utils/icon.svg-helpers.js';\n/**\n * Icon component that renders svg shapes that can be customized.\n * To load an icon, import the icon with the icon service.\n *\n * ```typescript\n * import '@cds/core/icon/register.js';\n * import { ClarityIcons, userIcon } from '@cds/core/icon';\n *\n * ClarityIcons.addIcons(userIcon);\n * ```\n *\n * ```html\n * <cds-icon shape=\"user\"></cds-icon>\n * ```\n *\n * @element cds-icon\n * @cssprop --color\n * @cssprop --badge-color\n */\nexport class CdsIcon extends LitElement {\n constructor() {\n super(...arguments);\n this._shape = 'unknown';\n /**\n * Displays most icons in their \"filled\" version if set to `true`.\n */\n this.solid = false;\n /**\n * Inverts color of icon fills and outlines if `true`.\n * Useful for displaying icons on a dark background.\n */\n this.inverse = false;\n }\n static get styles() {\n return [baseStyles, styles];\n }\n get shape() {\n return this._shape;\n }\n /**\n * Changes the svg glyph displayed in the icon component. Defaults to the 'unknown' icon if\n * the specified icon cannot be found in the icon registry.\n */\n set shape(val) {\n if (hasStringPropertyChangedAndNotNil(val, this._shape)) {\n const oldVal = this._shape;\n this._shape = val;\n this.requestUpdate('shape', oldVal);\n }\n }\n get size() {\n return this._size;\n }\n /**\n * Apply numerical width-height or a t-shirt-sized CSS classname\n * @type {string | xs | sm | md | lg | xl | xxl}\n */\n set size(val) {\n if (hasStringPropertyChanged(val, this._size)) {\n const oldVal = this._size;\n this._size = val;\n updateIconSizeStyle(this, val);\n this.requestUpdate('size', oldVal);\n }\n }\n updated(props) {\n if (props.has('innerOffset') && this.innerOffset > 0) {\n const val = pxToRem(-1 * this.innerOffset);\n const dimension = `calc(100% + ${pxToRem(this.innerOffset * 2)})`;\n this.svg.style.width = dimension;\n this.svg.style.height = dimension;\n this.svg.style.margin = `${val} 0 0 ${val}`;\n }\n }\n firstUpdated(props) {\n super.firstUpdated(props);\n if (this.isConnected) {\n let prior = 'unknown';\n this.subscription = GlobalStateService.stateUpdates.subscribe(update => {\n if (update.key === 'iconRegistry' && ClarityIcons.registry[this.shape] && prior !== this.shape) {\n prior = this.shape;\n this.requestUpdate('shape');\n }\n });\n }\n }\n disconnectedCallback() {\n var _a;\n super.disconnectedCallback();\n (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();\n }\n render() {\n return isString(ClarityIcons.registry[this.shape])\n ? html `<span .innerHTML=\"${ClarityIcons.registry[this.shape]}\"></span>`\n : svg `<svg .innerHTML=\"${getIconSVG(this) + getIconBadgeSVG(this)}\" viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"></svg>`;\n }\n}\n__decorate([\n property({ type: String })\n], CdsIcon.prototype, \"shape\", null);\n__decorate([\n property({ type: String })\n], CdsIcon.prototype, \"size\", null);\n__decorate([\n property({ type: String })\n], CdsIcon.prototype, \"direction\", void 0);\n__decorate([\n property({ type: String })\n], CdsIcon.prototype, \"flip\", void 0);\n__decorate([\n property({ type: Boolean })\n], CdsIcon.prototype, \"solid\", void 0);\n__decorate([\n property({ type: String })\n], CdsIcon.prototype, \"status\", void 0);\n__decorate([\n property({ type: Boolean })\n], CdsIcon.prototype, \"inverse\", void 0);\n__decorate([\n property({ type: String })\n], CdsIcon.prototype, \"badge\", void 0);\n__decorate([\n state({ type: Number })\n], CdsIcon.prototype, \"innerOffset\", void 0);\n__decorate([\n query('svg')\n], CdsIcon.prototype, \"svg\", void 0);\n"],"names":["CdsIcon","LitElement","constructor","super","this","_shape","solid","inverse","styles","baseStyles","shape","val","hasStringPropertyChangedAndNotNil","oldVal","requestUpdate","size","_size","hasStringPropertyChanged","updateIconSizeStyle","updated","props","has","innerOffset","pxToRem","dimension","svg","style","width","height","margin","firstUpdated","isConnected","prior","subscription","GlobalStateService","stateUpdates","subscribe","update","key","ClarityIcons","registry","disconnectedCallback","_a","unsubscribe","render","isString","html","getIconSVG","getIconBadgeSVG","__decorate","property","type","String","prototype","Boolean","state","Number","query"],"mappings":"8iBAgCO,MAAMA,UAAgBC,EACzBC,cACIC,oBACAC,KAAKC,OAAS,UAIdD,KAAKE,OAAQ,EAKbF,KAAKG,SAAU,EAERC,oBACP,MAAO,CAACC,EAAYD,GAEpBE,YACA,OAAON,KAAKC,OAMZK,UAAMC,GACN,GAAIC,EAAkCD,EAAKP,KAAKC,QAAS,CACrD,MAAMQ,EAAST,KAAKC,OACpBD,KAAKC,OAASM,EACdP,KAAKU,cAAc,QAASD,IAGhCE,WACA,OAAOX,KAAKY,MAMZD,SAAKJ,GACL,GAAIM,EAAyBN,EAAKP,KAAKY,OAAQ,CAC3C,MAAMH,EAAST,KAAKY,MACpBZ,KAAKY,MAAQL,EACbO,EAAoBd,KAAMO,GAC1BP,KAAKU,cAAc,OAAQD,IAGnCM,QAAQC,GACJ,GAAIA,EAAMC,IAAI,gBAAkBjB,KAAKkB,YAAc,EAAG,CAClD,MAAMX,EAAMY,GAAS,EAAInB,KAAKkB,aACxBE,EAAY,eAAeD,EAA2B,EAAnBnB,KAAKkB,gBAC9ClB,KAAKqB,IAAIC,MAAMC,MAAQH,EACvBpB,KAAKqB,IAAIC,MAAME,OAASJ,EACxBpB,KAAKqB,IAAIC,MAAMG,OAAS,GAAGlB,SAAWA,KAG9CmB,aAAaV,GAET,GADAjB,MAAM2B,aAAaV,GACfhB,KAAK2B,YAAa,CAClB,IAAIC,EAAQ,UACZ5B,KAAK6B,aAAeC,EAAmBC,aAAaC,WAAUC,IACvC,iBAAfA,EAAOC,KAA0BC,EAAaC,SAASpC,KAAKM,QAAUsB,IAAU5B,KAAKM,QACrFsB,EAAQ5B,KAAKM,MACbN,KAAKU,cAAc,cAKnC2B,uBACI,IAAIC,EACJvC,MAAMsC,uBACuB,QAA5BC,EAAKtC,KAAK6B,oBAAiC,IAAPS,GAAyBA,EAAGC,cAErEC,SACI,OAAOC,EAASN,EAAaC,SAASpC,KAAKM,QACrCoC,CAAK,qBAAqBP,EAAaC,SAASpC,KAAKM,kBACrDe,CAAI,oBAAoBsB,EAAW3C,MAAQ4C,EAAgB5C,2FAGzE6C,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBpD,EAAQqD,UAAW,QAAS,MAC/BJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBpD,EAAQqD,UAAW,OAAQ,MAC9BJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBpD,EAAQqD,UAAW,iBAAa,GACnCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBpD,EAAQqD,UAAW,YAAQ,GAC9BJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,WAClBtD,EAAQqD,UAAW,aAAS,GAC/BJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBpD,EAAQqD,UAAW,cAAU,GAChCJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,WAClBtD,EAAQqD,UAAW,eAAW,GACjCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBpD,EAAQqD,UAAW,aAAS,GAC/BJ,EAAW,CACPM,EAAM,CAAEJ,KAAMK,UACfxD,EAAQqD,UAAW,mBAAe,GACrCJ,EAAW,CACPQ,EAAM,QACPzD,EAAQqD,UAAW,WAAO"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { PropertyDrivenAnimation } from '../motion/interfaces.js';
|
|
2
|
-
export declare function animate(config: PropertyDrivenAnimation): <T extends new (...args: any[]) => any>(constr: T) => T;
|
|
2
|
+
export declare function animate(config: PropertyDrivenAnimation): (() => void) | (<T extends new (...args: any[]) => any>(constr: T) => T);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{PRIVATE_ANIMATION_STATUS_ATTR_NAME as t,AnimationStatus as
|
|
1
|
+
import{PRIVATE_ANIMATION_STATUS_ATTR_NAME as t,AnimationStatus as o}from"../motion/interfaces.js";import{runPropertyAnimations as e}from"../motion/utils.js";import{isJestTest as i}from"../utils/environment.js";function n(n){return i()?function(){}:function(i){const r=i;return class extends r{updated(i){super.updated(i);const r=this;r._animations=n||void 0,r.hasAttribute(t)?r.hasAttribute("_demo-mode")||e(i,r):r.setAttribute(t,o.ready)}}}}export{n 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// https://www.typescriptlang.org/docs/handbook/decorators.html#class-decorators\nexport function animate(config) {\n return function _DecoratorName(constr) {\n const _constr = constr;\n return class extends _constr {\n updated(props) {\n super.updated(props);\n const self = this;\n self._animations = config || void 0;\n if (!self.hasAttribute(PRIVATE_ANIMATION_STATUS_ATTR_NAME)) {\n self.setAttribute(PRIVATE_ANIMATION_STATUS_ATTR_NAME, AnimationStatus.ready);\n }\n else if (!self.hasAttribute('_demo-mode')) {\n // ignore if element has the _demo-mode attribute set; _demo-mode is used for docs, static examples, and stories\n runPropertyAnimations(props, self);\n }\n }\n };\n };\n}\n"],"names":["animate","config","constr","_constr","updated","props","super","self","this","_animations","hasAttribute","PRIVATE_ANIMATION_STATUS_ATTR_NAME","runPropertyAnimations","setAttribute","AnimationStatus","ready"],"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// https://www.typescriptlang.org/docs/handbook/decorators.html#class-decorators\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 return function _DecoratorName(constr) {\n const _constr = constr;\n return class extends _constr {\n updated(props) {\n super.updated(props);\n const self = this;\n self._animations = config || void 0;\n if (!self.hasAttribute(PRIVATE_ANIMATION_STATUS_ATTR_NAME)) {\n self.setAttribute(PRIVATE_ANIMATION_STATUS_ATTR_NAME, AnimationStatus.ready);\n }\n else if (!self.hasAttribute('_demo-mode')) {\n // ignore if element has the _demo-mode attribute set; _demo-mode is used for docs, static examples, and stories\n runPropertyAnimations(props, self);\n }\n }\n };\n };\n}\n"],"names":["animate","config","isJestTest","constr","_constr","updated","props","super","self","this","_animations","hasAttribute","PRIVATE_ANIMATION_STATUS_ATTR_NAME","runPropertyAnimations","setAttribute","AnimationStatus","ready"],"mappings":"kNASO,SAASA,EAAQC,GACpB,OAAIC,IACO,aAKJ,SAAwBC,GAC3B,MAAMC,EAAUD,EAChB,OAAO,cAAcC,EACjBC,QAAQC,GACJC,MAAMF,QAAQC,GACd,MAAME,EAAOC,KACbD,EAAKE,YAAcT,QAAU,EACxBO,EAAKG,aAAaC,GAGbJ,EAAKG,aAAa,eAExBE,EAAsBP,EAAOE,GAJ7BA,EAAKM,aAAaF,EAAoCG,EAAgBC"}
|
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:[],i18nRegistry:{},elementRegistry:{},iconRegistry:{},motionRegistry:{}},environment:{production:!1},getDetails:a,logDetails:d},function(){var e;const n="5.
|
|
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:[],i18nRegistry:{},elementRegistry:{},iconRegistry:{},motionRegistry:{}},environment:{production:!1},getDetails:a,logDetails:d},function(){var e;const n="5.8.1";window.CDS._version.indexOf(n)<0&&(window.CDS._version.push(n),null===(e=document.querySelector("body"))||void 0===e||e.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
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"license": "MIT",
|
|
4
4
|
"author": "clarity",
|
|
5
5
|
"description": "Clarity Design System - common components, themes, and utilties",
|
|
6
|
-
"homepage": "https://clarity.design",
|
|
6
|
+
"homepage": "https://core.clarity.design",
|
|
7
7
|
"customElements": "./custom-elements.json",
|
|
8
8
|
"keywords": [
|
|
9
9
|
"web component",
|
|
@@ -216,5 +216,5 @@
|
|
|
216
216
|
"./tokens/tokens.ios.swift": "./tokens/tokens.ios.swift",
|
|
217
217
|
"./tokens/tokens.android.xml": "./tokens/tokens.android.xml"
|
|
218
218
|
},
|
|
219
|
-
"version": "5.
|
|
219
|
+
"version": "5.8.1"
|
|
220
220
|
}
|
package/tag/tag.element.scss.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{css as a}from"lit";var o=a`:host{--background:var(--cds-alias-status-tint, var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8)));--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--padding:var(--cds-global-space-2, calc(2 / var(--cds-global-base, 20) * 1rem));--font-size:var(--cds-global-typography-font-size-0, calc(10 / var(--cds-global-base, 20) * 1rem));--border-radius:var(--cds-alias-object-border-radius-200, calc(12 / var(--cds-global-base, 20) * 1rem));--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));display:inline-block}.private-host{--internal-icon-color:var(--color);border-radius:var(--border-radius);background:var(--background);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);color:var(--color);font-size:var(--font-size);padding:var(--padding);white-space:nowrap;text-decoration:none;min-height:calc(var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem)) + var(--cds-global-space-3,calc(4 / var(--cds-global-base,20) * 1rem)));transform:translateZ(0)}.tag-content{padding:0 var(--cds-global-space-3,calc(4 / var(--cds-global-base,20) * 1rem))}::slotted(cds-icon),cds-icon[shape=times]{--color:var(--internal-icon-color);cursor:pointer}:host(:not([readonly])):host(:active) .private-host::after,:host(:not([readonly])):host(:focus) .private-host::after,:host(:not([readonly])):host(:hover) .private-host::after,:host(:not([readonly])):host([_active]) .private-host::after{background:var(--background);border-radius:var(--border-radius);filter:brightness(95%);position:absolute;content:"";top:0;left:0;bottom:0;right:0;inset:0;z-index:-1}:host(:not([readonly])):host(:active) .private-host,:host(:not([readonly])):host([_active]) .private-host{box-shadow:0 var(--cds-global-space-1,calc(1 / var(--cds-global-base,20) * 1rem)) 0 0 var(--border-color) inset}:host(:not([readonly])):host(:active) .tag-content,:host(:not([readonly])):host([_active]) .tag-content{transform:translateY(var(--cds-global-space-1,calc(1 / var(--cds-global-base,20) * 1rem)))}:host(:not([readonly])):host(:visited){color:var(--color)}:host([status=info]){--border-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--background:var(--cds-alias-status-tint, var(--cds-alias-status-info-tint, var(--cds-global-color-blue-50, #e6f7ff)))}:host([status=success]){--border-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--background:var(--cds-alias-status-tint, var(--cds-alias-status-success-tint, var(--cds-global-color-green-50, #eefce3)))}:host([status=warning]){--border-color:var(--cds-alias-status-warning, var(--cds-global-color-ochre-500, #ffb92e));--background:var(--cds-alias-status-tint, var(--cds-alias-status-warning-tint, var(--cds-global-color-ochre-100, #fff2d6)))}:host([status=danger]){--border-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200));--background:var(--cds-alias-status-tint, var(--cds-alias-status-danger-tint, var(--cds-global-color-red-50, #fff2f0)))}:host([color]){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([color]) :hover{--background:var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8))}:host([color=purple]){--border-color:var(--cds-global-color-violet-600, #9b32c8)}:host([color=blue]){--border-color:var(--cds-global-color-blue-800, #00608a)}:host([color=orange]){--border-color:var(--cds-global-color-ochre-800, #a36500)}:host([color=light-blue]){--border-color:var(--cds-global-color-blue-600, #009adb)}:host([disabled]){--color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))!important;--border-color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))!important;--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))!important}:host([disabled]) ::slotted(cds-badge){--background:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--color:var(--cds-alias-status-disabled-shade, var(--cds-global-color-construction-400, #859399))!important}:host([disabled]) ::slotted(cds-icon){--color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))!important}:host([disabled]) .private-host{box-shadow:none!important}:host([disabled]) .tag-content{transform:initial!important}`;export{o as default};
|
|
1
|
+
import{css as a}from"lit";var o=a`:host{--background:var(--cds-alias-status-tint, var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8)));--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--padding:var(--cds-global-space-2, calc(2 / var(--cds-global-base, 20) * 1rem));--font-size:var(--cds-global-typography-font-size-0, calc(10 / var(--cds-global-base, 20) * 1rem));--border-radius:var(--cds-alias-object-border-radius-200, calc(12 / var(--cds-global-base, 20) * 1rem));--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));display:inline-block}.private-host{--internal-icon-color:var(--color);border-radius:var(--border-radius);background:var(--background);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);color:var(--color);font-size:var(--font-size);padding:var(--padding);white-space:nowrap;text-decoration:none;min-height:calc(var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem)) + var(--cds-global-space-3,calc(4 / var(--cds-global-base,20) * 1rem)));transform:translateZ(0)}.tag-content{padding:0 var(--cds-global-space-3,calc(4 / var(--cds-global-base,20) * 1rem))}::slotted(cds-icon),cds-icon[shape=times]{--color:var(--internal-icon-color);cursor:pointer}:host(:not([readonly])):host(:active) .private-host::after,:host(:not([readonly])):host(:focus) .private-host::after,:host(:not([readonly])):host(:hover) .private-host::after,:host(:not([readonly])):host([_active]) .private-host::after{background:var(--background);border-radius:var(--border-radius);filter:brightness(95%);position:absolute;content:"";top:0;left:0;bottom:0;right:0;inset:0;z-index:-1}:host(:not([readonly])):host(:active) .private-host,:host(:not([readonly])):host([_active]) .private-host{box-shadow:0 var(--cds-global-space-1,calc(1 / var(--cds-global-base,20) * 1rem)) 0 0 var(--border-color) inset}:host(:not([readonly])):host(:active) .tag-content,:host(:not([readonly])):host([_active]) .tag-content{transform:translateY(var(--cds-global-space-1,calc(1 / var(--cds-global-base,20) * 1rem)))}:host(:not([readonly])):host(:visited){color:var(--color)}:host([status=info]){--border-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--background:var(--cds-alias-status-tint, var(--cds-alias-status-info-tint, var(--cds-global-color-blue-50, #e6f7ff)))}:host([status=success]){--border-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--background:var(--cds-alias-status-tint, var(--cds-alias-status-success-tint, var(--cds-global-color-green-50, #eefce3)))}:host([status=warning]){--border-color:var(--cds-alias-status-warning, var(--cds-global-color-ochre-500, #ffb92e));--background:var(--cds-alias-status-tint, var(--cds-alias-status-warning-tint, var(--cds-global-color-ochre-100, #fff2d6)))}:host([status=danger]){--border-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200));--background:var(--cds-alias-status-tint, var(--cds-alias-status-danger-tint, var(--cds-global-color-red-50, #fff2f0)))}:host([color]){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([color]):host(:not([disabled])) :hover{--background:var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8))}:host([color=purple]){--border-color:var(--cds-global-color-violet-600, #9b32c8)}:host([color=blue]){--border-color:var(--cds-global-color-blue-800, #00608a)}:host([color=orange]){--border-color:var(--cds-global-color-ochre-800, #a36500)}:host([color=light-blue]){--border-color:var(--cds-global-color-blue-600, #009adb)}:host([disabled]){--color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))!important;--border-color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))!important;--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))!important}:host([disabled]) ::slotted(cds-badge){--background:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--color:var(--cds-alias-status-disabled-shade, var(--cds-global-color-construction-400, #859399))!important}:host([disabled]) ::slotted(cds-icon){--color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))!important}:host([disabled]) .private-host{box-shadow:none!important}:host([disabled]) .tag-content{transform:initial!important}`;export{o as default};
|
|
2
2
|
//# sourceMappingURL=tag.element.scss.js.map
|