@blox/material
Version:
Material Components for Angular
89 lines • 10.9 kB
JavaScript
import { Directive, ElementRef, forwardRef, HostBinding, Renderer2 } from '@angular/core';
import { MDCFloatingLabelFoundation } from '@material/floating-label';
import { ponyfill } from '@material/dom';
import { AbstractMdcLabel } from '../abstract/abstract.mdc.label';
import { MdcEventRegistry } from '../../utils/mdc.event.registry';
import { HasId } from '../abstract/mixin.mdc.hasid';
import { applyMixins } from '../../utils/mixins';
class MdcFloatingLabelDirectiveBase {
}
MdcFloatingLabelDirectiveBase.decorators = [
{ type: Directive }
];
applyMixins(MdcFloatingLabelDirectiveBase, [HasId]);
/**
* Directive for the floating label of input fields. Floating labels are used by
* <code>mdcTextField</code> and <code>mdcSelect</code> to display the type of input
* the field requires. Floating labels are resting when the field is inactive, and
* float when the field is active.
* For an <code>mdcTextField</code> the label must be added just after the
* <code>mdcTextFieldInput</code> as a direct child of an
* <code>mdcTextField</code>. There is no need to assign the <code>for</code>
* attribute, as the label will automatically get its <code>for</code> attribute assigned
* to the id of the parent <code>mdcInput</code>.
*/
export class MdcFloatingLabelDirective extends MdcFloatingLabelDirectiveBase {
constructor(_rndr, _elm, registry) {
super();
this._rndr = _rndr;
this._elm = _elm;
this.registry = registry;
/** @internal */
this.for = null;
/** @internal */
this._cls = true;
this._mdcAdapter = {
addClass: (className) => {
this._rndr.addClass(this._elm.nativeElement, className);
},
removeClass: (className) => {
this._rndr.removeClass(this._elm.nativeElement, className);
},
getWidth: () => ponyfill.estimateScrollWidth(this._elm.nativeElement),
registerInteractionHandler: (type, handler) => {
this.registry.listen(this._rndr, type, handler, this._elm);
},
deregisterInteractionHandler: (type, handler) => {
this.registry.unlisten(type, handler);
}
};
this._foundation = new MDCFloatingLabelFoundation(this._mdcAdapter);
}
ngOnInit() {
this.initId();
}
ngAfterContentInit() {
this._foundation.init();
}
ngOnDestroy() {
this._foundation.destroy();
}
shake(shouldShake) {
this._foundation.shake(shouldShake);
}
float(shouldFloat) {
this._foundation.float(shouldFloat);
}
getWidth() {
return this._foundation.getWidth();
}
isLabelElement() {
return this._elm.nativeElement.nodeName.toLowerCase() === 'label';
}
}
MdcFloatingLabelDirective.decorators = [
{ type: Directive, args: [{
selector: '[mdcFloatingLabel]',
providers: [{ provide: AbstractMdcLabel, useExisting: forwardRef(() => MdcFloatingLabelDirective) }]
},] }
];
MdcFloatingLabelDirective.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef },
{ type: MdcEventRegistry }
];
MdcFloatingLabelDirective.propDecorators = {
for: [{ type: HostBinding, args: ['attr.for',] }],
_cls: [{ type: HostBinding, args: ['class.mdc-floating-label',] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWRjLmZsb2F0aW5nLWxhYmVsLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2Zsb2F0aW5nLWxhYmVsL21kYy5mbG9hdGluZy1sYWJlbC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFvQixTQUFTLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxXQUFXLEVBQzVELFNBQVMsRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUN0RCxPQUFPLEVBQUUsMEJBQTBCLEVBQTJCLE1BQU0sMEJBQTBCLENBQUM7QUFDL0YsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNsRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNsRSxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDcEQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBRWpELE1BQ00sNkJBQTZCOzs7WUFEbEMsU0FBUzs7QUFHVixXQUFXLENBQUMsNkJBQTZCLEVBQUUsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO0FBQ3BEOzs7Ozs7Ozs7O0dBVUc7QUFLSCxNQUFNLE9BQU8seUJBQTBCLFNBQVEsNkJBQTZCO0lBc0J4RSxZQUFvQixLQUFnQixFQUFTLElBQWdCLEVBQVUsUUFBMEI7UUFDN0YsS0FBSyxFQUFFLENBQUM7UUFEUSxVQUFLLEdBQUwsS0FBSyxDQUFXO1FBQVMsU0FBSSxHQUFKLElBQUksQ0FBWTtRQUFVLGFBQVEsR0FBUixRQUFRLENBQWtCO1FBckJqRyxnQkFBZ0I7UUFDUyxRQUFHLEdBQWtCLElBQUksQ0FBQztRQUNuRCxnQkFBZ0I7UUFDa0MsU0FBSSxHQUFHLElBQUksQ0FBQztRQUN0RCxnQkFBVyxHQUE0QjtZQUMzQyxRQUFRLEVBQUUsQ0FBQyxTQUFpQixFQUFFLEVBQUU7Z0JBQzVCLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLFNBQVMsQ0FBQyxDQUFDO1lBQzVELENBQUM7WUFDRCxXQUFXLEVBQUUsQ0FBQyxTQUFpQixFQUFFLEVBQUU7Z0JBQy9CLElBQUksQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLFNBQVMsQ0FBQyxDQUFDO1lBQy9ELENBQUM7WUFDRCxRQUFRLEVBQUMsR0FBRyxFQUFFLENBQUMsUUFBUSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDO1lBQ3BFLDBCQUEwQixFQUFFLENBQUMsSUFBSSxFQUFFLE9BQU8sRUFBRSxFQUFFO2dCQUMxQyxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQy9ELENBQUM7WUFDRCw0QkFBNEIsRUFBRSxDQUFDLElBQUksRUFBRSxPQUFPLEVBQUUsRUFBRTtnQkFDNUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLE9BQU8sQ0FBQyxDQUFDO1lBQzFDLENBQUM7U0FDSixDQUFDO1FBQ00sZ0JBQVcsR0FBRyxJQUFJLDBCQUEwQixDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUl2RSxDQUFDO0lBRUQsUUFBUTtRQUNKLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUNsQixDQUFDO0lBRUQsa0JBQWtCO1FBQ2QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsV0FBVztRQUNQLElBQUksQ0FBQyxXQUFXLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDL0IsQ0FBQztJQUVELEtBQUssQ0FBQyxXQUFvQjtRQUN0QixJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUN4QyxDQUFDO0lBRUQsS0FBSyxDQUFDLFdBQW9CO1FBQ3RCLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ3hDLENBQUM7SUFFRCxRQUFRO1FBQ0osT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ3ZDLENBQUM7SUFFRCxjQUFjO1FBQ1YsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFLEtBQUssT0FBTyxDQUFDO0lBQ3RFLENBQUM7OztZQXhESixTQUFTLFNBQUM7Z0JBQ1AsUUFBUSxFQUFFLG9CQUFvQjtnQkFDOUIsU0FBUyxFQUFFLENBQUMsRUFBQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyx5QkFBeUIsQ0FBQyxFQUFFLENBQUM7YUFDdEc7OztZQTFCWSxTQUFTO1lBRGdCLFVBQVU7WUFLdkMsZ0JBQWdCOzs7a0JBeUJwQixXQUFXLFNBQUMsVUFBVTttQkFFdEIsV0FBVyxTQUFDLDBCQUEwQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyQ29udGVudEluaXQsIERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgZm9yd2FyZFJlZiwgSG9zdEJpbmRpbmcsXG4gIE9uRGVzdHJveSwgUmVuZGVyZXIyLCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1EQ0Zsb2F0aW5nTGFiZWxGb3VuZGF0aW9uLCBNRENGbG9hdGluZ0xhYmVsQWRhcHRlciB9IGZyb20gJ0BtYXRlcmlhbC9mbG9hdGluZy1sYWJlbCc7XG5pbXBvcnQgeyBwb255ZmlsbCB9IGZyb20gJ0BtYXRlcmlhbC9kb20nO1xuaW1wb3J0IHsgQWJzdHJhY3RNZGNMYWJlbCB9IGZyb20gJy4uL2Fic3RyYWN0L2Fic3RyYWN0Lm1kYy5sYWJlbCc7XG5pbXBvcnQgeyBNZGNFdmVudFJlZ2lzdHJ5IH0gZnJvbSAnLi4vLi4vdXRpbHMvbWRjLmV2ZW50LnJlZ2lzdHJ5JztcbmltcG9ydCB7IEhhc0lkIH0gZnJvbSAnLi4vYWJzdHJhY3QvbWl4aW4ubWRjLmhhc2lkJztcbmltcG9ydCB7IGFwcGx5TWl4aW5zIH0gZnJvbSAnLi4vLi4vdXRpbHMvbWl4aW5zJztcblxuQERpcmVjdGl2ZSgpXG5jbGFzcyBNZGNGbG9hdGluZ0xhYmVsRGlyZWN0aXZlQmFzZSB7fVxuaW50ZXJmYWNlIE1kY0Zsb2F0aW5nTGFiZWxEaXJlY3RpdmVCYXNlIGV4dGVuZHMgSGFzSWQge31cbmFwcGx5TWl4aW5zKE1kY0Zsb2F0aW5nTGFiZWxEaXJlY3RpdmVCYXNlLCBbSGFzSWRdKTtcbi8qKlxuICogRGlyZWN0aXZlIGZvciB0aGUgZmxvYXRpbmcgbGFiZWwgb2YgaW5wdXQgZmllbGRzLiBGbG9hdGluZyBsYWJlbHMgYXJlIHVzZWQgYnlcbiAqIDxjb2RlPm1kY1RleHRGaWVsZDwvY29kZT4gYW5kIDxjb2RlPm1kY1NlbGVjdDwvY29kZT4gdG8gZGlzcGxheSB0aGUgdHlwZSBvZiBpbnB1dFxuICogdGhlIGZpZWxkIHJlcXVpcmVzLiBGbG9hdGluZyBsYWJlbHMgYXJlIHJlc3Rpbmcgd2hlbiB0aGUgZmllbGQgaXMgaW5hY3RpdmUsIGFuZFxuICogZmxvYXQgd2hlbiB0aGUgZmllbGQgaXMgYWN0aXZlLlxuICogRm9yIGFuIDxjb2RlPm1kY1RleHRGaWVsZDwvY29kZT4gdGhlIGxhYmVsIG11c3QgYmUgYWRkZWQganVzdCBhZnRlciB0aGVcbiAqIDxjb2RlPm1kY1RleHRGaWVsZElucHV0PC9jb2RlPiBhcyBhIGRpcmVjdCBjaGlsZCBvZiBhblxuICogPGNvZGU+bWRjVGV4dEZpZWxkPC9jb2RlPi4gVGhlcmUgaXMgbm8gbmVlZCB0byBhc3NpZ24gdGhlIDxjb2RlPmZvcjwvY29kZT5cbiAqIGF0dHJpYnV0ZSwgYXMgdGhlIGxhYmVsIHdpbGwgYXV0b21hdGljYWxseSBnZXQgaXRzIDxjb2RlPmZvcjwvY29kZT4gYXR0cmlidXRlIGFzc2lnbmVkXG4gKiB0byB0aGUgaWQgb2YgdGhlIHBhcmVudCA8Y29kZT5tZGNJbnB1dDwvY29kZT4uXG4gKi9cbkBEaXJlY3RpdmUoe1xuICAgIHNlbGVjdG9yOiAnW21kY0Zsb2F0aW5nTGFiZWxdJyxcbiAgICBwcm92aWRlcnM6IFt7cHJvdmlkZTogQWJzdHJhY3RNZGNMYWJlbCwgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gTWRjRmxvYXRpbmdMYWJlbERpcmVjdGl2ZSkgfV1cbn0pXG5leHBvcnQgY2xhc3MgTWRjRmxvYXRpbmdMYWJlbERpcmVjdGl2ZSBleHRlbmRzIE1kY0Zsb2F0aW5nTGFiZWxEaXJlY3RpdmVCYXNlIGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCwgT25EZXN0cm95LCBPbkluaXQge1xuICAgIC8qKiBAaW50ZXJuYWwgKi9cbiAgICBASG9zdEJpbmRpbmcoJ2F0dHIuZm9yJykgZm9yOiBzdHJpbmcgfCBudWxsID0gbnVsbDtcbiAgICAvKiogQGludGVybmFsICovXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tZGMtZmxvYXRpbmctbGFiZWwnKSByZWFkb25seSBfY2xzID0gdHJ1ZTtcbiAgICBwcml2YXRlIF9tZGNBZGFwdGVyOiBNRENGbG9hdGluZ0xhYmVsQWRhcHRlciA9IHtcbiAgICAgICAgYWRkQ2xhc3M6IChjbGFzc05hbWU6IHN0cmluZykgPT4ge1xuICAgICAgICAgICAgdGhpcy5fcm5kci5hZGRDbGFzcyh0aGlzLl9lbG0ubmF0aXZlRWxlbWVudCwgY2xhc3NOYW1lKTtcbiAgICAgICAgfSxcbiAgICAgICAgcmVtb3ZlQ2xhc3M6IChjbGFzc05hbWU6IHN0cmluZykgPT4ge1xuICAgICAgICAgICAgdGhpcy5fcm5kci5yZW1vdmVDbGFzcyh0aGlzLl9lbG0ubmF0aXZlRWxlbWVudCwgY2xhc3NOYW1lKTtcbiAgICAgICAgfSxcbiAgICAgICAgZ2V0V2lkdGg6KCkgPT4gcG9ueWZpbGwuZXN0aW1hdGVTY3JvbGxXaWR0aCh0aGlzLl9lbG0ubmF0aXZlRWxlbWVudCksXG4gICAgICAgIHJlZ2lzdGVySW50ZXJhY3Rpb25IYW5kbGVyOiAodHlwZSwgaGFuZGxlcikgPT4ge1xuICAgICAgICAgICAgdGhpcy5yZWdpc3RyeS5saXN0ZW4odGhpcy5fcm5kciwgdHlwZSwgaGFuZGxlciwgdGhpcy5fZWxtKTtcbiAgICAgICAgfSxcbiAgICAgICAgZGVyZWdpc3RlckludGVyYWN0aW9uSGFuZGxlcjogKHR5cGUsIGhhbmRsZXIpID0+IHtcbiAgICAgICAgICAgIHRoaXMucmVnaXN0cnkudW5saXN0ZW4odHlwZSwgaGFuZGxlcik7XG4gICAgICAgIH1cbiAgICB9O1xuICAgIHByaXZhdGUgX2ZvdW5kYXRpb24gPSBuZXcgTURDRmxvYXRpbmdMYWJlbEZvdW5kYXRpb24odGhpcy5fbWRjQWRhcHRlcik7XG5cbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9ybmRyOiBSZW5kZXJlcjIsIHB1YmxpYyBfZWxtOiBFbGVtZW50UmVmLCBwcml2YXRlIHJlZ2lzdHJ5OiBNZGNFdmVudFJlZ2lzdHJ5KSB7XG4gICAgICAgIHN1cGVyKCk7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKSB7XG4gICAgICAgIHRoaXMuaW5pdElkKCk7XG4gICAgfVxuXG4gICAgbmdBZnRlckNvbnRlbnRJbml0KCkge1xuICAgICAgICB0aGlzLl9mb3VuZGF0aW9uLmluaXQoKTtcbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpIHtcbiAgICAgICAgdGhpcy5fZm91bmRhdGlvbi5kZXN0cm95KCk7XG4gICAgfVxuXG4gICAgc2hha2Uoc2hvdWxkU2hha2U6IGJvb2xlYW4pIHtcbiAgICAgICAgdGhpcy5fZm91bmRhdGlvbi5zaGFrZShzaG91bGRTaGFrZSk7XG4gICAgfVxuXG4gICAgZmxvYXQoc2hvdWxkRmxvYXQ6IGJvb2xlYW4pIHtcbiAgICAgICAgdGhpcy5fZm91bmRhdGlvbi5mbG9hdChzaG91bGRGbG9hdCk7XG4gICAgfVxuXG4gICAgZ2V0V2lkdGgoKTogbnVtYmVyIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX2ZvdW5kYXRpb24uZ2V0V2lkdGgoKTtcbiAgICB9XG5cbiAgICBpc0xhYmVsRWxlbWVudCgpIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX2VsbS5uYXRpdmVFbGVtZW50Lm5vZGVOYW1lLnRvTG93ZXJDYXNlKCkgPT09ICdsYWJlbCc7XG4gICAgfVxufVxuIl19