carbon-components-angular 5.43.1 → 5.45.0

package/README.md

@@ -168,9 +168,8 @@ Read our code of conduct [here](./.github/CODE_OF_CONDUCT.md)
 
 ## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
 
-This package uses IBM Telemetry to collect metrics data. By installing this
-package as a dependency you are agreeing to telemetry collection. To opt out,
-see
+This package uses IBM Telemetry to collect de-identified and anonymized metrics data. By installing
+this package as a dependency you are agreeing to telemetry collection. To opt out, see
 [Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
 For more information on the data being collected, please see the
-[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).
+[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).

package/docs/documentation/classes/NumberChange.html

@@ -256,7 +256,7 @@
 	TemplateRef,
 	HostListener
 } from "@angular/core";
-import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 
 import { I18n, Overridable } from "carbon-components-angular/i18n";
 import { Observable } from "rxjs";
@@ -287,6 +287,7 @@ export class NumberChange {
 @Component({
 	selector: "cds-number, ibm-number",
 	template: `
+		<label *ngIf="skeleton && label" class="cds--label cds--skeleton"></label>
 		<div
 			data-numberinput
 			[attr.data-invalid]="(invalid ? true : null)"
@@ -300,7 +301,6 @@ export class NumberChange {
 				'cds--number--md': size === 'md',
 				'cds--number--lg': size === 'lg'
 			}">
-			<label *ngIf="skeleton && label" class="cds--label cds--skeleton"></label>
 			<label
 				*ngIf="!skeleton && label"
 				[for]="id"
@@ -327,6 +327,8 @@ export class NumberChange {
 					[attr.aria-label]="ariaLabel"
 					[attr.data-invalid]="invalid ? invalid : null"
 					[placeholder]="placeholder"
+					(focus)="fluid ? handleFocus($event): null"
+					(blur)="fluid ? handleFocus($event): null"
 					(change)="onNumberInputChange($event)"/>
 				<svg
 					*ngIf="!skeleton && invalid"
@@ -365,8 +367,9 @@ export class NumberChange {
 					<div class="cds--number__rule-divider"></div>
 				</div>
 			</div>
+			<hr *ngIf="fluid" class="cds--number-input__divider" />
 			<div
-				*ngIf="helperText && !invalid && !warn"
+				*ngIf="helperText && !invalid && !warn && !fluid"
 				class="cds--form__helper-text"
 				[ngClass]="{
 					'cds--form__helper-text--disabled': disabled
@@ -514,6 +517,29 @@ export class NumberComponent implements ControlValueAccessor {
 		return this._incrementLabel.value;
 	}
 
+	/**
+	 * Experimental: enable fluid state
+	 */
+	@HostBinding("class.cds--number-input--fluid") @Input() fluid = false;
+
+	@HostBinding("class.cds--number-input--fluid--invalid") get fluidInvalid() {
+		return this.fluid && this.invalid;
+	}
+
+	@HostBinding("class.cds--number-input--fluid--disabled") get fluidDisabled() {
+		return this.fluid && this.disabled;
+	}
+
+	@HostBinding("class.cds--number-input--fluid--focus") get fluidFocus() {
+		return this.fluid && this._isFocused;
+	}
+
+	@HostBinding("class.cds--text-input--fluid__skeleton") get fluidSkeleton() {
+		return this.fluid && this.skeleton;
+	}
+
+	protected _isFocused = false;
+
 	protected _value = 0;
 
 	protected _decrementLabel: Overridable = this.i18n.getOverridable("NUMBER.DECREMENT");
@@ -620,6 +646,14 @@ export class NumberComponent implements ControlValueAccessor {
 	public isTemplate(value) {
 		return value instanceof TemplateRef;
 	}
+
+	handleFocus(event: FocusEvent) {
+		if ("type" in event.target && (<HTMLInputElement>event.target).type === "button") {
+			this._isFocused = false;
+		} else {
+			this._isFocused = event.type === "focus";
+		}
+	}
 }
 export { NumberComponent as Number };
 </code></pre>