UNPKG

@limetech/lime-elements

Version:
1 lines 11.1 kB
import{r as e,h as i,H as r,a as o}from"./p-DBTJNfo7.js";import{g as s}from"./p-5eP2N9QI.js";import{g as t}from"./p-5KsJICvh.js";const a=class{constructor(r){e(this,r),this.label=null,this.disabled=!1,this.loading=!1,this.hasPrimarySlot=!1,this.renderPrefix=()=>{if(this.prefix)return i("span",{class:"prefix"},this.prefix)},this.renderValue=()=>{var e;const r=(null!==(e=this.value)&&void 0!==e?e:"").toString().length;return!this.value&&this.loading?i("span",{class:"value"},"···"):this.value?i("span",{class:{value:!0,[`ch-${r}`]:!0}},this.value):void 0},this.renderSuffix=()=>{if(this.suffix)return i("span",{class:"suffix"},this.suffix)},this.renderIcon=()=>{if(this.icon)return i("limel-icon",{class:"icon",name:this.icon})},this.updateHasPrimarySlotContent=e=>{var i;const r=null!==(i=null==e?void 0:e.target)&&void 0!==i?i:this.host.shadowRoot.querySelector('slot[name="primary"]');this.hasPrimarySlot=r&&r.assignedElements().length>0},this.renderProgress=()=>{var e,r;if(!this.hasPrimarySlot&&((null===(e=this.progress)||void 0===e?void 0:e.value)||0===(null===(r=this.progress)||void 0===r?void 0:r.value)))return i("limel-circular-progress",{class:"progress",prefix:this.progress.prefix,value:this.progress.value,suffix:this.progress.suffix,maxValue:this.progress.maxValue,displayPercentageColors:this.progress.displayPercentageColors})},this.renderLabel=()=>{if(this.label)return i("span",{class:"label"},this.label)},this.renderNotification=()=>{if(this.badge)return i("limel-badge",{label:this.badge})},this.renderSpinner=()=>{if(this.loading)return i("limel-linear-progress",{indeterminate:!0})}}componentWillLoad(){const{handleMouseEnter:e,handleMouseLeave:i}=s(this.host);this.handleMouseEnter=e,this.handleMouseLeave=i,this.updateHasPrimarySlotContent()}render(){var e,o,s,a,l,n,c,d,h,f;const p=this.checkProps(null==this?void 0:this.prefix)+this.value+" "+this.checkProps(null==this?void 0:this.suffix)+this.checkProps(null==this?void 0:this.label)+". "+this.checkProps(null===(e=null==this?void 0:this.progress)||void 0===e?void 0:e.prefix)+this.checkProps(null===(o=null==this?void 0:this.progress)||void 0===o?void 0:o.value)+this.checkProps(null===(s=null==this?void 0:this.progress)||void 0===s?void 0:s.suffix)+this.checkProps(null===(a=null==this?void 0:this.link)||void 0===a?void 0:a.title),u=this.disabled?"#":null===(l=this.link)||void 0===l?void 0:l.href,v=t(null===(n=this.link)||void 0===n?void 0:n.target,null===(c=this.link)||void 0===c?void 0:c.rel);return i(r,{key:"3754cadd6c7cf0ee99e0f5dc2234732126dcdc1e",onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,class:{"has-primary-slot-content":this.hasPrimarySlot}},i("a",{key:"c812a64253f3687f230c9a306727addae91ac685",title:null===(d=this.link)||void 0===d?void 0:d.title,href:u,target:null===(h=this.link)||void 0===h?void 0:h.target,rel:v,tabindex:"0","aria-label":p,"aria-disabled":this.disabled,"aria-busy":this.loading?"true":"false","aria-live":"polite",class:{"is-clickable":!!(null===(f=this.link)||void 0===f?void 0:f.href)&&!this.disabled}},this.renderIcon(),this.renderProgress(),i("slot",{key:"62e330f8b945d562b5ee4677a62ab21ec1b6defe",name:"primary",onSlotchange:this.updateHasPrimarySlotContent}),i("div",{key:"de41a8bc66d7f706153188f84b96481dfa25f8f9",class:"value-group"},this.renderPrefix(),i("div",{key:"8ae36080dadd6b4a7135c7280e51a88015f30fbc",class:"value-and-suffix"},this.renderValue(),this.renderSuffix()),this.renderSpinner()),this.renderLabel(),i("limel-3d-hover-effect-glow",{key:"0221c5e66f2a30b60e619bc7d6fe35e66d1db653"})),this.renderNotification())}checkProps(e){return e?e+" ":""}get host(){return o(this)}};a.style='@charset "UTF-8";:host(limel-info-tile){--badge-text-color:var( --info-tile-badge-text-color, rgb(var(--color-white)) );--badge-background-color:var( --info-tile-badge-background-color, rgb(var(--color-red-default)) );--circular-progress-text-color:var( --info-tile-progress-text-color, var(--info-tile-text-color) );--circular-progress-suffix-color:var(--info-tile-progress-suffix-color);--circular-progress-prefix-color:var(--info-tile-progress-prefix-color);--circular-progress-track-color:rgb(var(--contrast-800), 0.3);--circular-progress-fill-color:var(--info-tile-progress-fill-color);--circular-progress-background-color:var( --info-tile-progress-background-color, var(--info-tile-background-color) );--label-min-size:0.75rem;--label-preferred-size:6cqw;--label-max-size:1rem;--value-min-size:1rem;--value-preferred-size:20cqw;--value-max-size:4rem;--suffix-prefix-min-size:0.75rem;--suffix-prefix-preferred-size:8cqw;--suffix-prefix-max-size:1.5rem;--icon-min-size:2rem;--icon-preferred-size:60cqh;--icon-max-size:calc(100cqw - 0.5rem);container-type:size;position:relative;display:flex;width:100%;height:100%}:host(limel-info-tile) *{box-sizing:border-box}:host(limel-info-tile[disabled]) a{opacity:0.5;cursor:not-allowed}a{all:unset;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;height:100%;width:100%;flex-grow:1;padding:0.25rem 1rem 0.5rem 1rem;border-radius:var(--info-tile-border-radius, 1rem);background-color:var(--info-tile-background-color, var(--lime-elevated-surface-background-color))}:host ::slotted([slot=primary]){width:100%;height:100%}.icon{z-index:1;position:absolute;top:0.5rem;right:0.75rem;padding:0.25rem;aspect-ratio:1/1;color:var(--info-tile-icon-color, rgb(var(--contrast-1000)));opacity:0.9;border-radius:0;height:clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size))}@supports not (container-type: size){.icon{width:max(10%, 3rem)}}:host(.has-primary-slot-content) .icon,a:has(limel-circular-progress) .icon{top:unset;bottom:0.5rem;--icon-min-size:1.5rem;--icon-preferred-size:20cqh}slot[name=primary]{display:block;aspect-ratio:1;width:min(var(--icon-preferred-size), var(--icon-max-size))}.progress,slot[name=primary]{position:absolute;top:0.75rem;right:0.75rem}.progress{--circular-progress-size:min( var(--icon-preferred-size), var(--icon-max-size) )}@supports not (container-type: size){.progress{--circular-progress-size:initial}}.label{z-index:1;color:var(--info-tile-text-color, rgb(var(--contrast-1100)));opacity:0.8;line-height:1.2;font-size:clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size))}@supports not (container-type: size){.label{font-size:var(--limel-theme-default-font-size)}}.label{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}limel-badge{position:absolute;top:-0.25rem;right:-0.25rem}limel-linear-progress{--lime-primary-color:var(--info-tile-text-color);position:absolute;inset:auto 0 0 0}.value-group{position:relative;z-index:1;display:flex;flex-direction:column;color:var(--info-tile-text-color, rgb(var(--contrast-1100)))}.value-and-suffix,.label{text-shadow:0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)))}.value-and-suffix{display:flex}.prefix,.suffix{font-size:clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));opacity:0.7}@supports not (container-type: size){.prefix,.suffix{font-size:0.75rem}}.prefix{align-self:flex-start;line-height:normal;transform:translateY(40%)}.value{transition:opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);transform-origin:left;transform:translate3d(0, 0, 0) scale(1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:bold;line-height:normal;font-size:clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size))}@supports not (container-type: size){.value{font-size:1.5rem}}:host(limel-info-tile[loading]) .value{opacity:0.3;transform:translate3d(0, 0, 0) scale(0.9)}.suffix{transform:translateY(10%)}@container (width < 8rem){.progress,slot[name=primary]{top:0.25rem;right:0.25rem}a{padding:0.375rem;gap:0.125rem}.icon{opacity:0.7;top:0.125rem;right:0.125rem;padding:0.125rem;--icon-preferred-size:18cqw;--icon-max-size:2rem}.value-group{gap:0.125rem}.value-and-suffix,.label{text-shadow:0 0 1rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100)))}.prefix,.suffix{--suffix-prefix-min-size:0.625rem;--suffix-prefix-preferred-size:6cqw;--suffix-prefix-max-size:0.75rem}}@container (width < 18.75rem){.progress,slot[name=primary]{top:0.5rem;right:0.5rem}.icon{top:0.25rem;right:0.5rem}:host(.has-primary-slot-content) .icon,a:has(limel-circular-progress) .icon{right:0.25rem;bottom:0.25rem}}@container (width < 40.5rem){.value.ch-1,.value.ch-2,.value.ch-3,.value.ch-4{--value-preferred-size:20cqw}.value.ch-5{--value-preferred-size:18cqw}.value.ch-6{--value-preferred-size:17cqw}.value.ch-7{--value-preferred-size:16cqw}.value.ch-8{--value-preferred-size:15cqw}.value.ch-9{--value-preferred-size:14cqw}.value{--value-preferred-size:13cqw}}@container (height > 8rem){a{padding-top:0.75rem;padding-bottom:1rem}}@container (height < 8rem) and (width > 8rem){.value{--value-preferred-size:32cqh !important}.suffix,.prefix{--suffix-prefix-preferred-size:16cqh !important}}@container (height > 18.75rem){.progress,slot[name=primary],.icon{position:relative;top:unset;right:unset}a{align-items:center;justify-content:center}.label{text-align:center}:host(.has-primary-slot-content) .icon,a:has(limel-circular-progress) .icon{position:absolute;top:0.5rem;right:0.5rem;--icon-max-size:3rem}}limel-3d-hover-effect-glow{border-radius:var(--info-tile-border-radius, 1rem)}:host(limel-info-tile){isolation:isolate;transform-style:preserve-3d;perspective:1000px}@media (prefers-reduced-motion){:host(limel-info-tile){perspective:2000px}}a{position:relative;transition-duration:0.8s;transition-property:transform, box-shadow, background-color;transition-timing-function:ease-out;transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg)}a:focus{outline:none}a:hover,a:focus,a:focus-visible,a:focus-within{will-change:background-color, box-shadow, transform}a:hover,a:focus,a:focus-visible,a:active{transition-duration:0.2s}a:hover,a:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}a:hover{transform:scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d))}a:focus-visible{outline:none;transform:scale3d(1.01, 1.01, 1.01)}a:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5}@media (prefers-reduced-motion){a:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}a.is-clickable{cursor:pointer;box-shadow:var(--button-shadow-normal)}a.is-clickable:hover,a.is-clickable:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}a.is-clickable:active{transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);box-shadow:var(--button-shadow-pressed)}a.is-clickable:focus-visible{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-hovered)}a.is-clickable:focus-visible:active{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-pressed)}';export{a as limel_info_tile}