@govbr-ds/webcomponents 2.0.0-next.16 → 2.0.0-next.17
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-input.cjs.entry.js +31 -10
- package/dist/cjs/br-input.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/webcomponents.cjs.js +1 -1
- package/dist/collection/components/input/input.css +3 -0
- package/dist/collection/components/input/input.js +31 -10
- package/dist/collection/components/input/input.js.map +1 -1
- package/dist/components/br-input.js +32 -11
- package/dist/components/br-input.js.map +1 -1
- package/dist/esm/br-input.entry.js +31 -10
- package/dist/esm/br-input.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/webcomponents.js +1 -1
- package/dist/types/components/input/input.d.ts +6 -2
- package/dist/webcomponents/{p-ee647c4a.entry.js → p-9a6aecb4.entry.js} +2 -2
- package/dist/webcomponents/p-9a6aecb4.entry.js.map +1 -0
- package/dist/webcomponents/webcomponents.esm.js +1 -1
- package/dist/webcomponents/webcomponents.esm.js.map +1 -1
- package/hydrate/index.js +32 -11
- package/hydrate/index.mjs +32 -11
- package/package.json +1 -1
- package/dist/webcomponents/p-ee647c4a.entry.js.map +0 -1
|
@@ -4,7 +4,7 @@ import { d as defineCustomElement$3 } from './p-6eb1a607.js';
|
|
|
4
4
|
import { d as defineCustomElement$2 } from './p-215ac56c.js';
|
|
5
5
|
import { v as v4 } from './p-14616bce.js';
|
|
6
6
|
|
|
7
|
-
const inputCss = "*,*::before,*::after{box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-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]{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:flex !important}.align-items-center{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{flex:1 0 0%;min-width:8.3333333333%}.col-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:flex;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}.mb-3{margin-bottom:var(--spacing-scale-2x) !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:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{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}::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}.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) 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]+*{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-input{--input-button-margin:var(--spacing-scale-half);--input-padding:0 var(--spacing-scale-2x);--input-padding-button:var(--spacing-scale-5x);--input-padding-icon:var(--spacing-scale-5x);--input-size:var(--input-medium);--input-small:32px;--input-medium:40px;--input-large:48px;--input-highlight:56px;--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);color:var(--color);position:relative}.br-input input{background-color:var(--background-light);border-color:var(--border-color-alternative);border-radius:var(--surface-rounder-sm);border-style:var(--border-style);border-width:var(--border-width);color:var(--color-light);display:block;font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);height:var(--input-size);margin-top:var(--spacing-scale-half);padding-bottom:0;padding-left:var(--spacing-scale-2x);padding-right:var(--spacing-scale-2x);padding-top:0;width:100%}.br-input input::-ms-reveal,.br-input input::-ms-clear,.br-input input::-webkit-calendar-picker-indicator{display:none}.br-input input[type=search]::-webkit-search-decoration,.br-input input[type=search]::-webkit-search-cancel-button,.br-input input[type=search]::-webkit-search-results-button,.br-input input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.br-input.input-inline{display:flex}.br-input.input-inline .input-label{margin-right:var(--spacing-scale-baseh);margin-top:calc(var(--input-size) * 0.5 - var(--spacing-scale-half))}.br-input .input-group{position:relative}.br-input .input-icon{align-items:center;color:var(--border-color-alternative);display:flex;height:var(--input-size);margin-left:var(--spacing-scale-baseh);position:absolute}.br-input .input-icon+input{padding-left:var(--input-padding-icon)}.br-input .br-button{--button-size:var(--button-small);--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);border-radius:50%;float:right;margin-right:var(--input-button-margin);margin-top:calc((var(--input-size) + var(--spacing-scale-half)) * -1);padding:0;position:relative;transform:translateY(calc((var(--input-size) - var(--button-size)) * 0.5));width:var(--button-size)}.br-input.input-button input{padding-right:var(--input-padding-button)}.br-input.has-icon input{padding-right:var(--input-padding-icon)}.br-input.has-icon .br-button.circle{float:right;margin-right:var(--spacing-scale-half);margin-top:calc((var(--button-size) + var(--spacing-scale-half) + var(--spacing-scale-half)) * -1);transform:translateY(0)}.br-input.has-icon.small .br-button.circle{margin-top:calc((var(--button-size) + var(--spacing-scale-base)) * -1)}.br-input.has-icon.large .br-button.circle{margin-top:calc(var(--button-size) * -1)}.br-input.input-highlight{--input-button-margin:var(--spacing-scale-2x);--input-padding:0 var(--spacing-scale-3x);--input-padding-button:var(--spacing-scale-7x);--input-padding-icon:var(--spacing-scale-7x);--input-size:var(--input-highlight)}.br-input.input-highlight input{background-color:var(--gray-2);border-color:transparent;padding-left:var(--spacing-scale-3x);padding-right:var(--spacing-scale-3x)}.br-input.input-highlight .input-icon{margin-left:var(--spacing-scale-3x)}.br-input.input-highlight .input-icon+input{padding-left:var(--spacing-scale-7x)}.br-input .br-list{box-shadow:var(--surface-shadow-md);max-height:530px;overflow:auto;position:absolute;width:100%;z-index:var(--z-index-layer-2)}.br-input .br-list::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-input .br-list::-webkit-scrollbar-track{background:var(--gray-10)}.br-input .br-list::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-input .br-list:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-input .br-list .br-item{--item-padding-y:var(--spacing-scale-2x)}.br-input .br-list .br-item:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-input .br-list .br-item:not(:first-child){border-top:var(--surface-width-sm) solid var(--border-color)}.br-input.success input{border-color:var(--success);border-width:2px}.br-input.danger input{border-color:var(--danger);border-width:2px}.br-input.warning input{border-color:var(--warning);border-width:2px}.br-input.info input{border-color:var(--info);border-width:2px}.br-input input:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-input input:focus,.br-input input:focus-visible{border-color:var(--focus) !important;box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-input .feedback{margin-bottom:var(--spacing-scale-half)}.br-input.small{--input-size:var(--input-small)}.br-input.medium{--input-size:var(--input-medium)}.br-input.large{--input-size:var(--input-large)}.br-input.dark-mode,.br-input.dark-mode label{--color:var(--color-dark);--focus-color:var(--focus-color-dark)}:host{display:block}:host .br-input .input-icon{margin-top:0.1em;margin-left:var(--spacing-scale-base)}:host .br-input .input-icon+input{padding-left:calc(var(--input-padding-icon) + 3px)}.br-input br-button{float:right;margin-right:var(--input-button-margin);margin-top:calc((var(--input-size) + var(--spacing-scale-half)) * -1);padding:0;position:relative}.button-transform{transform:translateY(calc((var(--input-size) - 32px) * 0.5))}";
|
|
7
|
+
const inputCss = "*,*::before,*::after{box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-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]{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:flex !important}.align-items-center{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{flex:1 0 0%;min-width:8.3333333333%}.col-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:flex;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}.mb-3{margin-bottom:var(--spacing-scale-2x) !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:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{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}::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}.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) 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]+*{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-input{--input-button-margin:var(--spacing-scale-half);--input-padding:0 var(--spacing-scale-2x);--input-padding-button:var(--spacing-scale-5x);--input-padding-icon:var(--spacing-scale-5x);--input-size:var(--input-medium);--input-small:32px;--input-medium:40px;--input-large:48px;--input-highlight:56px;--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);color:var(--color);position:relative}.br-input input{background-color:var(--background-light);border-color:var(--border-color-alternative);border-radius:var(--surface-rounder-sm);border-style:var(--border-style);border-width:var(--border-width);color:var(--color-light);display:block;font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);height:var(--input-size);margin-top:var(--spacing-scale-half);padding-bottom:0;padding-left:var(--spacing-scale-2x);padding-right:var(--spacing-scale-2x);padding-top:0;width:100%}.br-input input::-ms-reveal,.br-input input::-ms-clear,.br-input input::-webkit-calendar-picker-indicator{display:none}.br-input input[type=search]::-webkit-search-decoration,.br-input input[type=search]::-webkit-search-cancel-button,.br-input input[type=search]::-webkit-search-results-button,.br-input input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.br-input.input-inline{display:flex}.br-input.input-inline .input-label{margin-right:var(--spacing-scale-baseh);margin-top:calc(var(--input-size) * 0.5 - var(--spacing-scale-half))}.br-input.input-inline .input-content{flex:1}.br-input .input-group{position:relative}.br-input .input-icon{align-items:center;color:var(--border-color-alternative);display:flex;height:var(--input-size);margin-left:var(--spacing-scale-baseh);position:absolute}.br-input .input-icon+input{padding-left:var(--input-padding-icon)}.br-input .br-button{--button-size:var(--button-small);--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);border-radius:50%;float:right;margin-right:var(--input-button-margin);margin-top:calc((var(--input-size) + var(--spacing-scale-half)) * -1);padding:0;position:relative;transform:translateY(calc((var(--input-size) - var(--button-size)) * 0.5));width:var(--button-size)}.br-input.input-button input{padding-right:var(--input-padding-button)}.br-input.has-icon input{padding-right:var(--input-padding-icon)}.br-input.has-icon .br-button.circle{float:right;margin-right:var(--spacing-scale-half);margin-top:calc((var(--button-size) + var(--spacing-scale-half) + var(--spacing-scale-half)) * -1);transform:translateY(0)}.br-input.has-icon.small .br-button.circle{margin-top:calc((var(--button-size) + var(--spacing-scale-base)) * -1)}.br-input.has-icon.large .br-button.circle{margin-top:calc(var(--button-size) * -1)}.br-input.input-highlight{--input-button-margin:var(--spacing-scale-2x);--input-padding:0 var(--spacing-scale-3x);--input-padding-button:var(--spacing-scale-7x);--input-padding-icon:var(--spacing-scale-7x);--input-size:var(--input-highlight)}.br-input.input-highlight input{background-color:var(--gray-2);border-color:transparent;padding-left:var(--spacing-scale-3x);padding-right:var(--spacing-scale-3x)}.br-input.input-highlight .input-icon{margin-left:var(--spacing-scale-3x)}.br-input.input-highlight .input-icon+input{padding-left:var(--spacing-scale-7x)}.br-input .br-list{box-shadow:var(--surface-shadow-md);max-height:530px;overflow:auto;position:absolute;width:100%;z-index:var(--z-index-layer-2)}.br-input .br-list::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-input .br-list::-webkit-scrollbar-track{background:var(--gray-10)}.br-input .br-list::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-input .br-list:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-input .br-list .br-item{--item-padding-y:var(--spacing-scale-2x)}.br-input .br-list .br-item:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-input .br-list .br-item:not(:first-child){border-top:var(--surface-width-sm) solid var(--border-color)}.br-input.success input{border-color:var(--success);border-width:2px}.br-input.danger input{border-color:var(--danger);border-width:2px}.br-input.warning input{border-color:var(--warning);border-width:2px}.br-input.info input{border-color:var(--info);border-width:2px}.br-input input:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-input input:focus,.br-input input:focus-visible{border-color:var(--focus) !important;box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-input .feedback{margin-bottom:var(--spacing-scale-half)}.br-input.small{--input-size:var(--input-small)}.br-input.medium{--input-size:var(--input-medium)}.br-input.large{--input-size:var(--input-large)}.br-input.dark-mode,.br-input.dark-mode label{--color:var(--color-dark);--focus-color:var(--focus-color-dark)}:host{display:block}:host .br-input .input-icon{margin-top:0.1em;margin-left:var(--spacing-scale-base)}:host .br-input .input-icon+input{padding-left:calc(var(--input-padding-icon) + 3px)}.br-input br-button{float:right;margin-right:var(--input-button-margin);margin-top:calc((var(--input-size) + var(--spacing-scale-half)) * -1);padding:0;position:relative}.button-transform{transform:translateY(calc((var(--input-size) - 32px) * 0.5))}";
|
|
8
8
|
const BrInputStyle0 = inputCss;
|
|
9
9
|
|
|
10
10
|
const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
|
|
@@ -43,11 +43,6 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
|
-
this.togglePasswordVisibility = () => {
|
|
47
|
-
const input = this.el.shadowRoot.querySelector('input');
|
|
48
|
-
input.type = input.type === 'password' ? 'text' : 'password';
|
|
49
|
-
this.showIconTextPassword = input.type === 'password';
|
|
50
|
-
};
|
|
51
46
|
this.renderInput = () => {
|
|
52
47
|
return (h("input", Object.assign({ class: this.isHighlight ? 'input-highlight' : null, id: this.defaultID, 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)));
|
|
53
48
|
};
|
|
@@ -56,8 +51,34 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
|
|
|
56
51
|
return ((_a = this.helpText) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h("p", null, this.helpText) : h("slot", { name: "help-text" });
|
|
57
52
|
};
|
|
58
53
|
this.renderIconPassword = () => {
|
|
59
|
-
const
|
|
60
|
-
return h("br-icon", { "icon-name":
|
|
54
|
+
const iconName = this.isPasswordVisible ? 'fa-solid:eye-slash' : 'fa-solid:eye';
|
|
55
|
+
return h("br-icon", { "icon-name": iconName });
|
|
56
|
+
};
|
|
57
|
+
this.togglePasswordVisibility = () => {
|
|
58
|
+
const input = this.el.shadowRoot.querySelector('input');
|
|
59
|
+
this.isPasswordVisible = !this.isPasswordVisible;
|
|
60
|
+
input.type = this.isPasswordVisible ? 'text' : 'password';
|
|
61
|
+
};
|
|
62
|
+
this.renderInlineInputContent = () => {
|
|
63
|
+
if (this.hasIconSlot) {
|
|
64
|
+
return (h("div", { class: "input-content" }, this.renderInputWithIcon()));
|
|
65
|
+
}
|
|
66
|
+
else {
|
|
67
|
+
return (h("div", { class: "input-content" }, this.renderInputWithoutIcon()));
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
this.renderInputContent = () => {
|
|
71
|
+
return this.hasIconSlot ? this.renderInputWithIcon() : this.renderInputWithoutIcon();
|
|
72
|
+
};
|
|
73
|
+
this.renderInputWithIcon = () => {
|
|
74
|
+
return (h("div", { class: "input-group" }, this.renderIconSlot(), this.renderInput(), this.renderButton(), this.renderHelpText()));
|
|
75
|
+
};
|
|
76
|
+
this.renderInputWithoutIcon = () => {
|
|
77
|
+
return [
|
|
78
|
+
this.renderInput(),
|
|
79
|
+
this.renderButton(),
|
|
80
|
+
this.renderHelpText()
|
|
81
|
+
];
|
|
61
82
|
};
|
|
62
83
|
this.defaultID = `br-input-${v4()}`;
|
|
63
84
|
this.type = 'text';
|
|
@@ -77,7 +98,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
|
|
|
77
98
|
this.required = false;
|
|
78
99
|
this.value = undefined;
|
|
79
100
|
this.helpText = undefined;
|
|
80
|
-
this.
|
|
101
|
+
this.isPasswordVisible = false;
|
|
81
102
|
this.hasIconSlot = false;
|
|
82
103
|
this.hasActionSlot = false;
|
|
83
104
|
}
|
|
@@ -156,7 +177,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
|
|
|
156
177
|
return null;
|
|
157
178
|
}
|
|
158
179
|
render() {
|
|
159
|
-
return (h(Host, { key: '
|
|
180
|
+
return (h(Host, { key: 'd589b969868e4d97d2aa6ac92a364a18eb8fc772' }, h("div", { key: '1f3dc623db346676c696c3b5347a4e39111fe581', class: this.getInputCssClassMap() }, this.renderLabel(), this.isInline ? (this.renderInlineInputContent()) : (this.renderInputContent()))));
|
|
160
181
|
}
|
|
161
182
|
static get formAssociated() { return true; }
|
|
162
183
|
get el() { return this; }
|
|
@@ -180,7 +201,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
|
|
|
180
201
|
"required": [516],
|
|
181
202
|
"value": [1537],
|
|
182
203
|
"helpText": [513, "help-text"],
|
|
183
|
-
"
|
|
204
|
+
"isPasswordVisible": [32],
|
|
184
205
|
"hasIconSlot": [32],
|
|
185
206
|
"hasActionSlot": [32]
|
|
186
207
|
}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"br-input.js","mappings":"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","names":["uuidv4"],"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 campo de entrada.\n * Caso não seja fornecido, um ID gerado automaticamente será usado.\n */\n @Prop({ reflect: true }) defaultID: 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 | '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 * Se verdadeiro, o input indica um estado de validação bem-sucedido.\n */\n @Prop({ reflect: true }) success: boolean = false\n\n /**\n * Se verdadeiro, o input indica um estado de validação com erro.\n */\n @Prop({ reflect: true }) danger: boolean = false\n\n /**\n * Se verdadeiro, o input indica um estado informativo.\n */\n @Prop({ reflect: true }) info: boolean = false\n\n /**\n * Se verdadeiro, o input indica um estado de alerta.\n */\n @Prop({ reflect: true }) warning: boolean = false\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() showIconTextPassword: boolean = false\n\n @State() hasIconSlot: boolean = false\n\n @State() hasActionSlot: boolean = false\n\n /**\n * Emite um evento quando o componente é conectado ao DOM.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n */\n @Event() brDidConnect: EventEmitter<void>\n connectedCallback() {\n this.brDidConnect.emit()\n }\n\n /**\n * Emite um evento antes que o componente seja carregado pela primeira vez.\n * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n */\n @Event() brWillLoad: EventEmitter<void>\n componentWillLoad() {\n this.hasIconSlot = this.hasSlotContent('icon')\n this.hasActionSlot = this.hasSlotContent('action')\n this.brWillLoad.emit()\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n /**\n * Emite um evento após o componente ter sido carregado pela primeira vez.\n * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n */\n @Event() brDidLoad: EventEmitter<void>\n componentDidLoad() {\n this.brDidLoad.emit()\n }\n\n /**\n * Emite um evento antes do componente ser renderizado.\n * Utilize este evento para preparar o componente antes de sua renderização.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n */\n @Event() brWillRender: EventEmitter<void>\n componentWillRender() {\n this.brWillRender.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido renderizado.\n * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n */\n @Event() brDidRender: EventEmitter<void>\n componentDidRender() {\n this.brDidRender.emit()\n }\n\n /**\n * Emite um evento para indicar se o componente deve ser atualizado ou não.\n * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n */\n @Event() brShouldUpdate: EventEmitter<void>\n componentShouldUpdate() {\n this.brShouldUpdate.emit()\n }\n\n /**\n * Emite um evento antes de o componente ser atualizado.\n * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n */\n @Event() brWillUpdate: EventEmitter<void>\n componentWillUpdate() {\n this.brWillUpdate.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido atualizado.\n * Utilize este evento para realizar ações após a atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n */\n @Event() brDidUpdate: EventEmitter<void>\n componentDidUpdate() {\n this.brDidUpdate.emit()\n }\n\n /**\n * Emite um evento quando o componente é desconectado do DOM.\n * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n */\n @Event() brDidDisconnect: EventEmitter<void>\n disconnectedCallback() {\n this.brDidDisconnect.emit()\n }\n\n /**\n * Emite um evento quando o componente é associado ou removido de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n *\n * @param form - Dados do formulário associado.\n */\n @Event() brFormAssociatedCallback: EventEmitter<FormData>\n formAssociatedCallback(form: FormData) {\n this.brFormAssociatedCallback.emit(form)\n }\n\n /**\n * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n *\n * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n */\n @Event() brFormDisabledCallback: EventEmitter<boolean>\n formDisabledCallback(disabled: boolean) {\n this.brFormDisabledCallback.emit(disabled)\n }\n\n /**\n * Emite um evento quando um `<form>` é resetado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n */\n @Event() brFormResetCallback: EventEmitter<void>\n formResetCallback() {\n this.brFormResetCallback.emit()\n }\n\n /**\n * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n *\n * @param state - Estado restaurado do formulário.\n * @param _mode - Modo de preenchimento automático do navegador.\n */\n @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n formStateRestoreCallback(state: string, _mode: string) {\n this.brFormStateRestoreCallback.emit([state, _mode])\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.success,\n danger: this.danger,\n info: this.info,\n warning: this.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.defaultID}>\n {this.label}\n </label>\n </div>\n )\n } else {\n return <label htmlFor={this.defaultID}>{this.label}</label>\n }\n }\n }\n\n private readonly togglePasswordVisibility = () => {\n const input = this.el.shadowRoot.querySelector('input')\n input.type = input.type === 'password' ? 'text' : 'password'\n this.showIconTextPassword = input.type === 'password'\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.defaultID}\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 showPassword = !this.showIconTextPassword\n return <br-icon icon-name={showPassword ? 'fa-solid:eye' : 'fa-solid:eye-slash'}></br-icon>\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 render() {\n return (\n <Host>\n <div class={this.getInputCssClassMap()}>\n {this.renderLabel()}\n\n {this.hasIconSlot ? (\n <div class=\"input-group\">\n {this.renderIconSlot()}\n {this.renderInput()}\n </div>\n ) : (\n this.renderInput()\n )}\n\n {this.renderButton()}\n {this.renderHelpText()}\n </div>\n </Host>\n )\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"br-input.js","mappings":"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","names":["uuidv4"],"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 campo de entrada.\n * Caso não seja fornecido, um ID gerado automaticamente será usado.\n */\n @Prop({ reflect: true }) defaultID: 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 | '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 * Se verdadeiro, o input indica um estado de validação bem-sucedido.\n */\n @Prop({ reflect: true }) success: boolean = false\n\n /**\n * Se verdadeiro, o input indica um estado de validação com erro.\n */\n @Prop({ reflect: true }) danger: boolean = false\n\n /**\n * Se verdadeiro, o input indica um estado informativo.\n */\n @Prop({ reflect: true }) info: boolean = false\n\n /**\n * Se verdadeiro, o input indica um estado de alerta.\n */\n @Prop({ reflect: true }) warning: boolean = false\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 /**\n * Emite um evento quando o componente é conectado ao DOM.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n */\n @Event() brDidConnect: EventEmitter<void>\n connectedCallback() {\n this.brDidConnect.emit()\n }\n\n /**\n * Emite um evento antes que o componente seja carregado pela primeira vez.\n * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n */\n @Event() brWillLoad: EventEmitter<void>\n componentWillLoad() {\n this.hasIconSlot = this.hasSlotContent('icon')\n this.hasActionSlot = this.hasSlotContent('action')\n this.brWillLoad.emit()\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n /**\n * Emite um evento após o componente ter sido carregado pela primeira vez.\n * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n */\n @Event() brDidLoad: EventEmitter<void>\n componentDidLoad() {\n this.brDidLoad.emit()\n }\n\n /**\n * Emite um evento antes do componente ser renderizado.\n * Utilize este evento para preparar o componente antes de sua renderização.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n */\n @Event() brWillRender: EventEmitter<void>\n componentWillRender() {\n this.brWillRender.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido renderizado.\n * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n */\n @Event() brDidRender: EventEmitter<void>\n componentDidRender() {\n this.brDidRender.emit()\n }\n\n /**\n * Emite um evento para indicar se o componente deve ser atualizado ou não.\n * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n */\n @Event() brShouldUpdate: EventEmitter<void>\n componentShouldUpdate() {\n this.brShouldUpdate.emit()\n }\n\n /**\n * Emite um evento antes de o componente ser atualizado.\n * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n */\n @Event() brWillUpdate: EventEmitter<void>\n componentWillUpdate() {\n this.brWillUpdate.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido atualizado.\n * Utilize este evento para realizar ações após a atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n */\n @Event() brDidUpdate: EventEmitter<void>\n componentDidUpdate() {\n this.brDidUpdate.emit()\n }\n\n /**\n * Emite um evento quando o componente é desconectado do DOM.\n * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n */\n @Event() brDidDisconnect: EventEmitter<void>\n disconnectedCallback() {\n this.brDidDisconnect.emit()\n }\n\n /**\n * Emite um evento quando o componente é associado ou removido de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n *\n * @param form - Dados do formulário associado.\n */\n @Event() brFormAssociatedCallback: EventEmitter<FormData>\n formAssociatedCallback(form: FormData) {\n this.brFormAssociatedCallback.emit(form)\n }\n\n /**\n * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n *\n * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n */\n @Event() brFormDisabledCallback: EventEmitter<boolean>\n formDisabledCallback(disabled: boolean) {\n this.brFormDisabledCallback.emit(disabled)\n }\n\n /**\n * Emite um evento quando um `<form>` é resetado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n */\n @Event() brFormResetCallback: EventEmitter<void>\n formResetCallback() {\n this.brFormResetCallback.emit()\n }\n\n /**\n * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n *\n * @param state - Estado restaurado do formulário.\n * @param _mode - Modo de preenchimento automático do navegador.\n */\n @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n formStateRestoreCallback(state: string, _mode: string) {\n this.brFormStateRestoreCallback.emit([state, _mode])\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.success,\n danger: this.danger,\n info: this.info,\n warning: this.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.defaultID}>\n {this.label}\n </label>\n </div>\n )\n } else {\n return <label htmlFor={this.defaultID}>{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.defaultID}\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"],"version":3}
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
|
|
|
2
2
|
import { i as inheritAriaAttributes } from './inherited-attributes-c856c729.js';
|
|
3
3
|
import { v as v4 } from './v4-23648a96.js';
|
|
4
4
|
|
|
5
|
-
const inputCss = "*,*::before,*::after{box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-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]{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:flex !important}.align-items-center{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{flex:1 0 0%;min-width:8.3333333333%}.col-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:flex;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}.mb-3{margin-bottom:var(--spacing-scale-2x) !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:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{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}::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}.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) 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]+*{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-input{--input-button-margin:var(--spacing-scale-half);--input-padding:0 var(--spacing-scale-2x);--input-padding-button:var(--spacing-scale-5x);--input-padding-icon:var(--spacing-scale-5x);--input-size:var(--input-medium);--input-small:32px;--input-medium:40px;--input-large:48px;--input-highlight:56px;--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);color:var(--color);position:relative}.br-input input{background-color:var(--background-light);border-color:var(--border-color-alternative);border-radius:var(--surface-rounder-sm);border-style:var(--border-style);border-width:var(--border-width);color:var(--color-light);display:block;font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);height:var(--input-size);margin-top:var(--spacing-scale-half);padding-bottom:0;padding-left:var(--spacing-scale-2x);padding-right:var(--spacing-scale-2x);padding-top:0;width:100%}.br-input input::-ms-reveal,.br-input input::-ms-clear,.br-input input::-webkit-calendar-picker-indicator{display:none}.br-input input[type=search]::-webkit-search-decoration,.br-input input[type=search]::-webkit-search-cancel-button,.br-input input[type=search]::-webkit-search-results-button,.br-input input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.br-input.input-inline{display:flex}.br-input.input-inline .input-label{margin-right:var(--spacing-scale-baseh);margin-top:calc(var(--input-size) * 0.5 - var(--spacing-scale-half))}.br-input .input-group{position:relative}.br-input .input-icon{align-items:center;color:var(--border-color-alternative);display:flex;height:var(--input-size);margin-left:var(--spacing-scale-baseh);position:absolute}.br-input .input-icon+input{padding-left:var(--input-padding-icon)}.br-input .br-button{--button-size:var(--button-small);--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);border-radius:50%;float:right;margin-right:var(--input-button-margin);margin-top:calc((var(--input-size) + var(--spacing-scale-half)) * -1);padding:0;position:relative;transform:translateY(calc((var(--input-size) - var(--button-size)) * 0.5));width:var(--button-size)}.br-input.input-button input{padding-right:var(--input-padding-button)}.br-input.has-icon input{padding-right:var(--input-padding-icon)}.br-input.has-icon .br-button.circle{float:right;margin-right:var(--spacing-scale-half);margin-top:calc((var(--button-size) + var(--spacing-scale-half) + var(--spacing-scale-half)) * -1);transform:translateY(0)}.br-input.has-icon.small .br-button.circle{margin-top:calc((var(--button-size) + var(--spacing-scale-base)) * -1)}.br-input.has-icon.large .br-button.circle{margin-top:calc(var(--button-size) * -1)}.br-input.input-highlight{--input-button-margin:var(--spacing-scale-2x);--input-padding:0 var(--spacing-scale-3x);--input-padding-button:var(--spacing-scale-7x);--input-padding-icon:var(--spacing-scale-7x);--input-size:var(--input-highlight)}.br-input.input-highlight input{background-color:var(--gray-2);border-color:transparent;padding-left:var(--spacing-scale-3x);padding-right:var(--spacing-scale-3x)}.br-input.input-highlight .input-icon{margin-left:var(--spacing-scale-3x)}.br-input.input-highlight .input-icon+input{padding-left:var(--spacing-scale-7x)}.br-input .br-list{box-shadow:var(--surface-shadow-md);max-height:530px;overflow:auto;position:absolute;width:100%;z-index:var(--z-index-layer-2)}.br-input .br-list::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-input .br-list::-webkit-scrollbar-track{background:var(--gray-10)}.br-input .br-list::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-input .br-list:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-input .br-list .br-item{--item-padding-y:var(--spacing-scale-2x)}.br-input .br-list .br-item:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-input .br-list .br-item:not(:first-child){border-top:var(--surface-width-sm) solid var(--border-color)}.br-input.success input{border-color:var(--success);border-width:2px}.br-input.danger input{border-color:var(--danger);border-width:2px}.br-input.warning input{border-color:var(--warning);border-width:2px}.br-input.info input{border-color:var(--info);border-width:2px}.br-input input:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-input input:focus,.br-input input:focus-visible{border-color:var(--focus) !important;box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-input .feedback{margin-bottom:var(--spacing-scale-half)}.br-input.small{--input-size:var(--input-small)}.br-input.medium{--input-size:var(--input-medium)}.br-input.large{--input-size:var(--input-large)}.br-input.dark-mode,.br-input.dark-mode label{--color:var(--color-dark);--focus-color:var(--focus-color-dark)}:host{display:block}:host .br-input .input-icon{margin-top:0.1em;margin-left:var(--spacing-scale-base)}:host .br-input .input-icon+input{padding-left:calc(var(--input-padding-icon) + 3px)}.br-input br-button{float:right;margin-right:var(--input-button-margin);margin-top:calc((var(--input-size) + var(--spacing-scale-half)) * -1);padding:0;position:relative}.button-transform{transform:translateY(calc((var(--input-size) - 32px) * 0.5))}";
|
|
5
|
+
const inputCss = "*,*::before,*::after{box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-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]{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:flex !important}.align-items-center{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{flex:1 0 0%;min-width:8.3333333333%}.col-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:flex;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}.mb-3{margin-bottom:var(--spacing-scale-2x) !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:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{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}::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}.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) 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]+*{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-input{--input-button-margin:var(--spacing-scale-half);--input-padding:0 var(--spacing-scale-2x);--input-padding-button:var(--spacing-scale-5x);--input-padding-icon:var(--spacing-scale-5x);--input-size:var(--input-medium);--input-small:32px;--input-medium:40px;--input-large:48px;--input-highlight:56px;--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);color:var(--color);position:relative}.br-input input{background-color:var(--background-light);border-color:var(--border-color-alternative);border-radius:var(--surface-rounder-sm);border-style:var(--border-style);border-width:var(--border-width);color:var(--color-light);display:block;font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);height:var(--input-size);margin-top:var(--spacing-scale-half);padding-bottom:0;padding-left:var(--spacing-scale-2x);padding-right:var(--spacing-scale-2x);padding-top:0;width:100%}.br-input input::-ms-reveal,.br-input input::-ms-clear,.br-input input::-webkit-calendar-picker-indicator{display:none}.br-input input[type=search]::-webkit-search-decoration,.br-input input[type=search]::-webkit-search-cancel-button,.br-input input[type=search]::-webkit-search-results-button,.br-input input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.br-input.input-inline{display:flex}.br-input.input-inline .input-label{margin-right:var(--spacing-scale-baseh);margin-top:calc(var(--input-size) * 0.5 - var(--spacing-scale-half))}.br-input.input-inline .input-content{flex:1}.br-input .input-group{position:relative}.br-input .input-icon{align-items:center;color:var(--border-color-alternative);display:flex;height:var(--input-size);margin-left:var(--spacing-scale-baseh);position:absolute}.br-input .input-icon+input{padding-left:var(--input-padding-icon)}.br-input .br-button{--button-size:var(--button-small);--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);border-radius:50%;float:right;margin-right:var(--input-button-margin);margin-top:calc((var(--input-size) + var(--spacing-scale-half)) * -1);padding:0;position:relative;transform:translateY(calc((var(--input-size) - var(--button-size)) * 0.5));width:var(--button-size)}.br-input.input-button input{padding-right:var(--input-padding-button)}.br-input.has-icon input{padding-right:var(--input-padding-icon)}.br-input.has-icon .br-button.circle{float:right;margin-right:var(--spacing-scale-half);margin-top:calc((var(--button-size) + var(--spacing-scale-half) + var(--spacing-scale-half)) * -1);transform:translateY(0)}.br-input.has-icon.small .br-button.circle{margin-top:calc((var(--button-size) + var(--spacing-scale-base)) * -1)}.br-input.has-icon.large .br-button.circle{margin-top:calc(var(--button-size) * -1)}.br-input.input-highlight{--input-button-margin:var(--spacing-scale-2x);--input-padding:0 var(--spacing-scale-3x);--input-padding-button:var(--spacing-scale-7x);--input-padding-icon:var(--spacing-scale-7x);--input-size:var(--input-highlight)}.br-input.input-highlight input{background-color:var(--gray-2);border-color:transparent;padding-left:var(--spacing-scale-3x);padding-right:var(--spacing-scale-3x)}.br-input.input-highlight .input-icon{margin-left:var(--spacing-scale-3x)}.br-input.input-highlight .input-icon+input{padding-left:var(--spacing-scale-7x)}.br-input .br-list{box-shadow:var(--surface-shadow-md);max-height:530px;overflow:auto;position:absolute;width:100%;z-index:var(--z-index-layer-2)}.br-input .br-list::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-input .br-list::-webkit-scrollbar-track{background:var(--gray-10)}.br-input .br-list::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-input .br-list:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-input .br-list .br-item{--item-padding-y:var(--spacing-scale-2x)}.br-input .br-list .br-item:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-input .br-list .br-item:not(:first-child){border-top:var(--surface-width-sm) solid var(--border-color)}.br-input.success input{border-color:var(--success);border-width:2px}.br-input.danger input{border-color:var(--danger);border-width:2px}.br-input.warning input{border-color:var(--warning);border-width:2px}.br-input.info input{border-color:var(--info);border-width:2px}.br-input input:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-input input:focus,.br-input input:focus-visible{border-color:var(--focus) !important;box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-input .feedback{margin-bottom:var(--spacing-scale-half)}.br-input.small{--input-size:var(--input-small)}.br-input.medium{--input-size:var(--input-medium)}.br-input.large{--input-size:var(--input-large)}.br-input.dark-mode,.br-input.dark-mode label{--color:var(--color-dark);--focus-color:var(--focus-color-dark)}:host{display:block}:host .br-input .input-icon{margin-top:0.1em;margin-left:var(--spacing-scale-base)}:host .br-input .input-icon+input{padding-left:calc(var(--input-padding-icon) + 3px)}.br-input br-button{float:right;margin-right:var(--input-button-margin);margin-top:calc((var(--input-size) + var(--spacing-scale-half)) * -1);padding:0;position:relative}.button-transform{transform:translateY(calc((var(--input-size) - 32px) * 0.5))}";
|
|
6
6
|
const BrInputStyle0 = inputCss;
|
|
7
7
|
|
|
8
8
|
const Input = class {
|
|
@@ -45,11 +45,6 @@ const Input = class {
|
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
|
-
this.togglePasswordVisibility = () => {
|
|
49
|
-
const input = this.el.shadowRoot.querySelector('input');
|
|
50
|
-
input.type = input.type === 'password' ? 'text' : 'password';
|
|
51
|
-
this.showIconTextPassword = input.type === 'password';
|
|
52
|
-
};
|
|
53
48
|
this.renderInput = () => {
|
|
54
49
|
return (h("input", Object.assign({ class: this.isHighlight ? 'input-highlight' : null, id: this.defaultID, 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)));
|
|
55
50
|
};
|
|
@@ -58,8 +53,34 @@ const Input = class {
|
|
|
58
53
|
return ((_a = this.helpText) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h("p", null, this.helpText) : h("slot", { name: "help-text" });
|
|
59
54
|
};
|
|
60
55
|
this.renderIconPassword = () => {
|
|
61
|
-
const
|
|
62
|
-
return h("br-icon", { "icon-name":
|
|
56
|
+
const iconName = this.isPasswordVisible ? 'fa-solid:eye-slash' : 'fa-solid:eye';
|
|
57
|
+
return h("br-icon", { "icon-name": iconName });
|
|
58
|
+
};
|
|
59
|
+
this.togglePasswordVisibility = () => {
|
|
60
|
+
const input = this.el.shadowRoot.querySelector('input');
|
|
61
|
+
this.isPasswordVisible = !this.isPasswordVisible;
|
|
62
|
+
input.type = this.isPasswordVisible ? 'text' : 'password';
|
|
63
|
+
};
|
|
64
|
+
this.renderInlineInputContent = () => {
|
|
65
|
+
if (this.hasIconSlot) {
|
|
66
|
+
return (h("div", { class: "input-content" }, this.renderInputWithIcon()));
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
return (h("div", { class: "input-content" }, this.renderInputWithoutIcon()));
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
this.renderInputContent = () => {
|
|
73
|
+
return this.hasIconSlot ? this.renderInputWithIcon() : this.renderInputWithoutIcon();
|
|
74
|
+
};
|
|
75
|
+
this.renderInputWithIcon = () => {
|
|
76
|
+
return (h("div", { class: "input-group" }, this.renderIconSlot(), this.renderInput(), this.renderButton(), this.renderHelpText()));
|
|
77
|
+
};
|
|
78
|
+
this.renderInputWithoutIcon = () => {
|
|
79
|
+
return [
|
|
80
|
+
this.renderInput(),
|
|
81
|
+
this.renderButton(),
|
|
82
|
+
this.renderHelpText()
|
|
83
|
+
];
|
|
63
84
|
};
|
|
64
85
|
this.defaultID = `br-input-${v4()}`;
|
|
65
86
|
this.type = 'text';
|
|
@@ -79,7 +100,7 @@ const Input = class {
|
|
|
79
100
|
this.required = false;
|
|
80
101
|
this.value = undefined;
|
|
81
102
|
this.helpText = undefined;
|
|
82
|
-
this.
|
|
103
|
+
this.isPasswordVisible = false;
|
|
83
104
|
this.hasIconSlot = false;
|
|
84
105
|
this.hasActionSlot = false;
|
|
85
106
|
}
|
|
@@ -158,7 +179,7 @@ const Input = class {
|
|
|
158
179
|
return null;
|
|
159
180
|
}
|
|
160
181
|
render() {
|
|
161
|
-
return (h(Host, { key: '
|
|
182
|
+
return (h(Host, { key: 'd589b969868e4d97d2aa6ac92a364a18eb8fc772' }, h("div", { key: '1f3dc623db346676c696c3b5347a4e39111fe581', class: this.getInputCssClassMap() }, this.renderLabel(), this.isInline ? (this.renderInlineInputContent()) : (this.renderInputContent()))));
|
|
162
183
|
}
|
|
163
184
|
static get formAssociated() { return true; }
|
|
164
185
|
get el() { return getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"br-input.entry.js","mappings":"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","names":["uuidv4"],"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 campo de entrada.\n * Caso não seja fornecido, um ID gerado automaticamente será usado.\n */\n @Prop({ reflect: true }) defaultID: 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 | '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 * Se verdadeiro, o input indica um estado de validação bem-sucedido.\n */\n @Prop({ reflect: true }) success: boolean = false\n\n /**\n * Se verdadeiro, o input indica um estado de validação com erro.\n */\n @Prop({ reflect: true }) danger: boolean = false\n\n /**\n * Se verdadeiro, o input indica um estado informativo.\n */\n @Prop({ reflect: true }) info: boolean = false\n\n /**\n * Se verdadeiro, o input indica um estado de alerta.\n */\n @Prop({ reflect: true }) warning: boolean = false\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() showIconTextPassword: boolean = false\n\n @State() hasIconSlot: boolean = false\n\n @State() hasActionSlot: boolean = false\n\n /**\n * Emite um evento quando o componente é conectado ao DOM.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n */\n @Event() brDidConnect: EventEmitter<void>\n connectedCallback() {\n this.brDidConnect.emit()\n }\n\n /**\n * Emite um evento antes que o componente seja carregado pela primeira vez.\n * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n */\n @Event() brWillLoad: EventEmitter<void>\n componentWillLoad() {\n this.hasIconSlot = this.hasSlotContent('icon')\n this.hasActionSlot = this.hasSlotContent('action')\n this.brWillLoad.emit()\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n /**\n * Emite um evento após o componente ter sido carregado pela primeira vez.\n * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n */\n @Event() brDidLoad: EventEmitter<void>\n componentDidLoad() {\n this.brDidLoad.emit()\n }\n\n /**\n * Emite um evento antes do componente ser renderizado.\n * Utilize este evento para preparar o componente antes de sua renderização.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n */\n @Event() brWillRender: EventEmitter<void>\n componentWillRender() {\n this.brWillRender.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido renderizado.\n * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n */\n @Event() brDidRender: EventEmitter<void>\n componentDidRender() {\n this.brDidRender.emit()\n }\n\n /**\n * Emite um evento para indicar se o componente deve ser atualizado ou não.\n * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n */\n @Event() brShouldUpdate: EventEmitter<void>\n componentShouldUpdate() {\n this.brShouldUpdate.emit()\n }\n\n /**\n * Emite um evento antes de o componente ser atualizado.\n * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n */\n @Event() brWillUpdate: EventEmitter<void>\n componentWillUpdate() {\n this.brWillUpdate.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido atualizado.\n * Utilize este evento para realizar ações após a atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n */\n @Event() brDidUpdate: EventEmitter<void>\n componentDidUpdate() {\n this.brDidUpdate.emit()\n }\n\n /**\n * Emite um evento quando o componente é desconectado do DOM.\n * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n */\n @Event() brDidDisconnect: EventEmitter<void>\n disconnectedCallback() {\n this.brDidDisconnect.emit()\n }\n\n /**\n * Emite um evento quando o componente é associado ou removido de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n *\n * @param form - Dados do formulário associado.\n */\n @Event() brFormAssociatedCallback: EventEmitter<FormData>\n formAssociatedCallback(form: FormData) {\n this.brFormAssociatedCallback.emit(form)\n }\n\n /**\n * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n *\n * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n */\n @Event() brFormDisabledCallback: EventEmitter<boolean>\n formDisabledCallback(disabled: boolean) {\n this.brFormDisabledCallback.emit(disabled)\n }\n\n /**\n * Emite um evento quando um `<form>` é resetado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n */\n @Event() brFormResetCallback: EventEmitter<void>\n formResetCallback() {\n this.brFormResetCallback.emit()\n }\n\n /**\n * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n *\n * @param state - Estado restaurado do formulário.\n * @param _mode - Modo de preenchimento automático do navegador.\n */\n @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n formStateRestoreCallback(state: string, _mode: string) {\n this.brFormStateRestoreCallback.emit([state, _mode])\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.success,\n danger: this.danger,\n info: this.info,\n warning: this.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.defaultID}>\n {this.label}\n </label>\n </div>\n )\n } else {\n return <label htmlFor={this.defaultID}>{this.label}</label>\n }\n }\n }\n\n private readonly togglePasswordVisibility = () => {\n const input = this.el.shadowRoot.querySelector('input')\n input.type = input.type === 'password' ? 'text' : 'password'\n this.showIconTextPassword = input.type === 'password'\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.defaultID}\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 showPassword = !this.showIconTextPassword\n return <br-icon icon-name={showPassword ? 'fa-solid:eye' : 'fa-solid:eye-slash'}></br-icon>\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 render() {\n return (\n <Host>\n <div class={this.getInputCssClassMap()}>\n {this.renderLabel()}\n\n {this.hasIconSlot ? (\n <div class=\"input-group\">\n {this.renderIconSlot()}\n {this.renderInput()}\n </div>\n ) : (\n this.renderInput()\n )}\n\n {this.renderButton()}\n {this.renderHelpText()}\n </div>\n </Host>\n )\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"br-input.entry.js","mappings":"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","names":["uuidv4"],"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 campo de entrada.\n * Caso não seja fornecido, um ID gerado automaticamente será usado.\n */\n @Prop({ reflect: true }) defaultID: 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 | '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 * Se verdadeiro, o input indica um estado de validação bem-sucedido.\n */\n @Prop({ reflect: true }) success: boolean = false\n\n /**\n * Se verdadeiro, o input indica um estado de validação com erro.\n */\n @Prop({ reflect: true }) danger: boolean = false\n\n /**\n * Se verdadeiro, o input indica um estado informativo.\n */\n @Prop({ reflect: true }) info: boolean = false\n\n /**\n * Se verdadeiro, o input indica um estado de alerta.\n */\n @Prop({ reflect: true }) warning: boolean = false\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 /**\n * Emite um evento quando o componente é conectado ao DOM.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n */\n @Event() brDidConnect: EventEmitter<void>\n connectedCallback() {\n this.brDidConnect.emit()\n }\n\n /**\n * Emite um evento antes que o componente seja carregado pela primeira vez.\n * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n */\n @Event() brWillLoad: EventEmitter<void>\n componentWillLoad() {\n this.hasIconSlot = this.hasSlotContent('icon')\n this.hasActionSlot = this.hasSlotContent('action')\n this.brWillLoad.emit()\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n /**\n * Emite um evento após o componente ter sido carregado pela primeira vez.\n * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n */\n @Event() brDidLoad: EventEmitter<void>\n componentDidLoad() {\n this.brDidLoad.emit()\n }\n\n /**\n * Emite um evento antes do componente ser renderizado.\n * Utilize este evento para preparar o componente antes de sua renderização.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n */\n @Event() brWillRender: EventEmitter<void>\n componentWillRender() {\n this.brWillRender.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido renderizado.\n * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n */\n @Event() brDidRender: EventEmitter<void>\n componentDidRender() {\n this.brDidRender.emit()\n }\n\n /**\n * Emite um evento para indicar se o componente deve ser atualizado ou não.\n * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n */\n @Event() brShouldUpdate: EventEmitter<void>\n componentShouldUpdate() {\n this.brShouldUpdate.emit()\n }\n\n /**\n * Emite um evento antes de o componente ser atualizado.\n * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n */\n @Event() brWillUpdate: EventEmitter<void>\n componentWillUpdate() {\n this.brWillUpdate.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido atualizado.\n * Utilize este evento para realizar ações após a atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n */\n @Event() brDidUpdate: EventEmitter<void>\n componentDidUpdate() {\n this.brDidUpdate.emit()\n }\n\n /**\n * Emite um evento quando o componente é desconectado do DOM.\n * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n */\n @Event() brDidDisconnect: EventEmitter<void>\n disconnectedCallback() {\n this.brDidDisconnect.emit()\n }\n\n /**\n * Emite um evento quando o componente é associado ou removido de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n *\n * @param form - Dados do formulário associado.\n */\n @Event() brFormAssociatedCallback: EventEmitter<FormData>\n formAssociatedCallback(form: FormData) {\n this.brFormAssociatedCallback.emit(form)\n }\n\n /**\n * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n *\n * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n */\n @Event() brFormDisabledCallback: EventEmitter<boolean>\n formDisabledCallback(disabled: boolean) {\n this.brFormDisabledCallback.emit(disabled)\n }\n\n /**\n * Emite um evento quando um `<form>` é resetado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n */\n @Event() brFormResetCallback: EventEmitter<void>\n formResetCallback() {\n this.brFormResetCallback.emit()\n }\n\n /**\n * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n *\n * @param state - Estado restaurado do formulário.\n * @param _mode - Modo de preenchimento automático do navegador.\n */\n @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n formStateRestoreCallback(state: string, _mode: string) {\n this.brFormStateRestoreCallback.emit([state, _mode])\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.success,\n danger: this.danger,\n info: this.info,\n warning: this.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.defaultID}>\n {this.label}\n </label>\n </div>\n )\n } else {\n return <label htmlFor={this.defaultID}>{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.defaultID}\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"],"version":3}
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["br-input",[[65,"br-input",{"defaultID":[513,"default-i-d"],"type":[513],"autocomplete":[513],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"success":[516],"danger":[516],"info":[516],"warning":[516],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"
|
|
8
|
+
return bootstrapLazy([["br-input",[[65,"br-input",{"defaultID":[513,"default-i-d"],"type":[513],"autocomplete":[513],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"success":[516],"danger":[516],"info":[516],"warning":[516],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"isPasswordVisible":[32],"hasIconSlot":[32],"hasActionSlot":[32]}]]],["br-message",[[65,"br-message",{"messageTitle":[513,"message-title"],"message":[513],"isInline":[516,"is-inline"],"isClosable":[516,"is-closable"],"showIcon":[516,"show-icon"],"isFeedback":[516,"is-feedback"],"state":[513]}]]],["br-avatar",[[1,"br-avatar",{"density":[1],"image":[1],"imageAlt":[1,"image-alt"],"isIconic":[4,"is-iconic"],"text":[1],"iconWidth":[32],"iconHeight":[32]}]]],["br-checkbox",[[65,"br-checkbox",{"indeterminate":[516],"checked":[1540],"customId":[513,"id"],"disabled":[516],"hasHiddenLabel":[516,"has-hidden-label"],"label":[513],"name":[513],"state":[513],"value":[520],"_slotDefault":[32],"toggleChecked":[64]}]]],["br-dropdown",[[65,"br-dropdown",{"isOpen":[1540,"is-open"],"open":[64],"hide":[64]},null,{"isOpen":["isOpenChanged"]}]]],["br-item",[[65,"br-item",{"disabled":[516],"isActive":[516,"is-active"],"isSelected":[516,"is-selected"],"isInteractive":[516,"is-interactive"],"href":[513],"target":[513],"isButton":[516,"is-button"],"type":[1537],"value":[513],"density":[513],"hasSlotDefault":[32],"hasSlotStart":[32],"hasSlotEnd":[32],"selectedValue":[32]},[[4,"brDidCheckedChange","handleChange"]]]]],["br-list",[[65,"br-list",{"listTitle":[513,"list-title"],"isHorizontal":[516,"is-horizontal"],"hideHeaderDivider":[516,"hide-header-divider"]}]]],["br-loading",[[65,"br-loading",{"isProgress":[516,"is-progress"],"progressPercent":[514,"progress-percent"],"isMedium":[516,"is-medium"],"label":[513]}]]],["br-radio",[[65,"br-radio",{"checked":[1540],"disabled":[516],"state":[513],"hasHiddenLabel":[516,"has-hidden-label"],"name":[513],"label":[513],"value":[520],"customId":[513,"id"],"computedId":[32]},[[8,"brDidChange","onBrDidChange"]],{"customId":["onCustomIdChange"]}]]],["br-switch",[[65,"br-switch",{"disabled":[516],"checked":[516],"customId":[513,"id"],"label":[1],"labelPosition":[513,"label-position"],"labelOn":[513,"label-on"],"labelOff":[513,"label-off"],"hasIcon":[516,"has-icon"],"name":[513],"value":[513],"density":[513],"_slotDefault":[32],"_checkedValue":[32],"toggleChecked":[64]}]]],["br-textarea",[[65,"br-textarea",{"value":[1537],"label":[513],"placeholder":[513],"disabled":[516],"maxlength":[514],"states":[513],"density":[513],"isDarkMode":[516,"is-dark-mode"],"isLabelLeft":[516,"is-label-left"],"defaultId":[513,"default-id"],"currentLength":[32],"setValue":[64]},null,{"value":["valueChanged"]}]]],["br-button_2",[[65,"br-button",{"colorMode":[513,"color-mode"],"density":[513],"disabled":[516],"emphasis":[513],"isActive":[516,"is-active"],"isLoading":[516,"is-loading"],"shape":[513],"type":[513],"value":[513]}],[1,"br-icon",{"IconName":[513,"icon-name"],"height":[513],"width":[513],"CssClasses":[513,"css-classes"],"isInline":[516,"is-inline"],"rotate":[513],"flip":[513]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -16,7 +16,7 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["br-input",[[65,"br-input",{"defaultID":[513,"default-i-d"],"type":[513],"autocomplete":[513],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"success":[516],"danger":[516],"info":[516],"warning":[516],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"
|
|
19
|
+
return bootstrapLazy([["br-input",[[65,"br-input",{"defaultID":[513,"default-i-d"],"type":[513],"autocomplete":[513],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"success":[516],"danger":[516],"info":[516],"warning":[516],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"isPasswordVisible":[32],"hasIconSlot":[32],"hasActionSlot":[32]}]]],["br-message",[[65,"br-message",{"messageTitle":[513,"message-title"],"message":[513],"isInline":[516,"is-inline"],"isClosable":[516,"is-closable"],"showIcon":[516,"show-icon"],"isFeedback":[516,"is-feedback"],"state":[513]}]]],["br-avatar",[[1,"br-avatar",{"density":[1],"image":[1],"imageAlt":[1,"image-alt"],"isIconic":[4,"is-iconic"],"text":[1],"iconWidth":[32],"iconHeight":[32]}]]],["br-checkbox",[[65,"br-checkbox",{"indeterminate":[516],"checked":[1540],"customId":[513,"id"],"disabled":[516],"hasHiddenLabel":[516,"has-hidden-label"],"label":[513],"name":[513],"state":[513],"value":[520],"_slotDefault":[32],"toggleChecked":[64]}]]],["br-dropdown",[[65,"br-dropdown",{"isOpen":[1540,"is-open"],"open":[64],"hide":[64]},null,{"isOpen":["isOpenChanged"]}]]],["br-item",[[65,"br-item",{"disabled":[516],"isActive":[516,"is-active"],"isSelected":[516,"is-selected"],"isInteractive":[516,"is-interactive"],"href":[513],"target":[513],"isButton":[516,"is-button"],"type":[1537],"value":[513],"density":[513],"hasSlotDefault":[32],"hasSlotStart":[32],"hasSlotEnd":[32],"selectedValue":[32]},[[4,"brDidCheckedChange","handleChange"]]]]],["br-list",[[65,"br-list",{"listTitle":[513,"list-title"],"isHorizontal":[516,"is-horizontal"],"hideHeaderDivider":[516,"hide-header-divider"]}]]],["br-loading",[[65,"br-loading",{"isProgress":[516,"is-progress"],"progressPercent":[514,"progress-percent"],"isMedium":[516,"is-medium"],"label":[513]}]]],["br-radio",[[65,"br-radio",{"checked":[1540],"disabled":[516],"state":[513],"hasHiddenLabel":[516,"has-hidden-label"],"name":[513],"label":[513],"value":[520],"customId":[513,"id"],"computedId":[32]},[[8,"brDidChange","onBrDidChange"]],{"customId":["onCustomIdChange"]}]]],["br-switch",[[65,"br-switch",{"disabled":[516],"checked":[516],"customId":[513,"id"],"label":[1],"labelPosition":[513,"label-position"],"labelOn":[513,"label-on"],"labelOff":[513,"label-off"],"hasIcon":[516,"has-icon"],"name":[513],"value":[513],"density":[513],"_slotDefault":[32],"_checkedValue":[32],"toggleChecked":[64]}]]],["br-textarea",[[65,"br-textarea",{"value":[1537],"label":[513],"placeholder":[513],"disabled":[516],"maxlength":[514],"states":[513],"density":[513],"isDarkMode":[516,"is-dark-mode"],"isLabelLeft":[516,"is-label-left"],"defaultId":[513,"default-id"],"currentLength":[32],"setValue":[64]},null,{"value":["valueChanged"]}]]],["br-button_2",[[65,"br-button",{"colorMode":[513,"color-mode"],"density":[513],"disabled":[516],"emphasis":[513],"isActive":[516,"is-active"],"isLoading":[516,"is-loading"],"shape":[513],"type":[513],"value":[513]}],[1,"br-icon",{"IconName":[513,"icon-name"],"height":[513],"width":[513],"CssClasses":[513,"css-classes"],"isInline":[516,"is-inline"],"rotate":[513],"flip":[513]}]]]], options);
|
|
20
20
|
});
|
|
21
21
|
|
|
22
22
|
//# sourceMappingURL=webcomponents.js.map
|
|
@@ -98,7 +98,7 @@ export declare class Input {
|
|
|
98
98
|
* Texto adicional que fornece ajuda ou informações sobre o input.
|
|
99
99
|
*/
|
|
100
100
|
helpText: string;
|
|
101
|
-
|
|
101
|
+
isPasswordVisible: boolean;
|
|
102
102
|
hasIconSlot: boolean;
|
|
103
103
|
hasActionSlot: boolean;
|
|
104
104
|
/**
|
|
@@ -202,12 +202,16 @@ export declare class Input {
|
|
|
202
202
|
valueChange: EventEmitter<string>;
|
|
203
203
|
private readonly handleInput;
|
|
204
204
|
private readonly renderLabel;
|
|
205
|
-
private readonly togglePasswordVisibility;
|
|
206
205
|
private hasSlotContent;
|
|
207
206
|
private readonly renderInput;
|
|
208
207
|
private readonly renderHelpText;
|
|
209
208
|
private readonly renderIconPassword;
|
|
209
|
+
private readonly togglePasswordVisibility;
|
|
210
210
|
private renderIconSlot;
|
|
211
211
|
private renderButton;
|
|
212
|
+
private readonly renderInlineInputContent;
|
|
213
|
+
private readonly renderInputContent;
|
|
214
|
+
private readonly renderInputWithIcon;
|
|
215
|
+
private readonly renderInputWithoutIcon;
|
|
212
216
|
render(): any;
|
|
213
217
|
}
|