@rededor/cura 1.5.0-alpha.0 → 1.5.0-alpha.2

package/dist/cura/p-7ba80d78.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,H as r,g as a}from"./p-fd5ed6b0.js";const o='.badge-container{display:flex;align-items:center;justify-content:center;gap:calc(var(--base-spacing) * 1px);padding:calc(var(--base-spacing) * 1px);border-radius:var(--border-radius);font-family:var(--font-family);font-size:var(--font-size);position:relative;box-sizing:border-box;width:fit-content;height:calc(var(--base-spacing) * 5px);min-width:calc(var(--base-spacing) * 5px);background-color:var(--color-background)}.badge-container::before{content:"";width:100%;height:100%;position:absolute;left:0px;top:0px;box-sizing:border-box;border:1px solid transparent;border-radius:var(--border-radius);pointer-events:none}.badge-container.icon-only cura-label{display:none !important}.badge-container.disabled{background-color:var(--color-background-disabled)}.badge-container.outline{background-color:transparent}.badge-container.outline::before{border:1px solid var(--color-base)}.badge-container.outline.disabled::before{border:1px solid var(--color-outline-disabled)}.badge-container.transparent{background-color:transparent}.badge-container.transparent::before{border:1px solid transparent}.badge-container.transparent.disabled{background-color:transparent}.badge-container cura-icon{display:flex}';const i=o;const s=class{constructor(t){e(this,t);this.theme=window.CuraAPI.theme;this.type="solid";this.color="primary";this.iconName=undefined;this.iconset="default";this.disabled=false;this.iconOnly=false;this.borderRadius="2px";this.styles={}}handleColorChange(){this.setColors()}connectedCallback(){this.setBaseStyles();this.setColors()}setBaseStyles(){this.styles["--base-spacing"]=this.theme.spacing.getSpacing();this.styles["--font-family"]=this.theme.fonts.getFamily();this.styles["--font-size"]=this.theme.fonts.getSize();this.styles=Object.assign({},this.styles)}setColors(){const e=[{name:"--color-background",theme:`${this.color}-lighter`},{name:"--color-base",theme:`${this.color}-dark`},{name:"--color-background-disabled",theme:"neutral-pale"},{name:"--color-outline-disabled",theme:"neutral-medium"}];e.forEach((e=>{this.styles[e.name]=this.theme.colors.getColor(e.theme)}));this.styles=Object.assign({},this.styles)}hostCSSProperties(){return{"--border-radius":this.borderRadius||"2px"}}getClasses(){const e={};e["badge-container"]=true;e[`icon-only`]=this.iconOnly;e["disabled"]=this.disabled;e[`${this.type}`]=true;return e}getSymbolColor(){return this.disabled?"neutral-medium":`${this.color}-dark`}getIcon(){if(!this.iconName)return"";return t("cura-icon",{name:this.iconName,iconset:this.iconset,size:"micro",color:this.getSymbolColor()})}render(){const e=this.getSymbolColor();return t(r,{key:"d2b79aa7ede4462cd2b591b62321ef69b9e4fed3",style:this.hostCSSProperties()},t("div",{key:"a82383b03c02990b5879ca647ae06cabb5c32845",class:this.getClasses(),style:this.styles},this.getIcon(),t("cura-label",{key:"1ccf493530fa6b7cee25db83d0fcb37cf308df3d",size:"xsmall","line-height":"117%",color:e},t("slot",{key:"488e4fbd8b30cfcd15b25c9227e129b1c6e1ce32"}))))}get host(){return a(this)}static get watchers(){return{color:["handleColorChange"]}}};s.style=i;export{s as cura_badge_pill};
-//# sourceMappingURL=p-7ba80d78.entry.js.map

package/dist/cura/p-7ba80d78.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaBadgePillCss","CuraBadgePillStyle0","CuraBadgePill","this","theme","window","CuraAPI","handleColorChange","setColors","connectedCallback","setBaseStyles","styles","spacing","getSpacing","fonts","getFamily","getSize","Object","assign","colors","name","color","forEach","getColor","hostCSSProperties","borderRadius","getClasses","classes","iconOnly","disabled","type","getSymbolColor","getIcon","iconName","h","iconset","size","render","symbolColor","Host","key","style","class"],"sources":["src/components/badges/cura-badge-pill/cura-badge-pill.scss?tag=cura-badge-pill&encapsulation=shadow","src/components/badges/cura-badge-pill/cura-badge-pill.tsx"],"sourcesContent":["@import \"../../../scss/mixins/spacing.scss\";\n\n.badge-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: #{$spacing-tiny};\n  padding: #{$spacing-tiny};\n  border-radius: var(--border-radius);\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  position: relative;\n  box-sizing: border-box;\n  width: fit-content;\n  height: #{$spacing-xs};\n  min-width: #{$spacing-xs};\n\n  background-color: var(--color-background);\n\n  &::before {\n    content: \"\";\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    left: 0px;\n    top: 0px;\n    box-sizing: border-box;\n    border: 1px solid transparent;\n    border-radius: var(--border-radius);\n    pointer-events: none;\n  }\n\n  &.icon-only {\n    cura-label {\n      display: none !important;\n    }\n  }\n\n  &.disabled {\n    background-color: var(--color-background-disabled);\n  }\n\n  &.outline {\n    background-color: transparent;\n\n    &::before {\n      border: 1px solid var(--color-base);\n    }\n\n    &.disabled::before {\n      border: 1px solid var(--color-outline-disabled);\n    }\n  }\n\n  &.transparent {\n    background-color: transparent;\n\n    &::before {\n      border: 1px solid transparent;\n    }\n\n    &.disabled {\n      background-color: transparent;\n    }\n  }\n\n  cura-icon {\n    display: flex;\n  }\n}\n","import { Component, Host, Prop, State, h, Watch, Element } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-pill',\n  styleUrl: 'cura-badge-pill.scss',\n  shadow: true,\n})\nexport class CuraBadgePill {\n  @Element() host: HTMLElement;\n\n  /**\n   * Badge type: solid | outline | transparent\n   */\n  @Prop({ reflect: true }) type: 'solid' | 'outline' | 'transparent' = 'solid';\n\n  /**\n   * Color base from color scheme. Default: primary\n   */\n  @Prop() color: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error' = 'primary';\n\n  /**\n   * Name of the icon to be used from iconset\n   */\n  @Prop({ reflect: true }) iconName: string;\n\n  /**\n   * Custom iconset if needed\n   */\n  @Prop({ reflect: true }) iconset = 'default';\n\n  /**\n   * Disabled state. Boolean\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Set badge to icon only. Boolean\n   */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /**\n   * Set border-radius.\n   */\n  @Prop({ reflect: true }) borderRadius: string = \"2px\";\n\n  @State() styles = {};\n\n  theme = window.CuraAPI.theme;\n\n  @Watch('color')\n  handleColorChange() {\n    this.setColors();\n  }\n\n  connectedCallback() {\n    this.setBaseStyles();\n    this.setColors();\n  }\n\n  private setBaseStyles() {\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.styles['--font-family'] = this.theme.fonts.getFamily();\n    this.styles['--font-size'] = this.theme.fonts.getSize();\n    this.styles = { ...this.styles };\n  }\n\n  private setColors() {\n    const colors = [\n      { name: '--color-background', theme: `${this.color}-lighter` },\n      { name: '--color-base', theme: `${this.color}-dark` },\n      { name: '--color-background-disabled', theme: 'neutral-pale' },\n      { name: '--color-outline-disabled', theme: 'neutral-medium' },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = this.theme.colors.getColor(color.theme);\n    });\n    this.styles = { ...this.styles };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--border-radius': this.borderRadius || '2px',\n    };\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['badge-container'] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['disabled'] = this.disabled;\n    classes[`${this.type}`] = true;\n    return classes;\n  }\n\n  getSymbolColor() {\n    return this.disabled\n      ? 'neutral-medium'\n      : `${this.color}-dark`;\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    return <cura-icon\n      name={this.iconName}\n      iconset={this.iconset}\n      size={'micro'}\n      color={this.getSymbolColor()}\n    />;\n  }\n\n  render() {\n    const symbolColor = this.getSymbolColor();\n    return (\n      <Host style={this.hostCSSProperties()}>\n        <div class={this.getClasses()} style={this.styles}>\n          {this.getIcon()}\n          <cura-label size='xsmall' line-height=\"117%\" color={symbolColor}>\n            <slot></slot>\n          </cura-label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,orCACzB,MAAAC,EAAeD,E,MCMFE,EAAa,M,yBAwCxBC,KAAAC,MAAQC,OAAOC,QAAQF,M,UAlC8C,Q,WAKsC,U,qCAUxE,U,cAKC,M,cAKA,M,kBAKY,M,YAE9B,E,CAKlB,iBAAAG,GACEJ,KAAKK,W,CAGP,iBAAAC,GACEN,KAAKO,gBACLP,KAAKK,W,CAGC,aAAAE,GACNP,KAAKQ,OAAO,kBAAoBR,KAAKC,MAAMQ,QAAQC,aACnDV,KAAKQ,OAAO,iBAAmBR,KAAKC,MAAMU,MAAMC,YAChDZ,KAAKQ,OAAO,eAAiBR,KAAKC,MAAMU,MAAME,UAC9Cb,KAAKQ,OAAMM,OAAAC,OAAA,GAAQf,KAAKQ,O,CAGlB,SAAAH,GACN,MAAMW,EAAS,CACb,CAAEC,KAAM,qBAAsBhB,MAAO,GAAGD,KAAKkB,iBAC7C,CAAED,KAAM,eAAgBhB,MAAO,GAAGD,KAAKkB,cACvC,CAAED,KAAM,8BAA+BhB,MAAO,gBAC9C,CAAEgB,KAAM,2BAA4BhB,MAAO,mBAG7Ce,EAAOG,SAAQD,IACblB,KAAKQ,OAAOU,EAAMD,MAAQjB,KAAKC,MAAMe,OAAOI,SAASF,EAAMjB,MAAM,IAEnED,KAAKQ,OAAMM,OAAAC,OAAA,GAAQf,KAAKQ,O,CAG1B,iBAAAa,GACE,MAAO,CACL,kBAAmBrB,KAAKsB,cAAgB,M,CAI5C,UAAAC,GACE,MAAMC,EAAU,GAChBA,EAAQ,mBAAqB,KAC7BA,EAAQ,aAAexB,KAAKyB,SAC5BD,EAAQ,YAAcxB,KAAK0B,SAC3BF,EAAQ,GAAGxB,KAAK2B,QAAU,KAC1B,OAAOH,C,CAGT,cAAAI,GACE,OAAO5B,KAAK0B,SACR,iBACA,GAAG1B,KAAKkB,Y,CAGd,OAAAW,GACE,IAAK7B,KAAK8B,SAAU,MAAO,GAC3B,OAAOC,EAAA,aACLd,KAAMjB,KAAK8B,SACXE,QAAShC,KAAKgC,QACdC,KAAM,QACNf,MAAOlB,KAAK4B,kB,CAIhB,MAAAM,GACE,MAAMC,EAAcnC,KAAK4B,iBACzB,OACEG,EAACK,EAAI,CAAAC,IAAA,2CAACC,MAAOtC,KAAKqB,qBAChBU,EAAA,OAAAM,IAAA,2CAAKE,MAAOvC,KAAKuB,aAAce,MAAOtC,KAAKQ,QACxCR,KAAK6B,UACNE,EAAA,cAAAM,IAAA,2CAAYJ,KAAK,SAAQ,cAAa,OAAOf,MAAOiB,GAClDJ,EAAA,QAAAM,IAAA,+C","ignoreList":[]}