@govbr-ds/webcomponents 2.0.0-next.14 → 2.0.0-next.15
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-avatar.cjs.entry.js +1 -1
- package/dist/cjs/br-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/br-button_2.cjs.entry.js +2 -2
- package/dist/cjs/br-button_2.cjs.entry.js.map +1 -1
- package/dist/cjs/br-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/br-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/br-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/br-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/br-input.cjs.entry.js +1 -1
- package/dist/cjs/br-input.cjs.entry.js.map +1 -1
- package/dist/cjs/br-item.cjs.entry.js +2 -2
- package/dist/cjs/br-item.cjs.entry.js.map +1 -1
- package/dist/cjs/br-list.cjs.entry.js +1 -1
- package/dist/cjs/br-list.cjs.entry.js.map +1 -1
- package/dist/cjs/br-loading.cjs.entry.js +2 -2
- package/dist/cjs/br-loading.cjs.entry.js.map +1 -1
- package/dist/cjs/br-message.cjs.entry.js +2 -2
- package/dist/cjs/br-message.cjs.entry.js.map +1 -1
- package/dist/cjs/br-radio.cjs.entry.js +1 -1
- package/dist/cjs/br-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/br-switch.cjs.entry.js +2 -2
- package/dist/cjs/br-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/br-textarea.cjs.entry.js +158 -0
- package/dist/cjs/br-textarea.cjs.entry.js.map +1 -0
- package/dist/cjs/index-fb4e9eaf.js +4 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/webcomponents.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/avatar/avatar.css +54 -1
- package/dist/collection/components/button/button.css +61 -1
- package/dist/collection/components/checkbox/checkbox.css +54 -1
- package/dist/collection/components/dropdown/dropdown.css +54 -1
- package/dist/collection/components/icon/icon.css +54 -1
- package/dist/collection/components/input/input.css +54 -1
- package/dist/collection/components/item/item.css +54 -1
- package/dist/collection/components/item/item.js +1 -1
- package/dist/collection/components/item/item.js.map +1 -1
- package/dist/collection/components/list/list.css +54 -1
- package/dist/collection/components/loading/loading.css +61 -1
- package/dist/collection/components/loading/loading.js +1 -1
- package/dist/collection/components/loading/loading.js.map +1 -1
- package/dist/collection/components/message/message.css +54 -1
- package/dist/collection/components/message/message.js +1 -1
- package/dist/collection/components/message/message.js.map +1 -1
- package/dist/collection/components/radio/radio.css +54 -1
- package/dist/collection/components/switch/switch.css +54 -1
- package/dist/collection/components/switch/switch.js +1 -1
- package/dist/collection/components/switch/switch.js.map +1 -1
- package/dist/collection/components/textarea/textarea.css +522 -0
- package/dist/collection/components/textarea/textarea.js +566 -0
- package/dist/collection/components/textarea/textarea.js.map +1 -0
- package/dist/collection/pages/textarea/textarea.js +19 -0
- package/dist/collection/scripts/menu.js +21 -17
- package/dist/components/br-avatar.js +2 -2
- package/dist/components/br-avatar.js.map +1 -1
- package/dist/components/br-button.js +1 -1
- package/dist/components/br-checkbox.js +1 -1
- package/dist/components/br-checkbox.js.map +1 -1
- package/dist/components/br-dropdown.js +1 -1
- package/dist/components/br-dropdown.js.map +1 -1
- package/dist/components/br-icon.js +1 -1
- package/dist/components/br-input.js +3 -3
- package/dist/components/br-input.js.map +1 -1
- package/dist/components/br-item.js +2 -2
- package/dist/components/br-item.js.map +1 -1
- package/dist/components/br-list.js +1 -1
- package/dist/components/br-list.js.map +1 -1
- package/dist/components/br-loading.js +2 -2
- package/dist/components/br-loading.js.map +1 -1
- package/dist/components/br-message.js +4 -4
- package/dist/components/br-message.js.map +1 -1
- package/dist/components/br-radio.js +1 -1
- package/dist/components/br-radio.js.map +1 -1
- package/dist/components/br-switch.js +2 -2
- package/dist/components/br-switch.js.map +1 -1
- package/dist/components/br-textarea.d.ts +11 -0
- package/dist/components/br-textarea.js +181 -0
- package/dist/components/br-textarea.js.map +1 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/{p-87afe26f.js → p-af0dfebc.js} +2 -2
- package/dist/components/{p-87afe26f.js.map → p-af0dfebc.js.map} +1 -1
- package/dist/components/p-baa2948a.js +138 -0
- package/dist/components/{p-5769e796.js.map → p-baa2948a.js.map} +1 -1
- package/dist/esm/br-avatar.entry.js +1 -1
- package/dist/esm/br-avatar.entry.js.map +1 -1
- package/dist/esm/br-button_2.entry.js +2 -2
- package/dist/esm/br-button_2.entry.js.map +1 -1
- package/dist/esm/br-checkbox.entry.js +1 -1
- package/dist/esm/br-checkbox.entry.js.map +1 -1
- package/dist/esm/br-dropdown.entry.js +1 -1
- package/dist/esm/br-dropdown.entry.js.map +1 -1
- package/dist/esm/br-input.entry.js +1 -1
- package/dist/esm/br-input.entry.js.map +1 -1
- package/dist/esm/br-item.entry.js +2 -2
- package/dist/esm/br-item.entry.js.map +1 -1
- package/dist/esm/br-list.entry.js +1 -1
- package/dist/esm/br-list.entry.js.map +1 -1
- package/dist/esm/br-loading.entry.js +2 -2
- package/dist/esm/br-loading.entry.js.map +1 -1
- package/dist/esm/br-message.entry.js +2 -2
- package/dist/esm/br-message.entry.js.map +1 -1
- package/dist/esm/br-radio.entry.js +1 -1
- package/dist/esm/br-radio.entry.js.map +1 -1
- package/dist/esm/br-switch.entry.js +2 -2
- package/dist/esm/br-switch.entry.js.map +1 -1
- package/dist/esm/br-textarea.entry.js +154 -0
- package/dist/esm/br-textarea.entry.js.map +1 -0
- package/dist/esm/index-c7037515.js +4 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/webcomponents.js +1 -1
- package/dist/types/components/textarea/textarea.d.ts +157 -0
- package/dist/types/components.d.ts +189 -0
- package/dist/webcomponents/p-0f8df882.entry.js +2 -0
- package/dist/webcomponents/{p-14f1c8e6.entry.js.map → p-0f8df882.entry.js.map} +1 -1
- package/dist/webcomponents/p-128b4b58.entry.js +2 -0
- package/dist/webcomponents/{p-9dbe247e.entry.js.map → p-128b4b58.entry.js.map} +1 -1
- package/dist/webcomponents/p-2bc17aba.entry.js +2 -0
- package/dist/webcomponents/p-2bc17aba.entry.js.map +1 -0
- package/dist/webcomponents/p-2ff6ee7a.entry.js +13 -0
- package/dist/webcomponents/{p-dde91d20.entry.js.map → p-2ff6ee7a.entry.js.map} +1 -1
- package/dist/webcomponents/p-4645bc22.entry.js +2 -0
- package/dist/webcomponents/p-4645bc22.entry.js.map +1 -0
- package/dist/webcomponents/p-4e1a6b1e.entry.js +2 -0
- package/dist/webcomponents/{p-8efc22a3.entry.js.map → p-4e1a6b1e.entry.js.map} +1 -1
- package/dist/webcomponents/p-53a18892.entry.js +2 -0
- package/dist/webcomponents/{p-c36696c6.entry.js.map → p-53a18892.entry.js.map} +1 -1
- package/dist/webcomponents/p-6783eb4f.entry.js +2 -0
- package/dist/webcomponents/{p-ac16ee58.entry.js.map → p-6783eb4f.entry.js.map} +1 -1
- package/dist/webcomponents/p-e1d4a515.entry.js +2 -0
- package/dist/webcomponents/p-e1d4a515.entry.js.map +1 -0
- package/dist/webcomponents/p-e74737f9.entry.js +2 -0
- package/dist/webcomponents/p-e74737f9.entry.js.map +1 -0
- package/dist/webcomponents/p-f66d6a1e.entry.js +2 -0
- package/dist/webcomponents/p-f66d6a1e.entry.js.map +1 -0
- package/dist/webcomponents/p-ffbd85fd.entry.js +2 -0
- package/dist/webcomponents/p-ffbd85fd.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 +196 -22
- package/hydrate/index.mjs +196 -22
- package/package.json +1 -1
- package/vscode-data.json +49 -0
- package/dist/components/p-5769e796.js +0 -138
- package/dist/webcomponents/p-0f6e2ddc.entry.js +0 -2
- package/dist/webcomponents/p-0f6e2ddc.entry.js.map +0 -1
- package/dist/webcomponents/p-14f1c8e6.entry.js +0 -2
- package/dist/webcomponents/p-198082b6.entry.js +0 -2
- package/dist/webcomponents/p-198082b6.entry.js.map +0 -1
- package/dist/webcomponents/p-867bba23.entry.js +0 -2
- package/dist/webcomponents/p-867bba23.entry.js.map +0 -1
- package/dist/webcomponents/p-8efc22a3.entry.js +0 -2
- package/dist/webcomponents/p-9dbe247e.entry.js +0 -2
- package/dist/webcomponents/p-a5a079d8.entry.js +0 -2
- package/dist/webcomponents/p-a5a079d8.entry.js.map +0 -1
- package/dist/webcomponents/p-ac16ee58.entry.js +0 -2
- package/dist/webcomponents/p-c36696c6.entry.js +0 -2
- package/dist/webcomponents/p-dde91d20.entry.js +0 -13
- package/dist/webcomponents/p-f01f1e6b.entry.js +0 -2
- package/dist/webcomponents/p-f01f1e6b.entry.js.map +0 -1
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-698e7a18.js';
|
|
2
|
+
import { i as inheritAriaAttributes } from './p-ee6f4f3f.js';
|
|
3
|
+
import { v as v4 } from './p-14616bce.js';
|
|
4
|
+
|
|
5
|
+
const textareaCss = "*,*::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}code{font-family:monospace;font-size:1em}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)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding: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-textarea{--textarea-padding:var(--textarea-medium);--textarea-small:var(--spacing-scale-base);--textarea-medium:var(--spacing-scale-baseh);--textarea-large:var(--spacing-scale-2x);color:var(--color)}.br-textarea label{display:inline-block;margin-bottom:var(--spacing-scale-half)}.br-textarea textarea{background:var(--background-light);border:1px solid var(--border-color-alternative);border-radius:6px;color:var(--color);display:block;font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);padding:var(--textarea-padding);width:100%}.br-textarea.small textarea{--textarea-padding:var(--textarea-small)}.br-textarea.medium textarea{--textarea-padding:var(--textarea-medium)}.br-textarea.large textarea{--textarea-padding:var(--textarea-large)}.br-textarea.success textarea{border-color:var(--success);border-width:2px}.br-textarea.danger textarea{border-color:var(--danger);border-width:2px}.br-textarea.warning textarea{border-color:var(--warning);border-width:2px}.br-textarea.info textarea{border-color:var(--info);border-width:2px}.br-textarea textarea:focus,.br-textarea textarea:focus-visible{border-color:var(--focus) !important;box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-textarea textarea:hover:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-textarea.dark-mode,.br-textarea.dark-mode label{--color:var(--color-dark);--focus-color:var(--focus-color-dark)}.br-textarea.dark-mode textarea{color:var(--color-light)}:host{display:block;box-sizing:border-box;font-family:Rawline, Raleway, sans-serif}";
|
|
6
|
+
const BrTextareaStyle0 = textareaCss;
|
|
7
|
+
|
|
8
|
+
var Density;
|
|
9
|
+
(function (Density) {
|
|
10
|
+
Density["Small"] = "small";
|
|
11
|
+
Density["Medium"] = "medium";
|
|
12
|
+
Density["Large"] = "large";
|
|
13
|
+
})(Density || (Density = {}));
|
|
14
|
+
var States;
|
|
15
|
+
(function (States) {
|
|
16
|
+
States["Danger"] = "danger";
|
|
17
|
+
States["Success"] = "success";
|
|
18
|
+
States["Warning"] = "warning";
|
|
19
|
+
})(States || (States = {}));
|
|
20
|
+
const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends H {
|
|
21
|
+
constructor() {
|
|
22
|
+
super();
|
|
23
|
+
this.__registerHost();
|
|
24
|
+
this.__attachShadow();
|
|
25
|
+
this.brDidConnect = createEvent(this, "brDidConnect", 7);
|
|
26
|
+
this.brWillLoad = createEvent(this, "brWillLoad", 7);
|
|
27
|
+
this.brDidLoad = createEvent(this, "brDidLoad", 7);
|
|
28
|
+
this.brWillRender = createEvent(this, "brWillRender", 7);
|
|
29
|
+
this.brDidRender = createEvent(this, "brDidRender", 7);
|
|
30
|
+
this.brShouldUpdate = createEvent(this, "brShouldUpdate", 7);
|
|
31
|
+
this.brWillUpdate = createEvent(this, "brWillUpdate", 7);
|
|
32
|
+
this.brDidUpdate = createEvent(this, "brDidUpdate", 7);
|
|
33
|
+
this.brDidDisconnect = createEvent(this, "brDidDisconnect", 7);
|
|
34
|
+
this.brFormAssociatedCallback = createEvent(this, "brFormAssociatedCallback", 7);
|
|
35
|
+
this.brFormDisabledCallback = createEvent(this, "brFormDisabledCallback", 7);
|
|
36
|
+
this.brFormResetCallback = createEvent(this, "brFormResetCallback", 7);
|
|
37
|
+
this.brFormStateRestoreCallback = createEvent(this, "brFormStateRestoreCallback", 7);
|
|
38
|
+
this.elementInternals = this.attachInternals();
|
|
39
|
+
this.inheritedAttributes = {};
|
|
40
|
+
this.value = '';
|
|
41
|
+
this.label = '';
|
|
42
|
+
this.placeholder = '';
|
|
43
|
+
this.disabled = false;
|
|
44
|
+
this.maxlength = 0;
|
|
45
|
+
this.states = null;
|
|
46
|
+
this.density = Density.Medium;
|
|
47
|
+
this.isDarkMode = false;
|
|
48
|
+
this.isLabelLeft = false;
|
|
49
|
+
this.currentLength = 0;
|
|
50
|
+
this.defaultId = `br-textarea-${v4()}`;
|
|
51
|
+
}
|
|
52
|
+
connectedCallback() {
|
|
53
|
+
this.brDidConnect.emit();
|
|
54
|
+
}
|
|
55
|
+
componentWillLoad() {
|
|
56
|
+
this.currentLength = this.value.length;
|
|
57
|
+
this.brWillLoad.emit();
|
|
58
|
+
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
|
59
|
+
}
|
|
60
|
+
componentDidLoad() {
|
|
61
|
+
this.brDidLoad.emit();
|
|
62
|
+
}
|
|
63
|
+
componentWillRender() {
|
|
64
|
+
this.brWillRender.emit();
|
|
65
|
+
}
|
|
66
|
+
componentDidRender() {
|
|
67
|
+
this.brDidRender.emit();
|
|
68
|
+
}
|
|
69
|
+
componentShouldUpdate() {
|
|
70
|
+
this.brShouldUpdate.emit();
|
|
71
|
+
}
|
|
72
|
+
componentWillUpdate() {
|
|
73
|
+
this.brWillUpdate.emit();
|
|
74
|
+
}
|
|
75
|
+
componentDidUpdate() {
|
|
76
|
+
this.brDidUpdate.emit();
|
|
77
|
+
}
|
|
78
|
+
disconnectedCallback() {
|
|
79
|
+
this.brDidDisconnect.emit();
|
|
80
|
+
}
|
|
81
|
+
formAssociatedCallback(form) {
|
|
82
|
+
this.brFormAssociatedCallback.emit(form);
|
|
83
|
+
}
|
|
84
|
+
formDisabledCallback(disabled) {
|
|
85
|
+
this.brFormDisabledCallback.emit(disabled);
|
|
86
|
+
}
|
|
87
|
+
formResetCallback() {
|
|
88
|
+
this.brFormResetCallback.emit();
|
|
89
|
+
}
|
|
90
|
+
formStateRestoreCallback(state, _mode) {
|
|
91
|
+
this.brFormStateRestoreCallback.emit([state, _mode]);
|
|
92
|
+
}
|
|
93
|
+
valueChanged() {
|
|
94
|
+
this.currentLength = this.value.length;
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Manipula a mudança de valor do textarea. Atualiza o valor e emite um evento de mudança.
|
|
98
|
+
* @param event - O evento de entrada do textarea.
|
|
99
|
+
*/
|
|
100
|
+
handleChange(event) {
|
|
101
|
+
const textarea = event.target;
|
|
102
|
+
this.value = textarea.value;
|
|
103
|
+
this.currentLength = this.value.length;
|
|
104
|
+
this.emitValueChange();
|
|
105
|
+
}
|
|
106
|
+
/**
|
|
107
|
+
* Define um novo valor para o textarea.
|
|
108
|
+
* @param newValue - O novo valor a ser definido.
|
|
109
|
+
*/
|
|
110
|
+
async setValue(newValue) {
|
|
111
|
+
this.value = newValue;
|
|
112
|
+
this.currentLength = this.value.length;
|
|
113
|
+
this.emitValueChange();
|
|
114
|
+
}
|
|
115
|
+
emitValueChange() {
|
|
116
|
+
const changeEvent = new CustomEvent('valueChange', {
|
|
117
|
+
detail: { value: this.value },
|
|
118
|
+
bubbles: true,
|
|
119
|
+
composed: true,
|
|
120
|
+
});
|
|
121
|
+
this.el.dispatchEvent(changeEvent);
|
|
122
|
+
}
|
|
123
|
+
getCssClassMap() {
|
|
124
|
+
return {
|
|
125
|
+
'br-textarea': true,
|
|
126
|
+
'dark-mode': this.isDarkMode,
|
|
127
|
+
small: this.density === Density.Small,
|
|
128
|
+
medium: this.density === Density.Medium,
|
|
129
|
+
large: this.density === Density.Large,
|
|
130
|
+
success: this.states === States.Success,
|
|
131
|
+
danger: this.states === States.Danger,
|
|
132
|
+
warning: this.states === States.Warning,
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
render() {
|
|
136
|
+
const caracteresRestantes = this.maxlength - this.currentLength;
|
|
137
|
+
const mostrarLimite = this.currentLength === 0;
|
|
138
|
+
return (h(Host, { key: '9aaae65f9b632e21c44a8ea4ce736d6e5e394b85' }, h("div", Object.assign({ key: '5bcc99ec860393cf7be86403fde553c12df1f3ca', class: this.getCssClassMap() }, this.inheritedAttributes), h("div", { key: 'b19610ee44e038fd69b38bbb6773f805116e99a1', class: this.isLabelLeft ? 'row' : '' }, this.isLabelLeft ? (h("div", { class: "col-auto pt-half" }, h("label", { htmlFor: this.defaultId }, this.label))) : (h("label", { htmlFor: this.defaultId }, this.label)), h("div", { key: '3af5ad0220ff70f942ba7144e662066801b695bd', class: this.isLabelLeft ? 'col' : '' }, h("textarea", Object.assign({ key: 'a0630ed64f956f5c7179738fba617dc387d1a87b', id: this.defaultId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleChange.bind(this) }, (this.maxlength > 0 ? { maxLength: this.maxlength } : {}))), h("div", { key: '98c265485d7f229ea0284a77b610799037b0186b', class: "text-base mt-1" }, this.maxlength > 0 && (h("div", { key: '3edc0d76bc64ca56dfbcc548e79eb2b379d2eb0e' }, mostrarLimite ? (h("span", { class: "limit", "aria-live": "polite" }, "Limite m\u00E1ximo de ", h("strong", null, this.maxlength), " caracteres")) : (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: "limitmax" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres"))))), h("slot", { key: '8b41a47359ea19a8bee6e39c2b02ac65aa2cfaa1' }))))));
|
|
139
|
+
}
|
|
140
|
+
static get formAssociated() { return true; }
|
|
141
|
+
get el() { return this; }
|
|
142
|
+
static get watchers() { return {
|
|
143
|
+
"value": ["valueChanged"]
|
|
144
|
+
}; }
|
|
145
|
+
static get style() { return BrTextareaStyle0; }
|
|
146
|
+
}, [65, "br-textarea", {
|
|
147
|
+
"value": [1537],
|
|
148
|
+
"label": [513],
|
|
149
|
+
"placeholder": [513],
|
|
150
|
+
"disabled": [516],
|
|
151
|
+
"maxlength": [514],
|
|
152
|
+
"states": [513],
|
|
153
|
+
"density": [513],
|
|
154
|
+
"isDarkMode": [516, "is-dark-mode"],
|
|
155
|
+
"isLabelLeft": [516, "is-label-left"],
|
|
156
|
+
"defaultId": [513, "default-id"],
|
|
157
|
+
"currentLength": [32],
|
|
158
|
+
"setValue": [64]
|
|
159
|
+
}, undefined, {
|
|
160
|
+
"value": ["valueChanged"]
|
|
161
|
+
}]);
|
|
162
|
+
function defineCustomElement$1() {
|
|
163
|
+
if (typeof customElements === "undefined") {
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
166
|
+
const components = ["br-textarea"];
|
|
167
|
+
components.forEach(tagName => { switch (tagName) {
|
|
168
|
+
case "br-textarea":
|
|
169
|
+
if (!customElements.get(tagName)) {
|
|
170
|
+
customElements.define(tagName, Textarea);
|
|
171
|
+
}
|
|
172
|
+
break;
|
|
173
|
+
} });
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
const BrTextarea = Textarea;
|
|
177
|
+
const defineCustomElement = defineCustomElement$1;
|
|
178
|
+
|
|
179
|
+
export { BrTextarea, defineCustomElement };
|
|
180
|
+
|
|
181
|
+
//# sourceMappingURL=br-textarea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"br-textarea.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,4jTAA4jT,CAAC;AACjlT,yBAAe,WAAW;;ACiB1B,IAAK,OAIJ;AAJD,WAAK,OAAO;IACV,0BAAe,CAAA;IACf,4BAAiB,CAAA;IACjB,0BAAe,CAAA;AACjB,CAAC,EAJI,OAAO,KAAP,OAAO,QAIX;AAED,IAAK,MAIJ;AAJD,WAAK,MAAM;IACT,2BAAiB,CAAA;IACjB,6BAAmB,CAAA;IACnB,6BAAmB,CAAA;AACrB,CAAC,EAJI,MAAM,KAAN,MAAM,QAIV;MAaY,QAAQ;;;;;;;;;;;;;;;;;;;QAgPX,wBAAmB,GAAe,EAAE,CAAA;qBA1OY,EAAE;qBAKjB,EAAE;2BAKI,EAAE;wBAKJ,KAAK;yBAKL,CAAC;sBAKJ,IAAI;uBAKH,OAAO,CAAC,MAAM;0BAKV,KAAK;2BAKJ,KAAK;6BAKpB,CAAC;yBASW,eAAeA,EAAM,EAAE,EAAE;;IAOtE,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;KACzB;IAQD,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA;QACtC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAA;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;KAC1D;IAQD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;KACtB;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;KACzB;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;KACxB;IAQD,qBAAqB;QACnB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;KAC3B;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;KACzB;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;KACxB;IAQD,oBAAoB;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAA;KAC5B;IAOD,sBAAsB,CAAC,IAAc;QACnC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KACzC;IAOD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;KAC3C;IAOD,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAA;KAChC;IAOD,wBAAwB,CAAC,KAAa,EAAE,KAAa;QACnD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;KACrD;IAGD,YAAY;QACV,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA;KACvC;;;;;IAMD,YAAY,CAAC,KAAY;QACvB,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA6B,CAAA;QACpD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAA;QAC3B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA;QAEtC,IAAI,CAAC,eAAe,EAAE,CAAA;KACvB;;;;;IAOD,MAAM,QAAQ,CAAC,QAAgB;QAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAA;QACrB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA;QAEtC,IAAI,CAAC,eAAe,EAAE,CAAA;KACvB;IAEO,eAAe;QACrB,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,aAAa,EAAE;YACjD,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAA;QACF,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;KACnC;IAEO,cAAc;QACpB,OAAO;YACL,aAAa,EAAE,IAAI;YACnB,WAAW,EAAE,IAAI,CAAC,UAAU;YAC5B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK;YACrC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,MAAM;YACvC,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK;YACrC,OAAO,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,OAAO;YACvC,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM;YACrC,OAAO,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,OAAO;SACxC,CAAA;KACF;IAID,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAA;QAC/D,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,KAAK,CAAC,CAAA;QAE9C,QACE,EAAC,IAAI,uDACH,0EAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IAAM,IAAI,CAAC,mBAAmB,GAC7D,4DAAK,KAAK,EAAE,IAAI,CAAC,WAAW,GAAG,KAAK,GAAG,EAAE,IACtC,IAAI,CAAC,WAAW,IACf,WAAK,KAAK,EAAC,kBAAkB,IAC3B,aAAO,OAAO,EAAE,IAAI,CAAC,SAAS,IAAG,IAAI,CAAC,KAAK,CAAS,CAChD,KAEN,aAAO,OAAO,EAAE,IAAI,CAAC,SAAS,IAAG,IAAI,CAAC,KAAK,CAAS,CACrD,EACD,4DAAK,KAAK,EAAE,IAAI,CAAC,WAAW,GAAG,KAAK,GAAG,EAAE,IACvC,+EACE,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAChC,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,GAClD,EACZ,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,SAAS,GAAG,CAAC,KACjB,8DACG,aAAa,IACZ,YAAM,KAAK,EAAC,OAAO,eAAW,QAAQ,8BACnB,kBAAS,IAAI,CAAC,SAAS,CAAU,gBAC7C,KAEP,YAAM,KAAK,EAAC,WAAW,eAAW,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAC,UAAU,eAC7D,kBAAS,mBAAmB,CAAU,gBACxC,CACR,CACG,CACP,CACG,EACN,8DAAa,CACT,CACF,CACF,CACD,EACR;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["uuidv4"],"sources":["src/components/textarea/textarea.scss?tag=br-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@import \"../../../../../node_modules/@govbr-ds/core/src/components/textarea/textarea.scss\";\n:host {\n display: block;\n box-sizing: border-box;\n font-family: Rawline, Raleway, sans-serif;\n}\n","import {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport { v4 as uuidv4 } from 'uuid'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\nenum Density {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\n\nenum States {\n Danger = 'danger',\n Success = 'success',\n Warning = 'warning',\n}\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/textarea?tab=designer).\n *\n * @slot default - Espaço de conteúdo do textarea. Geralmente usado para incluir texto adicional ou instruções para o usuário.\n */\n@Component({\n tag: 'br-textarea',\n styleUrl: 'textarea.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Textarea {\n @Element() el: HTMLElement\n\n /**\n * Valor atual do textarea. Este valor pode ser alterado programaticamente.\n */\n @Prop({ mutable: true, reflect: true }) value: string = ''\n\n /**\n * Texto do rótulo associado ao textarea. Este rótulo é exibido acima do campo de entrada.\n */\n @Prop({ reflect: true }) label: string = ''\n\n /**\n * Texto exibido quando o textarea está vazio. Ajuda a guiar o usuário sobre o que deve ser inserido.\n */\n @Prop({ reflect: true }) placeholder: string = ''\n\n /**\n * Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo.\n */\n @Prop({ reflect: true }) disabled: boolean = false\n\n /**\n * Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite.\n */\n @Prop({ reflect: true }) maxlength: number = 0\n\n /**\n * Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'.\n */\n @Prop({ reflect: true }) states: string = null\n\n /**\n * Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'.\n */\n @Prop({ reflect: true }) density: string = Density.Medium\n\n /**\n * Ativa o modo escuro para o componente. Quando verdadeiro, o componente será exibido em um tema escuro.\n */\n @Prop({ reflect: true }) isDarkMode: boolean = false\n\n /**\n * Define se o rótulo deve ser exibido à esquerda do textarea. Quando verdadeiro, o rótulo é posicionado à esquerda.\n */\n @Prop({ reflect: true }) isLabelLeft: boolean = false\n\n /**\n * Comprimento atual do texto no textarea. É atualizado sempre que o valor do textarea muda.\n */\n @State() currentLength: number = 0\n\n @AttachInternals() elementInternals: ElementInternals\n\n /**\n * Identificador único do textarea, gerado automaticamente.\n * Este ID é utilizado para associar o textarea a outros elementos, como rótulos,\n * e garantir que cada instância do componente tenha um identificador distinto.\n */\n @Prop({ reflect: true }) defaultId: string = `br-textarea-${uuidv4()}`\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.currentLength = this.value.length\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 formulário associado é enviado.\n * Utilize este evento para realizar ações quando o formulário é enviado.\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 do formulário é alterado para desabilitado.\n * Utilize este evento para realizar ações quando o formulário é desabilitado.\n */\n @Event() brFormDisabledCallback: EventEmitter<boolean>\n formDisabledCallback(disabled: boolean) {\n this.brFormDisabledCallback.emit(disabled)\n }\n\n /**\n * Emite um evento quando o formulário é redefinido.\n * Utilize este evento para realizar ações quando o formulário é redefinido.\n */\n @Event() brFormResetCallback: EventEmitter<void>\n formResetCallback() {\n this.brFormResetCallback.emit()\n }\n\n /**\n * Emite um evento para restaurar o estado do formulário.\n * Utilize este evento para realizar ações quando o estado do formulário é restaurado.\n */\n @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n formStateRestoreCallback(state: string, _mode: string) {\n this.brFormStateRestoreCallback.emit([state, _mode])\n }\n\n @Watch('value')\n valueChanged() {\n this.currentLength = this.value.length\n }\n\n /**\n * Manipula a mudança de valor do textarea. Atualiza o valor e emite um evento de mudança.\n * @param event - O evento de entrada do textarea.\n */\n handleChange(event: Event) {\n const textarea = event.target as HTMLTextAreaElement\n this.value = textarea.value\n this.currentLength = this.value.length\n\n this.emitValueChange()\n }\n\n /**\n * Define um novo valor para o textarea.\n * @param newValue - O novo valor a ser definido.\n */\n @Method()\n async setValue(newValue: string) {\n this.value = newValue\n this.currentLength = this.value.length\n\n this.emitValueChange()\n }\n\n private emitValueChange() {\n const changeEvent = new CustomEvent('valueChange', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n })\n this.el.dispatchEvent(changeEvent)\n }\n\n private getCssClassMap(): CssClassMap {\n return {\n 'br-textarea': true,\n 'dark-mode': this.isDarkMode,\n small: this.density === Density.Small,\n medium: this.density === Density.Medium,\n large: this.density === Density.Large,\n success: this.states === States.Success,\n danger: this.states === States.Danger,\n warning: this.states === States.Warning,\n }\n }\n\n private inheritedAttributes: Attributes = {}\n\n render() {\n const caracteresRestantes = this.maxlength - this.currentLength\n const mostrarLimite = this.currentLength === 0\n\n return (\n <Host>\n <div class={this.getCssClassMap()} {...this.inheritedAttributes}>\n <div class={this.isLabelLeft ? 'row' : ''}>\n {this.isLabelLeft ? (\n <div class=\"col-auto pt-half\">\n <label htmlFor={this.defaultId}>{this.label}</label>\n </div>\n ) : (\n <label htmlFor={this.defaultId}>{this.label}</label>\n )}\n <div class={this.isLabelLeft ? 'col' : ''}>\n <textarea\n id={this.defaultId}\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n onInput={this.handleChange.bind(this)}\n {...(this.maxlength > 0 ? { maxLength: this.maxlength } : {})}\n ></textarea>\n <div class=\"text-base mt-1\">\n {this.maxlength > 0 && (\n <div>\n {mostrarLimite ? (\n <span class=\"limit\" aria-live=\"polite\">\n Limite máximo de <strong>{this.maxlength}</strong> caracteres\n </span>\n ) : (\n <span class=\"restantes\" aria-live=\"polite\" role=\"status\" id=\"limitmax\">\n Restam <strong>{caracteresRestantes}</strong> caracteres\n </span>\n )}\n </div>\n )}\n </div>\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n )\n }\n}\n"],"version":3}
|
|
@@ -23,6 +23,8 @@ export { Radio as BrRadio } from '../types/components/radio/radio';
|
|
|
23
23
|
export { defineCustomElement as defineCustomElementBrRadio } from './br-radio';
|
|
24
24
|
export { Switch as BrSwitch } from '../types/components/switch/switch';
|
|
25
25
|
export { defineCustomElement as defineCustomElementBrSwitch } from './br-switch';
|
|
26
|
+
export { Textarea as BrTextarea } from '../types/components/textarea/textarea';
|
|
27
|
+
export { defineCustomElement as defineCustomElementBrTextarea } from './br-textarea';
|
|
26
28
|
|
|
27
29
|
/**
|
|
28
30
|
* Get the base path to where the assets can be found. Use "setAssetPath(path)"
|
package/dist/components/index.js
CHANGED
|
@@ -11,5 +11,6 @@ export { BrLoading, defineCustomElement as defineCustomElementBrLoading } from '
|
|
|
11
11
|
export { BrMessage, defineCustomElement as defineCustomElementBrMessage } from './br-message.js';
|
|
12
12
|
export { BrRadio, defineCustomElement as defineCustomElementBrRadio } from './br-radio.js';
|
|
13
13
|
export { BrSwitch, defineCustomElement as defineCustomElementBrSwitch } from './br-switch.js';
|
|
14
|
+
export { BrTextarea, defineCustomElement as defineCustomElementBrTextarea } from './br-textarea.js';
|
|
14
15
|
|
|
15
16
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"index.js","mappings":"
|
|
1
|
+
{"file":"index.js","mappings":";;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
|
@@ -2389,7 +2389,7 @@ function defineIconifyIcon(name = 'iconify-icon') {
|
|
|
2389
2389
|
*/
|
|
2390
2390
|
defineIconifyIcon() || exportFunctions();
|
|
2391
2391
|
|
|
2392
|
-
const iconCss = "*,*::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}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input{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}[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}.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){.row{--grid-gutter:var(--grid-tablet-gutter)}}@media (min-width: 992px){.row{--grid-gutter:var(--grid-tablet-gutter)}}@media (min-width: 1280px){.row{--grid-gutter:var(--grid-desktop-gutter)}}@media (min-width: 1600px){.row{--grid-gutter:var(--grid-tv-gutter)}}.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}.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,.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)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding: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}.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)}:host{margin:0 var(--spacing-scale-base)}";
|
|
2392
|
+
const iconCss = "*,*::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}code{font-family:monospace;font-size:1em}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)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding: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)}:host{margin:0 var(--spacing-scale-base)}";
|
|
2393
2393
|
const BrIconStyle0 = iconCss;
|
|
2394
2394
|
|
|
2395
2395
|
const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends H {
|
|
@@ -2473,4 +2473,4 @@ function defineCustomElement() {
|
|
|
2473
2473
|
|
|
2474
2474
|
export { Icon as I, defineCustomElement as d };
|
|
2475
2475
|
|
|
2476
|
-
//# sourceMappingURL=p-
|
|
2476
|
+
//# sourceMappingURL=p-af0dfebc.js.map
|