@rededor/cura 1.2.0-alpha.0 → 1.2.0-rc.1

package/dist/cura/p-a2ae6bd2.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as o,H as r,g as s}from"./p-fd5ed6b0.js";const a=':host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}:host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:var(--neutral-purewhite);box-sizing:border-box;border:2px solid var(--color-border)}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button:not(.disabled):hover,:host a:not(.disabled):hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover-pressed)}:host button:focus,:host a:focus{border-color:var(--color-border) !important}:host button.large,:host a.large{padding:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px)}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 10px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 2px);min-height:calc(var(--base-spacing) * 8px)}:host button cura-label,:host a cura-label{flex:1;text-align:var(--text-align, "left")}:host button .button-container,:host a .button-container{display:flex;align-items:center;opacity:1;transition:opacity 0.2s linear;position:relative;gap:12px;padding:12px 16px}:host button.icon-right .button-container,:host a.icon-right .button-container{flex-direction:row-reverse}:host button.justify .button-container,:host a.justify .button-container{width:100%}:host button.selected,:host a.selected{cursor:pointer;background-color:var(--color-select);border-color:var(--color-select)}:host button.selected:not(.disabled):hover,:host a.selected:not(.disabled):hover{background-color:var(--color-border-hover-pressed);border-color:var(--color-border-hover-pressed)}:host button.selected:focus,:host a.selected:focus{border-color:var(--color-select-focus) !important}:host button.selected.disabled,:host a.selected.disabled{background-color:var(--color-disable-select);border-color:var(--color-disable-select)}:host button.disabled,:host a.disabled{cursor:not-allowed;background-color:var(--neutral-white-primary-darker);border-color:var(--color-border-disable-unselect)}';const i=a;const l=class{constructor(o){t(this,o);this.onclick=e(this,"onclick",7);this.theme=window.CuraAPI.theme;this.selected=false;this.iconName=undefined;this.size=undefined;this.counter=undefined;this.disabled=undefined;this.background=undefined;this.color=undefined;this.hovered=false;this.styles={}}setColors(){const t=[{name:"--color-border",thema:this.background==="light"?`${this.color}-darker`:"neutral-white"},{name:"--color-border-hover-pressed",thema:this.background==="light"?`${this.color}-dark`:`${this.color}-light`},{name:"--color-background-hover",thema:this.background==="light"?`${this.color}-light`:`${this.color}-dark`},{name:"--color-select",thema:this.background==="light"?`${this.color}-base`:"neutral-white"},{name:"--color-select-hover-pressed",thema:this.background==="light"?`${this.color}-dark`:`${this.color}-lighter`},{name:"--color-select-focus",thema:this.background==="light"?`${this.color}-base`:`${this.color}-lighter`},{name:"--color-disable-select",thema:this.background==="light"?"neutral-white":"neutral-black"},{name:"--color-border-disable-unselect",thema:"neutral-dark"},{name:"--color-counter-disabled",thema:this.background==="light"?"neutral-pale":"neutral-black"},{name:"--color-counter",thema:!this.disabled&&"primary-lighter"}];t.forEach((t=>this.styles[t.name]=window.CuraAPI.theme.colors.getColor(t.thema)));this.styles=Object.assign({},this.styles)}getClasses(){const t={};t[`${this.size.toLowerCase()}`]=true;t["icon"]=true;t["disabled"]=this.disabled;t["selected"]=this.selected;return t}connectedCallback(){this.setColors()}getLabelFontColor(){if(this.disabled)return"neutral-dark";if(this.background==="dark"){return this.selected?"neutral-black":"neutral-white"}if(this.background==="light"){return this.selected?"neutral-white":"neutral-black"}}getColorCounter(){if(this.background==="dark"&&this.disabled){return!this.selected?"neutral-black":"neutral-dark"}if(this.background==="light"&&this.disabled){return"neutral-pale"}return`${this.color}-lighter`}getColorBagdeNumber(){if(this.background==="dark"&&this.disabled){return this.selected?"neutral-black":"neutral-dark"}if(this.background==="light"&&this.disabled){return"neutral-medium"}return`${this.color}-darker`}getIcon(){const t=this.size==="large"?24:this.size==="medium"?20:16;return o("cura-icon",{class:"button-icon",name:this.iconName,size:t,color:this.getLabelFontColor()})}getCounter(){return o("cura-badge-number",{color:this.getColorCounter()},o("cura-label",{color:this.getColorBagdeNumber()},this.counter))}handleMouseEnter(){if(this.disabled)return;this.hovered=true}handleMouseLeave(){this.hovered=false}handleClick(t){if(this.disabled)t.preventDefault();this.selected=!this.selected;this.onclick.emit({selected:this.selected})}render(){return o(r,{key:"5b612b060b0a7b40ede004322995f0e410da8759"},o("button",{key:"616ae769e76d647a3806daf33376ca88eb75da5d",class:this.getClasses(),style:this.styles,disabled:this.disabled,onClick:t=>this.handleClick(t),onMouseEnter:()=>this.handleMouseEnter(),onMouseLeave:()=>this.handleMouseLeave()},o("div",{key:"ef0a6f7ed31c7c2b4eb0f74e3713c0cc99b79080",class:"button-container"},this.iconName?this.getIcon():null,o("cura-label",{key:"0366f6538cc0ccf76c072de862fe60d87fccb937",class:"label",lineHeight:"0%",color:this.getLabelFontColor(),weight:"regular"},o("slot",{key:"72a72cc3a128223e7f41212005caff8aefbf1454"})),this.counter?this.getCounter():null)))}get host(){return s(this)}static get watchers(){return{background:["setColors"],color:["setColors"]}}};l.style=i;export{l as cura_button_select};
-//# sourceMappingURL=p-a2ae6bd2.entry.js.map

package/dist/cura/p-a2ae6bd2.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","size","toLowerCase","selected","connectedCallback","getLabelFontColor","getColorCounter","getColorBagdeNumber","getIcon","iconSize","h","class","iconName","getCounter","counter","handleMouseEnter","hovered","handleMouseLeave","handleClick","e","preventDefault","onclick","emit","render","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: 2px solid var(--color-border);\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      gap: 12px;\n      padding: 12px 16px;\n    }\n\n    @mixin button-icon() {\n      margin: 10px;\n    }\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\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\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';\n  @Prop({ reflect: true, mutable: true }) counter: string | number | null;\n  @Prop({ reflect: true }) disabled: boolean;\n  @Prop() background: 'dark' | 'light';\n  @Prop() color: string;\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\n  getClasses() {\n    const classes = {};\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes['icon'] = true;\n    classes['disabled'] = this.disabled;\n    classes['selected'] = this.selected;\n    return classes;\n  }\n\n  connectedCallback() {\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\n  getColorCounter() {\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-pale'\n    }\n    return `${this.color}-lighter`\n  }\n\n  getColorBagdeNumber() {\n\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' ? 24 : this.size === 'medium' ? 20 : 16;\n\n    return <cura-icon class=\"button-icon\" name={this.iconName} size={iconSize} color={this.getLabelFontColor()} />;\n  }\n\n  getCounter() {\n    return (\n      <cura-badge-number color={this.getColorCounter()}>\n        <cura-label color={this.getColorBagdeNumber()}>{this.counter}</cura-label>\n      </cura-badge-number>\n    );\n  }\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    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\" lineHeight=\"0%\" color={this.getLabelFontColor()} weight='regular'>\n              <slot></slot>\n            </cura-label>\n            {this.counter ? this.getCounter() : null}\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}