@clr/angular
Version:
Angular components for Clarity
97 lines • 10.1 kB
JavaScript
/*
* Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
import { Directive, EventEmitter, Inject, Input, Output, } from '@angular/core';
import { IF_ACTIVE_ID } from './if-active.service';
import * as i0 from "@angular/core";
import * as i1 from "./if-active.service";
/**********
*
* @class ClrIfActive
*
* @description
* A structural directive that controls whether or not the associated TemplateRef is instantiated or not.
* It makes use of a Component instance level service: IfActiveService to maintain state between itself and
* the component using it in the component template.
*
*/
export class ClrIfActive {
constructor(ifActiveService, id, template, container) {
this.ifActiveService = ifActiveService;
this.id = id;
this.template = template;
this.container = container;
/**********
* @property activeChange
*
* @description
* An event emitter that emits when the active property is set to allow for 2way binding when the directive is
* used with de-structured / de-sugared syntax.
*
*/
this.activeChange = new EventEmitter(false);
this.wasActive = false;
this.checkAndUpdateView(ifActiveService.current);
this.subscription = this.ifActiveService.currentChange.subscribe(newCurrentId => {
this.checkAndUpdateView(newCurrentId);
});
}
/**
* @description
* A property that gets/sets IfActiveService.active with value.
*
*/
get active() {
return this.ifActiveService.current === this.id;
}
set active(value) {
if (value) {
this.ifActiveService.current = this.id;
}
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
/**
* @description
* Function that takes a any value and either created an embedded view for the associated ViewContainerRef or,
* Clears all views from the ViewContainerRef
*/
updateView(value) {
if (value) {
this.container.createEmbeddedView(this.template);
}
else {
this.container.clear();
}
}
checkAndUpdateView(currentId) {
const isNowActive = currentId === this.id;
// only emit if the new active state is changed since last time.
if (isNowActive !== this.wasActive) {
this.updateView(isNowActive);
this.activeChange.emit(isNowActive);
this.wasActive = isNowActive;
}
}
}
ClrIfActive.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrIfActive, deps: [{ token: i1.IfActiveService }, { token: IF_ACTIVE_ID }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
ClrIfActive.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrIfActive, selector: "[clrIfActive]", inputs: { active: ["clrIfActive", "active"] }, outputs: { activeChange: "clrIfActiveChange" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrIfActive, decorators: [{
type: Directive,
args: [{
selector: '[clrIfActive]',
}]
}], ctorParameters: function () { return [{ type: i1.IfActiveService }, { type: undefined, decorators: [{
type: Inject,
args: [IF_ACTIVE_ID]
}] }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { activeChange: [{
type: Output,
args: ['clrIfActiveChange']
}], active: [{
type: Input,
args: ['clrIfActive']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWYtYWN0aXZlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXIvc3JjL3V0aWxzL2NvbmRpdGlvbmFsL2lmLWFjdGl2ZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7R0FJRztBQUVILE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBRUwsTUFBTSxHQUdQLE1BQU0sZUFBZSxDQUFDO0FBR3ZCLE9BQU8sRUFBRSxZQUFZLEVBQW1CLE1BQU0scUJBQXFCLENBQUM7OztBQU1wRTs7Ozs7Ozs7O0dBU0c7QUFDSCxNQUFNLE9BQU8sV0FBVztJQWN0QixZQUNVLGVBQWdDLEVBQ1YsRUFBVSxFQUNoQyxRQUEwQixFQUMxQixTQUEyQjtRQUgzQixvQkFBZSxHQUFmLGVBQWUsQ0FBaUI7UUFDVixPQUFFLEdBQUYsRUFBRSxDQUFRO1FBQ2hDLGFBQVEsR0FBUixRQUFRLENBQWtCO1FBQzFCLGNBQVMsR0FBVCxTQUFTLENBQWtCO1FBakJyQzs7Ozs7OztXQU9HO1FBQzBCLGlCQUFZLEdBQUcsSUFBSSxZQUFZLENBQVUsS0FBSyxDQUFDLENBQUM7UUFHckUsY0FBUyxHQUFHLEtBQUssQ0FBQztRQVF4QixJQUFJLENBQUMsa0JBQWtCLENBQUMsZUFBZSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBRWpELElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLFlBQVksQ0FBQyxFQUFFO1lBQzlFLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUN4QyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRDs7OztPQUlHO0lBQ0gsSUFDSSxNQUFNO1FBQ1IsT0FBTyxJQUFJLENBQUMsZUFBZSxDQUFDLE9BQU8sS0FBSyxJQUFJLENBQUMsRUFBRSxDQUFDO0lBQ2xELENBQUM7SUFDRCxJQUFJLE1BQU0sQ0FBQyxLQUF1QjtRQUNoQyxJQUFJLEtBQUssRUFBRTtZQUNULElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUM7U0FDeEM7SUFDSCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDbEMsQ0FBQztJQUVEOzs7O09BSUc7SUFDSCxVQUFVLENBQUMsS0FBYztRQUN2QixJQUFJLEtBQUssRUFBRTtZQUNULElBQUksQ0FBQyxTQUFTLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1NBQ2xEO2FBQU07WUFDTCxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQ3hCO0lBQ0gsQ0FBQztJQUVPLGtCQUFrQixDQUFDLFNBQWlCO1FBQzFDLE1BQU0sV0FBVyxHQUFHLFNBQVMsS0FBSyxJQUFJLENBQUMsRUFBRSxDQUFDO1FBQzFDLGdFQUFnRTtRQUNoRSxJQUFJLFdBQVcsS0FBSyxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2xDLElBQUksQ0FBQyxVQUFVLENBQUMsV0FBVyxDQUFDLENBQUM7WUFDN0IsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7WUFDcEMsSUFBSSxDQUFDLFNBQVMsR0FBRyxXQUFXLENBQUM7U0FDOUI7SUFDSCxDQUFDOzt3R0FuRVUsV0FBVyxpREFnQlosWUFBWTs0RkFoQlgsV0FBVzsyRkFBWCxXQUFXO2tCQWR2QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxlQUFlO2lCQUMxQjs7MEJBNEJJLE1BQU07MkJBQUMsWUFBWTtxR0FQTyxZQUFZO3NCQUF4QyxNQUFNO3VCQUFDLG1CQUFtQjtnQkF3QnZCLE1BQU07c0JBRFQsS0FBSzt1QkFBQyxhQUFhIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAoYykgMjAxNi0yMDIzIFZNd2FyZSwgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICogVGhpcyBzb2Z0d2FyZSBpcyByZWxlYXNlZCB1bmRlciBNSVQgbGljZW5zZS5cbiAqIFRoZSBmdWxsIGxpY2Vuc2UgaW5mb3JtYXRpb24gY2FuIGJlIGZvdW5kIGluIExJQ0VOU0UgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgcHJvamVjdC5cbiAqL1xuXG5pbXBvcnQge1xuICBEaXJlY3RpdmUsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5qZWN0LFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBPdXRwdXQsXG4gIFRlbXBsYXRlUmVmLFxuICBWaWV3Q29udGFpbmVyUmVmLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuXG5pbXBvcnQgeyBJRl9BQ1RJVkVfSUQsIElmQWN0aXZlU2VydmljZSB9IGZyb20gJy4vaWYtYWN0aXZlLnNlcnZpY2UnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbY2xySWZBY3RpdmVdJyxcbn0pXG5cbi8qKioqKioqKioqXG4gKlxuICogQGNsYXNzIENscklmQWN0aXZlXG4gKlxuICogQGRlc2NyaXB0aW9uXG4gKiBBIHN0cnVjdHVyYWwgZGlyZWN0aXZlIHRoYXQgY29udHJvbHMgd2hldGhlciBvciBub3QgdGhlIGFzc29jaWF0ZWQgVGVtcGxhdGVSZWYgaXMgaW5zdGFudGlhdGVkIG9yIG5vdC5cbiAqIEl0IG1ha2VzIHVzZSBvZiBhIENvbXBvbmVudCBpbnN0YW5jZSBsZXZlbCBzZXJ2aWNlOiBJZkFjdGl2ZVNlcnZpY2UgdG8gbWFpbnRhaW4gc3RhdGUgYmV0d2VlbiBpdHNlbGYgYW5kXG4gKiB0aGUgY29tcG9uZW50IHVzaW5nIGl0IGluIHRoZSBjb21wb25lbnQgdGVtcGxhdGUuXG4gKlxuICovXG5leHBvcnQgY2xhc3MgQ2xySWZBY3RpdmUgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICAvKioqKioqKioqKlxuICAgKiBAcHJvcGVydHkgYWN0aXZlQ2hhbmdlXG4gICAqXG4gICAqIEBkZXNjcmlwdGlvblxuICAgKiBBbiBldmVudCBlbWl0dGVyIHRoYXQgZW1pdHMgd2hlbiB0aGUgYWN0aXZlIHByb3BlcnR5IGlzIHNldCB0byBhbGxvdyBmb3IgMndheSBiaW5kaW5nIHdoZW4gdGhlIGRpcmVjdGl2ZSBpc1xuICAgKiB1c2VkIHdpdGggZGUtc3RydWN0dXJlZCAvIGRlLXN1Z2FyZWQgc3ludGF4LlxuICAgKlxuICAgKi9cbiAgQE91dHB1dCgnY2xySWZBY3RpdmVDaGFuZ2UnKSBhY3RpdmVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KGZhbHNlKTtcblxuICBwcml2YXRlIHN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uO1xuICBwcml2YXRlIHdhc0FjdGl2ZSA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgaWZBY3RpdmVTZXJ2aWNlOiBJZkFjdGl2ZVNlcnZpY2UsXG4gICAgQEluamVjdChJRl9BQ1RJVkVfSUQpIHByaXZhdGUgaWQ6IG51bWJlcixcbiAgICBwcml2YXRlIHRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+LFxuICAgIHByaXZhdGUgY29udGFpbmVyOiBWaWV3Q29udGFpbmVyUmVmXG4gICkge1xuICAgIHRoaXMuY2hlY2tBbmRVcGRhdGVWaWV3KGlmQWN0aXZlU2VydmljZS5jdXJyZW50KTtcblxuICAgIHRoaXMuc3Vic2NyaXB0aW9uID0gdGhpcy5pZkFjdGl2ZVNlcnZpY2UuY3VycmVudENoYW5nZS5zdWJzY3JpYmUobmV3Q3VycmVudElkID0+IHtcbiAgICAgIHRoaXMuY2hlY2tBbmRVcGRhdGVWaWV3KG5ld0N1cnJlbnRJZCk7XG4gICAgfSk7XG4gIH1cblxuICAvKipcbiAgICogQGRlc2NyaXB0aW9uXG4gICAqIEEgcHJvcGVydHkgdGhhdCBnZXRzL3NldHMgSWZBY3RpdmVTZXJ2aWNlLmFjdGl2ZSB3aXRoIHZhbHVlLlxuICAgKlxuICAgKi9cbiAgQElucHV0KCdjbHJJZkFjdGl2ZScpXG4gIGdldCBhY3RpdmUoKSB7XG4gICAgcmV0dXJuIHRoaXMuaWZBY3RpdmVTZXJ2aWNlLmN1cnJlbnQgPT09IHRoaXMuaWQ7XG4gIH1cbiAgc2V0IGFjdGl2ZSh2YWx1ZTogYm9vbGVhbiB8IHN0cmluZykge1xuICAgIGlmICh2YWx1ZSkge1xuICAgICAgdGhpcy5pZkFjdGl2ZVNlcnZpY2UuY3VycmVudCA9IHRoaXMuaWQ7XG4gICAgfVxuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5zdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBAZGVzY3JpcHRpb25cbiAgICogRnVuY3Rpb24gdGhhdCB0YWtlcyBhIGFueSB2YWx1ZSBhbmQgZWl0aGVyIGNyZWF0ZWQgYW4gZW1iZWRkZWQgdmlldyBmb3IgdGhlIGFzc29jaWF0ZWQgVmlld0NvbnRhaW5lclJlZiBvcixcbiAgICogQ2xlYXJzIGFsbCB2aWV3cyBmcm9tIHRoZSBWaWV3Q29udGFpbmVyUmVmXG4gICAqL1xuICB1cGRhdGVWaWV3KHZhbHVlOiBib29sZWFuKSB7XG4gICAgaWYgKHZhbHVlKSB7XG4gICAgICB0aGlzLmNvbnRhaW5lci5jcmVhdGVFbWJlZGRlZFZpZXcodGhpcy50ZW1wbGF0ZSk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuY29udGFpbmVyLmNsZWFyKCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBjaGVja0FuZFVwZGF0ZVZpZXcoY3VycmVudElkOiBudW1iZXIpIHtcbiAgICBjb25zdCBpc05vd0FjdGl2ZSA9IGN1cnJlbnRJZCA9PT0gdGhpcy5pZDtcbiAgICAvLyBvbmx5IGVtaXQgaWYgdGhlIG5ldyBhY3RpdmUgc3RhdGUgaXMgY2hhbmdlZCBzaW5jZSBsYXN0IHRpbWUuXG4gICAgaWYgKGlzTm93QWN0aXZlICE9PSB0aGlzLndhc0FjdGl2ZSkge1xuICAgICAgdGhpcy51cGRhdGVWaWV3KGlzTm93QWN0aXZlKTtcbiAgICAgIHRoaXMuYWN0aXZlQ2hhbmdlLmVtaXQoaXNOb3dBY3RpdmUpO1xuICAgICAgdGhpcy53YXNBY3RpdmUgPSBpc05vd0FjdGl2ZTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==