@govbr-ds/webcomponents 2.0.0-next.19 → 2.0.0-next.20
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/cjs/br-button_2.cjs.entry.js +1 -1
- package/dist/cjs/br-button_2.cjs.entry.js.map +1 -1
- package/dist/cjs/br-input.cjs.entry.js +13 -9
- package/dist/cjs/br-input.cjs.entry.js.map +1 -1
- package/dist/cjs/br-tag.cjs.entry.js +88 -0
- package/dist/cjs/br-tag.cjs.entry.js.map +1 -0
- package/dist/cjs/br-textarea.cjs.entry.js +1 -1
- package/dist/cjs/br-upload.cjs.entry.js +1 -1
- package/dist/cjs/index-81c11ce2.js +4 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/webcomponents.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/icon/icon.css +1 -1
- package/dist/collection/components/input/input.js +152 -10
- package/dist/collection/components/input/input.js.map +1 -1
- package/dist/collection/components/tag/tag.css +643 -0
- package/dist/collection/components/tag/tag.js +256 -0
- package/dist/collection/components/tag/tag.js.map +1 -0
- package/dist/collection/components/textarea/textarea.js +1 -1
- package/dist/collection/components/upload/upload.js +1 -1
- package/dist/collection/pages/components/input/index.js +9 -0
- package/dist/collection/pages/components/tag/index.js +18 -0
- package/dist/collection/pages/scripts/menu.js +22 -22
- package/dist/collection/scripts/menu.js +146 -0
- package/dist/components/br-avatar.js +1 -1
- package/dist/components/br-icon.js +1 -1
- package/dist/components/br-input.js +1 -1
- package/dist/components/br-input.js.map +1 -1
- package/dist/components/br-message.js +1 -1
- package/dist/components/br-tag.d.ts +11 -0
- package/dist/components/br-tag.js +6 -0
- package/dist/components/br-tag.js.map +1 -0
- package/dist/components/br-textarea.js +1 -1
- package/dist/components/br-upload.js +1 -1
- package/dist/components/{p-a23c3f6b.js → p-64831033.js} +2 -2
- package/dist/components/{p-a23c3f6b.js.map → p-64831033.js.map} +1 -1
- package/dist/esm/br-button_2.entry.js +1 -1
- package/dist/esm/br-button_2.entry.js.map +1 -1
- package/dist/esm/br-input.entry.js +13 -9
- package/dist/esm/br-input.entry.js.map +1 -1
- package/dist/esm/br-tag.entry.js +84 -0
- package/dist/esm/br-tag.entry.js.map +1 -0
- package/dist/esm/br-textarea.entry.js +1 -1
- package/dist/esm/br-upload.entry.js +1 -1
- package/dist/esm/index-aab4a630.js +4 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/webcomponents.js +1 -1
- package/dist/esm-es5/br-button_2.entry.js +1 -1
- package/dist/esm-es5/br-button_2.entry.js.map +1 -1
- package/dist/esm-es5/br-input.entry.js +1 -1
- package/dist/esm-es5/br-input.entry.js.map +1 -1
- package/dist/esm-es5/br-tag.entry.js +6 -0
- package/dist/esm-es5/br-tag.entry.js.map +1 -0
- package/dist/esm-es5/br-textarea.entry.js +2 -2
- package/dist/esm-es5/br-upload.entry.js +1 -1
- package/dist/esm-es5/index-aab4a630.js +1 -1
- package/dist/esm-es5/index-aab4a630.js.map +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/loader.js.map +1 -1
- package/dist/esm-es5/webcomponents.js +1 -1
- package/dist/esm-es5/webcomponents.js.map +1 -1
- package/dist/types/components/input/input.d.ts +32 -0
- package/dist/types/components/tag/tag.d.ts +73 -0
- package/dist/types/components.d.ts +172 -0
- package/dist/webcomponents/{p-2cc63872.system.entry.js → p-28476b17.system.entry.js} +2 -2
- package/dist/webcomponents/p-447c8036.entry.js +6 -0
- package/dist/webcomponents/p-447c8036.entry.js.map +1 -0
- package/dist/webcomponents/p-55604b7f.system.entry.js +6 -0
- package/dist/webcomponents/p-55604b7f.system.entry.js.map +1 -0
- package/dist/webcomponents/{p-fd6c166e.entry.js → p-61523bc9.entry.js} +2 -2
- package/dist/webcomponents/{p-28aa7e4d.system.entry.js → p-8f156fc4.system.entry.js} +2 -2
- package/dist/webcomponents/p-8f156fc4.system.entry.js.map +1 -0
- package/dist/webcomponents/{p-3c4dea67.entry.js → p-9f0d01d1.entry.js} +2 -2
- package/dist/webcomponents/p-9f0d01d1.entry.js.map +1 -0
- package/dist/webcomponents/p-b88a5d9a.system.js +2 -2
- package/dist/webcomponents/p-b88a5d9a.system.js.map +1 -1
- package/dist/webcomponents/{p-34cec0b3.system.entry.js → p-baad00f8.system.entry.js} +2 -2
- package/dist/webcomponents/{p-155191ea.entry.js → p-d174c8cd.entry.js} +2 -2
- package/dist/webcomponents/{p-2cef0b07.system.entry.js → p-d83e2172.system.entry.js} +2 -2
- package/dist/webcomponents/{p-2cef0b07.system.entry.js.map → p-d83e2172.system.entry.js.map} +1 -1
- package/dist/webcomponents/{p-66b81760.entry.js → p-e6d921ef.entry.js} +2 -2
- package/dist/webcomponents/{p-66b81760.entry.js.map → p-e6d921ef.entry.js.map} +1 -1
- package/dist/webcomponents/webcomponents.esm.js +1 -1
- package/dist/webcomponents/webcomponents.esm.js.map +1 -1
- package/hydrate/index.js +123 -13
- package/hydrate/index.mjs +123 -13
- package/package.json +2 -2
- package/vscode-data.json +103 -0
- package/dist/webcomponents/p-28aa7e4d.system.entry.js.map +0 -1
- package/dist/webcomponents/p-3c4dea67.entry.js.map +0 -1
- /package/dist/webcomponents/{p-2cc63872.system.entry.js.map → p-28476b17.system.entry.js.map} +0 -0
- /package/dist/webcomponents/{p-fd6c166e.entry.js.map → p-61523bc9.entry.js.map} +0 -0
- /package/dist/webcomponents/{p-34cec0b3.system.entry.js.map → p-baad00f8.system.entry.js.map} +0 -0
- /package/dist/webcomponents/{p-155191ea.entry.js.map → p-d174c8cd.entry.js.map} +0 -0
package/hydrate/index.mjs
CHANGED
|
@@ -5235,7 +5235,7 @@ function defineIconifyIcon(name = 'iconify-icon') {
|
|
|
5235
5235
|
*/
|
|
5236
5236
|
defineIconifyIcon() || exportFunctions();
|
|
5237
5237
|
|
|
5238
|
-
const iconCss = "*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a{background-color:transparent}strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}[hidden]{display:none}.d-flex{display:-ms-flexbox !important;display:flex !important}.align-items-center{-ms-flex-align:center !important;align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter) * 0.5);padding-right:calc(var(--grid-gutter) * 0.5);width:100%}.col{-ms-flex:1 0 0%;flex:1 0 0%;min-width:8.3333333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.container{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:calc(var(--grid-gutter) * -0.5);margin-right:calc(var(--grid-gutter) * -0.5)}@media (min-width: 576px){.container{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media (min-width: 992px){.container{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media (min-width: 1600px){.container{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mr-2{margin-right:var(--spacing-scale-base) !important}.mr-n2{margin-right:calc(var(--spacing-scale-base) * -1) !important}.mb-3{margin-bottom:var(--spacing-scale-2x) !important}.mr-auto{margin-right:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}.py-3{padding-bottom:var(--spacing-scale-2x) !important;padding-top:var(--spacing-scale-2x) !important}.py-4{padding-bottom:var(--spacing-scale-3x) !important;padding-top:var(--spacing-scale-3x) !important}body{--bg-color:var(--background);--bg-color-rgb:var(--background-rgb);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half);color:var(--interactive);text-decoration:none}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--pressed))), to(rgba(var(--interactive-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}button{cursor:pointer}img{max-width:100%;vertical-align:middle}ul{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-webkit-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}:-ms-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-ms-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.text-primary-default{color:var(--color-primary-default) !important}.bg-support-01{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark);background:var(--color-support-01) !important}.text-nowrap{white-space:nowrap !important}.text-base{font-size:var(--font-size-scale-base) !important}.highlight{background:var(--status-highlight-background) -webkit-gradient(linear, left top, left bottom, from(var(--status-highlight-overlay)), to(var(--status-highlight-overlay)));background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{-webkit-box-shadow:var(--surface-shadow-sm);box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}:host{margin:
|
|
5238
|
+
const iconCss = "*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a{background-color:transparent}strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}[hidden]{display:none}.d-flex{display:-ms-flexbox !important;display:flex !important}.align-items-center{-ms-flex-align:center !important;align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter) * 0.5);padding-right:calc(var(--grid-gutter) * 0.5);width:100%}.col{-ms-flex:1 0 0%;flex:1 0 0%;min-width:8.3333333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.container{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:calc(var(--grid-gutter) * -0.5);margin-right:calc(var(--grid-gutter) * -0.5)}@media (min-width: 576px){.container{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media (min-width: 992px){.container{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media (min-width: 1600px){.container{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mr-2{margin-right:var(--spacing-scale-base) !important}.mr-n2{margin-right:calc(var(--spacing-scale-base) * -1) !important}.mb-3{margin-bottom:var(--spacing-scale-2x) !important}.mr-auto{margin-right:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}.py-3{padding-bottom:var(--spacing-scale-2x) !important;padding-top:var(--spacing-scale-2x) !important}.py-4{padding-bottom:var(--spacing-scale-3x) !important;padding-top:var(--spacing-scale-3x) !important}body{--bg-color:var(--background);--bg-color-rgb:var(--background-rgb);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half);color:var(--interactive);text-decoration:none}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--pressed))), to(rgba(var(--interactive-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}button{cursor:pointer}img{max-width:100%;vertical-align:middle}ul{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-webkit-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}:-ms-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-ms-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.text-primary-default{color:var(--color-primary-default) !important}.bg-support-01{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark);background:var(--color-support-01) !important}.text-nowrap{white-space:nowrap !important}.text-base{font-size:var(--font-size-scale-base) !important}.highlight{background:var(--status-highlight-background) -webkit-gradient(linear, left top, left bottom, from(var(--status-highlight-overlay)), to(var(--status-highlight-overlay)));background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{-webkit-box-shadow:var(--surface-shadow-sm);box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}:host{margin:var(--spacing-scale-base)}";
|
|
5239
5239
|
var BrIconStyle0 = iconCss;
|
|
5240
5240
|
|
|
5241
5241
|
/**
|
|
@@ -5326,7 +5326,7 @@ class Input {
|
|
|
5326
5326
|
}
|
|
5327
5327
|
};
|
|
5328
5328
|
this.renderInput = () => {
|
|
5329
|
-
return (hAsync("input", Object.assign({ class: this.isHighlight ? 'input-highlight' : null, id: this.customId, autocomplete: this.autocomplete, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder, readonly: this.readonly, required: this.required, title: this.el.title, type: this.type, value: this.value }, this.inheritedAttributes)));
|
|
5329
|
+
return (hAsync("input", Object.assign({ class: this.isHighlight ? 'input-highlight' : null, id: this.customId, autocomplete: this.autocomplete, disabled: this.disabled, autoCorrect: this.autocorrect, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, step: this.step, onInput: this.handleInput, placeholder: this.placeholder, readonly: this.readonly, required: this.required, title: this.el.title, type: this.type, value: this.value }, this.inheritedAttributes)));
|
|
5330
5330
|
};
|
|
5331
5331
|
this.renderHelpText = () => {
|
|
5332
5332
|
var _a;
|
|
@@ -5343,10 +5343,10 @@ class Input {
|
|
|
5343
5343
|
};
|
|
5344
5344
|
this.renderInlineInputContent = () => {
|
|
5345
5345
|
if (this.hasIconSlot) {
|
|
5346
|
-
return
|
|
5346
|
+
return hAsync("div", { class: "input-content" }, this.renderInputWithIcon());
|
|
5347
5347
|
}
|
|
5348
5348
|
else {
|
|
5349
|
-
return
|
|
5349
|
+
return hAsync("div", { class: "input-content" }, this.renderInputWithoutIcon());
|
|
5350
5350
|
}
|
|
5351
5351
|
};
|
|
5352
5352
|
this.renderInputContent = () => {
|
|
@@ -5356,11 +5356,7 @@ class Input {
|
|
|
5356
5356
|
return (hAsync("div", { class: "input-group" }, this.renderIconSlot(), this.renderInput(), this.renderButton(), this.renderHelpText()));
|
|
5357
5357
|
};
|
|
5358
5358
|
this.renderInputWithoutIcon = () => {
|
|
5359
|
-
return [
|
|
5360
|
-
this.renderInput(),
|
|
5361
|
-
this.renderButton(),
|
|
5362
|
-
this.renderHelpText()
|
|
5363
|
-
];
|
|
5359
|
+
return [this.renderInput(), this.renderButton(), this.renderHelpText()];
|
|
5364
5360
|
};
|
|
5365
5361
|
this.customId = `br-input-${v4()}`;
|
|
5366
5362
|
this.type = 'text';
|
|
@@ -5377,6 +5373,14 @@ class Input {
|
|
|
5377
5373
|
this.required = false;
|
|
5378
5374
|
this.value = undefined;
|
|
5379
5375
|
this.helpText = undefined;
|
|
5376
|
+
this.autocorrect = 'off';
|
|
5377
|
+
this.min = undefined;
|
|
5378
|
+
this.max = undefined;
|
|
5379
|
+
this.minlength = undefined;
|
|
5380
|
+
this.maxlength = undefined;
|
|
5381
|
+
this.multiple = false;
|
|
5382
|
+
this.pattern = undefined;
|
|
5383
|
+
this.step = undefined;
|
|
5380
5384
|
this.isPasswordVisible = false;
|
|
5381
5385
|
this.hasIconSlot = false;
|
|
5382
5386
|
this.hasActionSlot = false;
|
|
@@ -5419,7 +5423,7 @@ class Input {
|
|
|
5419
5423
|
return null;
|
|
5420
5424
|
}
|
|
5421
5425
|
render() {
|
|
5422
|
-
return (hAsync(Host, { key: '
|
|
5426
|
+
return (hAsync(Host, { key: 'd5e8fec1c09589e9c9e9aa206b3c1669ef1f04f8' }, hAsync("div", { key: '431430f8d91e3086b114d4bc7fa3b43e9b5b9eab', class: this.getInputCssClassMap() }, this.renderLabel(), this.isInline ? this.renderInlineInputContent() : this.renderInputContent())));
|
|
5423
5427
|
}
|
|
5424
5428
|
static get formAssociated() { return true; }
|
|
5425
5429
|
get el() { return getElement(this); }
|
|
@@ -5443,13 +5447,21 @@ class Input {
|
|
|
5443
5447
|
"required": [516],
|
|
5444
5448
|
"value": [1537],
|
|
5445
5449
|
"helpText": [513, "help-text"],
|
|
5450
|
+
"autocorrect": [513],
|
|
5451
|
+
"min": [514],
|
|
5452
|
+
"max": [514],
|
|
5453
|
+
"minlength": [514],
|
|
5454
|
+
"maxlength": [514],
|
|
5455
|
+
"multiple": [516],
|
|
5456
|
+
"pattern": [513],
|
|
5457
|
+
"step": [514],
|
|
5446
5458
|
"isPasswordVisible": [32],
|
|
5447
5459
|
"hasIconSlot": [32],
|
|
5448
5460
|
"hasActionSlot": [32]
|
|
5449
5461
|
},
|
|
5450
5462
|
"$listeners$": undefined,
|
|
5451
5463
|
"$lazyBundleId$": "-",
|
|
5452
|
-
"$attrsToReflect$": [["customId", "id"], ["type", "type"], ["autocomplete", "autocomplete"], ["density", "density"], ["disabled", "disabled"], ["isInline", "is-inline"], ["isHighlight", "is-highlight"], ["state", "state"], ["label", "label"], ["name", "name"], ["placeholder", "placeholder"], ["readonly", "readonly"], ["required", "required"], ["value", "value"], ["helpText", "help-text"]]
|
|
5464
|
+
"$attrsToReflect$": [["customId", "id"], ["type", "type"], ["autocomplete", "autocomplete"], ["density", "density"], ["disabled", "disabled"], ["isInline", "is-inline"], ["isHighlight", "is-highlight"], ["state", "state"], ["label", "label"], ["name", "name"], ["placeholder", "placeholder"], ["readonly", "readonly"], ["required", "required"], ["value", "value"], ["helpText", "help-text"], ["autocorrect", "autocorrect"], ["min", "min"], ["max", "max"], ["minlength", "minlength"], ["maxlength", "maxlength"], ["multiple", "multiple"], ["pattern", "pattern"], ["step", "step"]]
|
|
5453
5465
|
}; }
|
|
5454
5466
|
}
|
|
5455
5467
|
|
|
@@ -6004,6 +6016,103 @@ class Switch {
|
|
|
6004
6016
|
}; }
|
|
6005
6017
|
}
|
|
6006
6018
|
|
|
6019
|
+
const tagCss = "*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a{background-color:transparent}strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}[hidden]{display:none}.d-flex{display:-ms-flexbox !important;display:flex !important}.align-items-center{-ms-flex-align:center !important;align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter) * 0.5);padding-right:calc(var(--grid-gutter) * 0.5);width:100%}.col{-ms-flex:1 0 0%;flex:1 0 0%;min-width:8.3333333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.container{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:calc(var(--grid-gutter) * -0.5);margin-right:calc(var(--grid-gutter) * -0.5)}@media (min-width: 576px){.container{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media (min-width: 992px){.container{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media (min-width: 1600px){.container{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mr-2{margin-right:var(--spacing-scale-base) !important}.mr-n2{margin-right:calc(var(--spacing-scale-base) * -1) !important}.mb-3{margin-bottom:var(--spacing-scale-2x) !important}.mr-auto{margin-right:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}.py-3{padding-bottom:var(--spacing-scale-2x) !important;padding-top:var(--spacing-scale-2x) !important}.py-4{padding-bottom:var(--spacing-scale-3x) !important;padding-top:var(--spacing-scale-3x) !important}body{--bg-color:var(--background);--bg-color-rgb:var(--background-rgb);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half);color:var(--interactive);text-decoration:none}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--pressed))), to(rgba(var(--interactive-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}button{cursor:pointer}img{max-width:100%;vertical-align:middle}ul{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-webkit-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}:-ms-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-ms-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.text-primary-default{color:var(--color-primary-default) !important}.bg-support-01{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark);background:var(--color-support-01) !important}.text-nowrap{white-space:nowrap !important}.text-base{font-size:var(--font-size-scale-base) !important}.highlight{background:var(--status-highlight-background) -webkit-gradient(linear, left top, left bottom, from(var(--status-highlight-overlay)), to(var(--status-highlight-overlay)));background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{-webkit-box-shadow:var(--surface-shadow-sm);box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.br-tag{--tag-size:var(--tag-medium);--tag-small:var(--spacing-scale-2xh);--tag-medium:var(--spacing-scale-3xh);--tag-large:var(--spacing-scale-4xh);-ms-flex-align:center;align-items:center;background:var(--background-dark);border-radius:var(--surface-rounder-sm);color:var(--color-dark);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);-ms-flex-pack:center;justify-content:center;margin:0;min-height:var(--tag-size);padding:0 var(--spacing-scale-baseh);align-items:center;background:var(--background-dark);border-radius:var(--surface-rounder-sm);color:var(--color-dark);display:inline-flex;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);justify-content:center;margin:0;min-height:var(--tag-size);padding:0 var(--spacing-scale-baseh)}.br-tag+.br-tag{margin-left:var(--spacing-scale-half)}.br-tag.interaction{--tag-small:var(--spacing-scale-4x);--tag-medium:var(--spacing-scale-5x);--tag-large:var(--spacing-scale-5xh);font-size:var(--font-size-scale-up-01)}.br-tag.interaction{background:var(--interactive)}.br-tag.interaction .br-button{--button-size:var(--spacing-scale-3xh);--focus:var(--focus-color-dark);--hover:var(--hover-dark);--interactive-rgb:var(--color-dark-rgb);background-color:var(--interactive-light);border-radius:50%;color:var(--color-dark);margin-left:var(--spacing-scale-baseh);padding:0;width:var(--button-size)}.br-tag.interaction:hover .br-button{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}.br-tag.interaction:active .br-button{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--pressed))), to(rgba(var(--interactive-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}.br-tag.disabled input{cursor:not-allowed}.br-tag.status{--tag-small:var(--spacing-scale-baseh);--tag-medium:var(--spacing-scale-2x);--tag-large:var(--spacing-scale-3x);border:1px solid var(--background-light);border-radius:50%;min-width:var(--tag-size);padding:0}.br-tag.count{--tag-small:var(--spacing-scale-2xh);--tag-medium:var(--spacing-scale-3x);--tag-large:var(--spacing-scale-3xh);border:1px solid var(--background-light);border-radius:100em;min-width:var(--tag-size);padding-left:var(--spacing-scale-base);padding-right:var(--spacing-scale-base)}.br-tag.icon{--tag-small:var(--spacing-scale-3xh);--tag-medium:var(--spacing-scale-4x);--tag-large:var(--spacing-scale-5xh);border-radius:50%;min-width:var(--tag-size);padding:0}.br-tag.small{--tag-size:var(--tag-small)}.br-tag.medium{--tag-size:var(--tag-medium)}.br-tag.large{--tag-size:var(--tag-large)}.br-tag.interaction{--tag-small:var(--spacing-scale-4x);--tag-medium:var(--spacing-scale-5x);--tag-large:var(--spacing-scale-5xh);font-size:var(--font-size-scale-up-01)}.br-tag.interaction{background:var(--interactive)}.br-tag.interaction .br-button{--button-size:var(--spacing-scale-3xh);--focus:var(--focus-color-dark);--hover:var(--hover-dark);--interactive-rgb:var(--color-dark-rgb);background-color:var(--interactive-light);border-radius:50%;color:var(--color-dark);margin-left:var(--spacing-scale-baseh);padding:0;width:var(--button-size)}.br-tag.interaction:hover .br-button{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}.br-tag.interaction:active .br-button{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--pressed))), to(rgba(var(--interactive-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}.br-tag.disabled input{cursor:not-allowed}.br-tag.interaction{--tag-small:var(--spacing-scale-4x);--tag-medium:var(--spacing-scale-5x);--tag-large:var(--spacing-scale-5xh);font-size:var(--font-size-scale-up-01)}.br-tag.interaction{background:var(--interactive)}.br-tag.interaction .br-button{--button-size:var(--spacing-scale-3xh);--focus:var(--focus-color-dark);--hover:var(--hover-dark);--interactive-rgb:var(--color-dark-rgb);background-color:var(--interactive-light);border-radius:50%;color:var(--color-dark);margin-left:var(--spacing-scale-baseh);padding:0;width:var(--button-size)}.br-tag.interaction:hover .br-button{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}.br-tag.interaction:active .br-button{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--pressed))), to(rgba(var(--interactive-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}.br-tag.disabled input{cursor:not-allowed}.br-tag+.br-tag{margin-left:var(--spacing-scale-half)}.br-tag.small{--tag-size:var(--tag-small)}.br-tag.medium{--tag-size:var(--tag-medium)}.br-tag.large{--tag-size:var(--tag-large)}.br-tag.is-highlight,.br-tag.highlight,.br-tag[highlight]{background-color:#268744}.br-tag.success,.br-tag[success]{background-color:var(--success)}.br-tag.danger,.br-tag[danger]{background-color:var(--danger)}.br-tag.warning,.br-tag[warning]{background-color:var(--warning)}.br-tag.info,.br-tag[info]{background-color:var(--info)}:host{display:block}:host .tag-position{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-align:center;align-items:center}:host .tag-spacing-status{margin-left:var(--spacing-scale-half) !important}";
|
|
6020
|
+
var BrTagStyle0 = tagCss;
|
|
6021
|
+
|
|
6022
|
+
/**
|
|
6023
|
+
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/tag?tab=designer).
|
|
6024
|
+
*
|
|
6025
|
+
* @slot default - Slot utilizado para inserir conteúdo adicional na tag, como texto ou elementos HTML extras.
|
|
6026
|
+
*/
|
|
6027
|
+
class Tag {
|
|
6028
|
+
constructor(hostRef) {
|
|
6029
|
+
registerInstance(this, hostRef);
|
|
6030
|
+
this.brWillLoad = createEvent(this, "brWillLoad", 7);
|
|
6031
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
6032
|
+
this.elementInternals = hostRef.$hostElement$["s-ei"];
|
|
6033
|
+
}
|
|
6034
|
+
else {
|
|
6035
|
+
this.elementInternals = hostRef.$hostElement$.attachInternals();
|
|
6036
|
+
hostRef.$hostElement$["s-ei"] = this.elementInternals;
|
|
6037
|
+
}
|
|
6038
|
+
this.inheritedAttributes = {};
|
|
6039
|
+
this.handleClose = () => {
|
|
6040
|
+
this.el.remove();
|
|
6041
|
+
};
|
|
6042
|
+
this.label = '';
|
|
6043
|
+
this.iconName = '';
|
|
6044
|
+
this.color = '';
|
|
6045
|
+
this.density = 'small';
|
|
6046
|
+
this.shape = 'default';
|
|
6047
|
+
this.status = false;
|
|
6048
|
+
this.interaction = false;
|
|
6049
|
+
this.disabled = false;
|
|
6050
|
+
this.stateIconName = 'fa-solid:car';
|
|
6051
|
+
}
|
|
6052
|
+
componentWillLoad() {
|
|
6053
|
+
this.brWillLoad.emit();
|
|
6054
|
+
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
|
6055
|
+
}
|
|
6056
|
+
getCssClassMap() {
|
|
6057
|
+
const classes = {
|
|
6058
|
+
'br-tag': true,
|
|
6059
|
+
interaction: this.interaction,
|
|
6060
|
+
[this.color]: this.color !== '',
|
|
6061
|
+
small: this.density === 'small',
|
|
6062
|
+
medium: this.density === 'medium',
|
|
6063
|
+
large: this.density === 'large',
|
|
6064
|
+
count: this.shape === 'rounded' ? true : false,
|
|
6065
|
+
icon: this.shape === 'circle' ? true : false,
|
|
6066
|
+
status: this.status,
|
|
6067
|
+
};
|
|
6068
|
+
return classes;
|
|
6069
|
+
}
|
|
6070
|
+
renderIcon() {
|
|
6071
|
+
if (this.iconName.trim().length === 0)
|
|
6072
|
+
return null;
|
|
6073
|
+
return hAsync("br-icon", { style: { fontSize: 'var(--icon-size-base)' }, "icon-name": this.iconName, "aria-hidden": "true" });
|
|
6074
|
+
}
|
|
6075
|
+
renderLabel() {
|
|
6076
|
+
if (this.shape === 'circle' || this.status)
|
|
6077
|
+
return null;
|
|
6078
|
+
return (hAsync("span", { id: "interactivetag1", "aria-label": this.label }, this.label));
|
|
6079
|
+
}
|
|
6080
|
+
renderCloseButton() {
|
|
6081
|
+
if (!this.interaction)
|
|
6082
|
+
return null;
|
|
6083
|
+
return (hAsync("br-button", { type: "button", shape: "circle", emphasis: !this.interaction ? 'tertiary' : 'primary', "aria-label": "Fechar", colorMode: !this.interaction ? 'dark' : null, "aria-describedby": "interactivetag1", onClick: this.handleClose, disabled: this.disabled }, hAsync("br-icon", { "icon-name": "fa-solid:times" })));
|
|
6084
|
+
}
|
|
6085
|
+
renderStatusLabel() {
|
|
6086
|
+
if (!this.status)
|
|
6087
|
+
return null;
|
|
6088
|
+
return (hAsync("span", { class: "tag-spacing-status", id: "interactivetag1", "aria-label": this.label }, this.label));
|
|
6089
|
+
}
|
|
6090
|
+
render() {
|
|
6091
|
+
return (hAsync(Host, { key: '2ae1b9e249097b66fb02e0c903e294f73aad6bc0' }, hAsync("div", { key: '65f39b80147b977231e8bb9566f2aa1797597646', class: "tag-position" }, hAsync("span", Object.assign({ key: '452777774bfdba4a5eed2af6bb429f02f8dd9ed3', class: this.getCssClassMap() }, this.inheritedAttributes, { role: "alert", "aria-live": "assertive" }), this.renderIcon(), this.renderLabel(), this.renderCloseButton(), hAsync("slot", { key: 'c3cad61c4e5d7b683c9b4a6b66fbf0b62a56ac8a' })), this.renderStatusLabel())));
|
|
6092
|
+
}
|
|
6093
|
+
static get formAssociated() { return true; }
|
|
6094
|
+
get el() { return getElement(this); }
|
|
6095
|
+
static get style() { return BrTagStyle0; }
|
|
6096
|
+
static get cmpMeta() { return {
|
|
6097
|
+
"$flags$": 73,
|
|
6098
|
+
"$tagName$": "br-tag",
|
|
6099
|
+
"$members$": {
|
|
6100
|
+
"label": [513],
|
|
6101
|
+
"iconName": [513, "icon-name"],
|
|
6102
|
+
"color": [513],
|
|
6103
|
+
"density": [513],
|
|
6104
|
+
"shape": [513],
|
|
6105
|
+
"status": [516],
|
|
6106
|
+
"interaction": [516],
|
|
6107
|
+
"disabled": [516],
|
|
6108
|
+
"stateIconName": [32]
|
|
6109
|
+
},
|
|
6110
|
+
"$listeners$": undefined,
|
|
6111
|
+
"$lazyBundleId$": "-",
|
|
6112
|
+
"$attrsToReflect$": [["label", "label"], ["iconName", "icon-name"], ["color", "color"], ["density", "density"], ["shape", "shape"], ["status", "status"], ["interaction", "interaction"], ["disabled", "disabled"]]
|
|
6113
|
+
}; }
|
|
6114
|
+
}
|
|
6115
|
+
|
|
6007
6116
|
const textareaCss = "*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a{background-color:transparent}strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}[hidden]{display:none}.d-flex{display:-ms-flexbox !important;display:flex !important}.align-items-center{-ms-flex-align:center !important;align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter) * 0.5);padding-right:calc(var(--grid-gutter) * 0.5);width:100%}.col{-ms-flex:1 0 0%;flex:1 0 0%;min-width:8.3333333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.container{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:calc(var(--grid-gutter) * -0.5);margin-right:calc(var(--grid-gutter) * -0.5)}@media (min-width: 576px){.container{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media (min-width: 992px){.container{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media (min-width: 1600px){.container{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mr-2{margin-right:var(--spacing-scale-base) !important}.mr-n2{margin-right:calc(var(--spacing-scale-base) * -1) !important}.mb-3{margin-bottom:var(--spacing-scale-2x) !important}.mr-auto{margin-right:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}.py-3{padding-bottom:var(--spacing-scale-2x) !important;padding-top:var(--spacing-scale-2x) !important}.py-4{padding-bottom:var(--spacing-scale-3x) !important;padding-top:var(--spacing-scale-3x) !important}body{--bg-color:var(--background);--bg-color-rgb:var(--background-rgb);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half);color:var(--interactive);text-decoration:none}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--pressed))), to(rgba(var(--interactive-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}button{cursor:pointer}img{max-width:100%;vertical-align:middle}ul{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-webkit-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}:-ms-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-ms-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.text-primary-default{color:var(--color-primary-default) !important}.bg-support-01{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark);background:var(--color-support-01) !important}.text-nowrap{white-space:nowrap !important}.text-base{font-size:var(--font-size-scale-base) !important}.highlight{background:var(--status-highlight-background) -webkit-gradient(linear, left top, left bottom, from(var(--status-highlight-overlay)), to(var(--status-highlight-overlay)));background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{-webkit-box-shadow:var(--surface-shadow-sm);box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.br-textarea{--textarea-padding:var(--textarea-medium);--textarea-small:var(--spacing-scale-base);--textarea-medium:var(--spacing-scale-baseh);--textarea-large:var(--spacing-scale-2x);color:var(--color)}.br-textarea label{display:inline-block;margin-bottom:var(--spacing-scale-half)}.br-textarea textarea{background:var(--background-light);border:1px solid var(--border-color-alternative);border-radius:6px;color:var(--color);display:block;font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);padding:var(--textarea-padding);width:100%}.br-textarea.small textarea{--textarea-padding:var(--textarea-small)}.br-textarea.medium textarea{--textarea-padding:var(--textarea-medium)}.br-textarea.large textarea{--textarea-padding:var(--textarea-large)}.br-textarea.success textarea{border-color:var(--success);border-width:2px}.br-textarea.danger textarea{border-color:var(--danger);border-width:2px}.br-textarea.warning textarea{border-color:var(--warning);border-width:2px}.br-textarea.info textarea{border-color:var(--info);border-width:2px}.br-textarea textarea:focus,.br-textarea textarea:focus-visible{border-color:var(--focus) !important;-webkit-box-shadow:0 0 0 var(--surface-width-md) var(--focus);box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-textarea textarea:hover:not(:disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--color-rgb), var(--hover))), to(rgba(var(--color-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-textarea.dark-mode,.br-textarea.dark-mode label{--color:var(--color-dark);--focus-color:var(--focus-color-dark)}.br-textarea.dark-mode textarea{color:var(--color-light)}:host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Rawline, Raleway, sans-serif}";
|
|
6008
6117
|
var BrTextareaStyle0 = textareaCss;
|
|
6009
6118
|
|
|
@@ -6086,7 +6195,7 @@ class Textarea {
|
|
|
6086
6195
|
render() {
|
|
6087
6196
|
const caracteresRestantes = this.maxlength - this.currentLength;
|
|
6088
6197
|
const mostrarLimite = this.currentLength > 0;
|
|
6089
|
-
return (hAsync(Host, { key: '
|
|
6198
|
+
return (hAsync(Host, { key: '8bb5ea9efb0e2ee82d1c4074d7f9a8332fcfb635' }, hAsync("div", Object.assign({ key: 'cedcc004557860b4b2724c5180f2c012a109fcc1', class: this.getCssClassMap() }, this.inheritedAttributes), hAsync("div", { key: '3998a88b69f3dddc63ea41d08db7de96af28d25d', class: this.isInline ? 'row' : '' }, this.isInline ? (hAsync("div", { class: "col-auto pt-half" }, hAsync("label", { htmlFor: this.customId }, this.label))) : (hAsync("label", { htmlFor: this.customId }, this.label)), hAsync("div", { key: '8f94f9c2aaf2758e5ee9be6938be50ce8c82db7c', class: this.isInline ? 'col' : '' }, hAsync("textarea", Object.assign({ key: 'a642046a4dd9da93ac051eb6bf0ecfe711433680', id: this.customId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleChange }, (this.maxlength > 0 ? { maxLength: this.maxlength } : {}))), hAsync("div", { key: 'b859da1b3f48ed513e32374251a31ad3fc0f108f', class: "text-base mt-1" }, this.maxlength > 0 && (hAsync("div", { key: '0aaebed51ac98b00c4fca6e7d857664d117b0d74' }, mostrarLimite ? (hAsync("span", { class: "restantes", "aria-live": "polite", role: "status", id: "limitmax" }, "Restam ", hAsync("strong", null, caracteresRestantes), " caracteres")) : (hAsync("span", { class: "limit", "aria-live": "polite" }, "Limite m\u00E1ximo de ", hAsync("strong", null, this.maxlength), " caracteres"))))), hAsync("slot", { key: 'e24c4673cc638ce9e37acf05d2d80fea32b7f8fa' }))))));
|
|
6090
6199
|
}
|
|
6091
6200
|
static get formAssociated() { return true; }
|
|
6092
6201
|
get el() { return getElement(this); }
|
|
@@ -6268,7 +6377,7 @@ class Upload {
|
|
|
6268
6377
|
fileInput.click();
|
|
6269
6378
|
}
|
|
6270
6379
|
render() {
|
|
6271
|
-
return (hAsync(Host, { key: '
|
|
6380
|
+
return (hAsync(Host, { key: 'aab6988f0879747fdb594e3810704e497718635c' }, hAsync("div", { key: '274726af605123e4be46cd995b295c8eb147cbf4', class: this.getCssClassMap() }, hAsync("label", { key: '40753e4671f13bd2daab5c823284e64dd104214b', class: "upload-label", form: "single-file" }, hAsync("span", { key: 'd49a6054c231e556bb40ee4c8b06f0c8ff950507' }, this.label)), hAsync("button", { key: 'dafa2d9c447bb65f01e9b5dbd81f63dde33d38d2', class: "upload-button", type: "button", "aria-hidden": "true", tabIndex: this.disabled ? -1 : 0, disabled: this.disabled, "aria-label": "Selecionar arquivo para upload", onClick: () => this.handleFileSelection(), onDrop: (event) => this.handleDrop(event), onDragOver: (event) => this.handleDragOver(event) }, hAsync("br-icon", { key: '22b4bf3b4618ecdff30cdcb8db2185db6da0af5f', "icon-name": "fa-solid:upload", height: "16", "aria-hidden": "true" }), hAsync("span", { key: 'f8a3fbc9629d7a8cd85eb434d922356b5c61ab22' }, "Selecione o arquivo")), hAsync("input", Object.assign({ key: '83b65e6e1a55db70d42c6075bea037d58b86c457', class: "upload-input", id: "single-file", type: "file", "aria-hidden": "null", "aria-label": "enviar arquivo", onChange: ($event) => this.onInputChange($event.target.files) }, this.inheritedAttributes, { multiple: this.multiple, disabled: this.disabled, accept: this.accept })), hAsync("div", { key: '0a7a7f508c8379986a56d1a2aa5773b0f0709c17', id: "list-files", class: "upload-list" }, this.filesSelected ? this.renderFilesUploaded() : null))));
|
|
6272
6381
|
}
|
|
6273
6382
|
static get formAssociated() { return true; }
|
|
6274
6383
|
get el() { return getElement(this); }
|
|
@@ -6304,6 +6413,7 @@ registerComponents([
|
|
|
6304
6413
|
Message,
|
|
6305
6414
|
Radio,
|
|
6306
6415
|
Switch,
|
|
6416
|
+
Tag,
|
|
6307
6417
|
Textarea,
|
|
6308
6418
|
Upload,
|
|
6309
6419
|
]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@govbr-ds/webcomponents",
|
|
3
|
-
"version": "2.0.0-next.
|
|
3
|
+
"version": "2.0.0-next.20",
|
|
4
4
|
"description": "Projeto de Web Components baseado no GovBR-DS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"test:e2e": "npx playwright test",
|
|
39
39
|
"test:e2e:ui": "npx playwright test --ui",
|
|
40
40
|
"test:unit": "stencil test --spec -- --collectCoverage",
|
|
41
|
-
"test:watch": "stencil test --spec --watchAll"
|
|
41
|
+
"test:watch": "stencil test --spec --e2e --watchAll"
|
|
42
42
|
},
|
|
43
43
|
"lint-staged": {
|
|
44
44
|
"*.md": [
|
package/vscode-data.json
CHANGED
|
@@ -288,6 +288,18 @@
|
|
|
288
288
|
}
|
|
289
289
|
]
|
|
290
290
|
},
|
|
291
|
+
{
|
|
292
|
+
"name": "autocorrect",
|
|
293
|
+
"description": "Controla a correção automática do texto.",
|
|
294
|
+
"values": [
|
|
295
|
+
{
|
|
296
|
+
"name": "off"
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
"name": "on"
|
|
300
|
+
}
|
|
301
|
+
]
|
|
302
|
+
},
|
|
291
303
|
{
|
|
292
304
|
"name": "id",
|
|
293
305
|
"description": "Identificador único do input.\nCaso não seja fornecido, um ID gerado automaticamente será usado."
|
|
@@ -327,10 +339,34 @@
|
|
|
327
339
|
"name": "label",
|
|
328
340
|
"description": "Texto exibido como rótulo do input."
|
|
329
341
|
},
|
|
342
|
+
{
|
|
343
|
+
"name": "max",
|
|
344
|
+
"description": "Define o valor máximo para campos de entrada numéricos."
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
"name": "maxlength",
|
|
348
|
+
"description": "Define o comprimento máximo do valor do campo de entrada."
|
|
349
|
+
},
|
|
350
|
+
{
|
|
351
|
+
"name": "min",
|
|
352
|
+
"description": "Define o valor mínimo para campos de entrada numéricos."
|
|
353
|
+
},
|
|
354
|
+
{
|
|
355
|
+
"name": "minlength",
|
|
356
|
+
"description": "Define o comprimento mínimo do valor do campo de entrada."
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
"name": "multiple",
|
|
360
|
+
"description": "Se verdadeiro, permite a seleção de múltiplos arquivos."
|
|
361
|
+
},
|
|
330
362
|
{
|
|
331
363
|
"name": "name",
|
|
332
364
|
"description": "Nome do input, utilizado para identificação em formulários."
|
|
333
365
|
},
|
|
366
|
+
{
|
|
367
|
+
"name": "pattern",
|
|
368
|
+
"description": "Define o padrão de entrada para validação."
|
|
369
|
+
},
|
|
334
370
|
{
|
|
335
371
|
"name": "placeholder",
|
|
336
372
|
"description": "Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário."
|
|
@@ -361,6 +397,10 @@
|
|
|
361
397
|
}
|
|
362
398
|
]
|
|
363
399
|
},
|
|
400
|
+
{
|
|
401
|
+
"name": "step",
|
|
402
|
+
"description": "Define o valor do passo para campos de entrada numéricos."
|
|
403
|
+
},
|
|
364
404
|
{
|
|
365
405
|
"name": "type",
|
|
366
406
|
"description": "Especifica o tipo de entrada do campo. Pode ser um dos seguintes:\n- 'color': Seletor de cor\n- 'email': Campo para e-mail\n- 'hidden': Campo oculto\n- 'password': Campo para senha\n- 'range': Controle deslizante\n- 'search': Campo de pesquisa\n- 'number': Campo para números\n- 'tel': Campo para números de telefone\n- 'text': Campo de texto padrão\n- 'url': Campo para URLs",
|
|
@@ -712,6 +752,69 @@
|
|
|
712
752
|
}
|
|
713
753
|
]
|
|
714
754
|
},
|
|
755
|
+
{
|
|
756
|
+
"name": "br-tag",
|
|
757
|
+
"description": {
|
|
758
|
+
"kind": "markdown",
|
|
759
|
+
"value": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/tag?tab=designer)."
|
|
760
|
+
},
|
|
761
|
+
"attributes": [
|
|
762
|
+
{
|
|
763
|
+
"name": "color",
|
|
764
|
+
"description": "A propriedade 'color' permite definir a cor do componente.\nAceita valores como 'red', 'blue', entre outros, e é refletida no DOM."
|
|
765
|
+
},
|
|
766
|
+
{
|
|
767
|
+
"name": "density",
|
|
768
|
+
"description": "A propriedade 'density' permite definir a densidade do componente.\nAceita valores como 'small', 'medium' e 'large', e é refletida no DOM.",
|
|
769
|
+
"values": [
|
|
770
|
+
{
|
|
771
|
+
"name": "large"
|
|
772
|
+
},
|
|
773
|
+
{
|
|
774
|
+
"name": "medium"
|
|
775
|
+
},
|
|
776
|
+
{
|
|
777
|
+
"name": "small"
|
|
778
|
+
}
|
|
779
|
+
]
|
|
780
|
+
},
|
|
781
|
+
{
|
|
782
|
+
"name": "disabled",
|
|
783
|
+
"description": "A propriedade 'disabled' é um booleano que indica se o componente deve estar desabilitado.\nSe definido como true, o componente não permitirá interações do usuário."
|
|
784
|
+
},
|
|
785
|
+
{
|
|
786
|
+
"name": "icon-name",
|
|
787
|
+
"description": "A propriedade 'iconName' define o nome do ícone que será exibido ao lado do texto.\nO valor padrão é 'fa-solid:car', que corresponde a um ícone de carro da biblioteca Font Awesome."
|
|
788
|
+
},
|
|
789
|
+
{
|
|
790
|
+
"name": "interaction",
|
|
791
|
+
"description": "A propriedade 'interaction' é um booleano que indica se a interação deve ser habilitada.\nSe definido como true, o componente permitirá interações do usuário."
|
|
792
|
+
},
|
|
793
|
+
{
|
|
794
|
+
"name": "label",
|
|
795
|
+
"description": "A propriedade 'label' é uma string que representa o texto a ser exibido no componente.\nEla é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente."
|
|
796
|
+
},
|
|
797
|
+
{
|
|
798
|
+
"name": "shape",
|
|
799
|
+
"description": "A propriedade 'shape' define o formato do componente.\nValores possíveis:\n- 'circle': Componente com formato circular.\n- 'rounded': Componente com bordas arredondadas.\n- 'default': Componente com formato padrão.",
|
|
800
|
+
"values": [
|
|
801
|
+
{
|
|
802
|
+
"name": "circle"
|
|
803
|
+
},
|
|
804
|
+
{
|
|
805
|
+
"name": "default"
|
|
806
|
+
},
|
|
807
|
+
{
|
|
808
|
+
"name": "rounded"
|
|
809
|
+
}
|
|
810
|
+
]
|
|
811
|
+
},
|
|
812
|
+
{
|
|
813
|
+
"name": "status",
|
|
814
|
+
"description": "A propriedade 'status' é um booleano que indica se o status deve ser exibido.\nSe definido como true, o status será mostrado ao lado do texto."
|
|
815
|
+
}
|
|
816
|
+
]
|
|
817
|
+
},
|
|
715
818
|
{
|
|
716
819
|
"name": "br-textarea",
|
|
717
820
|
"description": {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["inputCss","BrInputStyle0","Input","exports","this","inheritedAttributes","handleInput","event","_this","value","target","valueChange","emit","renderLabel","_a","label","length","isInline","h","class","htmlFor","customId","renderInput","Object","assign","isHighlight","id","autocomplete","disabled","onInput","placeholder","readonly","required","title","el","type","renderHelpText","helpText","name","renderIconPassword","iconName","isPasswordVisible","togglePasswordVisibility","input","shadowRoot","querySelector","renderInlineInputContent","hasIconSlot","renderInputWithIcon","renderInputWithoutIcon","renderInputContent","renderIconSlot","renderButton","concat","uuidv4","class_1","prototype","componentWillLoad","hasSlotContent","hasActionSlot","inheritAriaAttributes","getInputCssClassMap","small","density","large","medium","success","state","danger","info","warning","slotName","shape","onClick","render","Host","key"],"sources":["src/components/input/input.scss?tag=br-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["@import \"../../../../../node_modules/@govbr-ds/core/src/components/input/input.scss\";\n\n:host {\n display: block;\n\n .br-input .input-icon {\n margin-top: 0.1em;\n margin-left: var(--spacing-scale-base);\n }\n\n .br-input .input-icon + input {\n padding-left: calc(var(--input-padding-icon) + 3px);\n }\n}\n\n\n.br-input br-button {\n float: right;\n margin-right: var(--input-button-margin);\n margin-top: calc((var(--input-size) + var(--spacing-scale-half)) * -1);\n padding: 0;\n position: relative;\n}\n\n .button-transform{\n transform: translateY(calc((var(--input-size) - 32px) * 0.5));\n }\n","import { AttachInternals, Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core'\nimport { v4 as uuidv4 } from 'uuid'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n *\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/input?tab=designer).\n *\n * @slot action - Botão à direita do input.\n * @slot icon - Ícone à esquerda do input.\n * @slot help-text - Personalização do texto de ajuda.\n */\n@Component({\n tag: 'br-input',\n styleUrl: 'input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Input {\n /**\n * Referência ao elemento host do componente.\n * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n */\n @Element() el: HTMLBrInputElement\n\n @AttachInternals() elementInternals: ElementInternals\n\n /**\n * Identificador único do input.\n * Caso não seja fornecido, um ID gerado automaticamente será usado.\n */\n @Prop({ reflect: true, attribute: 'id' }) customId: string = `br-input-${uuidv4()}`\n\n /**\n * Especifica o tipo de entrada do campo. Pode ser um dos seguintes:\n * - 'color': Seletor de cor\n * - 'email': Campo para e-mail\n * - 'hidden': Campo oculto\n * - 'password': Campo para senha\n * - 'range': Controle deslizante\n * - 'search': Campo de pesquisa\n * - 'number': Campo para números\n * - 'tel': Campo para números de telefone\n * - 'text': Campo de texto padrão\n * - 'url': Campo para URLs\n */\n @Prop({ reflect: true }) type:\n | 'color'\n | 'email'\n | 'hidden'\n | 'password'\n | 'range'\n | 'search'\n | 'number'\n | 'tel'\n | 'text'\n | 'file'\n | 'url' = 'text'\n\n /**\n * Controla o comportamento de preenchimento automático do navegador para o input.\n */\n @Prop({ reflect: true }) autocomplete: 'on' | 'off'\n\n /**\n * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n */\n @Prop({ reflect: true }) density: 'large' | 'medium' | 'small' = 'medium'\n\n /**\n * Desativa o input, tornando-o não interativo.\n */\n @Prop({ reflect: true }) disabled: boolean = false\n\n /**\n * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n */\n @Prop({ reflect: true }) isInline: boolean = false\n\n /**\n * Se verdadeiro, o input terá destaque visual.\n */\n @Prop({ reflect: true }) isHighlight: boolean = false\n\n /**\n * Define o estado do input\n * Os possíveis valores são:\n * - 'info': Mensagem informativa.\n * - 'warning': Mensagem de aviso.\n * - 'danger': Mensagem de erro ou alerta.\n * - 'success': Mensagem de sucesso.\n * O valor padrão é 'info'.\n */\n @Prop({ reflect: true }) state: 'info' | 'warning' | 'danger' | 'success'\n\n /**\n * Texto exibido como rótulo do input.\n */\n @Prop({ reflect: true }) label: string\n\n /**\n * Nome do input, utilizado para identificação em formulários.\n */\n @Prop({ reflect: true }) name: string\n\n /**\n * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.\n */\n @Prop({ reflect: true }) placeholder: string\n\n /**\n * Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário.\n */\n @Prop({ reflect: true }) readonly: boolean = false\n\n /**\n * Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.\n */\n @Prop({ reflect: true }) required: boolean = false\n\n /**\n * Valor inicial exibido no input.\n * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.\n */\n @Prop({ reflect: true, mutable: true }) value: string\n\n /**\n * Texto adicional que fornece ajuda ou informações sobre o input.\n */\n @Prop({ reflect: true }) helpText: string\n\n @State() isPasswordVisible: boolean = false\n\n @State() hasIconSlot: boolean = false\n\n @State() hasActionSlot: boolean = false\n\n componentWillLoad() {\n this.hasIconSlot = this.hasSlotContent('icon')\n this.hasActionSlot = this.hasSlotContent('action')\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n private getInputCssClassMap(): CssClassMap {\n return {\n 'br-input': true,\n 'input-button': this.hasActionSlot,\n small: this.density === 'small',\n large: this.density === 'large',\n medium: this.density === 'medium',\n 'input-inline': this.isInline,\n 'input-highlight': this.isHighlight,\n success: this.state === 'success',\n danger: this.state === 'danger',\n info: this.state === 'info',\n warning: this.state === 'warning',\n }\n }\n\n private inheritedAttributes: Attributes = {}\n\n /**\n * Valor atualizado do input\n */\n @Event() valueChange!: EventEmitter<string>\n private readonly handleInput = (event: Event) => {\n this.value = (event.target as HTMLInputElement).value\n this.valueChange.emit(this.value)\n }\n\n private readonly renderLabel = () => {\n if (this.label?.length > 0) {\n if (this.isInline) {\n return (\n <div class=\"input-label\">\n <label class=\"text-nowrap\" htmlFor={this.customId}>\n {this.label}\n </label>\n </div>\n )\n } else {\n return <label htmlFor={this.customId}>{this.label}</label>\n }\n }\n }\n\n private hasSlotContent(slotName: string): boolean {\n return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n }\n\n private readonly renderInput = () => {\n return (\n <input\n class={this.isHighlight ? 'input-highlight' : null}\n id={this.customId}\n autocomplete={this.autocomplete}\n disabled={this.disabled}\n onInput={this.handleInput}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n title={this.el.title}\n type={this.type}\n value={this.value}\n {...this.inheritedAttributes}\n />\n )\n }\n\n private readonly renderHelpText = () => {\n return this.helpText?.length > 0 ? <p>{this.helpText}</p> : <slot name=\"help-text\"></slot>\n }\n\n private readonly renderIconPassword = () => {\n const iconName = this.isPasswordVisible ? 'fa-solid:eye-slash' : 'fa-solid:eye';\n return <br-icon icon-name={iconName}></br-icon>;\n }\n\n private readonly togglePasswordVisibility = () => {\n const input = this.el.shadowRoot.querySelector('input')\n this.isPasswordVisible = !this.isPasswordVisible\n input.type = this.isPasswordVisible ? 'text' : 'password'\n }\n\n private renderIconSlot() {\n if (this.hasSlotContent('icon')) {\n return (\n <div class=\"input-icon\">\n <slot name=\"icon\"></slot>\n </div>\n )\n }\n }\n\n private renderButton() {\n if (this.type === 'password') {\n return (\n <br-button\n class=\"button-transform\"\n shape=\"circle\"\n density=\"small\"\n aria-label=\"botão de ação do ícone\"\n onClick={this.togglePasswordVisibility}\n >\n {this.renderIconPassword()}\n </br-button>\n )\n } else if (this.hasSlotContent('action')) {\n return (\n <br-button\n class=\"button-transform\"\n shape=\"circle\"\n density=\"small\"\n aria-label=\"botão de ação do ícone\"\n // onClick={this.onIconAction}\n >\n <slot name=\"action\"></slot>\n </br-button>\n )\n }\n return null\n }\n\n private readonly renderInlineInputContent = () => {\n if (this.hasIconSlot) {\n return (\n <div class=\"input-content\">\n {this.renderInputWithIcon()}\n </div>\n );\n } else {\n return (\n <div class=\"input-content\">\n {this.renderInputWithoutIcon()}\n </div>\n );\n }\n };\n\n private readonly renderInputContent = () => {\n return this.hasIconSlot ? this.renderInputWithIcon() : this.renderInputWithoutIcon()\n }\n\n private readonly renderInputWithIcon = () => {\n return (\n <div class=\"input-group\">\n {this.renderIconSlot()}\n {this.renderInput()}\n {this.renderButton()}\n {this.renderHelpText()}\n </div>\n );\n };\n\n private readonly renderInputWithoutIcon = () => {\n return [\n this.renderInput(),\n this.renderButton(),\n this.renderHelpText()\n ]\n };\n\n render() {\n return (\n <Host>\n <div class={this.getInputCssClassMap()}>\n {this.renderLabel()}\n\n {this.isInline ? (\n this.renderInlineInputContent()\n ) : (\n this.renderInputContent()\n )}\n </div>\n </Host>\n )\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["inputCss","BrInputStyle0","Input","this","inheritedAttributes","handleInput","event","value","target","valueChange","emit","renderLabel","_a","label","length","isInline","h","class","htmlFor","customId","renderInput","Object","assign","isHighlight","id","autocomplete","disabled","onInput","placeholder","readonly","required","title","el","type","renderHelpText","helpText","name","renderIconPassword","iconName","isPasswordVisible","togglePasswordVisibility","input","shadowRoot","querySelector","renderInlineInputContent","hasIconSlot","renderInputWithIcon","renderInputWithoutIcon","renderInputContent","renderIconSlot","renderButton","uuidv4","componentWillLoad","hasSlotContent","hasActionSlot","inheritAriaAttributes","getInputCssClassMap","small","density","large","medium","success","state","danger","info","warning","slotName","shape","onClick","render","Host","key"],"sources":["src/components/input/input.scss?tag=br-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["@import \"../../../../../node_modules/@govbr-ds/core/src/components/input/input.scss\";\n\n:host {\n display: block;\n\n .br-input .input-icon {\n margin-top: 0.1em;\n margin-left: var(--spacing-scale-base);\n }\n\n .br-input .input-icon + input {\n padding-left: calc(var(--input-padding-icon) + 3px);\n }\n}\n\n\n.br-input br-button {\n float: right;\n margin-right: var(--input-button-margin);\n margin-top: calc((var(--input-size) + var(--spacing-scale-half)) * -1);\n padding: 0;\n position: relative;\n}\n\n .button-transform{\n transform: translateY(calc((var(--input-size) - 32px) * 0.5));\n }\n","import { AttachInternals, Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core'\nimport { v4 as uuidv4 } from 'uuid'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n *\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/input?tab=designer).\n *\n * @slot action - Botão à direita do input.\n * @slot icon - Ícone à esquerda do input.\n * @slot help-text - Personalização do texto de ajuda.\n */\n@Component({\n tag: 'br-input',\n styleUrl: 'input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Input {\n /**\n * Referência ao elemento host do componente.\n * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n */\n @Element() el: HTMLBrInputElement\n\n @AttachInternals() elementInternals: ElementInternals\n\n /**\n * Identificador único do input.\n * Caso não seja fornecido, um ID gerado automaticamente será usado.\n */\n @Prop({ reflect: true, attribute: 'id' }) customId: string = `br-input-${uuidv4()}`\n\n /**\n * Especifica o tipo de entrada do campo. Pode ser um dos seguintes:\n * - 'color': Seletor de cor\n * - 'email': Campo para e-mail\n * - 'hidden': Campo oculto\n * - 'password': Campo para senha\n * - 'range': Controle deslizante\n * - 'search': Campo de pesquisa\n * - 'number': Campo para números\n * - 'tel': Campo para números de telefone\n * - 'text': Campo de texto padrão\n * - 'url': Campo para URLs\n */\n @Prop({ reflect: true }) type:\n | 'color'\n | 'email'\n | 'hidden'\n | 'password'\n | 'range'\n | 'search'\n | 'number'\n | 'tel'\n | 'text'\n | 'file'\n | 'url' = 'text'\n\n /**\n * Controla o comportamento de preenchimento automático do navegador para o input.\n */\n @Prop({ reflect: true }) autocomplete: 'on' | 'off'\n\n /**\n * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n */\n @Prop({ reflect: true }) density: 'large' | 'medium' | 'small' = 'medium'\n\n /**\n * Desativa o input, tornando-o não interativo.\n */\n @Prop({ reflect: true }) disabled: boolean = false\n\n /**\n * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n */\n @Prop({ reflect: true }) isInline: boolean = false\n\n /**\n * Se verdadeiro, o input terá destaque visual.\n */\n @Prop({ reflect: true }) isHighlight: boolean = false\n\n /**\n * Define o estado do input\n * Os possíveis valores são:\n * - 'info': Mensagem informativa.\n * - 'warning': Mensagem de aviso.\n * - 'danger': Mensagem de erro ou alerta.\n * - 'success': Mensagem de sucesso.\n * O valor padrão é 'info'.\n */\n @Prop({ reflect: true }) state: 'info' | 'warning' | 'danger' | 'success'\n\n /**\n * Texto exibido como rótulo do input.\n */\n @Prop({ reflect: true }) label: string\n\n /**\n * Nome do input, utilizado para identificação em formulários.\n */\n @Prop({ reflect: true }) name: string\n\n /**\n * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.\n */\n @Prop({ reflect: true }) placeholder: string\n\n /**\n * Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário.\n */\n @Prop({ reflect: true }) readonly: boolean = false\n\n /**\n * Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.\n */\n @Prop({ reflect: true }) required: boolean = false\n\n /**\n * Valor inicial exibido no input.\n * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.\n */\n @Prop({ reflect: true, mutable: true }) value: string\n\n /**\n * Texto adicional que fornece ajuda ou informações sobre o input.\n */\n @Prop({ reflect: true }) helpText: string\n\n @State() isPasswordVisible: boolean = false\n\n @State() hasIconSlot: boolean = false\n\n @State() hasActionSlot: boolean = false\n\n componentWillLoad() {\n this.hasIconSlot = this.hasSlotContent('icon')\n this.hasActionSlot = this.hasSlotContent('action')\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n private getInputCssClassMap(): CssClassMap {\n return {\n 'br-input': true,\n 'input-button': this.hasActionSlot,\n small: this.density === 'small',\n large: this.density === 'large',\n medium: this.density === 'medium',\n 'input-inline': this.isInline,\n 'input-highlight': this.isHighlight,\n success: this.state === 'success',\n danger: this.state === 'danger',\n info: this.state === 'info',\n warning: this.state === 'warning',\n }\n }\n\n private inheritedAttributes: Attributes = {}\n\n /**\n * Valor atualizado do input\n */\n @Event() valueChange!: EventEmitter<string>\n private readonly handleInput = (event: Event) => {\n this.value = (event.target as HTMLInputElement).value\n this.valueChange.emit(this.value)\n }\n\n private readonly renderLabel = () => {\n if (this.label?.length > 0) {\n if (this.isInline) {\n return (\n <div class=\"input-label\">\n <label class=\"text-nowrap\" htmlFor={this.customId}>\n {this.label}\n </label>\n </div>\n )\n } else {\n return <label htmlFor={this.customId}>{this.label}</label>\n }\n }\n }\n\n private hasSlotContent(slotName: string): boolean {\n return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n }\n\n private readonly renderInput = () => {\n return (\n <input\n class={this.isHighlight ? 'input-highlight' : null}\n id={this.customId}\n autocomplete={this.autocomplete}\n disabled={this.disabled}\n onInput={this.handleInput}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n title={this.el.title}\n type={this.type}\n value={this.value}\n {...this.inheritedAttributes}\n />\n )\n }\n\n private readonly renderHelpText = () => {\n return this.helpText?.length > 0 ? <p>{this.helpText}</p> : <slot name=\"help-text\"></slot>\n }\n\n private readonly renderIconPassword = () => {\n const iconName = this.isPasswordVisible ? 'fa-solid:eye-slash' : 'fa-solid:eye';\n return <br-icon icon-name={iconName}></br-icon>;\n }\n\n private readonly togglePasswordVisibility = () => {\n const input = this.el.shadowRoot.querySelector('input')\n this.isPasswordVisible = !this.isPasswordVisible\n input.type = this.isPasswordVisible ? 'text' : 'password'\n }\n\n private renderIconSlot() {\n if (this.hasSlotContent('icon')) {\n return (\n <div class=\"input-icon\">\n <slot name=\"icon\"></slot>\n </div>\n )\n }\n }\n\n private renderButton() {\n if (this.type === 'password') {\n return (\n <br-button\n class=\"button-transform\"\n shape=\"circle\"\n density=\"small\"\n aria-label=\"botão de ação do ícone\"\n onClick={this.togglePasswordVisibility}\n >\n {this.renderIconPassword()}\n </br-button>\n )\n } else if (this.hasSlotContent('action')) {\n return (\n <br-button\n class=\"button-transform\"\n shape=\"circle\"\n density=\"small\"\n aria-label=\"botão de ação do ícone\"\n // onClick={this.onIconAction}\n >\n <slot name=\"action\"></slot>\n </br-button>\n )\n }\n return null\n }\n\n private readonly renderInlineInputContent = () => {\n if (this.hasIconSlot) {\n return (\n <div class=\"input-content\">\n {this.renderInputWithIcon()}\n </div>\n );\n } else {\n return (\n <div class=\"input-content\">\n {this.renderInputWithoutIcon()}\n </div>\n );\n }\n };\n\n private readonly renderInputContent = () => {\n return this.hasIconSlot ? this.renderInputWithIcon() : this.renderInputWithoutIcon()\n }\n\n private readonly renderInputWithIcon = () => {\n return (\n <div class=\"input-group\">\n {this.renderIconSlot()}\n {this.renderInput()}\n {this.renderButton()}\n {this.renderHelpText()}\n </div>\n );\n };\n\n private readonly renderInputWithoutIcon = () => {\n return [\n this.renderInput(),\n this.renderButton(),\n this.renderHelpText()\n ]\n };\n\n render() {\n return (\n <Host>\n <div class={this.getInputCssClassMap()}>\n {this.renderLabel()}\n\n {this.isInline ? (\n this.renderInlineInputContent()\n ) : (\n this.renderInputContent()\n )}\n </div>\n </Host>\n )\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
/package/dist/webcomponents/{p-2cc63872.system.entry.js.map → p-28476b17.system.entry.js.map}
RENAMED
|
File without changes
|
|
File without changes
|
/package/dist/webcomponents/{p-34cec0b3.system.entry.js.map → p-baad00f8.system.entry.js.map}
RENAMED
|
File without changes
|
|
File without changes
|