pruebatlp20v17-design-system 0.0.13 → 0.0.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/esm2022/lib/global-styles.component.mjs +2 -2
- package/esm2022/lib/header/header-action.component.mjs +8 -5
- package/esm2022/lib/modal/modal.component.mjs +2 -2
- package/esm2022/lib/subheader/subheader.component.mjs +2 -2
- package/esm2022/lib/textarea/textarea.component.mjs +2 -2
- package/fesm2022/pruebatlp20v17-design-system.mjs +14 -11
- package/fesm2022/pruebatlp20v17-design-system.mjs.map +1 -1
- package/lib/header/header-action.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { Component, Input } from "@angular/core";
|
|
1
|
+
import { Component, EventEmitter, Input, Output } from "@angular/core";
|
|
2
2
|
import { HeaderAction as IbmHeaderAction } from "carbon-components-angular/ui-shell";
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
import * as i1 from "carbon-components-angular/ui-shell";
|
|
5
5
|
export class HeaderActionComponent extends IbmHeaderAction {
|
|
6
6
|
title = "";
|
|
7
|
+
selected = new EventEmitter();
|
|
7
8
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
8
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HeaderActionComponent, selector: "tlp-header-action", inputs: { title: "title" }, usesInheritance: true, ngImport: i0, template: `
|
|
9
|
-
<ibm-header-action [title]="title">
|
|
9
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HeaderActionComponent, selector: "tlp-header-action", inputs: { title: "title" }, outputs: { selected: "selected" }, usesInheritance: true, ngImport: i0, template: `
|
|
10
|
+
<ibm-header-action [title]="title" (selected)="selected.emit($event)">
|
|
10
11
|
<ng-content></ng-content>
|
|
11
12
|
</ibm-header-action>
|
|
12
13
|
`, isInline: true, dependencies: [{ kind: "component", type: i1.HeaderAction, selector: "cds-header-action, ibm-header-action", inputs: ["description", "ariaLabel", "active"], outputs: ["activeChange", "selected"] }] });
|
|
@@ -16,12 +17,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
16
17
|
args: [{
|
|
17
18
|
selector: "tlp-header-action",
|
|
18
19
|
template: `
|
|
19
|
-
<ibm-header-action [title]="title">
|
|
20
|
+
<ibm-header-action [title]="title" (selected)="selected.emit($event)">
|
|
20
21
|
<ng-content></ng-content>
|
|
21
22
|
</ibm-header-action>
|
|
22
23
|
`,
|
|
23
24
|
}]
|
|
24
25
|
}], propDecorators: { title: [{
|
|
25
26
|
type: Input
|
|
27
|
+
}], selected: [{
|
|
28
|
+
type: Output
|
|
26
29
|
}] } });
|
|
27
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
30
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLWFjdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9kZXNpZ24tc3lzdGVtL3NyYy9saWIvaGVhZGVyL2hlYWRlci1hY3Rpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkUsT0FBTyxFQUFFLFlBQVksSUFBSSxlQUFlLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQzs7O0FBVXJGLE1BQU0sT0FBTyxxQkFBc0IsU0FBUSxlQUFlO0lBQy9DLEtBQUssR0FBVyxFQUFFLENBQUM7SUFDVCxRQUFRLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQzt3R0FGL0MscUJBQXFCOzRGQUFyQixxQkFBcUIsK0lBTnRCOzs7O0dBSVQ7OzRGQUVVLHFCQUFxQjtrQkFSakMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsbUJBQW1CO29CQUM3QixRQUFRLEVBQUU7Ozs7R0FJVDtpQkFDRjs4QkFFVSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ2EsUUFBUTtzQkFBMUIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHsgSGVhZGVyQWN0aW9uIGFzIElibUhlYWRlckFjdGlvbiB9IGZyb20gXCJjYXJib24tY29tcG9uZW50cy1hbmd1bGFyL3VpLXNoZWxsXCI7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogXCJ0bHAtaGVhZGVyLWFjdGlvblwiLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8aWJtLWhlYWRlci1hY3Rpb24gW3RpdGxlXT1cInRpdGxlXCIgKHNlbGVjdGVkKT1cInNlbGVjdGVkLmVtaXQoJGV2ZW50KVwiPlxyXG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgICA8L2libS1oZWFkZXItYWN0aW9uPlxyXG4gIGAsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBIZWFkZXJBY3Rpb25Db21wb25lbnQgZXh0ZW5kcyBJYm1IZWFkZXJBY3Rpb24ge1xyXG4gIEBJbnB1dCgpIHRpdGxlOiBzdHJpbmcgPSBcIlwiO1xyXG4gIEBPdXRwdXQoKSBvdmVycmlkZSBzZWxlY3RlZCA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcclxufVxyXG4iXX0=
|
|
@@ -8,11 +8,11 @@ export class ModalComponent {
|
|
|
8
8
|
size = "sm";
|
|
9
9
|
hasScrollingContent = null;
|
|
10
10
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ModalComponent, selector: "tlp-modal", inputs: { open: "open", size: "size", hasScrollingContent: "hasScrollingContent" }, outputs: { overlaySelected: "overlaySelected", close: "close" }, ngImport: i0, template: "<ibm-modal\r\n [open]=\"open\"\r\n (close)=\"close.emit()\"\r\n (overlaySelected)=\"overlaySelected.emit()\"\r\n [size]=\"size\"\r\n [hasScrollingContent]=\"hasScrollingContent\"\r\n>\r\n <ng-content></ng-content>\r\n</ibm-modal>\r\n", styles: ["::ng-deep .
|
|
11
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ModalComponent, selector: "tlp-modal", inputs: { open: "open", size: "size", hasScrollingContent: "hasScrollingContent" }, outputs: { overlaySelected: "overlaySelected", close: "close" }, ngImport: i0, template: "<ibm-modal\r\n [open]=\"open\"\r\n (close)=\"close.emit()\"\r\n (overlaySelected)=\"overlaySelected.emit()\"\r\n [size]=\"size\"\r\n [hasScrollingContent]=\"hasScrollingContent\"\r\n>\r\n <ng-content></ng-content>\r\n</ibm-modal>\r\n", styles: [":host ::ng-deep .cds--modal-container{border-radius:4px;box-shadow:4px 4px 4px #00000040;background-color:#f1f1f1;border:none}:host ::ng-deep .cds--modal-content{font-size:var(--cds-body-long-01-font-size, .875rem);line-height:var(--cds-body-long-01-line-height, 1.42857);letter-spacing:var(--cds-body-long-01-letter-spacing, .16px);position:relative;padding-top:var(--cds-spacing-03, .5rem);padding-right:var(--cds-spacing-05, 1rem);padding-left:var(--cds-spacing-05, 1rem);margin-bottom:var(--cds-spacing-09, 3rem);color:var(--cds-text-01, #161616);font-weight:400;grid-column:1/-1;grid-row:2/-2;overflow-y:auto}:host ::ng-deep .cds--modal-content--overflow-indicator{background-image:linear-gradient(to bottom,transparent,var(--cds-ui-01, #f4f4f4))}:host ::ng-deep .cds--modal-footer{height:4rem;padding:0 1rem 1rem;display:grid;grid-template-columns:1fr 1fr;grid-auto-columns:1fr;gap:0px 16px}:host ::ng-deep .cds--modal-footer .cds--btn{height:3rem;padding-bottom:1rem;width:100%}:host ::ng-deep .cds--modal-footer tlp-button:only-child{grid-column:2}\n"], dependencies: [{ kind: "component", type: i1.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }] });
|
|
12
12
|
}
|
|
13
13
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalComponent, decorators: [{
|
|
14
14
|
type: Component,
|
|
15
|
-
args: [{ selector: "tlp-modal", template: "<ibm-modal\r\n [open]=\"open\"\r\n (close)=\"close.emit()\"\r\n (overlaySelected)=\"overlaySelected.emit()\"\r\n [size]=\"size\"\r\n [hasScrollingContent]=\"hasScrollingContent\"\r\n>\r\n <ng-content></ng-content>\r\n</ibm-modal>\r\n", styles: ["::ng-deep .
|
|
15
|
+
args: [{ selector: "tlp-modal", template: "<ibm-modal\r\n [open]=\"open\"\r\n (close)=\"close.emit()\"\r\n (overlaySelected)=\"overlaySelected.emit()\"\r\n [size]=\"size\"\r\n [hasScrollingContent]=\"hasScrollingContent\"\r\n>\r\n <ng-content></ng-content>\r\n</ibm-modal>\r\n", styles: [":host ::ng-deep .cds--modal-container{border-radius:4px;box-shadow:4px 4px 4px #00000040;background-color:#f1f1f1;border:none}:host ::ng-deep .cds--modal-content{font-size:var(--cds-body-long-01-font-size, .875rem);line-height:var(--cds-body-long-01-line-height, 1.42857);letter-spacing:var(--cds-body-long-01-letter-spacing, .16px);position:relative;padding-top:var(--cds-spacing-03, .5rem);padding-right:var(--cds-spacing-05, 1rem);padding-left:var(--cds-spacing-05, 1rem);margin-bottom:var(--cds-spacing-09, 3rem);color:var(--cds-text-01, #161616);font-weight:400;grid-column:1/-1;grid-row:2/-2;overflow-y:auto}:host ::ng-deep .cds--modal-content--overflow-indicator{background-image:linear-gradient(to bottom,transparent,var(--cds-ui-01, #f4f4f4))}:host ::ng-deep .cds--modal-footer{height:4rem;padding:0 1rem 1rem;display:grid;grid-template-columns:1fr 1fr;grid-auto-columns:1fr;gap:0px 16px}:host ::ng-deep .cds--modal-footer .cds--btn{height:3rem;padding-bottom:1rem;width:100%}:host ::ng-deep .cds--modal-footer tlp-button:only-child{grid-column:2}\n"] }]
|
|
16
16
|
}], propDecorators: { open: [{
|
|
17
17
|
type: Input
|
|
18
18
|
}], overlaySelected: [{
|
|
@@ -2,10 +2,10 @@ import { Component } from "@angular/core";
|
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class SubheaderComponent {
|
|
4
4
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SubheaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SubheaderComponent, selector: "tlp-subheader", ngImport: i0, template: "<div class=\"container\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: ["*{box-sizing:border-box}.container{height:72px;display:flex;align-items:center;padding:0 16px;gap:16px;background:#003c69;color:#fff}:host ::ng-deep .subheader-title{padding:0;border:0;margin:0;font-size:24px;line-height:0;letter-spacing:1px;vertical-align:baseline;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif}:host ::ng-deep .cds--overflow-menu__icon{--cds-icon-01: #ffffff;width:32px;height:32px}:host ::ng-deep .cds--overflow-menu:hover,:host ::ng-deep .cds--overflow-menu__trigger:hover{background:#0003}:host ::ng-deep .cds--overflow-menu.cds--overflow-menu--open,:host ::ng-deep .cds--overflow-menu.cds--overflow-menu--open .cds--overflow-menu__trigger{background:unset}:host ::ng-deep .cds--btn--ghost:not([disabled]) svg{fill:#fff}\n"] });
|
|
5
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SubheaderComponent, selector: "tlp-subheader", ngImport: i0, template: "<div class=\"container\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: ["*{box-sizing:border-box}.container{height:72px;display:flex;align-items:center;padding:0 16px;gap:16px;background:#003c69;color:#fff}:host ::ng-deep .subheader-title{padding:0;border:0;margin:0;font-size:24px;line-height:0;letter-spacing:1px;vertical-align:baseline;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif}:host ::ng-deep .cds--overflow-menu__icon{--cds-icon-01: #ffffff;width:32px;height:32px}:host ::ng-deep .cds--overflow-menu:hover,:host ::ng-deep .cds--overflow-menu__trigger:hover{background:#0003}:host ::ng-deep .cds--overflow-menu.cds--overflow-menu--open,:host ::ng-deep .cds--overflow-menu.cds--overflow-menu--open .cds--overflow-menu__trigger{background:unset;box-shadow:none}:host ::ng-deep .cds--btn--ghost:not([disabled]) svg{fill:#fff}\n"] });
|
|
6
6
|
}
|
|
7
7
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SubheaderComponent, decorators: [{
|
|
8
8
|
type: Component,
|
|
9
|
-
args: [{ selector: "tlp-subheader", template: "<div class=\"container\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: ["*{box-sizing:border-box}.container{height:72px;display:flex;align-items:center;padding:0 16px;gap:16px;background:#003c69;color:#fff}:host ::ng-deep .subheader-title{padding:0;border:0;margin:0;font-size:24px;line-height:0;letter-spacing:1px;vertical-align:baseline;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif}:host ::ng-deep .cds--overflow-menu__icon{--cds-icon-01: #ffffff;width:32px;height:32px}:host ::ng-deep .cds--overflow-menu:hover,:host ::ng-deep .cds--overflow-menu__trigger:hover{background:#0003}:host ::ng-deep .cds--overflow-menu.cds--overflow-menu--open,:host ::ng-deep .cds--overflow-menu.cds--overflow-menu--open .cds--overflow-menu__trigger{background:unset}:host ::ng-deep .cds--btn--ghost:not([disabled]) svg{fill:#fff}\n"] }]
|
|
9
|
+
args: [{ selector: "tlp-subheader", template: "<div class=\"container\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: ["*{box-sizing:border-box}.container{height:72px;display:flex;align-items:center;padding:0 16px;gap:16px;background:#003c69;color:#fff}:host ::ng-deep .subheader-title{padding:0;border:0;margin:0;font-size:24px;line-height:0;letter-spacing:1px;vertical-align:baseline;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif}:host ::ng-deep .cds--overflow-menu__icon{--cds-icon-01: #ffffff;width:32px;height:32px}:host ::ng-deep .cds--overflow-menu:hover,:host ::ng-deep .cds--overflow-menu__trigger:hover{background:#0003}:host ::ng-deep .cds--overflow-menu.cds--overflow-menu--open,:host ::ng-deep .cds--overflow-menu.cds--overflow-menu--open .cds--overflow-menu__trigger{background:unset;box-shadow:none}:host ::ng-deep .cds--btn--ghost:not([disabled]) svg{fill:#fff}\n"] }]
|
|
10
10
|
}] });
|
|
11
11
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3ViaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2Rlc2lnbi1zeXN0ZW0vc3JjL2xpYi9zdWJoZWFkZXIvc3ViaGVhZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2Rlc2lnbi1zeXN0ZW0vc3JjL2xpYi9zdWJoZWFkZXIvc3ViaGVhZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBTzFDLE1BQU0sT0FBTyxrQkFBa0I7d0dBQWxCLGtCQUFrQjs0RkFBbEIsa0JBQWtCLHFEQ1AvQix3RUFHQTs7NEZESWEsa0JBQWtCO2tCQUw5QixTQUFTOytCQUNFLGVBQWUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6IFwidGxwLXN1YmhlYWRlclwiLFxyXG4gIHRlbXBsYXRlVXJsOiBcIi4vc3ViaGVhZGVyLmNvbXBvbmVudC5odG1sXCIsXHJcbiAgc3R5bGVVcmxzOiBbXCIuL3N1YmhlYWRlci5jb21wb25lbnQuc2Nzc1wiXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFN1YmhlYWRlckNvbXBvbmVudCB7fVxyXG4iLCI8ZGl2IGNsYXNzPVwiY29udGFpbmVyXCI+XHJcbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG48L2Rpdj5cclxuIl19
|
|
@@ -54,7 +54,7 @@ export class TextareaComponent {
|
|
|
54
54
|
multi: true,
|
|
55
55
|
useExisting: TextareaComponent,
|
|
56
56
|
},
|
|
57
|
-
], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true }], ngImport: i0, template: "<ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n>\r\n {{ label }}\r\n <textarea\r\n #textareaRef\r\n ibmTextArea\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [value]=\"value\"\r\n [rows]=\"rows\"\r\n (input)=\"handleInput($event)\"\r\n (blur)=\"handleTouch($event)\"\r\n ></textarea>\r\n</ibm-label>\r\n\r\n<button\r\n *ngIf=\"value && value.length > 0\"\r\n class=\"clear-button\"\r\n [ngClass]=\"{ 'with-label-offset': !!label }\"\r\n (click)=\"clear()\"\r\n>\r\n <span class=\"cds--visually-hidden\">Clear</span>\r\n <svg tlpIcon=\"close\" size=\"16\"></svg>\r\n</button>\r\n", styles: [":host{position:relative}::ng-deep .cds--text-area{border:1px solid #003c69;border-radius:4px}::ng-deep .cds--text-area:focus{border-color:#287eff}::ng-deep .cds--text-area:disabled{border:1px solid #afafaf}
|
|
57
|
+
], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true }], ngImport: i0, template: "<ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n>\r\n {{ label }}\r\n <textarea\r\n #textareaRef\r\n ibmTextArea\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [value]=\"value\"\r\n [rows]=\"rows\"\r\n (input)=\"handleInput($event)\"\r\n (blur)=\"handleTouch($event)\"\r\n ></textarea>\r\n</ibm-label>\r\n\r\n<button\r\n *ngIf=\"value && value.length > 0\"\r\n class=\"clear-button\"\r\n [ngClass]=\"{ 'with-label-offset': !!label }\"\r\n (click)=\"clear()\"\r\n>\r\n <span class=\"cds--visually-hidden\">Clear</span>\r\n <svg tlpIcon=\"close\" size=\"16\"></svg>\r\n</button>\r\n", styles: [":host ::ng-deep{position:relative}:host ::ng-deep .cds--text-area__field-wrapper[data-invalid]>.cds--text-area--invalid:not(:focus){outline:none;border:1px solid #d52b1e}:host ::ng-deep .cds--text-area{border:1px solid #003c69;border-radius:4px;width:100%}:host ::ng-deep .cds--text-area:focus{border-color:#287eff}:host ::ng-deep .cds--text-area:disabled{border:1px solid #afafaf}:host ::ng-deep .cds--text-area__invalid-icon{top:1rem}:host ::ng-deep .disabled{--cds-text-02: #afafaf}:host ::ng-deep .empty_label>.cds--label{margin-bottom:0}:host ::ng-deep .clear-button{position:absolute;top:8px;right:0;padding:0;border:0;-webkit-appearance:none;appearance:none;background:none;display:flex;width:32px;height:32px;align-items:center;justify-content:center;cursor:pointer;fill:#003c69}:host ::ng-deep .clear-button.with-label-offset{top:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2.TextArea, selector: "[cdsTextArea], [ibmTextArea]", inputs: ["theme", "invalid", "skeleton"] }, { kind: "directive", type: i3.IconDirective, selector: "[tlpIcon]", inputs: ["tlpIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }] });
|
|
58
58
|
}
|
|
59
59
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
60
60
|
type: Component,
|
|
@@ -64,7 +64,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
64
64
|
multi: true,
|
|
65
65
|
useExisting: TextareaComponent,
|
|
66
66
|
},
|
|
67
|
-
], template: "<ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n>\r\n {{ label }}\r\n <textarea\r\n #textareaRef\r\n ibmTextArea\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [value]=\"value\"\r\n [rows]=\"rows\"\r\n (input)=\"handleInput($event)\"\r\n (blur)=\"handleTouch($event)\"\r\n ></textarea>\r\n</ibm-label>\r\n\r\n<button\r\n *ngIf=\"value && value.length > 0\"\r\n class=\"clear-button\"\r\n [ngClass]=\"{ 'with-label-offset': !!label }\"\r\n (click)=\"clear()\"\r\n>\r\n <span class=\"cds--visually-hidden\">Clear</span>\r\n <svg tlpIcon=\"close\" size=\"16\"></svg>\r\n</button>\r\n", styles: [":host{position:relative}::ng-deep .cds--text-area{border:1px solid #003c69;border-radius:4px}::ng-deep .cds--text-area:focus{border-color:#287eff}::ng-deep .cds--text-area:disabled{border:1px solid #afafaf}
|
|
67
|
+
], template: "<ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n>\r\n {{ label }}\r\n <textarea\r\n #textareaRef\r\n ibmTextArea\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [value]=\"value\"\r\n [rows]=\"rows\"\r\n (input)=\"handleInput($event)\"\r\n (blur)=\"handleTouch($event)\"\r\n ></textarea>\r\n</ibm-label>\r\n\r\n<button\r\n *ngIf=\"value && value.length > 0\"\r\n class=\"clear-button\"\r\n [ngClass]=\"{ 'with-label-offset': !!label }\"\r\n (click)=\"clear()\"\r\n>\r\n <span class=\"cds--visually-hidden\">Clear</span>\r\n <svg tlpIcon=\"close\" size=\"16\"></svg>\r\n</button>\r\n", styles: [":host ::ng-deep{position:relative}:host ::ng-deep .cds--text-area__field-wrapper[data-invalid]>.cds--text-area--invalid:not(:focus){outline:none;border:1px solid #d52b1e}:host ::ng-deep .cds--text-area{border:1px solid #003c69;border-radius:4px;width:100%}:host ::ng-deep .cds--text-area:focus{border-color:#287eff}:host ::ng-deep .cds--text-area:disabled{border:1px solid #afafaf}:host ::ng-deep .cds--text-area__invalid-icon{top:1rem}:host ::ng-deep .disabled{--cds-text-02: #afafaf}:host ::ng-deep .empty_label>.cds--label{margin-bottom:0}:host ::ng-deep .clear-button{position:absolute;top:8px;right:0;padding:0;border:0;-webkit-appearance:none;appearance:none;background:none;display:flex;width:32px;height:32px;align-items:center;justify-content:center;cursor:pointer;fill:#003c69}:host ::ng-deep .clear-button.with-label-offset{top:24px}\n"] }]
|
|
68
68
|
}], propDecorators: { label: [{
|
|
69
69
|
type: Input
|
|
70
70
|
}], helperText: [{
|