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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/cjs/cura-button-select.cjs.entry.js +12 -4
  2. package/dist/cjs/cura-button-select.cjs.entry.js.map +1 -1
  3. package/dist/collection/components/buttons/cura-button-select/cura-button-select.css +1 -2
  4. package/dist/collection/components/buttons/cura-button-select/cura-button-select.js +11 -3
  5. package/dist/collection/components/buttons/cura-button-select/cura-button-select.js.map +1 -1
  6. package/dist/components/cura-button-select.js +12 -4
  7. package/dist/components/cura-button-select.js.map +1 -1
  8. package/dist/cura/cura.esm.js +1 -1
  9. package/dist/cura/p-cda24a1e.entry.js +2 -0
  10. package/dist/cura/p-cda24a1e.entry.js.map +1 -0
  11. package/dist/esm/cura-button-select.entry.js +12 -4
  12. package/dist/esm/cura-button-select.entry.js.map +1 -1
  13. package/package.json +2 -2
  14. package/dist/cura/p-a2ae6bd2.entry.js +0 -2
  15. package/dist/cura/p-a2ae6bd2.entry.js.map +0 -1
package/dist/cjs/cura-button-select.cjs.entry.js CHANGED
@@ -3,8 +3,9 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-e6d728ec.js');
6
+ const curaButton_definitions = require('./cura-button.definitions-f036371c.js');
6
7
 
7
- const curaButtonSelectCss = ":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)}";
8
+ const curaButtonSelectCss = ":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:10px}: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)}";
8
9
  const CuraButtonSelectStyle0 = curaButtonSelectCss;
9
10
 
10
11
  const CuraButtonSelect = class {
@@ -33,20 +34,26 @@ const CuraButtonSelect = class {
33
34
  { name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },
34
35
  { name: '--color-border-disable-unselect', thema: 'neutral-dark' },
35
36
  { name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },
36
- { name: '--color-counter', thema: !this.disabled && 'primary-lighter' }
37
+ { name: '--color-counter', thema: !this.disabled && 'primary-lighter' },
37
38
  ];
38
39
  colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));
39
40
  this.styles = Object.assign({}, this.styles);
40
41
  }
41
42
  getClasses() {
43
+ var _a;
42
44
  const classes = {};
43
- classes[`${this.size.toLowerCase()}`] = true;
45
+ classes[`${(_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase()}`] = true;
44
46
  classes['icon'] = true;
45
47
  classes['disabled'] = this.disabled;
46
48
  classes['selected'] = this.selected;
47
49
  return classes;
48
50
  }
49
51
  connectedCallback() {
52
+ this.weights = window.CuraAPI.theme.fonts.getWeights();
53
+ this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
54
+ this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
55
+ this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
56
+ this.styles['--font-weight-medium'] = this.weights.medium;
50
57
  this.setColors();
51
58
  }
52
59
  getLabelFontColor() {
@@ -99,7 +106,8 @@ const CuraButtonSelect = class {
99
106
  this.onclick.emit({ selected: this.selected });
100
107
  }
101
108
  render() {
102
- return (index.h(index.Host, { key: '5b612b060b0a7b40ede004322995f0e410da8759' }, index.h("button", { key: '616ae769e76d647a3806daf33376ca88eb75da5d', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("div", { key: 'ef0a6f7ed31c7c2b4eb0f74e3713c0cc99b79080', class: "button-container" }, this.iconName ? this.getIcon() : null, index.h("cura-label", { key: '0366f6538cc0ccf76c072de862fe60d87fccb937', class: "label", lineHeight: "0%", color: this.getLabelFontColor(), weight: 'regular' }, index.h("slot", { key: '72a72cc3a128223e7f41212005caff8aefbf1454' })), this.counter ? this.getCounter() : null))));
109
+ const labelSize = curaButton_definitions.labelSizes[this.size] || curaButton_definitions.labelSizes['default'];
110
+ return (index.h(index.Host, { key: '368f94693c0ce8ec2d95a9eb258fd6e411ade7a5' }, index.h("button", { key: 'ddc421e819342b29772d763b0a62f98a4aca37c0', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("div", { key: '70bb7a295f1fb8984aabc432edf6e8e3f464daf1', class: "button-container" }, this.iconName ? this.getIcon() : null, index.h("cura-label", { key: '281bbb73ff59a231f2daef9bac9a49b46f3c55df', class: "label", size: labelSize, lineHeight: "0%", color: this.getLabelFontColor(), weight: "regular" }, index.h("slot", { key: 'ef955647ac927fea6bb1dc686720031260fc5212' })), this.counter ? this.getCounter() : null))));
103
111
  }
104
112
  get host() { return index.getElement(this); }
105
113
  static get watchers() { return {
package/dist/cjs/cura-button-select.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"cura-button-select.entry.cjs.js","mappings":"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","names":["h","Host"],"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"],"version":3}
1
+ {"file":"cura-button-select.entry.cjs.js","mappings":"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","names":["h","labelSizes","Host"],"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: 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","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';\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 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.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 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 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 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 </div>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/collection/components/buttons/cura-button-select/cura-button-select.css CHANGED
@@ -137,8 +137,7 @@
137
137
  opacity: 1;
138
138
  transition: opacity 0.2s linear;
139
139
  position: relative;
140
- gap: 12px;
141
- padding: 12px 16px;
140
+ gap: 10px;
142
141
  }
143
142
  :host button.icon-right .button-container,
144
143
  :host a.icon-right .button-container {
package/dist/collection/components/buttons/cura-button-select/cura-button-select.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Host, h } from "@stencil/core";
2
+ import { labelSizes } from "../cura-button.definitions";
2
3
  export class CuraButtonSelect {
3
4
  constructor() {
4
5
  this.theme = window.CuraAPI.theme;
@@ -23,20 +24,26 @@ export class CuraButtonSelect {
23
24
  { name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },
24
25
  { name: '--color-border-disable-unselect', thema: 'neutral-dark' },
25
26
  { name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },
26
- { name: '--color-counter', thema: !this.disabled && 'primary-lighter' }
27
+ { name: '--color-counter', thema: !this.disabled && 'primary-lighter' },
27
28
  ];
28
29
  colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));
29
30
  this.styles = Object.assign({}, this.styles);
30
31
  }
31
32
  getClasses() {
33
+ var _a;
32
34
  const classes = {};
33
- classes[`${this.size.toLowerCase()}`] = true;
35
+ classes[`${(_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase()}`] = true;
34
36
  classes['icon'] = true;
35
37
  classes['disabled'] = this.disabled;
36
38
  classes['selected'] = this.selected;
37
39
  return classes;
38
40
  }
39
41
  connectedCallback() {
42
+ this.weights = window.CuraAPI.theme.fonts.getWeights();
43
+ this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
44
+ this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
45
+ this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
46
+ this.styles['--font-weight-medium'] = this.weights.medium;
40
47
  this.setColors();
41
48
  }
42
49
  getLabelFontColor() {
@@ -89,7 +96,8 @@ export class CuraButtonSelect {
89
96
  this.onclick.emit({ selected: this.selected });
90
97
  }
91
98
  render() {
92
- return (h(Host, { key: '5b612b060b0a7b40ede004322995f0e410da8759' }, h("button", { key: '616ae769e76d647a3806daf33376ca88eb75da5d', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: 'ef0a6f7ed31c7c2b4eb0f74e3713c0cc99b79080', class: "button-container" }, this.iconName ? this.getIcon() : null, h("cura-label", { key: '0366f6538cc0ccf76c072de862fe60d87fccb937', class: "label", lineHeight: "0%", color: this.getLabelFontColor(), weight: 'regular' }, h("slot", { key: '72a72cc3a128223e7f41212005caff8aefbf1454' })), this.counter ? this.getCounter() : null))));
99
+ const labelSize = labelSizes[this.size] || labelSizes['default'];
100
+ return (h(Host, { key: '368f94693c0ce8ec2d95a9eb258fd6e411ade7a5' }, h("button", { key: 'ddc421e819342b29772d763b0a62f98a4aca37c0', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '70bb7a295f1fb8984aabc432edf6e8e3f464daf1', class: "button-container" }, this.iconName ? this.getIcon() : null, h("cura-label", { key: '281bbb73ff59a231f2daef9bac9a49b46f3c55df', class: "label", size: labelSize, lineHeight: "0%", color: this.getLabelFontColor(), weight: "regular" }, h("slot", { key: 'ef955647ac927fea6bb1dc686720031260fc5212' })), this.counter ? this.getCounter() : null))));
93
101
  }
94
102
  static get is() { return "cura-button-select"; }
95
103
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/buttons/cura-button-select/cura-button-select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cura-button-select.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-select/cura-button-select.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1
+ {"version":3,"file":"cura-button-select.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-select/cura-button-select.tsx"],"names":[],"mappings":"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","sourcesContent":["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';\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 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.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 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 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 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 </div>\n </button>\n </Host>\n );\n }\n}\n"]}
package/dist/components/cura-button-select.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
2
+ import { l as labelSizes } from './cura-button.definitions.js';
2
3
  import { d as defineCustomElement$4 } from './cura-badge-number2.js';
3
4
  import { d as defineCustomElement$3 } from './cura-icon2.js';
4
5
  import { d as defineCustomElement$2 } from './cura-label2.js';
5
6
 
6
- const curaButtonSelectCss = ":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)}";
7
+ const curaButtonSelectCss = ":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:10px}: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)}";
7
8
  const CuraButtonSelectStyle0 = curaButtonSelectCss;
8
9
 
9
10
  const CuraButtonSelect$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonSelect extends HTMLElement {
@@ -34,20 +35,26 @@ const CuraButtonSelect$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonSele
34
35
  { name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },
35
36
  { name: '--color-border-disable-unselect', thema: 'neutral-dark' },
36
37
  { name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },
37
- { name: '--color-counter', thema: !this.disabled && 'primary-lighter' }
38
+ { name: '--color-counter', thema: !this.disabled && 'primary-lighter' },
38
39
  ];
39
40
  colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));
40
41
  this.styles = Object.assign({}, this.styles);
41
42
  }
42
43
  getClasses() {
44
+ var _a;
43
45
  const classes = {};
44
- classes[`${this.size.toLowerCase()}`] = true;
46
+ classes[`${(_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase()}`] = true;
45
47
  classes['icon'] = true;
46
48
  classes['disabled'] = this.disabled;
47
49
  classes['selected'] = this.selected;
48
50
  return classes;
49
51
  }
50
52
  connectedCallback() {
53
+ this.weights = window.CuraAPI.theme.fonts.getWeights();
54
+ this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
55
+ this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
56
+ this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
57
+ this.styles['--font-weight-medium'] = this.weights.medium;
51
58
  this.setColors();
52
59
  }
53
60
  getLabelFontColor() {
@@ -100,7 +107,8 @@ const CuraButtonSelect$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonSele
100
107
  this.onclick.emit({ selected: this.selected });
101
108
  }
102
109
  render() {
103
- return (h(Host, { key: '5b612b060b0a7b40ede004322995f0e410da8759' }, h("button", { key: '616ae769e76d647a3806daf33376ca88eb75da5d', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: 'ef0a6f7ed31c7c2b4eb0f74e3713c0cc99b79080', class: "button-container" }, this.iconName ? this.getIcon() : null, h("cura-label", { key: '0366f6538cc0ccf76c072de862fe60d87fccb937', class: "label", lineHeight: "0%", color: this.getLabelFontColor(), weight: 'regular' }, h("slot", { key: '72a72cc3a128223e7f41212005caff8aefbf1454' })), this.counter ? this.getCounter() : null))));
110
+ const labelSize = labelSizes[this.size] || labelSizes['default'];
111
+ return (h(Host, { key: '368f94693c0ce8ec2d95a9eb258fd6e411ade7a5' }, h("button", { key: 'ddc421e819342b29772d763b0a62f98a4aca37c0', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '70bb7a295f1fb8984aabc432edf6e8e3f464daf1', class: "button-container" }, this.iconName ? this.getIcon() : null, h("cura-label", { key: '281bbb73ff59a231f2daef9bac9a49b46f3c55df', class: "label", size: labelSize, lineHeight: "0%", color: this.getLabelFontColor(), weight: "regular" }, h("slot", { key: 'ef955647ac927fea6bb1dc686720031260fc5212' })), this.counter ? this.getCounter() : null))));
104
112
  }
105
113
  get host() { return this; }
106
114
  static get watchers() { return {
package/dist/components/cura-button-select.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"cura-button-select.js","mappings":"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","names":["CuraButtonSelect"],"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"],"version":3}
1
+ {"file":"cura-button-select.js","mappings":"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","names":["CuraButtonSelect"],"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: 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","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';\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 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.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 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 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 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 </div>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/cura/cura.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,b as o}from"./p-fd5ed6b0.js";export{s as setNonce}from"./p-fd5ed6b0.js";import{g as l}from"./p-0b7a7306.js";var a=()=>{const o=import.meta.url;const l={};if(o!==""){l.resourcesUrl=new URL(".",o).href}return e(l)};a().then((async e=>{await l();return o([["p-be10b681",[[65,"cura-button",{type:[513],size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],background:[513],fontColor:[513,"font-color"],textAlign:[513,"text-align"],justify:[516],styles:[32],hovered:[32]},null,{background:["setColors"],color:["setColors"]}],[1,"cura-accordion-item",{label:[513],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],colorMode:[1,"color-mode"],opened:[1540],styles:[32]}],[1,"cura-accordion",{color:[513],activeColor:[513,"active-color"],colorMode:[513,"color-mode"],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],behavior:[513],styles:[32]},null,{color:["handleChangeColor"],activeColor:["handleChangeColor"]}],[1,"cura-page-template",{contentwidth:[513]}],[65,"cura-input-text",{mode:[1537],status:[1537],size:[1537],type:[513],inputMode:[513,"input-mode"],label:[513],name:[513],placeholder:[513],value:[1032],iconName:[1537,"icon-name"],helperText:[1537,"helper-text"],disabled:[516],required:[516],maskPreset:[8,"mask-preset"],enableSelectionMode:[1540,"enable-selection-mode"],maskRegex:[1537,"mask-regex"],maskAdvanced:[1544,"mask-advanced"],maxlength:[1538],readOnly:[516,"read-only"],isLoading:[1540,"is-loading"],clearIcon:[1540,"clear-icon"],hideErrorIcon:[4,"hide-error-icon"],autocomplete:[513],isHovered:[32],isFocused:[32],styles:[32]},null,{styles:["connectedCallback"],size:["getClasses"],status:["renderIcon"],mode:["renderIcon"],maskPreset:["initializeMask"],maskRegex:["initializeMask"],maskAdvanced:["initializeMask"]}],[65,"cura-select",{label:[513],placeholder:[513],value:[1537],mode:[513],size:[513],status:[1537],disabled:[516],required:[516],searchBehavior:[516,"search-behavior"],isHovered:[32],isFocused:[32],isOpen:[32],options:[32],activeIndex:[32],textInput:[32]},null,{activeIndex:["updateOptionHighlights"],textInput:["filterOptions"],value:["handleValueChange"]}],[1,"cura-select-option",{value:[513],selected:[516],active:[516],size:[1],styles:[32]},null,{size:["getSize"]}],[1,"cura-heading",{level:[514],size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}],[1,"cura-paragraph",{size:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}],[1,"cura-loader-circle",{size:[513],color:[513]}],[1,"cura-icon",{name:[513],color:[1],size:[8],iconset:[513],disabled:[4]},null,{size:["sizeHandler"],color:["colorHandler"],disabled:["colorHandler"]}],[1,"cura-label",{size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}]]],["p-e8bc6381",[[65,"cura-input-date",{label:[513],status:[1537],size:[1537],name:[513],helperText:[1537,"helper-text"],enableRangeDates:[1540,"enable-range-dates"],disableFutureDates:[1540,"disable-future-dates"],disablePassDates:[1540,"disable-pass-dates"],iconName:[1537,"icon-name"],placeholder:[513],styles:[32],isCalendarVisible:[32],dates:[32],value:[32]},[[8,"click","handleClick"]],{enableRangeDates:["setPlaceholder","setMask","setMode"],disableFutureDates:["isDateValid","renderCalendarOrHelperText"],disablePassDates:["isDateValid"],dates:["renderCalendarOrHelperText"],isCalendarVisible:["renderCalendarOrHelperText"]}]]],["p-ed97cf3c",[[1,"cura-dropdown-search",{size:[1537],status:[513],disabled:[516],name:[513],required:[1540],selected:[1540],value:[1537],placeholder:[1537],label:[1537],iconName:[513,"icon-name"],dropdownMaxHeight:[513,"dropdown-max-height"],overlayVisible:[32],isDropdownOpen:[32],styles:[32],isMobile:[32],mode:[32],inputTextRef:[32],isOnBlurInput:[32],hoveredIndex:[32],options:[32]},null,{value:["onValueChange"]}]]],["p-fdce91a7",[[1,"cura-icons-view",{selected:[32]}]]],["p-fcbf4311",[[1,"cura-toast",{type:[1],position:[1],icon:[513],label:[513],closeButton:[516,"close-button"],loader:[516],autoCloseDelay:[514,"auto-close-delay"],styles:[32],progress:[32]},null,{type:["handleChangeType"],position:["handleChangeType"]}]]],["p-2d267d23",[[1,"cura-alert",{type:[1],floating:[516],label:[513],closeable:[516],icon:[513],styles:[32]},null,{type:["setColors"]}]]],["p-41c3d47d",[[65,"cura-button-outline",{type:[513],size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],background:[1],fontColor:[1,"font-color"],textAlign:[513,"text-align"],justify:[516],styles:[32],hovered:[32]},null,{background:["setColors"],color:["setColors","getSymbolColor"],fontColor:["getSymbolColor"]}]]],["p-a2ae6bd2",[[1,"cura-button-select",{selected:[1540],iconName:[1537,"icon-name"],size:[513],counter:[1544],disabled:[516],background:[1],color:[1],hovered:[32],styles:[32]},null,{background:["setColors"],color:["setColors"]}]]],["p-44e3325a",[[65,"cura-checkbox",{checked:[1540],indeterminate:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],size:[513],background:[1],iconColor:[1,"icon-color"],color:[1],styles:[32]},null,{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"],iconColor:["assignColor"]}]]],["p-fd083399",[[65,"cura-radio",{checked:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],background:[1],size:[1],color:[1],styles:[32]},null,{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"]}]]],["p-907b3d12",[[1,"cura-badge-distance",{distance:[2],label:[513],styles:[32],displayDistance:[32]},null,{distance:["formatDistance"]}]]],["p-b2d5db22",[[1,"cura-dropdown-search-option",{value:[513],selected:[1540],selectable:[516],hovered:[1540],styles:[32]},null,{selected:["updateIconColor"]}]]],["p-4e14c01c",[[1,"cura-dropdown-search-option-title"]]],["p-c6508bd7",[[65,"cura-switch",{checked:[1540],disabled:[516],label:[513],ontabindex:[514],position:[513],size:[513],background:[1],color:[1],styles:[32]},null,{size:["sizeHandler"],color:["setColors"],background:["setColors"]}]]],["p-116a1cd6",[[1,"cura-avatar",{size:[1],backgroundColor:[513,"background-color"],borderColor:[513,"border-color"],borderRadius:[513,"border-radius"],border:[516],type:[513],imageSrc:[1537,"image-src"],imageSrcDefault:[513,"image-src-default"],floating:[516],styles:[32]},null,{size:["sizeHandler"]}]]],["p-dcd2e5bb",[[1,"cura-card",{hasPadding:[1028,"has-padding"],hasShadow:[1028,"has-shadow"],type:[1025],colorMode:[1025,"color-mode"],href:[1537],target:[513],styles:[32]}]]],["p-8f3db0fe",[[1,"cura-display",{level:[514],size:[513],spotColor:[1,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}]]],["p-563ba0cd",[[1,"cura-calendar",{period:[513],width:[513],mode:[513],dateFormat:[1537,"date-format"],locale:[513],type:[513],disable:[16],enable:[16],defaultDate:[16],customDates:[16],limitRange:[514,"limit-range"],disablePassDates:[1540,"disable-pass-dates"],disableFutureDates:[1540,"disable-future-dates"],collapsed:[1540],floating:[1540],embedded:[1540],currentDate:[32],selectedDates:[32],rangeStart:[32],defaultDates:[32],selectMonth:[32],selectYear:[32],styles:[32]},null,{customDates:["watchDefaultDatesArray"]}]]],["p-b43b69f3",[[1,"cura-badge-number",{number:[514],color:[513]}]]],["p-e5023e34",[[1,"cura-loader-bar",{color:[1],progress:[2],styles:[32]},null,{color:["handleChangeColor"],progress:["handleProgress"]}]]],["p-33772510",[[65,"cura-button-transparent",{type:[513],size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[513],fontColor:[513,"font-color"],textAlign:[513,"text-align"],justify:[516],hovered:[32],styles:[32]},null,{fontColor:["getSymbolColor"],color:["getSymbolColor"]}]]]],e)}));
1
+ import{p as e,b as o}from"./p-fd5ed6b0.js";export{s as setNonce}from"./p-fd5ed6b0.js";import{g as l}from"./p-0b7a7306.js";var a=()=>{const o=import.meta.url;const l={};if(o!==""){l.resourcesUrl=new URL(".",o).href}return e(l)};a().then((async e=>{await l();return o([["p-be10b681",[[65,"cura-button",{type:[513],size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],background:[513],fontColor:[513,"font-color"],textAlign:[513,"text-align"],justify:[516],styles:[32],hovered:[32]},null,{background:["setColors"],color:["setColors"]}],[1,"cura-accordion-item",{label:[513],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],colorMode:[1,"color-mode"],opened:[1540],styles:[32]}],[1,"cura-accordion",{color:[513],activeColor:[513,"active-color"],colorMode:[513,"color-mode"],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],behavior:[513],styles:[32]},null,{color:["handleChangeColor"],activeColor:["handleChangeColor"]}],[1,"cura-page-template",{contentwidth:[513]}],[65,"cura-input-text",{mode:[1537],status:[1537],size:[1537],type:[513],inputMode:[513,"input-mode"],label:[513],name:[513],placeholder:[513],value:[1032],iconName:[1537,"icon-name"],helperText:[1537,"helper-text"],disabled:[516],required:[516],maskPreset:[8,"mask-preset"],enableSelectionMode:[1540,"enable-selection-mode"],maskRegex:[1537,"mask-regex"],maskAdvanced:[1544,"mask-advanced"],maxlength:[1538],readOnly:[516,"read-only"],isLoading:[1540,"is-loading"],clearIcon:[1540,"clear-icon"],hideErrorIcon:[4,"hide-error-icon"],autocomplete:[513],isHovered:[32],isFocused:[32],styles:[32]},null,{styles:["connectedCallback"],size:["getClasses"],status:["renderIcon"],mode:["renderIcon"],maskPreset:["initializeMask"],maskRegex:["initializeMask"],maskAdvanced:["initializeMask"]}],[65,"cura-select",{label:[513],placeholder:[513],value:[1537],mode:[513],size:[513],status:[1537],disabled:[516],required:[516],searchBehavior:[516,"search-behavior"],isHovered:[32],isFocused:[32],isOpen:[32],options:[32],activeIndex:[32],textInput:[32]},null,{activeIndex:["updateOptionHighlights"],textInput:["filterOptions"],value:["handleValueChange"]}],[1,"cura-select-option",{value:[513],selected:[516],active:[516],size:[1],styles:[32]},null,{size:["getSize"]}],[1,"cura-heading",{level:[514],size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}],[1,"cura-paragraph",{size:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}],[1,"cura-loader-circle",{size:[513],color:[513]}],[1,"cura-icon",{name:[513],color:[1],size:[8],iconset:[513],disabled:[4]},null,{size:["sizeHandler"],color:["colorHandler"],disabled:["colorHandler"]}],[1,"cura-label",{size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}]]],["p-e8bc6381",[[65,"cura-input-date",{label:[513],status:[1537],size:[1537],name:[513],helperText:[1537,"helper-text"],enableRangeDates:[1540,"enable-range-dates"],disableFutureDates:[1540,"disable-future-dates"],disablePassDates:[1540,"disable-pass-dates"],iconName:[1537,"icon-name"],placeholder:[513],styles:[32],isCalendarVisible:[32],dates:[32],value:[32]},[[8,"click","handleClick"]],{enableRangeDates:["setPlaceholder","setMask","setMode"],disableFutureDates:["isDateValid","renderCalendarOrHelperText"],disablePassDates:["isDateValid"],dates:["renderCalendarOrHelperText"],isCalendarVisible:["renderCalendarOrHelperText"]}]]],["p-ed97cf3c",[[1,"cura-dropdown-search",{size:[1537],status:[513],disabled:[516],name:[513],required:[1540],selected:[1540],value:[1537],placeholder:[1537],label:[1537],iconName:[513,"icon-name"],dropdownMaxHeight:[513,"dropdown-max-height"],overlayVisible:[32],isDropdownOpen:[32],styles:[32],isMobile:[32],mode:[32],inputTextRef:[32],isOnBlurInput:[32],hoveredIndex:[32],options:[32]},null,{value:["onValueChange"]}]]],["p-fdce91a7",[[1,"cura-icons-view",{selected:[32]}]]],["p-fcbf4311",[[1,"cura-toast",{type:[1],position:[1],icon:[513],label:[513],closeButton:[516,"close-button"],loader:[516],autoCloseDelay:[514,"auto-close-delay"],styles:[32],progress:[32]},null,{type:["handleChangeType"],position:["handleChangeType"]}]]],["p-2d267d23",[[1,"cura-alert",{type:[1],floating:[516],label:[513],closeable:[516],icon:[513],styles:[32]},null,{type:["setColors"]}]]],["p-41c3d47d",[[65,"cura-button-outline",{type:[513],size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],background:[1],fontColor:[1,"font-color"],textAlign:[513,"text-align"],justify:[516],styles:[32],hovered:[32]},null,{background:["setColors"],color:["setColors","getSymbolColor"],fontColor:["getSymbolColor"]}]]],["p-cda24a1e",[[1,"cura-button-select",{selected:[1540],iconName:[1537,"icon-name"],size:[513],counter:[1544],disabled:[516],background:[1],color:[1],hovered:[32],styles:[32]},null,{background:["setColors"],color:["setColors"]}]]],["p-44e3325a",[[65,"cura-checkbox",{checked:[1540],indeterminate:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],size:[513],background:[1],iconColor:[1,"icon-color"],color:[1],styles:[32]},null,{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"],iconColor:["assignColor"]}]]],["p-fd083399",[[65,"cura-radio",{checked:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],background:[1],size:[1],color:[1],styles:[32]},null,{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"]}]]],["p-907b3d12",[[1,"cura-badge-distance",{distance:[2],label:[513],styles:[32],displayDistance:[32]},null,{distance:["formatDistance"]}]]],["p-b2d5db22",[[1,"cura-dropdown-search-option",{value:[513],selected:[1540],selectable:[516],hovered:[1540],styles:[32]},null,{selected:["updateIconColor"]}]]],["p-4e14c01c",[[1,"cura-dropdown-search-option-title"]]],["p-c6508bd7",[[65,"cura-switch",{checked:[1540],disabled:[516],label:[513],ontabindex:[514],position:[513],size:[513],background:[1],color:[1],styles:[32]},null,{size:["sizeHandler"],color:["setColors"],background:["setColors"]}]]],["p-116a1cd6",[[1,"cura-avatar",{size:[1],backgroundColor:[513,"background-color"],borderColor:[513,"border-color"],borderRadius:[513,"border-radius"],border:[516],type:[513],imageSrc:[1537,"image-src"],imageSrcDefault:[513,"image-src-default"],floating:[516],styles:[32]},null,{size:["sizeHandler"]}]]],["p-dcd2e5bb",[[1,"cura-card",{hasPadding:[1028,"has-padding"],hasShadow:[1028,"has-shadow"],type:[1025],colorMode:[1025,"color-mode"],href:[1537],target:[513],styles:[32]}]]],["p-8f3db0fe",[[1,"cura-display",{level:[514],size:[513],spotColor:[1,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}]]],["p-563ba0cd",[[1,"cura-calendar",{period:[513],width:[513],mode:[513],dateFormat:[1537,"date-format"],locale:[513],type:[513],disable:[16],enable:[16],defaultDate:[16],customDates:[16],limitRange:[514,"limit-range"],disablePassDates:[1540,"disable-pass-dates"],disableFutureDates:[1540,"disable-future-dates"],collapsed:[1540],floating:[1540],embedded:[1540],currentDate:[32],selectedDates:[32],rangeStart:[32],defaultDates:[32],selectMonth:[32],selectYear:[32],styles:[32]},null,{customDates:["watchDefaultDatesArray"]}]]],["p-b43b69f3",[[1,"cura-badge-number",{number:[514],color:[513]}]]],["p-e5023e34",[[1,"cura-loader-bar",{color:[1],progress:[2],styles:[32]},null,{color:["handleChangeColor"],progress:["handleProgress"]}]]],["p-33772510",[[65,"cura-button-transparent",{type:[513],size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[513],fontColor:[513,"font-color"],textAlign:[513,"text-align"],justify:[516],hovered:[32],styles:[32]},null,{fontColor:["getSymbolColor"],color:["getSymbolColor"]}]]]],e)}));
2
2
  //# sourceMappingURL=cura.esm.js.map
package/dist/cura/p-cda24a1e.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r as t,c as e,h as o,H as r,g as s}from"./p-fd5ed6b0.js";import{l as i}from"./p-efcb32eb.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:10px}: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 l=a;const n=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(){var t;const e={};e[`${(t=this.size)===null||t===void 0?void 0:t.toLowerCase()}`]=true;e["icon"]=true;e["disabled"]=this.disabled;e["selected"]=this.selected;return e}connectedCallback(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--base-spacing"]=window.CuraAPI.theme.spacing.getSpacing();this.styles["--font-size"]=window.CuraAPI.theme.fonts.getSize();this.styles["--font-family"]=window.CuraAPI.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium;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(){const t=i[this.size]||i["default"];return o(r,{key:"368f94693c0ce8ec2d95a9eb258fd6e411ade7a5"},o("button",{key:"ddc421e819342b29772d763b0a62f98a4aca37c0",class:this.getClasses(),style:this.styles,disabled:this.disabled,onClick:t=>this.handleClick(t),onMouseEnter:()=>this.handleMouseEnter(),onMouseLeave:()=>this.handleMouseLeave()},o("div",{key:"70bb7a295f1fb8984aabc432edf6e8e3f464daf1",class:"button-container"},this.iconName?this.getIcon():null,o("cura-label",{key:"281bbb73ff59a231f2daef9bac9a49b46f3c55df",class:"label",size:t,lineHeight:"0%",color:this.getLabelFontColor(),weight:"regular"},o("slot",{key:"ef955647ac927fea6bb1dc686720031260fc5212"})),this.counter?this.getCounter():null)))}get host(){return s(this)}static get watchers(){return{background:["setColors"],color:["setColors"]}}};n.style=l;export{n as cura_button_select};
2
+ //# sourceMappingURL=p-cda24a1e.entry.js.map
package/dist/cura/p-cda24a1e.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"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","selected","connectedCallback","weights","fonts","getWeights","spacing","getSpacing","getSize","getFamily","medium","getLabelFontColor","getColorCounter","getColorBagdeNumber","getIcon","iconSize","h","class","iconName","getCounter","counter","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: 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: 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","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';\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 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.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 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 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 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 </div>\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
package/dist/esm/cura-button-select.entry.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-747aad85.js';
2
+ import { l as labelSizes } from './cura-button.definitions-617d3bad.js';
2
3
 
3
- const curaButtonSelectCss = ":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)}";
4
+ const curaButtonSelectCss = ":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:10px}: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)}";
4
5
  const CuraButtonSelectStyle0 = curaButtonSelectCss;
5
6
 
6
7
  const CuraButtonSelect = class {
@@ -29,20 +30,26 @@ const CuraButtonSelect = class {
29
30
  { name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },
30
31
  { name: '--color-border-disable-unselect', thema: 'neutral-dark' },
31
32
  { name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },
32
- { name: '--color-counter', thema: !this.disabled && 'primary-lighter' }
33
+ { name: '--color-counter', thema: !this.disabled && 'primary-lighter' },
33
34
  ];
34
35
  colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));
35
36
  this.styles = Object.assign({}, this.styles);
36
37
  }
37
38
  getClasses() {
39
+ var _a;
38
40
  const classes = {};
39
- classes[`${this.size.toLowerCase()}`] = true;
41
+ classes[`${(_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase()}`] = true;
40
42
  classes['icon'] = true;
41
43
  classes['disabled'] = this.disabled;
42
44
  classes['selected'] = this.selected;
43
45
  return classes;
44
46
  }
45
47
  connectedCallback() {
48
+ this.weights = window.CuraAPI.theme.fonts.getWeights();
49
+ this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
50
+ this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
51
+ this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
52
+ this.styles['--font-weight-medium'] = this.weights.medium;
46
53
  this.setColors();
47
54
  }
48
55
  getLabelFontColor() {
@@ -95,7 +102,8 @@ const CuraButtonSelect = class {
95
102
  this.onclick.emit({ selected: this.selected });
96
103
  }
97
104
  render() {
98
- return (h(Host, { key: '5b612b060b0a7b40ede004322995f0e410da8759' }, h("button", { key: '616ae769e76d647a3806daf33376ca88eb75da5d', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: 'ef0a6f7ed31c7c2b4eb0f74e3713c0cc99b79080', class: "button-container" }, this.iconName ? this.getIcon() : null, h("cura-label", { key: '0366f6538cc0ccf76c072de862fe60d87fccb937', class: "label", lineHeight: "0%", color: this.getLabelFontColor(), weight: 'regular' }, h("slot", { key: '72a72cc3a128223e7f41212005caff8aefbf1454' })), this.counter ? this.getCounter() : null))));
105
+ const labelSize = labelSizes[this.size] || labelSizes['default'];
106
+ return (h(Host, { key: '368f94693c0ce8ec2d95a9eb258fd6e411ade7a5' }, h("button", { key: 'ddc421e819342b29772d763b0a62f98a4aca37c0', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '70bb7a295f1fb8984aabc432edf6e8e3f464daf1', class: "button-container" }, this.iconName ? this.getIcon() : null, h("cura-label", { key: '281bbb73ff59a231f2daef9bac9a49b46f3c55df', class: "label", size: labelSize, lineHeight: "0%", color: this.getLabelFontColor(), weight: "regular" }, h("slot", { key: 'ef955647ac927fea6bb1dc686720031260fc5212' })), this.counter ? this.getCounter() : null))));
99
107
  }
100
108
  get host() { return getElement(this); }
101
109
  static get watchers() { return {
package/dist/esm/cura-button-select.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"cura-button-select.entry.js","mappings":"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","names":[],"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"],"version":3}
1
+ {"file":"cura-button-select.entry.js","mappings":"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","names":[],"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: 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","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';\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 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.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 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 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 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 </div>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rededor/cura",
3
- "version": "1.2.0-alpha.0",
3
+ "version": "1.2.0-rc.0",
4
4
  "description": "Cura Design System",
5
5
  "author": "Rede D`Or São Luiz",
6
6
  "license": "MIT",
@@ -51,5 +51,5 @@
51
51
  "storybook": "^7.6.7",
52
52
  "svgo": "^3.3.2"
53
53
  },
54
- "gitHead": "2bbdc349bb9ab92642e0fc91cac2863af0141602"
54
+ "gitHead": "f069c4b71678b922f9911afbfa0fbf2f10974b77"
55
55
  }
package/dist/cura/p-a2ae6bd2.entry.js DELETED
@@ -1,2 +0,0 @@
1
- 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};
2
- //# sourceMappingURL=p-a2ae6bd2.entry.js.map
package/dist/cura/p-a2ae6bd2.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"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":[]}