9495886246

Committed 13 Jun 2024 07:59AM UTC coverage: 92.234%. Remained the same

Build # 9495886246

Build Type

push

github

Committed by

web-flow

Commit Message

docs(density): mark extra api as internal as intended (#14382)

Run Details

15436 of 18149 branches covered (85.05%)

27019 of 29294 relevant lines covered (92.23%)

29683.22 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

85.29

/projects/igniteui-angular/src/lib/core/density.ts

import {
    InjectionToken,
    Input,
    Output,
    EventEmitter,
    DoCheck,
    OnInit,
    Directive,
    Optional,
    Inject,
    ElementRef,
} from '@angular/core';
import { IBaseEventArgs, mkenum } from './utils';

/**
 * Defines the possible values of the components' display density.
 */
export const DisplayDensity = mkenum({
    comfortable: 'comfortable',
    cosy: 'cosy',
    compact: 'compact',
});
/**
 * @deprecated since version 16.1.x.
 * Please use the `--ig-size` CSS custom property.
 * @see {@link [Update Guide](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide#from-160x-to-161x)}
 */
export type DisplayDensity =
    (typeof DisplayDensity)[keyof typeof DisplayDensity];

/**
 * @deprecated since version 16.1.x. Please use the `--ig-size` CSS custom property.
 *
 * Describes the object used to configure the DisplayDensity in Angular DI.
 */
export interface IDisplayDensityOptions {
    displayDensity: DisplayDensity;
}

export interface IDensityChangedEventArgs extends IBaseEventArgs {
    oldDensity: DisplayDensity;
    newDensity: DisplayDensity;
}

/**
 * @deprecated since version 16.1.x.
 * Please use the `--ig-size` CSS custom property.
 * @see {@link [Update Guide](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide#from-160x-to-161x)}
 *
 * @hidden
 * Defines the DisplayDensity DI token.
 */
export const DisplayDensityToken = new InjectionToken<IDisplayDensityOptions>(
    'DisplayDensity'
);

/**
 * @hidden
 * Base class containing all logic required for implementing DisplayDensity.
 */
@Directive({
    selector: '[igxDisplayDensityBase]',
    standalone: true,
})
// eslint-disable-next-line @angular-eslint/directive-class-suffix
export class DisplayDensityBase implements DoCheck, OnInit {
    @Output()
    public densityChanged = new EventEmitter<IDensityChangedEventArgs>();

    /**
     * @deprecated since version 16.1.x.
     * Please use the `--ig-size` CSS custom property.
     * @see {@link [Update Guide](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide#from-160x-to-161x)}
     *
     * Returns the theme of the component.
     * The default theme is `comfortable`.
     * Available options are `comfortable`, `cosy`, `compact`.
     * ```typescript
     * let componentTheme = this.component.displayDensity;
     * ```
     */
    @Input()
    public get displayDensity(): DisplayDensity {
        switch (this.size) {
            case '1':
                return DisplayDensity.compact;
            case '2':
                return DisplayDensity.cosy;
            case '3':
            default:
                return (
                    this._displayDensity ??
                    this.displayDensityOptions?.displayDensity ??
                    DisplayDensity.comfortable
                );
        }
    }

    /**
     * Sets the theme of the component.
     */
    public set displayDensity(val: DisplayDensity) {
        const currentDisplayDensity = this._displayDensity;
        this._displayDensity = val as DisplayDensity;

        if (currentDisplayDensity !== this._displayDensity) {
            const densityChangedArgs: IDensityChangedEventArgs = {
                oldDensity: currentDisplayDensity,
                newDensity: this._displayDensity,
            };

            this.densityChanged.emit(densityChangedArgs);
        }
    }

    /** @hidden @internal */
    public get size() {
        return globalThis.document?.defaultView
            .getComputedStyle(this._host.nativeElement)
            .getPropertyValue('--ig-size')
            .trim();
    }

    /**
     * @hidden
     */
    public initialDensity: DisplayDensity;

    protected oldDisplayDensityOptions: IDisplayDensityOptions = {
        displayDensity: DisplayDensity.comfortable,
    }

    protected _displayDensity: DisplayDensity;

    constructor(
        @Optional()
        @Inject(DisplayDensityToken)
        protected displayDensityOptions: IDisplayDensityOptions,
        protected _host: ElementRef
    ) {
        Object.assign(this.oldDisplayDensityOptions, displayDensityOptions);
    }

    /**
     * @hidden
     */
    public ngOnInit(): void {
        this.initialDensity = this._displayDensity;
    }

    /** @hidden @internal **/
    public ngDoCheck() {
        if (
            !this._displayDensity &&
            this.displayDensityOptions &&
            this.oldDisplayDensityOptions.displayDensity !==
                this.displayDensityOptions.displayDensity
        ) {
            const densityChangedArgs: IDensityChangedEventArgs = {
                oldDensity: this.oldDisplayDensityOptions.displayDensity,
                newDensity: this.displayDensityOptions.displayDensity,
            };

            this.densityChanged.emit(densityChangedArgs);
            this.oldDisplayDensityOptions = Object.assign(
                this.oldDisplayDensityOptions,
                this.displayDensityOptions
            );
        }
    }

    /**
     * Given a style class of a component/element returns the modified version of it based
     * on the current display density.
     */
    protected getComponentDensityClass(baseStyleClass: string): string {
        switch (this._displayDensity || this.oldDisplayDensityOptions.displayDensity) {
            case DisplayDensity.cosy:
                return `${baseStyleClass}--${DisplayDensity.cosy}`;
            case DisplayDensity.compact:
                return `${baseStyleClass}--${DisplayDensity.compact}`;
            default:
                return baseStyleClass;
        }
    }

    /**
     * Sets the `--component-size` CSS variable based on the value of Display Density
     * @hidden @internal
     */
    public getComponentSizeStyles() {
        switch (this._displayDensity || this.oldDisplayDensityOptions.displayDensity) {
            case DisplayDensity.compact:
                return 'var(--ig-size, var(--ig-size-small))';
            case DisplayDensity.cosy:
                return 'var(--ig-size, var(--ig-size-medium))';
            case DisplayDensity.comfortable:
            default:
                return 'var(--ig-size, var(--ig-size-large))';
        }
    }
}

1	import {
2	InjectionToken,
3	Input,
4	Output,
5	EventEmitter,
6	DoCheck,
7	OnInit,	2✔
8	Directive,
9	Optional,
10	Inject,
11	ElementRef,
12	} from '@angular/core';
13	import { IBaseEventArgs, mkenum } from './utils';
14
15	/**
16	* Defines the possible values of the components' display density.
17	*/
18	export const DisplayDensity = mkenum({
19	comfortable: 'comfortable',
20	cosy: 'cosy',	2✔
21	compact: 'compact',
22	});
23	/**
24	* @deprecated since version 16.1.x.
25	* Please use the `--ig-size` CSS custom property.	2✔
26	* @see {@link [Update Guide](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide#from-160x-to-161x)}
27	*/	2,435,054✔
28	export type DisplayDensity =
29	(typeof DisplayDensity)[keyof typeof DisplayDensity];	2,611✔
30
31	/**	9✔
32	* @deprecated since version 16.1.x. Please use the `--ig-size` CSS custom property.
33	*
34	* Describes the object used to configure the DisplayDensity in Angular DI.	2,432,434✔
35	*/
36	export interface IDisplayDensityOptions {
37	displayDensity: DisplayDensity;
38	}
39
40	export interface IDensityChangedEventArgs extends IBaseEventArgs {
41	oldDensity: DisplayDensity;
42	newDensity: DisplayDensity;
43	}	12,414✔
44		12,414✔
45	/**	12,414✔
46	* @deprecated since version 16.1.x.	12,391✔
47	* Please use the `--ig-size` CSS custom property.
48	* @see {@link [Update Guide](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide#from-160x-to-161x)}
49	*
50	* @hidden	12,391✔
51	* Defines the DisplayDensity DI token.
52	*/
53	export const DisplayDensityToken = new InjectionToken<IDisplayDensityOptions>(
54	'DisplayDensity'
55	);	2,435,054✔
56
57	/**
58	* @hidden
59	* Base class containing all logic required for implementing DisplayDensity.
60	*/
61	@Directive({	24,163✔
62	selector: '[igxDisplayDensityBase]',	24,163✔
63	standalone: true,	24,163✔
64	})	24,163✔
65	// eslint-disable-next-line @angular-eslint/directive-class-suffix
66	export class DisplayDensityBase implements DoCheck, OnInit {
67	@Output()	24,163✔
68	public densityChanged = new EventEmitter<IDensityChangedEventArgs>();
69
70	/**
71	* @deprecated since version 16.1.x.
72	* Please use the `--ig-size` CSS custom property.
73	* @see {@link [Update Guide](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide#from-160x-to-161x)}	23,629✔
74	*
75	* Returns the theme of the component.
76	* The default theme is `comfortable`.
77	* Available options are `comfortable`, `cosy`, `compact`.	178,207!
78	* ```typescript
79	* let componentTheme = this.component.displayDensity;
80	* ```
81	*/	×
82	@Input()
83	public get displayDensity(): DisplayDensity {
84	switch (this.size) {
85	case '1':	×
86	return DisplayDensity.compact;	×
87	case '2':
88	return DisplayDensity.cosy;
89	case '3':
90	default:
91	return (
92	this._displayDensity ??
93	this.displayDensityOptions?.displayDensity ??
94	DisplayDensity.comfortable	240!
95	);
96	}	×
97	}
98		×
99	/**
100	* Sets the theme of the component.	240✔
101	*/
102	public set displayDensity(val: DisplayDensity) {
103	const currentDisplayDensity = this._displayDensity;
104	this._displayDensity = val as DisplayDensity;
105
106	if (currentDisplayDensity !== this._displayDensity) {
107	const densityChangedArgs: IDensityChangedEventArgs = {
108	oldDensity: currentDisplayDensity,	333,550✔
109	newDensity: this._displayDensity,
110	};	15,044✔
111
112	this.densityChanged.emit(densityChangedArgs);	56,352✔
113	}
114	}
115		262,154✔
116	/** @hidden @internal */
117	public get size() {
118	return globalThis.document?.defaultView	2✔
119	.getComputedStyle(this._host.nativeElement)
120	.getPropertyValue('--ig-size')
121	.trim();
122	}	2✔
123
124	/**
125	* @hidden
126	*/
127	public initialDensity: DisplayDensity;	2✔
128
129	protected oldDisplayDensityOptions: IDisplayDensityOptions = {
130	displayDensity: DisplayDensity.comfortable,
131	}
132
133	protected _displayDensity: DisplayDensity;
134
135	constructor(
136	@Optional()
137	@Inject(DisplayDensityToken)
138	protected displayDensityOptions: IDisplayDensityOptions,
139	protected _host: ElementRef
140	) {
141	Object.assign(this.oldDisplayDensityOptions, displayDensityOptions);
142	}
143
144	/**
145	* @hidden
146	*/
147	public ngOnInit(): void {
148	this.initialDensity = this._displayDensity;
149	}
150
151	/ @hidden @internal /
152	public ngDoCheck() {
153	if (
154	!this._displayDensity &&
155	this.displayDensityOptions &&
156	this.oldDisplayDensityOptions.displayDensity !==
157	this.displayDensityOptions.displayDensity
158	) {
159	const densityChangedArgs: IDensityChangedEventArgs = {
160	oldDensity: this.oldDisplayDensityOptions.displayDensity,
161	newDensity: this.displayDensityOptions.displayDensity,
162	};
163
164	this.densityChanged.emit(densityChangedArgs);
165	this.oldDisplayDensityOptions = Object.assign(
166	this.oldDisplayDensityOptions,
167	this.displayDensityOptions
168	);
169	}
170	}
171
172	/**
173	* Given a style class of a component/element returns the modified version of it based
174	* on the current display density.
175	*/
176	protected getComponentDensityClass(baseStyleClass: string): string {
177	switch (this._displayDensity \|\| this.oldDisplayDensityOptions.displayDensity) {
178	case DisplayDensity.cosy:
179	return `${baseStyleClass}--${DisplayDensity.cosy}`;
180	case DisplayDensity.compact:
181	return `${baseStyleClass}--${DisplayDensity.compact}`;
182	default:
183	return baseStyleClass;
184	}
185	}
186
187	/**
188	* Sets the `--component-size` CSS variable based on the value of Display Density
189	* @hidden @internal
190	*/
191	public getComponentSizeStyles() {
192	switch (this._displayDensity \|\| this.oldDisplayDensityOptions.displayDensity) {
193	case DisplayDensity.compact:
194	return 'var(--ig-size, var(--ig-size-small))';
195	case DisplayDensity.cosy:
196	return 'var(--ig-size, var(--ig-size-medium))';
197	case DisplayDensity.comfortable:
198	default:
199	return 'var(--ig-size, var(--ig-size-large))';
200	}
201	}
202	}

IgniteUI / igniteui-angular / 9495886246

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous