@sankhyalabs/sankhyablocks 1.1.24 → 1.1.28
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/cjs/ApplicationUtils-05b74ee9.js +39 -0
- package/dist/cjs/AssetsUtils-7e3c38f9.js +24 -0
- package/dist/cjs/CSSVarsUtils-75ca9c64.js +19 -0
- package/dist/cjs/_commonjsHelpers-537d719a.js +20 -0
- package/dist/cjs/ez-action-chip.cjs.entry.js +27 -0
- package/dist/cjs/ez-application.cjs.entry.js +26 -0
- package/dist/cjs/ez-button_4.cjs.entry.js +660 -0
- package/dist/cjs/ez-calendar.cjs.entry.js +223 -0
- package/dist/cjs/ez-collapsible-box.cjs.entry.js +47 -0
- package/dist/cjs/ez-combo-box.cjs.entry.js +278 -0
- package/dist/cjs/ez-date-input.cjs.entry.js +102 -0
- package/dist/cjs/ez-date-time-input.cjs.entry.js +145 -0
- package/dist/cjs/ez-dialog.cjs.entry.js +89 -0
- package/dist/cjs/ez-form.cjs.entry.js +785 -0
- package/dist/cjs/ez-grid.cjs.entry.js +110485 -0
- package/dist/cjs/ez-icon.cjs.entry.js +41 -0
- package/dist/cjs/ez-label-chip.cjs.entry.js +104 -0
- package/dist/cjs/ez-modal_2.cjs.entry.js +316 -0
- package/dist/cjs/ez-number-input.cjs.entry.js +86 -0
- package/dist/cjs/ez-popover.cjs.entry.js +120 -0
- package/dist/cjs/ez-popup.cjs.entry.js +48 -0
- package/dist/cjs/ez-search.cjs.entry.js +64 -0
- package/dist/cjs/ez-tabselector.cjs.entry.js +198 -0
- package/dist/cjs/ez-text-area.cjs.entry.js +114 -0
- package/dist/cjs/ez-text-input.cjs.entry.js +201 -0
- package/dist/cjs/ez-time-input.cjs.entry.js +118 -0
- package/dist/cjs/ez-toast.cjs.entry.js +44 -0
- package/dist/cjs/ez-upload.cjs.entry.js +356 -0
- package/dist/cjs/index-682c98b2.js +1771 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/sankhyablocks.cjs.js +2 -2
- package/dist/cjs/snk-application.cjs.entry.js +49 -99
- package/dist/cjs/test-du.cjs.entry.js +76 -0
- package/dist/collection/collection-manifest.json +36 -1
- package/dist/collection/components/snk-application/snk-application.js +1 -3
- package/dist/{collection/temp → components}/ApplicationUtils.js +37 -36
- package/dist/components/AssetsUtils.js +22 -0
- package/dist/components/CSSVarsUtils.js +17 -0
- package/dist/components/_commonjsHelpers.js +17 -0
- package/dist/components/ez-action-chip.js +44 -0
- package/dist/components/ez-application.js +39 -0
- package/dist/components/ez-button.js +6 -0
- package/dist/components/ez-button2.js +105 -0
- package/dist/components/ez-calendar.js +6 -0
- package/dist/components/ez-calendar2.js +242 -0
- package/dist/components/ez-check.js +6 -0
- package/dist/components/ez-check2.js +94 -0
- package/dist/components/ez-collapsible-box.js +67 -0
- package/dist/components/ez-combo-box.js +6 -0
- package/dist/components/ez-combo-box2.js +311 -0
- package/dist/components/ez-date-input.js +135 -0
- package/dist/components/ez-date-time-input.js +179 -0
- package/dist/components/ez-dialog.js +124 -0
- package/dist/components/ez-form.js +6 -0
- package/dist/components/ez-form2.js +807 -0
- package/dist/components/ez-grid.js +110576 -0
- package/dist/components/ez-icon.js +6 -0
- package/dist/components/ez-icon2.js +56 -0
- package/dist/components/ez-label-chip.js +125 -0
- package/dist/components/ez-list.js +6 -0
- package/dist/components/ez-list2.js +523 -0
- package/dist/components/ez-modal.js +6 -0
- package/dist/components/ez-modal2.js +82 -0
- package/dist/components/ez-number-input.js +115 -0
- package/dist/components/ez-popover.js +145 -0
- package/dist/components/ez-popup.js +67 -0
- package/dist/components/ez-search.js +100 -0
- package/dist/components/ez-tabselector.js +6 -0
- package/dist/components/ez-tabselector2.js +213 -0
- package/dist/components/ez-text-area.js +137 -0
- package/dist/components/ez-text-input.js +6 -0
- package/dist/components/ez-text-input2.js +223 -0
- package/dist/components/ez-time-input.js +153 -0
- package/dist/components/ez-toast.js +64 -0
- package/dist/components/ez-upload.js +382 -0
- package/dist/components/grid-config.js +6 -0
- package/dist/components/grid-config2.js +318 -0
- package/dist/components/select-box.js +6 -0
- package/dist/components/select-box2.js +47 -0
- package/dist/components/snk-application.js +2 -52
- package/dist/components/test-du.js +101 -0
- package/dist/esm/ApplicationUtils-e0b6d857.js +37 -0
- package/dist/esm/AssetsUtils-6e6624dc.js +22 -0
- package/dist/esm/CSSVarsUtils-0787c3f3.js +17 -0
- package/dist/esm/_commonjsHelpers-9943807e.js +17 -0
- package/dist/esm/ez-action-chip.entry.js +23 -0
- package/dist/esm/ez-application.entry.js +22 -0
- package/dist/esm/ez-button_4.entry.js +653 -0
- package/dist/esm/ez-calendar.entry.js +219 -0
- package/dist/esm/ez-collapsible-box.entry.js +43 -0
- package/dist/esm/ez-combo-box.entry.js +274 -0
- package/dist/esm/ez-date-input.entry.js +98 -0
- package/dist/esm/ez-date-time-input.entry.js +141 -0
- package/dist/esm/ez-dialog.entry.js +85 -0
- package/dist/esm/ez-form.entry.js +781 -0
- package/dist/esm/ez-grid.entry.js +110481 -0
- package/dist/esm/ez-icon.entry.js +37 -0
- package/dist/esm/ez-label-chip.entry.js +100 -0
- package/dist/esm/ez-modal_2.entry.js +311 -0
- package/dist/esm/ez-number-input.entry.js +82 -0
- package/dist/esm/ez-popover.entry.js +116 -0
- package/dist/esm/ez-popup.entry.js +44 -0
- package/dist/esm/ez-search.entry.js +60 -0
- package/dist/esm/ez-tabselector.entry.js +194 -0
- package/dist/esm/ez-text-area.entry.js +110 -0
- package/dist/esm/ez-text-input.entry.js +197 -0
- package/dist/esm/ez-time-input.entry.js +114 -0
- package/dist/esm/ez-toast.entry.js +40 -0
- package/dist/esm/ez-upload.entry.js +352 -0
- package/dist/esm/index-35088a3f.js +1740 -0
- package/dist/esm/loader.js +2 -2
- package/dist/esm/sankhyablocks.js +2 -2
- package/dist/esm/snk-application.entry.js +3 -53
- package/dist/esm/test-du.entry.js +72 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-action-chip/ez-action-chip.css +67 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-application/ez-application.css +3 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-button/ez-button.css +180 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-calendar/ez-calendar.css +319 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-check/ez-check.css +327 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css +162 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-combo-box/ez-combo-box.css +217 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-date-input/ez-date-input.css +49 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-date-time-input/ez-date-time-input.css +44 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-dialog/ez-dialog.css +527 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-form/ez-form.css +5 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-grid/ez-grid.css +31 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-grid/subcomponents/gridconfig/grid-config.css +129 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-grid/subcomponents/select-box/select-box.css +10 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-icon/ez-icon.css +176 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-label-chip/ez-label-chip.css +139 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-list/ez-list.css +335 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-modal/ez-modal.css +358 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-number-input/ez-number-input.css +4 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-popover/ez-popover.css +44 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-popup/ez-popup.css +405 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-search/ez-search.css +3 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-tabselector/ez-tabselector.css +138 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-text-area/ez-text-area.css +165 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-text-input/ez-text-input.css +196 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-time-input/ez-time-input.css +10 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-toast/ez-toast.css +127 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-upload/ez-upload.css +568 -0
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/test-du/test-du.css +3 -0
- package/dist/sankhyablocks/p-0183d259.entry.js +1 -0
- package/dist/sankhyablocks/p-01f23a70.entry.js +1 -0
- package/dist/sankhyablocks/p-07c32f68.entry.js +1 -0
- package/dist/sankhyablocks/p-0f90499d.entry.js +1 -0
- package/dist/sankhyablocks/p-105724a3.entry.js +1 -0
- package/dist/sankhyablocks/p-112455b1.js +1 -0
- package/dist/sankhyablocks/p-2ac02d48.entry.js +1 -0
- package/dist/sankhyablocks/p-35364a97.entry.js +1 -0
- package/dist/sankhyablocks/p-3f6aa9a7.entry.js +1 -0
- package/dist/sankhyablocks/p-4811bc0a.entry.js +369 -0
- package/dist/sankhyablocks/p-5f9af495.entry.js +1 -0
- package/dist/sankhyablocks/p-60967cf0.js +1 -0
- package/dist/sankhyablocks/p-70ad6c16.entry.js +1 -0
- package/dist/sankhyablocks/p-710bfffe.entry.js +1 -0
- package/dist/sankhyablocks/p-73397a0f.entry.js +57 -0
- package/dist/sankhyablocks/p-811b4b9d.js +1 -0
- package/dist/sankhyablocks/p-813fe4f7.js +1 -0
- package/dist/sankhyablocks/p-85a9446b.js +2 -0
- package/dist/sankhyablocks/p-89a1100f.entry.js +1 -0
- package/dist/sankhyablocks/p-8b543003.entry.js +1 -0
- package/dist/sankhyablocks/p-9750632b.entry.js +1 -0
- package/dist/sankhyablocks/p-a96272f7.entry.js +1 -0
- package/dist/sankhyablocks/p-ac8842e5.entry.js +1 -0
- package/dist/sankhyablocks/p-ba64cc41.entry.js +1 -0
- package/dist/sankhyablocks/p-c1ede043.entry.js +1 -0
- package/dist/sankhyablocks/p-d90ebb85.entry.js +1 -0
- package/dist/sankhyablocks/p-e5355a29.entry.js +1 -0
- package/dist/sankhyablocks/p-ef04b633.entry.js +1 -0
- package/dist/sankhyablocks/p-f6db07fb.entry.js +1 -0
- package/dist/sankhyablocks/p-f80cabc7.entry.js +1 -0
- package/dist/sankhyablocks/p-fcd9bd92.entry.js +1 -0
- package/dist/sankhyablocks/sankhyablocks.esm.js +1 -1
- package/package.json +7 -4
- package/react/components.d.ts +29 -0
- package/react/components.js +29 -0
- package/react/components.js.map +1 -1
- package/dist/cjs/index-4720dab8.js +0 -735
- package/dist/esm/index-72d4e2e0.js +0 -709
- package/dist/sankhyablocks/p-45635e4f.entry.js +0 -57
- package/dist/sankhyablocks/p-a33afc3b.js +0 -2
- package/dist/types/temp/ApplicationUtils.d.ts +0 -11
|
@@ -1,36 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
static async showDialog(title, message, icon = null, confirm, critical = false) {
|
|
3
|
-
return new Promise(resolve => {
|
|
4
|
-
let dialog = document.querySelector("ez-dialog");
|
|
5
|
-
if (!dialog) {
|
|
6
|
-
dialog = document.createElement("ez-dialog");
|
|
7
|
-
window.document.body.appendChild(dialog);
|
|
8
|
-
}
|
|
9
|
-
dialog.show(title, message, critical, confirm, icon).then(ok => resolve(ok));
|
|
10
|
-
});
|
|
11
|
-
}
|
|
12
|
-
static async alert(title, message, icon = null) {
|
|
13
|
-
return ApplicationUtils.showDialog(title, message, icon, false, false);
|
|
14
|
-
}
|
|
15
|
-
static async error(title, message, icon = null) {
|
|
16
|
-
return ApplicationUtils.showDialog(title, message, icon, false, true);
|
|
17
|
-
}
|
|
18
|
-
static async confirm(title, message, icon = null, critical = false) {
|
|
19
|
-
return ApplicationUtils.showDialog(title, message, icon, true, critical);
|
|
20
|
-
}
|
|
21
|
-
static async info(message, options = ApplicationUtils.defaultMessageOptions) {
|
|
22
|
-
let toast = document.querySelector("ez-toast");
|
|
23
|
-
if (!toast) {
|
|
24
|
-
toast = document.createElement("ez-toast");
|
|
25
|
-
window.document.body.appendChild(toast);
|
|
26
|
-
}
|
|
27
|
-
toast.canClose = options.canClose;
|
|
28
|
-
toast.message = message;
|
|
29
|
-
toast.fadeTime = 4000;
|
|
30
|
-
toast.show();
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
ApplicationUtils.defaultMessageOptions = {
|
|
34
|
-
canClose: true
|
|
35
|
-
};
|
|
36
|
-
|
|
1
|
+
class ApplicationUtils {
|
|
2
|
+
static async showDialog(title, message, icon = null, confirm, critical = false) {
|
|
3
|
+
return new Promise(resolve => {
|
|
4
|
+
let dialog = document.querySelector("ez-dialog");
|
|
5
|
+
if (!dialog) {
|
|
6
|
+
dialog = document.createElement("ez-dialog");
|
|
7
|
+
window.document.body.appendChild(dialog);
|
|
8
|
+
}
|
|
9
|
+
dialog.show(title, message, critical, confirm, icon).then(ok => resolve(ok));
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
static async alert(title, message, icon = null) {
|
|
13
|
+
return ApplicationUtils.showDialog(title, message, icon, false, false);
|
|
14
|
+
}
|
|
15
|
+
static async error(title, message, icon = null) {
|
|
16
|
+
return ApplicationUtils.showDialog(title, message, icon, false, true);
|
|
17
|
+
}
|
|
18
|
+
static async confirm(title, message, icon = null, critical = false) {
|
|
19
|
+
return ApplicationUtils.showDialog(title, message, icon, true, critical);
|
|
20
|
+
}
|
|
21
|
+
static async info(message, options = ApplicationUtils.defaultMessageOptions) {
|
|
22
|
+
let toast = document.querySelector("ez-toast");
|
|
23
|
+
if (!toast) {
|
|
24
|
+
toast = document.createElement("ez-toast");
|
|
25
|
+
window.document.body.appendChild(toast);
|
|
26
|
+
}
|
|
27
|
+
toast.canClose = options.canClose;
|
|
28
|
+
toast.message = message;
|
|
29
|
+
toast.fadeTime = 4000;
|
|
30
|
+
toast.show();
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
ApplicationUtils.defaultMessageOptions = {
|
|
34
|
+
canClose: true
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export { ApplicationUtils as A };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { getAssetPath, setAssetPath } from '@stencil/core/internal/client';
|
|
2
|
+
|
|
3
|
+
const getSpritePath = (sprite) => `${getContextAssetsPath("../assets/actions-sprite.svg")}#${sprite}`;
|
|
4
|
+
let ctxLoaded = false;
|
|
5
|
+
function getContextAssetsPath(resource) {
|
|
6
|
+
if (!ctxLoaded) {
|
|
7
|
+
const scriptElem = document.querySelector("script[data-ezui-assets-url]");
|
|
8
|
+
if (scriptElem) {
|
|
9
|
+
let assetsPath = scriptElem.dataset.ezuiAssetsUrl;
|
|
10
|
+
if (assetsPath) {
|
|
11
|
+
if (assetsPath.startsWith('/')) {
|
|
12
|
+
assetsPath = window.location.origin + assetsPath;
|
|
13
|
+
}
|
|
14
|
+
setAssetPath(assetsPath);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
ctxLoaded = true;
|
|
18
|
+
}
|
|
19
|
+
return getAssetPath(resource);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export { getSpritePath as g };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
class CSSVarsUtils {
|
|
2
|
+
static applyVarsTextInput(host, child) {
|
|
3
|
+
if (child) {
|
|
4
|
+
CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--background-color');
|
|
5
|
+
CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--border-color');
|
|
6
|
+
CSSVarsUtils.applyIfExists(host, child, '--ez-text-input--height');
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
static applyIfExists(host, element, varName) {
|
|
10
|
+
const prop = getComputedStyle(host).getPropertyValue(varName);
|
|
11
|
+
if (prop) {
|
|
12
|
+
element.style.setProperty(varName, prop);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export { CSSVarsUtils as C };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
2
|
+
|
|
3
|
+
function createCommonjsModule(fn, basedir, module) {
|
|
4
|
+
return module = {
|
|
5
|
+
path: basedir,
|
|
6
|
+
exports: {},
|
|
7
|
+
require: function (path, base) {
|
|
8
|
+
return commonjsRequire();
|
|
9
|
+
}
|
|
10
|
+
}, fn(module, module.exports), module.exports;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
function commonjsRequire () {
|
|
14
|
+
throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export { commonjsGlobal as a, createCommonjsModule as c };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
|
+
|
|
3
|
+
const ezActionChipCss = ":host{--ez-action-chip--height:36px;--ez-action-chip--border-radius:var(--border--radius-large, 24px);--ez-action-chip__border:1px solid;--ez-action-chip__border-color-strokes:var(--color--strokes, #DCE0E8);--ez-action-chip--font-size:var(--text--medium, 14px);--ez-action-chip--font-family:var(--font-pattern, Arial);--ez-action-chip--font-weight:var(--text-weight--large, 500);--ez-action-chip__label--title--primary:var(--title--primary, #919191);--ez-action-chip__label-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ez-action-chip__label__default--background-color--hover:var(--color--primary-200, #f2faf8);--ez-action-chip__label__default--border-color--hover:var(--color--primary-600, #007a5a)}.label__container{width:fit-content;display:flex;flex-wrap:wrap;position:relative;background-color:#FFFFFF;align-items:center;align-self:center;cursor:pointer;color:var(--ez-action-chip__label--title--primary);fill:var(--ez-action-chip__label--title--primary);border:var(--ez-action-chip__border);border-radius:var(--ez-action-chip--border-radius);border-color:var(--ez-action-chip__border-color-strokes);padding-right:var(--space--medium, 12px);padding-left:var(--space--medium, 12px)}.label__container:hover{border-color:var(--ez-action-chip__label__default--border-color--hover);background-color:var(--ez-action-chip__label__default--background-color--hover)}label{display:flex;align-items:center;font-weight:var(--text-weight--large, 600);cursor:pointer;height:var(--ez-action-chip--height);font-family:var(--ez-action-chip--font-family);font-size:var(--ez-action-chip--font-size)}";
|
|
4
|
+
|
|
5
|
+
const EzLabelChip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
|
+
constructor() {
|
|
7
|
+
super();
|
|
8
|
+
this.__registerHost();
|
|
9
|
+
this.__attachShadow();
|
|
10
|
+
this.actionClick = createEvent(this, "actionClick", 7);
|
|
11
|
+
/**
|
|
12
|
+
* Deixa o componente disponível ou não para seleção.
|
|
13
|
+
*/
|
|
14
|
+
this.enabled = true;
|
|
15
|
+
}
|
|
16
|
+
//---------------------------------------------
|
|
17
|
+
// Lifecycle web component
|
|
18
|
+
//---------------------------------------------
|
|
19
|
+
render() {
|
|
20
|
+
return (h("div", { onClick: () => this.actionClick.emit(), class: "label__container" }, h("slot", { name: "leftIcon" }), h("label", null, this.label), h("slot", { name: "rightIcon" })));
|
|
21
|
+
}
|
|
22
|
+
static get style() { return ezActionChipCss; }
|
|
23
|
+
}, [1, "ez-action-chip", {
|
|
24
|
+
"label": [513],
|
|
25
|
+
"enabled": [516]
|
|
26
|
+
}]);
|
|
27
|
+
function defineCustomElement$1() {
|
|
28
|
+
if (typeof customElements === "undefined") {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
const components = ["ez-action-chip"];
|
|
32
|
+
components.forEach(tagName => { switch (tagName) {
|
|
33
|
+
case "ez-action-chip":
|
|
34
|
+
if (!customElements.get(tagName)) {
|
|
35
|
+
customElements.define(tagName, EzLabelChip);
|
|
36
|
+
}
|
|
37
|
+
break;
|
|
38
|
+
} });
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const EzActionChip = EzLabelChip;
|
|
42
|
+
const defineCustomElement = defineCustomElement$1;
|
|
43
|
+
|
|
44
|
+
export { EzActionChip, defineCustomElement };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
|
+
|
|
3
|
+
const ezApplicationCss = "";
|
|
4
|
+
|
|
5
|
+
const EzApplication$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
|
+
constructor() {
|
|
7
|
+
super();
|
|
8
|
+
this.__registerHost();
|
|
9
|
+
this.applicationLoaded = createEvent(this, "applicationLoaded", 7);
|
|
10
|
+
}
|
|
11
|
+
componentWillLoad() {
|
|
12
|
+
//Initizalize application
|
|
13
|
+
}
|
|
14
|
+
componentDidLoad() {
|
|
15
|
+
this.applicationLoaded.emit(true);
|
|
16
|
+
}
|
|
17
|
+
render() {
|
|
18
|
+
return (h("div", null));
|
|
19
|
+
}
|
|
20
|
+
static get style() { return ezApplicationCss; }
|
|
21
|
+
}, [0, "ez-application"]);
|
|
22
|
+
function defineCustomElement$1() {
|
|
23
|
+
if (typeof customElements === "undefined") {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
const components = ["ez-application"];
|
|
27
|
+
components.forEach(tagName => { switch (tagName) {
|
|
28
|
+
case "ez-application":
|
|
29
|
+
if (!customElements.get(tagName)) {
|
|
30
|
+
customElements.define(tagName, EzApplication$1);
|
|
31
|
+
}
|
|
32
|
+
break;
|
|
33
|
+
} });
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
const EzApplication = EzApplication$1;
|
|
37
|
+
const defineCustomElement = defineCustomElement$1;
|
|
38
|
+
|
|
39
|
+
export { EzApplication, defineCustomElement };
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
|
+
import { d as defineCustomElement$1 } from './ez-icon2.js';
|
|
3
|
+
|
|
4
|
+
const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--text--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover--background-color:var(--background--strong, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--ez-button--border);--ez-button--focus--box-shadow:none;--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--ez-button--min-width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border)}button:hover{background-color:var(--ez-button--hover--background-color)}button:focus{outline:none;border:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;cursor:no-drop}button.icon{padding:0px}button.small{width:32px;min-width:32px;height:32px}button.medium{width:42px;min-width:42px;height:42px}button.large{width:52px;min-width:52px;height:52px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight)}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";
|
|
5
|
+
|
|
6
|
+
const EzButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super();
|
|
9
|
+
this.__registerHost();
|
|
10
|
+
this.__attachShadow();
|
|
11
|
+
/**
|
|
12
|
+
* Deixa o botão disponível ou não para interação com o usuário.
|
|
13
|
+
*/
|
|
14
|
+
this.enabled = true;
|
|
15
|
+
/**
|
|
16
|
+
* Define o modo de uso do botão; opções: icon, link e regular
|
|
17
|
+
*/
|
|
18
|
+
this.mode = "regular";
|
|
19
|
+
/**
|
|
20
|
+
* É possível escolher entre [small,medium,large] (somente para os modos "icon" e "link")
|
|
21
|
+
*/
|
|
22
|
+
this.size = "medium";
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Realiza o foco no botão
|
|
26
|
+
*/
|
|
27
|
+
async setFocus() {
|
|
28
|
+
this._button.focus();
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Remove o foco no botão
|
|
32
|
+
*/
|
|
33
|
+
async setBlur() {
|
|
34
|
+
this._button.blur();
|
|
35
|
+
}
|
|
36
|
+
getIconSize() {
|
|
37
|
+
return this.size;
|
|
38
|
+
}
|
|
39
|
+
handleSlotChange(ev) {
|
|
40
|
+
const slot = ev.target;
|
|
41
|
+
const content = slot.assignedElements()[0];
|
|
42
|
+
if (this.mode == "link") {
|
|
43
|
+
content.style.display = "inline";
|
|
44
|
+
if (slot.name == "leftIcon") {
|
|
45
|
+
content.style.paddingRight = "var(--ez-button__inline__icon--padding)";
|
|
46
|
+
}
|
|
47
|
+
else if (slot.name == "rightIcon") {
|
|
48
|
+
content.style.paddingLeft = "var(--ez-button__inline__icon--padding)";
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
content.style.setProperty('--ez-icon--color', 'var(--ez-icon--color)');
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
render() {
|
|
56
|
+
if (this.mode == "icon") {
|
|
57
|
+
return (h("button", { class: "icon " + this.size, type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => {
|
|
58
|
+
if (!this.enabled)
|
|
59
|
+
evt.stopPropagation();
|
|
60
|
+
} })));
|
|
61
|
+
}
|
|
62
|
+
else if (this.mode == "label-icon") {
|
|
63
|
+
return (h("div", { class: "label-icon" }, h("button", { class: "icon", type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: "large", onClick: evt => {
|
|
64
|
+
if (!this.enabled)
|
|
65
|
+
evt.stopPropagation();
|
|
66
|
+
} })), h("label", { title: this.label }, this.label)));
|
|
67
|
+
}
|
|
68
|
+
else if (this.mode == "link") {
|
|
69
|
+
return (h("a", { class: this.size, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
return (h("button", { type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
static get style() { return ezButtonCss; }
|
|
76
|
+
}, [1, "ez-button", {
|
|
77
|
+
"label": [513],
|
|
78
|
+
"enabled": [516],
|
|
79
|
+
"mode": [513],
|
|
80
|
+
"image": [513],
|
|
81
|
+
"iconName": [513, "icon-name"],
|
|
82
|
+
"size": [513],
|
|
83
|
+
"setFocus": [64],
|
|
84
|
+
"setBlur": [64]
|
|
85
|
+
}]);
|
|
86
|
+
function defineCustomElement() {
|
|
87
|
+
if (typeof customElements === "undefined") {
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
const components = ["ez-button", "ez-icon"];
|
|
91
|
+
components.forEach(tagName => { switch (tagName) {
|
|
92
|
+
case "ez-button":
|
|
93
|
+
if (!customElements.get(tagName)) {
|
|
94
|
+
customElements.define(tagName, EzButton);
|
|
95
|
+
}
|
|
96
|
+
break;
|
|
97
|
+
case "ez-icon":
|
|
98
|
+
if (!customElements.get(tagName)) {
|
|
99
|
+
defineCustomElement$1();
|
|
100
|
+
}
|
|
101
|
+
break;
|
|
102
|
+
} });
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
export { EzButton as E, defineCustomElement as d };
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h } from '@stencil/core/internal/client';
|
|
2
|
+
import { FloatingManager } from '@sankhyalabs/core';
|
|
3
|
+
|
|
4
|
+
const ezCalendarCss = ":host{--ez-calendar--font-family:var(--font-pattern, Arial);--ez-calendar--color:var(--title--primary, #626e82);--ez-calendar--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--ez-calendar__body--background-color:var(--background--xlight, #FFF);--ez-calendar__time--background-color:var(--background--xlight, #FAFAFA);--ez-calendar__body--padding:var(--space--medium, 12px) var(--space--small, 6px);--ez-calendar__body--border-radius:var(--border--radius-medium, 12px);--ez-calendar__body--shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-container--z-index:var(--more-visible, 2);--ez-calendar__header-line--stroke:1px;--ez-calendar__header-line--color:var(--color--strokes, #C0C0C0);--ez-calendar__nav-btn--fill:var(--text--primary, #008561);--ez-calendar__nav-btn--hover--fill:var(--color--primary, #350404);--ez-calendar__nav-btn--width:10px;--ez-calendar__nav-btn--height:16px;--ez-calendar__nav-btn--previous-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--ez-calendar__nav-btn--next-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');--ez-calendar__cell--margin:0px 1.5px;--ez-calendar__cell--width:var(--space--large, 24px);--ez-calendar__cell--padding:1.5px 0px;--ez-calendar__cell--border-radius:var(--border--radius-small, 6px);--ez-calendar__cell--over--background-color:var(--color--primary, #E2F4EF);--ez-calendar__cell--over--color:var(--color--primary-300, #008561);--ez-calendar__cell--outset--color:var(--color--disable-primary, #E5EAF0);--ez-calendar__cell--selected--background-color:var(--color--primary, #008561);--ez-calendar__cell--selected--color:var(--color--inverted, #FFF);--ez-calendar__btn-today--color:var(--color--primary);--ez-calendar__btn-today--hover--background-color:var(--color--primary-300, #E2F4EF);--ez-calendar__btn-today--border-radius:var(--border--radius-small, 6px);position:relative;display:flex;user-select:none}.calendar__container{display:flex;z-index:var(--more-visible, 2)}.calendar{z-index:var(--more-visible, 2);display:flex;flex-direction:column;background-color:var(--ez-calendar__body--background-color);padding:var(--ez-calendar__body--padding);border-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__header{display:flex;justify-content:space-between;padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color)}.calendar__btn-next,.calendar__btn-previous{outline:none;border:none;background-color:unset;cursor:pointer;padding:0px}.calendar__btn-next::after,.calendar__btn-previous::after{content:'';display:flex;background-color:var(--ez-calendar__nav-btn--fill);width:var(--ez-calendar__nav-btn--width);height:var(--ez-calendar__nav-btn--height)}.calendar__btn-previous::after{-webkit-mask-image:var(--ez-calendar__nav-btn--previous-image);mask-image:var(--ez-calendar__nav-btn--previous-image)}.calendar__btn-next::after{-webkit-mask-image:var(--ez-calendar__nav-btn--next-image);mask-image:var(--ez-calendar__nav-btn--next-image)}.calendar__btn-next:hover::after,.calendar__btn-previous:hover::after{background-color:var(--ez-calendar__nav-btn--hover--fill)}.calendar__lbl-month{font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__line{display:flex;padding:0px;margin:0px}.calendar__cell{display:flex;justify-content:center;align-content:center;cursor:pointer;font-size:var(--text--extra-small, 10px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);padding:var(--ez-calendar__cell--padding);margin:var(--ez-calendar__cell--margin);min-width:var(--ez-calendar__cell--width);border-radius:var(--ez-calendar__cell--border-radius)}.calendar__cell:hover{background-color:var(--ez-calendar__cell--over--background-color);color:var(--ez-calendar__cell--over--color)}.calendar__cell--secondary{color:var(--ez-calendar__cell--outset--color)}.calendar__cell--unselectable:hover{background-color:unset;border-radius:unset;cursor:unset}.calendar__cell--unselectable{font-weight:var(--text-weight--large, 600);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__cell--selected,.calendar__cell--selected:hover{background-color:var(--ez-calendar__cell--selected--background-color);color:var(--ez-calendar__cell--selected--color)}.calendar__footer{display:flex;flex-direction:column}.calendar__btn-today{border:none;background-color:unset;cursor:pointer;font-weight:var(--text-weight--large, 600);font-size:var(--title--extra-small, 12px);padding:0px;font-family:var(--ez-calendar--font-family);text-shadow:var(--ez-calendar--text-shadow);color:var(--ez-calendar__btn-today--color);border-radius:var(--ez-calendar__btn-today--border-radius)}.calendar__btn-today:hover{background-color:var(--ez-calendar__btn-today--hover--background-color)}section{display:flex}.calendar-time{margin-left:-10px;display:flex;flex-direction:column;padding:12px 0px 0px 10px;background-color:var(--ez-calendar__time--background-color);border-top-right-radius:var(--ez-calendar__body--border-radius);border-bottom-right-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__column{height:136px;padding:0px;margin:0px;overflow:auto}.calendar__column::-webkit-scrollbar{width:0px;max-width:0px;min-width:0px}.calendar-time__header{padding-left:var(--space--small, 6px);padding-right:var(--space--small, 6px);display:flex;justify-content:space-between;padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.separatorTime{color:#A2ABB9;padding:0px 1px;line-height:16px;font-size:17px;font-weight:normal}.endHidden{-webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 48px), transparent 100%)}.calendar__column .calendar__cell{margin:0px;padding:1.5px 1.5px}";
|
|
5
|
+
|
|
6
|
+
const EzCalendar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super();
|
|
9
|
+
this.__registerHost();
|
|
10
|
+
this.__attachShadow();
|
|
11
|
+
this.ezChange = createEvent(this, "ezChange", 7);
|
|
12
|
+
this._firstRender = true;
|
|
13
|
+
this._todayLabel = "Hoje";
|
|
14
|
+
this._weekDayLabels = ["D", "S", "T", "Q", "Q", "S", "S"];
|
|
15
|
+
this._monthLabels = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
|
|
16
|
+
this._hoursLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
|
|
17
|
+
this._minutosLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
|
|
18
|
+
/**
|
|
19
|
+
* A data selecionada no calendário
|
|
20
|
+
*/
|
|
21
|
+
this.value = new Date();
|
|
22
|
+
/**
|
|
23
|
+
* No modo floating o calendário só se tornará visível
|
|
24
|
+
* quando o método show() for acionado.
|
|
25
|
+
*/
|
|
26
|
+
this.floating = false;
|
|
27
|
+
/**
|
|
28
|
+
* Exibe ou não as horas e minutos no calendario
|
|
29
|
+
*/
|
|
30
|
+
this.time = false;
|
|
31
|
+
/**
|
|
32
|
+
* Exibe ou não os segundos no calendario
|
|
33
|
+
*/
|
|
34
|
+
this.showSeconds = false;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Usado no modo floating. Faz com que o componente seja exibido.
|
|
38
|
+
* É possível determinar ajustes de posicionamento através dos parâmetros
|
|
39
|
+
* top, left, bottom e right. Esses parâmetros devem ser informados como
|
|
40
|
+
* strings no formato css.
|
|
41
|
+
*/
|
|
42
|
+
async show(top, left, bottom, right) {
|
|
43
|
+
if (this.floating) {
|
|
44
|
+
this._floatingID = FloatingManager.float(this._box, this._container, { autoClose: true, top, left, bottom, right });
|
|
45
|
+
window.requestAnimationFrame(() => {
|
|
46
|
+
this._box.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
47
|
+
});
|
|
48
|
+
this.scroll();
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Método necessário para ajustar o posicionamento do calendar acima ou abaixo do ez-date-input conforme a disponibilidade de espaço.
|
|
53
|
+
*/
|
|
54
|
+
async fitVertical(topOffset, bottomOffset) {
|
|
55
|
+
const neededHeight = this._container.getBoundingClientRect().bottom + this._calendarHeight;
|
|
56
|
+
const availableBottom = (window.innerHeight || document.documentElement.clientHeight) > neededHeight;
|
|
57
|
+
if (availableBottom) {
|
|
58
|
+
this.show(topOffset + "px", undefined, "unset");
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
this.show("unset", undefined, bottomOffset + "px");
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Usado no modo floating. Faz com que o componente seja ocultado.
|
|
66
|
+
*/
|
|
67
|
+
async hide() {
|
|
68
|
+
if (this._floatingID !== undefined) {
|
|
69
|
+
FloatingManager.close(this._floatingID);
|
|
70
|
+
this._floatingID = undefined;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
valueChanged() {
|
|
74
|
+
if (this.value) {
|
|
75
|
+
this._currentPosition.setTime(this.value.getTime());
|
|
76
|
+
this._currentPosition.setDate(1);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
getMonthLabel() {
|
|
80
|
+
return this._monthLabels[this._currentPosition.getMonth()] + " " + this._currentPosition.getFullYear();
|
|
81
|
+
}
|
|
82
|
+
isSelectedDate(d) {
|
|
83
|
+
if (this.value) {
|
|
84
|
+
return this.value.getDate() == d.getDate() && this.value.getMonth() == d.getMonth() && this.value.getFullYear() == d.getFullYear();
|
|
85
|
+
}
|
|
86
|
+
return false;
|
|
87
|
+
}
|
|
88
|
+
changeMonth(offset) {
|
|
89
|
+
this._currentPosition.setMonth(this._currentPosition.getMonth() + offset);
|
|
90
|
+
forceUpdate(this);
|
|
91
|
+
}
|
|
92
|
+
selectDate(d) {
|
|
93
|
+
let newDate = d;
|
|
94
|
+
if (this.value && (this.time || this.showSeconds)) {
|
|
95
|
+
newDate.setHours(this.value.getHours());
|
|
96
|
+
newDate.setMinutes(this.value.getMinutes());
|
|
97
|
+
if (this.showSeconds) {
|
|
98
|
+
newDate.setSeconds(this.value.getSeconds());
|
|
99
|
+
}
|
|
100
|
+
else {
|
|
101
|
+
newDate.setSeconds(0);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
this.value = newDate;
|
|
105
|
+
this.ezChange.emit(this.value);
|
|
106
|
+
}
|
|
107
|
+
selectHours(hour) {
|
|
108
|
+
if (!this.value) {
|
|
109
|
+
this.value = new Date();
|
|
110
|
+
}
|
|
111
|
+
this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), hour, this.value.getMinutes(), this.value.getSeconds());
|
|
112
|
+
this.ezChange.emit(this.value);
|
|
113
|
+
}
|
|
114
|
+
selectMinutes(minute) {
|
|
115
|
+
if (!this.value) {
|
|
116
|
+
this.value = new Date();
|
|
117
|
+
}
|
|
118
|
+
this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), this.value.getHours(), minute, this.value.getSeconds());
|
|
119
|
+
this.ezChange.emit(this.value);
|
|
120
|
+
}
|
|
121
|
+
selectSeconds(second) {
|
|
122
|
+
if (!this.value) {
|
|
123
|
+
this.value = new Date();
|
|
124
|
+
}
|
|
125
|
+
this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), this.value.getHours(), this.value.getMinutes(), second);
|
|
126
|
+
this.ezChange.emit(this.value);
|
|
127
|
+
}
|
|
128
|
+
updateScroll(element) {
|
|
129
|
+
if (element) {
|
|
130
|
+
const { scrollHeight, clientHeight, scrollTop } = element;
|
|
131
|
+
const remainingScroll = scrollHeight - clientHeight - Math.ceil(scrollTop);
|
|
132
|
+
if (remainingScroll > 0) {
|
|
133
|
+
element.classList.add("endHidden");
|
|
134
|
+
}
|
|
135
|
+
else {
|
|
136
|
+
element.classList.remove("endHidden");
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
componentDidRender() {
|
|
141
|
+
if (this.floating && this._firstRender) {
|
|
142
|
+
this._calendarHeight = this._box.clientHeight;
|
|
143
|
+
this._box.remove();
|
|
144
|
+
this._firstRender = false;
|
|
145
|
+
}
|
|
146
|
+
this.updateScroll(this._hoursScroll);
|
|
147
|
+
this.updateScroll(this._minutesScroll);
|
|
148
|
+
this.updateScroll(this._secondsScroll);
|
|
149
|
+
}
|
|
150
|
+
componentDidLoad() {
|
|
151
|
+
this.scroll();
|
|
152
|
+
}
|
|
153
|
+
scroll() {
|
|
154
|
+
if (this.time || this.showSeconds) {
|
|
155
|
+
this._hoursScroll.scrollTop = this._hoursSelect.offsetTop - 64;
|
|
156
|
+
this._minutesScroll.scrollTop = this._minutesSelect.offsetTop - 64;
|
|
157
|
+
this.updateScroll(this._hoursScroll);
|
|
158
|
+
this.updateScroll(this._minutesScroll);
|
|
159
|
+
if (this.showSeconds) {
|
|
160
|
+
this._secondsScroll.scrollTop = this._secondsSelect.offsetTop - 64;
|
|
161
|
+
this.updateScroll(this._secondsScroll);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
render() {
|
|
166
|
+
if (this._currentPosition == null) {
|
|
167
|
+
this._currentPosition = new Date();
|
|
168
|
+
if (this.value) {
|
|
169
|
+
this._currentPosition.setTime(this.value.getTime());
|
|
170
|
+
}
|
|
171
|
+
this._currentPosition.setDate(1);
|
|
172
|
+
}
|
|
173
|
+
const firstDate = new Date();
|
|
174
|
+
firstDate.setTime(this._currentPosition.getTime());
|
|
175
|
+
firstDate.setDate(1 - firstDate.getDay());
|
|
176
|
+
return (h("section", { ref: elem => this._container = elem }, h("div", { ref: elem => this._box = elem, class: "calendar__container" }, h("div", { class: "calendar" }, h("div", { class: "calendar__header" }, h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), h("div", { class: "calendar__body" }, h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => h("div", { class: "calendar__cell calendar__cell--unselectable" }, day))), [0, 7, 14, 21, 28, 35].map(offset => h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index => {
|
|
177
|
+
const date = new Date();
|
|
178
|
+
date.setTime(firstDate.getTime());
|
|
179
|
+
date.setDate(date.getDate() + offset + index);
|
|
180
|
+
let classNames = "calendar__cell";
|
|
181
|
+
if (this._currentPosition.getMonth() != date.getMonth()) {
|
|
182
|
+
classNames += " calendar__cell--secondary";
|
|
183
|
+
}
|
|
184
|
+
else if (this.isSelectedDate(date)) {
|
|
185
|
+
classNames += " calendar__cell--selected";
|
|
186
|
+
}
|
|
187
|
+
return h("div", { class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
|
|
188
|
+
})))), h("div", { class: "calendar__footer" }, h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this._todayLabel))), (this.time || this.showSeconds) &&
|
|
189
|
+
h("div", { class: "calendar-time" }, h("div", { class: "calendar-time__header" }, h("div", null, "H"), h("div", { class: "separatorTime" }, ":"), h("div", null, "M"), this.showSeconds &&
|
|
190
|
+
h("div", { class: "separatorTime" }, ":"), this.showSeconds &&
|
|
191
|
+
h("div", null, "S")), h("div", { class: "calendar__body ", style: { display: 'flex', paddingLeft: '12px', paddingRight: '12px' } }, h("div", { class: "calendar__column", ref: elem => this._hoursScroll = elem, onScroll: () => this.updateScroll(this._hoursScroll) }, this._hoursLabel.map((offset, index) => {
|
|
192
|
+
if (index === this.value.getHours()) {
|
|
193
|
+
return (h("div", { style: { display: 'flex' }, ref: elem => this._hoursSelect = elem }, h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectHours(index) }, offset), h("div", { class: "separatorTime" }, ":")));
|
|
194
|
+
}
|
|
195
|
+
else {
|
|
196
|
+
return (h("div", { style: { display: 'flex' } }, h("div", { class: "calendar__cell", onClick: () => this.selectHours(index) }, offset), h("div", { class: "separatorTime" }, ":")));
|
|
197
|
+
}
|
|
198
|
+
})), h("div", { class: "calendar__column", ref: elem => this._minutesScroll = elem, onScroll: () => this.updateScroll(this._minutesScroll) }, this._minutosLabel.map((offset, index) => {
|
|
199
|
+
if (index === this.value.getMinutes()) {
|
|
200
|
+
return (h("div", { style: { display: 'flex' }, ref: elem => this._minutesSelect = elem }, h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectMinutes(index) }, offset), this.showSeconds && h("div", { class: "separatorTime" }, ":")));
|
|
201
|
+
}
|
|
202
|
+
else {
|
|
203
|
+
return (h("div", { style: { display: 'flex' } }, h("div", { class: "calendar__cell", onClick: () => this.selectMinutes(index) }, offset), this.showSeconds && h("div", { class: "separatorTime" }, ":")));
|
|
204
|
+
}
|
|
205
|
+
})), this.showSeconds &&
|
|
206
|
+
h("div", { class: "calendar__column", ref: elem => this._secondsScroll = elem, onScroll: () => this.updateScroll(this._secondsScroll) }, this._minutosLabel.map((offset, index) => {
|
|
207
|
+
if (index === this.value.getSeconds()) {
|
|
208
|
+
return (h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectSeconds(index), ref: elem => this._secondsSelect = elem }, offset));
|
|
209
|
+
}
|
|
210
|
+
else {
|
|
211
|
+
return (h("div", { class: "calendar__cell", onClick: () => this.selectSeconds(index) }, offset));
|
|
212
|
+
}
|
|
213
|
+
})))))));
|
|
214
|
+
}
|
|
215
|
+
static get watchers() { return {
|
|
216
|
+
"value": ["valueChanged"]
|
|
217
|
+
}; }
|
|
218
|
+
static get style() { return ezCalendarCss; }
|
|
219
|
+
}, [1, "ez-calendar", {
|
|
220
|
+
"value": [1040],
|
|
221
|
+
"floating": [516],
|
|
222
|
+
"time": [516],
|
|
223
|
+
"showSeconds": [516, "show-seconds"],
|
|
224
|
+
"show": [64],
|
|
225
|
+
"fitVertical": [64],
|
|
226
|
+
"hide": [64]
|
|
227
|
+
}]);
|
|
228
|
+
function defineCustomElement() {
|
|
229
|
+
if (typeof customElements === "undefined") {
|
|
230
|
+
return;
|
|
231
|
+
}
|
|
232
|
+
const components = ["ez-calendar"];
|
|
233
|
+
components.forEach(tagName => { switch (tagName) {
|
|
234
|
+
case "ez-calendar":
|
|
235
|
+
if (!customElements.get(tagName)) {
|
|
236
|
+
customElements.define(tagName, EzCalendar);
|
|
237
|
+
}
|
|
238
|
+
break;
|
|
239
|
+
} });
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
export { EzCalendar as E, defineCustomElement as d };
|