wj-elements 0.0.18 → 0.0.20
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/wj-dialog.js +2 -0
- package/package.json +1 -1
package/dist/wj-dialog.js
CHANGED
|
@@ -5,6 +5,8 @@ var __publicField = (obj, key, value) => {
|
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
7
|
import WJElement, { WjElementUtils } from "./wj-element.js";
|
|
8
|
+
import "./wj-button.js";
|
|
9
|
+
import "./wj-icon.js";
|
|
8
10
|
import "./wj-store.js";
|
|
9
11
|
const styles = '/*\n[ WJ Dialog ]\n*/\n:host {\n --wj-dialog-width: 600px;\n --wj-dialog-height: 600px;\n --wj-dialog-border-radius: var(--wj-border-radius-large);\n --wj-dialog-border-width: var(--wj-border-width);\n --wj-dialog-border-style: var(--wj-border-style);\n --wj-dialog-border-color: var(--wj-border-color);\n --wj-dialog-margin-top: auto;\n --wj-dialog-margin-start: auto;\n --wj-dialog-margin-end: auto;\n --wj-dialog-margin-bottom: auto;\n}\n:host .close {\n margin-left: auto;\n}\n:host .modal-content {\n border-radius: 3px;\n box-shadow: none;\n}\n:host .dialog-header {\n position: relative;\n border-bottom: 0;\n padding-inline: var(--wj-dialog-padding, 1rem);\n padding-top: var(--wj-dialog-padding, 1rem);\n padding-bottom: var(--wj-dialog-padding, 0);\n display: flex;\n align-items: center;\n}\n:host .dialog-header span {\n font-family: var(--wj-font-family-secondary);\n font-size: 10.5px;\n text-transform: uppercase;\n display: inline-block;\n letter-spacing: 0.06em;\n font-weight: 500;\n margin: 0;\n padding: 0;\n line-height: normal;\n overflow: hidden;\n text-overflow: ellipsis;\n filter: alpha(opacity=40);\n}\n:host .dialog-content {\n box-shadow: none;\n padding-inline: var(--wj-dialog-padding, 1rem);\n white-space: normal;\n z-index: 1;\n}\n:host .dialog-footer {\n display: flex;\n justify-content: end;\n border-top: none;\n box-shadow: none;\n margin-top: 0;\n padding-inline: var(--wj-dialog-padding-inline, 1rem);\n padding-top: var(--wj-dialog-padding-top, 1rem);\n padding-bottom: var(--wj-dialog-padding-bottom, 1rem);\n}\n\ndialog::backdrop {\n opacity: var(--wj-backdrop-opacity);\n background-color: var(--wj-backdrop);\n}\n\n:host(.separator) .dialog-header:after {\n content: "";\n height: 1px;\n background: rgba(0, 0, 0, 0.08);\n left: var(--wj-dialog-padding, 1rem);\n right: var(--wj-dialog-padding, 1rem);\n position: absolute;\n bottom: 0;\n}\n\n:host dialog {\n box-sizing: border-box;\n transition: all 0.2s !important;\n width: var(--wj-dialog-width);\n height: var(--wj-dialog-height);\n box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n border-radius: var(--wj-dialog-border-radius);\n border-width: var(--wj-dialog-border-width);\n border-style: var(--wj-dialog-border-style);\n border-color: var(--wj-dialog-border-color);\n margin-top: var(--wj-dialog-margin-top);\n margin-bottom: var(--wj-dialog-margin-bottom);\n margin-inline: var(--wj-dialog-margin-start) var(--wj-dialog-margin-end);\n padding: 0;\n}\n\n:host(.stick-up) {\n --wj-dialog-width: 300px !important;\n --wj-dialog-height: fit-content;\n --wj-dialog-border-radius: 0 0 8px 8px;\n --wj-dialog-border-width: 0 1px 1px 1px;\n --wj-dialog-margin-top: 0;\n --wj-dialog-translate-from: translateY(-110%);\n --wj-dialog-template-to: translateX(0);\n}\n\n:host(.slide-up) {\n --wj-dialog-width: 300px !important;\n --wj-dialog-height: fit-content;\n --wj-dialog-border-radius: 8px;\n --wj-dialog-border-width: 1px;\n --wj-dialog-opacity-from: 0;\n --wj-dialog-translate-from: scale(.9);\n --wj-dialog-translate-to: scale(1);\n}\n\n:host(.fill-in) {\n --wj-dialog-width: 100%;\n --wj-dialog-height: 100%;\n --wj-dialog-border-radius: 0 0 0 0 !important;\n --wj-dialog-border-width: 0;\n --wj-dialog-margin-top: 0;\n --wj-dialog-margin-start: 0;\n --wj-dialog-margin-end: 0;\n --wj-dialog-margin-bottom: 0;\n --wj-dialog-translate-from: scale(.95);\n --wj-dialog-translate-to: scale(1);\n}\n:host(.fill-in) dialog {\n min-width: var(--wj-dialog-width);\n min-height: var(--wj-dialog-height);\n}\n\n:host(.slide-left) {\n --wj-dialog-width: 300px !important;\n --wj-dialog-height: 100% !important;\n --wj-dialog-border-radius: 0;\n --wj-dialog-border-width: 0 1px 0 0;\n --wj-dialog-margin-top: 0;\n --wj-dialog-margin-start: 0;\n --wj-dialog-margin-end: auto;\n --wj-dialog-margin-bottom: 0;\n}\n:host(.slide-left) dialog {\n min-height: var(--wj-dialog-height);\n --wj-dialog-translate-from: translateX(-110%);\n --wj-dialog-template-to: translateX(0);\n}\n\n:host(.slide-right) {\n --wj-dialog-width: 300px !important;\n --wj-dialog-height: 100% !important;\n --wj-dialog-border-radius: 0;\n --wj-dialog-border-width: 0 0 0 1px;\n --wj-dialog-margin-top: 0;\n --wj-dialog-margin-start: auto;\n --wj-dialog-margin-end: 0;\n --wj-dialog-margin-bottom: 0;\n}\n:host(.slide-right) dialog {\n min-height: var(--wj-dialog-height);\n --wj-dialog-translate-from: translateX(110%);\n --wj-dialog-template-to: translateX(0);\n}\n\n:host(.small) {\n --wj-dialog-width: 300px !important;\n}\n\n:host(.medium) {\n --wj-dialog-width: 500px !important;\n}\n\n:host(.large) {\n --wj-dialog-width: 600px !important;\n}\n\n:host(.ex-large) {\n --wj-dialog-width: 900px !important;\n}\n\ndialog[open] {\n animation: show 0.5s ease normal;\n}\n\n@keyframes show {\n from {\n opacity: var(--wj-dialog-opacity-from, 1);\n transform: var(--wj-dialog-translate-from);\n }\n to {\n opacity: 1;\n transform: var(--wj-dialog-translate-to);\n }\n}';
|
|
10
12
|
class Dialog extends WJElement {
|