ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
45 lines • 5.87 kB
JavaScript
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
import { ChangeDetectorRef, Directive, ElementRef } from '@angular/core';
import { distinctUntilChanged, map, startWith, tap } from 'rxjs/operators';
import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
export class NzOverflowItemDirective {
constructor(nzResizeObserver, elementRef, cdr) {
this.nzResizeObserver = nzResizeObserver;
this.elementRef = elementRef;
this.cdr = cdr;
this.overflowStyle = undefined;
this.itemWidth$ = this.nzResizeObserver.observe(this.elementRef.nativeElement).pipe(map(([item]) => item.target.offsetWidth), distinctUntilChanged(), startWith(undefined), tap(width => {
this.itemWidth = width;
}));
this.itemWidth = undefined;
}
setItemStyle(display, order) {
const mergedHidden = !display;
this.overflowStyle = {
opacity: mergedHidden ? 0 : 1,
height: mergedHidden ? 0 : undefined,
overflowY: mergedHidden ? 'hidden' : undefined,
order: order,
pointerEvents: mergedHidden ? 'none' : undefined,
position: mergedHidden ? 'absolute' : undefined
};
this.cdr.detectChanges();
}
}
NzOverflowItemDirective.decorators = [
{ type: Directive, args: [{
selector: '[nzOverflowItem]',
host: {
'[style]': 'overflowStyle'
}
},] }
];
NzOverflowItemDirective.ctorParameters = () => [
{ type: NzResizeObserver },
{ type: ElementRef },
{ type: ChangeDetectorRef }
];
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3ZlcmZsb3ctaXRlbS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2Nkay9vdmVyZmxvdy9vdmVyZmxvdy1pdGVtLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0dBR0c7QUFFSCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6RSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUUzRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQVFyRSxNQUFNLE9BQU8sdUJBQXVCO0lBV2xDLFlBQ1UsZ0JBQWtDLEVBQ25DLFVBQXNCLEVBQ3JCLEdBQXNCO1FBRnRCLHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBa0I7UUFDbkMsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUNyQixRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQWJoQyxrQkFBYSxHQUErRCxTQUFTLENBQUM7UUFDdEYsZUFBVSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQyxJQUFJLENBQzVFLEdBQUcsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFFLElBQUksQ0FBQyxNQUFzQixDQUFDLFdBQVcsQ0FBQyxFQUN6RCxvQkFBb0IsRUFBRSxFQUN0QixTQUFTLENBQUMsU0FBUyxDQUFDLEVBQ3BCLEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUNWLElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO1FBQ3pCLENBQUMsQ0FBQyxDQUNILENBQUM7UUFDRixjQUFTLEdBQXVCLFNBQVMsQ0FBQztJQUt2QyxDQUFDO0lBRUosWUFBWSxDQUFDLE9BQWdCLEVBQUUsS0FBYTtRQUMxQyxNQUFNLFlBQVksR0FBRyxDQUFDLE9BQU8sQ0FBQztRQUM5QixJQUFJLENBQUMsYUFBYSxHQUFHO1lBQ25CLE9BQU8sRUFBRSxZQUFZLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUM3QixNQUFNLEVBQUUsWUFBWSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVM7WUFDcEMsU0FBUyxFQUFFLFlBQVksQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxTQUFTO1lBQzlDLEtBQUssRUFBRSxLQUFLO1lBQ1osYUFBYSxFQUFFLFlBQVksQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxTQUFTO1lBQ2hELFFBQVEsRUFBRSxZQUFZLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsU0FBUztTQUNoRCxDQUFDO1FBQ0YsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUMzQixDQUFDOzs7WUFsQ0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxrQkFBa0I7Z0JBQzVCLElBQUksRUFBRTtvQkFDSixTQUFTLEVBQUUsZUFBZTtpQkFDM0I7YUFDRjs7O1lBUFEsZ0JBQWdCO1lBSGMsVUFBVTtZQUF4QyxpQkFBaUIiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vZ2l0aHViLmNvbS9ORy1aT1JSTy9uZy16b3Jyby1hbnRkL2Jsb2IvbWFzdGVyL0xJQ0VOU0VcbiAqL1xuXG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3RvclJlZiwgRGlyZWN0aXZlLCBFbGVtZW50UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBkaXN0aW5jdFVudGlsQ2hhbmdlZCwgbWFwLCBzdGFydFdpdGgsIHRhcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuaW1wb3J0IHsgTnpSZXNpemVPYnNlcnZlciB9IGZyb20gJ25nLXpvcnJvLWFudGQvY2RrL3Jlc2l6ZS1vYnNlcnZlcic7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tuek92ZXJmbG93SXRlbV0nLFxuICBob3N0OiB7XG4gICAgJ1tzdHlsZV0nOiAnb3ZlcmZsb3dTdHlsZSdcbiAgfVxufSlcbmV4cG9ydCBjbGFzcyBOek92ZXJmbG93SXRlbURpcmVjdGl2ZSB7XG4gIG92ZXJmbG93U3R5bGU6IHsgW2tleTogc3RyaW5nXTogc3RyaW5nIHwgbnVtYmVyIHwgdW5kZWZpbmVkIH0gfCB1bmRlZmluZWQgPSB1bmRlZmluZWQ7XG4gIGl0ZW1XaWR0aCQgPSB0aGlzLm56UmVzaXplT2JzZXJ2ZXIub2JzZXJ2ZSh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCkucGlwZShcbiAgICBtYXAoKFtpdGVtXSkgPT4gKGl0ZW0udGFyZ2V0IGFzIEhUTUxFbGVtZW50KS5vZmZzZXRXaWR0aCksXG4gICAgZGlzdGluY3RVbnRpbENoYW5nZWQoKSxcbiAgICBzdGFydFdpdGgodW5kZWZpbmVkKSxcbiAgICB0YXAod2lkdGggPT4ge1xuICAgICAgdGhpcy5pdGVtV2lkdGggPSB3aWR0aDtcbiAgICB9KVxuICApO1xuICBpdGVtV2lkdGg6IG51bWJlciB8IHVuZGVmaW5lZCA9IHVuZGVmaW5lZDtcbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBuelJlc2l6ZU9ic2VydmVyOiBOelJlc2l6ZU9ic2VydmVyLFxuICAgIHB1YmxpYyBlbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZlxuICApIHt9XG5cbiAgc2V0SXRlbVN0eWxlKGRpc3BsYXk6IGJvb2xlYW4sIG9yZGVyOiBudW1iZXIpOiB2b2lkIHtcbiAgICBjb25zdCBtZXJnZWRIaWRkZW4gPSAhZGlzcGxheTtcbiAgICB0aGlzLm92ZXJmbG93U3R5bGUgPSB7XG4gICAgICBvcGFjaXR5OiBtZXJnZWRIaWRkZW4gPyAwIDogMSxcbiAgICAgIGhlaWdodDogbWVyZ2VkSGlkZGVuID8gMCA6IHVuZGVmaW5lZCxcbiAgICAgIG92ZXJmbG93WTogbWVyZ2VkSGlkZGVuID8gJ2hpZGRlbicgOiB1bmRlZmluZWQsXG4gICAgICBvcmRlcjogb3JkZXIsXG4gICAgICBwb2ludGVyRXZlbnRzOiBtZXJnZWRIaWRkZW4gPyAnbm9uZScgOiB1bmRlZmluZWQsXG4gICAgICBwb3NpdGlvbjogbWVyZ2VkSGlkZGVuID8gJ2Fic29sdXRlJyA6IHVuZGVmaW5lZFxuICAgIH07XG4gICAgdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpO1xuICB9XG59XG4iXX0=