carbon-components-angular
Version:
Next generation components
1,207 lines (1,191 loc) • 69.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, HostBinding, TemplateRef, Component, ViewChild, ContentChild, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'carbon-components-angular/icon';
import { IconModule } from 'carbon-components-angular/icon';
import { BaseIconButton, ButtonModule } from 'carbon-components-angular/button';
import * as i3 from 'carbon-components-angular/tooltip';
import { TooltipModule } from 'carbon-components-angular/tooltip';
/**
* A directive for applying styling to an input element.
*
* Example:
*
* ```html
* <input cdsText/>
* ```
*
* See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.
*/
class TextInput {
constructor() {
/**
* @deprecated since v5 - Use `cdsLayer` directive instead
* `light` or `dark` input theme
*/
this.theme = "dark";
/**
* Input field render size
*/
this.size = "md";
this.inputClass = true;
this.invalid = false;
this.warn = false;
this.skeleton = false;
}
/**
* @todo - remove `cds--text-input--${size}` classes in v12
*/
get isSizeSm() {
return this.size === "sm";
}
get isSizeMd() {
return this.size === "md";
}
get isSizelg() {
return this.size === "lg";
}
// Size
get sizeSm() {
return this.size === "sm";
}
get sizeMd() {
return this.size === "md";
}
get sizelg() {
return this.size === "lg";
}
get isLightTheme() {
return this.theme === "light";
}
get getInvalidAttribute() {
return this.invalid ? true : undefined;
}
}
TextInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
TextInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TextInput, selector: "[cdsText], [ibmText]", inputs: { theme: "theme", size: "size", invalid: "invalid", warn: "warn", skeleton: "skeleton" }, host: { properties: { "class.cds--text-input": "this.inputClass", "class.cds--text-input--sm": "this.isSizeSm", "class.cds--text-input--md": "this.isSizeMd", "class.cds--text-input--lg": "this.isSizelg", "class.cds--layout--size-sm": "this.sizeSm", "class.cds--layout--size-md": "this.sizeMd", "class.cds--layout--size-lg": "this.sizelg", "class.cds--text-input--invalid": "this.invalid", "class.cds--text-input--warning": "this.warn", "class.cds--skeleton": "this.skeleton", "class.cds--text-input--light": "this.isLightTheme", "attr.data-invalid": "this.getInvalidAttribute" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextInput, decorators: [{
type: Directive,
args: [{
selector: "[cdsText], [ibmText]"
}]
}], propDecorators: { theme: [{
type: Input
}], size: [{
type: Input
}], inputClass: [{
type: HostBinding,
args: ["class.cds--text-input"]
}], isSizeSm: [{
type: HostBinding,
args: ["class.cds--text-input--sm"]
}], isSizeMd: [{
type: HostBinding,
args: ["class.cds--text-input--md"]
}], isSizelg: [{
type: HostBinding,
args: ["class.cds--text-input--lg"]
}], sizeSm: [{
type: HostBinding,
args: ["class.cds--layout--size-sm"]
}], sizeMd: [{
type: HostBinding,
args: ["class.cds--layout--size-md"]
}], sizelg: [{
type: HostBinding,
args: ["class.cds--layout--size-lg"]
}], invalid: [{
type: HostBinding,
args: ["class.cds--text-input--invalid"]
}, {
type: Input
}], warn: [{
type: HostBinding,
args: ["class.cds--text-input--warning"]
}, {
type: Input
}], skeleton: [{
type: HostBinding,
args: ["class.cds--skeleton"]
}, {
type: Input
}], isLightTheme: [{
type: HostBinding,
args: ["class.cds--text-input--light"]
}], getInvalidAttribute: [{
type: HostBinding,
args: ["attr.data-invalid"]
}] } });
/**
* A directive for applying styling to a textarea element.
*
* Example:
*
* ```html
* <textarea cdsTextArea></textarea>
* ```
*
* See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.
*/
class TextArea {
constructor() {
/**
* @deprecated since v5 - Use `cdsLayer` directive instead
* `light` or `dark` input theme
*/
this.theme = "dark";
this.baseClass = true;
this.invalid = false;
this.skeleton = false;
}
get isLightTheme() {
return this.theme === "light";
}
get getInvalidAttr() {
return this.invalid ? true : undefined;
}
}
TextArea.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextArea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
TextArea.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TextArea, selector: "[cdsTextArea], [ibmTextArea]", inputs: { theme: "theme", invalid: "invalid", skeleton: "skeleton" }, host: { properties: { "class.cds--text-area": "this.baseClass", "class.cds--text-area--invalid": "this.invalid", "class.cds--skeleton": "this.skeleton", "class.cds--text-area--light": "this.isLightTheme", "attr.data-invalid": "this.getInvalidAttr" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextArea, decorators: [{
type: Directive,
args: [{
selector: "[cdsTextArea], [ibmTextArea]"
}]
}], propDecorators: { theme: [{
type: Input
}], baseClass: [{
type: HostBinding,
args: ["class.cds--text-area"]
}], invalid: [{
type: HostBinding,
args: ["class.cds--text-area--invalid"]
}, {
type: Input
}], skeleton: [{
type: HostBinding,
args: ["class.cds--skeleton"]
}, {
type: Input
}], isLightTheme: [{
type: HostBinding,
args: ["class.cds--text-area--light"]
}], getInvalidAttr: [{
type: HostBinding,
args: ["attr.data-invalid"]
}] } });
class PasswordInput {
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
this.passwordInputClass = true;
this.inputClass = true;
this.invalid = false;
this.warn = false;
this.skeleton = false;
/**
* @deprecated since v5 - Use `cdsLayer` directive instead
* `light` or `dark` input theme
*/
this.theme = "dark";
/**
* Input field render size
*/
this.size = "md";
this._type = "password";
}
set type(type) {
if (type) {
this._type = type;
if (this.elementRef) {
this.renderer.setAttribute(this.elementRef.nativeElement, "type", this._type);
}
}
}
/**
* @todo - remove `cds--text-input--${size}` classes in v12
*/
get isSizeSm() {
return this.size === "sm";
}
get isSizeMd() {
return this.size === "md";
}
get isSizelg() {
return this.size === "lg";
}
// Size
get sizeSm() {
return this.size === "sm";
}
get sizeMd() {
return this.size === "md";
}
get sizelg() {
return this.size === "lg";
}
get isLightTheme() {
return this.theme === "light";
}
get getInvalidAttribute() {
return this.invalid ? true : undefined;
}
ngAfterViewInit() {
this.renderer.setAttribute(this.elementRef.nativeElement, "type", this._type);
}
}
PasswordInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PasswordInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
PasswordInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: PasswordInput, selector: "[cdsPassword], [ibmPassword]", inputs: { type: "type", invalid: "invalid", warn: "warn", skeleton: "skeleton", theme: "theme", size: "size" }, host: { properties: { "class.cds--password-input": "this.passwordInputClass", "class.cds--text-input--sm": "this.isSizeSm", "class.cds--text-input--md": "this.isSizeMd", "class.cds--text-input--lg": "this.isSizelg", "class.cds--layout--size-sm": "this.sizeSm", "class.cds--layout--size-md": "this.sizeMd", "class.cds--layout--size-lg": "this.sizelg", "class.cds--text-input--light": "this.isLightTheme", "class.cds--text-input": "this.inputClass", "class.cds--text-input--invalid": "this.invalid", "class.cds--text-input--warning": "this.warn", "class.cds--skeleton": "this.skeleton", "attr.data-invalid": "this.getInvalidAttribute" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PasswordInput, decorators: [{
type: Directive,
args: [{
selector: "[cdsPassword], [ibmPassword]"
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { type: [{
type: Input
}], passwordInputClass: [{
type: HostBinding,
args: ["class.cds--password-input"]
}], isSizeSm: [{
type: HostBinding,
args: ["class.cds--text-input--sm"]
}], isSizeMd: [{
type: HostBinding,
args: ["class.cds--text-input--md"]
}], isSizelg: [{
type: HostBinding,
args: ["class.cds--text-input--lg"]
}], sizeSm: [{
type: HostBinding,
args: ["class.cds--layout--size-sm"]
}], sizeMd: [{
type: HostBinding,
args: ["class.cds--layout--size-md"]
}], sizelg: [{
type: HostBinding,
args: ["class.cds--layout--size-lg"]
}], isLightTheme: [{
type: HostBinding,
args: ["class.cds--text-input--light"]
}], inputClass: [{
type: HostBinding,
args: ["class.cds--text-input"]
}], invalid: [{
type: HostBinding,
args: ["class.cds--text-input--invalid"]
}, {
type: Input
}], warn: [{
type: HostBinding,
args: ["class.cds--text-input--warning"]
}, {
type: Input
}], skeleton: [{
type: HostBinding,
args: ["class.cds--skeleton"]
}, {
type: Input
}], theme: [{
type: Input
}], size: [{
type: Input
}], getInvalidAttribute: [{
type: HostBinding,
args: ["attr.data-invalid"]
}] } });
/**
* Get started with importing the module:
*
* ```typescript
* import { InputModule } from 'carbon-components-angular';
* ```
*
* ```html
* <cds-textarea-label>
* Label
* <textarea cdsTextArea class="textarea-field">
* </cds-textarea-label>
* ```
*
* [See demo](../../?path=/story/components-input-text-area--basic)
*/
class TextareaLabelComponent {
/**
* Creates an instance of Label.
*/
constructor(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
/**
* The id of the input item associated with the `Label`. This value is also used to associate the `Label` with
* its input counterpart through the 'for' attribute.
*/
this.labelInputID = "ibm-textarea-" + TextareaLabelComponent.labelCounter;
/**
* Set to `true` for a disabled label.
*/
this.disabled = false;
/**
* Set to `true` for a loading label.
*/
this.skeleton = false;
/**
* Set to `true` for an invalid label component.
*/
this.invalid = false;
/**
* Set to `true` to show a warning (contents set by warningText)
*/
this.warn = false;
/**
* Experimental: enable fluid state
*/
this.fluid = false;
this.labelClass = true;
}
get isReadonly() {
var _a, _b, _c;
return (_c = (_b = (_a = this.wrapper) === null || _a === void 0 ? void 0 : _a.nativeElement.querySelector("textarea")) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
}
get fluidClass() {
return this.fluid && !this.skeleton;
}
get fluidSkeletonClass() {
return this.fluid && this.skeleton;
}
/**
* Sets the id on the input item associated with the `Label`.
*/
ngAfterViewInit() {
if (this.wrapper) {
// Prioritize setting id to `textarea` over div
const inputElement = this.wrapper.nativeElement.querySelector("textarea");
if (inputElement) {
// avoid overriding ids already set by the user reuse it instead
if (inputElement.id) {
this.labelInputID = inputElement.id;
this.changeDetectorRef.detectChanges();
}
inputElement.setAttribute("id", this.labelInputID);
return;
}
const divElement = this.wrapper.nativeElement.querySelector("div");
if (divElement) {
if (divElement.id) {
this.labelInputID = divElement.id;
this.changeDetectorRef.detectChanges();
}
divElement.setAttribute("id", this.labelInputID);
}
}
}
isTemplate(value) {
return value instanceof TemplateRef;
}
}
/**
* Used to build the id of the input item associated with the `Label`.
*/
TextareaLabelComponent.labelCounter = 0;
TextareaLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextareaLabelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
TextareaLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextareaLabelComponent, selector: "cds-textarea-label, ibm-textarea-label", inputs: { labelInputID: "labelInputID", disabled: "disabled", skeleton: "skeleton", labelTemplate: "labelTemplate", textAreaTemplate: "textAreaTemplate", helperText: "helperText", invalidText: "invalidText", invalid: "invalid", warn: "warn", warnText: "warnText", ariaLabel: "ariaLabel", fluid: "fluid" }, host: { properties: { "class.cds--form-item": "this.labelClass", "class.cds--text-area__wrapper--readonly": "this.isReadonly", "class.cds--text-area--fluid": "this.fluidClass", "class.cds--text-area--fluid__skeleton": "this.fluidSkeletonClass" } }, queries: [{ propertyName: "textArea", first: true, predicate: TextArea, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0, template: `
<ng-container *ngIf="skeleton">
<span class="cds--label cds--skeleton"></span>
<div class="cds--text-area cds--skeleton"></div>
</ng-container>
<ng-container *ngIf="!skeleton">
<div class="cds--text-area__label-wrapper">
<label
[for]="labelInputID"
[attr.aria-label]="ariaLabel"
class="cds--label"
[ngClass]="{
'cds--label--disabled': disabled
}">
<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
<ng-template #labelContent>
<ng-content></ng-content>
</ng-template>
</label>
</div>
<div
class="cds--text-area__wrapper"
[ngClass]="{
'cds--text-area__wrapper--warn': warn
}"
[attr.data-invalid]="(invalid ? true : null)"
#wrapper>
<svg
*ngIf="!fluid && invalid"
cdsIcon="warning--filled"
size="16"
class="cds--text-area__invalid-icon">
</svg>
<svg
*ngIf="!fluid && !invalid && warn"
cdsIcon="warning--alt--filled"
size="16"
class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning">
</svg>
<ng-template *ngIf="textAreaTemplate; else textAreaContent" [ngTemplateOutlet]="textAreaTemplate"></ng-template>
<ng-template #textAreaContent>
<ng-content select="[cdsTextArea],[ibmTextArea],textarea"></ng-content>
</ng-template>
<ng-container *ngIf="fluid">
<hr class="cds--text-area__divider" />
<div *ngIf="invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
<svg
cdsIcon="warning--filled"
size="16"
class="cds--text-area__invalid-icon">
</svg>
</div>
<div *ngIf="!invalid && warn" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
<svg
cdsIcon="warning--alt--filled"
size="16"
class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning">
</svg>
</div>
</ng-container>
</div>
<ng-container *ngIf="!fluid">
<div
*ngIf="helperText && !invalid && !warn"
class="cds--form__helper-text"
[ngClass]="{'cds--form__helper-text--disabled': disabled}">
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
</div>
<div *ngIf="invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
<div *ngIf="!invalid && warn" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
</div>
</ng-container>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextareaLabelComponent, decorators: [{
type: Component,
args: [{
selector: "cds-textarea-label, ibm-textarea-label",
template: `
<ng-container *ngIf="skeleton">
<span class="cds--label cds--skeleton"></span>
<div class="cds--text-area cds--skeleton"></div>
</ng-container>
<ng-container *ngIf="!skeleton">
<div class="cds--text-area__label-wrapper">
<label
[for]="labelInputID"
[attr.aria-label]="ariaLabel"
class="cds--label"
[ngClass]="{
'cds--label--disabled': disabled
}">
<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
<ng-template #labelContent>
<ng-content></ng-content>
</ng-template>
</label>
</div>
<div
class="cds--text-area__wrapper"
[ngClass]="{
'cds--text-area__wrapper--warn': warn
}"
[attr.data-invalid]="(invalid ? true : null)"
#wrapper>
<svg
*ngIf="!fluid && invalid"
cdsIcon="warning--filled"
size="16"
class="cds--text-area__invalid-icon">
</svg>
<svg
*ngIf="!fluid && !invalid && warn"
cdsIcon="warning--alt--filled"
size="16"
class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning">
</svg>
<ng-template *ngIf="textAreaTemplate; else textAreaContent" [ngTemplateOutlet]="textAreaTemplate"></ng-template>
<ng-template #textAreaContent>
<ng-content select="[cdsTextArea],[ibmTextArea],textarea"></ng-content>
</ng-template>
<ng-container *ngIf="fluid">
<hr class="cds--text-area__divider" />
<div *ngIf="invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
<svg
cdsIcon="warning--filled"
size="16"
class="cds--text-area__invalid-icon">
</svg>
</div>
<div *ngIf="!invalid && warn" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
<svg
cdsIcon="warning--alt--filled"
size="16"
class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning">
</svg>
</div>
</ng-container>
</div>
<ng-container *ngIf="!fluid">
<div
*ngIf="helperText && !invalid && !warn"
class="cds--form__helper-text"
[ngClass]="{'cds--form__helper-text--disabled': disabled}">
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
</div>
<div *ngIf="invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
<div *ngIf="!invalid && warn" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
</div>
</ng-container>
</ng-container>
`
}]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { labelInputID: [{
type: Input
}], disabled: [{
type: Input
}], skeleton: [{
type: Input
}], labelTemplate: [{
type: Input
}], textAreaTemplate: [{
type: Input
}], helperText: [{
type: Input
}], invalidText: [{
type: Input
}], invalid: [{
type: Input
}], warn: [{
type: Input
}], warnText: [{
type: Input
}], ariaLabel: [{
type: Input
}], fluid: [{
type: Input
}], wrapper: [{
type: ViewChild,
args: ["wrapper", { static: false }]
}], textArea: [{
type: ContentChild,
args: [TextArea, { static: false }]
}], labelClass: [{
type: HostBinding,
args: ["class.cds--form-item"]
}], isReadonly: [{
type: HostBinding,
args: ["class.cds--text-area__wrapper--readonly"]
}], fluidClass: [{
type: HostBinding,
args: ["class.cds--text-area--fluid"]
}], fluidSkeletonClass: [{
type: HostBinding,
args: ["class.cds--text-area--fluid__skeleton"]
}] } });
/**
* Get started with importing the module:
*
* ```typescript
* import { InputModule } from 'carbon-components-angular';
* ```
*
* ```html
* <cds-text-label>
* Label
* <input cdsText type="text" class="input-field">
* </cds-text-label>
* ```
*
* [See demo](../../?path=/story/components-input--basic)
*/
class TextInputLabelComponent {
/**
* Creates an instance of Label.
*/
constructor(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
/**
* The id of the input item associated with the `Label`. This value is also used to associate the `Label` with
* its input counterpart through the 'for' attribute.
*/
this.labelInputID = "ibm-text-input-" + TextInputLabelComponent.labelCounter++;
/**
* Set to `true` for a disabled label.
*/
this.disabled = false;
/**
* Set to `true` for a loading label.
*/
this.skeleton = false;
/**
* Set to `true` for an invalid label component.
*/
this.invalid = false;
/**
* Set to `true` to show a warning (contents set by warningText)
*/
this.warn = false;
/**
* Experimental: enable fluid state
*/
this.fluid = false;
this.labelClass = true;
this.textInputWrapper = true;
}
get isReadonly() {
var _a, _b, _c;
return (_c = (_b = (_a = this.wrapper) === null || _a === void 0 ? void 0 : _a.nativeElement.querySelector("input")) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
}
get fluidClass() {
return this.fluid && !this.skeleton;
}
get fluidSkeletonClass() {
return this.fluid && this.skeleton;
}
/**
* Sets the id on the input item associated with the `Label`.
*/
ngAfterViewInit() {
if (this.wrapper) {
// Prioritize setting id to `input` over div
const inputElement = this.wrapper.nativeElement.querySelector("input");
if (inputElement) {
// avoid overriding ids already set by the user reuse it instead
if (inputElement.id) {
this.labelInputID = inputElement.id;
this.changeDetectorRef.detectChanges();
}
inputElement.setAttribute("id", this.labelInputID);
return;
}
const divElement = this.wrapper.nativeElement.querySelector("div");
if (divElement) {
if (divElement.id) {
this.labelInputID = divElement.id;
this.changeDetectorRef.detectChanges();
}
divElement.setAttribute("id", this.labelInputID);
}
}
}
ngAfterContentInit() {
this.changeDetectorRef.detectChanges();
}
isTemplate(value) {
return value instanceof TemplateRef;
}
}
/**
* Used to build the id of the input item associated with the `Label`.
*/
TextInputLabelComponent.labelCounter = 0;
TextInputLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextInputLabelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
TextInputLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: { labelInputID: "labelInputID", disabled: "disabled", skeleton: "skeleton", labelTemplate: "labelTemplate", textInputTemplate: "textInputTemplate", helperText: "helperText", invalidText: "invalidText", invalid: "invalid", warn: "warn", warnText: "warnText", ariaLabel: "ariaLabel", fluid: "fluid" }, host: { properties: { "class.cds--form-item": "this.labelClass", "class.cds--text-input-wrapper": "this.textInputWrapper", "class.cds--text-input-wrapper--readonly": "this.isReadonly", "class.cds--text-input--fluid": "this.fluidClass", "class.cds--text-input--fluid__skeleton": "this.fluidSkeletonClass" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0, template: `
<ng-container *ngIf="skeleton">
<span class="cds--label cds--skeleton"></span>
<div class="cds--text-input cds--skeleton"></div>
</ng-container>
<label
*ngIf="!skeleton"
[for]="labelInputID"
[attr.aria-label]="ariaLabel"
class="cds--label"
[ngClass]="{
'cds--label--disabled': disabled
}">
<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
<ng-template #labelContent>
<ng-content></ng-content>
</ng-template>
</label>
<div *ngIf="!skeleton" class="cds--text-input__field-outer-wrapper">
<div
class="cds--text-input__field-wrapper"
[ngClass]="{
'cds--text-input__field-wrapper--warning': warn
}"
[attr.data-invalid]="(invalid ? true : null)"
#wrapper>
<svg
*ngIf="invalid && !warn"
cdsIcon="warning--filled"
size="16"
class="cds--text-input__invalid-icon">
</svg>
<svg
*ngIf="!invalid && warn"
cdsIcon="warning--alt--filled"
size="16"
class="cds--text-input__invalid-icon cds--text-input__invalid-icon--warning">
</svg>
<ng-template *ngIf="textInputTemplate; else textInputContent" [ngTemplateOutlet]="textInputTemplate"></ng-template>
<ng-template #textInputContent>
<ng-content select="[cdsText],[ibmText],input[type=text],div"></ng-content>
</ng-template>
<ng-container *ngIf="fluid">
<hr class="cds--text-input__divider" />
<div *ngIf="invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
<div *ngIf="!invalid && warn" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
</div>
</ng-container>
</div>
<ng-container *ngIf="!fluid">
<div
*ngIf="helperText && !invalid && !warn"
class="cds--form__helper-text"
[ngClass]="{'cds--form__helper-text--disabled': disabled}">
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
</div>
<div *ngIf="invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
<div *ngIf="!invalid && warn" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
</div>
</ng-container>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextInputLabelComponent, decorators: [{
type: Component,
args: [{
selector: "cds-text-label, ibm-text-label",
template: `
<ng-container *ngIf="skeleton">
<span class="cds--label cds--skeleton"></span>
<div class="cds--text-input cds--skeleton"></div>
</ng-container>
<label
*ngIf="!skeleton"
[for]="labelInputID"
[attr.aria-label]="ariaLabel"
class="cds--label"
[ngClass]="{
'cds--label--disabled': disabled
}">
<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
<ng-template #labelContent>
<ng-content></ng-content>
</ng-template>
</label>
<div *ngIf="!skeleton" class="cds--text-input__field-outer-wrapper">
<div
class="cds--text-input__field-wrapper"
[ngClass]="{
'cds--text-input__field-wrapper--warning': warn
}"
[attr.data-invalid]="(invalid ? true : null)"
#wrapper>
<svg
*ngIf="invalid && !warn"
cdsIcon="warning--filled"
size="16"
class="cds--text-input__invalid-icon">
</svg>
<svg
*ngIf="!invalid && warn"
cdsIcon="warning--alt--filled"
size="16"
class="cds--text-input__invalid-icon cds--text-input__invalid-icon--warning">
</svg>
<ng-template *ngIf="textInputTemplate; else textInputContent" [ngTemplateOutlet]="textInputTemplate"></ng-template>
<ng-template #textInputContent>
<ng-content select="[cdsText],[ibmText],input[type=text],div"></ng-content>
</ng-template>
<ng-container *ngIf="fluid">
<hr class="cds--text-input__divider" />
<div *ngIf="invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
<div *ngIf="!invalid && warn" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
</div>
</ng-container>
</div>
<ng-container *ngIf="!fluid">
<div
*ngIf="helperText && !invalid && !warn"
class="cds--form__helper-text"
[ngClass]="{'cds--form__helper-text--disabled': disabled}">
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
</div>
<div *ngIf="invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
<div *ngIf="!invalid && warn" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
</div>
</ng-container>
</div>
`
}]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { labelInputID: [{
type: Input
}], disabled: [{
type: Input
}], skeleton: [{
type: Input
}], labelTemplate: [{
type: Input
}], textInputTemplate: [{
type: Input
}], helperText: [{
type: Input
}], invalidText: [{
type: Input
}], invalid: [{
type: Input
}], warn: [{
type: Input
}], warnText: [{
type: Input
}], ariaLabel: [{
type: Input
}], fluid: [{
type: Input
}], wrapper: [{
type: ViewChild,
args: ["wrapper", { static: false }]
}], labelClass: [{
type: HostBinding,
args: ["class.cds--form-item"]
}], textInputWrapper: [{
type: HostBinding,
args: ["class.cds--text-input-wrapper"]
}], isReadonly: [{
type: HostBinding,
args: ["class.cds--text-input-wrapper--readonly"]
}], fluidClass: [{
type: HostBinding,
args: ["class.cds--text-input--fluid"]
}], fluidSkeletonClass: [{
type: HostBinding,
args: ["class.cds--text-input--fluid__skeleton"]
}] } });
/**
* Get started with importing the module:
*
* ```typescript
* import { InputModule } from 'carbon-components-angular';
* ```
*
* ```html
* <cds-password-label>
* Label
* <input cdsPassword>
* </cds-password-label>
* ```
*
* [See demo](../../?path=/story/components-input--basic)
*/
/**
* Represents the Password Input Label Component.
*/
class PasswordInputLabelComponent extends BaseIconButton {
/**
* Constructor for PasswordInputLabelComponent.
* @param changeDetectorRef - Reference to ChangeDetectorRef.
*/
constructor(changeDetectorRef) {
super();
this.changeDetectorRef = changeDetectorRef;
/**
* ID for the input item associated with the label.
*/
this.labelInputID = "cds-password-input-" + PasswordInputLabelComponent.labelCounter++;
/**
* Type for input field, either password or text.
*/
this.inputType = "password";
/**
* Flag for checking if password is visible.
*/
this.passwordIsVisible = false;
/**
* Flag for disabled label.
*/
this.disabled = false;
/**
* Flag for loading (skeleton) label.
*/
this.skeleton = false;
/**
* Flag for an invalid label component.
*/
this.invalid = false;
/**
* Flag for showing a warning.
*/
this.warn = false;
/**
* Tooltip text for hiding password.
*/
this.hidePasswordLabel = "Hide password";
/**
* Tooltip text for showing password.
*/
this.showPasswordLabel = "Show password";
/**
* Experimental: enable fluid state
*/
this.fluid = false;
/**
* Binding for applying class to host element.
*/
this.labelClass = true;
this.passwordInputWrapper = true;
this.textInputWrapper = true;
}
get isReadonly() {
var _a, _b, _c;
return (_c = (_b = (_a = this.wrapper) === null || _a === void 0 ? void 0 : _a.nativeElement.querySelector("input")) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
}
get fluidClass() {
return this.fluid && !this.skeleton;
}
get fluidSkeletonClass() {
return this.fluid && this.skeleton;
}
/**
* Lifecycle hook called after the view has been initialized to set the ID of the input element
*/
ngAfterViewInit() {
if (this.wrapper) {
const inputElement = this.wrapper.nativeElement.querySelector("input");
if (inputElement) {
if (inputElement.id) {
this.labelInputID = inputElement.id;
this.changeDetectorRef.detectChanges();
}
inputElement.setAttribute("id", this.labelInputID);
return;
}
}
}
/**
* Function to check if a value is a TemplateRef.
* @param value - Value to check.
* @returns Whether the value is a TemplateRef.
*/
isTemplate(value) {
return value instanceof TemplateRef;
}
/**
* Handler for toggling password visibility.
*/
handleTogglePasswordVisibility() {
this.inputType = this.inputType === "password" ? "text" : "password";
this.textInput.type = this.inputType;
this.passwordIsVisible = this.inputType === "text";
}
}
/**
* Counter for generating unique labelInputID.
*/
PasswordInputLabelComponent.labelCounter = 0;
PasswordInputLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PasswordInputLabelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
PasswordInputLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PasswordInputLabelComponent, selector: "cds-password-label, ibm-password-label", inputs: { labelInputID: "labelInputID", disabled: "disabled", skeleton: "skeleton", labelTemplate: "labelTemplate", passwordInputTemplate: "passwordInputTemplate", helperText: "helperText", invalidText: "invalidText", invalid: "invalid", warn: "warn", warnText: "warnText", ariaLabel: "ariaLabel", hidePasswordLabel: "hidePasswordLabel", showPasswordLabel: "showPasswordLabel", fluid: "fluid" }, host: { properties: { "class.cds--form-item": "this.labelClass", "class.cds--password-input-wrapper": "this.passwordInputWrapper", "class.cds--text-input-wrapper": "this.textInputWrapper", "class.cds--text-input-wrapper--readonly": "this.isReadonly", "class.cds--text-input--fluid": "this.fluidClass", "class.cds--text-input--fluid__skeleton": "this.fluidSkeletonClass" } }, queries: [{ propertyName: "textInput", first: true, predicate: PasswordInput, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
<ng-container *ngIf="skeleton">
<span class="cds--label cds--skeleton"></span>
<div class="cds--text-input cds--skeleton"></div>
</ng-container>
<label
*ngIf="!skeleton"
[for]="labelInputID"
[attr.aria-label]="ariaLabel"
class="cds--label"
[ngClass]="{
'cds--label--disabled': disabled
}">
<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
<ng-template #labelContent>
<ng-content></ng-content>
</ng-template>
</label>
<div *ngIf="!skeleton" class="cds--text-input__field-outer-wrapper">
<div
class="cds--text-input__field-wrapper"
[ngClass]="{
'cds--text-input__field-wrapper--warning': warn
}"
[attr.data-invalid]="invalid ? true : null"
#wrapper>
<svg
*ngIf="!warn && invalid"
cdsIcon="warning--filled"
size="16"
class="cds--text-input__invalid-icon">
</svg>
<svg
*ngIf="!invalid && warn"
cdsIcon="warning--alt--filled"
size="16"
class="cds--text-input__invalid-icon cds--text-input__invalid-icon--warning">
</svg>
<ng-content select="[cdsPassword], [ibmPassword]"></ng-content>
<cds-tooltip
*ngIf="!skeleton"
[description]="passwordIsVisible ? hidePasswordLabel : showPasswordLabel"
[disabled]="disabled"
[caret]="caret"
[dropShadow]="dropShadow"
[highContrast]="highContrast"
[isOpen]="isOpen"
[align]="align"
[autoAlign]="autoAlign"
[enterDelayMs]="enterDelayMs"
[leaveDelayMs]="leaveDelayMs"
class="cds--toggle-password-tooltip">
<div class="cds--tooltip-trigger__wrapper">
<button
class="cds--text-input--password__visibility__toggle cds--btn cds--tooltip__trigger cds--tooltip--a11y"
[disabled]="disabled"
type="button"
(click)="handleTogglePasswordVisibility($event)">
<svg *ngIf="passwordIsVisible" cdsIcon="view--off" class="cds--icon-visibility-off" size="16"></svg>
<svg *ngIf="!passwordIsVisible" cdsIcon="view" class="cds--icon-visibility-on" size="16"></svg>
</button>
</div>
</cds-tooltip>
<ng-container *ngIf="fluid">
<hr class="cds--text-input__divider" />
<div *ngIf="!warn && invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
<div *ngIf="!invalid && warn" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{ warnText }}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
</div>
</ng-container>
</div>
<ng-container *ngIf="!fluid">
<div
*ngIf="!skeleton && helperText && !invalid && !warn"
class="cds--form__helper-text"
[ngClass]="{ 'cds--form__helper-text--disabled': disabled }">
<ng-container *ngIf="!isTemplate(helperText)">{{ helperText }}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
</div>
<div *ngIf="!warn && invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
<div *ngIf="!invalid && warn" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{ warnText }}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
</div>
</ng-container>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i3.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PasswordInputLabelComponent, decorators: [{
type: Component,
args: [{
selector: "cds-password-label, ibm-password-label",
template: `
<ng-container *ngIf="skeleton">
<span class="cds--label cds--skeleton"></span>
<div class="cds--text-input cds--skeleton"></div>
</ng-container>
<label
*ngIf="!skeleton"
[for]="labelInputID"
[attr.aria-label]="ariaLabel"
class="cds--label"
[ngClass]="{
'cds--label--disabled': disabled
}">
<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
<ng-template #labelContent>
<ng-content></ng-content>
</ng-template>
</label>
<div *ngIf="!skeleton" class="cds--text-input__field-outer-wrapper">
<div
class="cds--text-input__field-wrapper"
[ngClass]="{
'cds--text-input__field-wrapper--warning': warn
}"
[attr.data-invalid]="invalid ? true : null"
#wrapper>
<svg
*ngIf="!warn && invalid"
cdsIcon="warning--filled"
size="16"
class="cds--text-input__invalid-icon">
</svg>
<svg
*ngIf="!invalid && warn"
cdsIcon="warning--alt--filled"
size="16"
class="cds--text-input__invalid-icon cds--text-input__invalid-icon--warning">
</svg>
<ng-content select="[cdsPassword], [ibmPassword]"></ng-content>
<cds-tooltip
*ngIf="!skeleton"
[description]="passwordIsVisible ? hidePasswordLabel : showPasswordLabel"
[disabled]="disabled"
[caret]="caret"
[dropShadow]="dropShadow"
[highContrast]="highContrast"
[isOpen]="isOpen"
[align]="align"
[autoAlign]="autoAlign"
[enterDelayMs]="enterDelayMs"
[leaveDelayMs]="leaveDelayMs"
class="cds--toggle-password-tooltip">
<div class="cds--tooltip-trigger__wrapper">
<button
class="cds--text-input--password__visibility__toggle cds--btn cds--tooltip__trigger cds--tooltip--a11y"
[disabled]="disabled"
type="button"
(click)="handleTogglePasswordVisibility($event)">
<svg *ngIf="passwordIsVisible" cdsIcon="view--off" class="cds--icon-visibility-off" size="16"></svg>
<svg *ngIf="!passwordIsVisible" cdsIcon="view" class="cds--icon-visibility-on" size="16"></svg>
</button>
</div>
</cds-tooltip>
<ng-container *ngIf="fluid">
<hr class="cds--text-input__divider" />
<div *ngIf="!warn && invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
<div *ngIf="!invalid && warn" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{ warnText }}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText">