@fluid-topics/ft-dialog 0.2.12 → 0.2.15
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/build/ft-dialog.d.ts +2 -0
- package/build/ft-dialog.inline-styles.js +527 -122
- package/build/ft-dialog.js +14 -1
- package/build/ft-dialog.light.js +486 -94
- package/build/ft-dialog.min.js +525 -120
- package/package.json +6 -5
package/build/ft-dialog.js
CHANGED
|
@@ -6,9 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { css, html } from "lit";
|
|
8
8
|
import { property, } from "lit/decorators.js";
|
|
9
|
-
import { designSystemVariables, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
|
|
9
|
+
import { designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
|
|
10
10
|
import { FtTypography } from "@fluid-topics/ft-typography";
|
|
11
11
|
import { FtIcon } from "@fluid-topics/ft-icon";
|
|
12
|
+
import { FtButton, FtButtonCssVariables } from "@fluid-topics/ft-button";
|
|
12
13
|
export const FtDialogCssVariables = {
|
|
13
14
|
zIndex: FtCssVariable.create("--ft-dialog-z-index", "NUMBER", "2"),
|
|
14
15
|
overlayBackgroundColor: FtCssVariable.create("--ft-dialog-overlay-background-color", "COLOR", "rgba(0, 0, 0, 0.3)"),
|
|
@@ -29,6 +30,7 @@ export class FtDialog extends FtLitElement {
|
|
|
29
30
|
this.opened = false;
|
|
30
31
|
this.closeOnEsc = false;
|
|
31
32
|
this.closeOnClickOutside = false;
|
|
33
|
+
this.closable = false;
|
|
32
34
|
this.heading = "";
|
|
33
35
|
this.icon = "";
|
|
34
36
|
}
|
|
@@ -116,6 +118,11 @@ export class FtDialog extends FtLitElement {
|
|
|
116
118
|
margin-bottom: 8px
|
|
117
119
|
}
|
|
118
120
|
|
|
121
|
+
.ft-dialog-heading ft-button {
|
|
122
|
+
margin-left: auto;
|
|
123
|
+
${setVariable(FtButtonCssVariables.color, FtDialogCssVariables.headingColor)};
|
|
124
|
+
}
|
|
125
|
+
|
|
119
126
|
`;
|
|
120
127
|
}
|
|
121
128
|
render() {
|
|
@@ -131,6 +138,8 @@ export class FtDialog extends FtLitElement {
|
|
|
131
138
|
${this.icon ? html `
|
|
132
139
|
<ft-icon variant="material">${this.icon}</ft-icon>` : undefined}
|
|
133
140
|
<ft-typography element="span" variant="title">${this.heading}</ft-typography>
|
|
141
|
+
${this.closable ? html `
|
|
142
|
+
<ft-button icon="close" @click=${this.close}></ft-button>` : undefined}
|
|
134
143
|
</div>
|
|
135
144
|
` : null}
|
|
136
145
|
<div class="ft-dialog-content">
|
|
@@ -177,6 +186,7 @@ export class FtDialog extends FtLitElement {
|
|
|
177
186
|
FtDialog.elementDefinitions = {
|
|
178
187
|
"ft-typography": FtTypography,
|
|
179
188
|
"ft-icon": FtIcon,
|
|
189
|
+
"ft-button": FtButton,
|
|
180
190
|
};
|
|
181
191
|
__decorate([
|
|
182
192
|
property({
|
|
@@ -193,6 +203,9 @@ __decorate([
|
|
|
193
203
|
__decorate([
|
|
194
204
|
property({ type: Boolean })
|
|
195
205
|
], FtDialog.prototype, "closeOnClickOutside", void 0);
|
|
206
|
+
__decorate([
|
|
207
|
+
property({ type: Boolean })
|
|
208
|
+
], FtDialog.prototype, "closable", void 0);
|
|
196
209
|
__decorate([
|
|
197
210
|
property({ type: String })
|
|
198
211
|
], FtDialog.prototype, "heading", void 0);
|