@clr/angular 16.3.6 → 16.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/clarity.api.md +3 -1
- package/esm2020/utils/animations/expandable-animation/expandable-animation.mjs +14 -6
- package/fesm2015/clr-angular.mjs +13 -5
- package/fesm2015/clr-angular.mjs.map +1 -1
- package/fesm2020/clr-angular.mjs +13 -5
- package/fesm2020/clr-angular.mjs.map +1 -1
- package/package.json +2 -2
- package/utils/animations/expandable-animation/expandable-animation.d.ts +4 -2
package/clarity.api.md
CHANGED
|
@@ -2204,10 +2204,12 @@ export class ClrEmphasisModule {
|
|
|
2204
2204
|
// @public (undocumented)
|
|
2205
2205
|
export class ClrExpandableAnimation {
|
|
2206
2206
|
// Warning: (ae-forgotten-export) The symbol "DomAdapter" needs to be exported by the entry point index.d.ts
|
|
2207
|
-
constructor(element: ElementRef, domAdapter: DomAdapter);
|
|
2207
|
+
constructor(element: ElementRef, domAdapter: DomAdapter, renderer: Renderer2);
|
|
2208
2208
|
// (undocumented)
|
|
2209
2209
|
animationDone(): void;
|
|
2210
2210
|
// (undocumented)
|
|
2211
|
+
animationStart(): void;
|
|
2212
|
+
// (undocumented)
|
|
2211
2213
|
clrExpandTrigger: any;
|
|
2212
2214
|
// (undocumented)
|
|
2213
2215
|
get expandAnimation(): {
|
|
@@ -9,15 +9,20 @@ import { DomAdapter } from '../../dom-adapter/dom-adapter';
|
|
|
9
9
|
import * as i0 from "@angular/core";
|
|
10
10
|
import * as i1 from "../../dom-adapter/dom-adapter";
|
|
11
11
|
export class ClrExpandableAnimation {
|
|
12
|
-
constructor(element, domAdapter) {
|
|
12
|
+
constructor(element, domAdapter, renderer) {
|
|
13
13
|
this.element = element;
|
|
14
14
|
this.domAdapter = domAdapter;
|
|
15
|
+
this.renderer = renderer;
|
|
15
16
|
this.startHeight = 0;
|
|
16
17
|
}
|
|
17
18
|
get expandAnimation() {
|
|
18
19
|
return { value: this.clrExpandTrigger, params: { startHeight: this.startHeight } };
|
|
19
20
|
}
|
|
21
|
+
animationStart() {
|
|
22
|
+
this.renderer.setStyle(this.element.nativeElement, 'overflow', 'hidden');
|
|
23
|
+
}
|
|
20
24
|
animationDone() {
|
|
25
|
+
this.renderer.removeStyle(this.element.nativeElement, 'overflow');
|
|
21
26
|
// A "safe" auto-update of the height ensuring basic OOTB user experience .
|
|
22
27
|
// Prone to small jumps in initial animation height if data was changed in the meantime, window was resized, etc.
|
|
23
28
|
// For optimal behavior call manually updateStartHeight() from the parent component before initiating the update.
|
|
@@ -27,8 +32,8 @@ export class ClrExpandableAnimation {
|
|
|
27
32
|
this.startHeight = this.domAdapter.computedHeight(this.element.nativeElement) || 0;
|
|
28
33
|
}
|
|
29
34
|
}
|
|
30
|
-
ClrExpandableAnimation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrExpandableAnimation, deps: [{ token: i0.ElementRef }, { token: i1.DomAdapter }], target: i0.ɵɵFactoryTarget.Component });
|
|
31
|
-
ClrExpandableAnimation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: { clrExpandTrigger: "clrExpandTrigger" }, host: { listeners: { "@expandAnimation.done": "animationDone()" }, properties: { "@expandAnimation": "this.expandAnimation" } }, providers: [DomAdapter], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block
|
|
35
|
+
ClrExpandableAnimation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrExpandableAnimation, deps: [{ token: i0.ElementRef }, { token: i1.DomAdapter }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
+
ClrExpandableAnimation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: { clrExpandTrigger: "clrExpandTrigger" }, host: { listeners: { "@expandAnimation.start": "animationStart()", "@expandAnimation.done": "animationDone()" }, properties: { "@expandAnimation": "this.expandAnimation" } }, providers: [DomAdapter], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block}\n"], animations: [
|
|
32
37
|
trigger('expandAnimation', [
|
|
33
38
|
transition('true <=> false', [
|
|
34
39
|
style({ height: '{{startHeight}}px' }),
|
|
@@ -45,14 +50,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
45
50
|
animate('0.2s ease-in-out', style({ height: '*' })),
|
|
46
51
|
]),
|
|
47
52
|
]),
|
|
48
|
-
], providers: [DomAdapter], styles: [":host{display:block
|
|
49
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DomAdapter }]; }, propDecorators: { clrExpandTrigger: [{
|
|
53
|
+
], providers: [DomAdapter], styles: [":host{display:block}\n"] }]
|
|
54
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DomAdapter }, { type: i0.Renderer2 }]; }, propDecorators: { clrExpandTrigger: [{
|
|
50
55
|
type: Input
|
|
51
56
|
}], expandAnimation: [{
|
|
52
57
|
type: HostBinding,
|
|
53
58
|
args: ['@expandAnimation']
|
|
59
|
+
}], animationStart: [{
|
|
60
|
+
type: HostListener,
|
|
61
|
+
args: ['@expandAnimation.start']
|
|
54
62
|
}], animationDone: [{
|
|
55
63
|
type: HostListener,
|
|
56
64
|
args: ['@expandAnimation.done']
|
|
57
65
|
}] } });
|
|
58
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
66
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5kYWJsZS1hbmltYXRpb24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyL3NyYy91dGlscy9hbmltYXRpb25zL2V4cGFuZGFibGUtYW5pbWF0aW9uL2V4cGFuZGFibGUtYW5pbWF0aW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7O0dBSUc7QUFFSCxPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDMUUsT0FBTyxFQUFFLFNBQVMsRUFBYyxXQUFXLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUVuRyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sK0JBQStCLENBQUM7OztBQXNCM0QsTUFBTSxPQUFPLHNCQUFzQjtJQUtqQyxZQUFvQixPQUFtQixFQUFVLFVBQXNCLEVBQVUsUUFBbUI7UUFBaEYsWUFBTyxHQUFQLE9BQU8sQ0FBWTtRQUFVLGVBQVUsR0FBVixVQUFVLENBQVk7UUFBVSxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBRnBHLGdCQUFXLEdBQUcsQ0FBQyxDQUFDO0lBRXVGLENBQUM7SUFFeEcsSUFDSSxlQUFlO1FBQ2pCLE9BQU8sRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLGdCQUFnQixFQUFFLE1BQU0sRUFBRSxFQUFFLFdBQVcsRUFBRSxJQUFJLENBQUMsV0FBVyxFQUFFLEVBQUUsQ0FBQztJQUNyRixDQUFDO0lBR0QsY0FBYztRQUNaLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxFQUFFLFVBQVUsRUFBRSxRQUFRLENBQUMsQ0FBQztJQUMzRSxDQUFDO0lBRUQsYUFBYTtRQUNYLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxFQUFFLFVBQVUsQ0FBQyxDQUFDO1FBRWxFLDJFQUEyRTtRQUMzRSxpSEFBaUg7UUFDakgsaUhBQWlIO1FBQ2pILElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFFRCxpQkFBaUI7UUFDZixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3JGLENBQUM7O21IQTVCVSxzQkFBc0I7dUdBQXRCLHNCQUFzQixvUkFGdEIsQ0FBQyxVQUFVLENBQUMsMEJBaEJiLDJCQUEyQixrRUFRekI7UUFDVixPQUFPLENBQUMsaUJBQWlCLEVBQUU7WUFDekIsVUFBVSxDQUFDLGdCQUFnQixFQUFFO2dCQUMzQixLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsbUJBQW1CLEVBQUUsQ0FBQztnQkFDdEMsT0FBTyxDQUFDLGtCQUFrQixFQUFFLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUFDO2FBQ3BELENBQUM7U0FDSCxDQUFDO0tBQ0g7MkZBR1Usc0JBQXNCO2tCQXBCbEMsU0FBUzsrQkFDRSwwQkFBMEIsWUFDMUIsMkJBQTJCLGNBUXpCO3dCQUNWLE9BQU8sQ0FBQyxpQkFBaUIsRUFBRTs0QkFDekIsVUFBVSxDQUFDLGdCQUFnQixFQUFFO2dDQUMzQixLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsbUJBQW1CLEVBQUUsQ0FBQztnQ0FDdEMsT0FBTyxDQUFDLGtCQUFrQixFQUFFLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUFDOzZCQUNwRCxDQUFDO3lCQUNILENBQUM7cUJBQ0gsYUFDVSxDQUFDLFVBQVUsQ0FBQztrSkFHZCxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBT0YsZUFBZTtzQkFEbEIsV0FBVzt1QkFBQyxrQkFBa0I7Z0JBTS9CLGNBQWM7c0JBRGIsWUFBWTt1QkFBQyx3QkFBd0I7Z0JBS3RDLGFBQWE7c0JBRFosWUFBWTt1QkFBQyx1QkFBdUIiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IChjKSAyMDE2LTIwMjMgVk13YXJlLCBJbmMuIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKiBUaGlzIHNvZnR3YXJlIGlzIHJlbGVhc2VkIHVuZGVyIE1JVCBsaWNlbnNlLlxuICogVGhlIGZ1bGwgbGljZW5zZSBpbmZvcm1hdGlvbiBjYW4gYmUgZm91bmQgaW4gTElDRU5TRSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBwcm9qZWN0LlxuICovXG5cbmltcG9ydCB7IGFuaW1hdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nLCBIb3N0TGlzdGVuZXIsIElucHV0LCBSZW5kZXJlcjIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgRG9tQWRhcHRlciB9IGZyb20gJy4uLy4uL2RvbS1hZGFwdGVyL2RvbS1hZGFwdGVyJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY2xyLWV4cGFuZGFibGUtYW5pbWF0aW9uJyxcbiAgdGVtcGxhdGU6IGA8bmctY29udGVudD48L25nLWNvbnRlbnQ+YCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgICAgOmhvc3Qge1xuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIH1cbiAgICBgLFxuICBdLFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcignZXhwYW5kQW5pbWF0aW9uJywgW1xuICAgICAgdHJhbnNpdGlvbigndHJ1ZSA8PT4gZmFsc2UnLCBbXG4gICAgICAgIHN0eWxlKHsgaGVpZ2h0OiAne3tzdGFydEhlaWdodH19cHgnIH0pLFxuICAgICAgICBhbmltYXRlKCcwLjJzIGVhc2UtaW4tb3V0Jywgc3R5bGUoeyBoZWlnaHQ6ICcqJyB9KSksXG4gICAgICBdKSxcbiAgICBdKSxcbiAgXSxcbiAgcHJvdmlkZXJzOiBbRG9tQWRhcHRlcl0sXG59KVxuZXhwb3J0IGNsYXNzIENsckV4cGFuZGFibGVBbmltYXRpb24ge1xuICBASW5wdXQoKSBjbHJFeHBhbmRUcmlnZ2VyOiBhbnk7XG5cbiAgc3RhcnRIZWlnaHQgPSAwO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudDogRWxlbWVudFJlZiwgcHJpdmF0ZSBkb21BZGFwdGVyOiBEb21BZGFwdGVyLCBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIpIHt9XG5cbiAgQEhvc3RCaW5kaW5nKCdAZXhwYW5kQW5pbWF0aW9uJylcbiAgZ2V0IGV4cGFuZEFuaW1hdGlvbigpIHtcbiAgICByZXR1cm4geyB2YWx1ZTogdGhpcy5jbHJFeHBhbmRUcmlnZ2VyLCBwYXJhbXM6IHsgc3RhcnRIZWlnaHQ6IHRoaXMuc3RhcnRIZWlnaHQgfSB9O1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignQGV4cGFuZEFuaW1hdGlvbi5zdGFydCcpXG4gIGFuaW1hdGlvblN0YXJ0KCkge1xuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQsICdvdmVyZmxvdycsICdoaWRkZW4nKTtcbiAgfVxuICBASG9zdExpc3RlbmVyKCdAZXhwYW5kQW5pbWF0aW9uLmRvbmUnKVxuICBhbmltYXRpb25Eb25lKCkge1xuICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlU3R5bGUodGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQsICdvdmVyZmxvdycpO1xuXG4gICAgLy8gQSBcInNhZmVcIiBhdXRvLXVwZGF0ZSBvZiB0aGUgaGVpZ2h0IGVuc3VyaW5nIGJhc2ljIE9PVEIgdXNlciBleHBlcmllbmNlIC5cbiAgICAvLyBQcm9uZSB0byBzbWFsbCBqdW1wcyBpbiBpbml0aWFsIGFuaW1hdGlvbiBoZWlnaHQgaWYgZGF0YSB3YXMgY2hhbmdlZCBpbiB0aGUgbWVhbnRpbWUsIHdpbmRvdyB3YXMgcmVzaXplZCwgZXRjLlxuICAgIC8vIEZvciBvcHRpbWFsIGJlaGF2aW9yIGNhbGwgbWFudWFsbHkgdXBkYXRlU3RhcnRIZWlnaHQoKSBmcm9tIHRoZSBwYXJlbnQgY29tcG9uZW50IGJlZm9yZSBpbml0aWF0aW5nIHRoZSB1cGRhdGUuXG4gICAgdGhpcy51cGRhdGVTdGFydEhlaWdodCgpO1xuICB9XG5cbiAgdXBkYXRlU3RhcnRIZWlnaHQoKSB7XG4gICAgdGhpcy5zdGFydEhlaWdodCA9IHRoaXMuZG9tQWRhcHRlci5jb21wdXRlZEhlaWdodCh0aGlzLmVsZW1lbnQubmF0aXZlRWxlbWVudCkgfHwgMDtcbiAgfVxufVxuIl19
|
package/fesm2015/clr-angular.mjs
CHANGED
|
@@ -2949,15 +2949,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
2949
2949
|
* The full license information can be found in LICENSE in the root directory of this project.
|
|
2950
2950
|
*/
|
|
2951
2951
|
class ClrExpandableAnimation {
|
|
2952
|
-
constructor(element, domAdapter) {
|
|
2952
|
+
constructor(element, domAdapter, renderer) {
|
|
2953
2953
|
this.element = element;
|
|
2954
2954
|
this.domAdapter = domAdapter;
|
|
2955
|
+
this.renderer = renderer;
|
|
2955
2956
|
this.startHeight = 0;
|
|
2956
2957
|
}
|
|
2957
2958
|
get expandAnimation() {
|
|
2958
2959
|
return { value: this.clrExpandTrigger, params: { startHeight: this.startHeight } };
|
|
2959
2960
|
}
|
|
2961
|
+
animationStart() {
|
|
2962
|
+
this.renderer.setStyle(this.element.nativeElement, 'overflow', 'hidden');
|
|
2963
|
+
}
|
|
2960
2964
|
animationDone() {
|
|
2965
|
+
this.renderer.removeStyle(this.element.nativeElement, 'overflow');
|
|
2961
2966
|
// A "safe" auto-update of the height ensuring basic OOTB user experience .
|
|
2962
2967
|
// Prone to small jumps in initial animation height if data was changed in the meantime, window was resized, etc.
|
|
2963
2968
|
// For optimal behavior call manually updateStartHeight() from the parent component before initiating the update.
|
|
@@ -2967,8 +2972,8 @@ class ClrExpandableAnimation {
|
|
|
2967
2972
|
this.startHeight = this.domAdapter.computedHeight(this.element.nativeElement) || 0;
|
|
2968
2973
|
}
|
|
2969
2974
|
}
|
|
2970
|
-
ClrExpandableAnimation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrExpandableAnimation, deps: [{ token: i0.ElementRef }, { token: DomAdapter }], target: i0.ɵɵFactoryTarget.Component });
|
|
2971
|
-
ClrExpandableAnimation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: { clrExpandTrigger: "clrExpandTrigger" }, host: { listeners: { "@expandAnimation.done": "animationDone()" }, properties: { "@expandAnimation": "this.expandAnimation" } }, providers: [DomAdapter], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block
|
|
2975
|
+
ClrExpandableAnimation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrExpandableAnimation, deps: [{ token: i0.ElementRef }, { token: DomAdapter }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
2976
|
+
ClrExpandableAnimation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: { clrExpandTrigger: "clrExpandTrigger" }, host: { listeners: { "@expandAnimation.start": "animationStart()", "@expandAnimation.done": "animationDone()" }, properties: { "@expandAnimation": "this.expandAnimation" } }, providers: [DomAdapter], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block}\n"], animations: [
|
|
2972
2977
|
trigger('expandAnimation', [
|
|
2973
2978
|
transition('true <=> false', [
|
|
2974
2979
|
style({ height: '{{startHeight}}px' }),
|
|
@@ -2985,12 +2990,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
2985
2990
|
animate('0.2s ease-in-out', style({ height: '*' })),
|
|
2986
2991
|
]),
|
|
2987
2992
|
]),
|
|
2988
|
-
], providers: [DomAdapter], styles: [":host{display:block
|
|
2989
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DomAdapter }]; }, propDecorators: { clrExpandTrigger: [{
|
|
2993
|
+
], providers: [DomAdapter], styles: [":host{display:block}\n"] }]
|
|
2994
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DomAdapter }, { type: i0.Renderer2 }]; }, propDecorators: { clrExpandTrigger: [{
|
|
2990
2995
|
type: Input
|
|
2991
2996
|
}], expandAnimation: [{
|
|
2992
2997
|
type: HostBinding,
|
|
2993
2998
|
args: ['@expandAnimation']
|
|
2999
|
+
}], animationStart: [{
|
|
3000
|
+
type: HostListener,
|
|
3001
|
+
args: ['@expandAnimation.start']
|
|
2994
3002
|
}], animationDone: [{
|
|
2995
3003
|
type: HostListener,
|
|
2996
3004
|
args: ['@expandAnimation.done']
|