voa-ds-core 1.0.29 → 1.0.31
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.
- package/dist/custom-elements/index.d.ts +81 -0
- package/dist/custom-elements/index.js +40 -1460
- package/dist/custom-elements/index.js.map +1 -1
- package/dist/custom-elements/{p-DKnM_Ozb.js → p-BVkwkeZD.js} +3 -4
- package/dist/custom-elements/p-BVkwkeZD.js.map +1 -0
- package/dist/custom-elements/{p-CQr0ZKZZ.js → p-Bbv_lCJm.js} +3 -4
- package/dist/custom-elements/p-Bbv_lCJm.js.map +1 -0
- package/dist/custom-elements/{p-DPyVgztA.js → p-C3RlQWjO.js} +3 -4
- package/dist/custom-elements/p-C3RlQWjO.js.map +1 -0
- package/dist/custom-elements/p-CFBaVtm5.js +1463 -0
- package/dist/custom-elements/p-CFBaVtm5.js.map +1 -0
- package/dist/custom-elements/{p-Cp28eWhS.js → p-CGXKDN0Z.js} +3 -3
- package/dist/custom-elements/{p-Cp28eWhS.js.map → p-CGXKDN0Z.js.map} +1 -1
- package/dist/custom-elements/{p-Dto9R8Te.js → p-DMLFTaAS.js} +3 -4
- package/dist/custom-elements/p-DMLFTaAS.js.map +1 -0
- package/dist/custom-elements/{p-B2P7cgN3.js → p-Dij6eiDm.js} +4 -5
- package/dist/custom-elements/p-Dij6eiDm.js.map +1 -0
- package/dist/custom-elements/voa-accordion.js +1 -2
- package/dist/custom-elements/voa-accordion.js.map +1 -1
- package/dist/custom-elements/voa-alert.js +3 -4
- package/dist/custom-elements/voa-alert.js.map +1 -1
- package/dist/custom-elements/voa-avatar.js +1 -2
- package/dist/custom-elements/voa-avatar.js.map +1 -1
- package/dist/custom-elements/voa-badge.js +1 -1
- package/dist/custom-elements/voa-breadcrumbs-divider.js +2 -3
- package/dist/custom-elements/voa-breadcrumbs-divider.js.map +1 -1
- package/dist/custom-elements/voa-breadcrumbs-item.js +1 -2
- package/dist/custom-elements/voa-breadcrumbs-item.js.map +1 -1
- package/dist/custom-elements/voa-breadcrumbs.js +1 -2
- package/dist/custom-elements/voa-breadcrumbs.js.map +1 -1
- package/dist/custom-elements/voa-button.js +1 -1
- package/dist/custom-elements/voa-card.js +1 -2
- package/dist/custom-elements/voa-card.js.map +1 -1
- package/dist/custom-elements/voa-checkbox.js +1 -2
- package/dist/custom-elements/voa-checkbox.js.map +1 -1
- package/dist/custom-elements/voa-container-multi-select.js +2 -3
- package/dist/custom-elements/voa-container-multi-select.js.map +1 -1
- package/dist/custom-elements/voa-datepicker.js +1 -2
- package/dist/custom-elements/voa-datepicker.js.map +1 -1
- package/dist/custom-elements/voa-drawer.js +1 -2
- package/dist/custom-elements/voa-drawer.js.map +1 -1
- package/dist/custom-elements/voa-dropdown.js +1 -2
- package/dist/custom-elements/voa-dropdown.js.map +1 -1
- package/dist/custom-elements/voa-input-addon.js +2 -3
- package/dist/custom-elements/voa-input-addon.js.map +1 -1
- package/dist/custom-elements/voa-input.js +1 -2
- package/dist/custom-elements/voa-input.js.map +1 -1
- package/dist/custom-elements/voa-keybinding.js +1 -1
- package/dist/custom-elements/voa-link.js +1 -2
- package/dist/custom-elements/voa-link.js.map +1 -1
- package/dist/custom-elements/voa-list.js +1 -2
- package/dist/custom-elements/voa-list.js.map +1 -1
- package/dist/custom-elements/voa-modal.js +1 -2
- package/dist/custom-elements/voa-modal.js.map +1 -1
- package/dist/custom-elements/voa-option.js +1 -2
- package/dist/custom-elements/voa-option.js.map +1 -1
- package/dist/custom-elements/voa-pagination-item.js +1 -1
- package/dist/custom-elements/voa-pagination.js +2 -3
- package/dist/custom-elements/voa-pagination.js.map +1 -1
- package/dist/custom-elements/voa-progress.js +1 -2
- package/dist/custom-elements/voa-progress.js.map +1 -1
- package/dist/custom-elements/voa-radio.js +1 -2
- package/dist/custom-elements/voa-radio.js.map +1 -1
- package/dist/custom-elements/voa-select-base.js +1 -1
- package/dist/custom-elements/voa-select.js +2 -3
- package/dist/custom-elements/voa-select.js.map +1 -1
- package/dist/custom-elements/voa-skeleton.js +1 -2
- package/dist/custom-elements/voa-skeleton.js.map +1 -1
- package/dist/custom-elements/voa-stepper.js +1 -2
- package/dist/custom-elements/voa-stepper.js.map +1 -1
- package/dist/custom-elements/voa-switch.js +1 -2
- package/dist/custom-elements/voa-switch.js.map +1 -1
- package/dist/custom-elements/voa-tab-item.js +1 -2
- package/dist/custom-elements/voa-tab-item.js.map +1 -1
- package/dist/custom-elements/voa-tab.js +1 -2
- package/dist/custom-elements/voa-tab.js.map +1 -1
- package/dist/custom-elements/voa-table.js +1 -2
- package/dist/custom-elements/voa-table.js.map +1 -1
- package/dist/custom-elements/voa-tag.js +1 -2
- package/dist/custom-elements/voa-tag.js.map +1 -1
- package/dist/custom-elements/voa-text-area.js +1 -2
- package/dist/custom-elements/voa-text-area.js.map +1 -1
- package/dist/custom-elements/voa-timepicker.js +1 -2
- package/dist/custom-elements/voa-timepicker.js.map +1 -1
- package/dist/custom-elements/voa-tooltip-arrow.js +1 -2
- package/dist/custom-elements/voa-tooltip-arrow.js.map +1 -1
- package/dist/custom-elements/voa-tooltip.js +1 -2
- package/dist/custom-elements/voa-tooltip.js.map +1 -1
- package/dist/custom-elements/voa-upload.js +1 -2
- package/dist/custom-elements/voa-upload.js.map +1 -1
- package/dist/styles/voa-components.css +2 -2
- package/package.json +5 -1
- package/dist/custom-elements/p-B2P7cgN3.js.map +0 -1
- package/dist/custom-elements/p-CQr0ZKZZ.js.map +0 -1
- package/dist/custom-elements/p-DKnM_Ozb.js.map +0 -1
- package/dist/custom-elements/p-DPyVgztA.js.map +0 -1
- package/dist/custom-elements/p-Dto9R8Te.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"p-DPyVgztA.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,uPAAuP;;MCkBnQ,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAN1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,GAAG;AAE9B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAkB,KAAK;AAyCxC;IAvCC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,CAAC,mBAAmB,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;aAC3C,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,sBAAsB,EAAA,EAC9C,IAAI,CAAC,QAAQ,KAAK,KAAK,IACtB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,4IAA4I,EAC9I,IAAI,EAAC,cAAc,EACN,cAAA,EAAA,KAAK,EAClB,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,uBAAuB,EACzB,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,KAAK,EAAA,gBAAA,EACH,OAAO,EACtB,CAAA,CACE,KAEN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CAAM,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAc,cAAA,EAAA,KAAK,EAAG,CAAA,EACzF,CAAM,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,iBAAa,QAAQ,EAAA,WAAA,EAAW,GAAG,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,KAAK,EAEpF,EAAA,MAAA,CAAA,CACH,CACP,CACG,EACN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,sBAAsB,EAC/C,EAAA,IAAI,CAAC,QAAQ,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-keybinding/voa-keybinding.css?tag=voa-keybinding&encapsulation=shadow","src/components/voa-keybinding/voa-keybinding.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n display: inline-flex;\r\n align-items: center;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-keybinding__icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-keybinding__text {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n}\r\n\r\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\r\n\r\n/**\r\n * Componente Keybinding para exibir atalhos de teclado.\r\n * \r\n * Baseado no design do Figma, usado como subcomponente do input-addon.\r\n * Segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * \r\n * @part base - O elemento raiz do keybinding\r\n * @part key-icon - O ícone da tecla modificadora (⌘ ou Ctrl)\r\n * @part key-text - O texto da tecla\r\n */\r\n@Component({\r\n tag: 'voa-keybinding',\r\n styleUrl: 'voa-keybinding.css',\r\n shadow: true,\r\n scoped: false,\r\n})\r\nexport class VoaKeybinding {\r\n @Element() host: HTMLElement;\r\n\r\n /**\r\n * A tecla do atalho (ex: \"S\", \"K\", \"Enter\")\r\n */\r\n @Prop() shortcut: string = 'S';\r\n\r\n /**\r\n * Plataforma do atalho (mac ou win)\r\n */\r\n @Prop() platform: 'mac' | 'win' = 'mac';\r\n\r\n render() {\r\n return (\r\n <Host\r\n part=\"base\"\r\n class={{\r\n 'voa-keybinding': true,\r\n [`voa-keybinding--${this.platform}`]: true,\r\n }}\r\n >\r\n <div part=\"key-icon\" class=\"voa-keybinding__icon\">\r\n {this.platform === 'mac' ? (\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12.5 2C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H3.5C2.67157 14 2 13.3284 2 12.5V3.5C2 2.67157 2.67157 2 3.5 2H12.5Z\"\r\n fill=\"currentColor\"\r\n fill-opacity=\"0.1\"\r\n />\r\n <path\r\n d=\"M4 4H12M4 8H12M4 12H8\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n />\r\n </svg>\r\n ) : (\r\n <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0\" y=\"0\" width=\"20\" height=\"10\" rx=\"2\" fill=\"currentColor\" fill-opacity=\"0.1\" />\r\n <text x=\"10\" y=\"7\" text-anchor=\"middle\" font-size=\"8\" fill=\"currentColor\" font-weight=\"600\">\r\n Ctrl\r\n </text>\r\n </svg>\r\n )}\r\n </div>\r\n <span part=\"key-text\" class=\"voa-keybinding__text\">\r\n {this.shortcut}\r\n </span>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\n"],"version":3}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"p-Dto9R8Te.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-button/voa-button.css?tag=voa-button&encapsulation=shadow","src/components/voa-button/voa-button.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n * \r\n * IMPORTANT: NÃO incluir cores, fontes, espaçamentos ou valores hardcoded.\r\n * Apenas estrutura: display, position, flexbox, grid, box-sizing, cursor, etc.\r\n */\r\n\r\n:host {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Cursor must be on :host because pointer-events:none on button \r\n causes cursor to \"pass through\" to parent element */\r\n:host([disabled]),\r\n:host([loading]) {\r\n cursor: not-allowed;\r\n}\r\n\r\n.voa-button {\r\n /* APENAS estilos estruturais */\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n box-sizing: border-box;\r\n border: none; /* Remove borda padrão que afeta box-model */\r\n background: transparent; /* Garante que não há fundo padrão */\r\n padding: 0; /* Reset de padding */\r\n margin: 0; /* Reset de margin */\r\n \r\n /* Interatividade básica */\r\n cursor: pointer;\r\n user-select: none;\r\n \r\n /* Layout Flex */\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n gap: 0; /* Gap padrão zerado, definido externamente */\r\n}\r\n\r\n.voa-button:disabled,\r\n.voa-button--loading {\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n/* Containers para ícones - estrutura apenas */\r\n.voa-button__icon-leading,\r\n.voa-button__icon-trailing {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.voa-button__loader {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n /* Default size - can be overridden via ::part(loader) */\r\n width: var(--voa-loader-size, 16px);\r\n height: var(--voa-loader-size, 16px);\r\n /* Structural animation - rotation is physics, not art */\r\n animation: voa-spin var(--voa-loader-duration, 1s) linear infinite;\r\n}\r\n\r\n/* Keyframes must be inside Shadow DOM scope to be accessible */\r\n@keyframes voa-spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n}\r\n\r\n/* Ensure the default SVG fills the loader span */\r\n.voa-button__loader svg {\r\n height: 100%;\r\n width: 100%;\r\n}\r\n\r\n.voa-button__label {\r\n display: inline-block;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* Layout para slots de ícones */\r\n.voa-button ::slotted([slot=\"icon-leading\"]),\r\n.voa-button ::slotted([slot=\"icon-trailing\"]) {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Method } from '@stencil/core';\r\n\r\n/**\r\n * Botão principal do Voa Design System, baseado no design do Figma.\r\n * \r\n * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O elemento raiz do botão (elemento <button>)\r\n * @part label - O wrapper do texto do botão\r\n * @part icon-leading - Container do slot para ícone à esquerda\r\n * @part icon-trailing - Container do slot para ícone à direita\r\n */\r\n@Component({\r\n tag: 'voa-button',\r\n styleUrl: 'voa-button.css',\r\n shadow: true,\r\n scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaButton {\r\n @Element() host: HTMLVoaButtonElement;\r\n\r\n /**\r\n * Variante visual do botão.\r\n * Mapeia as variantes do Figma: primary, secondary, tonal, ghost, link.\r\n */\r\n @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tonal' | 'ghost' | 'link' = 'primary';\r\n\r\n /**\r\n * Tamanho do botão.\r\n * Mapeia os tamanhos do Figma: sm (small), md (medium), lg (large).\r\n */\r\n @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'lg';\r\n\r\n /**\r\n * Se verdadeiro, o botão estará desabilitado.\r\n */\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n /**\r\n * Se verdadeiro, o botão exibe um estado de carregamento (spinner)\r\n * e desabilita interações.\r\n */\r\n @Prop({ reflect: true }) loading: boolean = false;\r\n\r\n /**\r\n * O texto exibido no botão.\r\n * Pode ser fornecido via prop ou via slot padrão.\r\n */\r\n @Prop() label?: string;\r\n\r\n /**\r\n * Rótulo ARIA para acessibilidade.\r\n * Usado quando o botão não tem texto visível (apenas ícone).\r\n */\r\n @Prop() ariaLabel: string;\r\n\r\n /**\r\n * Tipo do botão HTML.\r\n * Padrão é 'button' para evitar submissão de formulários.\r\n */\r\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\r\n\r\n /**\r\n * Evento emitido ao clicar no botão.\r\n * Segue o padrão kebab-case: dsClick.\r\n */\r\n @Event() dsClick: EventEmitter<void>;\r\n\r\n /**\r\n * Método para acessibilidade WCAG 2.2 AA.\r\n * Delega foco ao elemento interno nativo.\r\n */\r\n @Method()\r\n async setFocus(): Promise<void> {\r\n const button = this.host.shadowRoot?.querySelector('button[part=\"base\"]') as HTMLButtonElement;\r\n if (button) {\r\n button.focus();\r\n }\r\n }\r\n\r\n /**\r\n * Handler para clique no botão.\r\n */\r\n private handleClick = (ev?: MouseEvent) => {\r\n if (this.disabled || this.loading) {\r\n ev?.preventDefault();\r\n ev?.stopPropagation();\r\n return;\r\n }\r\n this.dsClick.emit();\r\n };\r\n\r\n /**\r\n * Handler para navegação por teclado (WCAG 2.2 AA).\r\n * Suporta Enter, Space para ativar, e Escape para cancelar (se aplicável).\r\n */\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n if (this.disabled || this.loading) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case 'Enter':\r\n case ' ':\r\n event.preventDefault();\r\n this.handleClick();\r\n break;\r\n case 'Escape':\r\n // Para botões que abrem modais/dropdowns, Escape fecha\r\n // Para botões simples, não faz nada (comportamento padrão)\r\n break;\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n part=\"base\"\r\n type={this.type}\r\n class={{\r\n 'voa-button': true,\r\n [`voa-button--${this.variant}`]: true,\r\n [`voa-button--${this.size}`]: true,\r\n 'voa-button--disabled': this.disabled,\r\n 'voa-button--loading': this.loading,\r\n }}\r\n disabled={this.disabled || this.loading}\r\n onClick={this.handleClick}\r\n onKeyDown={this.handleKeyDown}\r\n aria-disabled={this.disabled || this.loading ? 'true' : undefined}\r\n aria-busy={this.loading ? 'true' : undefined}\r\n aria-label={\r\n this.loading \r\n ? 'Loading' \r\n : (this.ariaLabel || this.label)\r\n }\r\n >\r\n {this.loading && (\r\n <span part=\"loader\" class=\"voa-button__loader\">\r\n <slot name=\"loader\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M12 2V6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n <path d=\"M12 18V22\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n <path d=\"M4.93 4.93L7.76 7.76\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n <path d=\"M16.24 16.24L19.07 19.07\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n <path d=\"M2 12H6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n <path d=\"M18 12H22\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n <path d=\"M4.93 19.07L7.76 16.24\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n <path d=\"M16.24 7.76L19.07 4.93\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n </svg>\r\n </slot>\r\n </span>\r\n )}\r\n \r\n {!this.loading && (\r\n <span part=\"icon-leading\" class=\"voa-button__icon-leading\">\r\n <slot name=\"icon-leading\"></slot>\r\n </span>\r\n )}\r\n <span part=\"label\" class=\"voa-button__label\">\r\n <slot>{this.label}</slot>\r\n </span>\r\n <span part=\"icon-trailing\" class=\"voa-button__icon-trailing\">\r\n <slot name=\"icon-trailing\"></slot>\r\n </span>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n} "],"version":3}
|