@rededor/cura 1.6.1-alpha.2 → 1.6.1-alpha.4

package/dist/cura/p-fc1fd622.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaButtonSelectCss","CuraButtonSelectStyle0","CuraButtonSelect","this","theme","window","CuraAPI","setColors","colors","name","thema","background","color","disabled","forEach","styles","getColor","Object","assign","getClasses","classes","_a","size","toLowerCase","iconPosition","selected","connectedCallback","weights","fonts","getWeights","spacing","getSpacing","getSize","getFamily","medium","getLabelFontColor","getColorBagdeNumber","getIcon","iconSize","h","iconName","getCounter","number","counter","class","getCheckIconRight","handleMouseEnter","hovered","handleMouseLeave","handleClick","e","preventDefault","onclick","emit","render","labelSize","labelSizes","Host","key","style","onClick","onMouseEnter","onMouseLeave","lineHeight","weight"],"sources":["src/components/buttons/cura-button-select/cura-button-select.scss?tag=cura-button-select&encapsulation=shadow","src/components/buttons/cura-button-select/cura-button-select.tsx"],"sourcesContent":["@import '../../../scss/mixins/buttons.scss';\n\n:host {\n  @include button-host();\n\n  button,\n  a {\n    @include button-element() {\n      background-color: var(--neutral-purewhite);\n      box-sizing: border-box;\n      border: none;\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: 2px solid var(--color-border);\n        border-radius: var(--border-radius);\n      }\n\n      &:not(.disabled):hover {\n        background-color: var(--color-background-hover);\n        border-color: var(--color-border-hover-pressed);\n      }\n\n      &:focus {\n        border-color: var(--color-border) !important;\n      }\n    }\n\n    @include button-sizes();\n\n    @include button-label();\n\n    // Children Elements\n    @include button-container() {\n      flex-direction: row !important;\n\n      .badge-number {\n        margin-left: 10px;\n      }\n    }\n\n    @include button-icon();\n\n    // selected state\n    @include button-selected() {\n      background-color: var(--color-select);\n      border-color: var(--color-select);\n\n      &:not(.disabled):hover {\n        background-color: var(--color-border-hover-pressed);\n        border-color: var(--color-border-hover-pressed);\n      }\n\n      &:focus {\n        border-color: var(--color-select-focus) !important;\n      }\n\n      &.disabled {\n        background-color: var(--color-disable-select);\n        border-color: var(--color-disable-select);\n      }\n    }\n\n    // Disabled state\n    @include button-disabled() {\n      background-color: var(--neutral-white-primary-darker);\n      border-color: var(--color-border-disable-unselect);\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button-select',\n  styleUrl: 'cura-button-select.scss',\n  shadow: true,\n})\nexport class CuraButtonSelect {\n  @Element() host: HTMLElement;\n\n  @Prop({ reflect: true, mutable: true }) selected = false;\n  @Prop({ reflect: true, mutable: true }) iconName: string;\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  @Prop({ reflect: true, mutable: true }) counter: number | null;\n  @Prop({ reflect: true }) disabled: boolean;\n  @Prop() background: 'dark' | 'light' = 'light';\n  @Prop() color: string = 'primary';\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right';\n\n  @State() hovered = false;\n  @State() styles = {};\n\n  @Event({ eventName: 'onclick' }) onclick: EventEmitter<{ selected: boolean }>;\n\n  theme = window.CuraAPI.theme;\n\n  weights;\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-border', thema: this.background === 'light' ? `${this.color}-darker` : 'neutral-white' },\n      { name: '--color-border-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-light` },\n      { name: '--color-background-hover', thema: this.background === 'light' ? `${this.color}-light` : `${this.color}-dark` },\n      { name: '--color-select', thema: this.background === 'light' ? `${this.color}-base` : 'neutral-white' },\n      { name: '--color-select-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-lighter` },\n      { name: '--color-select-focus', thema: this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter` },\n      { name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },\n      { name: '--color-border-disable-unselect', thema: 'neutral-dark' },\n      { name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },\n      { name: '--color-counter', thema: !this.disabled && 'primary-lighter' },\n    ];\n\n    colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));\n    this.styles = { ...this.styles };\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size?.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['disabled'] = this.disabled;\n    classes['selected'] = this.selected;\n    return classes;\n  }\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.setColors();\n  }\n\n  getLabelFontColor() {\n    if (this.disabled) return 'neutral-dark';\n\n    if (this.background === 'dark') {\n      return this.selected ? 'neutral-black' : 'neutral-white';\n    }\n    if (this.background === 'light') {\n      return this.selected ? 'neutral-white' : 'neutral-black';\n    }\n  }\n\n  getColorBagdeNumber() {\n    if (this.background === 'dark' && this.disabled) {\n      return this.selected ? 'neutral-black' : 'neutral-dark';\n    }\n\n    if (this.background === 'light' && this.disabled) {\n      return 'neutral-medium';\n    }\n\n    return `${this.color}-darker`;\n  }\n\n  getIcon() {\n    const iconSize = this.size === 'large' ? 20 : 16;\n    if (this.iconPosition === 'right') {\n      return;\n    }\n\n    return <cura-icon name={this.iconName} size={iconSize} color={this.getLabelFontColor()} />;\n  }\n\n  getCounter() {\n    return (\n      <cura-badge-counter\n        number={this.counter}\n        color={this.color}\n        disabled={this.disabled || null}\n        class=\"badge-number\">\n      </cura-badge-counter>\n    );\n  }\n\n  getCheckIconRight() {\n    const iconSize = this.size === 'large' ? 20 : 16;\n    return <cura-icon name=\"check\" size={iconSize} color={this.getLabelFontColor()}></cura-icon>;\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled) e.preventDefault();\n    this.selected = !this.selected;\n    this.onclick.emit({ selected: this.selected });\n  }\n\n  render() {\n    const labelSize = labelSizes[this.size] || labelSizes['default'];\n    return (\n      <Host>\n        <button\n          class={this.getClasses()}\n          style={this.styles}\n          disabled={this.disabled}\n          onClick={e => this.handleClick(e)}\n          onMouseEnter={() => this.handleMouseEnter()}\n          onMouseLeave={() => this.handleMouseLeave()}\n        >\n          <div class=\"button-container\">\n            {this.iconName ? this.getIcon() : null}\n            <cura-label class=\"label\" size={labelSize} lineHeight=\"0%\" color={this.getLabelFontColor()} weight=\"regular\">\n              <slot></slot>\n            </cura-label>\n            {this.counter ? this.getCounter() : null}\n            {this.iconPosition === 'right' && this.selected ? this.getCheckIconRight() : null}\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAsB,2vGAC5B,MAAAC,EAAeD,E,MCOFE,EAAgB,M,0DAiB3BC,KAAAC,MAAQC,OAAOC,QAAQF,M,cAd4B,M,kCAEW,S,+DAGvB,Q,WACf,U,yCAGL,M,YACD,E,CAUlB,SAAAG,GACE,MAAMC,EAAS,CACb,CAAEC,KAAM,iBAAkBC,MAAOP,KAAKQ,aAAe,QAAU,GAAGR,KAAKS,eAAiB,iBACxF,CAAEH,KAAM,+BAAgCC,MAAOP,KAAKQ,aAAe,QAAU,GAAGR,KAAKS,aAAe,GAAGT,KAAKS,eAC5G,CAAEH,KAAM,2BAA4BC,MAAOP,KAAKQ,aAAe,QAAU,GAAGR,KAAKS,cAAgB,GAAGT,KAAKS,cACzG,CAAEH,KAAM,iBAAkBC,MAAOP,KAAKQ,aAAe,QAAU,GAAGR,KAAKS,aAAe,iBACtF,CAAEH,KAAM,+BAAgCC,MAAOP,KAAKQ,aAAe,QAAU,GAAGR,KAAKS,aAAe,GAAGT,KAAKS,iBAC5G,CAAEH,KAAM,uBAAwBC,MAAOP,KAAKQ,aAAe,QAAU,GAAGR,KAAKS,aAAe,GAAGT,KAAKS,iBACpG,CAAEH,KAAM,yBAA0BC,MAAOP,KAAKQ,aAAe,QAAU,gBAAkB,iBACzF,CAAEF,KAAM,kCAAmCC,MAAO,gBAClD,CAAED,KAAM,2BAA4BC,MAAOP,KAAKQ,aAAe,QAAU,eAAiB,iBAC1F,CAAEF,KAAM,kBAAmBC,OAAQP,KAAKU,UAAY,oBAGtDL,EAAOM,SAAQF,GAAUT,KAAKY,OAAOH,EAAMH,MAAQJ,OAAOC,QAAQF,MAAMI,OAAOQ,SAASJ,EAAMF,SAC9FP,KAAKY,OAAME,OAAAC,OAAA,GAAQf,KAAKY,O,CAG1B,UAAAI,G,MACE,MAAMC,EAAU,GAChBA,EAAQ,IAAGC,EAAAlB,KAAKmB,QAAI,MAAAD,SAAA,SAAAA,EAAEE,iBAAmB,KACzCH,EAAQ,QAAQjB,KAAKqB,aAAaD,iBAAmB,KACrDH,EAAQ,YAAcjB,KAAKU,SAC3BO,EAAQ,YAAcjB,KAAKsB,SAC3B,OAAOL,C,CAGT,iBAAAM,GACEvB,KAAKwB,QAAUtB,OAAOC,QAAQF,MAAMwB,MAAMC,aAC1C1B,KAAKY,OAAO,kBAAoBV,OAAOC,QAAQF,MAAM0B,QAAQC,aAC7D5B,KAAKY,OAAO,eAAiBV,OAAOC,QAAQF,MAAMwB,MAAMI,UACxD7B,KAAKY,OAAO,iBAAmBV,OAAOC,QAAQF,MAAMwB,MAAMK,YAC1D9B,KAAKY,OAAO,wBAA0BZ,KAAKwB,QAAQO,OACnD/B,KAAKI,W,CAGP,iBAAA4B,GACE,GAAIhC,KAAKU,SAAU,MAAO,eAE1B,GAAIV,KAAKQ,aAAe,OAAQ,CAC9B,OAAOR,KAAKsB,SAAW,gBAAkB,e,CAE3C,GAAItB,KAAKQ,aAAe,QAAS,CAC/B,OAAOR,KAAKsB,SAAW,gBAAkB,e,EAI7C,mBAAAW,GACE,GAAIjC,KAAKQ,aAAe,QAAUR,KAAKU,SAAU,CAC/C,OAAOV,KAAKsB,SAAW,gBAAkB,c,CAG3C,GAAItB,KAAKQ,aAAe,SAAWR,KAAKU,SAAU,CAChD,MAAO,gB,CAGT,MAAO,GAAGV,KAAKS,c,CAGjB,OAAAyB,GACE,MAAMC,EAAWnC,KAAKmB,OAAS,QAAU,GAAK,GAC9C,GAAInB,KAAKqB,eAAiB,QAAS,CACjC,M,CAGF,OAAOe,EAAA,aAAW9B,KAAMN,KAAKqC,SAAUlB,KAAMgB,EAAU1B,MAAOT,KAAKgC,qB,CAGrE,UAAAM,GACE,OACEF,EAAA,sBACEG,OAAQvC,KAAKwC,QACb/B,MAAOT,KAAKS,MACZC,SAAUV,KAAKU,UAAY,KAC3B+B,MAAM,gB,CAKZ,iBAAAC,GACE,MAAMP,EAAWnC,KAAKmB,OAAS,QAAU,GAAK,GAC9C,OAAOiB,EAAA,aAAW9B,KAAK,QAAQa,KAAMgB,EAAU1B,MAAOT,KAAKgC,qB,CAG7D,gBAAAW,GACE,GAAI3C,KAAKU,SAAU,OACnBV,KAAK4C,QAAU,I,CAGjB,gBAAAC,GACE7C,KAAK4C,QAAU,K,CAGjB,WAAAE,CAAYC,GACV,GAAI/C,KAAKU,SAAUqC,EAAEC,iBACrBhD,KAAKsB,UAAYtB,KAAKsB,SACtBtB,KAAKiD,QAAQC,KAAK,CAAE5B,SAAUtB,KAAKsB,U,CAGrC,MAAA6B,GACE,MAAMC,EAAYC,EAAWrD,KAAKmB,OAASkC,EAAW,WACtD,OACEjB,EAACkB,EAAI,CAAAC,IAAA,4CACHnB,EAAA,UAAAmB,IAAA,2CACEd,MAAOzC,KAAKgB,aACZwC,MAAOxD,KAAKY,OACZF,SAAUV,KAAKU,SACf+C,QAASV,GAAK/C,KAAK8C,YAAYC,GAC/BW,aAAc,IAAM1D,KAAK2C,mBACzBgB,aAAc,IAAM3D,KAAK6C,oBAEzBT,EAAA,OAAAmB,IAAA,2CAAKd,MAAM,oBACRzC,KAAKqC,SAAWrC,KAAKkC,UAAY,KAClCE,EAAA,cAAAmB,IAAA,2CAAYd,MAAM,QAAQtB,KAAMiC,EAAWQ,WAAW,KAAKnD,MAAOT,KAAKgC,oBAAqB6B,OAAO,WACjGzB,EAAA,QAAAmB,IAAA,8CAEDvD,KAAKwC,QAAUxC,KAAKsC,aAAe,KACnCtC,KAAKqB,eAAiB,SAAWrB,KAAKsB,SAAWtB,KAAK0C,oBAAsB,O","ignoreList":[]}