@rededor/cura 1.5.0 → 1.6.0-alpha.0

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

@@ -12,8 +12,8 @@
  */
 /**
  * Global Spacing Definitions.
- * Required CSS Properties:
- * --base-spacing
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
  */
 /* None: 0px */
 /* Tiny default: 4px */
@@ -99,16 +99,16 @@
   outline: 2px solid #6EA8FF;
 }
 :host button.large, :host a.large {
-  padding: calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 4px);
-  min-height: calc(var(--base-spacing) * 11px);
+  padding: calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 4px);
+  min-height: calc(var(--cura-spacing-base) * 11px);
 }
 :host button.medium, :host a.medium {
-  padding: calc(var(--base-spacing) * 3px);
-  min-height: calc(var(--base-spacing) * 10px);
+  padding: calc(var(--cura-spacing-base) * 3px);
+  min-height: calc(var(--cura-spacing-base) * 10px);
 }
 :host button.small, :host a.small {
-  padding: calc(var(--base-spacing) * 2px);
-  min-height: calc(var(--base-spacing) * 8px);
+  padding: calc(var(--cura-spacing-base) * 2px);
+  min-height: calc(var(--cura-spacing-base) * 8px);
 }
 :host button .button-container, :host a .button-container {
   display: flex;
@@ -128,22 +128,22 @@
   text-align: var(--text-align, "left");
 }
 :host button.icon-left cura-icon, :host a.icon-left cura-icon {
-  margin-right: calc(var(--base-spacing) * 3px);
+  margin-right: calc(var(--cura-spacing-base) * 3px);
 }
 :host button.icon-right cura-icon, :host a.icon-right cura-icon {
-  margin-left: calc(var(--base-spacing) * 3px);
+  margin-left: calc(var(--cura-spacing-base) * 3px);
 }
 :host button.medium.icon-left cura-icon, :host button.small.icon-left cura-icon, :host a.medium.icon-left cura-icon, :host a.small.icon-left cura-icon {
-  margin-right: calc(var(--base-spacing) * 2px);
+  margin-right: calc(var(--cura-spacing-base) * 2px);
 }
 :host button.medium.icon-right cura-icon, :host button.small.icon-right cura-icon, :host a.medium.icon-right cura-icon, :host a.small.icon-right cura-icon {
-  margin-left: calc(var(--base-spacing) * 2px);
+  margin-left: calc(var(--cura-spacing-base) * 2px);
 }
 :host button.disabled, :host a.disabled {
   cursor: not-allowed;
 }
 :host button.icon-only, :host a.icon-only {
-  padding: calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px);
+  padding: calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px);
 }
 :host button.icon-only cura-label, :host a.icon-only cura-label {
   display: none;
@@ -153,10 +153,10 @@
   margin-right: 0 !important;
 }
 :host button.icon-only.medium, :host a.icon-only.medium {
-  padding: calc(var(--base-spacing) * 3px);
+  padding: calc(var(--cura-spacing-base) * 3px);
 }
 :host button.icon-only.small, :host a.icon-only.small {
-  padding: calc(var(--base-spacing) * 2px);
+  padding: calc(var(--cura-spacing-base) * 2px);
 }
 :host button cura-loader-circle, :host a cura-loader-circle {
   position: absolute;

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

@@ -1,7 +1,7 @@
 /**
  * Global Spacing Definitions.
- * Required CSS Properties:
- * --base-spacing
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
  */
 /* None: 0px */
 /* Tiny default: 4px */
@@ -23,8 +23,8 @@
 :host .conteiner {
   display: flex;
   box-sizing: border-box;
-  padding: calc(var(--base-spacing) * 3px);
-  gap: calc(var(--base-spacing) * 3px);
+  padding: calc(var(--cura-spacing-base) * 3px);
+  gap: calc(var(--cura-spacing-base) * 3px);
   flex-shrink: 0;
   border: 1px solid var(--color-base);
   border-radius: 4px;
@@ -37,7 +37,7 @@
   flex: 1;
   flex-direction: column;
   display: flex;
-  gap: calc(var(--base-spacing) * 1px);
+  gap: calc(var(--cura-spacing-base) * 1px);
 }
 :host .icon-right {
   cursor: pointer;

package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-category/cura-dropdown-search-category.css

@@ -0,0 +1,61 @@
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
+ */
+/* 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 */
+/**
+ * Global Dropdown Search Options Definitions.
+ * Required CSS Properties:
+ * --neutral-light
+ */
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
+ */
+/* 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 {
+  display: block;
+  box-sizing: border-box;
+}
+:host .component-container {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: calc(var(--cura-spacing-base) * 10px);
+  padding: 0 calc(var(--cura-spacing-base) * 1px);
+  border-bottom: 1px solid var(--neutral-light);
+  padding: calc(var(--cura-spacing-base) * 3px) 0;
+}
+
+:host(:last-child) .component-container {
+  border-bottom: none !important;
+}

package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-category/cura-dropdown-search-category.js

@@ -0,0 +1,28 @@
+import { Host, h } from "@stencil/core";
+export class CuraDropdownSearchCategory {
+    constructor() {
+        this.styles = {};
+        this.theme = window.CuraAPI.theme;
+    }
+    connectedCallback() {
+        this.styles = {
+            '--neutral-light': this.theme.colors.getColor('neutral-light')
+        };
+    }
+    render() {
+        return (h(Host, { key: '511391a8c6c1c998b04e3093838173ae76549715' }, h("div", { key: '63da720bb3d2cc354ef5f1e9ceaf0f2f9c396f4e', class: "component-container", style: this.styles }, h("cura-heading", { key: 'ba003607e581d4abaf2e6d617f94e3174d04a4b3', size: 'xsmall', weight: 'bold', color: 'neutral-dark', marginBlock: '0', lineHeight: '1em' }, h("slot", { key: '80b14ff99b42a64082895db81b4dbe78cd7545a3' })))));
+    }
+    static get is() { return "cura-dropdown-search-category"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-dropdown-search-category.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-dropdown-search-category.css"]
+        };
+    }
+}
+//# sourceMappingURL=cura-dropdown-search-category.js.map

package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-category/cura-dropdown-search-category.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-dropdown-search-category.js","sourceRoot":"","sources":["../../../../src/components/cura-dropdown-search-new/cura-dropdown-search-category/cura-dropdown-search-category.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,0BAA0B;IALvC;QAOE,WAAM,GAAG,EAAE,CAAC;QACZ,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;KAmB9B;IAjBC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG;YACZ,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;SAC/D,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM;gBACjD,qEAAc,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,UAAU,EAAC,KAAK;oBAC7F,8DAAa,CACA,CACX,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search-category',\n  styleUrl: 'cura-dropdown-search-category.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearchCategory {\n\n  styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.styles = {\n      '--neutral-light': this.theme.colors.getColor('neutral-light')\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"component-container\" style={this.styles}>\n          <cura-heading size='xsmall' weight='bold' color='neutral-dark' marginBlock='0' lineHeight='1em'>\n            <slot></slot>\n          </cura-heading>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-category/cura-dropdown-search-category.stories.js

@@ -0,0 +1,37 @@
+const renderCuraDropdownSearchCategory = (args) => {
+    return `<cura-dropdown-search-category>
+  ${args.content}
+</cura-dropdown-search-category>`;
+};
+export default {
+    title: 'Componentes/DropdownSearchNew/Options/Category',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `<cura-paragraph size="small">
+        É utilizado somente para categorização das opções, quando necessário.<br/>
+        Não é um componente selecionável.
+      </cura-paragraph>`,
+            },
+        },
+    },
+    render: args => {
+        return renderCuraDropdownSearchCategory(args);
+    },
+    argTypes: {
+        content: {
+            control: 'text',
+            description: 'Título da categoria de opções.',
+            table: {
+                category: 'Properties',
+            },
+        }
+    }
+};
+export const DropdownSearchCategory = {
+    args: {
+        content: 'Título para Categoria'
+    }
+};
+//# sourceMappingURL=cura-dropdown-search-category.stories.js.map

package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-category/cura-dropdown-search-category.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-dropdown-search-category.stories.js","sourceRoot":"","sources":["../../../../src/components/cura-dropdown-search-new/cura-dropdown-search-category/cura-dropdown-search-category.stories.ts"],"names":[],"mappings":"AAAA,MAAM,gCAAgC,GAAG,CAAC,IAAI,EAAE,EAAE;IAChD,OAAO;IACL,IAAI,CAAC,OAAO;iCACiB,CAAA;AACjC,CAAC,CAAA;AAED,eAAe;IACb,KAAK,EAAE,gDAAgD;IACvD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;wBAGK;aACjB;SACF;KACF;IACD,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,OAAO,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAChD,CAAC;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,gCAAgC;YAC7C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,IAAI,EAAE;QACJ,OAAO,EAAE,uBAAuB;KACjC;CACF,CAAA","sourcesContent":["const renderCuraDropdownSearchCategory = (args) => {\n  return `<cura-dropdown-search-category>\n  ${args.content}\n</cura-dropdown-search-category>`\n}\n\nexport default {\n  title: 'Componentes/DropdownSearchNew/Options/Category',\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `<cura-paragraph size=\"small\">\n        É utilizado somente para categorização das opções, quando necessário.<br/>\n        Não é um componente selecionável.\n      </cura-paragraph>`,\n      },\n    },\n  },\n  render: args => {\n    return renderCuraDropdownSearchCategory(args);\n  },\n  argTypes: {\n    content: {\n      control: 'text',\n      description: 'Título da categoria de opções.',\n      table: {\n        category: 'Properties',\n      },\n    }\n  }\n}\n\nexport const DropdownSearchCategory = {\n  args: {\n    content: 'Título para Categoria'\n  }\n}\n"]}

package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-new.css

@@ -0,0 +1,138 @@
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
+ */
+/* 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 */
+/**
+ * Global Shadow Level Definitions.
+ * Required CSS Properties with respective opacities:
+ * --neutral-black,
+ * --neutral-purewhite,
+ * --accent-base
+ * --primary-base
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-purewhite opacity: 0.2
+ * Use: @include shadow-level1(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.16
+ * Use: @include shadow-level2(--neutral-black-shadow){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.16
+ * Use: @include shadow-level3(--neutral-black-shadow){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.12
+ * Use: @include shadow-level4(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.8
+ * Use: @include shadow-level5(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --accent-base opacity: 0.2
+ * Use: @include shadow-level5-accent(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --primary-base opacity: 0.16
+ * Use: @include shadow-level3-primary(){ ... }
+ */
+:host {
+  display: block;
+  box-sizing: border-box;
+  position: relative;
+}
+:host .component-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--cura-spacing-base) * 1px);
+}
+:host .component-controls #button-back {
+  padding: 0 0 0 calc(var(--cura-spacing-base) * 3px);
+  width: max-content;
+}
+:host .component-container {
+  box-sizing: border-box;
+  width: 100%;
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: min-content 1fr;
+}
+:host .component-container.zoom {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  background: var(--purewhite);
+  height: var(--height);
+  z-index: 9999;
+  overscroll-behavior: contain;
+}
+:host .component-container.zoom .component-controls {
+  border-bottom: 2px solid var(--primary);
+  padding: calc(var(--cura-spacing-base) * 3px) 0;
+}
+:host .component-container.zoom.error .component-controls {
+  border-bottom: 2px solid var(--error-dark);
+  background-color: var(--error-lighter);
+}
+:host .component-container .dropdown-container {
+  box-sizing: border-box;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  padding: calc(var(--cura-spacing-base) * 3px);
+  overscroll-behavior: contain;
+}
+:host .component-container:not(.zoom) .dropdown-container {
+  box-shadow: 0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  transform: translateY(100%);
+  max-height: var(--max-height);
+  background-color: var(--purewhite);
+  border-radius: 0px 0px calc(var(--cura-spacing-base) * 1px) calc(var(--cura-spacing-base) * 1px);
+  border-bottom: 2px solid var(--neutral-light);
+  border-left: 2px solid var(--neutral-light);
+  border-right: 2px solid var(--neutral-light);
+  display: none;
+  z-index: 9997;
+}
+:host .component-container:not(.zoom).dropdown-visible ::part(cura-input-field) {
+  border-radius: 4px 4px 0px 0px;
+}
+:host .component-container:not(.zoom).dropdown-visible ::part(cura-input-text-helper) {
+  height: 0px;
+  overflow: hidden;
+  margin-top: 0px;
+}
+:host .component-container:not(.zoom).dropdown-visible .dropdown-container {
+  display: block;
+}