36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { Directive, ElementRef, HostBinding, OnInit, Renderer2, input } from '@angular/core';
|
|
import { unit } from '../models';
|
|
|
|
@Directive()
|
|
export abstract class PiBaseAffixDirective implements OnInit {
|
|
@HostBinding('class') get classes(): string {
|
|
return ['pi-affix', `pi-affix__appearance--${this.appearance()}`].join(' ');
|
|
}
|
|
|
|
readonly unit = input<unit | string>();
|
|
readonly appearance = input<'ghost' | 'fill'>('ghost');
|
|
|
|
constructor(private renderer: Renderer2, private el: ElementRef) {}
|
|
|
|
ngOnInit() {
|
|
const unitValue = this.unit();
|
|
if (unitValue) {
|
|
const span = this.renderer.createElement('span');
|
|
const text = this.renderer.createText(unitValue);
|
|
|
|
this.renderer.appendChild(span, text);
|
|
this.renderer.appendChild(this.el.nativeElement, span);
|
|
}
|
|
}
|
|
}
|
|
|
|
@Directive({ selector: 'pi-prefix', })
|
|
export class PiPrefixDirective extends PiBaseAffixDirective {
|
|
@HostBinding('class') className = 'pi-affix__prefix';
|
|
}
|
|
|
|
@Directive({ selector: 'pi-suffix', })
|
|
export class PiSuffixDirective extends PiBaseAffixDirective {
|
|
@HostBinding('class') className = 'pi-affix__suffix';
|
|
}
|