@aurodesignsystem/auro-background/dist/auro-background-B1Q_3Y1A.js

auro-background HTML custom element

import{css as t,LitElement as e,html as i}from"lit";import{styleMap as n}from"lit/directives/style-map.js";class r{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{})}closestElement(t,e=this,i=(e,n=e&&e.closest(t))=>e&&e!==document&&e!==window?n||i(e.getRootNode().host):null){return i(e)}handleComponentTagRename(t,e){const i=e.toLowerCase();t.tagName.toLowerCase()!==i&&t.setAttribute(i,!0)}elementMatch(t,e){const i=e.toLowerCase();return t.tagName.toLowerCase()===i||t.hasAttribute(i)}getSlotText(t,e){const i=t.shadowRoot?.querySelector(`slot[name="${e}"]`);return(i?.assignedNodes({flatten:!0})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var s=t`:focus:not(:focus-visible){outline:3px solid transparent}.background{width:auto;width:var(--width);height:inherit;height:var(--height);padding:var(--inset);background:var(--background)}@media screen and (min-width: 576px){.background{width:var(--widthSm);height:var(--heightSm);padding:var(--insetSm);background:var(--backgroundSm)}}@media screen and (min-width: 768px){.background{width:var(--widthMd);height:var(--heightMd);padding:var(--insetMd);background:var(--backgroundMd)}}@media screen and (min-width: 1024px){.background{width:var(--widthLg);height:var(--heightLg);padding:var(--insetMd);background:var(--backgroundLg)}}
`,a=t`:host{--ds-auro-background-container-color: transparent}
`;class g extends e{constructor(){super(),this.runtimeUtils=new r}static get properties(){return{bg:{type:String},bgLg:{type:String},bgMd:{type:String},bgSm:{type:String},height:{type:String},heightLg:{type:String},heightMd:{type:String},heightSm:{type:String},inset:{type:String},insetLg:{type:String},insetMd:{type:String},insetSm:{type:String},width:{type:String},widthLg:{type:String},widthMd:{type:String},widthSm:{type:String}}}static get styles(){return[s,a]}static register(t="auro-background"){r.prototype.registerComponent(t,g)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-background")}getInsetValues(t){const e={none:"0",xxxs:"25",xxs:"50",xs:"100",sm:"150",md:"200",lg:"300",xl:"400",xxl:"600",xxxl:"800"};return e[t]?`var(--ds-size-${e[t]})`:t}render(){const t={"--background":this.bg||"var(--ds-auro-background-container-color)","--backgroundSm":this.bgSm||"var(--background)","--backgroundMd":this.bgMd||"var(--backgroundSm)","--backgroundLg":this.bgLg||"var(--backgroundMd)","--width":this.width||"auto","--widthSm":this.widthSm||"var(--width)","--widthMd":this.widthMd||"var(--widthSm)","--widthLg":this.widthLg||"var(--widthMd)","--height":this.height||"auto","--heightSm":this.heightSm||"var(--height)","--heightMd":this.heightMd||"var(--heightSm)","--heightLg":this.heightLg||"var(--heightMd)","--inset":this.getInsetValues(this.inset)||"0","--insetSm":this.getInsetValues(this.insetSm)||"var(--inset)","--insetMd":this.getInsetValues(this.insetMd)||"var(--insetSm)","--insetLg":this.getInsetValues(this.insetLg)||"var(--insetMd)"};return i`
      <div class="background" style=${n(t)}><slot></slot></div>
    `}}export{g as A};