npm - @rededor/cura - Versions diffs - 1.6.0-alpha.4 → 1.6.0 - Mend

@rededor/cura 1.6.0-alpha.4 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (232) hide show

package/dist/collection/components/{cura-dropdown-search-new → cura-dropdown-search}/cura-dropdown-search-category/cura-dropdown-search-category.stories.js RENAMED Viewed

@@ -4,7 +4,7 @@ const renderCuraDropdownSearchCategory = (args) => {
 </cura-dropdown-search-category>`;
 };
 export default {
-    title: 'Componentes/DropdownSearchNew/Options/Category',
+    title: 'Componentes/DropdownSearch/Options/Category',
     tags: ['autodocs'],
     parameters: {
         docs: {

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

@@ -0,0 +1 @@

+ {"version":3,"file":"cura-dropdown-search-category.stories.js","sourceRoot":"","sources":["../../../../src/components/cura-dropdown-search/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,6CAA6C;IACpD,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/DropdownSearch/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/cura-dropdown-search-not-found/cura-dropdown-search-not-found.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"cura-dropdown-search-not-found.js","sourceRoot":"","sources":["../../../../src/components/cura-dropdown-search/cura-dropdown-search-not-found/cura-dropdown-search-not-found.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,0BAA0B;IALvC;QASE,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACxB,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,EAAE,CAAC,eAAe,EAAE,CAAC;QACvB,CAAC,CAAA;KAaF;IAXC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAG,IAAI,CAAC,WAAW;gBACzD,qEAAc,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY;oBAC1D,8DAAa,CACA,CACX,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search-not-found',\n styleUrl: 'cura-dropdown-search-not-found.scss',\n shadow: true,\n})\nexport class CuraDropdownSearchNotFound {\n\n @Event() actionclick: EventEmitter<any>;\n\n handleClick = (ev: Event) => {\n this.actionclick.emit();\n ev.preventDefault();\n ev.stopPropagation();\n }\n\n render() {\n return (\n <Host>\n <div class=\"component-container\" onClick={ this.handleClick }>\n <cura-heading size=\"xsmall\" weight=\"bold\" color=\"error-dark\">\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}/cura-dropdown-search-not-found/cura-dropdown-search-not-found.stories.js RENAMED Viewed

@@ -4,14 +4,14 @@ const renderCuraDropdownSearchNotFound = (args) => {
 </cura-dropdown-search-not-found>`;
 };
 export default {
-    title: 'Componentes/DropdownSearchNew/Options/NotFound',
+    title: 'Componentes/DropdownSearch/Options/NotFound',
     tags: ['autodocs'],
     parameters: {
         docs: {
             description: {
                 component: `<cura-paragraph size="small">
         É utilizado como retorno negativo de busca.<br/><br/>
-        Quando implementado como filho, o componente dropdown-search automaticamente assume 'error' como status.<br/><br/>
+        Quando implementado como filho, o componente dropdown-search automaticamente assume 'error' como status, aplicando o respectivo estilo.<br/><br/>
         Para demais validações, quando um campo é obrigatório, por exemplo, a aplicação deverá utilizar a propriedade status e o slot helperText do componente.
       </cura-paragraph>`,
             },

package/dist/collection/components/cura-dropdown-search/cura-dropdown-search-not-found/cura-dropdown-search-not-found.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"cura-dropdown-search-not-found.stories.js","sourceRoot":"","sources":["../../../../src/components/cura-dropdown-search/cura-dropdown-search-not-found/cura-dropdown-search-not-found.stories.ts"],"names":[],"mappings":"AAAA,MAAM,gCAAgC,GAAG,CAAC,IAAI,EAAE,EAAE;IAChD,OAAO;IACL,IAAI,CAAC,OAAO;kCACkB,CAAA;AAClC,CAAC,CAAA;AAED,eAAe;IACb,KAAK,EAAE,6CAA6C;IACpD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;wBAIK;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,iCAAiC;YAC9C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,IAAI,EAAE;QACJ,OAAO,EAAE,iDAAiD;KAC3D;CACF,CAAA","sourcesContent":["const renderCuraDropdownSearchNotFound = (args) => {\n return `<cura-dropdown-search-not-found>\n ${args.content}\n</cura-dropdown-search-not-found>`\n}\n\nexport default {\n title: 'Componentes/DropdownSearch/Options/NotFound',\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `<cura-paragraph size=\"small\">\n É utilizado como retorno negativo de busca.<br/><br/>\n Quando implementado como filho, o componente dropdown-search automaticamente assume 'error' como status, aplicando o respectivo estilo.<br/><br/>\n Para demais validações, quando um campo é obrigatório, por exemplo, a aplicação deverá utilizar a propriedade status e o slot helperText do componente.\n </cura-paragraph>`,\n },\n },\n },\n render: args => {\n return renderCuraDropdownSearchNotFound(args);\n },\n argTypes: {\n content: {\n control: 'text',\n description: 'Mensagem de erro a ser exibida.',\n table: {\n category: 'Properties',\n },\n }\n }\n}\n\nexport const DropdownSearchNotFound = {\n args: {\n content: 'Não há resultados para <strong>\"TERM\"</strong>.'\n }\n}\n"]}

package/dist/collection/components/{cura-dropdown-search-new/cura-dropdown-search-option-new/cura-dropdown-search-option-new.css → cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.css} RENAMED Viewed

@@ -66,6 +66,7 @@
   justify-content: flex-start;
   padding: calc(var(--cura-spacing-base) * 3px) 0;
   min-height: calc(var(--cura-spacing-base) * 10px);
+  min-width: 0;
   gap: calc(var(--cura-spacing-base) * 1px);
   cursor: pointer;
 }
@@ -74,6 +75,7 @@
   align-items: center;
   justify-content: flex-end;
   padding-right: calc(var(--cura-spacing-base) * 1px);
+  min-width: 0;
 }
 :host .selectable-container ::slotted(cura-icon) {
   --color: var(--neutral-dark) !important;

package/dist/collection/components/{cura-dropdown-search-new/cura-dropdown-search-option-new/cura-dropdown-search-option-new.js → cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class CuraDropdownSearchOptionNew {
+export class CuraDropdownSearchOption {
     constructor() {
         this.styles = {};
         this.theme = window.CuraAPI.theme;
@@ -40,18 +40,18 @@ export class CuraDropdownSearchOptionNew {
         };
     }
     render() {
-        return (h(Host, { key: '270721328007e38163582a288da503001dfd28f7' }, h("div", { key: 'bbcfeca78e0cfb86d3bdcf5d23a25c27ba2bd0ed', class: this.getClasses(), style: this.styles }, h("div", { key: '86774ca830346536a6591310c42c3806abed7273', class: "selectable-container", onClick: () => this.handleSelect() }, h("slot", { key: '2fe370d3a1cd2df9226634cc0a6812b4131de60e', name: 'image' }), h("div", { key: 'ebafc4dcffdc7bf44414605424b4e86400f87602', class: "content" }, h("slot", { key: '2666ee970d53d21dd04c58fea2725163e936d96d' }))), h("div", { key: '55f0cdbd76d03921722796e1b261500dce39ada5', class: "actions-container", onClick: () => this.handleActionsClick() }, h("slot", { key: '34528c19855eca4ecd151310959d8a496deb152b', name: 'actions' })))));
+        return (h(Host, { key: '6168a95a628d07878f472c310390bf9c45bd5057' }, h("div", { key: '29763282f101a9fbe205c91e7b3c70fa51878e63', class: this.getClasses(), style: this.styles }, h("div", { key: '46bd7a250ad866b984e6f4184aa4800e89b741c9', class: "selectable-container", onClick: () => this.handleSelect() }, h("slot", { key: '77088405f3cc4f077e49a4266fb926348774d9e9', name: 'image' }), h("div", { key: '96baef2af4ffe7c5ec809a5adbd0512120b6c71c', class: "content" }, h("slot", { key: 'e41794e8eaff6bfe1516e88e8591ca915eb7ad3f' }))), h("div", { key: '991bca3b0956519b531d576a1738bc3f200cc73f', class: "actions-container", onClick: () => this.handleActionsClick() }, h("slot", { key: '098e8c29ab48ef8e0cfff2a48a31860eafb62487', name: 'actions' })))));
     }
-    static get is() { return "cura-dropdown-search-option-new"; }
+    static get is() { return "cura-dropdown-search-option"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["cura-dropdown-search-option-new.scss"]
+            "$": ["cura-dropdown-search-option.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["cura-dropdown-search-option-new.css"]
+            "$": ["cura-dropdown-search-option.css"]
         };
     }
     static get properties() {
@@ -180,4 +180,4 @@ export class CuraDropdownSearchOptionNew {
             }];
     }
 }
-//# sourceMappingURL=cura-dropdown-search-option-new.js.map
+//# sourceMappingURL=cura-dropdown-search-option.js.map

package/dist/collection/components/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"cura-dropdown-search-option.js","sourceRoot":"","sources":["../../../../src/components/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,wBAAwB;;QAiCnC,WAAM,GAAG,EAAE,CAAC;QACZ,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;;;0BAlBgB,IAAI;wBAMN,KAAK;2BAMF,KAAK;;IAQnD,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG;YACZ,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YAC9D,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YAC9D,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC;YAC5D,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YAC9D,sBAAsB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,EAAE,EAAE,CAAC;YACzE,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YAC9D,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC;SACxD,CAAC;IACJ,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,UAAU,EAAG,CAAC;YACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAC1B,CAAC;IAED,UAAU;QACR,OAAO;YACL,qBAAqB,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,aAAa,EAAE,IAAI,CAAC,WAAW;YAC/B,gBAAgB,EAAE,CAAC,IAAI,CAAC,UAAU;SACnC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;gBAC/C,4DAAK,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAG,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;oBACnE,6DAAM,IAAI,EAAC,OAAO,GAAQ;oBAC1B,4DAAK,KAAK,EAAC,SAAS;wBAClB,8DAAa,CACT,CACF;gBACN,4DAAK,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAG,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;oBACtE,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search-option',\n styleUrl: 'cura-dropdown-search-option.scss',\n shadow: true,\n})\nexport class CuraDropdownSearchOption {\n\n /**\n * Required. The value for item term reference.\n * This will set the value of the seaarch field when the option is selected.\n */\n @Prop() value!: string;\n /**\n * Required. The unique identifier for the option.\n * This will reference the option element for the parent.\n */\n @Prop() optionid!: string;\n /**\n * Enable selection for this option.\n * Default is true.\n */\n @Prop({reflect: true}) selectable: boolean = true;\n /**\n * Selected state.\n * This will be managed by the parent component.\n * Default is false.\n */\n @Prop({reflect: true}) selected: boolean = false;\n /**\n * Highlighted state.\n * This will be managed by the parent component.\n * Default is false.\n */\n @Prop({reflect: true}) highlighted: boolean = false;\n\n @Event() actionclick: EventEmitter<any>;\n @Event() selectoption: EventEmitter<string>;\n\n styles = {};\n theme = window.CuraAPI.theme;\n\n connectedCallback() {\n this.styles = {\n '--neutral-light': this.theme.colors.getColor('neutral-light'),\n '--neutral-white': this.theme.colors.getColor('neutral-white'),\n '--neutral-dark': this.theme.colors.getColor('neutral-dark'),\n '--neutral-black': this.theme.colors.getColor('neutral-black'),\n '--primary-lighter-50': this.theme.colors.getColor('primary-lighter', .5),\n '--primary-light': this.theme.colors.getColor('primary-light'),\n '--primary': this.theme.colors.getColor('primary-base')\n };\n }\n\n handleSelect() {\n if( this.selectable ) {\n this.selectoption.emit(this.optionid);\n } else {\n this.actionclick.emit();\n }\n }\n\n handleActionsClick() {\n this.actionclick.emit();\n }\n\n getClasses() {\n return {\n 'component-container': true,\n 'selected': this.selected,\n 'highlighted': this.highlighted,\n 'not-selectable': !this.selectable\n }\n }\n\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"selectable-container\" onClick={ () => this.handleSelect() }>\n <slot name='image'></slot>\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>\n <div class=\"actions-container\" onClick={ () => this.handleActionsClick() }>\n <slot name='actions'></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/{cura-dropdown-search-new/cura-dropdown-search-option-new/cura-dropdown-search-option-new.stories.js → cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.stories.js} RENAMED Viewed

@@ -1,15 +1,15 @@
 const renderCuraDropdownSearchOption = (args) => {
-    return `<cura-dropdown-search-option-new${args.value ? `
+    return `<cura-dropdown-search-option${args.value ? `
   value="${args.value}"` : ''}${args.optionid ? `
   optionid="${args.optionid}"` : ''}${args.selectable === false ? `
   selectable="false"` : ''}>${args.image ? `
   ${args.image}` : ''}${args.default ? `
   ${args.default}` : ''}${args.actions ? `
   ${args.actions}` : ''}
-</cura-dropdown-search-option-new>`;
+</cura-dropdown-search-option>`;
 };
 export default {
-    title: 'Componentes/DropdownSearchNew/Options/Option',
+    title: 'Componentes/DropdownSearch/Options/Option',
     tags: ['autodocs'],
     parameters: {
         docs: {
@@ -71,7 +71,7 @@ export default {
         },
     }
 };
-export const DropdownSearchOptionNew = {
+export const DropdownSearchOption = {
     args: {
         value: 'Opção 1',
         optionid: 'opt1',
@@ -82,4 +82,4 @@ export const DropdownSearchOptionNew = {
         actions: '<cura-button-transparent slot="actions" icon-only="true" icon-name="delete"></cura-button-transparent>'
     }
 };
-//# sourceMappingURL=cura-dropdown-search-option-new.stories.js.map
+//# sourceMappingURL=cura-dropdown-search-option.stories.js.map

package/dist/collection/components/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"cura-dropdown-search-option.stories.js","sourceRoot":"","sources":["../../../../src/components/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.stories.ts"],"names":[],"mappings":"AAAA,MAAM,8BAA8B,GAAG,CAAC,IAAI,EAAE,EAAE;IAC9C,OAAO,+BAAgC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;WAC3C,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;cACnC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC;qBAC9C,CAAC,CAAC,CAAC,EAAE,IAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IACvC,IAAI,CAAC,KAAM,EAAE,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IACrC,IAAI,CAAC,OAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IACvC,IAAI,CAAC,OAAQ,EAAE,CAAC,CAAC,CAAC,EAAE;+BACM,CAAA;AAC/B,CAAC,CAAA;AAED,eAAe;IACb,KAAK,EAAE,2CAA2C;IAClD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;wBAEK;aACjB;SACF;KACF;IACD,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,OAAO,8BAA8B,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,oHAAoH;YACjI,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,6EAA6E;YAC1F,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;aAChC;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,wEAAwE;YACrF,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0KAA0K;YACvL,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,yEAAyE;YACtF,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,IAAI;QAChB,OAAO,EAAE;8EACiE;QAC1E,KAAK,EAAE,6DAA6D;QACpE,OAAO,EAAE,wGAAwG;KAClH;CACF,CAAA","sourcesContent":["const renderCuraDropdownSearchOption = (args) => {\n return `<cura-dropdown-search-option${ args.value ? `\n value=\"${args.value}\"` : ''}${ args.optionid ? `\n optionid=\"${args.optionid}\"` : ''}${ args.selectable === false ? `\n selectable=\"false\"` : ''}>${ args.image ? `\n ${ args.image }` : ''}${ args.default ? `\n ${ args.default }` : ''}${ args.actions ? `\n ${ args.actions }` : ''}\n</cura-dropdown-search-option>`\n}\n\nexport default {\n title: 'Componentes/DropdownSearch/Options/Option',\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `<cura-paragraph size=\"small\">\n Representa uma opção de seleção para o componente dropdown-search.\n </cura-paragraph>`,\n },\n },\n },\n render: args => {\n return renderCuraDropdownSearchOption(args);\n },\n argTypes: {\n value: {\n control: 'text',\n description: 'Representa o texto a ser aplicado no campo quando a opção é selecionada.<br/><b>É uma propriedade obrigatória.</b>',\n required: true,\n table: {\n category: 'Properties',\n },\n },\n optionid: {\n control: 'text',\n description: 'Identificador único para a opção.<br/><b>É uma propriedade obrigatória.</b>',\n required: true,\n table: {\n category: 'Properties',\n },\n },\n selectable: {\n control: 'boolean',\n description: 'Habilita ou desabilita seleção da opção.',\n table: {\n category: 'Properties',\n defaultValue: { summary: true },\n },\n },\n image: {\n control: 'text',\n description: 'Slot para aplicação de ícones, indicadores, avatares e demais imagens.',\n table: {\n category: 'Slots'\n },\n },\n default: {\n control: 'text',\n description: 'Slot padrão para o conteúdo da opção.<br/>Não é necessário nomear o slot.<br/>Recebe, geralmente, elementos como títulos e parágrafos, os quais formata automaticamente.',\n table: {\n category: 'Slots'\n },\n },\n actions: {\n control: 'text',\n description: 'Slot para componentes de ação secundária da opção, como botões e links.',\n table: {\n category: 'Slots'\n },\n },\n }\n}\n\nexport const DropdownSearchOption = {\n args: {\n value: 'Opção 1',\n optionid: 'opt1',\n selectable: true,\n default: `<cura-heading size=\"xsmall\" weight=\"bold\">Título da <em>Opção</em>.</cura-heading>\n <cura-paragraph size=\"xsmall\">Descrição da <em>opção</em>.</cura-paragraph>`,\n image: '<cura-icon slot=\"image\" name=\"unity\" size=\"20\"></cura-icon>',\n actions: '<cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"delete\"></cura-button-transparent>'\n }\n}\n"]}

package/dist/collection/components/{cura-dropdown-search-new/cura-dropdown-search-new.js → cura-dropdown-search/cura-dropdown-search.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { checkMobile, checkIOS } from "../../utils/utils";
 import { FixedElementScrollBehavior } from "../../utils/FixedElementScrollBehavior";
-export class CuraDropdownSearchNew {
+export class CuraDropdownSearch {
     constructor() {
         this.resizeTimeoutMs = 66;
         this.focusTimeoutMs = 300;
@@ -153,8 +153,9 @@ export class CuraDropdownSearchNew {
             this.clearHighlight();
             return;
         }
-        if (position > this.dropdownSelectableItems.length - 1)
-            position = this.dropdownSelectableItems.length - 1;
+        const selectableItemsLastPosition = this.dropdownSelectableItems.length - 1;
+        if (position > selectableItemsLastPosition)
+            position = selectableItemsLastPosition;
         if (this.highlightedElement)
             this.highlightedElement.highlighted = false;
         this.highlightedIndex = position;
@@ -224,7 +225,7 @@ export class CuraDropdownSearchNew {
                 .assignedElements()
                 .forEach(item => {
                 elements.push(item);
-                if (item.localName === 'cura-dropdown-search-option-new' && item["selectable"])
+                if (item.localName === 'cura-dropdown-search-option' && item["selectable"])
                     selectable.push(item);
                 if (item.localName === 'cura-dropdown-search-not-found')
                     hasNotFound = true;
@@ -242,7 +243,7 @@ export class CuraDropdownSearchNew {
     exitZoom() {
         this.scrollBehavior.enableScroll();
         this.setZoomHeight();
-        this.zoomState = false;
+        setTimeout(() => { this.zoomState = false; }, 300);
     }
     setZoomHeight() {
         var _a;
@@ -264,18 +265,18 @@ export class CuraDropdownSearchNew {
         };
     }
     render() {
-        return (h(Host, { key: '10bfe6693cbad85caedd053c7804c66e16b63b9b', style: this.getHostCSSProperties() }, h("div", { key: 'b6ed23ac2bd6dd19709bb1525b88c10973382f3c', class: this.getClasses(), style: this.styles }, h("div", { key: '89eb60826cb1d3e2d77493da91891d5095f9e732', class: "component-controls" }, this.isMobile && this.zoomState ? (h("cura-button-transparent", { fontColor: "dark", onClick: () => this.handleBackClick(), iconName: "arrowLeft", size: "large", iconOnly: true, color: "primary", id: "button-back" })) : '', h("cura-input-text", { key: 'cfb55f46fa33ac08c2b64fb47708153c7e0dbb41', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: this.zoomState ? 'transparent' : 'default', required: this.required, iconName: this.icon || 'search', value: this.value, status: this.status, onValueChange: (ev) => this.handleInputValueChange(ev), onInput: (ev) => this._preventEvent(ev), onFocus: () => this.handleFocus(), onClick: (ev) => this._preventEvent(ev), onBlur: () => this.handleBlur(), onFocusout: () => this.handleFocusout(), onInputClear: (ev) => this.handleInputClear(ev), placeholder: this.placeholder, size: this.size, onKeyDown: (ev) => this.handleKeyDown(ev) }, h("slot", { key: '4de246df633b7b3c5820dcc8200b0315a74d6988', name: "helperText" }))), h("div", { key: 'f5dd97d36299433265ed85e42c1ed7dbf2b157e5', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, h("slot", { key: '6001f5ab4aec1b74ad817e17605d45525a536d4a', onSlotchange: () => this.handleSlotChange() })))));
+        return (h(Host, { key: '936c26e5c23d95d8e905f66d8bcf7c636781351e', style: this.getHostCSSProperties() }, h("div", { key: '6bd541e66e07d4db99af875886fbfaba5915fd48', class: this.getClasses(), style: this.styles }, h("div", { key: '4b5036b41878c317bc3b6716bf8590f1d672d21e', class: "component-controls" }, this.isMobile && this.zoomState ? (h("cura-button-transparent", { fontColor: "dark", onClick: () => this.handleBackClick(), iconName: "arrowLeft", size: "large", iconOnly: true, color: "primary", id: "button-back" })) : '', h("cura-input-text", { key: '7d0d8f3090389570d51612ad89cedda9c452527f', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: this.zoomState ? 'transparent' : 'default', required: this.required, iconName: this.icon || 'search', value: this.value, status: this.status, onValueChange: (ev) => this.handleInputValueChange(ev), onInput: (ev) => this._preventEvent(ev), onFocus: () => this.handleFocus(), onClick: (ev) => this._preventEvent(ev), onBlur: () => this.handleBlur(), onFocusout: () => this.handleFocusout(), onInputClear: (ev) => this.handleInputClear(ev), placeholder: this.placeholder, size: this.size, onKeyDown: (ev) => this.handleKeyDown(ev) }, h("slot", { key: 'e9cbf139d9b16a50bf0ca547246a66132e722add', name: "helperText" }))), h("div", { key: 'd8d83a726ef6e87740240b9fb637742bc52151e2', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, h("slot", { key: '7cf5efd8ca64c1f07a19bf0ae6dfcdaeb057c04b', onSlotchange: () => this.handleSlotChange() })))));
     }
-    static get is() { return "cura-dropdown-search-new"; }
+    static get is() { return "cura-dropdown-search"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["cura-dropdown-search-new.scss"]
+            "$": ["cura-dropdown-search.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["cura-dropdown-search-new.css"]
+            "$": ["cura-dropdown-search.css"]
         };
     }
     static get properties() {
@@ -582,4 +583,4 @@ export class CuraDropdownSearchNew {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=cura-dropdown-search-new.js.map
+//# sourceMappingURL=cura-dropdown-search.js.map

package/dist/collection/components/cura-dropdown-search/cura-dropdown-search.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"cura-dropdown-search.js","sourceRoot":"","sources":["../../../src/components/cura-dropdown-search/cura-dropdown-search.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\nimport { checkMobile, checkIOS } from '../../utils/utils';\nimport { FixedElementScrollBehavior } from '../../utils/FixedElementScrollBehavior';\n\n@Component({\n tag: 'cura-dropdown-search',\n styleUrl: 'cura-dropdown-search.scss',\n shadow: true,\n})\nexport class CuraDropdownSearch {\n @Element() host: HTMLElement;\n /**\n * Name of the field.\n * Required.\n */\n @Prop({ reflect: true }) name!: string;\n /**\n * Size of the dropdown search component\n * Values: 'small', 'medium' or 'large' (default).\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' | string = 'large';\n /**\n * Define component status.\n * Values: 'error' or 'default'.\n */\n @Prop({ reflect: true, mutable: true }) status: 'error' | 'default' | string = 'default';\n /**\n * Disabled state. Default: false.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n /**\n * Field is required. Default: false.\n */\n @Prop({ reflect: true }) required: boolean = false;\n /**\n * The placeholder text.\n */\n @Prop({ reflect: true }) placeholder: string = '';\n /**\n * The label.\n */\n @Prop({ reflect: true }) label: string = '';\n /**\n * Custom icon name. Default: search.\n */\n @Prop({ reflect: true }) icon: string = 'search';\n /**\n * CSS max-height property for dropdown item.\n * Can also be used by css property --max-height.\n * Default: 400px\n */\n @Prop({ reflect: true }) maxheight: string = '400px';\n /**\n * Readonly property value.\n * Represents the term on the search input field.\n */\n @Prop({ mutable: true }) value: string = '';\n /**\n * Delay in milliseconds to dispatch search events.\n * Default: 400\n */\n @Prop({ reflect: true }) searchdelay: number = 400;\n /**\n * Min chars to dispatch search events.\n * Default: 3\n */\n @Prop({ reflect: true }) searchminchars: number = 3;\n\n /**\n * Set focus to input field.\n */\n @Method()\n async setFocus() {\n this.getInputElement().setFocus();\n }\n /**\n * Select by optionid property of a selectable option component.\n */\n @Method()\n async selectOption(optionid: string) {\n this._selectOption(optionid);\n }\n\n @Event() termchange: EventEmitter<string>;\n @Event() optionselect: EventEmitter<string>;\n\n @State() styles = {};\n @State() zoomState = false;\n @State() isOnFocus: boolean = false;\n\n scrollBehavior: FixedElementScrollBehavior;\n\n weights: any;\n breakpoints: any;\n isMobile: boolean;\n\n resizeTimeout: any;\n resizeTimeoutMs = 66;\n focusTimeout: any;\n focusTimeoutMs = 300;\n blurTimeout: any;\n blurTimeoutMs = 300;\n valueTimeout: any;\n\n dropdownElement: HTMLDivElement;\n selectedOptionElement: any;\n highlightedElement: any;\n highlightedIndex: number = -1;\n @State() dropdownItems = [];\n dropdownSelectableItems = [];\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.breakpoints = window.CuraAPI.theme.breakpoints.get();\n this.styles['--info'] = window.CuraAPI.theme.colors.getColor('info-base');\n this.styles['--purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n this.styles['--primary'] = window.CuraAPI.theme.colors.getColor('primary');\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 window?.addEventListener('resize', this.handleWindowResize);\n window?.addEventListener('orientationchange', this.handleWindowResize);\n this.isMobile = checkMobile();\n }\n\n componentDidLoad() {\n this.dropdownElement = this.host.shadowRoot?.querySelector('.dropdown-container');\n this.host.addEventListener('actionclick', this.handleOptionActionClick);\n this.host.addEventListener('selectoption', this.handleSelectOption);\n this.scrollBehavior = new FixedElementScrollBehavior(this.host, this.dropdownElement);\n setTimeout(() => this.getSlotElements(), 10);\n }\n\n disconnectedCallback() {\n window?.removeEventListener('resize', this.handleWindowResize);\n window?.removeEventListener('orientationchange', this.handleWindowResize);\n }\n\n handleSlotChange = () => { this.getSlotElements(); }\n\n handleWindowResize = () => {\n if (this.resizeTimeout) clearTimeout(this.resizeTimeout);\n this.resizeTimeout = setTimeout(() => {\n this.isMobile = checkMobile();\n this.setZoomHeight();\n }, this.resizeTimeoutMs);\n }\n\n handleFocus = () => {\n if (this.focusTimeout) clearTimeout(this.focusTimeout);\n this.focusTimeout = setTimeout(() => {\n this.isOnFocus = true;\n this.clearHighlight();\n if (this.isMobile && !this.zoomState) this.enterZoom();\n if (this.zoomState) this.setZoomHeight();\n setTimeout(() => {\n this.selectedOptionElement?.scrollIntoView({behavior: 'instant', block: 'nearest', inline: 'nearest'});\n }, 10);\n }, this.focusTimeoutMs);\n }\n\n handleBlur = () => {\n if (this.blurTimeout) clearTimeout(this.blurTimeout);\n this.blurTimeout = setTimeout(() => {\n if (this.zoomState) {\n const delay = checkIOS ? 500 : 100;\n setTimeout(() => this.setZoomHeight(), delay);\n }\n this.isOnFocus = false;\n }, this.blurTimeoutMs);\n }\n\n handleFocusout = () => {\n if( this.zoomState ) this.setZoomHeight();\n }\n\n handleBackClick = () => { this.exitZoom(); }\n\n handleOptionActionClick = (ev: CustomEvent) => {\n this.getInputElement().setFocus();\n this._preventEvent(ev);\n }\n\n handleInputClear = (ev: CustomEvent) => {\n this.setValue('');\n this.clearSelectedOptions();\n this._preventEvent(ev);\n }\n\n handleSelectOption = (ev: CustomEvent) => {\n this._selectOption(ev.detail);\n this._preventEvent(ev);\n }\n\n handleInputValueChange = (ev: CustomEvent) => {\n this.setValue(ev.detail);\n if( this.selectedOptionElement && ev.detail !== this.selectedOptionElement.value) {\n this.clearSelectedOptions();\n }\n this._preventEvent(ev);\n }\n\n handleDropdownMouseOver = () => {\n if( this.highlightedElement || this.highlightedIndex >= 0 ) this.clearHighlight();\n }\n\n handleKeyDown = (ev: KeyboardEvent) => {\n if( ev.key === 'ArrowDown' ) this.moveHighlight('next');\n if( ev.key === 'ArrowUp' ) this.moveHighlight('prev');\n if( ev.key === 'Enter' ) this.selectHighlight();\n }\n\n moveHighlight(direction: 'next' | 'prev') {\n if (!this.dropdownSelectableItems.length) return;\n let position = direction === 'next' ? this.highlightedIndex + 1 : this.highlightedIndex - 1;\n if( position < 0) {\n this.clearHighlight();\n return;\n }\n const selectableItemsLastPosition = this.dropdownSelectableItems.length - 1;\n if( position > selectableItemsLastPosition ) position = selectableItemsLastPosition;\n if( this.highlightedElement ) this.highlightedElement.highlighted = false;\n this.highlightedIndex = position;\n this.highlightedElement = this.dropdownSelectableItems[position];\n if( this.highlightedElement.selected ) {\n this.moveHighlight(direction);\n return;\n }\n this.highlightedElement.highlighted = true;\n this.highlightedElement.scrollIntoView({behavior: 'instant', block: 'nearest', inline: 'nearest' });\n }\n\n clearHighlight() {\n if( this.highlightedElement ) {\n this.highlightedElement.highlighted = false;\n this.highlightedElement = null;\n }\n this.highlightedIndex = -1;\n }\n\n selectHighlight() {\n if( this.highlightedElement ) {\n this._selectOption(this.highlightedElement.optionid);\n this.clearHighlight();\n this.getInputElement().blur();\n }\n }\n\n setValue(value: string) {\n if (this.value !== value) {\n this.value = value;\n if( this.valueTimeout) clearTimeout(this.valueTimeout);\n this.valueTimeout = setTimeout(() => {\n this.termchange.emit(this.value === '' || this.value.length < this.searchminchars ? '' : this.value);\n }, this.searchdelay || 300);\n }\n }\n\n _selectOption(optionid: string) {\n if (!optionid) {\n this.clearSelectedOptions();\n this.setValue('');\n return;\n }\n const optionElement = this.dropdownSelectableItems.find(option => option.optionid === optionid);\n if( optionElement && !optionElement.selected ) {\n this.clearSelectedOptions();\n this.selectedOptionElement = optionElement;\n this.selectedOptionElement.selected = true;\n this.setValue(this.selectedOptionElement.value);\n this.optionselect.emit(this.selectedOptionElement.optionid);\n if (this.zoomState) setTimeout(() => this.exitZoom(), this.blurTimeoutMs);\n }\n }\n\n clearSelectedOptions() {\n this.dropdownSelectableItems.forEach(option => {\n if( option.selected ) option.selected = false;\n });\n this.selectedOptionElement = null;\n }\n\n getSlotElements() {\n const elements = [];\n const selectable = [];\n let hasNotFound = false;\n if( this.dropdownElement ) {\n this.dropdownElement\n .querySelector('slot')\n .assignedElements()\n .forEach(item => {\n elements.push(item);\n if( item.localName === 'cura-dropdown-search-option' && item[\"selectable\"] ) selectable.push(item);\n if( item.localName === 'cura-dropdown-search-not-found' ) hasNotFound = true;\n });\n }\n this.dropdownSelectableItems = selectable;\n this.dropdownItems = elements;\n this.status = hasNotFound ? 'error' : 'default';\n }\n\n\n enterZoom() {\n this.scrollBehavior.disableScroll();\n this.setZoomHeight();\n this.zoomState = true;\n }\n\n exitZoom() {\n this.scrollBehavior.enableScroll();\n this.setZoomHeight();\n setTimeout(() => { this.zoomState = false}, 300);\n }\n\n getInputElement = () => this.host.shadowRoot?.querySelector('cura-input-text');\n\n setZoomHeight() {\n const h = window ? `${window.visualViewport?.height || window.innerHeight}px` : '100vh';\n this.styles = { ...this.styles, '--height': h };\n }\n\n getClasses() {\n return {\n \"component-container\": true,\n \"mobile\": this.isMobile,\n \"zoom\": this.zoomState,\n \"dropdown-visible\": this.isOnFocus && (this.dropdownItems.length > 0 && !this.zoomState),\n \"error\": this.status === 'error'\n }\n }\n\n _preventEvent = (ev: Event) => {\n ev.preventDefault();\n ev.stopPropagation();\n }\n\n getHostCSSProperties() {\n return {\n '--max-height': this.maxheight || '400px'\n };\n }\n\n render() {\n return (\n <Host style={ this.getHostCSSProperties() }>\n <div class={ this.getClasses() } style={ this.styles }>\n <div class=\"component-controls\">\n { this.isMobile && this.zoomState ? (\n <cura-button-transparent\n fontColor=\"dark\"\n onClick={ () => this.handleBackClick() }\n iconName=\"arrowLeft\"\n size=\"large\"\n iconOnly\n color=\"primary\"\n id=\"button-back\">\n </cura-button-transparent>\n ) : '' }\n <cura-input-text\n disabled={ this.disabled }\n label={ this.label }\n part=\"cura-input-field\"\n mode={ this.zoomState ? 'transparent' : 'default' }\n required={ this.required }\n iconName={ this.icon || 'search' }\n value={ this.value }\n status={ this.status }\n onValueChange={ (ev) => this.handleInputValueChange(ev) }\n onInput={ (ev) => this._preventEvent(ev) }\n onFocus={ () => this.handleFocus() }\n onClick={ (ev) => this._preventEvent(ev) }\n onBlur={ () => this.handleBlur() }\n onFocusout={ () => this.handleFocusout() }\n onInputClear={ (ev) => this.handleInputClear(ev) }\n placeholder={ this.placeholder }\n size={ this.size }\n onKeyDown={ (ev) => this.handleKeyDown(ev) }\n >\n <slot name=\"helperText\"></slot>\n </cura-input-text>\n </div>\n <div class=\"dropdown-container\" onMouseOver={ () => this.handleDropdownMouseOver() }>\n <slot onSlotchange={ () => this.handleSlotChange() }></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/{cura-dropdown-search-new/cura-dropdown-search-new.stories.js → cura-dropdown-search/cura-dropdown-search.stories.js} RENAMED Viewed

@@ -6,7 +6,7 @@ const renderDropDownSearchOptions = (args) => {
     </cura-dropdown-search-not-found>
   ` : `
     <cura-dropdown-search-category>Título para Categoria 1</cura-dropdown-search-category>
-    <cura-dropdown-search-option-new
+    <cura-dropdown-search-option
       value="Título para opção 1"
       optionid="option1">
       <cura-icon slot="image" name="unity" size="20"></cura-icon>
@@ -14,8 +14,8 @@ const renderDropDownSearchOptions = (args) => {
       <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
       <cura-button-transparent slot="actions" icon-only="true" icon-name="delete"></cura-button-transparent>
       <cura-button-transparent slot="actions" icon-only="true" icon-name="schedule"></cura-button-transparent>
-    </cura-dropdown-search-option-new>
-    <cura-dropdown-search-option-new
+    </cura-dropdown-search-option>
+    <cura-dropdown-search-option
       value="Título para opção 2"
       optionid="option2">
       <cura-icon slot="image" name="unity" size="20"></cura-icon>
@@ -23,74 +23,74 @@ const renderDropDownSearchOptions = (args) => {
       <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
       <cura-button-transparent slot="actions" icon-only="true" icon-name="delete"></cura-button-transparent>
       <cura-button-transparent slot="actions" icon-only="true" icon-name="schedule"></cura-button-transparent>
-    </cura-dropdown-search-option-new>
+    </cura-dropdown-search-option>
     <cura-dropdown-search-category>Título para Categoria 2</cura-dropdown-search-category>
-    <cura-dropdown-search-option-new
+    <cura-dropdown-search-option
       value="Título para opção 3"
       optionid="option3">
       <cura-badge-distance slot="image" distance="123"></cura-badge-distance>
       <cura-heading size="xsmall" weight="bold">Título para opção 3 buscando <em>"termo"</em></cura-heading>
       <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
       <cura-button-transparent slot="actions" icon-only="true" icon-name="delete"></cura-button-transparent>
-    </cura-dropdown-search-option-new>
-    <cura-dropdown-search-option-new
+    </cura-dropdown-search-option>
+    <cura-dropdown-search-option
       value="Título para opção 4"
       optionid="option4">
       <cura-badge-distance slot="image" distance="123"></cura-badge-distance>
       <cura-heading size="xsmall" weight="bold">Título para opção 4 buscando <em>"termo"</em></cura-heading>
       <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
       <cura-button-transparent slot="actions" icon-only="true" icon-name="delete"></cura-button-transparent>
-    </cura-dropdown-search-option-new>
+    </cura-dropdown-search-option>
     <cura-dropdown-search-category>Título para Categoria 3</cura-dropdown-search-category>
-    <cura-dropdown-search-option-new
+    <cura-dropdown-search-option
       value="Título para opção 5"
       optionid="option5">
       <cura-avatar slot="image" size="32"></cura-avatar>
       <cura-heading size="xsmall" weight="bold">Título para opção 5 buscando <em>"termo"</em></cura-heading>
       <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
-    </cura-dropdown-search-option-new>
-    <cura-dropdown-search-option-new
+    </cura-dropdown-search-option>
+    <cura-dropdown-search-option
       value="Título para opção 6"
       optionid="option6">
       <cura-heading size="xsmall" weight="bold">Título para opção 6 buscando <em>"termo"</em></cura-heading>
       <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
-    </cura-dropdown-search-option-new>
-    <cura-dropdown-search-option-new
+    </cura-dropdown-search-option>
+    <cura-dropdown-search-option
       value="Título para opção 7"
       optionid="option7">
       <cura-heading size="xsmall" weight="bold">Título para opção 7 buscando <em>"termo"</em></cura-heading>
-    </cura-dropdown-search-option-new>
-    <cura-dropdown-search-option-new
+    </cura-dropdown-search-option>
+    <cura-dropdown-search-option
       value="Título para opção 8"
       optionid="option8">
       <cura-heading size="xsmall" weight="bold">Título para opção 8 buscando <em>"termo"</em></cura-heading>
-    </cura-dropdown-search-option-new>
-    <cura-dropdown-search-option-new
+    </cura-dropdown-search-option>
+    <cura-dropdown-search-option
       value="Título para opção 9"
       optionid="option9">
       <cura-heading size="xsmall" weight="bold">Título para opção 9 buscando <em>"termo"</em></cura-heading>
       <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
       <cura-button-transparent slot="actions" icon-only="true" icon-name="delete"></cura-button-transparent>
-    </cura-dropdown-search-option-new>
-    <cura-dropdown-search-option-new
+    </cura-dropdown-search-option>
+    <cura-dropdown-search-option
       value="Título para opção 10"
       optionid="optio10">
       <cura-heading size="xsmall" weight="bold">Título para opção 10 buscando <em>"termo"</em></cura-heading>
       <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
       <cura-button-transparent slot="actions" icon-only="true" icon-name="delete"></cura-button-transparent>
-    </cura-dropdown-search-option-new>
+    </cura-dropdown-search-option>
   `;
 };
 const renderDropDownSearch = (args) => {
     const style = `<style>
   .comp-container { min-height: 500px; }${args.cssMaxHeight ? `
-  cura-dropdown-search-new { --max-height: ${args.cssMaxHeight} !important; }` : ''}
+  cura-dropdown-search { --max-height: ${args.cssMaxHeight} !important; }` : ''}
 </style>`;
     const comp = `
 <div class="comp-container">
-  <cura-dropdown-search-new
+  <cura-dropdown-search
     name="${args.name}"${args.size && args.size !== "large" ? `
     size="${args.size}"` : ''}${args.label ? `
     label="${args.label}"` : ''}${args.placeholder ? `
@@ -103,12 +103,12 @@ const renderDropDownSearch = (args) => {
     searchminchars="${args.searchminchars}"` : ''}>${args.helperText ? `
     <span slot="helperText">${args.helperText}</span>` : ''}
     ${renderDropDownSearchOptions(args)}
-  </cura-dropdown-search-new>
+  </cura-dropdown-search>
 </div>`;
     return `${style}${comp}`;
 };
 export default {
-    title: 'Componentes/DropdownSearchNew',
+    title: 'Componentes/DropdownSearch',
     tags: ['autodocs'],
     parameters: {
         docs: {
@@ -286,4 +286,4 @@ export const DropdownSearchNew = {
         cssMaxHeight: ''
     }
 };
-//# sourceMappingURL=cura-dropdown-search-new.stories.js.map
+//# sourceMappingURL=cura-dropdown-search.stories.js.map

package/dist/collection/components/cura-dropdown-search/cura-dropdown-search.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"cura-dropdown-search.stories.js","sourceRoot":"","sources":["../../../src/components/cura-dropdown-search/cura-dropdown-search.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\n\nconst renderDropDownSearchOptions = (args) => {\n return args.status === 'error' ? `\n <cura-dropdown-search-not-found>\n Não há nenhum resultado para <strong>\"TERMO\"</strong>.\n </cura-dropdown-search-not-found>\n ` : `\n <cura-dropdown-search-category>Título para Categoria 1</cura-dropdown-search-category>\n <cura-dropdown-search-option\n value=\"Título para opção 1\"\n optionid=\"option1\">\n <cura-icon slot=\"image\" name=\"unity\" size=\"20\"></cura-icon>\n <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 1 buscando <em>\"termo\"</em></cura-heading>\n <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"delete\"></cura-button-transparent>\n <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"schedule\"></cura-button-transparent>\n </cura-dropdown-search-option>\n <cura-dropdown-search-option\n value=\"Título para opção 2\"\n optionid=\"option2\">\n <cura-icon slot=\"image\" name=\"unity\" size=\"20\"></cura-icon>\n <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 2 buscando <em>\"termo\"</em></cura-heading>\n <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"delete\"></cura-button-transparent>\n <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"schedule\"></cura-button-transparent>\n </cura-dropdown-search-option>\n\n <cura-dropdown-search-category>Título para Categoria 2</cura-dropdown-search-category>\n <cura-dropdown-search-option\n value=\"Título para opção 3\"\n optionid=\"option3\">\n <cura-badge-distance slot=\"image\" distance=\"123\"></cura-badge-distance>\n <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 3 buscando <em>\"termo\"</em></cura-heading>\n <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"delete\"></cura-button-transparent>\n </cura-dropdown-search-option>\n <cura-dropdown-search-option\n value=\"Título para opção 4\"\n optionid=\"option4\">\n <cura-badge-distance slot=\"image\" distance=\"123\"></cura-badge-distance>\n <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 4 buscando <em>\"termo\"</em></cura-heading>\n <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"delete\"></cura-button-transparent>\n </cura-dropdown-search-option>\n\n <cura-dropdown-search-category>Título para Categoria 3</cura-dropdown-search-category>\n <cura-dropdown-search-option\n value=\"Título para opção 5\"\n optionid=\"option5\">\n <cura-avatar slot=\"image\" size=\"32\"></cura-avatar>\n <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 5 buscando <em>\"termo\"</em></cura-heading>\n <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n </cura-dropdown-search-option>\n <cura-dropdown-search-option\n value=\"Título para opção 6\"\n optionid=\"option6\">\n <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 6 buscando <em>\"termo\"</em></cura-heading>\n <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n </cura-dropdown-search-option>\n <cura-dropdown-search-option\n value=\"Título para opção 7\"\n optionid=\"option7\">\n <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 7 buscando <em>\"termo\"</em></cura-heading>\n </cura-dropdown-search-option>\n <cura-dropdown-search-option\n value=\"Título para opção 8\"\n optionid=\"option8\">\n <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 8 buscando <em>\"termo\"</em></cura-heading>\n </cura-dropdown-search-option>\n <cura-dropdown-search-option\n value=\"Título para opção 9\"\n optionid=\"option9\">\n <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 9 buscando <em>\"termo\"</em></cura-heading>\n <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"delete\"></cura-button-transparent>\n </cura-dropdown-search-option>\n <cura-dropdown-search-option\n value=\"Título para opção 10\"\n optionid=\"optio10\">\n <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 10 buscando <em>\"termo\"</em></cura-heading>\n <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"delete\"></cura-button-transparent>\n </cura-dropdown-search-option>\n `;\n}\n\nconst renderDropDownSearch = (args) => {\n const style = `<style>\n .comp-container { min-height: 500px; }${ args.cssMaxHeight ? `\n cura-dropdown-search { --max-height: ${args.cssMaxHeight} !important; }` : ''}\n</style>`;\n const comp = `\n<div class=\"comp-container\">\n <cura-dropdown-search\n name=\"${args.name}\"${ args.size && args.size !== \"large\" ? `\n size=\"${args.size}\"` : ''}${ args.label ? `\n label=\"${args.label}\"` : ''}${ args.placeholder ? `\n placeholder=\"${args.placeholder}\"` : ''}${ args.disabled ? `\n disabled=\"${args.disabled}\"` : ''}${ args.required ? `\n required=\"${args.required}\"` : ''}${ args.icon && args.icon !== \"search\" ? `\n icon=\"${args.icon}\"` : ''}${ args.maxheight && args.maxheight !== \"400px\" ? `\n maxheight=\"${args.maxheight}\"` : ''}${ args.searchdelay && args.searchdelay !== \"400\" ? `\n searchdelay=\"${args.searchdelay}\"` : ''}${ args.searchminchars && args.searchminchars !== \"3\" ? `\n searchminchars=\"${args.searchminchars}\"` : ''}>${ args.helperText ? `\n <span slot=\"helperText\">${args.helperText}</span>` : '' }\n ${ renderDropDownSearchOptions(args) }\n </cura-dropdown-search>\n</div>`;\n return `${style}${comp}`;\n}\n\nexport default {\n title: 'Componentes/DropdownSearch',\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `<cura-paragraph size=\"small\">\n O \\`cura-dropdown-search\\` é um componente para busca rápida indicado para utilização com motores de busca, como o Algolia.\n <br><br>\n Em dispositivos móveis, o componente abre em modo full-screen, facilitando a navegação e seleção de opções. Você pode visualizar esse comportamento visitando a documentação e ajustando o tamanho do viewport na barra de opções.\n </cura-paragraph>`,\n },\n },\n },\n render: args => {\n return renderDropDownSearch(args);\n },\n argTypes: {\n name: {\n control: 'text',\n description: 'Nome do dropdown que reflete automaticamente no input de texto utilizado.<br/><b>É uma propriedade obrigatória</b>.',\n required: true,\n table: {\n category: 'Properties',\n },\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: \"Tamanho do componente. Pode ser 'small', 'medium' ou 'large'.\",\n table: {\n category: 'Properties',\n defaultValue: { summary: 'large' },\n },\n },\n status: {\n control: { type: 'inline-radio' },\n options: ['default', 'error'],\n description: 'Define o estado do componente para finalidades de validação (quando requerido, por exemplo).<br><b>Quando o componente de opção not-found está presente na listagem de opções o estado do componente é automaticamente \"error\"</b>.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'default' },\n },\n },\n disabled: {\n control: 'boolean',\n description: 'Define se o campo está habilitado.',\n table: {\n category: 'Properties',\n defaultValue: { summary: false },\n },\n },\n required: {\n control: 'boolean',\n description: 'Define se o campo é obrigatório.',\n table: {\n category: 'Properties',\n defaultValue: { summary: false },\n },\n },\n placeholder: {\n control: 'text',\n description: 'Texto do placeholder.',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n label: {\n control: 'text',\n description: 'Texto de rótulo do campo input.',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n icon: {\n control: { type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone no iconset a ser utilizado.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'search' }\n }\n },\n maxheight: {\n control: 'text',\n description: 'Altura máxima para o dropdown em desktop.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '400px' },\n }\n },\n searchdelay: {\n control: 'text',\n description: 'Tempo de espera em milisegundos para o disparo de mudança do termo de busca em tempo de digitação.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '400'}\n }\n },\n searchminchars: {\n control: 'text',\n description: 'Mínimo de caracteres para o disparo de mudança do termo de busca em tempo de digitação.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '3'}\n }\n },\n value: {\n control: 'none',\n description: 'Valor atual refletido no campo de busca.<br/><b>Somente leitura</b>.',\n table: {\n category: 'Properties',\n }\n },\n helperText: {\n control: 'text',\n description: 'Texto de ajuda para o input de texto.',\n table: {\n category: 'Slots',\n },\n },\n termchange: {\n control: 'none',\n description: 'Evento disparado quando o termo de busca muda. Retorna o termo como string.',\n table: {\n category: 'Events',\n },\n },\n optionselect: {\n control: 'none',\n description: 'Evento disparado quando uma opção é selecionada. Retorna o id da opção selecionada como string.',\n table: {\n category: 'Events',\n },\n },\n setFocus: {\n control: 'none',\n description: 'Método disponibilizado pelo componente para foco.',\n table: {\n category: 'Methods',\n },\n },\n selectOption: {\n control: 'none',\n description: 'Método disponibilizado pelo componente para seleção automática de uma opção existente. Recebe como parâmetro o id da opção a ser selecionada.',\n table: {\n category: 'Methods',\n },\n },\n cssMaxHeight: {\n control: 'text',\n description: 'Altura máxima para o dropdown em desktop.',\n table: {\n category: 'CSS Properties',\n defaultValue: { summary: '400px'}\n },\n name: '--max-height'\n },\n },\n};\n\nexport const DropdownSearchNew = {\n args: {\n name: \"test-component\",\n size: \"large\",\n label: \"Selecione um item da lista\",\n placeholder: \"Faça a sua busca\",\n status: \"default\",\n icon: \"\",\n disabled: false,\n required: false,\n maxheight: \"400px\",\n searchdelay: \"400\",\n searchminchars: \"3\",\n helperText: \"Texto de ajuda do componente\",\n cssMaxHeight: ''\n }\n};\n"]}

package/dist/collection/components/forms/cura-input-date/cura-input-date.js CHANGED Viewed

@@ -162,7 +162,7 @@ export class CuraInputDate {
         }
     }
     render() {
-        return (h(Host, { key: '6561926408fe00e541e6e7932a448f5a46cb5909' }, h("div", { key: '23e9db15f773d76e01c1dd0d7b71d6765a9a6c26', class: "container", style: this.styles }, h("cura-input-text", { key: '040e257cfaf01fbf0bd087d3abf0d159e7d1ac7a', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
+        return (h(Host, { key: 'd10f396cd49243f58ecbf5502e384a27ccfd0922' }, h("div", { key: 'cbde3cfd318c010a9704664c24ae25b23a17506d', class: "container", style: this.styles }, h("cura-input-text", { key: '55a8ba43111ce2af88c1a63de5d302190e6b4e54', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
     }
     static get is() { return "cura-input-date"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-label/cura-label.css CHANGED Viewed

@@ -62,6 +62,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  display: block;
 }
 :host p ::slotted(a) {
   font-weight: var(--font-weight-bold);

package/dist/collection/components/forms/cura-label/cura-label.js CHANGED Viewed

@@ -50,7 +50,7 @@ export class CuraLabel {
         };
     }
     render() {
-        return (h(Host, { key: '42bde16eab50dffb9b198cd9d68fb178031bcb24', style: this.hostCSSProperties() }, h("p", { key: 'ac8f20f5f28fd37a3229bc2c9b1c0a2f229f31ee', style: this.styles, class: this.getClasses() }, h("slot", { key: 'a9a8f4634b10384c3ee083da848a7e72f2a67876' }))));
+        return (h(Host, { key: '3b60258fa4dd9330296e8112a763b2242771c6fc', style: this.hostCSSProperties() }, h("p", { key: 'dbfc16e29a61c0f116d2055bdc1e3b61d79908b8', style: this.styles, class: this.getClasses() }, h("slot", { key: '032986e008067aae5b6b17b1e5fa70decf64d9e0' }))));
     }
     static get is() { return "cura-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-radio/cura-radio.js CHANGED Viewed

@@ -120,7 +120,7 @@ export class CuraRadio {
         return statusColors[this.status][type];
     }
     render() {
-        return (h(Host, { key: 'fa38dc0c23638cc267d9d52c2796d6a079439484' }, h("div", { key: 'cbe3fe10a7bc3fe0bd7a6ef73fbbadfbc7334e2c', class: this.getClasses(), style: this.styles }, h("div", { key: '0649b867ec06c0069c655cffbe109f8d258509c2', class: "info" }, h("div", { key: '7f8bfc46f21677cf661418f7b9c380fadddf1860', class: "label-wrapper" }, h("cura-label", { key: 'a259c61bb7adc503dbeea4329c22aa37e9e8996a', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '0ffdc2c6f69f7ada640439a603c1b91125a3c332', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: 'ae59fe9a1a05a9e69e257986f91f609bd03b66b9', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '524b6e086ff9ea32d8db78a78e354992b0d844d8' }))), h("input", { key: '0d0b4e915da4691f319ae340d54032fdcce90405', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
+        return (h(Host, { key: '0383d2901fc62d6a2a4731cb8ae942a6048a95d2' }, h("div", { key: '20baf755c464c22d27245040d16aab088c3f5f6b', class: this.getClasses(), style: this.styles }, h("div", { key: '187ac71dda217e0b9fbff9fafce7a48474285f06', class: "info" }, h("div", { key: '65460b5be6a8f08c81109989cafc63eac165b170', class: "label-wrapper" }, h("cura-label", { key: '83b9d50d07caba124bec86fd73581c7c59c6f8a6', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: 'c78a7020d7a3ddb8b28cd5e90c93bfb4b830fd95', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: 'e1e12e9db63d9c7eeebb0705b7e8f0f4942fac94', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'c5ac9ee96c4ec2bd1f38a0a305c1c33f892f8e4a' }))), h("input", { key: 'dc29309c6b7423263905ab1ae459cecb0cae6969', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
     }
     static get is() { return "cura-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-select/cura-select.js CHANGED Viewed

@@ -290,13 +290,13 @@ export class CuraSelect {
         return h("cura-icon", { class: "feedback-icon", name: icon, iconset: "default", size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles });
     }
     render() {
-        return (h(Host, { key: '38228fe7771c15276afbc2322617f808b098a93c', style: this.styles }, h("div", { key: '03bce7f977543eb2cf03e2c6cebc82a2bbd27d11', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '653fa837432fce57c96d7335dd5558a49c7c89ee', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: 'a5a30e27dc5da4b5b58e5aa7ddce9eca4f2087e3', class: "required" }, "* "))), h("div", { key: 'bed979aede3272b64b73a09bc6fc0d011ccd4519', class: {
+        return (h(Host, { key: 'd3f5e8b4c914f900a0b5472531fd0d74f6d8f7b3', style: this.styles }, h("div", { key: '20dfeb3b9a24eec62ff8c5eae761b43fdfe4d11f', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '2018bf563e3a2bedc7d918f566805b70a75b9aec', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '0e9495c89ac0897062d247f89d3c3b3f85541283', class: "required" }, "* "))), h("div", { key: 'e967796b98e74112d0f36e22d2b82591645416ab', class: {
                 'cura-input-field': true,
                 'open': this.isOpen,
-            } }, this.renderIcon(), h("input", { key: '87bf279f2b649d46201b8bed68bacef35cdbc885', type: "text", autocomplete: "off", onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("button", { key: '9801d6b98926af53c553fa980dd15004c4276e89', class: "up-down-button" }, h("cura-icon", { key: '573e9f48cb5f8f42ce7e866c92266bd60b10e0c0', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), h("cura-label", { key: '43c75e852af717b868070c38f160c30aea3961d9', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: '3e0252e13b20b0909cab47efbe0532eaa6a32b69' })), this.isOpen && (h("div", { key: 'b628c4161e555ea8277728cf021b5ad789e5df0c', class: {
+            } }, this.renderIcon(), h("input", { key: 'dbf6bbb693f9d395bebd7ee376c4e38753e25fa3', type: "text", autocomplete: "off", onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("button", { key: 'f03d55a13bc8c51d63a31f57f6d661453ee8c93b', class: "up-down-button" }, h("cura-icon", { key: 'c6c583d2d54063e5cfe0576f69d83b9125407157', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), h("cura-label", { key: '8457e91bcb1c1152dd263346434f79d994a77817', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'c4850de138a69d39bfd74942c7ca814b6c525c07' })), this.isOpen && (h("div", { key: '8fdbde63603a7a33fac2836b5e9f0041395d6f9a', class: {
                 menu: true,
                 open: this.isOpen,
-            } }, h("slot", { key: '7aefc066eee503e408aacf4a542834968fc7433b', name: "option" }))))));
+            } }, h("slot", { key: '2267652be709728cddf39d5b4df6c99e4a75e072', name: "option" }))))));
     }
     static get is() { return "cura-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-select-options/cura-select-option.js CHANGED Viewed

@@ -33,7 +33,7 @@ export class CuraSelectOption {
         };
     }
     render() {
-        return (h(Host, { key: '2e26a1c7816b58feffe9086588d0a3dcb4526fd1', slot: "option" }, h("div", { key: 'cfdad50aec30db07e9d5dc15f77ed542f6fcd9b0', class: this.getClasses(), style: this.styles }, h("cura-label", { key: 'a53291891ba265b0d7c9828792597fcce7cc2c90', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: 'eca7922d5bd4ebf929907ec9e630aee96250c818' })), this.selected && h("cura-icon", { key: 'c3bdf4f0ac3b71b2932c050467a65bc44fc76670', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
+        return (h(Host, { key: 'e03173e6697b1983f3fb7efabd4a902e1c4f13f1', slot: "option" }, h("div", { key: '61334a4cd07414a4382b809f258e7783da73b1a9', class: this.getClasses(), style: this.styles }, h("cura-label", { key: 'f2e22cb02da86f7d44ee36e1aff6a8da9a19bff2', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '5e6f042d7a1223f1b9ceb43bdfa2f0dbe9b255de' })), this.selected && h("cura-icon", { key: '19b57d12d5d470e58c9c90f66ebf36f98866541e', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
     }
     static get is() { return "cura-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-switch/cura-switch.js CHANGED Viewed

@@ -92,7 +92,7 @@ export class CuraSwitch {
         return classes;
     }
     render() {
-        return (h(Host, { key: '4ea77f70fe3fe34aac7b8ec7a177ded8c5050e8c' }, h("div", { key: '25b0da8f4b11a43dd2ac27a4fbbd652b7bed17a4', class: this.getClasses(), style: this.styles }, h("div", { key: '6edfaafe8986d4978328a8b31165598d3c7d79aa', class: "info" }, h("cura-label", { key: '24403a30f3d345353371aa2c2639052f86ba3a92', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: '2d1ef3fd6634cbb96603d413c702bb2787512a1c', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '889dc39d9a6ced5c0873affe6249d7b7e7e54747' }))), h("div", { key: 'c4a524cb4a30cb9b7e9f1aa0302c796cda620c1e', onClick: this.toggleSwitch, class: "control" }, h("div", { key: '5715b16aeb18b50721739504690586455210f392', class: `track ${this.size.toLowerCase()}` }, h("div", { key: 'a83c9ab52f707844eefb86f59f1ed520a44586f1', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+        return (h(Host, { key: 'c6280d9632ccf98fef43051a1d1f7b3c47d8d40b' }, h("div", { key: '50f5388b837f17564b9c9800566ab80460686177', class: this.getClasses(), style: this.styles }, h("div", { key: '2f9aae45d0e9200d23a19859f28e9f7f15168c8b', class: "info" }, h("cura-label", { key: '800d88c164ac8a9f0e7c78a4a294e1e459ec4d41', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: 'cdc1076ffd0d52288242cd5a7c6da0742361a122', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: 'f5a0a6900277f219be928188fde84742e85cac05' }))), h("div", { key: '17e03356d9530060f874feebe4e5f8e2151c1fe5', onClick: this.toggleSwitch, class: "control" }, h("div", { key: '643eca9aada42ea152497ec1b68ba8cbb463787c', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '6c7e3e5b69f8f22d572116774f646c6dd8bc4c48', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
     }
     static get is() { return "cura-switch"; }
     static get encapsulation() { return "shadow"; }