@cds/core 6.1.3 → 6.1.5
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/button/button.element.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{html as s}from"lit";import{CdsBaseButton as e,getElementWidth as i,baseStyles as a,property as o}from"@cds/core/internal";import r from"./button.element.scss.js";var d;!function(t){t.default="default",t.loading="loading",t.success="success",t.error="error"}(d||(d={}));class l extends e{constructor(){super(...arguments);this.action="solid",this.status="primary",this.size="md",this.block=!1,this.loadingState=d.default,this._disabledExternally=!1}get disabled(){return super.disabled}set disabled(t){this._disabledExternally=t,super.disabled=t}firstUpdated(t){super.firstUpdated(t),this.isDefaultLoadingState(this.loadingState)||(
|
|
1
|
+
import{__decorate as t}from"tslib";import{html as s}from"lit";import{CdsBaseButton as e,getElementWidth as i,baseStyles as a,property as o}from"@cds/core/internal";import r from"./button.element.scss.js";var d;!function(t){t.default="default",t.loading="loading",t.success="success",t.error="error"}(d||(d={}));class l extends e{constructor(){super(...arguments);this.action="solid",this.status="primary",this.size="md",this.block=!1,this.loadingState=d.default,this._disabledExternally=!1}get disabled(){return super.disabled}set disabled(t){this._disabledExternally=t,super.disabled=t}firstUpdated(t){super.firstUpdated(t),this.isDefaultLoadingState(this.loadingState)||(super.disabled=!0)}update(t){t.has("loadingState")&&void 0!==t.get("loadingState")&&(this.isDefaultLoadingState(this.loadingState)?this.restoreButton():this.disableButton()),super.update(t)}render(){return s`<div class="private-host" cds-layout="horizontal gap:xs wrap:none align:center">${this.loadingState===d.success?s`<cds-icon shape="check" status="success" size="18"></cds-icon>`:""} ${this.loadingState===d.error?s`<cds-icon shape="error-standard" status="danger" size="18"></cds-icon>`:""} ${this.loadingState===d.loading?s`<cds-progress-circle .size="${"sm"===this.size?"12":"18"}" status="info"></cds-progress-circle>`:""} ${this.loadingState===d.default?s`<slot></slot>`:""}</div>`}isDefaultLoadingState(t){return t===d.default}disableButton(){this.style.width=i(this),super.disabled=!0}restoreButton(){this.style.removeProperty("width"),super.disabled=this._disabledExternally}}l.styles=[a,r],t([o({type:String})],l.prototype,"action",void 0),t([o({type:String})],l.prototype,"status",void 0),t([o({type:String})],l.prototype,"size",void 0),t([o({type:Boolean})],l.prototype,"block",void 0),t([o({type:String})],l.prototype,"loadingState",void 0),t([o({type:Boolean})],l.prototype,"disabled",null);export{l as CdsButton,d as ClrLoadingState};
|
|
2
2
|
//# sourceMappingURL=button.element.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.element.js","sources":["../../../src/button/button.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html } from 'lit';\nimport { baseStyles, CdsBaseButton, getElementWidth, property } from '@cds/core/internal';\nimport styles from './button.element.scss';\nexport var ClrLoadingState;\n(function (ClrLoadingState) {\n ClrLoadingState[\"default\"] = \"default\";\n ClrLoadingState[\"loading\"] = \"loading\";\n ClrLoadingState[\"success\"] = \"success\";\n ClrLoadingState[\"error\"] = \"error\";\n})(ClrLoadingState || (ClrLoadingState = {}));\n/**\n * Buttons allow an application to communicate action and direct user intent.\n *\n * ```typescript\n * import '@cds/core/button/register.js';\n * ```\n *\n * ```html\n * <cds-button>submit</cds-button>\n * ```\n *\n * @element cds-button\n * @slot - Content slot for inside the button\n * @cssprop --background\n * @cssprop --border-color\n * @cssprop --border-radius\n * @cssprop --border-width\n * @cssprop --box-shadow-color\n * @cssprop --color\n * @cssprop --font-family\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --height\n * @cssprop --letter-spacing\n * @cssprop --min-width\n * @cssprop --padding\n * @cssprop --text-decoration\n * @cssprop --text-transform\n */\nexport class CdsButton extends CdsBaseButton {\n constructor() {\n super(...arguments);\n /**\n * Define the type of action the button triggers\n *\n * - `solid`: buttons direct the user’s attention to the primary action the application is suggesting that the user take.\n * - `outline`: buttons indicate secondary actions that compliments a primary action or reduces visual noise when there are many actions on the page.\n * - `flat`: buttons are used as tertiary buttons. Can also be used inline because they are different from content in style and recognizable as buttons alongside content.\n */\n this.action = 'solid';\n /**\n * Sets the color of the button to match the following string statuses\n */\n this.status = 'primary';\n /**\n * Sets the overall height and width of the button based on the following string values:\n */\n this.size = 'md';\n /** Sets if the button should be full width with display block */\n this.block = false;\n /**\n * Changes the button content based on the value passed.\n * @type {default | loading | success | error}\n *\n * - `default`: shows the content of the button\n * - `loading`: disables the button and shows a spinner inside the button\n * - `success`: disables the button and shows a check mark inside the button; auto-triggers to change back to DEFAULT state after 1000 ms\n * - `error`: shows the content of the button (in the context of application, this state is usually entered from a LOADING state. the application should show appropriate error message)\n */\n this.loadingState = ClrLoadingState.default;\n // when the loading state changes
|
|
1
|
+
{"version":3,"file":"button.element.js","sources":["../../../src/button/button.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html } from 'lit';\nimport { baseStyles, CdsBaseButton, getElementWidth, property } from '@cds/core/internal';\nimport styles from './button.element.scss';\nexport var ClrLoadingState;\n(function (ClrLoadingState) {\n ClrLoadingState[\"default\"] = \"default\";\n ClrLoadingState[\"loading\"] = \"loading\";\n ClrLoadingState[\"success\"] = \"success\";\n ClrLoadingState[\"error\"] = \"error\";\n})(ClrLoadingState || (ClrLoadingState = {}));\n/**\n * Buttons allow an application to communicate action and direct user intent.\n *\n * ```typescript\n * import '@cds/core/button/register.js';\n * ```\n *\n * ```html\n * <cds-button>submit</cds-button>\n * ```\n *\n * @element cds-button\n * @slot - Content slot for inside the button\n * @cssprop --background\n * @cssprop --border-color\n * @cssprop --border-radius\n * @cssprop --border-width\n * @cssprop --box-shadow-color\n * @cssprop --color\n * @cssprop --font-family\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --height\n * @cssprop --letter-spacing\n * @cssprop --min-width\n * @cssprop --padding\n * @cssprop --text-decoration\n * @cssprop --text-transform\n */\nexport class CdsButton extends CdsBaseButton {\n constructor() {\n super(...arguments);\n /**\n * Define the type of action the button triggers\n *\n * - `solid`: buttons direct the user’s attention to the primary action the application is suggesting that the user take.\n * - `outline`: buttons indicate secondary actions that compliments a primary action or reduces visual noise when there are many actions on the page.\n * - `flat`: buttons are used as tertiary buttons. Can also be used inline because they are different from content in style and recognizable as buttons alongside content.\n */\n this.action = 'solid';\n /**\n * Sets the color of the button to match the following string statuses\n */\n this.status = 'primary';\n /**\n * Sets the overall height and width of the button based on the following string values:\n */\n this.size = 'md';\n /** Sets if the button should be full width with display block */\n this.block = false;\n /**\n * Changes the button content based on the value passed.\n * @type {default | loading | success | error}\n *\n * - `default`: shows the content of the button\n * - `loading`: disables the button and shows a spinner inside the button\n * - `success`: disables the button and shows a check mark inside the button; auto-triggers to change back to DEFAULT state after 1000 ms\n * - `error`: shows the content of the button (in the context of application, this state is usually entered from a LOADING state. the application should show appropriate error message)\n */\n this.loadingState = ClrLoadingState.default;\n // when the loading state changes,\n // the disabled state should be set back to what the consumer manually set (if they set it)\n // the setter here should never be called in the component, call super instead\n // https://github.com/vmware-clarity/core/issues/129\n this._disabledExternally = false;\n }\n get disabled() {\n return super.disabled;\n }\n set disabled(value) {\n this._disabledExternally = value;\n super.disabled = value;\n }\n firstUpdated(props) {\n super.firstUpdated(props);\n if (!this.isDefaultLoadingState(this.loadingState)) {\n super.disabled = true;\n }\n }\n update(props) {\n if (props.has('loadingState') && props.get('loadingState') !== undefined) {\n if (this.isDefaultLoadingState(this.loadingState)) {\n this.restoreButton();\n }\n else {\n this.disableButton();\n }\n }\n super.update(props);\n }\n render() {\n return html `<div class=\"private-host\" cds-layout=\"horizontal gap:xs wrap:none align:center\">\n ${this.loadingState === ClrLoadingState.success\n ? html `<cds-icon shape=\"check\" status=\"success\" size=\"18\"></cds-icon>`\n : ''}\n ${this.loadingState === ClrLoadingState.error\n ? html `<cds-icon shape=\"error-standard\" status=\"danger\" size=\"18\"></cds-icon>`\n : ''}\n ${this.loadingState === ClrLoadingState.loading\n ? html `<cds-progress-circle .size=${this.size === 'sm' ? '12' : '18'} status=\"info\"></cds-progress-circle>`\n : ''}\n ${this.loadingState === ClrLoadingState.default ? html `<slot></slot>` : ''}\n </div>`;\n }\n isDefaultLoadingState(state) {\n return state === ClrLoadingState.default;\n }\n disableButton() {\n this.style.width = getElementWidth(this);\n super.disabled = true;\n }\n restoreButton() {\n this.style.removeProperty('width');\n super.disabled = this._disabledExternally;\n }\n}\nCdsButton.styles = [baseStyles, styles];\n__decorate([\n property({ type: String })\n], CdsButton.prototype, \"action\", void 0);\n__decorate([\n property({ type: String })\n], CdsButton.prototype, \"status\", void 0);\n__decorate([\n property({ type: String })\n], CdsButton.prototype, \"size\", void 0);\n__decorate([\n property({ type: Boolean })\n], CdsButton.prototype, \"block\", void 0);\n__decorate([\n property({ type: String })\n], CdsButton.prototype, \"loadingState\", void 0);\n__decorate([\n property({ type: Boolean })\n], CdsButton.prototype, \"disabled\", null);\n"],"names":["ClrLoadingState","CdsButton","CdsBaseButton","constructor","super","this","action","status","size","block","loadingState","default","_disabledExternally","disabled","value","firstUpdated","props","isDefaultLoadingState","update","has","undefined","get","restoreButton","disableButton","render","html","success","error","loading","state","style","width","getElementWidth","removeProperty","styles","baseStyles","__decorate","property","type","String","prototype","Boolean"],"mappings":"4MASU,IAACA,GACX,SAAWA,GACPA,EAAyB,QAAI,UAC7BA,EAAyB,QAAI,UAC7BA,EAAyB,QAAI,UAC7BA,EAAuB,MAAI,QAJ/B,CAKGA,IAAoBA,EAAkB,KA8BlC,MAAMC,UAAkBC,EAC3BC,cACIC,oBAQAC,KAAKC,OAAS,QAIdD,KAAKE,OAAS,UAIdF,KAAKG,KAAO,KAEZH,KAAKI,OAAQ,EAUbJ,KAAKK,aAAeV,EAAgBW,QAKpCN,KAAKO,qBAAsB,EAE3BC,eACA,OAAOT,MAAMS,SAEbA,aAASC,GACTT,KAAKO,oBAAsBE,EAC3BV,MAAMS,SAAWC,EAErBC,aAAaC,GACTZ,MAAMW,aAAaC,GACdX,KAAKY,sBAAsBZ,KAAKK,gBACjCN,MAAMS,UAAW,GAGzBK,OAAOF,GACCA,EAAMG,IAAI,sBAAiDC,IAA9BJ,EAAMK,IAAI,kBACnChB,KAAKY,sBAAsBZ,KAAKK,cAChCL,KAAKiB,gBAGLjB,KAAKkB,iBAGbnB,MAAMc,OAAOF,GAEjBQ,SACI,OAAOC,CAAK,mFACZpB,KAAKK,eAAiBV,EAAgB0B,QAChCD,CAAK,iEACL,MACNpB,KAAKK,eAAiBV,EAAgB2B,MAChCF,CAAK,yEACL,MACNpB,KAAKK,eAAiBV,EAAgB4B,QAChCH,CAAK,+BAA4C,OAAdpB,KAAKG,KAAgB,KAAO,6CAC/D,MACNH,KAAKK,eAAiBV,EAAgBW,QAAUc,CAAK,gBAAkB,WAG3ER,sBAAsBY,GAClB,OAAOA,IAAU7B,EAAgBW,QAErCY,gBACIlB,KAAKyB,MAAMC,MAAQC,EAAgB3B,MACnCD,MAAMS,UAAW,EAErBS,gBACIjB,KAAKyB,MAAMG,eAAe,SAC1B7B,MAAMS,SAAWR,KAAKO,qBAG9BX,EAAUiC,OAAS,CAACC,EAAYD,GAChCE,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBtC,EAAUuC,UAAW,cAAU,GAClCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBtC,EAAUuC,UAAW,cAAU,GAClCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBtC,EAAUuC,UAAW,YAAQ,GAChCJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,WAClBxC,EAAUuC,UAAW,aAAS,GACjCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBtC,EAAUuC,UAAW,oBAAgB,GACxCJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,WAClBxC,EAAUuC,UAAW,WAAY"}
|
package/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.1.
|
|
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.1.5";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{css as a}from"lit";var r=a`:host{--background:var(--cds-alias-object-container-background, var(--cds-global-color-white, white));--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--padding:var(--cds-global-space-5, calc(8 * 1rem / var(--cds-global-base, 20))) var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20)));--font-size:var(--cds-global-typography-font-size-3, calc(13 * 1rem / var(--cds-global-base, 20)));--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--border-radius:var(--cds-alias-object-border-radius-100, calc(4 * 1rem / var(--cds-global-base, 20)));display:block;width:100%}::slotted(textarea){background:var(--background)!important;border:var(--border)!important;color:var(--color)!important;border-radius:var(--border-radius)!important;padding:var(--padding)!important;font-size:var(--font-size)!important;resize:vertical!important;width:100%!important;min-height:var(--cds-global-space-15,calc(96 * 1rem / var(--cds-global-base,20)))!important}:host([status=error]){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=success]){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_disabled]){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}`;export{r as default};
|
|
1
|
+
import{css as a}from"lit";var r=a`:host{--background:var(--cds-alias-object-container-background, var(--cds-global-color-white, white));--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--padding:var(--cds-global-space-5, calc(8 * 1rem / var(--cds-global-base, 20))) var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20)));--font-size:var(--cds-global-typography-font-size-3, calc(13 * 1rem / var(--cds-global-base, 20)));--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--border-radius:var(--cds-alias-object-border-radius-100, calc(4 * 1rem / var(--cds-global-base, 20)));display:block;width:100%}::slotted(textarea){background:var(--background)!important;border:var(--border)!important;color:var(--color)!important;border-radius:var(--border-radius)!important;padding:var(--padding)!important;font-size:var(--font-size)!important;resize:vertical!important;width:100%!important;min-height:var(--cds-global-space-15,calc(96 * 1rem / var(--cds-global-base,20)))!important}:host([status=error]){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=success]){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_disabled]){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc));--color:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}`;export{r as default};
|
|
2
2
|
//# sourceMappingURL=textarea.element.scss.js.map
|