@digital-realty/ix-drawer 1.0.5 → 1.0.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/dist/IxDrawer.d.ts +18 -3
- package/dist/IxDrawer.js +127 -29
- package/dist/IxDrawer.js.map +1 -1
- package/dist/styles/ix-drawer-styles.js +117 -3
- package/dist/styles/ix-drawer-styles.js.map +1 -1
- package/package.json +5 -2
package/dist/IxDrawer.d.ts
CHANGED
|
@@ -1,9 +1,24 @@
|
|
|
1
1
|
import { LitElement, nothing } from 'lit';
|
|
2
|
-
import '@
|
|
2
|
+
import '@digital-realty/ix-button/ix-button.js';
|
|
3
|
+
import '@digital-realty/ix-icon/ix-icon.js';
|
|
4
|
+
import '@digital-realty/ix-dialog/ix-dialog.js';
|
|
3
5
|
export declare class IxDrawer extends LitElement {
|
|
4
6
|
static get styles(): import("lit").CSSResult[];
|
|
7
|
+
protected minimised: boolean;
|
|
8
|
+
protected showDeleteConfirmationDialog: boolean;
|
|
5
9
|
isVisible: boolean;
|
|
6
10
|
onClosed: any;
|
|
7
|
-
|
|
8
|
-
|
|
11
|
+
minimisedTitle: string;
|
|
12
|
+
minimisedSubTitle: string;
|
|
13
|
+
minimisable: boolean;
|
|
14
|
+
onMinimised(): void;
|
|
15
|
+
handleOnCancel(): void;
|
|
16
|
+
handleOnDelete(): void;
|
|
17
|
+
renderMinimiseButton(): import("lit").TemplateResult<1> | typeof nothing;
|
|
18
|
+
renderMaximiseButton(): import("lit").TemplateResult<1>;
|
|
19
|
+
renderDeleteButton(): import("lit").TemplateResult<1>;
|
|
20
|
+
renderDeleteConfirmationDialog(): import("lit").TemplateResult<1>;
|
|
21
|
+
renderMinimisedContainer(): import("lit").TemplateResult<1>;
|
|
22
|
+
renderDrawerContainer(): import("lit").TemplateResult<1>;
|
|
23
|
+
render(): import("lit").TemplateResult<1> | typeof nothing;
|
|
9
24
|
}
|
package/dist/IxDrawer.js
CHANGED
|
@@ -1,54 +1,152 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { LitElement, html, nothing } from 'lit';
|
|
3
|
-
import { property } from 'lit/decorators.js';
|
|
3
|
+
import { property, state } from 'lit/decorators.js';
|
|
4
4
|
import { IxDrawerStyles } from './styles/ix-drawer-styles.js';
|
|
5
|
-
import '@
|
|
5
|
+
import '@digital-realty/ix-button/ix-button.js';
|
|
6
|
+
import '@digital-realty/ix-icon/ix-icon.js';
|
|
7
|
+
import '@digital-realty/ix-dialog/ix-dialog.js';
|
|
6
8
|
export class IxDrawer extends LitElement {
|
|
7
9
|
constructor() {
|
|
8
10
|
super(...arguments);
|
|
11
|
+
this.minimised = false;
|
|
12
|
+
this.showDeleteConfirmationDialog = false;
|
|
9
13
|
this.isVisible = false;
|
|
14
|
+
this.minimisedTitle = 'Draft';
|
|
15
|
+
this.minimisedSubTitle = '';
|
|
16
|
+
this.minimisable = false;
|
|
10
17
|
}
|
|
11
18
|
static get styles() {
|
|
12
19
|
return [IxDrawerStyles];
|
|
13
20
|
}
|
|
14
|
-
|
|
15
|
-
|
|
21
|
+
onMinimised() {
|
|
22
|
+
this.minimised = !this.minimised;
|
|
23
|
+
}
|
|
24
|
+
handleOnCancel() {
|
|
25
|
+
this.showDeleteConfirmationDialog = false;
|
|
26
|
+
}
|
|
27
|
+
handleOnDelete() {
|
|
28
|
+
this.showDeleteConfirmationDialog = true;
|
|
29
|
+
}
|
|
30
|
+
renderMinimiseButton() {
|
|
31
|
+
if (this.minimisable)
|
|
32
|
+
return html `<ix-button
|
|
33
|
+
data-testid="hideButton"
|
|
34
|
+
appearance="text"
|
|
35
|
+
has-icon
|
|
36
|
+
@click=${this.onMinimised}
|
|
37
|
+
>
|
|
38
|
+
<ix-icon slot="icon">fullscreen_exit</ix-icon>
|
|
39
|
+
HIDE
|
|
40
|
+
</ix-button>`;
|
|
16
41
|
return nothing;
|
|
17
|
-
// import '@digital-realty/ix-button/ix-button.js';
|
|
18
|
-
// TO DO: this part will be completed with https://telxapp.atlassian.net/browse/IXUAT-8818
|
|
19
|
-
// return html`<ix-button appearance="text" has-icon @click=${this.onClosed}>
|
|
20
|
-
// <md-icon slot="icon">fullscreen_exit</md-icon>
|
|
21
|
-
// Hide
|
|
22
|
-
// </ix-button>`;
|
|
23
42
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
43
|
+
renderMaximiseButton() {
|
|
44
|
+
return html `<div class="drawer__maximise-btn">
|
|
45
|
+
<ix-icon @click=${this.onMinimised}>fullscreen</ix-icon>
|
|
46
|
+
</div>`;
|
|
47
|
+
}
|
|
48
|
+
renderDeleteButton() {
|
|
49
|
+
return html `<svg
|
|
50
|
+
class="drawer__delete-btn"
|
|
51
|
+
focusable="false"
|
|
52
|
+
aria-hidden="true"
|
|
53
|
+
viewBox="0 0 24 24"
|
|
54
|
+
data-testid="deleteIcon"
|
|
55
|
+
@click=${this.handleOnDelete}
|
|
56
|
+
>
|
|
57
|
+
<path
|
|
58
|
+
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
|
|
59
|
+
></path>
|
|
60
|
+
</svg>
|
|
61
|
+
${this.renderDeleteConfirmationDialog()}`;
|
|
62
|
+
}
|
|
63
|
+
renderDeleteConfirmationDialog() {
|
|
64
|
+
return html `
|
|
65
|
+
<ix-dialog .open=${this.showDeleteConfirmationDialog}>
|
|
66
|
+
<form slot="content" id="form-id" method="dialog">
|
|
67
|
+
<h2 class="drawer-delete-dialog__title">
|
|
68
|
+
Are you sure you want to proceed? All details provided will be lost.
|
|
69
|
+
</h2>
|
|
70
|
+
</form>
|
|
71
|
+
<div slot="actions">
|
|
72
|
+
<ix-button
|
|
73
|
+
appearance="text"
|
|
74
|
+
form="form-id"
|
|
75
|
+
@click=${this.handleOnCancel}
|
|
76
|
+
>NO</ix-button
|
|
77
|
+
>
|
|
78
|
+
<ix-button appearance="text" form="form-id" @click=${this.onClosed}
|
|
79
|
+
>YES</ix-button
|
|
80
|
+
>
|
|
81
|
+
</div>
|
|
82
|
+
</ix-dialog>
|
|
83
|
+
`;
|
|
84
|
+
}
|
|
85
|
+
renderMinimisedContainer() {
|
|
86
|
+
return html `<div class="drawer-minimised-container">
|
|
87
|
+
<div class="drawer-minimised-body">
|
|
88
|
+
<div>
|
|
89
|
+
<div class="drawer-minimised-title">${this.minimisedTitle}</div>
|
|
90
|
+
<div class="drawer-minimised-sub-title">
|
|
91
|
+
${this.minimisedSubTitle}
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="drawer-minimised-actions">
|
|
95
|
+
${this.renderDeleteButton()} ${this.renderMaximiseButton()}
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>`;
|
|
99
|
+
}
|
|
100
|
+
renderDrawerContainer() {
|
|
101
|
+
return html `
|
|
102
|
+
<div class="drawer-container">
|
|
103
|
+
<aside class="drawer">
|
|
104
|
+
<div class="drawer-header">
|
|
105
|
+
<div class="drawer-header__minimise-btn">
|
|
106
|
+
${this.renderMinimiseButton()}
|
|
38
107
|
</div>
|
|
39
|
-
<
|
|
40
|
-
|
|
108
|
+
<slot name="header"></slot>
|
|
109
|
+
<div class="drawer-header__close-btn">
|
|
110
|
+
<div class="drawer-header__close-btn-hover-layer">
|
|
111
|
+
<ix-icon @click=${this.onClosed}>Close</ix-icon>
|
|
112
|
+
</div>
|
|
41
113
|
</div>
|
|
42
|
-
</
|
|
43
|
-
|
|
44
|
-
|
|
114
|
+
</div>
|
|
115
|
+
<div class="drawer-body">
|
|
116
|
+
<slot name="content"></slot>
|
|
117
|
+
</div>
|
|
118
|
+
</aside>
|
|
119
|
+
</div>
|
|
120
|
+
`;
|
|
121
|
+
}
|
|
122
|
+
render() {
|
|
123
|
+
if (this.isVisible) {
|
|
124
|
+
if (this.minimised)
|
|
125
|
+
return this.renderMinimisedContainer();
|
|
126
|
+
return this.renderDrawerContainer();
|
|
127
|
+
}
|
|
45
128
|
return nothing;
|
|
46
129
|
}
|
|
47
130
|
}
|
|
131
|
+
__decorate([
|
|
132
|
+
state()
|
|
133
|
+
], IxDrawer.prototype, "minimised", void 0);
|
|
134
|
+
__decorate([
|
|
135
|
+
state()
|
|
136
|
+
], IxDrawer.prototype, "showDeleteConfirmationDialog", void 0);
|
|
48
137
|
__decorate([
|
|
49
138
|
property({ type: Boolean })
|
|
50
139
|
], IxDrawer.prototype, "isVisible", void 0);
|
|
51
140
|
__decorate([
|
|
52
141
|
property({ type: Function })
|
|
53
142
|
], IxDrawer.prototype, "onClosed", void 0);
|
|
143
|
+
__decorate([
|
|
144
|
+
property({ type: String })
|
|
145
|
+
], IxDrawer.prototype, "minimisedTitle", void 0);
|
|
146
|
+
__decorate([
|
|
147
|
+
property({ type: String })
|
|
148
|
+
], IxDrawer.prototype, "minimisedSubTitle", void 0);
|
|
149
|
+
__decorate([
|
|
150
|
+
property({ type: Boolean })
|
|
151
|
+
], IxDrawer.prototype, "minimisable", void 0);
|
|
54
152
|
//# sourceMappingURL=IxDrawer.js.map
|
package/dist/IxDrawer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxDrawer.js","sourceRoot":"","sources":["../src/IxDrawer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"IxDrawer.js","sourceRoot":"","sources":["../src/IxDrawer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,wCAAwC,CAAC;AAChD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wCAAwC,CAAC;AAEhD,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAKqB,cAAS,GAAG,KAAK,CAAC;QAElB,iCAA4B,GAAG,KAAK,CAAC;QAE3B,cAAS,GAAG,KAAK,CAAC;QAInB,mBAAc,GAAG,OAAO,CAAC;QAEzB,sBAAiB,GAAG,EAAE,CAAC;QAEtB,gBAAW,GAAG,KAAK,CAAC;IA0HnD,CAAC;IA1IC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,cAAc,CAAC,CAAC;IAC1B,CAAC;IAgBD,WAAW;QACT,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACnC,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,4BAA4B,GAAG,KAAK,CAAC;IAC5C,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,4BAA4B,GAAG,IAAI,CAAC;IAC3C,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW;YAClB,OAAO,IAAI,CAAA;;;;iBAIA,IAAI,CAAC,WAAW;;;;mBAId,CAAC;QAEhB,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,oBAAoB;QAClB,OAAO,IAAI,CAAA;wBACS,IAAI,CAAC,WAAW;WAC7B,CAAC;IACV,CAAC;IAED,kBAAkB;QAChB,OAAO,IAAI,CAAA;;;;;;iBAME,IAAI,CAAC,cAAc;;;;;;QAM5B,IAAI,CAAC,8BAA8B,EAAE,EAAE,CAAC;IAC9C,CAAC;IAED,8BAA8B;QAC5B,OAAO,IAAI,CAAA;yBACU,IAAI,CAAC,4BAA4B;;;;;;;;;;qBAUrC,IAAI,CAAC,cAAc;;;+DAGuB,IAAI,CAAC,QAAQ;;;;;KAKvE,CAAC;IACJ,CAAC;IAED,wBAAwB;QACtB,OAAO,IAAI,CAAA;;;gDAGiC,IAAI,CAAC,cAAc;;cAErD,IAAI,CAAC,iBAAiB;;;;YAIxB,IAAI,CAAC,kBAAkB,EAAE,IAAI,IAAI,CAAC,oBAAoB,EAAE;;;WAGzD,CAAC;IACV,CAAC;IAED,qBAAqB;QACnB,OAAO,IAAI,CAAA;;;;;gBAKC,IAAI,CAAC,oBAAoB,EAAE;;;;;kCAKT,IAAI,CAAC,QAAQ;;;;;;;;;KAS1C,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,IAAI,CAAC,SAAS;gBAAE,OAAO,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAE3D,OAAO,IAAI,CAAC,qBAAqB,EAAE,CAAC;SACrC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;CACF;AAtIU;IAAR,KAAK,EAAE;2CAA6B;AAE5B;IAAR,KAAK,EAAE;8DAAgD;AAE3B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAmB;AAEjB;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;0CAAe;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA0B;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAwB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAqB","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { IxDrawerStyles } from './styles/ix-drawer-styles.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-dialog/ix-dialog.js';\n\nexport class IxDrawer extends LitElement {\n static get styles() {\n return [IxDrawerStyles];\n }\n\n @state() protected minimised = false;\n\n @state() protected showDeleteConfirmationDialog = false;\n\n @property({ type: Boolean }) isVisible = false;\n\n @property({ type: Function }) onClosed: any;\n\n @property({ type: String }) minimisedTitle = 'Draft';\n\n @property({ type: String }) minimisedSubTitle = '';\n\n @property({ type: Boolean }) minimisable = false;\n\n onMinimised() {\n this.minimised = !this.minimised;\n }\n\n handleOnCancel() {\n this.showDeleteConfirmationDialog = false;\n }\n\n handleOnDelete() {\n this.showDeleteConfirmationDialog = true;\n }\n\n renderMinimiseButton() {\n if (this.minimisable)\n return html`<ix-button\n data-testid=\"hideButton\"\n appearance=\"text\"\n has-icon\n @click=${this.onMinimised}\n >\n <ix-icon slot=\"icon\">fullscreen_exit</ix-icon>\n HIDE\n </ix-button>`;\n\n return nothing;\n }\n\n renderMaximiseButton() {\n return html`<div class=\"drawer__maximise-btn\">\n <ix-icon @click=${this.onMinimised}>fullscreen</ix-icon>\n </div>`;\n }\n\n renderDeleteButton() {\n return html`<svg\n class=\"drawer__delete-btn\"\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n data-testid=\"deleteIcon\"\n @click=${this.handleOnDelete}\n >\n <path\n d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\"\n ></path>\n </svg>\n ${this.renderDeleteConfirmationDialog()}`;\n }\n\n renderDeleteConfirmationDialog() {\n return html`\n <ix-dialog .open=${this.showDeleteConfirmationDialog}>\n <form slot=\"content\" id=\"form-id\" method=\"dialog\">\n <h2 class=\"drawer-delete-dialog__title\">\n Are you sure you want to proceed? All details provided will be lost.\n </h2>\n </form>\n <div slot=\"actions\">\n <ix-button\n appearance=\"text\"\n form=\"form-id\"\n @click=${this.handleOnCancel}\n >NO</ix-button\n >\n <ix-button appearance=\"text\" form=\"form-id\" @click=${this.onClosed}\n >YES</ix-button\n >\n </div>\n </ix-dialog>\n `;\n }\n\n renderMinimisedContainer() {\n return html`<div class=\"drawer-minimised-container\">\n <div class=\"drawer-minimised-body\">\n <div>\n <div class=\"drawer-minimised-title\">${this.minimisedTitle}</div>\n <div class=\"drawer-minimised-sub-title\">\n ${this.minimisedSubTitle}\n </div>\n </div>\n <div class=\"drawer-minimised-actions\">\n ${this.renderDeleteButton()} ${this.renderMaximiseButton()}\n </div>\n </div>\n </div>`;\n }\n\n renderDrawerContainer() {\n return html`\n <div class=\"drawer-container\">\n <aside class=\"drawer\">\n <div class=\"drawer-header\">\n <div class=\"drawer-header__minimise-btn\">\n ${this.renderMinimiseButton()}\n </div>\n <slot name=\"header\"></slot>\n <div class=\"drawer-header__close-btn\">\n <div class=\"drawer-header__close-btn-hover-layer\">\n <ix-icon @click=${this.onClosed}>Close</ix-icon>\n </div>\n </div>\n </div>\n <div class=\"drawer-body\">\n <slot name=\"content\"></slot>\n </div>\n </aside>\n </div>\n `;\n }\n\n render() {\n if (this.isVisible) {\n if (this.minimised) return this.renderMinimisedContainer();\n\n return this.renderDrawerContainer();\n }\n\n return nothing;\n }\n}\n"]}
|
|
@@ -22,7 +22,7 @@ export const IxDrawerStyles = css `
|
|
|
22
22
|
border-radius: 20px 0px 0px 20px;
|
|
23
23
|
box-sizing: border-box;
|
|
24
24
|
}
|
|
25
|
-
@media screen and (min-width:
|
|
25
|
+
@media screen and (min-width: 1024px) {
|
|
26
26
|
.drawer {
|
|
27
27
|
width: 45%;
|
|
28
28
|
}
|
|
@@ -32,10 +32,11 @@ export const IxDrawerStyles = css `
|
|
|
32
32
|
justify-content: space-between;
|
|
33
33
|
align-items: center;
|
|
34
34
|
}
|
|
35
|
-
.drawer-
|
|
35
|
+
.drawer-header__minimise-btn {
|
|
36
36
|
flex: 0;
|
|
37
37
|
}
|
|
38
38
|
.drawer-header__close-btn {
|
|
39
|
+
cursor: pointer;
|
|
39
40
|
flex: 1;
|
|
40
41
|
}
|
|
41
42
|
.drawer-header__close-btn-hover-layer {
|
|
@@ -50,8 +51,121 @@ export const IxDrawerStyles = css `
|
|
|
50
51
|
}
|
|
51
52
|
|
|
52
53
|
.drawer-body {
|
|
53
|
-
height:
|
|
54
|
+
height: 95%;
|
|
54
55
|
overflow: auto;
|
|
55
56
|
}
|
|
57
|
+
|
|
58
|
+
.drawer-minimised-container {
|
|
59
|
+
bottom: 24px;
|
|
60
|
+
position: absolute;
|
|
61
|
+
right: 24px;
|
|
62
|
+
z-index: 1200;
|
|
63
|
+
display: flex;
|
|
64
|
+
flex-direction: row;
|
|
65
|
+
gap: 8px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.drawer-minimised-body {
|
|
69
|
+
background-color: rgb(255, 255, 255);
|
|
70
|
+
height: 72px;
|
|
71
|
+
display: flex;
|
|
72
|
+
-webkit-box-align: center;
|
|
73
|
+
align-items: center;
|
|
74
|
+
padding: 4px 24px;
|
|
75
|
+
box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,
|
|
76
|
+
rgb(225, 228, 232) 0px 0px 0px 1px inset;
|
|
77
|
+
border-radius: 16px;
|
|
78
|
+
-webkit-box-pack: justify;
|
|
79
|
+
justify-content: space-between;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.drawer-minimised-title {
|
|
83
|
+
color: rgba(9, 34, 65, 0.7);
|
|
84
|
+
font-style: normal;
|
|
85
|
+
font-weight: normal;
|
|
86
|
+
font-size: 12px;
|
|
87
|
+
line-height: 16px;
|
|
88
|
+
letter-spacing: 0.4px;
|
|
89
|
+
font-family: 'Open Sans', sans-serif;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.drawer-minimised-sub-title {
|
|
93
|
+
font-style: normal;
|
|
94
|
+
font-weight: bold;
|
|
95
|
+
font-size: 14px;
|
|
96
|
+
line-height: 24px;
|
|
97
|
+
letter-spacing: 0.1px;
|
|
98
|
+
font-family: 'Open Sans', sans-serif;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.drawer-minimised-actions {
|
|
102
|
+
margin-left: 42px;
|
|
103
|
+
display: flex;
|
|
104
|
+
-webkit-box-align: center;
|
|
105
|
+
align-items: center;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.drawer-delete-dialog__title {
|
|
109
|
+
color: rgb(9, 34, 65);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.drawer__delete-btn {
|
|
113
|
+
user-select: none;
|
|
114
|
+
width: 1em;
|
|
115
|
+
height: 1em;
|
|
116
|
+
display: inline-block;
|
|
117
|
+
fill: currentcolor;
|
|
118
|
+
flex-shrink: 0;
|
|
119
|
+
transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
120
|
+
font-size: 1.5rem;
|
|
121
|
+
color: rgb(219, 0, 40);
|
|
122
|
+
cursor: pointer;
|
|
123
|
+
margin-right: 20px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.drawer__maximise-btn {
|
|
127
|
+
display: inline-flex;
|
|
128
|
+
-webkit-box-align: center;
|
|
129
|
+
align-items: center;
|
|
130
|
+
-webkit-box-pack: center;
|
|
131
|
+
justify-content: center;
|
|
132
|
+
position: relative;
|
|
133
|
+
box-sizing: border-box;
|
|
134
|
+
-webkit-tap-highlight-color: transparent;
|
|
135
|
+
outline: 0px;
|
|
136
|
+
border: 0px;
|
|
137
|
+
margin: 0px;
|
|
138
|
+
cursor: pointer;
|
|
139
|
+
user-select: none;
|
|
140
|
+
vertical-align: middle;
|
|
141
|
+
appearance: none;
|
|
142
|
+
text-decoration: none;
|
|
143
|
+
font-family: 'Red Hat Display', sans-serif;
|
|
144
|
+
font-weight: 700;
|
|
145
|
+
font-style: normal;
|
|
146
|
+
font-size: 1.5rem;
|
|
147
|
+
line-height: 18.52px;
|
|
148
|
+
letter-spacing: 1.25px;
|
|
149
|
+
text-transform: uppercase;
|
|
150
|
+
min-height: 36px;
|
|
151
|
+
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
|
|
152
|
+
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
|
|
153
|
+
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
154
|
+
border-radius: 50%;
|
|
155
|
+
padding: 0px;
|
|
156
|
+
min-width: 0px;
|
|
157
|
+
z-index: 1050;
|
|
158
|
+
color: rgb(255, 255, 255);
|
|
159
|
+
height: 40px !important;
|
|
160
|
+
width: 40px !important;
|
|
161
|
+
background-color: rgb(20, 86, 224) !important;
|
|
162
|
+
box-shadow: none !important;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
ix-dialog {
|
|
166
|
+
form {
|
|
167
|
+
max-width: 500px;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
56
170
|
`;
|
|
57
171
|
//# sourceMappingURL=ix-drawer-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-drawer-styles.js","sourceRoot":"","sources":["../../src/styles/ix-drawer-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ix-drawer-styles.js","sourceRoot":"","sources":["../../src/styles/ix-drawer-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwKhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxDrawerStyles = css`\n .drawer-container {\n z-index: 1;\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background-color: rgba(0, 0, 0, 0.2);\n scroll-behavior: auto;\n overflow: auto;\n }\n\n .drawer {\n width: 90%;\n height: 100%;\n float: right;\n padding: 32px 40px 40px;\n background-color: white;\n border-radius: 20px 0px 0px 20px;\n box-sizing: border-box;\n }\n @media screen and (min-width: 1024px) {\n .drawer {\n width: 45%;\n }\n }\n .drawer-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .drawer-header__minimise-btn {\n flex: 0;\n }\n .drawer-header__close-btn {\n cursor: pointer;\n flex: 1;\n }\n .drawer-header__close-btn-hover-layer {\n width: 24px;\n height: 24px;\n border-radius: 9999px;\n float: right;\n }\n .drawer-header__close-btn-hover-layer:hover {\n transition: 0.15s;\n background-color: lightgrey;\n }\n\n .drawer-body {\n height: 95%;\n overflow: auto;\n }\n\n .drawer-minimised-container {\n bottom: 24px;\n position: absolute;\n right: 24px;\n z-index: 1200;\n display: flex;\n flex-direction: row;\n gap: 8px;\n }\n\n .drawer-minimised-body {\n background-color: rgb(255, 255, 255);\n height: 72px;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n padding: 4px 24px;\n box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,\n rgb(225, 228, 232) 0px 0px 0px 1px inset;\n border-radius: 16px;\n -webkit-box-pack: justify;\n justify-content: space-between;\n }\n\n .drawer-minimised-title {\n color: rgba(9, 34, 65, 0.7);\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.4px;\n font-family: 'Open Sans', sans-serif;\n }\n\n .drawer-minimised-sub-title {\n font-style: normal;\n font-weight: bold;\n font-size: 14px;\n line-height: 24px;\n letter-spacing: 0.1px;\n font-family: 'Open Sans', sans-serif;\n }\n\n .drawer-minimised-actions {\n margin-left: 42px;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n }\n\n .drawer-delete-dialog__title {\n color: rgb(9, 34, 65);\n }\n\n .drawer__delete-btn {\n user-select: none;\n width: 1em;\n height: 1em;\n display: inline-block;\n fill: currentcolor;\n flex-shrink: 0;\n transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n font-size: 1.5rem;\n color: rgb(219, 0, 40);\n cursor: pointer;\n margin-right: 20px;\n }\n\n .drawer__maximise-btn {\n display: inline-flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n outline: 0px;\n border: 0px;\n margin: 0px;\n cursor: pointer;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n text-decoration: none;\n font-family: 'Red Hat Display', sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 1.5rem;\n line-height: 18.52px;\n letter-spacing: 1.25px;\n text-transform: uppercase;\n min-height: 36px;\n transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n border-radius: 50%;\n padding: 0px;\n min-width: 0px;\n z-index: 1050;\n color: rgb(255, 255, 255);\n height: 40px !important;\n width: 40px !important;\n background-color: rgb(20, 86, 224) !important;\n box-shadow: none !important;\n }\n\n ix-dialog {\n form {\n max-width: 500px;\n }\n }\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-drawer following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "interxion",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.7",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -28,6 +28,9 @@
|
|
|
28
28
|
"storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
+
"@digital-realty/ix-button": "*",
|
|
32
|
+
"@digital-realty/ix-dialog": "*",
|
|
33
|
+
"@digital-realty/ix-icon": "*",
|
|
31
34
|
"@lit/react": "^1.0.2",
|
|
32
35
|
"@material/web": "^1.0.1",
|
|
33
36
|
"lit": "^2.0.2",
|
|
@@ -101,5 +104,5 @@
|
|
|
101
104
|
"README.md",
|
|
102
105
|
"LICENSE"
|
|
103
106
|
],
|
|
104
|
-
"gitHead": "
|
|
107
|
+
"gitHead": "8d163b068e310523d0cfda2b4f67f49b0ebd6913"
|
|
105
108
|
}
|