@rededor/cura 1.4.0-alpha.1 → 1.5.0-alpha.0

package/dist/cjs/cura-badge-number.cjs.entry.js

@@ -1,29 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e6d728ec.js');
-
-const curaBadgeNumberCss = ":host .container{display:flex;width:20px;height:20px;min-width:16px;justify-content:center;align-items:center;border-radius:500px;background:var(--background-color)}";
-const CuraBadgeNumberStyle0 = curaBadgeNumberCss;
-
-const CuraBadgeNumber = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.styles = {};
-        this.theme = window.CuraAPI.theme;
-        this.number = undefined;
-        this.color = undefined;
-    }
-    connectedCallback() {
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--background-color': this.theme.colors.getColor(this.color) });
-    }
-    render() {
-        return (index.h(index.Host, { key: 'a20934b4bec43ab7024e1bc4ad7537ff0d54b937' }, index.h("div", { key: 'a3fc8332932a117db4be61092050c3df3e4142bc', class: "container", style: this.styles }, index.h("cura-label", { key: 'ff53c0645348be0d392728778e3486c353243af5' }, index.h("slot", { key: 'f0774cc8f8ad07287b68bb3c59bf22cd4fc69755' }, this.number)))));
-    }
-};
-CuraBadgeNumber.style = CuraBadgeNumberStyle0;
-
-exports.cura_badge_number = CuraBadgeNumber;
-
-//# sourceMappingURL=cura-badge-number.cjs.entry.js.map

package/dist/cjs/cura-badge-number.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"cura-badge-number.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,uKAAuK,CAAC;AACnM,8BAAe,kBAAkB;;MCMpB,eAAe;;;QAI1B,WAAM,GAAG,EAAE,CAAC;QAEZ,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;;;;IAE7B,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAC7D,CAAA;KACF;IAGD,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACvCA,2EACEA,qEAAO,IAAI,CAAC,MAAM,CAAQ,CACf,CACT,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/badges/cura-badge-number/cura-badge-number.scss?tag=cura-badge-number&encapsulation=shadow","src/components/badges/cura-badge-number/cura-badge-number.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n\n:host {\n  .container {\n    display: flex;\n    width: 20px;\n    height: 20px;\n    min-width: 16px;\n    justify-content: center;\n    align-items: center;\n    border-radius: 500px;\n    background: var(--background-color);\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-number',\n  styleUrl: 'cura-badge-number.scss',\n  shadow: true,\n})\nexport class CuraBadgeNumber {\n\n  @Prop({ reflect: true }) number: number | null\n  @Prop({ reflect: true }) color: string\n  styles = {};\n\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--background-color': this.theme.colors.getColor(this.color),\n    }\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\" style={this.styles}>\n          <cura-label>\n            <slot>{this.number}</slot>\n          </cura-label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/cura-icon.definitions-8d714f6a.js.map

@@ -1 +0,0 @@
-{"file":"cura-icon.definitions-8d714f6a.js","mappings":";;MAAa,UAAU,GAAG,CAAC,WAAW,EAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAC,OAAO,EAAC,aAAa,EAAC,OAAO,EAAC,aAAa,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAC,MAAM,EAAC,YAAY,EAAC,YAAY,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAE;MAEtR,SAAS,GAAG;IACvB,KAAK,EAAE,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAC;IAChC,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;IAC7B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;IAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;IAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;IAC7B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;IAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAC;IAC3B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;IAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;IAC7B,OAAO,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;IACjC,SAAS,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAC;;;;;;","names":[],"sources":["src/components/cura-icon/cura-icon.definitions.tsx"],"sourcesContent":["export const microIcons = ['arrowDown','arrowLeft','arrowRight','arrowUp','check','checkDouble','close','closeCircle','collapse','down','expand','linkExternal','link','left','minus','minusCircle','minusSquare','order','subItem','right','plus','plusCircle','plusSquare','up','filter','swap'];\n\nexport const iconSizes = {\n  \"128\": {size: 128, stroke: 5.25},\n  \"72\": {size: 72, stroke: 3.5},\n  \"64\": {size: 64, stroke: 3.25},\n  \"48\": {size: 48, stroke: 2.75},\n  \"40\": {size: 40, stroke: 2.5},\n  \"32\": {size: 32, stroke: 2.25},\n  \"24\": {size: 24, stroke: 2},\n  \"20\": {size: 20, stroke: 1.75},\n  \"16\": {size: 16, stroke: 1.5},\n  \"micro\": {size: 12, stroke: 1.5 },\n  \"default\": {size: 24, stroke: 2}\n};\n"],"version":3}

package/dist/cjs/cura-modal.cjs.entry.js

@@ -1,50 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e6d728ec.js');
-
-const curaModalCss = ":host{display:block}.modal{position:fixed;height:100%;width:100%;top:0px;bottom:0px;z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:100}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn 0.3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}.backdrop{background-color:var(--background-color);z-index:90;animation:fadeIn 0.3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-white);border:2px solid var(--neutral-light);border-radius:calc(var(--base-spacing) * 3px);width:700px;max-width:600px;min-width:200px;padding:0px calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px);z-index:100;box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));transform:scale(0.95);transition:transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease}.wrapper ::slotted(*){max-height:80vh;overflow:auto;padding-right:calc(var(--base-spacing) * 5px)}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:calc(var(--base-spacing) * 4px);background:none;border:none;cursor:pointer}.close.mobile{display:none}.close.desktop{display:flex}@media (max-width: 768px){.wrapper{position:fixed;bottom:0px;width:80%;padding-top:calc(var(--base-spacing) * 4px);padding-bottom:0px;border-radius:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0px 0px;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:calc(var(--base-spacing) * 4px);padding:calc(var(--base-spacing) * 4px) 0px;justify-content:center;width:100%}.close.mobile{display:flex;gap:calc(var(--base-spacing) * 2px)}.close.desktop{display:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}";
-const CuraModalStyle0 = curaModalCss;
-
-const CuraModal = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.modalClose = index.createEvent(this, "modalClose", 7);
-        this.handleClose = () => {
-            this.modalClose.emit();
-            this.open = false;
-        };
-        this.open = false;
-        this.background = 'light';
-        this.topOffset = 0;
-        this.styles = {};
-    }
-    setColors() {
-        const backgroundTheme = {
-            dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),
-            light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),
-        };
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--background-color': backgroundTheme[this.background] });
-    }
-    setOffsetTop() {
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--offset-top': `${this.topOffset}px` });
-    }
-    connectedCallback() {
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'), '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'), '--base-spacing': window.CuraAPI.theme.spacing.getSpacing() });
-        this.setColors();
-        this.setOffsetTop();
-    }
-    render() {
-        return (index.h(index.Host, { key: '002525d3ad03f3271b11b0dacfd748ccfbfbaf1c', role: "dialog", "aria-modal": "true" }, index.h("div", { key: 'a684163919124acc33469b38cffeb6826dd2dd8d', class: this.open ? 'modal container open' : 'modal container', style: this.styles }, index.h("div", { key: 'bff07303351e5f7a75870b9c0f2b4a16736110bc', class: this.open ? 'modal backdrop open' : 'modal backdrop', onClick: this.handleClose }), index.h("div", { key: '4e8ac2fd00c10abf24060c644bbdcd6a5275bacb', class: "wrapper" }, index.h("button", { key: '6a0ab79a39181216882559f115107edf1c20a2c7', class: "close desktop", onClick: this.handleClose }, index.h("cura-icon", { key: '3be3e5ee04fc5caa8786efaac0e03c946d0bdd14', name: "close", color: "error-dark", size: "small" })), index.h("slot", { key: '90fbd8951a449d41e2409ba10445a61e296c45e5' }), index.h("button", { key: '3075523254d90f7f7f4ca75f28a5724b2402f7d5', class: "close mobile", onClick: this.handleClose }, index.h("cura-icon", { key: '9bfd171b87d0f1ff625b17f043ff90fa9dbad6e7', name: "close", color: "error-dark", size: "16" }), index.h("cura-paragraph", { key: 'c17191a5570c08400cfb1409fa1ebf3f0e03a270', color: "error-dark", size: "small", marginBlock: "0" }, "Fechar"))))));
-    }
-    static get watchers() { return {
-        "background": ["setColors"],
-        "topOffset": ["setOffsetTop"]
-    }; }
-};
-CuraModal.style = CuraModalStyle0;
-
-exports.cura_modal = CuraModal;
-
-//# sourceMappingURL=cura-modal.cjs.entry.js.map

package/dist/cjs/cura-modal.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"cura-modal.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,k6DAAk6D,CAAC;AACx7D,wBAAe,YAAY;;MCMd,SAAS;;;;QAuDZ,gBAAW,GAAG;YACpB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB,CAAC;oBArDuD,KAAK;0BAKtB,OAAO;yBAKlB,CAAC;sBAMZ,EAAE;;IAGpB,SAAS;QACP,MAAM,eAAe,GAAG;YACtB,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC;YAChE,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC;SACnE,CAAC;QAEF,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,GACvD,CAAC;KACH;IAGD,YAAY;QACV,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,GACtC,CAAC;KACH;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,GAC5D,CAAC;QACF,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAOD,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,QAAQ,gBAAY,MAAM,IACnCD,kEAAK,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,sBAAsB,GAAG,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IACpFA,kEAAK,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,qBAAqB,GAAG,gBAAgB,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAQ,EACnGA,kEAAK,KAAK,EAAC,SAAS,IAElBA,qEAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACrDA,wEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,GAAa,CAC7D,EACTA,oEAAa,EAEbA,qEAAQ,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACpDA,wEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAa,EACjEA,6EAAgB,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,GAAG,aAE9C,CACV,CACL,CACF,CACD,EACP;KACH;;;;;;;;;;","names":["h","Host"],"sources":["src/components/cura-modal/cura-modal.scss?tag=cura-modal&encapsulation=shadow","src/components/cura-modal/cura-modal.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/spacing.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/animations.scss';\n\n:host {\n  display: block;\n}\n\n.modal {\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  top: #{$spacing-none};\n  bottom: #{$spacing-none};\n  z-index: -1;\n  margin-top: var(--offset-top);\n\n  &.open {\n    z-index: 100;\n\n    .backdrop,\n    .wrapper {\n      opacity: 1;\n      visibility: visible;\n      animation: fadeIn 0.3s ease-out;\n    }\n  }\n}\n\n.container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.backdrop,\n.wrapper {\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\n.backdrop {\n  background-color: var(--background-color);\n  z-index: 90;\n  animation: fadeIn 0.3s ease-out;\n}\n\n.wrapper {\n  position: fixed;\n  background-color: var(--neutral-white);\n  border: 2px solid var(--neutral-light);\n  border-radius: #{$spacing-xxxs};\n  width: 700px;\n  max-width: 600px;\n  min-width: 200px;\n  padding: #{$spacing-none} #{$spacing-xxs} #{$spacing-xxs} #{$spacing-xxs};\n  z-index: 100;\n\n  @include shadow-level4();\n\n  transform: scale(0.95);\n  transition: transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease;\n\n  ::slotted(*) {\n    max-height: 80vh;\n    overflow: auto;\n    padding-right: #{$spacing-xs};\n  }\n}\n\n.modal.open .wrapper {\n  transform: scale(1);\n  opacity: 1;\n  visibility: visible;\n}\n\n.close {\n  justify-self: flex-end;\n  padding-top: #{$spacing-xxs};\n  background: none;\n  border: none;\n  cursor: pointer;\n\n  &.mobile {\n    display: none;\n  }\n\n  &.desktop {\n    display: flex;\n  }\n}\n\n@include mobile-only() {\n  .wrapper {\n    position: fixed;\n    bottom: #{$spacing-none};\n    width: 80%;\n    padding-top: #{$spacing-xxs};\n    padding-bottom: #{$spacing-none};\n    border-radius: #{$spacing-xxxs} #{$spacing-xxxs} #{$spacing-none} #{$spacing-none};\n    border-bottom: none;\n  }\n\n  .close {\n    align-items: center;\n    border-top: 1px dashed var(--neutral-light);\n    margin-top: #{$spacing-xxs};\n    padding: #{$spacing-xxs} #{$spacing-none};\n    justify-content: center;\n    width: 100%;\n\n    &.mobile {\n      display: flex;\n      gap: #{$spacing-mini};\n    }\n\n    &.desktop {\n      display: none;\n    }\n  }\n}\n\n@include fadeIn();\n@include fadeOut();\n","import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-modal',\n  styleUrl: 'cura-modal.scss',\n  shadow: true,\n})\nexport class CuraModal {\n  /**\n   * Property open to control modal visibility.\n   * Default: false\n   */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /**\n   * Property background to control modal backdrop color.\n   * Default: light\n   */\n  @Prop() background?: 'dark' | 'light' = 'light';\n  /**\n   * Property offsetTop to control modal top position.\n   * Default: 0px\n   */\n  @Prop() topOffset?: number = 0;\n  /**\n   * Event close to handle modal close.\n   */\n  @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n  @State() styles = {};\n\n  @Watch('background')\n  setColors() {\n    const backgroundTheme = {\n      dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n      light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n    };\n\n    this.styles = {\n      ...this.styles,\n      '--background-color': backgroundTheme[this.background],\n    };\n  }\n\n  @Watch('topOffset')\n  setOffsetTop() {\n    this.styles = {\n      ...this.styles,\n      '--offset-top': `${this.topOffset}px`,\n    };\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'),\n      '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n    this.setColors();\n    this.setOffsetTop();\n  }\n\n  private handleClose = () => {\n    this.modalClose.emit();\n    this.open = false;\n  };\n\n  render() {\n    return (\n      <Host role=\"dialog\" aria-modal=\"true\">\n        <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n          <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.handleClose}></div>\n          <div class=\"wrapper\">\n            {/* Desktop button */}\n            <button class=\"close desktop\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\n            </button>\n            <slot></slot>\n            {/* Mobile button */}\n            <button class=\"close mobile\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"16\"></cura-icon>\n              <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n                Fechar\n              </cura-paragraph>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/collection/components/badges/cura-badge-number/cura-badge-number.css

@@ -1,28 +0,0 @@
-/**
- * Global Spacing Definitions.
- * Required CSS Properties:
- * --base-spacing
- */
-/* None: 0px */
-/* Tiny default: 4px */
-/* Mini default: 8px */
-/* XXXS default: 12px */
-/* XXS default: 16px */
-/* XS default: 20px */
-/* S default: 20px */
-/* M default: 32px */
-/* L default: 40px */
-/* XL default: 48px */
-/* XXL default: 64px */
-/* XXXL default: 72px */
-/* Huge default: 96px */
-:host .container {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  min-width: 16px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 500px;
-  background: var(--background-color);
-}

package/dist/collection/components/badges/cura-badge-number/cura-badge-number.js

@@ -1,66 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class CuraBadgeNumber {
-    constructor() {
-        this.styles = {};
-        this.theme = window.CuraAPI.theme;
-        this.number = undefined;
-        this.color = undefined;
-    }
-    connectedCallback() {
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--background-color': this.theme.colors.getColor(this.color) });
-    }
-    render() {
-        return (h(Host, { key: 'a20934b4bec43ab7024e1bc4ad7537ff0d54b937' }, h("div", { key: 'a3fc8332932a117db4be61092050c3df3e4142bc', class: "container", style: this.styles }, h("cura-label", { key: 'ff53c0645348be0d392728778e3486c353243af5' }, h("slot", { key: 'f0774cc8f8ad07287b68bb3c59bf22cd4fc69755' }, this.number)))));
-    }
-    static get is() { return "cura-badge-number"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["cura-badge-number.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["cura-badge-number.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "number": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number | null",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "number",
-                "reflect": true
-            },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "color",
-                "reflect": true
-            }
-        };
-    }
-}
-//# sourceMappingURL=cura-badge-number.js.map

package/dist/collection/components/badges/cura-badge-number/cura-badge-number.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cura-badge-number.js","sourceRoot":"","sources":["../../../../src/components/badges/cura-badge-number/cura-badge-number.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,eAAe;;QAI1B,WAAM,GAAG,EAAE,CAAC;QAEZ,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;;;;IAE7B,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAC7D,CAAA;IACH,CAAC;IAGD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM;gBACvC;oBACE,+DAAO,IAAI,CAAC,MAAM,CAAQ,CACf,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-number',\n  styleUrl: 'cura-badge-number.scss',\n  shadow: true,\n})\nexport class CuraBadgeNumber {\n\n  @Prop({ reflect: true }) number: number | null\n  @Prop({ reflect: true }) color: string\n  styles = {};\n\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--background-color': this.theme.colors.getColor(this.color),\n    }\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\" style={this.styles}>\n          <cura-label>\n            <slot>{this.number}</slot>\n          </cura-label>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/badges/cura-badge-number/cura-badge-number.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cura-badge-number.stories.js","sourceRoot":"","sources":["../../../../src/components/badges/cura-badge-number/cura-badge-number.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAG3D,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE;IACxC,MAAM,KAAK,GAAG;WACP,IAAI,CAAC,KAAK;IACjB,IAAI,CAAC,MAAM;;GAEZ,CAAC;IACA,OAAO,GAAG,KAAK,EAAE,CAAC;AACtB,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;IACX,KAAK,EAAE,iCAAiC;IACxC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAW,EAAE,EAAE;YAAV,IAAI,cAAT,EAAW,CAAF;QACd,OAAO,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC;IACD,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;YACtC,KAAK,EAAE;gBACH,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;aAC/B;SACJ;QACD,KAAK,EAAE;YACH,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,MAAM,CAAC;YACxB,WAAW,EAAE,kEAAkE;YAC/E,KAAK,EAAE;gBACH,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aACvC;SACJ;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,IAAI,EAAE;QACF,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,SAAS;KACnB;CACJ,CAAC","sourcesContent":["import { getColorsWithDepths } from \"../../../utils/utils\";\n\n\nconst renderCuraBadgeNumber = (args: any) => {\n    const block = `<cura-badge-number\n  color=\"${args.color}\">\n  ${args.number}\n  </cura-badge-number>\n  `;\n    return `${block}`;\n};\n\nconst colors = getColorsWithDepths();\n\nexport default {\n    title: 'Componentes/Badges/Badge Number',\n    tags: ['autodocs'],\n    render: ({ ...args }) => {\n        return renderCuraBadgeNumber(args);\n    },\n    argTypes: {\n        number: {\n            control: 'number',\n            description: 'Número que será exibido',\n            table: {\n                category: 'Properties',\n                defaultValue: { summary: 1 },\n            },\n        },\n        color: {\n            control: { type: 'select' },\n            options: ['', ...colors],\n            description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n            table: {\n                category: 'Properties',\n                defaultValue: { summary: 'primary' },\n            },\n        },\n    },\n};\n\nexport const CuraBadgeNumber = {\n    args: {\n        number: 1,\n        color: 'primary',\n    },\n};\n"]}

package/dist/components/cura-badge-number.js

@@ -1,8 +0,0 @@
-import { C as CuraBadgeNumber$1, d as defineCustomElement$1 } from './cura-badge-number2.js';
-
-const CuraBadgeNumber = CuraBadgeNumber$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { CuraBadgeNumber, defineCustomElement };
-
-//# sourceMappingURL=cura-badge-number.js.map

package/dist/components/cura-badge-number.js.map

@@ -1 +0,0 @@
-{"file":"cura-badge-number.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/cura-badge-number2.js

@@ -1,49 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './cura-label2.js';
-
-const curaBadgeNumberCss = ":host .container{display:flex;width:20px;height:20px;min-width:16px;justify-content:center;align-items:center;border-radius:500px;background:var(--background-color)}";
-const CuraBadgeNumberStyle0 = curaBadgeNumberCss;
-
-const CuraBadgeNumber = /*@__PURE__*/ proxyCustomElement(class CuraBadgeNumber extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.styles = {};
-        this.theme = window.CuraAPI.theme;
-        this.number = undefined;
-        this.color = undefined;
-    }
-    connectedCallback() {
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--background-color': this.theme.colors.getColor(this.color) });
-    }
-    render() {
-        return (h(Host, { key: 'a20934b4bec43ab7024e1bc4ad7537ff0d54b937' }, h("div", { key: 'a3fc8332932a117db4be61092050c3df3e4142bc', class: "container", style: this.styles }, h("cura-label", { key: 'ff53c0645348be0d392728778e3486c353243af5' }, h("slot", { key: 'f0774cc8f8ad07287b68bb3c59bf22cd4fc69755' }, this.number)))));
-    }
-    static get style() { return CuraBadgeNumberStyle0; }
-}, [1, "cura-badge-number", {
-        "number": [514],
-        "color": [513]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["cura-badge-number", "cura-label"];
-    components.forEach(tagName => { switch (tagName) {
-        case "cura-badge-number":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CuraBadgeNumber);
-            }
-            break;
-        case "cura-label":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { CuraBadgeNumber as C, defineCustomElement as d };
-
-//# sourceMappingURL=cura-badge-number2.js.map

package/dist/components/cura-badge-number2.js.map

@@ -1 +0,0 @@
-{"file":"cura-badge-number2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,uKAAuK,CAAC;AACnM,8BAAe,kBAAkB;;MCMpB,eAAe;;;;;QAI1B,WAAM,GAAG,EAAE,CAAC;QAEZ,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;;;;IAE7B,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAC7D,CAAA;KACF;IAGD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACvC,qEACE,+DAAO,IAAI,CAAC,MAAM,CAAQ,CACf,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/badges/cura-badge-number/cura-badge-number.scss?tag=cura-badge-number&encapsulation=shadow","src/components/badges/cura-badge-number/cura-badge-number.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n\n:host {\n  .container {\n    display: flex;\n    width: 20px;\n    height: 20px;\n    min-width: 16px;\n    justify-content: center;\n    align-items: center;\n    border-radius: 500px;\n    background: var(--background-color);\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-number',\n  styleUrl: 'cura-badge-number.scss',\n  shadow: true,\n})\nexport class CuraBadgeNumber {\n\n  @Prop({ reflect: true }) number: number | null\n  @Prop({ reflect: true }) color: string\n  styles = {};\n\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--background-color': this.theme.colors.getColor(this.color),\n    }\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\" style={this.styles}>\n          <cura-label>\n            <slot>{this.number}</slot>\n          </cura-label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cura/p-0308cf6b.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as c,H as t}from"./p-fd5ed6b0.js";const s=":host .container{display:flex;width:20px;height:20px;min-width:16px;justify-content:center;align-items:center;border-radius:500px;background:var(--background-color)}";const a=s;const i=class{constructor(c){e(this,c);this.styles={};this.theme=window.CuraAPI.theme;this.number=undefined;this.color=undefined}connectedCallback(){this.styles=Object.assign(Object.assign({},this.styles),{"--background-color":this.theme.colors.getColor(this.color)})}render(){return c(t,{key:"a20934b4bec43ab7024e1bc4ad7537ff0d54b937"},c("div",{key:"a3fc8332932a117db4be61092050c3df3e4142bc",class:"container",style:this.styles},c("cura-label",{key:"ff53c0645348be0d392728778e3486c353243af5"},c("slot",{key:"f0774cc8f8ad07287b68bb3c59bf22cd4fc69755"},this.number))))}};i.style=a;export{i as cura_badge_number};
-//# sourceMappingURL=p-0308cf6b.entry.js.map

package/dist/cura/p-0308cf6b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaBadgeNumberCss","CuraBadgeNumberStyle0","CuraBadgeNumber","this","styles","theme","window","CuraAPI","connectedCallback","Object","assign","colors","getColor","color","render","h","Host","key","class","style","number"],"sources":["src/components/badges/cura-badge-number/cura-badge-number.scss?tag=cura-badge-number&encapsulation=shadow","src/components/badges/cura-badge-number/cura-badge-number.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n\n:host {\n  .container {\n    display: flex;\n    width: 20px;\n    height: 20px;\n    min-width: 16px;\n    justify-content: center;\n    align-items: center;\n    border-radius: 500px;\n    background: var(--background-color);\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-number',\n  styleUrl: 'cura-badge-number.scss',\n  shadow: true,\n})\nexport class CuraBadgeNumber {\n\n  @Prop({ reflect: true }) number: number | null\n  @Prop({ reflect: true }) color: string\n  styles = {};\n\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--background-color': this.theme.colors.getColor(this.color),\n    }\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\" style={this.styles}>\n          <cura-label>\n            <slot>{this.number}</slot>\n          </cura-label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAqB,wKAC3B,MAAAC,EAAeD,E,MCMFE,EAAe,M,yBAI1BC,KAAAC,OAAS,GAETD,KAAAE,MAAQC,OAAOC,QAAQF,M,2CAEvB,iBAAAG,GACEL,KAAKC,OAAMK,OAAAC,OAAAD,OAAAC,OAAA,GACNP,KAAKC,QAAM,CACd,qBAAsBD,KAAKE,MAAMM,OAAOC,SAAST,KAAKU,Q,CAK1D,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,YAAYC,MAAOhB,KAAKC,QACjCW,EAAA,cAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,4CAAOd,KAAKiB,U","ignoreList":[]}

package/dist/cura/p-3536c96b.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as r,h as a,H as e,g as o}from"./p-fd5ed6b0.js";const i=':host{position:absolute;z-index:99999;display:block;width:fit-content;height:fit-content;box-sizing:border-box}@media (max-width: 768px){:host{width:100%}}:host .container{display:flex;box-sizing:border-box;max-width:var(--max-width);height:auto;padding:calc(var(--base-spacing) * 2px);border:1px solid var(--neutral-light);border-radius:calc(var(--base-spacing) * 1px);background-color:var(--neutral-purewhite);box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16))}@media (max-width: 768px){:host .container{max-width:90%;height:fit-content;padding:calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) 0 calc(var(--base-spacing) * 4px);margin:0 auto;border:2px solid;border-radius:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0 0;border-color:var(--neutral-light) var(--neutral-light) transparent var(--neutral-light)}}:host .container::after{content:"";position:absolute;z-index:99999;width:calc(var(--base-spacing) * 2.5px);height:calc(var(--base-spacing) * 2.5px);border:1px solid;border-radius:2px;background-color:var(--neutral-purewhite);left:var(--arrow-left);top:var(--arrow-top);border-color:var(--arrow-border-color);transform:var(--arrow-translate) rotate(45deg)}@media (max-width: 768px){:host .container::after{display:none}}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:calc(var(--base-spacing) * 1px)}@media (max-width: 768px){:host .container .content{padding-bottom:calc(var(--base-spacing) * 4px);border-bottom:1px dashed var(--neutral-light)}}:host .container .close-icon{margin-left:calc(var(--base-spacing) * 3px);cursor:pointer}:host .container .close-button{padding:calc(var(--base-spacing) * 2px) 0}';const s=i;const n=768;const c=class{constructor(a){t(this,a);this.tooltipClosed=r(this,"tooltipClosed",7);this.styles={};this.handleClose=()=>{this.closeContainer()};this.elementId="";this.interactive=true;this.delay=250;this.maxWidth="280px";this.position="top";this.label=undefined;this.closeButton=false;this.isMobile=false}onWindowResize(){this.setPosition(this.targetElement)}onWindowScroll(){this.setPosition(this.targetElement)}connectedCallback(){this.setStyle()}render(){return a(e,{key:"732345360f527ffc69743818657643616b2ee611",role:"tooltip",id:this.elementId},a("div",{key:"166aa0dd54c933f8b3b8ecc5c5c76824ef180d71",class:"container",style:this.styles},a("div",{key:"7b54ec53f3b454979c45415ddcd164a71a9ab2b0",class:"content"},a("cura-heading",{key:"71bf328ed2f9e5d704e6d06989a4bef6d7c4993d",level:4,size:"xsmall",color:"neutral-black",weight:"bold","margin-block":"0"},this.label),a("cura-paragraph",{key:"a427a4b9df7bfae50300c9947db9df825a2f7da0",color:"neutral-dark","spot-color":"secondary-darker",size:"xsmall",marginBlock:"0",lineHeight:"133.33%"},a("slot",{key:"65875debf5bd3eec9f3070ab96cf644460897c3b"}))),this.closeButton&&!this.isMobile&&a("cura-icon",{key:"dac8229dc0f348b45ea3af9392c2001f638a0efb",class:"close-icon",name:"close",size:16,color:"error-dark",onClick:this.handleClose}),this.isMobile&&a("cura-button-transparent",{key:"6c90921145206d47ab84eaee972a08b9dcad7cf0",class:"close-button",size:"small",type:"button",color:"error","icon-name":"close","icon-position":"right",onClick:this.handleClose},"OK, entendi.")))}componentDidLoad(){this.targetElement=document.querySelector(`[aria-labelledby="${this.elementId}"]`);if(!this.interactive){this.host.style.visibility="visible"}else{this.host.style.visibility="hidden";let t=null;let r=null;this.targetElement.addEventListener("mouseenter",(()=>{clearTimeout(r);t=setTimeout((()=>{this.host.style.visibility="visible"}),typeof this.delay==="number"&&this.delay>250?this.delay:250)}));this.targetElement.addEventListener("mouseleave",(()=>{clearTimeout(t);r=setTimeout((()=>{this.handleClose()}),typeof this.delay==="number"&&this.delay>250?this.delay:250)}));this.host.addEventListener("mouseenter",(()=>{if(window.getComputedStyle(this.host).visibility==="visible"){clearTimeout(r)}}));this.host.addEventListener("mouseleave",(()=>{clearTimeout(t);this.handleClose()}));this.targetElement.addEventListener("click",(()=>{if(window.getComputedStyle(this.host).visibility==="hidden"){t=setTimeout((()=>{this.host.style.visibility="visible"}),typeof this.delay==="number"&&this.delay>250?this.delay:250)}else{clearTimeout(t);this.handleClose()}}));document.addEventListener("click",(r=>{if(!this.targetElement.contains(r.target)&&!this.host.contains(r.target)){clearTimeout(t);this.handleClose()}}))}setTimeout((()=>{this.setPosition(this.targetElement)}),100)}setStyle(){this.styles=Object.assign(Object.assign({},this.styles),{"--max-width":this.maxWidth,"--base-spacing":window.CuraAPI.theme.spacing.getSpacing(),"--neutral-purewhite":window.CuraAPI.theme.colors.getColor(`neutral-purewhite`),"--neutral-light":window.CuraAPI.theme.colors.getColor(`neutral-light`),"--neutral-black-shadow":window.CuraAPI.theme.colors.getColor(`neutral-black`,.16)})}getClasses(){const[t,r]=this.position.split("-");const a={};a["container"]=true;if(t){a[t]=true}if(r){a[r]=true}return a}setPosition(t){const r=window.innerWidth;const a=window.innerHeight;const e=this.host.shadowRoot.querySelector(".container");this.isMobile=r<=n;this.host.style.position=this.isMobile?"fixed":"absolute";this.host.style.bottom=this.isMobile?"0":"unset";e.style.flexDirection=this.isMobile?"column":"row";if(this.isMobile){this.host.style.left="unset";this.host.style.top="unset";return}const o={top:t.offsetTop,left:t.offsetLeft,width:t.offsetWidth,height:t.offsetHeight};const i=this.host.getBoundingClientRect();const s=10;const c=10;const l=o.width*.5+18;const h=o.height*.5+18;const d=this.styles["--neutral-light"];let p=0;let b=0;const f=Object.keys(this.getClasses()).filter((t=>["top","left","bottom","right","start","end"].includes(t)));const u=({arrowTop:t="",arrowLeft:r="",translate:a="",borderColor:e=""})=>{if(r)this.host.style.setProperty("--arrow-left",r);if(t)this.host.style.setProperty("--arrow-top",t);if(a)this.host.style.setProperty("--arrow-translate",a);if(e)this.host.style.setProperty("--arrow-border-color",e)};if(f.includes("top")||f.includes("bottom")){u({arrowLeft:"50%",translate:"translateX(-50%)"});if(f.includes("top")){b=o.top-i.height-c;u({arrowTop:"calc(100% - 6px)",borderColor:`transparent ${d} ${d} transparent`});if(b<s){b=o.top+o.height+c;u({arrowTop:"-6px",borderColor:`${d} transparent transparent ${d}`})}}if(f.includes("bottom")){b=o.top+o.height+c;u({arrowTop:"-6px",borderColor:`${d} transparent transparent ${d}`});if(b+i.height>a-s){b=o.top-i.height-c;u({arrowTop:"calc(100% - 6px)",borderColor:`transparent ${d} ${d} transparent`})}}p=o.left+(o.width-i.width)/2;if(f.includes("start")){p=o.left-i.width+l;u({arrowLeft:"calc(100% - 18px)"});if(p<s){p=o.left+o.width-l;u({arrowLeft:"18px"})}}if(f.includes("end")){p=o.left+o.width-l;u({arrowLeft:"18px"});if(p+i.width>r-s){p=o.left-i.width+l;u({arrowLeft:"calc(100% - 18px)"})}}}if(f.includes("right")||f.includes("left")){u({arrowTop:"50%",translate:"translateY(-50%)"});if(f.includes("right")){p=o.left+o.width+c;u({arrowLeft:"-6px",borderColor:`transparent transparent ${d} ${d}`});if(p+i.width>r-s){p=o.left-i.width-c;u({arrowLeft:"calc(100% - 6px)",borderColor:`${d} ${d} transparent transparent`})}}if(f.includes("left")){p=o.left-i.width-c;u({arrowLeft:"calc(100% - 6px)",borderColor:`${d} ${d} transparent transparent`});if(p<s){p=o.left+o.width+c;u({arrowLeft:"-6px",borderColor:`transparent transparent ${d} ${d}`})}}b=o.top+(o.height-i.height)/2;if(f.includes("start")){b=o.top-i.height+h;u({arrowTop:"calc(100% - 18px)"});if(b<s){b=o.top+o.height-h;u({arrowTop:"18px"})}}if(f.includes("end")){b=o.top+o.height-h;u({arrowTop:"18px"});if(b+i.height>a-s){b=o.top-i.height+h;u({arrowTop:"calc(100% - 18px)"})}}}this.host.style.left=`${p}px`;this.host.style.top=`${b}px`}closeContainer(){this.host.style.visibility="hidden";this.tooltipClosed.emit()}get host(){return o(this)}};c.style=s;export{c as cura_tooltip};
-//# sourceMappingURL=p-3536c96b.entry.js.map

package/dist/cura/p-3536c96b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaTooltipCss","CuraTooltipStyle0","BREAKPOINT_SMALL_MAX","CuraTooltip","this","styles","handleClose","closeContainer","onWindowResize","setPosition","targetElement","onWindowScroll","connectedCallback","setStyle","render","h","Host","key","role","id","elementId","class","style","level","size","color","weight","label","marginBlock","lineHeight","closeButton","isMobile","name","onClick","type","componentDidLoad","document","querySelector","interactive","host","visibility","openTimeoutID","closeTimeoutID","addEventListener","clearTimeout","setTimeout","delay","window","getComputedStyle","event","contains","target","Object","assign","maxWidth","CuraAPI","theme","spacing","getSpacing","colors","getColor","getClasses","firstPosition","secondPosition","position","split","classes","element","windowWidth","innerWidth","windowHeight","innerHeight","container","shadowRoot","bottom","flexDirection","left","top","elementRect","offsetTop","offsetLeft","width","offsetWidth","height","offsetHeight","tooltipRect","getBoundingClientRect","SCREEN_LIMIT","SPACE_TO_ELEMENT","ARROW_HORIZONTAL_ADJUSTMENT","ARROW_VERTICAL_ADJUSTMENT","BORDER_COLOR","positions","keys","filter","p","includes","setArrowProperties","arrowTop","arrowLeft","translate","borderColor","setProperty","tooltipClosed","emit"],"sources":["src/components/cura-tooltip/cura-tooltip.scss?tag=cura-tooltip&encapsulation=shadow","src/components/cura-tooltip/cura-tooltip.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n@import '../../../src/scss/mixins/spacing.scss';\n\n:host {\n  position: absolute;\n  z-index: 99999;\n  display: block;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: border-box;\n\n  @include mobile-only() {\n    width: 100%;\n  }\n\n  .container {\n    display: flex;\n    box-sizing: border-box;\n    max-width: var(--max-width);\n    height: auto;\n    padding: calc(#{$base-spacing} * 2px);\n    border: 1px solid var(--neutral-light);\n    border-radius: calc(#{$base-spacing} * 1px);\n    background-color: var(--neutral-purewhite);\n    @include shadow-level3(--neutral-black-shadow);\n\n    @include mobile-only() {\n      max-width: 90%;\n      height: fit-content;\n      padding: calc(#{$base-spacing} * 4px) calc(#{$base-spacing} * 4px) 0 calc(#{$base-spacing} * 4px);\n      margin: 0 auto;\n      border: 2px solid;\n      border-radius: calc(#{$base-spacing} * 3px) calc(#{$base-spacing} * 3px) 0 0;\n      border-color: var(--neutral-light) var(--neutral-light) transparent var(--neutral-light);\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      z-index: 99999;\n      width: calc(#{$base-spacing} * 2.5px);\n      height: calc(#{$base-spacing} * 2.5px);\n      border: 1px solid;\n      border-radius: 2px;\n      background-color: var(--neutral-purewhite);\n      \n      left: var(--arrow-left);\n      top: var(--arrow-top);\n      border-color: var(--arrow-border-color);\n      transform: var(--arrow-translate) rotate(45deg);\n\n      @include mobile-only() {\n        display: none;\n      }\n    }\n\n    .content {\n      flex: 1 1 0;\n      display: flex;\n      flex-direction: column;\n      gap: calc(#{$base-spacing} * 1px);\n\n      @include mobile-only() {\n        padding-bottom: calc(#{$base-spacing} * 4px);\n        border-bottom: 1px dashed var(--neutral-light);\n      }\n    }\n\n    .close-icon {\n      margin-left: calc(#{$base-spacing} * 3px);\n      cursor: pointer;\n    }\n\n    .close-button {\n      padding: calc(#{$base-spacing} * 2px) 0;\n    }\n  }\n}","import { Component, Element, EventEmitter, Host, Prop, State, h, Event, Listen } from '@stencil/core';\n\nconst BREAKPOINT_SMALL_MAX = 768;\n\n@Component({\n  tag: 'cura-tooltip',\n  styleUrl: 'cura-tooltip.scss',\n  shadow: true,\n})\nexport class CuraTooltip {\n  @Element() host: HTMLElement;\n\n  @Prop() elementId = '';\n  @Prop() interactive = true;\n  @Prop() delay = 250;\n  @Prop() maxWidth = '280px';\n  @Prop({ reflect: true }) position: 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' = 'top';\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeButton = false;\n\n  @State() isMobile = false;\n\n  @Event({ eventName: 'tooltipClosed' }) tooltipClosed: EventEmitter<void>;\n\n  targetElement: HTMLElement;\n\n  styles = {};\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.setPosition(this.targetElement);\n  }\n\n  @Listen('scroll', { target: 'window' })\n  onWindowScroll() {\n    this.setPosition(this.targetElement);\n  }\n\n  connectedCallback() {\n    this.setStyle();\n  }\n\n  render() {\n    return (\n      <Host role=\"tooltip\" id={this.elementId}>\n        <div class=\"container\" style={this.styles}>\n          <div class=\"content\">\n            <cura-heading level={4} size=\"xsmall\" color=\"neutral-black\" weight=\"bold\" margin-block=\"0\">\n              {this.label}\n            </cura-heading>\n            <cura-paragraph color=\"neutral-dark\" spot-color=\"secondary-darker\" size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n          </div>\n        {this.closeButton && !this.isMobile && <cura-icon class=\"close-icon\" name=\"close\" size={16} color=\"error-dark\" onClick={this.handleClose}></cura-icon>}\n        {this.isMobile && <cura-button-transparent class=\"close-button\" size=\"small\" type=\"button\" color=\"error\" icon-name=\"close\" icon-position=\"right\" onClick={this.handleClose}>OK, entendi.</cura-button-transparent>}\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    this.targetElement = document.querySelector(`[aria-labelledby=\"${this.elementId}\"]`) as HTMLElement;\n\n    if (!this.interactive) {\n      this.host.style.visibility = 'visible';\n    } else {\n      this.host.style.visibility = 'hidden';\n\n      let openTimeoutID = null;\n      let closeTimeoutID = null;\n\n      this.targetElement.addEventListener('mouseenter', () => {\n        clearTimeout(closeTimeoutID);\n        openTimeoutID = setTimeout(() => {\n          this.host.style.visibility = 'visible';\n        }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n      });\n  \n      this.targetElement.addEventListener('mouseleave', () => {\n        clearTimeout(openTimeoutID);\n        closeTimeoutID = setTimeout(() => {\n          this.handleClose();\n        }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n      });\n\n      this.host.addEventListener('mouseenter', () => {\n        if (window.getComputedStyle(this.host).visibility === 'visible') {\n          clearTimeout(closeTimeoutID);\n        }\n      });\n\n      this.host.addEventListener('mouseleave', () => {\n        clearTimeout(openTimeoutID);\n        this.handleClose();\n      });\n\n      this.targetElement.addEventListener('click', () => {\n        if (window.getComputedStyle(this.host).visibility === 'hidden') {\n          openTimeoutID = setTimeout(() => {\n            this.host.style.visibility = 'visible';\n          }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n        } else {\n        clearTimeout(openTimeoutID);\n          this.handleClose();\n        }\n      });\n  \n      document.addEventListener('click', (event: MouseEvent) => {\n        if(!this.targetElement.contains(event.target as HTMLElement) && !this.host.contains(event.target as HTMLElement)) {\n          clearTimeout(openTimeoutID);\n          this.handleClose();\n        }\n      });\n    }\n\n    setTimeout(() => {\n      this.setPosition(this.targetElement);\n    }, 100);\n  }\n\n  setStyle() {\n    this.styles = {\n      ...this.styles,\n      '--max-width': this.maxWidth,\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`),\n      '--neutral-light': window.CuraAPI.theme.colors.getColor(`neutral-light`),\n      '--neutral-black-shadow': window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16),\n    }\n  }\n\n  getClasses() {\n    const [firstPosition, secondPosition] = this.position.split('-');\n    const classes = {};\n\n    classes['container'] = true;\n    if (firstPosition) { classes[firstPosition] = true; }\n    if (secondPosition) { classes[secondPosition] = true; }\n\n    return classes;\n  }\n\n  setPosition(element: HTMLElement) {\n    const windowWidth = window.innerWidth;\n    const windowHeight = window.innerHeight;\n    const container = this.host.shadowRoot.querySelector('.container') as HTMLElement;\n\n    this.isMobile = windowWidth <= BREAKPOINT_SMALL_MAX;\n\n    this.host.style.position = this.isMobile ? 'fixed' : 'absolute';\n    this.host.style.bottom = this.isMobile ? '0' : 'unset';\n    container.style.flexDirection = this.isMobile ? 'column' : 'row';\n\n    if (this.isMobile) {\n      this.host.style.left = 'unset';\n      this.host.style.top = 'unset';\n      return;\n    }\n\n    const elementRect = { \n      top: element.offsetTop, \n      left: element.offsetLeft, \n      width: element.offsetWidth, \n      height: element.offsetHeight\n    };\n    const tooltipRect = this.host.getBoundingClientRect();\n\n    const SCREEN_LIMIT = 10;\n    const SPACE_TO_ELEMENT = 10;\n    const ARROW_HORIZONTAL_ADJUSTMENT = (elementRect.width * 0.5) + 18;\n    const ARROW_VERTICAL_ADJUSTMENT = (elementRect.height * 0.5) + 18;\n    const BORDER_COLOR = this.styles['--neutral-light'];\n\n    let left = 0;\n    let top = 0;\n\n    const positions = Object.keys(this.getClasses()).filter((p) => ['top', 'left', 'bottom', 'right', 'start', 'end'].includes(p));\n\n    const setArrowProperties = ({ arrowTop = '', arrowLeft = '', translate = '', borderColor = '' }) => {\n      if (arrowLeft) this.host.style.setProperty('--arrow-left', arrowLeft);\n      if (arrowTop) this.host.style.setProperty('--arrow-top', arrowTop);\n      if (translate) this.host.style.setProperty('--arrow-translate', translate);\n      if (borderColor) this.host.style.setProperty('--arrow-border-color', borderColor);\n    };\n\n    //Posicionamento vertical\n    if (positions.includes('top') || positions.includes('bottom')) {\n      setArrowProperties({ arrowLeft: '50%', translate: 'translateX(-50%)' });\n\n      if (positions.includes('top')) {\n        top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });\n\n        if (top < SCREEN_LIMIT) {\n          top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });\n        }\n      }\n\n      if (positions.includes('bottom')) {\n        top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });\n\n        if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {\n          top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });\n        }\n      }\n\n      left = elementRect.left + (elementRect.width - tooltipRect.width)/2;\n      \n      if (positions.includes('start')) {\n        left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;\n        setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });\n\n        if (left < SCREEN_LIMIT) {\n          left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;\n          setArrowProperties({ arrowLeft: '18px' });\n        }\n      }\n\n      if (positions.includes('end')) {\n        left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;\n        setArrowProperties({ arrowLeft: '18px' });\n\n        if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {\n          left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;\n          setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });\n        }\n      }\n    }\n\n    //Posicionamento horizontal\n    if (positions.includes('right') || positions.includes('left')) {\n      setArrowProperties({ arrowTop: '50%', translate: 'translateY(-50%)' });\n\n      if (positions.includes('right')) {\n        left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });\n\n        if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {\n          left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });\n        }\n      }\n\n      if (positions.includes('left')) {\n        left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });\n        \n        if (left < SCREEN_LIMIT) {\n          left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });\n        }\n      }\n      \n      top = elementRect.top + (elementRect.height - tooltipRect.height)/2;\n\n      if (positions.includes('start')) {\n        top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;\n        setArrowProperties({ arrowTop: 'calc(100% - 18px)' });\n\n        if (top < SCREEN_LIMIT) {\n          top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;\n          setArrowProperties({ arrowTop: '18px' });\n        }\n      }\n\n      if (positions.includes('end')) {\n        top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;\n        setArrowProperties({ arrowTop: '18px' });\n\n        if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {\n          top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;\n          setArrowProperties({ arrowTop: 'calc(100% - 18px)' });\n        }\n      }\n    }\n\n    this.host.style.left = `${left}px`;\n    this.host.style.top = `${top}px`;\n  }\n\n  closeContainer() {\n    this.host.style.visibility = 'hidden';\n    this.tooltipClosed.emit();\n  }\n\n  handleClose = () => {\n    this.closeContainer();\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cura/p-5bb8302c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaButtonSelectCss","CuraButtonSelectStyle0","CuraButtonSelect","this","theme","window","CuraAPI","setColors","colors","name","thema","background","color","disabled","forEach","styles","getColor","Object","assign","getClasses","classes","_a","size","toLowerCase","iconPosition","selected","connectedCallback","weights","fonts","getWeights","spacing","getSpacing","getSize","getFamily","medium","getLabelFontColor","getColorCounter","getColorBagdeNumber","getIcon","iconSize","h","iconName","getCounter","class","counter","getCheckIconRight","handleMouseEnter","hovered","handleMouseLeave","handleClick","e","preventDefault","onclick","emit","render","labelSize","labelSizes","Host","key","style","onClick","onMouseEnter","onMouseLeave","lineHeight","weight"],"sources":["src/components/buttons/cura-button-select/cura-button-select.scss?tag=cura-button-select&encapsulation=shadow","src/components/buttons/cura-button-select/cura-button-select.tsx"],"sourcesContent":["@import '../../../scss/mixins/buttons.scss';\n\n:host {\n  @include button-host();\n\n  button,\n  a {\n    @include button-element() {\n      background-color: var(--neutral-purewhite);\n      box-sizing: border-box;\n      border: none;\n\n      &::before {\n        content: '';\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        box-sizing: border-box;\n        border: 2px solid var(--color-border);\n        border-radius: var(--border-radius);\n      }\n\n      &:not(.disabled):hover {\n        background-color: var(--color-background-hover);\n        border-color: var(--color-border-hover-pressed);\n      }\n\n      &:focus {\n        border-color: var(--color-border) !important;\n      }\n    }\n\n    @include button-sizes();\n\n    @include button-label();\n\n    // Children Elements\n    @include button-container() {\n      flex-direction: row !important;\n\n      .badge-number {\n        margin-left: 10px;\n      }\n    }\n\n    @include button-icon();\n\n    // selected state\n    @include button-selected() {\n      background-color: var(--color-select);\n      border-color: var(--color-select);\n\n      &:not(.disabled):hover {\n        background-color: var(--color-border-hover-pressed);\n        border-color: var(--color-border-hover-pressed);\n      }\n\n      &:focus {\n        border-color: var(--color-select-focus) !important;\n      }\n\n      &.disabled {\n        background-color: var(--color-disable-select);\n        border-color: var(--color-disable-select);\n      }\n    }\n\n    // Disabled state\n    @include button-disabled() {\n      background-color: var(--neutral-white-primary-darker);\n      border-color: var(--color-border-disable-unselect);\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button-select',\n  styleUrl: 'cura-button-select.scss',\n  shadow: true,\n})\nexport class CuraButtonSelect {\n  @Element() host: HTMLElement;\n\n  @Prop({ reflect: true, mutable: true }) selected = false;\n  @Prop({ reflect: true, mutable: true }) iconName: string;\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  @Prop({ reflect: true, mutable: true }) counter: string | number | null;\n  @Prop({ reflect: true }) disabled: boolean;\n  @Prop() background: 'dark' | 'light' = 'light';\n  @Prop() color: string = 'primary';\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right';\n\n  @State() hovered = false;\n  @State() styles = {};\n\n  @Event({ eventName: 'onclick' }) onclick: EventEmitter<{ selected: boolean }>;\n\n  theme = window.CuraAPI.theme;\n\n  weights;\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-border', thema: this.background === 'light' ? `${this.color}-darker` : 'neutral-white' },\n      { name: '--color-border-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-light` },\n      { name: '--color-background-hover', thema: this.background === 'light' ? `${this.color}-light` : `${this.color}-dark` },\n      { name: '--color-select', thema: this.background === 'light' ? `${this.color}-base` : 'neutral-white' },\n      { name: '--color-select-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-lighter` },\n      { name: '--color-select-focus', thema: this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter` },\n      { name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },\n      { name: '--color-border-disable-unselect', thema: 'neutral-dark' },\n      { name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },\n      { name: '--color-counter', thema: !this.disabled && 'primary-lighter' },\n    ];\n\n    colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));\n    this.styles = { ...this.styles };\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size?.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['disabled'] = this.disabled;\n    classes['selected'] = this.selected;\n    return classes;\n  }\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.setColors();\n  }\n\n  getLabelFontColor() {\n    if (this.disabled) return 'neutral-dark';\n\n    if (this.background === 'dark') {\n      return this.selected ? 'neutral-black' : 'neutral-white';\n    }\n    if (this.background === 'light') {\n      return this.selected ? 'neutral-white' : 'neutral-black';\n    }\n  }\n\n  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' ? 20 : 16;\n    if (this.iconPosition === 'right') {\n      return;\n    }\n\n    return <cura-icon name={this.iconName} size={iconSize} color={this.getLabelFontColor()} />;\n  }\n\n  getCounter() {\n    return (\n      <cura-badge-number color={this.getColorCounter()} class=\"badge-number\">\n        <cura-label color={this.getColorBagdeNumber()} size=\"small\">\n          {this.counter}\n        </cura-label>\n      </cura-badge-number>\n    );\n  }\n\n  getCheckIconRight() {\n    const iconSize = this.size === 'large' ? 20 : 16;\n    return <cura-icon name=\"check\" size={iconSize} color={this.getLabelFontColor()}></cura-icon>;\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled) e.preventDefault();\n    this.selected = !this.selected;\n    this.onclick.emit({ selected: this.selected });\n  }\n\n  render() {\n    const labelSize = labelSizes[this.size] || labelSizes['default'];\n    return (\n      <Host>\n        <button\n          class={this.getClasses()}\n          style={this.styles}\n          disabled={this.disabled}\n          onClick={e => this.handleClick(e)}\n          onMouseEnter={() => this.handleMouseEnter()}\n          onMouseLeave={() => this.handleMouseLeave()}\n        >\n          <div class=\"button-container\">\n            {this.iconName ? this.getIcon() : null}\n            <cura-label class=\"label\" size={labelSize} lineHeight=\"0%\" color={this.getLabelFontColor()} weight=\"regular\">\n              <slot></slot>\n            </cura-label>\n            {this.counter ? this.getCounter() : null}\n            {this.iconPosition === 'right' && this.selected ? this.getCheckIconRight() : null}\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}