@doku-dev/doku-fragment
Version:
A new Angular UI library that moving away from Bootstrap and built from scratch.
131 lines • 12.9 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation, } from '@angular/core';
import { fromEvent } from 'rxjs';
import * as i0 from "@angular/core";
export class DokuShimmer {
get classes() {
return ['d-shimmer', `d-shimmer-variant-${this.variant}`];
}
constructor(elementRef, ngZone) {
this.elementRef = elementRef;
this.ngZone = ngZone;
/**
* Width of the shimmer.
* @default '100%'
*/
this.width = '100%';
/**
* Height of the shimmer.
*
* If `shape` is not rectangle and `width` is not in pixels,
* the height will be calculated based on the element width.
*
* @default '14px'
*/
this.height = '14px';
/**
* Border radius of the shimmer.
*
* If `shape` is circle, the value will be ignored.
*
* @default '4px'
*/
this.borderRadius = '4px';
/**
* The shape of the shimmer.
*
* Some shapes will affect the height or border radius.
*
* @default 'rectangle'
*/
this.shape = 'rectangle';
/**
* Color variant of the shimmer.
* @default 'light'
*/
this.variant = 'light';
}
ngOnChanges(changes) {
if (changes['width']?.currentValue) {
this.resizeListener?.unsubscribe();
this.listenResize();
}
}
ngOnDestroy() {
this.resizeListener?.unsubscribe();
}
get normalizedHeight() {
switch (this.shape) {
case 'square':
case 'circle':
return this.calculateHeightByWidth(this.width);
case 'rectangle':
default:
return this.height;
}
}
get normalizedBorderRadius() {
return this.shape === 'circle' ? '50%' : this.borderRadius;
}
/**
* Calculate height value when width is not using pixels.
*/
calculateHeightByWidth(width) {
if (width.endsWith('px'))
return width;
if (this.shape === 'rectangle')
return this.height;
const clientWidth = this.elementRef.nativeElement.clientWidth;
if (!clientWidth)
return width;
return `${clientWidth}px`;
}
listenResize() {
this.ngZone.runOutsideAngular(() => {
if (this.width.endsWith('px'))
return;
if (this.shape === 'rectangle')
return;
this.resizeListener = fromEvent(window, 'resize').subscribe(() => {
this.elementRef.nativeElement.style.height = this.calculateHeightByWidth(this.width);
});
});
}
}
DokuShimmer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuShimmer, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
DokuShimmer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuShimmer, isStandalone: true, selector: "doku-shimmer", inputs: { width: "width", height: "height", borderRadius: "borderRadius", shape: "shape", variant: "variant" }, host: { properties: { "style.width": "this.width", "class": "this.classes", "style.height": "this.normalizedHeight", "style.border-radius": "this.normalizedBorderRadius" } }, exportAs: ["dokuShimmer"], usesOnChanges: true, ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuShimmer, decorators: [{
type: Component,
args: [{
selector: 'doku-shimmer',
exportAs: 'dokuShimmer',
standalone: true,
imports: [CommonModule],
template: '',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { width: [{
type: HostBinding,
args: ['style.width']
}, {
type: Input
}], height: [{
type: Input
}], borderRadius: [{
type: Input
}], shape: [{
type: Input
}], variant: [{
type: Input
}], classes: [{
type: HostBinding,
args: ['class']
}], normalizedHeight: [{
type: HostBinding,
args: ['style.height']
}], normalizedBorderRadius: [{
type: HostBinding,
args: ['style.border-radius']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hpbW1lci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2t1LWZyYWdtZW50L3NyYy9saWIvc2hpbW1lci9zaGltbWVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFXLE1BQU0saUJBQWlCLENBQUM7QUFDeEQsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBRVQsV0FBVyxFQUNYLEtBQUssRUFLTCxpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFnQixTQUFTLEVBQUUsTUFBTSxNQUFNLENBQUM7O0FBVy9DLE1BQU0sT0FBTyxXQUFXO0lBMkN0QixJQUNjLE9BQU87UUFDbkIsT0FBTyxDQUFDLFdBQVcsRUFBRSxxQkFBcUIsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDLENBQUM7SUFDNUQsQ0FBQztJQUlELFlBQW9CLFVBQXNCLEVBQVUsTUFBYztRQUE5QyxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBQVUsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQWpEbEU7OztXQUdHO1FBR0gsVUFBSyxHQUFHLE1BQU0sQ0FBQztRQUVmOzs7Ozs7O1dBT0c7UUFDTSxXQUFNLEdBQUcsTUFBTSxDQUFDO1FBRXpCOzs7Ozs7V0FNRztRQUNNLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBRTlCOzs7Ozs7V0FNRztRQUNNLFVBQUssR0FBc0MsV0FBVyxDQUFDO1FBRWhFOzs7V0FHRztRQUNNLFlBQU8sR0FBcUIsT0FBTyxDQUFDO0lBU3dCLENBQUM7SUFFdEUsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLE9BQU8sQ0FBQyxFQUFFLFlBQVksRUFBRTtZQUNsQyxJQUFJLENBQUMsY0FBYyxFQUFFLFdBQVcsRUFBRSxDQUFDO1lBQ25DLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztTQUNyQjtJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGNBQWMsRUFBRSxXQUFXLEVBQUUsQ0FBQztJQUNyQyxDQUFDO0lBRUQsSUFDYyxnQkFBZ0I7UUFDNUIsUUFBUSxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ2xCLEtBQUssUUFBUSxDQUFDO1lBQ2QsS0FBSyxRQUFRO2dCQUNYLE9BQU8sSUFBSSxDQUFDLHNCQUFzQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNqRCxLQUFLLFdBQVcsQ0FBQztZQUNqQjtnQkFDRSxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7U0FDdEI7SUFDSCxDQUFDO0lBRUQsSUFDYyxzQkFBc0I7UUFDbEMsT0FBTyxJQUFJLENBQUMsS0FBSyxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDO0lBQzdELENBQUM7SUFFRDs7T0FFRztJQUNLLHNCQUFzQixDQUFDLEtBQWE7UUFDMUMsSUFBSSxLQUFLLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQztZQUFFLE9BQU8sS0FBSyxDQUFDO1FBQ3ZDLElBQUksSUFBSSxDQUFDLEtBQUssS0FBSyxXQUFXO1lBQUUsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQ25ELE1BQU0sV0FBVyxHQUFJLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBNkIsQ0FBQyxXQUFXLENBQUM7UUFDL0UsSUFBSSxDQUFDLFdBQVc7WUFBRSxPQUFPLEtBQUssQ0FBQztRQUMvQixPQUFPLEdBQUcsV0FBVyxJQUFJLENBQUM7SUFDNUIsQ0FBQztJQUVPLFlBQVk7UUFDbEIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxHQUFHLEVBQUU7WUFDakMsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUM7Z0JBQUUsT0FBTztZQUN0QyxJQUFJLElBQUksQ0FBQyxLQUFLLEtBQUssV0FBVztnQkFBRSxPQUFPO1lBQ3ZDLElBQUksQ0FBQyxjQUFjLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxRQUFRLENBQUMsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO2dCQUM5RCxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQTZCLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsc0JBQXNCLENBQ3ZGLElBQUksQ0FBQyxLQUFLLENBQ1gsQ0FBQztZQUNKLENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDOzt3R0FyR1UsV0FBVzs0RkFBWCxXQUFXLHVaQUpaLEVBQUUsMkRBREYsWUFBWTsyRkFLWCxXQUFXO2tCQVR2QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxjQUFjO29CQUN4QixRQUFRLEVBQUUsYUFBYTtvQkFDdkIsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLE9BQU8sRUFBRSxDQUFDLFlBQVksQ0FBQztvQkFDdkIsUUFBUSxFQUFFLEVBQUU7b0JBQ1osYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7b0JBQ3JDLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2lCQUNoRDtzSEFRQyxLQUFLO3NCQUZKLFdBQVc7dUJBQUMsYUFBYTs7c0JBQ3pCLEtBQUs7Z0JBV0csTUFBTTtzQkFBZCxLQUFLO2dCQVNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBU0csS0FBSztzQkFBYixLQUFLO2dCQU1HLE9BQU87c0JBQWYsS0FBSztnQkFHUSxPQUFPO3NCQURwQixXQUFXO3VCQUFDLE9BQU87Z0JBcUJOLGdCQUFnQjtzQkFEN0IsV0FBVzt1QkFBQyxjQUFjO2dCQWFiLHNCQUFzQjtzQkFEbkMsV0FBVzt1QkFBQyxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUsIE5nQ2xhc3MgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxuICBOZ1pvbmUsXG4gIE9uQ2hhbmdlcyxcbiAgT25EZXN0cm95LFxuICBTaW1wbGVDaGFuZ2VzLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24sIGZyb21FdmVudCB9IGZyb20gJ3J4anMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdkb2t1LXNoaW1tZXInLFxuICBleHBvcnRBczogJ2Rva3VTaGltbWVyJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIHRlbXBsYXRlOiAnJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIERva3VTaGltbWVyIGltcGxlbWVudHMgT25DaGFuZ2VzLCBPbkRlc3Ryb3kge1xuICAvKipcbiAgICogV2lkdGggb2YgdGhlIHNoaW1tZXIuXG4gICAqIEBkZWZhdWx0ICcxMDAlJ1xuICAgKi9cbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS53aWR0aCcpXG4gIEBJbnB1dCgpXG4gIHdpZHRoID0gJzEwMCUnO1xuXG4gIC8qKlxuICAgKiBIZWlnaHQgb2YgdGhlIHNoaW1tZXIuXG4gICAqXG4gICAqIElmIGBzaGFwZWAgaXMgbm90IHJlY3RhbmdsZSBhbmQgYHdpZHRoYCBpcyBub3QgaW4gcGl4ZWxzLFxuICAgKiB0aGUgaGVpZ2h0IHdpbGwgYmUgY2FsY3VsYXRlZCBiYXNlZCBvbiB0aGUgZWxlbWVudCB3aWR0aC5cbiAgICpcbiAgICogQGRlZmF1bHQgJzE0cHgnXG4gICAqL1xuICBASW5wdXQoKSBoZWlnaHQgPSAnMTRweCc7XG5cbiAgLyoqXG4gICAqIEJvcmRlciByYWRpdXMgb2YgdGhlIHNoaW1tZXIuXG4gICAqXG4gICAqIElmIGBzaGFwZWAgaXMgY2lyY2xlLCB0aGUgdmFsdWUgd2lsbCBiZSBpZ25vcmVkLlxuICAgKlxuICAgKiBAZGVmYXVsdCAnNHB4J1xuICAgKi9cbiAgQElucHV0KCkgYm9yZGVyUmFkaXVzID0gJzRweCc7XG5cbiAgLyoqXG4gICAqIFRoZSBzaGFwZSBvZiB0aGUgc2hpbW1lci5cbiAgICpcbiAgICogU29tZSBzaGFwZXMgd2lsbCBhZmZlY3QgdGhlIGhlaWdodCBvciBib3JkZXIgcmFkaXVzLlxuICAgKlxuICAgKiBAZGVmYXVsdCAncmVjdGFuZ2xlJ1xuICAgKi9cbiAgQElucHV0KCkgc2hhcGU6ICdyZWN0YW5nbGUnIHwgJ3NxdWFyZScgfCAnY2lyY2xlJyA9ICdyZWN0YW5nbGUnO1xuXG4gIC8qKlxuICAgKiBDb2xvciB2YXJpYW50IG9mIHRoZSBzaGltbWVyLlxuICAgKiBAZGVmYXVsdCAnbGlnaHQnXG4gICAqL1xuICBASW5wdXQoKSB2YXJpYW50OiAnbGlnaHQnIHwgJ2RhcmsnID0gJ2xpZ2h0JztcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgcHJvdGVjdGVkIGdldCBjbGFzc2VzKCk6IE5nQ2xhc3NbJ25nQ2xhc3MnXSB7XG4gICAgcmV0dXJuIFsnZC1zaGltbWVyJywgYGQtc2hpbW1lci12YXJpYW50LSR7dGhpcy52YXJpYW50fWBdO1xuICB9XG5cbiAgcHJpdmF0ZSByZXNpemVMaXN0ZW5lcj86IFN1YnNjcmlwdGlvbjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsIHByaXZhdGUgbmdab25lOiBOZ1pvbmUpIHt9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzWyd3aWR0aCddPy5jdXJyZW50VmFsdWUpIHtcbiAgICAgIHRoaXMucmVzaXplTGlzdGVuZXI/LnVuc3Vic2NyaWJlKCk7XG4gICAgICB0aGlzLmxpc3RlblJlc2l6ZSgpO1xuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMucmVzaXplTGlzdGVuZXI/LnVuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ3N0eWxlLmhlaWdodCcpXG4gIHByb3RlY3RlZCBnZXQgbm9ybWFsaXplZEhlaWdodCgpOiBzdHJpbmcge1xuICAgIHN3aXRjaCAodGhpcy5zaGFwZSkge1xuICAgICAgY2FzZSAnc3F1YXJlJzpcbiAgICAgIGNhc2UgJ2NpcmNsZSc6XG4gICAgICAgIHJldHVybiB0aGlzLmNhbGN1bGF0ZUhlaWdodEJ5V2lkdGgodGhpcy53aWR0aCk7XG4gICAgICBjYXNlICdyZWN0YW5nbGUnOlxuICAgICAgZGVmYXVsdDpcbiAgICAgICAgcmV0dXJuIHRoaXMuaGVpZ2h0O1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0QmluZGluZygnc3R5bGUuYm9yZGVyLXJhZGl1cycpXG4gIHByb3RlY3RlZCBnZXQgbm9ybWFsaXplZEJvcmRlclJhZGl1cygpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLnNoYXBlID09PSAnY2lyY2xlJyA/ICc1MCUnIDogdGhpcy5ib3JkZXJSYWRpdXM7XG4gIH1cblxuICAvKipcbiAgICogQ2FsY3VsYXRlIGhlaWdodCB2YWx1ZSB3aGVuIHdpZHRoIGlzIG5vdCB1c2luZyBwaXhlbHMuXG4gICAqL1xuICBwcml2YXRlIGNhbGN1bGF0ZUhlaWdodEJ5V2lkdGgod2lkdGg6IHN0cmluZykge1xuICAgIGlmICh3aWR0aC5lbmRzV2l0aCgncHgnKSkgcmV0dXJuIHdpZHRoO1xuICAgIGlmICh0aGlzLnNoYXBlID09PSAncmVjdGFuZ2xlJykgcmV0dXJuIHRoaXMuaGVpZ2h0O1xuICAgIGNvbnN0IGNsaWVudFdpZHRoID0gKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50IGFzIEhUTUxFbGVtZW50KS5jbGllbnRXaWR0aDtcbiAgICBpZiAoIWNsaWVudFdpZHRoKSByZXR1cm4gd2lkdGg7XG4gICAgcmV0dXJuIGAke2NsaWVudFdpZHRofXB4YDtcbiAgfVxuXG4gIHByaXZhdGUgbGlzdGVuUmVzaXplKCkge1xuICAgIHRoaXMubmdab25lLnJ1bk91dHNpZGVBbmd1bGFyKCgpID0+IHtcbiAgICAgIGlmICh0aGlzLndpZHRoLmVuZHNXaXRoKCdweCcpKSByZXR1cm47XG4gICAgICBpZiAodGhpcy5zaGFwZSA9PT0gJ3JlY3RhbmdsZScpIHJldHVybjtcbiAgICAgIHRoaXMucmVzaXplTGlzdGVuZXIgPSBmcm9tRXZlbnQod2luZG93LCAncmVzaXplJykuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgICAgKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50IGFzIEhUTUxFbGVtZW50KS5zdHlsZS5oZWlnaHQgPSB0aGlzLmNhbGN1bGF0ZUhlaWdodEJ5V2lkdGgoXG4gICAgICAgICAgdGhpcy53aWR0aFxuICAgICAgICApO1xuICAgICAgfSk7XG4gICAgfSk7XG4gIH1cbn1cbiJdfQ==