@spicainternational/ngx-sds-components 7.5.0 → 7.6.0
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/esm2020/src/lib/drawer/drawer.component.mjs +39 -3
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-drawer.mjs +38 -2
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-drawer.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-drawer.mjs +38 -2
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-drawer.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/drawer/drawer.component.d.ts +9 -1
|
@@ -3,6 +3,10 @@ import * as i0 from "@angular/core";
|
|
|
3
3
|
export class SdsDrawerComponent {
|
|
4
4
|
constructor() {
|
|
5
5
|
this.isOpen = false;
|
|
6
|
+
this.showShadow = true;
|
|
7
|
+
this.backgroundColor = 'white';
|
|
8
|
+
this.transitionTimingFunction = 'ease-in-out';
|
|
9
|
+
this.transitionDuration = '0.3s';
|
|
6
10
|
this.width = '10rem';
|
|
7
11
|
this.position = 'end';
|
|
8
12
|
this.drawerClass = true;
|
|
@@ -25,14 +29,34 @@ export class SdsDrawerComponent {
|
|
|
25
29
|
get drawerWidth() {
|
|
26
30
|
return this.width;
|
|
27
31
|
}
|
|
32
|
+
get drawerShowShadow() {
|
|
33
|
+
return this.showShadow;
|
|
34
|
+
}
|
|
35
|
+
get drawerBackgroundColor() {
|
|
36
|
+
return this.backgroundColor;
|
|
37
|
+
}
|
|
38
|
+
get drawerTransitionTimingFunction() {
|
|
39
|
+
return this.transitionTimingFunction;
|
|
40
|
+
}
|
|
41
|
+
get drawerTransitionDuration() {
|
|
42
|
+
return this.transitionDuration;
|
|
43
|
+
}
|
|
28
44
|
}
|
|
29
45
|
SdsDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
30
|
-
SdsDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsDrawerComponent, selector: "sds-drawer", inputs: { isOpen: "isOpen", width: "width", position: "position" }, host: { properties: { "class.sds-drawer": "this.drawerClass", "class.sds-drawer-end": "this.drawerEnd", "class.sds-drawer-start": "this.drawerStart", "class.sds-drawer-top": "this.drawerTop", "class.sds-drawer-bottom": "this.drawerBottom", "class.show": "this.show", "style.width": "this.drawerWidth" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{position:fixed;bottom:0;z-index:1040;display:flex;flex-direction:column;max-width:100%;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}:host(.sds-drawer-start){top:0;left:0;width:400px;border-right:1px solid var(--bs-gray-400);transform:translate(-100%)}:host(.sds-drawer-end){top:0;right:0;width:400px;border-left:1px solid var(--bs-gray-400);transform:translate(100%)}:host(.sds-drawer-top){top:0;right:0;left:0;height:400px;max-height:100%;border-bottom:1px solid var(--bs-gray-400);transform:translateY(-100%)}:host(.sds-drawer-bottom){right:0;left:0;height:400px;max-height:100%;border-top:1px solid var(--bs-gray-400);transform:translateY(100%)}:host(.show){transform:none
|
|
46
|
+
SdsDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsDrawerComponent, selector: "sds-drawer", inputs: { isOpen: "isOpen", showShadow: "showShadow", backgroundColor: "backgroundColor", transitionTimingFunction: "transitionTimingFunction", transitionDuration: "transitionDuration", width: "width", position: "position" }, host: { properties: { "class.sds-drawer": "this.drawerClass", "class.sds-drawer-end": "this.drawerEnd", "class.sds-drawer-start": "this.drawerStart", "class.sds-drawer-top": "this.drawerTop", "class.sds-drawer-bottom": "this.drawerBottom", "class.show": "this.show", "style.width": "this.drawerWidth", "class.show-shadow": "this.drawerShowShadow", "style.background-color": "this.drawerBackgroundColor", "style.transition-timing-function": "this.drawerTransitionTimingFunction", "style.transition-duration": "this.drawerTransitionDuration" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{position:fixed;bottom:0;z-index:1040;display:flex;flex-direction:column;max-width:100%;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}:host(.sds-drawer-start){top:0;left:0;width:400px;border-right:1px solid var(--bs-gray-400);transform:translate(-100%)}:host(.sds-drawer-end){top:0;right:0;width:400px;border-left:1px solid var(--bs-gray-400);transform:translate(100%)}:host(.sds-drawer-top){top:0;right:0;left:0;height:400px;max-height:100%;border-bottom:1px solid var(--bs-gray-400);transform:translateY(-100%)}:host(.sds-drawer-bottom){right:0;left:0;height:400px;max-height:100%;border-top:1px solid var(--bs-gray-400);transform:translateY(100%)}:host(.show){transform:none}:host(.show).show-shadow{box-shadow:var(--bs-box-shadow)!important}\n"] });
|
|
31
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDrawerComponent, decorators: [{
|
|
32
48
|
type: Component,
|
|
33
|
-
args: [{ selector: 'sds-drawer', template: "<ng-content></ng-content>\r\n", styles: [":host{position:fixed;bottom:0;z-index:1040;display:flex;flex-direction:column;max-width:100%;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}:host(.sds-drawer-start){top:0;left:0;width:400px;border-right:1px solid var(--bs-gray-400);transform:translate(-100%)}:host(.sds-drawer-end){top:0;right:0;width:400px;border-left:1px solid var(--bs-gray-400);transform:translate(100%)}:host(.sds-drawer-top){top:0;right:0;left:0;height:400px;max-height:100%;border-bottom:1px solid var(--bs-gray-400);transform:translateY(-100%)}:host(.sds-drawer-bottom){right:0;left:0;height:400px;max-height:100%;border-top:1px solid var(--bs-gray-400);transform:translateY(100%)}:host(.show){transform:none
|
|
49
|
+
args: [{ selector: 'sds-drawer', template: "<ng-content></ng-content>\r\n", styles: [":host{position:fixed;bottom:0;z-index:1040;display:flex;flex-direction:column;max-width:100%;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}:host(.sds-drawer-start){top:0;left:0;width:400px;border-right:1px solid var(--bs-gray-400);transform:translate(-100%)}:host(.sds-drawer-end){top:0;right:0;width:400px;border-left:1px solid var(--bs-gray-400);transform:translate(100%)}:host(.sds-drawer-top){top:0;right:0;left:0;height:400px;max-height:100%;border-bottom:1px solid var(--bs-gray-400);transform:translateY(-100%)}:host(.sds-drawer-bottom){right:0;left:0;height:400px;max-height:100%;border-top:1px solid var(--bs-gray-400);transform:translateY(100%)}:host(.show){transform:none}:host(.show).show-shadow{box-shadow:var(--bs-box-shadow)!important}\n"] }]
|
|
34
50
|
}], propDecorators: { isOpen: [{
|
|
35
51
|
type: Input
|
|
52
|
+
}], showShadow: [{
|
|
53
|
+
type: Input
|
|
54
|
+
}], backgroundColor: [{
|
|
55
|
+
type: Input
|
|
56
|
+
}], transitionTimingFunction: [{
|
|
57
|
+
type: Input
|
|
58
|
+
}], transitionDuration: [{
|
|
59
|
+
type: Input
|
|
36
60
|
}], width: [{
|
|
37
61
|
type: Input
|
|
38
62
|
}], position: [{
|
|
@@ -58,5 +82,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
58
82
|
}], drawerWidth: [{
|
|
59
83
|
type: HostBinding,
|
|
60
84
|
args: ['style.width']
|
|
85
|
+
}], drawerShowShadow: [{
|
|
86
|
+
type: HostBinding,
|
|
87
|
+
args: ['class.show-shadow']
|
|
88
|
+
}], drawerBackgroundColor: [{
|
|
89
|
+
type: HostBinding,
|
|
90
|
+
args: ['style.background-color']
|
|
91
|
+
}], drawerTransitionTimingFunction: [{
|
|
92
|
+
type: HostBinding,
|
|
93
|
+
args: ['style.transition-timing-function']
|
|
94
|
+
}], drawerTransitionDuration: [{
|
|
95
|
+
type: HostBinding,
|
|
96
|
+
args: ['style.transition-duration']
|
|
61
97
|
}] } });
|
|
62
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
98
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhd2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2RyYXdlci9kcmF3ZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZHJhd2VyL2RyYXdlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsU0FBUyxFQUVULFdBQVcsRUFDWCxLQUFLLEdBRVIsTUFBTSxlQUFlLENBQUM7O0FBT3ZCLE1BQU0sT0FBTyxrQkFBa0I7SUFML0I7UUFNYSxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ2YsZUFBVSxHQUFHLElBQUksQ0FBQztRQUNsQixvQkFBZSxHQUFHLE9BQU8sQ0FBQztRQUMxQiw2QkFBd0IsR0FBRyxhQUFhLENBQUM7UUFDekMsdUJBQWtCLEdBQUcsTUFBTSxDQUFDO1FBRTVCLFVBQUssR0FBRyxPQUFPLENBQUM7UUFDaEIsYUFBUSxHQUF1QyxLQUFLLENBQUM7UUFFN0IsZ0JBQVcsR0FBRyxJQUFJLENBQUM7S0FpQ3ZEO0lBaENHLElBQXlDLFNBQVM7UUFDOUMsT0FBTyxJQUFJLENBQUMsUUFBUSxLQUFLLEtBQUssQ0FBQztJQUNuQyxDQUFDO0lBQ0QsSUFBMkMsV0FBVztRQUNsRCxPQUFPLElBQUksQ0FBQyxRQUFRLEtBQUssT0FBTyxDQUFDO0lBQ3JDLENBQUM7SUFDRCxJQUF5QyxTQUFTO1FBQzlDLE9BQU8sSUFBSSxDQUFDLFFBQVEsS0FBSyxLQUFLLENBQUM7SUFDbkMsQ0FBQztJQUNELElBQTRDLFlBQVk7UUFDcEQsT0FBTyxJQUFJLENBQUMsUUFBUSxLQUFLLFFBQVEsQ0FBQztJQUN0QyxDQUFDO0lBQ0QsSUFBK0IsSUFBSTtRQUMvQixPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDdkIsQ0FBQztJQUNELElBQWdDLFdBQVc7UUFDdkMsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3RCLENBQUM7SUFDRCxJQUFzQyxnQkFBZ0I7UUFDbEQsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDO0lBQzNCLENBQUM7SUFDRCxJQUEyQyxxQkFBcUI7UUFDNUQsT0FBTyxJQUFJLENBQUMsZUFBZSxDQUFDO0lBQ2hDLENBQUM7SUFDRCxJQUFxRCw4QkFBOEI7UUFDL0UsT0FBTyxJQUFJLENBQUMsd0JBQXdCLENBQUM7SUFDekMsQ0FBQztJQUNELElBQThDLHdCQUF3QjtRQUNsRSxPQUFPLElBQUksQ0FBQyxrQkFBa0IsQ0FBQztJQUNuQyxDQUFDOztnSEF4Q1Esa0JBQWtCO29HQUFsQixrQkFBa0IscXpCQ2IvQiwrQkFDQTs0RkRZYSxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0ksWUFBWTs4QkFLYixNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLO2dCQUNHLHdCQUF3QjtzQkFBaEMsS0FBSztnQkFDRyxrQkFBa0I7c0JBQTFCLEtBQUs7Z0JBRUcsS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBRTJCLFdBQVc7c0JBQTNDLFdBQVc7dUJBQUMsa0JBQWtCO2dCQUNVLFNBQVM7c0JBQWpELFdBQVc7dUJBQUMsc0JBQXNCO2dCQUdRLFdBQVc7c0JBQXJELFdBQVc7dUJBQUMsd0JBQXdCO2dCQUdJLFNBQVM7c0JBQWpELFdBQVc7dUJBQUMsc0JBQXNCO2dCQUdTLFlBQVk7c0JBQXZELFdBQVc7dUJBQUMseUJBQXlCO2dCQUdQLElBQUk7c0JBQWxDLFdBQVc7dUJBQUMsWUFBWTtnQkFHTyxXQUFXO3NCQUExQyxXQUFXO3VCQUFDLGFBQWE7Z0JBR1ksZ0JBQWdCO3NCQUFyRCxXQUFXO3VCQUFDLG1CQUFtQjtnQkFHVyxxQkFBcUI7c0JBQS9ELFdBQVc7dUJBQUMsd0JBQXdCO2dCQUdnQiw4QkFBOEI7c0JBQWxGLFdBQVc7dUJBQUMsa0NBQWtDO2dCQUdELHdCQUF3QjtzQkFBckUsV0FBVzt1QkFBQywyQkFBMkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gICAgQ29tcG9uZW50LFxyXG4gICAgRXZlbnRFbWl0dGVyLFxyXG4gICAgSG9zdEJpbmRpbmcsXHJcbiAgICBJbnB1dCxcclxuICAgIE91dHB1dCxcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICdzZHMtZHJhd2VyJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9kcmF3ZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vZHJhd2VyLmNvbXBvbmVudC5zY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTZHNEcmF3ZXJDb21wb25lbnQge1xyXG4gICAgQElucHV0KCkgaXNPcGVuID0gZmFsc2U7XHJcbiAgICBASW5wdXQoKSBzaG93U2hhZG93ID0gdHJ1ZTtcclxuICAgIEBJbnB1dCgpIGJhY2tncm91bmRDb2xvciA9ICd3aGl0ZSc7XHJcbiAgICBASW5wdXQoKSB0cmFuc2l0aW9uVGltaW5nRnVuY3Rpb24gPSAnZWFzZS1pbi1vdXQnO1xyXG4gICAgQElucHV0KCkgdHJhbnNpdGlvbkR1cmF0aW9uID0gJzAuM3MnO1xyXG5cclxuICAgIEBJbnB1dCgpIHdpZHRoID0gJzEwcmVtJztcclxuICAgIEBJbnB1dCgpIHBvc2l0aW9uOiAnc3RhcnQnIHwgJ2VuZCcgfCAndG9wJyB8ICdib3R0b20nID0gJ2VuZCc7XHJcblxyXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5zZHMtZHJhd2VyJykgZHJhd2VyQ2xhc3MgPSB0cnVlO1xyXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5zZHMtZHJhd2VyLWVuZCcpIGdldCBkcmF3ZXJFbmQoKSB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMucG9zaXRpb24gPT09ICdlbmQnO1xyXG4gICAgfVxyXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5zZHMtZHJhd2VyLXN0YXJ0JykgZ2V0IGRyYXdlclN0YXJ0KCkge1xyXG4gICAgICAgIHJldHVybiB0aGlzLnBvc2l0aW9uID09PSAnc3RhcnQnO1xyXG4gICAgfVxyXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5zZHMtZHJhd2VyLXRvcCcpIGdldCBkcmF3ZXJUb3AoKSB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMucG9zaXRpb24gPT09ICd0b3AnO1xyXG4gICAgfVxyXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5zZHMtZHJhd2VyLWJvdHRvbScpIGdldCBkcmF3ZXJCb3R0b20oKSB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMucG9zaXRpb24gPT09ICdib3R0b20nO1xyXG4gICAgfVxyXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5zaG93JykgZ2V0IHNob3coKSB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuaXNPcGVuO1xyXG4gICAgfVxyXG4gICAgQEhvc3RCaW5kaW5nKCdzdHlsZS53aWR0aCcpIGdldCBkcmF3ZXJXaWR0aCgpIHtcclxuICAgICAgICByZXR1cm4gdGhpcy53aWR0aDtcclxuICAgIH1cclxuICAgIEBIb3N0QmluZGluZygnY2xhc3Muc2hvdy1zaGFkb3cnKSBnZXQgZHJhd2VyU2hvd1NoYWRvdygpIHtcclxuICAgICAgICByZXR1cm4gdGhpcy5zaG93U2hhZG93O1xyXG4gICAgfVxyXG4gICAgQEhvc3RCaW5kaW5nKCdzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yJykgZ2V0IGRyYXdlckJhY2tncm91bmRDb2xvcigpIHtcclxuICAgICAgICByZXR1cm4gdGhpcy5iYWNrZ3JvdW5kQ29sb3I7XHJcbiAgICB9XHJcbiAgICBASG9zdEJpbmRpbmcoJ3N0eWxlLnRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uJykgZ2V0IGRyYXdlclRyYW5zaXRpb25UaW1pbmdGdW5jdGlvbigpIHtcclxuICAgICAgICByZXR1cm4gdGhpcy50cmFuc2l0aW9uVGltaW5nRnVuY3Rpb247XHJcbiAgICB9XHJcbiAgICBASG9zdEJpbmRpbmcoJ3N0eWxlLnRyYW5zaXRpb24tZHVyYXRpb24nKSBnZXQgZHJhd2VyVHJhbnNpdGlvbkR1cmF0aW9uKCkge1xyXG4gICAgICAgIHJldHVybiB0aGlzLnRyYW5zaXRpb25EdXJhdGlvbjtcclxuICAgIH1cclxuXHJcblxyXG59XHJcbiIsIjxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuIl19
|
|
@@ -5,6 +5,10 @@ import { CommonModule } from '@angular/common';
|
|
|
5
5
|
class SdsDrawerComponent {
|
|
6
6
|
constructor() {
|
|
7
7
|
this.isOpen = false;
|
|
8
|
+
this.showShadow = true;
|
|
9
|
+
this.backgroundColor = 'white';
|
|
10
|
+
this.transitionTimingFunction = 'ease-in-out';
|
|
11
|
+
this.transitionDuration = '0.3s';
|
|
8
12
|
this.width = '10rem';
|
|
9
13
|
this.position = 'end';
|
|
10
14
|
this.drawerClass = true;
|
|
@@ -27,14 +31,34 @@ class SdsDrawerComponent {
|
|
|
27
31
|
get drawerWidth() {
|
|
28
32
|
return this.width;
|
|
29
33
|
}
|
|
34
|
+
get drawerShowShadow() {
|
|
35
|
+
return this.showShadow;
|
|
36
|
+
}
|
|
37
|
+
get drawerBackgroundColor() {
|
|
38
|
+
return this.backgroundColor;
|
|
39
|
+
}
|
|
40
|
+
get drawerTransitionTimingFunction() {
|
|
41
|
+
return this.transitionTimingFunction;
|
|
42
|
+
}
|
|
43
|
+
get drawerTransitionDuration() {
|
|
44
|
+
return this.transitionDuration;
|
|
45
|
+
}
|
|
30
46
|
}
|
|
31
47
|
SdsDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
-
SdsDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsDrawerComponent, selector: "sds-drawer", inputs: { isOpen: "isOpen", width: "width", position: "position" }, host: { properties: { "class.sds-drawer": "this.drawerClass", "class.sds-drawer-end": "this.drawerEnd", "class.sds-drawer-start": "this.drawerStart", "class.sds-drawer-top": "this.drawerTop", "class.sds-drawer-bottom": "this.drawerBottom", "class.show": "this.show", "style.width": "this.drawerWidth" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{position:fixed;bottom:0;z-index:1040;display:flex;flex-direction:column;max-width:100%;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}:host(.sds-drawer-start){top:0;left:0;width:400px;border-right:1px solid var(--bs-gray-400);transform:translate(-100%)}:host(.sds-drawer-end){top:0;right:0;width:400px;border-left:1px solid var(--bs-gray-400);transform:translate(100%)}:host(.sds-drawer-top){top:0;right:0;left:0;height:400px;max-height:100%;border-bottom:1px solid var(--bs-gray-400);transform:translateY(-100%)}:host(.sds-drawer-bottom){right:0;left:0;height:400px;max-height:100%;border-top:1px solid var(--bs-gray-400);transform:translateY(100%)}:host(.show){transform:none
|
|
48
|
+
SdsDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsDrawerComponent, selector: "sds-drawer", inputs: { isOpen: "isOpen", showShadow: "showShadow", backgroundColor: "backgroundColor", transitionTimingFunction: "transitionTimingFunction", transitionDuration: "transitionDuration", width: "width", position: "position" }, host: { properties: { "class.sds-drawer": "this.drawerClass", "class.sds-drawer-end": "this.drawerEnd", "class.sds-drawer-start": "this.drawerStart", "class.sds-drawer-top": "this.drawerTop", "class.sds-drawer-bottom": "this.drawerBottom", "class.show": "this.show", "style.width": "this.drawerWidth", "class.show-shadow": "this.drawerShowShadow", "style.background-color": "this.drawerBackgroundColor", "style.transition-timing-function": "this.drawerTransitionTimingFunction", "style.transition-duration": "this.drawerTransitionDuration" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{position:fixed;bottom:0;z-index:1040;display:flex;flex-direction:column;max-width:100%;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}:host(.sds-drawer-start){top:0;left:0;width:400px;border-right:1px solid var(--bs-gray-400);transform:translate(-100%)}:host(.sds-drawer-end){top:0;right:0;width:400px;border-left:1px solid var(--bs-gray-400);transform:translate(100%)}:host(.sds-drawer-top){top:0;right:0;left:0;height:400px;max-height:100%;border-bottom:1px solid var(--bs-gray-400);transform:translateY(-100%)}:host(.sds-drawer-bottom){right:0;left:0;height:400px;max-height:100%;border-top:1px solid var(--bs-gray-400);transform:translateY(100%)}:host(.show){transform:none}:host(.show).show-shadow{box-shadow:var(--bs-box-shadow)!important}\n"] });
|
|
33
49
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDrawerComponent, decorators: [{
|
|
34
50
|
type: Component,
|
|
35
|
-
args: [{ selector: 'sds-drawer', template: "<ng-content></ng-content>\r\n", styles: [":host{position:fixed;bottom:0;z-index:1040;display:flex;flex-direction:column;max-width:100%;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}:host(.sds-drawer-start){top:0;left:0;width:400px;border-right:1px solid var(--bs-gray-400);transform:translate(-100%)}:host(.sds-drawer-end){top:0;right:0;width:400px;border-left:1px solid var(--bs-gray-400);transform:translate(100%)}:host(.sds-drawer-top){top:0;right:0;left:0;height:400px;max-height:100%;border-bottom:1px solid var(--bs-gray-400);transform:translateY(-100%)}:host(.sds-drawer-bottom){right:0;left:0;height:400px;max-height:100%;border-top:1px solid var(--bs-gray-400);transform:translateY(100%)}:host(.show){transform:none
|
|
51
|
+
args: [{ selector: 'sds-drawer', template: "<ng-content></ng-content>\r\n", styles: [":host{position:fixed;bottom:0;z-index:1040;display:flex;flex-direction:column;max-width:100%;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}:host(.sds-drawer-start){top:0;left:0;width:400px;border-right:1px solid var(--bs-gray-400);transform:translate(-100%)}:host(.sds-drawer-end){top:0;right:0;width:400px;border-left:1px solid var(--bs-gray-400);transform:translate(100%)}:host(.sds-drawer-top){top:0;right:0;left:0;height:400px;max-height:100%;border-bottom:1px solid var(--bs-gray-400);transform:translateY(-100%)}:host(.sds-drawer-bottom){right:0;left:0;height:400px;max-height:100%;border-top:1px solid var(--bs-gray-400);transform:translateY(100%)}:host(.show){transform:none}:host(.show).show-shadow{box-shadow:var(--bs-box-shadow)!important}\n"] }]
|
|
36
52
|
}], propDecorators: { isOpen: [{
|
|
37
53
|
type: Input
|
|
54
|
+
}], showShadow: [{
|
|
55
|
+
type: Input
|
|
56
|
+
}], backgroundColor: [{
|
|
57
|
+
type: Input
|
|
58
|
+
}], transitionTimingFunction: [{
|
|
59
|
+
type: Input
|
|
60
|
+
}], transitionDuration: [{
|
|
61
|
+
type: Input
|
|
38
62
|
}], width: [{
|
|
39
63
|
type: Input
|
|
40
64
|
}], position: [{
|
|
@@ -60,6 +84,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
60
84
|
}], drawerWidth: [{
|
|
61
85
|
type: HostBinding,
|
|
62
86
|
args: ['style.width']
|
|
87
|
+
}], drawerShowShadow: [{
|
|
88
|
+
type: HostBinding,
|
|
89
|
+
args: ['class.show-shadow']
|
|
90
|
+
}], drawerBackgroundColor: [{
|
|
91
|
+
type: HostBinding,
|
|
92
|
+
args: ['style.background-color']
|
|
93
|
+
}], drawerTransitionTimingFunction: [{
|
|
94
|
+
type: HostBinding,
|
|
95
|
+
args: ['style.transition-timing-function']
|
|
96
|
+
}], drawerTransitionDuration: [{
|
|
97
|
+
type: HostBinding,
|
|
98
|
+
args: ['style.transition-duration']
|
|
63
99
|
}] } });
|
|
64
100
|
|
|
65
101
|
class SdsDrawerModule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-drawer.mjs","sources":["../../../projects/ngx-sds-components/src/lib/drawer/drawer.component.ts","../../../projects/ngx-sds-components/src/lib/drawer/drawer.component.html","../../../projects/ngx-sds-components/src/lib/drawer/drawer.module.ts","../../../projects/ngx-sds-components/src/lib/drawer/spicainternational-ngx-sds-components-src-lib-drawer.ts"],"sourcesContent":["import {\r\n Component,\r\n EventEmitter,\r\n HostBinding,\r\n Input,\r\n Output,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sds-drawer',\r\n templateUrl: './drawer.component.html',\r\n styleUrls: ['./drawer.component.scss'],\r\n})\r\nexport class SdsDrawerComponent {\r\n @Input() isOpen = false;\r\n\r\n @Input() width = '10rem';\r\n @Input() position: 'start' | 'end' | 'top' | 'bottom' = 'end';\r\n\r\n @HostBinding('class.sds-drawer') drawerClass = true;\r\n @HostBinding('class.sds-drawer-end') get drawerEnd() {\r\n return this.position === 'end';\r\n }\r\n @HostBinding('class.sds-drawer-start') get drawerStart() {\r\n return this.position === 'start';\r\n }\r\n @HostBinding('class.sds-drawer-top') get drawerTop() {\r\n return this.position === 'top';\r\n }\r\n @HostBinding('class.sds-drawer-bottom') get drawerBottom() {\r\n return this.position === 'bottom';\r\n }\r\n @HostBinding('class.show') get show() {\r\n return this.isOpen;\r\n }\r\n @HostBinding('style.width') get drawerWidth() {\r\n return this.width;\r\n }\r\n}\r\n","<ng-content></ng-content>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsDrawerComponent } from './drawer.component';\r\n\r\n@NgModule({\r\n declarations: [SdsDrawerComponent],\r\n imports: [CommonModule],\r\n exports: [SdsDrawerComponent],\r\n})\r\nexport class SdsDrawerModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAaa,kBAAkB,CAAA;AAL/B,IAAA,WAAA,GAAA;AAMa,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-drawer.mjs","sources":["../../../projects/ngx-sds-components/src/lib/drawer/drawer.component.ts","../../../projects/ngx-sds-components/src/lib/drawer/drawer.component.html","../../../projects/ngx-sds-components/src/lib/drawer/drawer.module.ts","../../../projects/ngx-sds-components/src/lib/drawer/spicainternational-ngx-sds-components-src-lib-drawer.ts"],"sourcesContent":["import {\r\n Component,\r\n EventEmitter,\r\n HostBinding,\r\n Input,\r\n Output,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sds-drawer',\r\n templateUrl: './drawer.component.html',\r\n styleUrls: ['./drawer.component.scss'],\r\n})\r\nexport class SdsDrawerComponent {\r\n @Input() isOpen = false;\r\n @Input() showShadow = true;\r\n @Input() backgroundColor = 'white';\r\n @Input() transitionTimingFunction = 'ease-in-out';\r\n @Input() transitionDuration = '0.3s';\r\n\r\n @Input() width = '10rem';\r\n @Input() position: 'start' | 'end' | 'top' | 'bottom' = 'end';\r\n\r\n @HostBinding('class.sds-drawer') drawerClass = true;\r\n @HostBinding('class.sds-drawer-end') get drawerEnd() {\r\n return this.position === 'end';\r\n }\r\n @HostBinding('class.sds-drawer-start') get drawerStart() {\r\n return this.position === 'start';\r\n }\r\n @HostBinding('class.sds-drawer-top') get drawerTop() {\r\n return this.position === 'top';\r\n }\r\n @HostBinding('class.sds-drawer-bottom') get drawerBottom() {\r\n return this.position === 'bottom';\r\n }\r\n @HostBinding('class.show') get show() {\r\n return this.isOpen;\r\n }\r\n @HostBinding('style.width') get drawerWidth() {\r\n return this.width;\r\n }\r\n @HostBinding('class.show-shadow') get drawerShowShadow() {\r\n return this.showShadow;\r\n }\r\n @HostBinding('style.background-color') get drawerBackgroundColor() {\r\n return this.backgroundColor;\r\n }\r\n @HostBinding('style.transition-timing-function') get drawerTransitionTimingFunction() {\r\n return this.transitionTimingFunction;\r\n }\r\n @HostBinding('style.transition-duration') get drawerTransitionDuration() {\r\n return this.transitionDuration;\r\n }\r\n\r\n\r\n}\r\n","<ng-content></ng-content>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsDrawerComponent } from './drawer.component';\r\n\r\n@NgModule({\r\n declarations: [SdsDrawerComponent],\r\n imports: [CommonModule],\r\n exports: [SdsDrawerComponent],\r\n})\r\nexport class SdsDrawerModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -5,6 +5,10 @@ import { CommonModule } from '@angular/common';
|
|
|
5
5
|
class SdsDrawerComponent {
|
|
6
6
|
constructor() {
|
|
7
7
|
this.isOpen = false;
|
|
8
|
+
this.showShadow = true;
|
|
9
|
+
this.backgroundColor = 'white';
|
|
10
|
+
this.transitionTimingFunction = 'ease-in-out';
|
|
11
|
+
this.transitionDuration = '0.3s';
|
|
8
12
|
this.width = '10rem';
|
|
9
13
|
this.position = 'end';
|
|
10
14
|
this.drawerClass = true;
|
|
@@ -27,14 +31,34 @@ class SdsDrawerComponent {
|
|
|
27
31
|
get drawerWidth() {
|
|
28
32
|
return this.width;
|
|
29
33
|
}
|
|
34
|
+
get drawerShowShadow() {
|
|
35
|
+
return this.showShadow;
|
|
36
|
+
}
|
|
37
|
+
get drawerBackgroundColor() {
|
|
38
|
+
return this.backgroundColor;
|
|
39
|
+
}
|
|
40
|
+
get drawerTransitionTimingFunction() {
|
|
41
|
+
return this.transitionTimingFunction;
|
|
42
|
+
}
|
|
43
|
+
get drawerTransitionDuration() {
|
|
44
|
+
return this.transitionDuration;
|
|
45
|
+
}
|
|
30
46
|
}
|
|
31
47
|
SdsDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
-
SdsDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsDrawerComponent, selector: "sds-drawer", inputs: { isOpen: "isOpen", width: "width", position: "position" }, host: { properties: { "class.sds-drawer": "this.drawerClass", "class.sds-drawer-end": "this.drawerEnd", "class.sds-drawer-start": "this.drawerStart", "class.sds-drawer-top": "this.drawerTop", "class.sds-drawer-bottom": "this.drawerBottom", "class.show": "this.show", "style.width": "this.drawerWidth" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{position:fixed;bottom:0;z-index:1040;display:flex;flex-direction:column;max-width:100%;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}:host(.sds-drawer-start){top:0;left:0;width:400px;border-right:1px solid var(--bs-gray-400);transform:translate(-100%)}:host(.sds-drawer-end){top:0;right:0;width:400px;border-left:1px solid var(--bs-gray-400);transform:translate(100%)}:host(.sds-drawer-top){top:0;right:0;left:0;height:400px;max-height:100%;border-bottom:1px solid var(--bs-gray-400);transform:translateY(-100%)}:host(.sds-drawer-bottom){right:0;left:0;height:400px;max-height:100%;border-top:1px solid var(--bs-gray-400);transform:translateY(100%)}:host(.show){transform:none
|
|
48
|
+
SdsDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsDrawerComponent, selector: "sds-drawer", inputs: { isOpen: "isOpen", showShadow: "showShadow", backgroundColor: "backgroundColor", transitionTimingFunction: "transitionTimingFunction", transitionDuration: "transitionDuration", width: "width", position: "position" }, host: { properties: { "class.sds-drawer": "this.drawerClass", "class.sds-drawer-end": "this.drawerEnd", "class.sds-drawer-start": "this.drawerStart", "class.sds-drawer-top": "this.drawerTop", "class.sds-drawer-bottom": "this.drawerBottom", "class.show": "this.show", "style.width": "this.drawerWidth", "class.show-shadow": "this.drawerShowShadow", "style.background-color": "this.drawerBackgroundColor", "style.transition-timing-function": "this.drawerTransitionTimingFunction", "style.transition-duration": "this.drawerTransitionDuration" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{position:fixed;bottom:0;z-index:1040;display:flex;flex-direction:column;max-width:100%;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}:host(.sds-drawer-start){top:0;left:0;width:400px;border-right:1px solid var(--bs-gray-400);transform:translate(-100%)}:host(.sds-drawer-end){top:0;right:0;width:400px;border-left:1px solid var(--bs-gray-400);transform:translate(100%)}:host(.sds-drawer-top){top:0;right:0;left:0;height:400px;max-height:100%;border-bottom:1px solid var(--bs-gray-400);transform:translateY(-100%)}:host(.sds-drawer-bottom){right:0;left:0;height:400px;max-height:100%;border-top:1px solid var(--bs-gray-400);transform:translateY(100%)}:host(.show){transform:none}:host(.show).show-shadow{box-shadow:var(--bs-box-shadow)!important}\n"] });
|
|
33
49
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDrawerComponent, decorators: [{
|
|
34
50
|
type: Component,
|
|
35
|
-
args: [{ selector: 'sds-drawer', template: "<ng-content></ng-content>\r\n", styles: [":host{position:fixed;bottom:0;z-index:1040;display:flex;flex-direction:column;max-width:100%;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}:host(.sds-drawer-start){top:0;left:0;width:400px;border-right:1px solid var(--bs-gray-400);transform:translate(-100%)}:host(.sds-drawer-end){top:0;right:0;width:400px;border-left:1px solid var(--bs-gray-400);transform:translate(100%)}:host(.sds-drawer-top){top:0;right:0;left:0;height:400px;max-height:100%;border-bottom:1px solid var(--bs-gray-400);transform:translateY(-100%)}:host(.sds-drawer-bottom){right:0;left:0;height:400px;max-height:100%;border-top:1px solid var(--bs-gray-400);transform:translateY(100%)}:host(.show){transform:none
|
|
51
|
+
args: [{ selector: 'sds-drawer', template: "<ng-content></ng-content>\r\n", styles: [":host{position:fixed;bottom:0;z-index:1040;display:flex;flex-direction:column;max-width:100%;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}:host(.sds-drawer-start){top:0;left:0;width:400px;border-right:1px solid var(--bs-gray-400);transform:translate(-100%)}:host(.sds-drawer-end){top:0;right:0;width:400px;border-left:1px solid var(--bs-gray-400);transform:translate(100%)}:host(.sds-drawer-top){top:0;right:0;left:0;height:400px;max-height:100%;border-bottom:1px solid var(--bs-gray-400);transform:translateY(-100%)}:host(.sds-drawer-bottom){right:0;left:0;height:400px;max-height:100%;border-top:1px solid var(--bs-gray-400);transform:translateY(100%)}:host(.show){transform:none}:host(.show).show-shadow{box-shadow:var(--bs-box-shadow)!important}\n"] }]
|
|
36
52
|
}], propDecorators: { isOpen: [{
|
|
37
53
|
type: Input
|
|
54
|
+
}], showShadow: [{
|
|
55
|
+
type: Input
|
|
56
|
+
}], backgroundColor: [{
|
|
57
|
+
type: Input
|
|
58
|
+
}], transitionTimingFunction: [{
|
|
59
|
+
type: Input
|
|
60
|
+
}], transitionDuration: [{
|
|
61
|
+
type: Input
|
|
38
62
|
}], width: [{
|
|
39
63
|
type: Input
|
|
40
64
|
}], position: [{
|
|
@@ -60,6 +84,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
60
84
|
}], drawerWidth: [{
|
|
61
85
|
type: HostBinding,
|
|
62
86
|
args: ['style.width']
|
|
87
|
+
}], drawerShowShadow: [{
|
|
88
|
+
type: HostBinding,
|
|
89
|
+
args: ['class.show-shadow']
|
|
90
|
+
}], drawerBackgroundColor: [{
|
|
91
|
+
type: HostBinding,
|
|
92
|
+
args: ['style.background-color']
|
|
93
|
+
}], drawerTransitionTimingFunction: [{
|
|
94
|
+
type: HostBinding,
|
|
95
|
+
args: ['style.transition-timing-function']
|
|
96
|
+
}], drawerTransitionDuration: [{
|
|
97
|
+
type: HostBinding,
|
|
98
|
+
args: ['style.transition-duration']
|
|
63
99
|
}] } });
|
|
64
100
|
|
|
65
101
|
class SdsDrawerModule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-drawer.mjs","sources":["../../../projects/ngx-sds-components/src/lib/drawer/drawer.component.ts","../../../projects/ngx-sds-components/src/lib/drawer/drawer.component.html","../../../projects/ngx-sds-components/src/lib/drawer/drawer.module.ts","../../../projects/ngx-sds-components/src/lib/drawer/spicainternational-ngx-sds-components-src-lib-drawer.ts"],"sourcesContent":["import {\r\n Component,\r\n EventEmitter,\r\n HostBinding,\r\n Input,\r\n Output,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sds-drawer',\r\n templateUrl: './drawer.component.html',\r\n styleUrls: ['./drawer.component.scss'],\r\n})\r\nexport class SdsDrawerComponent {\r\n @Input() isOpen = false;\r\n\r\n @Input() width = '10rem';\r\n @Input() position: 'start' | 'end' | 'top' | 'bottom' = 'end';\r\n\r\n @HostBinding('class.sds-drawer') drawerClass = true;\r\n @HostBinding('class.sds-drawer-end') get drawerEnd() {\r\n return this.position === 'end';\r\n }\r\n @HostBinding('class.sds-drawer-start') get drawerStart() {\r\n return this.position === 'start';\r\n }\r\n @HostBinding('class.sds-drawer-top') get drawerTop() {\r\n return this.position === 'top';\r\n }\r\n @HostBinding('class.sds-drawer-bottom') get drawerBottom() {\r\n return this.position === 'bottom';\r\n }\r\n @HostBinding('class.show') get show() {\r\n return this.isOpen;\r\n }\r\n @HostBinding('style.width') get drawerWidth() {\r\n return this.width;\r\n }\r\n}\r\n","<ng-content></ng-content>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsDrawerComponent } from './drawer.component';\r\n\r\n@NgModule({\r\n declarations: [SdsDrawerComponent],\r\n imports: [CommonModule],\r\n exports: [SdsDrawerComponent],\r\n})\r\nexport class SdsDrawerModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAaa,kBAAkB,CAAA;AAL/B,IAAA,WAAA,GAAA;QAMa,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-drawer.mjs","sources":["../../../projects/ngx-sds-components/src/lib/drawer/drawer.component.ts","../../../projects/ngx-sds-components/src/lib/drawer/drawer.component.html","../../../projects/ngx-sds-components/src/lib/drawer/drawer.module.ts","../../../projects/ngx-sds-components/src/lib/drawer/spicainternational-ngx-sds-components-src-lib-drawer.ts"],"sourcesContent":["import {\r\n Component,\r\n EventEmitter,\r\n HostBinding,\r\n Input,\r\n Output,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sds-drawer',\r\n templateUrl: './drawer.component.html',\r\n styleUrls: ['./drawer.component.scss'],\r\n})\r\nexport class SdsDrawerComponent {\r\n @Input() isOpen = false;\r\n @Input() showShadow = true;\r\n @Input() backgroundColor = 'white';\r\n @Input() transitionTimingFunction = 'ease-in-out';\r\n @Input() transitionDuration = '0.3s';\r\n\r\n @Input() width = '10rem';\r\n @Input() position: 'start' | 'end' | 'top' | 'bottom' = 'end';\r\n\r\n @HostBinding('class.sds-drawer') drawerClass = true;\r\n @HostBinding('class.sds-drawer-end') get drawerEnd() {\r\n return this.position === 'end';\r\n }\r\n @HostBinding('class.sds-drawer-start') get drawerStart() {\r\n return this.position === 'start';\r\n }\r\n @HostBinding('class.sds-drawer-top') get drawerTop() {\r\n return this.position === 'top';\r\n }\r\n @HostBinding('class.sds-drawer-bottom') get drawerBottom() {\r\n return this.position === 'bottom';\r\n }\r\n @HostBinding('class.show') get show() {\r\n return this.isOpen;\r\n }\r\n @HostBinding('style.width') get drawerWidth() {\r\n return this.width;\r\n }\r\n @HostBinding('class.show-shadow') get drawerShowShadow() {\r\n return this.showShadow;\r\n }\r\n @HostBinding('style.background-color') get drawerBackgroundColor() {\r\n return this.backgroundColor;\r\n }\r\n @HostBinding('style.transition-timing-function') get drawerTransitionTimingFunction() {\r\n return this.transitionTimingFunction;\r\n }\r\n @HostBinding('style.transition-duration') get drawerTransitionDuration() {\r\n return this.transitionDuration;\r\n }\r\n\r\n\r\n}\r\n","<ng-content></ng-content>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsDrawerComponent } from './drawer.component';\r\n\r\n@NgModule({\r\n declarations: [SdsDrawerComponent],\r\n imports: [CommonModule],\r\n exports: [SdsDrawerComponent],\r\n})\r\nexport class SdsDrawerModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
2
|
export declare class SdsDrawerComponent {
|
|
3
3
|
isOpen: boolean;
|
|
4
|
+
showShadow: boolean;
|
|
5
|
+
backgroundColor: string;
|
|
6
|
+
transitionTimingFunction: string;
|
|
7
|
+
transitionDuration: string;
|
|
4
8
|
width: string;
|
|
5
9
|
position: 'start' | 'end' | 'top' | 'bottom';
|
|
6
10
|
drawerClass: boolean;
|
|
@@ -10,6 +14,10 @@ export declare class SdsDrawerComponent {
|
|
|
10
14
|
get drawerBottom(): boolean;
|
|
11
15
|
get show(): boolean;
|
|
12
16
|
get drawerWidth(): string;
|
|
17
|
+
get drawerShowShadow(): boolean;
|
|
18
|
+
get drawerBackgroundColor(): string;
|
|
19
|
+
get drawerTransitionTimingFunction(): string;
|
|
20
|
+
get drawerTransitionDuration(): string;
|
|
13
21
|
static ɵfac: i0.ɵɵFactoryDeclaration<SdsDrawerComponent, never>;
|
|
14
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SdsDrawerComponent, "sds-drawer", never, { "isOpen": "isOpen"; "width": "width"; "position": "position"; }, {}, never, ["*"], false, never>;
|
|
22
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdsDrawerComponent, "sds-drawer", never, { "isOpen": "isOpen"; "showShadow": "showShadow"; "backgroundColor": "backgroundColor"; "transitionTimingFunction": "transitionTimingFunction"; "transitionDuration": "transitionDuration"; "width": "width"; "position": "position"; }, {}, never, ["*"], false, never>;
|
|
15
23
|
}
|