@rededor/cura 0.3.4-alpha.1 → 0.3.4

package/dist/collection/api/theme-presets/theme-oncology.js

@@ -7,11 +7,11 @@ export const ThemeOncology = Object.assign(Object.assign({}, ThemeDefault), {
   /* Colors */
   color: {
     primary: {
-      '100': '#99CFFF',
-      '300': '#47A9FF',
-      '500': '#0083F5',
-      '700': '#006DCC',
-      '900': '#0058A4',
+      '100': '#AABEE1',
+      '300': '#557EC4',
+      '500': '#003DA6',
+      '700': '#00296F',
+      '900': '#000C21'
     },
     secondary: {
       '100': '#CDD7E3',
@@ -20,19 +20,34 @@ export const ThemeOncology = Object.assign(Object.assign({}, ThemeDefault), {
       '700': '#365E8F',
       '900': '#043673',
     },
-    aux1: {
-      '100': '#AABEE1',
-      '300': '#557EC4',
-      '500': '#003DA6',
-      '700': '#00296F',
-      '900': '#000C21',
+    accent: {
+      '100': '#99CFFF',
+      '300': '#47A9FF',
+      '500': '#0083F5',
+      '700': '#006DCC',
+      '900': '#0058A4',
     },
-    aux2: {
+    aux: {
       '100': '#DAF2EF',
       '300': '#84D4CA',
       '500': '#47BFB0',
       '700': '#2F7F75',
       '900': '#0E2623',
     },
+  }, font: {
+    size: '14px',
+    color: '#4A4A4A',
+    body: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
+    heading: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
+    display: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
+    weights: {
+      thin: 100,
+      light: 300,
+      regular: 400,
+      medium: 500,
+      bold: 700,
+      black: 900
+    },
   }
 });
+//# sourceMappingURL=theme-oncology.js.map

package/dist/collection/api/theme-presets/theme-oncology.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-oncology.js","sourceRoot":"","sources":["../../../src/api/theme-presets/theme-oncology.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,CAAC,MAAM,aAAa,mCAErB,YAAY;EAEf,YAAY;EACZ,YAAY;EACZ,KAAK,EAAE;IACL,OAAO,EAAE;MACP,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;KACjB;IACD,SAAS,EAAE;MACT,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;KACjB;IACD,MAAM,EAAE;MACN,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;KACjB;IACD,GAAG,EAAE;MACH,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;KACjB;GACF,EACD,IAAI,EAAE;IACJ,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,gDAAgD;IACtD,OAAO,EAAE,gDAAgD;IACzD,OAAO,EAAE,gDAAgD;IACzD,OAAO,EAAE;MACP,IAAI,EAAE,GAAG;MACT,KAAK,EAAE,GAAG;MACV,OAAO,EAAE,GAAG;MACZ,MAAM,EAAE,GAAG;MACX,IAAI,EAAE,GAAG;MACT,KAAK,EAAE,GAAG;KACX;GACF,GACF,CAAC","sourcesContent":["/**\n * Oncology Theme\n */\nimport { ThemeDefault } from \"./theme-default\";\n\nexport const ThemeOncology = {\n  /* Get default theme */\n  ...ThemeDefault,\n\n  /* Custom */\n  /* Colors */\n  color: {\n    primary: {\n      '100': '#AABEE1',\n      '300': '#557EC4',\n      '500': '#003DA6',\n      '700': '#00296F',\n      '900': '#000C21'\n    },\n    secondary: {\n      '100': '#CDD7E3',\n      '300': '#9BAFC7',\n      '500': '#6886AB',\n      '700': '#365E8F',\n      '900': '#043673',\n    },\n    accent: {\n      '100': '#99CFFF',\n      '300': '#47A9FF',\n      '500': '#0083F5',\n      '700': '#006DCC',\n      '900': '#0058A4',\n    },\n    aux: {\n      '100': '#DAF2EF',\n      '300': '#84D4CA',\n      '500': '#47BFB0',\n      '700': '#2F7F75',\n      '900': '#0E2623',\n    },\n  },\n  font: {\n    size: '14px',\n    color: '#4A4A4A',\n    body: \"'Hanken Grotesk', Arial, Helvetica, sans-serif\",\n    heading: \"'Hanken Grotesk', Arial, Helvetica, sans-serif\",\n    display: \"'Hanken Grotesk', Arial, Helvetica, sans-serif\",\n    weights: {\n      thin: 100,\n      light: 300,\n      regular: 400,\n      medium: 500,\n      bold: 700,\n      black: 900\n    },\n  }\n};\n"]}

package/dist/collection/api/theme-presets/theme-presets.js

@@ -6,3 +6,4 @@ export const ThemePresets = {
   'maternidade': ThemeMaternity,
   'oncologia': ThemeOncology,
 };
+//# sourceMappingURL=theme-presets.js.map

package/dist/collection/api/theme-presets/theme-presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-presets.js","sourceRoot":"","sources":["../../../src/api/theme-presets/theme-presets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,CAAC,MAAM,YAAY,GAAG;EAC1B,SAAS,EAAE,YAAY;EACvB,aAAa,EAAE,cAAc;EAC7B,WAAW,EAAE,aAAa;CAC3B,CAAC","sourcesContent":["import { ThemeDefault } from './theme-default';\nimport { ThemeMaternity } from './theme-maternity';\nimport { ThemeOncology } from './theme-oncology';\n\nexport const ThemePresets = {\n  'default': ThemeDefault,\n  'maternidade': ThemeMaternity,\n  'oncologia': ThemeOncology,\n};\n"]}

package/dist/collection/assets/icons/iconset-default-list.js

@@ -1 +1,2 @@
 export default ["360", "accessibility", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "delete", "desktop", "deslike", "download", "duplicate", "edit", "exam", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "google", "hate", "healthPlan", "height", "height2", "home", "horizontalList", "imageUp", "info2", "infoCircle", "instagram", "key", "language", "language2", "languageEN", "languagePT", "lattes", "like", "likeHand", "link", "linkExternal", "linkedin", "list", "login", "logout", "love", "mail", "mail2", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "neutral", "news", "notification", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profile2", "pulldownG", "pulldownP", "pullupG", "pullupP", "questionCircle", "questionSquare", "range", "reload", "schedule", "search", "secure", "share", "share2", "sound", "soundOff", "subItem", "target", "team", "twitter", "unLink", "unSecure", "unlikeHand", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "youtube", "zoomIn", "zoomOut"];
+//# sourceMappingURL=iconset-default-list.js.map

package/dist/collection/assets/icons/iconset-default-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconset-default-list.js","sourceRoot":"","sources":["../../../src/assets/icons/iconset-default-list.ts"],"names":[],"mappings":"AAAA,eAAe,CAAC,KAAK,EAAC,eAAe,EAAC,aAAa,EAAC,eAAe,EAAC,WAAW,EAAC,iBAAiB,EAAC,WAAW,EAAC,iBAAiB,EAAC,YAAY,EAAC,kBAAkB,EAAC,SAAS,EAAC,eAAe,EAAC,QAAQ,EAAC,SAAS,EAAC,SAAS,EAAC,UAAU,EAAC,YAAY,EAAC,UAAU,EAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,YAAY,EAAC,OAAO,EAAC,YAAY,EAAC,aAAa,EAAC,aAAa,EAAC,OAAO,EAAC,OAAO,EAAC,aAAa,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAC,SAAS,EAAC,SAAS,EAAC,UAAU,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAC,YAAY,EAAC,SAAS,EAAC,QAAQ,EAAC,YAAY,EAAC,SAAS,EAAC,QAAQ,EAAC,QAAQ,EAAC,MAAM,EAAC,YAAY,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAC,gBAAgB,EAAC,SAAS,EAAC,OAAO,EAAC,YAAY,EAAC,WAAW,EAAC,KAAK,EAAC,UAAU,EAAC,WAAW,EAAC,YAAY,EAAC,YAAY,EAAC,QAAQ,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,cAAc,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,gBAAgB,EAAC,WAAW,EAAC,eAAe,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,aAAa,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAC,YAAY,EAAC,YAAY,EAAC,OAAO,EAAC,SAAS,EAAC,UAAU,EAAC,WAAW,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,gBAAgB,EAAC,gBAAgB,EAAC,OAAO,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,EAAC,SAAS,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAC,QAAQ,EAAC,UAAU,EAAC,YAAY,EAAC,QAAQ,EAAC,cAAc,EAAC,WAAW,EAAC,UAAU,EAAC,QAAQ,EAAC,UAAU,EAAC,MAAM,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,CAAC,CAAC","sourcesContent":["export default [\"360\",\"accessibility\",\"alertCircle\",\"alertTriangle\",\"arrowDown\",\"arrowDownCircle\",\"arrowLeft\",\"arrowLeftCircle\",\"arrowRight\",\"arrowRightCircle\",\"arrowUp\",\"arrowUpCircle\",\"attach\",\"avatarF\",\"avatarM\",\"biometry\",\"bloodGroup\",\"calendar\",\"cam\",\"camOff\",\"central\",\"chatCircle\",\"check\",\"checkBadge\",\"checkCircle\",\"checkDouble\",\"clock\",\"close\",\"closeCircle\",\"collapse\",\"config\",\"delete\",\"desktop\",\"deslike\",\"download\",\"duplicate\",\"edit\",\"exam\",\"expand\",\"facebook\",\"fileBmp\",\"fileJpg\",\"filePdf\",\"filePng\",\"fileUpload\",\"fileXls\",\"filter\",\"fullscreen\",\"gallery\",\"geotag\",\"google\",\"hate\",\"healthPlan\",\"height\",\"height2\",\"home\",\"horizontalList\",\"imageUp\",\"info2\",\"infoCircle\",\"instagram\",\"key\",\"language\",\"language2\",\"languageEN\",\"languagePT\",\"lattes\",\"like\",\"likeHand\",\"link\",\"linkExternal\",\"linkedin\",\"list\",\"login\",\"logout\",\"love\",\"mail\",\"mail2\",\"medical\",\"menuHamburguer\",\"menuKebab\",\"menuMeatballs\",\"mic\",\"micOff\",\"minus\",\"minusCircle\",\"minusSquare\",\"mobile\",\"neutral\",\"news\",\"notification\",\"order\",\"partner\",\"phone\",\"play\",\"plus\",\"plusCircle\",\"plusSquare\",\"print\",\"profile\",\"profile2\",\"pulldownG\",\"pulldownP\",\"pullupG\",\"pullupP\",\"questionCircle\",\"questionSquare\",\"range\",\"reload\",\"schedule\",\"search\",\"secure\",\"share\",\"share2\",\"sound\",\"soundOff\",\"subItem\",\"target\",\"team\",\"twitter\",\"unLink\",\"unSecure\",\"unlikeHand\",\"upload\",\"verticalList\",\"viewFalse\",\"viewTrue\",\"weight\",\"whatsapp\",\"wifi\",\"youtube\",\"zoomIn\",\"zoomOut\"];"]}

package/dist/collection/collection-manifest.json

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "./components/buttons/cura-button/cura-button.js",
     "./components/cura-icon/cura-icon.js",
     "./components/cura-icons-view/cura-icons-view.js",
     "./components/cura-page-template/cura-page-template.js",
@@ -9,8 +10,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.18.1",
-    "typescriptVersion": "4.7.4"
+    "version": "3.3.0",
+    "typescriptVersion": "5.0.4"
   },
   "collections": [],
   "bundles": [],

package/dist/collection/components/buttons/cura-button/cura-button.css

@@ -0,0 +1,161 @@
+:host {
+  display: inline-block;
+  vertical-align: middle;
+}
+:host button, :host a {
+  --shadown-color: 38, 38, 38;
+  --shadow-opacity: 0.16;
+  outline: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  padding: calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);
+  min-height: calc(var(--base-spacing) * 13px);
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-radius: 4px;
+  transition: background-color 0.1s linear, box-shadow 0.1s linear, border-color 0.1s linear;
+  font-size: var(--font-size);
+  cursor: pointer;
+}
+:host button:hover, :host a:hover {
+  box-shadow: 0 4px 8px 0 RGBA(var(--shadown-color), var(--shadow-opacity));
+}
+:host button:active, :host a:active {
+  box-shadow: none;
+}
+:host button .label, :host a .label {
+  flex: 1;
+  color: var(--neutral-black);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 1.43em;
+  line-height: 1.1em;
+}
+:host button.icon-left cura-icon, :host a.icon-left cura-icon {
+  margin-right: calc(var(--base-spacing) * 3px);
+}
+:host button.icon-right, :host a.icon-right {
+  flex-direction: row-reverse;
+}
+:host button.icon-right cura-icon, :host a.icon-right cura-icon {
+  margin-left: calc(var(--base-spacing) * 3px);
+}
+:host button.medium, :host a.medium {
+  padding: calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);
+  min-height: calc(var(--base-spacing) * 11px);
+}
+:host button.medium:hover, :host a.medium:hover {
+  box-shadow: 0 3px 6px 0 RGBA(var(--shadown-color), var(--shadow-opacity));
+}
+:host button.medium:active, :host a.medium:active {
+  box-shadow: none;
+}
+:host button.medium .label, :host a.medium .label {
+  font-size: 1.14em;
+  letter-spacing: 2%;
+}
+:host button.small, :host a.small {
+  padding: calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);
+  min-height: calc(var(--base-spacing) * 8px);
+}
+:host button.small:hover, :host a.small:hover {
+  box-shadow: 0 2px 5px 0 RGBA(var(--shadown-color), var(--shadow-opacity));
+}
+:host button.small:active, :host a.small:active {
+  box-shadow: none;
+}
+:host button.small.icon-left cura-icon, :host a.small.icon-left cura-icon {
+  margin-right: calc(var(--base-spacing) * 2.5px);
+}
+:host button.small.icon-right cura-icon, :host a.small.icon-right cura-icon {
+  margin-left: calc(var(--base-spacing) * 2.5px);
+}
+:host button.small .label, :host a.small .label {
+  font-size: 1em;
+  letter-spacing: 2%;
+}
+:host button.disabled, :host a.disabled {
+  cursor: not-allowed;
+}
+:host button.disabled:hover, :host a.disabled:hover {
+  box-shadow: none;
+}
+:host button.button-solid, :host a.button-solid {
+  background-color: var(--color-base);
+  border-width: 1px;
+  border-color: var(--color-dark);
+  border-style: solid;
+}
+:host button.button-solid:hover, :host a.button-solid:hover {
+  background-color: var(--color-light);
+  border-color: var(--color-base);
+}
+:host button.button-solid:active, :host a.button-solid:active {
+  background-color: var(--color-dark);
+}
+:host button.button-solid .label, :host a.button-solid .label {
+  color: var(--neutral-black);
+}
+:host button.button-solid .label.inverted, :host a.button-solid .label.inverted {
+  color: var(--neutral-white);
+}
+:host button.button-solid.disabled, :host a.button-solid.disabled {
+  background-color: var(--neutral-light);
+  border-color: var(--neutral-base);
+}
+:host button.button-solid.disabled .label, :host button.button-solid.disabled .label.inverted, :host a.button-solid.disabled .label, :host a.button-solid.disabled .label.inverted {
+  color: var(--neutral-dark);
+}
+:host button.button-outline, :host a.button-outline {
+  background-color: transparent;
+  border-width: 2px;
+  border-color: var(--color-base);
+  border-style: solid;
+}
+:host button.button-outline:hover, :host a.button-outline:hover {
+  border-color: var(--color-light);
+}
+:host button.button-outline:not(.disabled):hover .label, :host a.button-outline:not(.disabled):hover .label {
+  color: var(--color-light);
+}
+:host button.button-outline:not(.disabled):hover cura-icon, :host a.button-outline:not(.disabled):hover cura-icon {
+  --color: var(--color-light) !important;
+}
+:host button.button-outline .label, :host a.button-outline .label {
+  color: var(--color-base);
+}
+:host button.button-outline .label.inverted, :host a.button-outline .label.inverted {
+  color: var(--neutral-white);
+}
+:host button.button-outline:not(.disabled):not(.inverted):active, :host a.button-outline:not(.disabled):not(.inverted):active {
+  border-color: var(--color-dark);
+}
+:host button.button-outline:not(.disabled):not(.inverted):active .label, :host a.button-outline:not(.disabled):not(.inverted):active .label {
+  color: var(--color-dark);
+}
+:host button.button-outline:not(.disabled):not(.inverted):active cura-icon, :host a.button-outline:not(.disabled):not(.inverted):active cura-icon {
+  --color: var(--color-dark) !important;
+}
+:host button.button-outline.inverted, :host a.button-outline.inverted {
+  border-color: var(--neutral-white);
+}
+:host button.button-outline.inverted:hover, :host a.button-outline.inverted:hover {
+  border-color: var(--color-light);
+  box-shadow: none;
+}
+:host button.button-outline.inverted:not(.disabled):active, :host a.button-outline.inverted:not(.disabled):active {
+  border-color: var(--neutral-white);
+}
+:host button.button-outline.inverted:not(.disabled):active .label, :host a.button-outline.inverted:not(.disabled):active .label {
+  color: var(--neutral-white);
+}
+:host button.button-outline.inverted:not(.disabled):active cura-icon, :host a.button-outline.inverted:not(.disabled):active cura-icon {
+  --color: var(--neutral-white) !important;
+}
+:host button.button-outline.disabled, :host a.button-outline.disabled {
+  border-color: var(--neutral-base);
+}
+:host button.button-outline.disabled .label, :host button.button-outline.disabled .label.inverted, :host a.button-outline.disabled .label, :host a.button-outline.disabled .label.inverted {
+  color: var(--neutral-dark);
+}

package/dist/collection/components/buttons/cura-button/cura-button.js

@@ -0,0 +1,285 @@
+import { Host, h } from '@stencil/core';
+export class CuraButton {
+  constructor() {
+    this.type = 'solid';
+    this.size = 'large';
+    this.disabled = false;
+    this.isLoading = false;
+    this.iconName = undefined;
+    this.iconset = 'default';
+    this.iconPosition = 'left';
+    this.href = undefined;
+    this.target = "_self";
+    this.color = 'accent';
+    this.fontColor = 'dark';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
+    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
+    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);
+    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
+    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
+    this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);
+    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();
+  }
+  getClasses() {
+    const classes = {};
+    classes[`button-${this.type.toLowerCase()}`] = true;
+    classes[`${this.size.toLowerCase()}`] = true;
+    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
+    classes['inverted'] = this.fontColor === 'light';
+    classes['disabled'] = this.disabled;
+    return classes;
+  }
+  setColors() {
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`), '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`) });
+  }
+  getIcon() {
+    if (!this.iconName)
+      return '';
+    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
+    const color = this.disabled
+      ? 'neutral-dark'
+      : this.fontColor === 'light'
+        ? 'neutral-white'
+        : this.type === 'solid'
+          ? 'neutral-black'
+          : `${this.color}-base`;
+    return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
+  }
+  render() {
+    return (h(Host, null, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null)))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))))));
+  }
+  static get is() { return "cura-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'solid' | 'outline' | 'transparent' | 'icon'",
+          "resolved": "\"icon\" | \"outline\" | \"solid\" | \"transparent\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button type: solid (default) | outline | transparent | icon."
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'solid'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button size: small | medium | large (default)"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'large'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disabled state. Boolean."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "isLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Loading state. Boolean."
+        },
+        "attribute": "is-loading",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "iconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the icon to be used from iconset."
+        },
+        "attribute": "icon-name",
+        "reflect": true
+      },
+      "iconset": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom iconset if needed."
+        },
+        "attribute": "iconset",
+        "reflect": true,
+        "defaultValue": "'default'"
+      },
+      "iconPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right'",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon position: left (default) | right."
+        },
+        "attribute": "icon-position",
+        "reflect": true,
+        "defaultValue": "'left'"
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Property href switch button to link."
+        },
+        "attribute": "href",
+        "reflect": true
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set target if link."
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "\"_self\""
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Color base from color scheme. Default: accent."
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'accent'"
+      },
+      "fontColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'dark' | 'light'",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the font color to dark or light."
+        },
+        "attribute": "font-color",
+        "reflect": false,
+        "defaultValue": "'dark'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "styles": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "color",
+        "methodName": "handleChangeColor"
+      }];
+  }
+}
+//# sourceMappingURL=cura-button.js.map

package/dist/collection/components/buttons/cura-button/cura-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-button.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button/cura-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button',\n  styleUrl: 'cura-button.scss',\n  shadow: true,\n})\nexport class CuraButton {\n\n  /**\n   * Button type: solid (default) | outline | transparent | icon.\n   */\n  @Prop({reflect: true}) type: 'solid' | 'outline' | 'transparent' | 'icon' = 'solid';\n  /**\n   * Button size: small | medium | large (default)\n   */\n  @Prop({reflect: true}) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n   * Disabled state. Boolean.\n   */\n  @Prop({reflect: true}) disabled = false;\n  /**\n   * Loading state. Boolean.\n   */\n  @Prop({reflect: true}) isLoading = false;\n  \n  /**\n   * Name of the icon to be used from iconset.\n   */\n  @Prop({reflect: true}) iconName: string;\n  /**\n   * Custom iconset if needed.\n   */\n  @Prop({reflect: true}) iconset = 'default';\n  /**\n   * Icon position: left (default) | right.\n   */\n  @Prop({reflect: true}) iconPosition: 'left' | 'right' = 'left';\n\n  /**\n   * Property href switch button to link.\n   */\n  @Prop({reflect: true}) href: string;\n  /**\n   * Set target if link.\n   */\n  @Prop() target = \"_self\";\n\n  /**\n   * Color base from color scheme. Default: accent.\n   */\n  @Prop() color = 'accent';\n  @Watch('color')\n  handleChangeColor() {\n    this.setColors();\n  }\n  /**\n   * Set the font color to dark or light.\n   */\n  @Prop() fontColor: 'dark' | 'light' = 'dark';\n\n\n  @State() styles = {};\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n    this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);\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  getClasses() {\n    const classes = {};\n    classes[`button-${this.type.toLowerCase()}`] = true;\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['inverted'] = this.fontColor === 'light';\n    classes['disabled'] = this.disabled;\n    return classes;\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\n      '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n      '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n      '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n    };\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    const color = this.disabled \n      ? 'neutral-dark' \n      : this.fontColor === 'light' \n        ? 'neutral-white' \n        : this.type === 'solid'\n          ? 'neutral-black'\n          : `${this.color}-base`;\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n  }\n\n  render() {\n    return (\n      <Host>\n      { this.href ? (\n        <a href={this.disabled ? '' : this.href} target={this.target} class={this.getClasses()} style={this.styles}>\n          { this.getIcon() }\n          <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n        </a>\n      ) : (\n        <button class={this.getClasses()} style={this.styles} disabled={this.disabled || null}>\n          { this.getIcon() }\n          <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n        </button>\n      )}\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/cura-icon/cura-icon.css

@@ -1,8 +1,8 @@
-.cura-icon {
+:host {
   width: var(--size);
   height: var(--size);
 }
-.cura-icon svg {
+:host svg {
   display: inline-block;
   stroke: var(--color);
   width: var(--size);

package/dist/collection/components/cura-icon/cura-icon.js

@@ -1,10 +1,6 @@
 import { Host, h } from '@stencil/core';
 export class CuraIcon {
   constructor() {
-    this.name = '';
-    this.color = 'neutral-base';
-    this.iconset = 'default';
-    this.disabled = false;
     this.sizes = {
       "128": { size: 128, stroke: 5.25 },
       "72": { size: 72, stroke: 3.5 },
@@ -17,6 +13,11 @@ export class CuraIcon {
       "16": { size: 16, stroke: 1.5 },
       "default": { size: 24, stroke: 2 }
     };
+    this.name = '';
+    this.color = 'neutral-base';
+    this.size = undefined;
+    this.iconset = 'default';
+    this.disabled = false;
   }
   sizeHandler(size) {
     const scaledStroke = (iconSize) => {
@@ -37,9 +38,10 @@ export class CuraIcon {
     this.host.style.setProperty(prop, value);
   }
   render() {
-    return (h(Host, { class: 'cura-icon' }, h("svg", { version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
+    return (h(Host, null, h("svg", { version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
   }
   static get is() { return "cura-icon"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["cura-icon.scss"]
@@ -157,3 +159,4 @@ export class CuraIcon {
       }];
   }
 }
+//# sourceMappingURL=cura-icon.js.map

package/dist/collection/components/cura-icon/cura-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-icon.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,QAAQ;;IAUnB,UAAK,GAAG;MACN,KAAK,EAAE,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAC;MAChC,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;MAC7B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;MAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;MAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;MAC7B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;MAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAC;MAC3B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;MAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;MAC7B,SAAS,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAC;KACjC,CAAC;gBAnB4B,EAAE;iBAChB,cAAc;;mBAEG,SAAS;oBACvB,KAAK;;EAkBxB,WAAW,CAAC,IAAqB;IAC/B,MAAM,YAAY,GAAG,CAAC,QAAyB,EAAE,EAAE;MACjD,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACpG,CAAC,CAAA;IACD,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC;IACtH,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;EACzG,CAAC;EAID,YAAY;IACV,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;EACtH,CAAC;EAID,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;IACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;EACtB,CAAC;EAED,eAAe,CAAC,IAAY,EAAE,KAAa;IACzC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;EAC3C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,WAAW,EACnB,mBAAmB,EAAC,eAAe,EACnC,KAAK,EAAC,4BAA4B;QAClC,WACE,SAAS,EAAE,GAAG,IAAI,CAAC,UAAU,kBAAkB,IAAI,CAAC,OAAO,QAAQ,IAAI,CAAC,IAAI,EAAE,GAC1E,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Element, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-icon',\n  styleUrl: 'cura-icon.scss',\n  shadow: true\n})\nexport class CuraIcon {\n\n  @Prop({reflect: true}) name = '';\n  @Prop() color = 'neutral-base';\n  @Prop() size: string | number;\n  @Prop({reflect: true}) iconset = 'default';\n  @Prop() disabled = false;\n\n  @Element() host: HTMLElement;\n\n  sizes = {\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    \"default\": {size: 24, stroke: 2}\n  };\n\n  @Watch('size')\n  sizeHandler(size: string | number) {\n    const scaledStroke = (iconSize: string | number) => {\n      return `${this.sizes[iconSize].stroke * (this.sizes.default.size / this.sizes[iconSize].size)}px`;\n    }\n    this.setHostProperty('--size', this.sizes[`${size}`] ? `${this.sizes[size].size}px` : `${this.sizes.default.size}px`);\n    this.setHostProperty('--stroke', this.sizes[`${size}`] ? scaledStroke(size) : scaledStroke(\"default\"));\n  }\n\n  @Watch('color')\n  @Watch('disabled')\n  colorHandler() {\n    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color));\n  }\n\n  assetsPath: string;\n\n  connectedCallback() {\n    this.assetsPath = window.CuraAPI.localAssetsPath;\n    this.sizeHandler(this.size);\n    this.colorHandler();\n  }\n\n  setHostProperty(prop: string, value: string) {\n    this.host.style.setProperty(prop, value);\n  }\n\n  render() {\n    return (\n      <Host>\n        <svg\n          version=\"1.1\"\n          viewBox=\"0 0 24 24\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <use\n            xlinkHref={`${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}`}>\n          </use>\n        </svg>\n      </Host>\n    );\n  }\n\n}\n"]}