@clevercloud/components - npm Package Compare versions

Comparing version 7.13.0 to 7.13.1

dist/pricing/cc-pricing-header.js

@@ -1,2 +0,2 @@
-import"../atoms/cc-flex-gap.js";import{LitElement as e,html as t,css as o}from"lit-element";import{classMap as s}from"lit-html/directives/class-map.js";import{ifDefined as r}from"lit-html/directives/if-defined.js";import{dispatchCustomEvent as c}from"../lib/events.js";import{i18n as n}from"../lib/i18n.js";import"@shoelace-style/shoelace/dist/components/select/select.js";import"@shoelace-style/shoelace/dist/components/option/option.js";import{sortZones as l}from"../lib/zone.js";import{shoelaceStyles as i}from"../styles/shoelace.js";import{skeletonStyles as a}from"../styles/skeleton.js";import{CcZone as p}from"../zones/cc-zone.js";const u=[],d=[],m={code:"EUR",changeRate:1};class h extends e{static get properties(){return{currencies:{type:Array},currency:{type:Object},totalPrice:{type:Number,attribute:"total-price"},zoneId:{type:String,attribute:"zone-id"},zones:{type:Array},_sortedZones:{type:Array}}}constructor(){super(),this.currencies=null,this.currency=m,this.totalPrice=0,this.zoneId=null,this.zones=null,this._sortedZones=null}_getCurrencySymbol(e){return new Intl.NumberFormat("en",{style:"currency",currency:e}).formatToParts(0).find((e=>"currency"===e.type)).value.replace("$US","$")}_onCurrencyChange(e){const t=this.currencies.find((t=>t.code===e.target.value));c(this,"change-currency",t)}_onZoneChange(e){const t=e.target.value;c(this,"change-zone",t)}update(e){e.has("zones")&&(this._sortedZones=l(this.zones)),super.update(e)}render(){const e=null==this.currencies,o=e?u:this.currencies,c=null==this._sortedZones,l=c?d:this._sortedZones;return t`<cc-flex-gap class=main><sl-select class="${s({skeleton:e})} currency-select" label=${n("cc-pricing-header.currency-text")} value=${this.currency?.code} ?disabled=${e} @sl-change=${this._onCurrencyChange}>${o.map((e=>t`<sl-option value=${e.code}>${this._getCurrencySymbol(e.code)} ${e.code}</sl-option>`))}</sl-select><sl-select class="${s({skeleton:c})} zone-select" label=${n("cc-pricing-header.selected-zone")} value=${r(this.zoneId??void 0)} ?disabled=${c} @sl-change=${this._onZoneChange}>${l.map((e=>t`<sl-option class=zone-item value=${e.name}>${p.getText(e)}<cc-zone slot=prefix .zone=${e}></cc-zone></sl-option>`))}</sl-select><div class=estimated-cost><div class=estimated-cost--label>${n("cc-pricing-header.est-cost")}</div><div class=estimated-cost--value><span class=total-price>${n("cc-pricing-header.price",{price:this.totalPrice*this.currency.changeRate,code:this.currency.code})}</span></div></div></cc-flex-gap>`}static get styles(){return[i,a,o`:host{display:block}.main{--cc-gap:1em;--sl-input-height-medium:2.5em}sl-select{--focus-ring:0 0 0 .2em rgba(50, 115, 220, .25);--sl-input-background-color:#fff;--sl-input-background-color-disabled:#eee;--sl-input-background-color-hover:#fff;--sl-input-background-color-focus:#fff;--sl-input-border-color:#aaa;--sl-input-border-color-disabled:#eee;--sl-input-border-color-focus:#777;--sl-input-border-radius-medium:0.25em;--sl-input-color:#000;--sl-input-color-hover:#000;--sl-input-label-color:#000;animation:none}.estimated-cost--label,sl-select::part(label){color:#000;padding-bottom:.35em}sl-option{color:#000}sl-option::part(base){background-color:transparent}sl-option::part(base):hover,sl-option:focus-within{background-color:var(--sl-color-primary-500);color:#fff}.currency-select{flex:1 1 0;min-width:10em}.zone-select{flex:2 1 25em}.zone-item{margin:0}.zone-item::part(label){display:none}.zone-item::part(prefix){display:block;flex:1 1 0}.zone-item:focus::part(base),.zone-item:hover::part(base){--cc-zone-subtitle-color:#fff;--cc-zone-tag-bdcolor:#fff;--cc-zone-tag-bgcolor:transparent}cc-zone{margin:.25em 0 .25em .5em}.estimated-cost--value{font-weight:700;height:var(--sl-input-height-medium);line-height:var(--sl-input-height-medium)}.total-price{font-size:1.5em}sl-select.skeleton::part(base){--sl-input-background-color-disabled:#bbb}`]}}window.customElements.define("cc-pricing-header",h);export{h as CcPricingHeader};
+import"../atoms/cc-flex-gap.js";import{LitElement as e,html as t,css as o}from"lit-element";import{classMap as s}from"lit-html/directives/class-map.js";import{ifDefined as r}from"lit-html/directives/if-defined.js";import{dispatchCustomEvent as c}from"../lib/events.js";import{i18n as n}from"../lib/i18n.js";import"@shoelace-style/shoelace/dist/components/select/select.js";import"@shoelace-style/shoelace/dist/components/option/option.js";import{sortZones as l}from"../lib/zone.js";import{shoelaceStyles as i}from"../styles/shoelace.js";import{skeletonStyles as a}from"../styles/skeleton.js";import{CcZone as p}from"../zones/cc-zone.js";const u=[],d=[],m={code:"EUR",changeRate:1};class h extends e{static get properties(){return{currencies:{type:Array},currency:{type:Object},totalPrice:{type:Number,attribute:"total-price"},zoneId:{type:String,attribute:"zone-id"},zones:{type:Array},_sortedZones:{type:Array}}}constructor(){super(),this.currencies=null,this.currency=m,this.totalPrice=0,this.zoneId=null,this.zones=null,this._sortedZones=null}_getCurrencySymbol(e){return new Intl.NumberFormat("en",{style:"currency",currency:e}).formatToParts(0).find((e=>"currency"===e.type)).value.replace("$US","$")}_onCurrencyChange(e){const t=this.currencies.find((t=>t.code===e.target.value));c(this,"change-currency",t)}_onZoneChange(e){const t=e.target.value;c(this,"change-zone",t)}update(e){if(e.has("zones")){this._sortedZones=l(this.zones);const e=this.shadowRoot?.querySelector(".zone-select");null!=e&&(e.value=this.zoneId)}super.update(e)}render(){const e=null==this.currencies,o=e?u:this.currencies,c=null==this._sortedZones,l=c?d:this._sortedZones;return t`<cc-flex-gap class=main><sl-select class="${s({skeleton:e})} currency-select" label=${n("cc-pricing-header.currency-text")} value=${this.currency?.code} ?disabled=${e} @sl-change=${this._onCurrencyChange}>${o.map((e=>t`<sl-option value=${e.code}>${this._getCurrencySymbol(e.code)} ${e.code}</sl-option>`))}</sl-select><sl-select class="${s({skeleton:c})} zone-select" label=${n("cc-pricing-header.selected-zone")} value=${r(this.zoneId??void 0)} ?disabled=${c} @sl-change=${this._onZoneChange}>${l.map((e=>t`<sl-option class=zone-item value=${e.name}>${p.getText(e)}<cc-zone slot=prefix .zone=${e}></cc-zone></sl-option>`))}</sl-select><div class=estimated-cost><div class=estimated-cost--label>${n("cc-pricing-header.est-cost")}</div><div class=estimated-cost--value><span class=total-price>${n("cc-pricing-header.price",{price:this.totalPrice*this.currency.changeRate,code:this.currency.code})}</span></div></div></cc-flex-gap>`}static get styles(){return[i,a,o`:host{display:block}.main{--cc-gap:1em;--sl-input-height-medium:2.5em}sl-select{--focus-ring:0 0 0 .2em rgba(50, 115, 220, .25);--sl-input-background-color:#fff;--sl-input-background-color-disabled:#eee;--sl-input-background-color-hover:#fff;--sl-input-background-color-focus:#fff;--sl-input-border-color:#aaa;--sl-input-border-color-disabled:#eee;--sl-input-border-color-focus:#777;--sl-input-border-radius-medium:0.25em;--sl-input-color:#000;--sl-input-color-hover:#000;--sl-input-label-color:#000;animation:none}.estimated-cost--label,sl-select::part(label){color:#000;padding-bottom:.35em}sl-option{color:#000}sl-option::part(base){background-color:transparent}sl-option::part(base):hover,sl-option:focus-within{background-color:var(--sl-color-primary-500);color:#fff}.currency-select{flex:1 1 0;min-width:10em}.zone-select{flex:2 1 25em}.zone-item{margin:0}.zone-item::part(label){display:none}.zone-item::part(prefix){display:block;flex:1 1 0}.zone-item:focus::part(base),.zone-item:hover::part(base){--cc-zone-subtitle-color:#fff;--cc-zone-tag-bdcolor:#fff;--cc-zone-tag-bgcolor:transparent}cc-zone{margin:.25em 0 .25em .5em}.estimated-cost--value{font-weight:700;height:var(--sl-input-height-medium);line-height:var(--sl-input-height-medium)}.total-price{font-size:1.5em}sl-select.skeleton::part(base){--sl-input-background-color-disabled:#bbb}`]}}window.customElements.define("cc-pricing-header",h);export{h as CcPricingHeader};
 //# sourceMappingURL=cc-pricing-header.js.map

package.json

 {
   "name": "@clevercloud/components",
-  "version": "7.13.0",
+  "version": "7.13.1",
   "description": "Collection of Web Components by Clever Cloud",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

No alert changes

Improved metrics

Total package byte prevSize

2329909

increased by0.03%

No dependency changes