wj-elements 0.0.26 → 0.0.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/README.md +31 -0
- package/dist/assets/tags.json +32993 -0
- package/dist/style.css +6 -0
- package/dist/wj-breadcrumb.js +5 -1
- package/dist/wj-breadcrumbs.js +3 -1
- package/dist/wj-button.js +1 -1
- package/dist/wj-dropdown.js +0 -3
- package/dist/wj-icon-picker.js +8 -2
- package/dist/wj-options.js +2 -4
- package/dist/wj-popup.js +1 -1
- package/dist/wj-select.js +1 -1
- package/dist/wj-split-view.js +2 -2
- package/dist/wj-thumbnail.js +1 -1
- package/dist/wj-toolbar.js +1 -1
- package/package.json +2 -2
package/dist/style.css
CHANGED
|
@@ -167,6 +167,12 @@
|
|
|
167
167
|
--wj-color-contrast-medium-a: rgba(33, 33, 33, 0.62);
|
|
168
168
|
--wj-color-contrast-high-a: rgba(33, 33, 33, 0.81);
|
|
169
169
|
}
|
|
170
|
+
:root *,
|
|
171
|
+
:host *,
|
|
172
|
+
.wj-theme-light *,
|
|
173
|
+
.light * {
|
|
174
|
+
box-sizing: border-box !important;
|
|
175
|
+
}
|
|
170
176
|
/*------------------------------------------------------------------
|
|
171
177
|
[5@mixin Typography]
|
|
172
178
|
*/
|
package/dist/wj-breadcrumb.js
CHANGED
|
@@ -37,11 +37,14 @@ class Breadcrumb extends WJElement {
|
|
|
37
37
|
if (WjElementUtils.stringToBoolean(newValue))
|
|
38
38
|
this.classList.add("collapsed");
|
|
39
39
|
} else if (name === "show-collapsed-indicator") {
|
|
40
|
-
if (WjElementUtils.stringToBoolean(newValue))
|
|
40
|
+
if (WjElementUtils.stringToBoolean(newValue)) {
|
|
41
41
|
this.showCollapsedIndicator = true;
|
|
42
|
+
this.refresh();
|
|
43
|
+
}
|
|
42
44
|
} else if (name === "last") {
|
|
43
45
|
this.active = WjElementUtils.stringToBoolean(newValue);
|
|
44
46
|
this.showSeparator = !WjElementUtils.stringToBoolean(newValue);
|
|
47
|
+
this.refresh();
|
|
45
48
|
}
|
|
46
49
|
return false;
|
|
47
50
|
}
|
|
@@ -64,6 +67,7 @@ class Breadcrumb extends WJElement {
|
|
|
64
67
|
native.appendChild(end);
|
|
65
68
|
fragment.appendChild(native);
|
|
66
69
|
if (this.showCollapsedIndicator) {
|
|
70
|
+
console.log("SOM TU");
|
|
67
71
|
fragment.appendChild(this.drawCollapsedIndicator());
|
|
68
72
|
this.classList.remove("collapsed");
|
|
69
73
|
native.classList.add("hidden");
|
package/dist/wj-breadcrumbs.js
CHANGED
|
@@ -29,6 +29,8 @@ class Breadcrumbs extends WJElement {
|
|
|
29
29
|
let itemsBeforeCollapse = +this.itemsBeforeCollapse || 1;
|
|
30
30
|
let itemsAfterCollapse = +this.itemsAfterCollapse || 1;
|
|
31
31
|
let breadcrumbs = this.getBreadcrumbs();
|
|
32
|
+
if (breadcrumbs.length === 0)
|
|
33
|
+
return;
|
|
32
34
|
let breadcrumb = breadcrumbs.findLast((e) => e);
|
|
33
35
|
breadcrumb.setAttribute("last", true);
|
|
34
36
|
const shouldCollapse = maxItems !== void 0 && breadcrumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse <= maxItems;
|
|
@@ -44,7 +46,7 @@ class Breadcrumbs extends WJElement {
|
|
|
44
46
|
}
|
|
45
47
|
}
|
|
46
48
|
getBreadcrumbs() {
|
|
47
|
-
return Array.from(this.querySelectorAll("wj-breadcrumb"));
|
|
49
|
+
return Array.from(this.querySelectorAll("wj-breadcrumb")) || [];
|
|
48
50
|
}
|
|
49
51
|
}
|
|
50
52
|
customElements.get("wj-breadcrumbs") || window.customElements.define("wj-breadcrumbs", Breadcrumbs);
|
package/dist/wj-button.js
CHANGED
|
@@ -8,7 +8,7 @@ import WJElement, { WjElementUtils, event } from "./wj-element.js";
|
|
|
8
8
|
const bool = (v) => {
|
|
9
9
|
return v === "false" || v === "null" || v === "NaN" || v === "undefined" || v === "0" ? false : !!v;
|
|
10
10
|
};
|
|
11
|
-
const styles = "/*\n[ WJ Button ]\n*/\n:host(.wj-button-solid.wj-color-primary) {\n --wj-button-background-color: var(--wj-color-primary-10);\n --wj-button-border-color: var(--wj-color-primary-11);\n --wj-button-color: var(--wj-color-contrast-0);\n}\n\n:host(.wj-button-outline.wj-color-primary) {\n --wj-button-border-color: var(--wj-color-primary-6);\n --wj-button-color: var(--wj-color-primary-6);\n}\n\n:host(.wj-button-solid.wj-color-complete) {\n --wj-button-background-color: var(--wj-color-complete-10);\n --wj-button-border-color: var(--wj-color-complete-11);\n --wj-button-color: var(--wj-color-contrast-0);\n}\n\n:host(.wj-button-outline.wj-color-complete) {\n --wj-button-border-color: var(--wj-color-complete-6);\n --wj-button-color: var(--wj-color-complete-6);\n}\n\n:host(.wj-button-solid.wj-color-success) {\n --wj-button-background-color: var(--wj-color-success-10);\n --wj-button-border-color: var(--wj-color-success-11);\n --wj-button-color: var(--wj-color-contrast-0);\n}\n\n:host(.wj-button-outline.wj-color-success) {\n --wj-button-border-color: var(--wj-color-success-6);\n --wj-button-color: var(--wj-color-success-6);\n}\n\n:host(.wj-button-solid.wj-color-warning) {\n --wj-button-background-color: var(--wj-color-warning-10);\n --wj-button-border-color: var(--wj-color-warning-11);\n --wj-button-color: var(--wj-color-black);\n}\n\n:host(.wj-button-outline.wj-color-warning) {\n --wj-button-border-color: var(--wj-color-warning-6);\n --wj-button-color: var(--wj-color-warning-6);\n}\n\n:host(.wj-button-solid.wj-color-danger) {\n --wj-button-background-color: var(--wj-color-danger-10);\n --wj-button-border-color: var(--wj-color-danger-11);\n --wj-button-color: var(--wj-color-contrast-0);\n}\n\n:host(.wj-button-outline.wj-color-danger) {\n --wj-button-border-color: var(--wj-color-danger-6);\n --wj-button-color: var(--wj-color-danger-6);\n}\n\n:host(.wj-button-solid.wj-color-neutral) {\n --wj-button-background-color: var(--wj-color-contrast-10);\n --wj-button-border-color: var(--wj-color-contrast-11);\n --wj-button-color: var(--wj-color-contrast-0);\n}\n\n:host(.wj-button-outline.wj-color-neutral) {\n --wj-button-border-color: var(--wj-color-contrast-6);\n --wj-button-color: var(--wj-color-contrast-6);\n}\n\n:host(.wj-button-solid.wj-color-default) {\n --wj-button-background-color: transparent;\n --wj-button-border-color: var(--wj-color-contrast-4);\n --wj-button-color: var(--wj-color-contrast-11);\n}\n\n:host(.wj-button-outline.wj-color-default) {\n --wj-button-border-color: var(--wj-color-contrast-4);\n --wj-button-color: var(--wj-color-contrast-11);\n}\n\n:host {\n --wj-button-border-radius:
|
|
11
|
+
const styles = "/*\n[ WJ Button ]\n*/\n:host(.wj-button-solid.wj-color-primary) {\n --wj-button-background-color: var(--wj-color-primary-10);\n --wj-button-border-color: var(--wj-color-primary-11);\n --wj-button-color: var(--wj-color-contrast-0);\n}\n\n:host(.wj-button-outline.wj-color-primary) {\n --wj-button-border-color: var(--wj-color-primary-6);\n --wj-button-color: var(--wj-color-primary-6);\n}\n\n:host(.wj-button-solid.wj-color-complete) {\n --wj-button-background-color: var(--wj-color-complete-10);\n --wj-button-border-color: var(--wj-color-complete-11);\n --wj-button-color: var(--wj-color-contrast-0);\n}\n\n:host(.wj-button-outline.wj-color-complete) {\n --wj-button-border-color: var(--wj-color-complete-6);\n --wj-button-color: var(--wj-color-complete-6);\n}\n\n:host(.wj-button-solid.wj-color-success) {\n --wj-button-background-color: var(--wj-color-success-10);\n --wj-button-border-color: var(--wj-color-success-11);\n --wj-button-color: var(--wj-color-contrast-0);\n}\n\n:host(.wj-button-outline.wj-color-success) {\n --wj-button-border-color: var(--wj-color-success-6);\n --wj-button-color: var(--wj-color-success-6);\n}\n\n:host(.wj-button-solid.wj-color-warning) {\n --wj-button-background-color: var(--wj-color-warning-10);\n --wj-button-border-color: var(--wj-color-warning-11);\n --wj-button-color: var(--wj-color-black);\n}\n\n:host(.wj-button-outline.wj-color-warning) {\n --wj-button-border-color: var(--wj-color-warning-6);\n --wj-button-color: var(--wj-color-warning-6);\n}\n\n:host(.wj-button-solid.wj-color-danger) {\n --wj-button-background-color: var(--wj-color-danger-10);\n --wj-button-border-color: var(--wj-color-danger-11);\n --wj-button-color: var(--wj-color-contrast-0);\n}\n\n:host(.wj-button-outline.wj-color-danger) {\n --wj-button-border-color: var(--wj-color-danger-6);\n --wj-button-color: var(--wj-color-danger-6);\n}\n\n:host(.wj-button-solid.wj-color-neutral) {\n --wj-button-background-color: var(--wj-color-contrast-10);\n --wj-button-border-color: var(--wj-color-contrast-11);\n --wj-button-color: var(--wj-color-contrast-0);\n}\n\n:host(.wj-button-outline.wj-color-neutral) {\n --wj-button-border-color: var(--wj-color-contrast-6);\n --wj-button-color: var(--wj-color-contrast-6);\n}\n\n:host(.wj-button-solid.wj-color-default) {\n --wj-button-background-color: transparent;\n --wj-button-border-color: var(--wj-color-contrast-4);\n --wj-button-color: var(--wj-color-contrast-11);\n}\n\n:host(.wj-button-outline.wj-color-default) {\n --wj-button-border-color: var(--wj-color-contrast-4);\n --wj-button-color: var(--wj-color-contrast-11);\n}\n\n:host {\n --wj-button-border-radius: var(--wj-border-radius-medium);\n --wj-button-border-width: 1px;\n --wj-button-border-style: solid;\n --wj-button-border-color: var(--wj-color-contrast-1);\n --wj-button-margin-inline: 0;\n --wj-padding-top: .4rem;\n --wj-padding-start: .5rem;\n --wj-padding-end: .5rem;\n --wj-padding-bottom: .4rem;\n display: inline-flex;\n position: relative;\n width: auto;\n cursor: pointer;\n margin-inline: var(--wj-button-margin-inline);\n}\n\n:host(.wj-button-group-button) {\n display: block;\n}\n\n.button-native {\n font-family: var(--wj-font-family);\n font-size: var(--wj-font-size);\n display: flex;\n position: relative;\n align-items: center;\n width: 100%;\n height: 100%;\n min-height: inherit;\n overflow: hidden;\n border-width: var(--wj-button-border-width);\n border-style: var(--wj-button-border-style);\n border-color: var(--wj-button-border-color);\n outline: none;\n background-color: var(--wj-button-background-color);\n color: var(--wj-button-color);\n line-height: 1;\n contain: layout style;\n cursor: pointer;\n z-index: 0;\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n border-radius: var(--wj-button-border-radius);\n padding-top: var(--wj-padding-top);\n padding-bottom: var(--wj-padding-bottom);\n padding-inline: var(--wj-padding-start) var(--wj-padding-end);\n}\n\n@media (any-hover: hover) {\n :host(.wj-button-solid.wj-color-primary:hover) {\n --wj-button-background-color: var(--wj-color-primary-9);\n --wj-button-border-color: var(--wj-color-primary-10);\n --wj-button-color: var(--wj-color-contrast-0);\n }\n :host(.wj-button-outline.wj-color-primary:hover) {\n --wj-button-background-color: var(--wj-color-primary-1);\n --wj-button-border-color: var(--wj-color-primary-11);\n --wj-button-color: var(--wj-color-primary-11);\n }\n :host(.wj-button-solid.wj-color-complete:hover) {\n --wj-button-background-color: var(--wj-color-complete-9);\n --wj-button-border-color: var(--wj-color-complete-10);\n --wj-button-color: var(--wj-color-contrast-0);\n }\n :host(.wj-button-outline.wj-color-complete:hover) {\n --wj-button-background-color: var(--wj-color-complete-1);\n --wj-button-border-color: var(--wj-color-complete-11);\n --wj-button-color: var(--wj-color-complete-11);\n }\n :host(.wj-button-solid.wj-color-success:hover) {\n --wj-button-background-color: var(--wj-color-success-9);\n --wj-button-border-color: var(--wj-color-success-10);\n --wj-button-color: var(--wj-color-contrast-0);\n }\n :host(.wj-button-outline.wj-color-success:hover) {\n --wj-button-background-color: var(--wj-color-success-1);\n --wj-button-border-color: var(--wj-color-success-11);\n --wj-button-color: var(--wj-color-success-11);\n }\n :host(.wj-button-solid.wj-color-warning:hover) {\n --wj-button-background-color: var(--wj-color-warning-9);\n --wj-button-border-color: var(--wj-color-warning-10);\n --wj-button-color: var(--wj-color-black);\n }\n :host(.wj-button-outline.wj-color-warning:hover) {\n --wj-button-background-color: var(--wj-color-warning-1);\n --wj-button-border-color: var(--wj-color-warning-11);\n --wj-button-color: var(--wj-color-warning-11);\n }\n :host(.wj-button-solid.wj-color-danger:hover) {\n --wj-button-background-color: var(--wj-color-danger-9);\n --wj-button-border-color: var(--wj-color-danger-10);\n --wj-button-color: var(--wj-color-contrast-0);\n }\n :host(.wj-button-outline.wj-color-danger:hover) {\n --wj-button-background-color: var(--wj-color-danger-1);\n --wj-button-border-color: var(--wj-color-danger-11);\n --wj-button-color: var(--wj-color-danger-11);\n }\n :host(.wj-button-solid.wj-color-neutral:hover) {\n --wj-button-background-color: var(--wj-color-contrast-9);\n --wj-button-border-color: var(--wj-color-contrast-10);\n --wj-button-color: var(--wj-color-contrast-0);\n }\n :host(.wj-button-outline.wj-color-neutral:hover) {\n --wj-button-background-color: var(--wj-color-contrast-1);\n --wj-button-border-color: var(--wj-color-contrast-11);\n --wj-button-color: var(--wj-color-contrast-11);\n }\n :host(.wj-button-solid.wj-color-default:hover) {\n --wj-button-background-color: var(--wj-color-contrast-1);\n --wj-button-border-color: var(--wj-color-contrast-2);\n --wj-button-color: var(--wj-color-contrast-9);\n }\n :host(.wj-button-outline.wj-color-default:hover) {\n --wj-button-background-color: var(--wj-color-contrast-1);\n --wj-button-border-color: var(--wj-color-contrast-2);\n --wj-button-color: var(--wj-color-contrast-9);\n }\n :host(.wj-button-link:hover) {\n --wj-button-background-color: var(--wj-color-contrast-1) !important;\n --wj-button-border-color: transparent !important;\n color: var(--wj-color-contrast-9) !important;\n }\n}\n.button-inner {\n display: flex;\n position: relative;\n flex-flow: row nowrap;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n z-index: 1;\n}\n\n:host(.button-solid.wj-color) {\n background-color: var(--wj-button-background-color);\n color: var(--wj-button-color);\n}\n\n:host(.wj-button-disabled) {\n cursor: default;\n opacity: 0.5;\n pointer-events: none;\n}\n\n/*\n[ Default = Solid ]\n*/\n/*\n[ Outline ]\n*/\n/*\n[ Link ]\n*/\n:host(.wj-button-link) {\n --wj-button-border-width: 1px;\n --wj-button-border-color: transparent;\n --wj-button-background-color: transparent !important;\n}\n\n/*\n[ Disabled ]\n*/\n:host(.wj-button-disabled) {\n cursor: default;\n opacity: 0.5;\n pointer-events: none;\n}\n\n/*\n[ Round ]\n*/\n:host(.wj-button-round) {\n --wj-button-border-radius: var(--wj-border-radius-pill);\n}\n\n:host(.wj-button-circle) {\n --wj-button-border-radius: var(--wj-border-radius-circle);\n aspect-ratio: 1/1;\n}\n\n:host(.wj-button-large) {\n --wj-padding-top: .6rem;\n --wj-padding-start: .7rem;\n --wj-padding-end: .7rem;\n --wj-padding-bottom: .6rem;\n}\n\n:host(.wj-button-small) {\n --wj-padding-top: .25rem;\n --wj-padding-start: .25rem;\n --wj-padding-end: .25rem;\n --wj-padding-bottom: .25rem;\n}\n\n::slotted(wj-icon[slot=start]) {\n margin: 0 0.3rem 0 -0.3rem;\n}\n\n::slotted(wj-icon[slot=end]) {\n margin: 0 -0.2rem 0 0.3rem;\n}\n\n:host(:not([only-caret])) slot[name=caret] {\n padding: 0 0 0 0.3rem;\n}\n\n:host([only-caret]) slot[name=caret] {\n padding: 0;\n display: block;\n}\n\n:host(.wj-button-group-first:not(.wj-button-group-last)) .button-native {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n}\n\n:host(.wj-button-group-inner) .button-native {\n border-radius: 0;\n}\n\n:host(.wj-button-group-last:not(.wj-button-group-first)) .button-native {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n}\n\n:host(.wj-button-group-button:not(.wj-button-group-first)) {\n margin-inline-start: calc(-1 * var(--wj-button-border-width)) !important;\n}\n\n::slotted([slot=toggle]) {\n display: none;\n}\n\n::slotted([slot=toggle].show) {\n display: block;\n}";
|
|
12
12
|
class Button extends WJElement {
|
|
13
13
|
constructor() {
|
|
14
14
|
super();
|
package/dist/wj-dropdown.js
CHANGED
package/dist/wj-icon-picker.js
CHANGED
|
@@ -34,6 +34,12 @@ class IconPicker extends WJElement {
|
|
|
34
34
|
__publicField(this, "onClose", () => {
|
|
35
35
|
this.popup.onHide();
|
|
36
36
|
});
|
|
37
|
+
__publicField(this, "getTagsUrl", (path) => {
|
|
38
|
+
let parsedUrl = new URL(import.meta.url);
|
|
39
|
+
let pathName = parsedUrl.pathname;
|
|
40
|
+
let folderPath = pathName.substring(0, pathName.lastIndexOf("/"));
|
|
41
|
+
return new URL(parsedUrl.origin + folderPath + path).href;
|
|
42
|
+
});
|
|
37
43
|
this.size = 48;
|
|
38
44
|
}
|
|
39
45
|
set markerPosition(value) {
|
|
@@ -77,7 +83,7 @@ class IconPicker extends WJElement {
|
|
|
77
83
|
input.setAttribute("clearable", "");
|
|
78
84
|
input.addEventListener("wj-input:input", this.searchIcon);
|
|
79
85
|
let infiniteScroll = new InfiniteScroll();
|
|
80
|
-
infiniteScroll.setAttribute("url", "/
|
|
86
|
+
infiniteScroll.setAttribute("url", this.getTagsUrl("/assets/tags.json"));
|
|
81
87
|
infiniteScroll.setAttribute("placement", ".icon-items");
|
|
82
88
|
infiniteScroll.setAttribute("size", this.size);
|
|
83
89
|
infiniteScroll.setAttribute("height", "223px");
|
|
@@ -165,7 +171,7 @@ class IconPicker extends WJElement {
|
|
|
165
171
|
return category;
|
|
166
172
|
}
|
|
167
173
|
async getTags() {
|
|
168
|
-
const response = await fetch(
|
|
174
|
+
const response = await fetch(this.getTagsUrl("/assets/tags.json"));
|
|
169
175
|
return response.json();
|
|
170
176
|
}
|
|
171
177
|
disconnectedCallback() {
|
package/dist/wj-options.js
CHANGED
|
@@ -10,9 +10,6 @@ class Options extends WJElement {
|
|
|
10
10
|
super();
|
|
11
11
|
__publicField(this, "className", "Options");
|
|
12
12
|
}
|
|
13
|
-
static get cssStyleSheet() {
|
|
14
|
-
return styles;
|
|
15
|
-
}
|
|
16
13
|
static get observedAttributes() {
|
|
17
14
|
return [];
|
|
18
15
|
}
|
|
@@ -36,7 +33,8 @@ class Options extends WJElement {
|
|
|
36
33
|
if (!response.ok) {
|
|
37
34
|
throw new Error(`An error occurred: ${response.status}`);
|
|
38
35
|
}
|
|
39
|
-
|
|
36
|
+
const data = await response.json();
|
|
37
|
+
return data;
|
|
40
38
|
}
|
|
41
39
|
}
|
|
42
40
|
customElements.get("wj-options") || window.customElements.define("wj-options", Options);
|
package/dist/wj-popup.js
CHANGED
package/dist/wj-select.js
CHANGED
|
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
|
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
7
|
import WJElement from "./wj-element.js";
|
|
8
|
-
const styles = "/*\n[ WJ Select ]\n*/\n:host {\n --wj-select-border-width: 1px;\n --wj-select-border-style: solid;\n --wj-select-border-color: var(--wj-border-color);\n --wj-select-options-border-width: 1px;\n --wj-select-options-border-style: var(--wj-border-style);\n --wj-select-options-border-color: var(--wj-border-color);\n --wj-select-background: var(--wj-background);\n --wj-select-line-height: 20px;\n --wj-select-color: var(--wj-color);\n --wj-select-border-radius: var(--wj-border-radius-medium);\n width: 100%;\n display: block;\n}\n:host [slot=arrow] {\n transform: rotate(0deg);\n transition: all 0.2s ease-in;\n}\n\n.native-select.default .wrapper {\n display: block;\n border-width: var(--wj-select-border-width);\n border-style: var(--wj-select-border-style);\n border-color: var(--wj-select-border-color);\n border-radius: var(--wj-select-border-radius);\n padding-inline: 0.5rem;\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.native-select.default .input-wrapper {\n padding: 0;\n min-height: 25px;\n margin-top: -4px;\n}\n.native-select.default.focused wj-label {\n opacity: 0.67;\n font-size: 12px;\n letter-spacing: normal;\n}\n.native-select.default wj-label {\n margin: 0;\n display: block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease 0s;\n line-height: var(--wj-select-line-height);\n}\n.native-select.default wj-label.fade {\n opacity: 0.5;\n font-size: 12px;\n letter-spacing: normal;\n}\n.native-select.standard .
|
|
8
|
+
const styles = "/*\n[ WJ Select ]\n*/\n:host {\n --wj-select-border-width: 1px;\n --wj-select-border-style: solid;\n --wj-select-border-color: var(--wj-border-color);\n --wj-select-options-border-width: 1px;\n --wj-select-options-border-style: var(--wj-border-style);\n --wj-select-options-border-color: var(--wj-border-color);\n --wj-select-background: var(--wj-background);\n --wj-select-line-height: 20px;\n --wj-select-color: var(--wj-color);\n --wj-select-border-radius: var(--wj-border-radius-medium);\n width: 100%;\n display: block;\n}\n:host [slot=arrow] {\n transform: rotate(0deg);\n transition: all 0.2s ease-in;\n}\n\n.native-select.default .wrapper {\n display: block;\n border-width: var(--wj-select-border-width);\n border-style: var(--wj-select-border-style);\n border-color: var(--wj-select-border-color);\n border-radius: var(--wj-select-border-radius);\n padding-inline: 0.5rem;\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.native-select.default .input-wrapper {\n padding: 0;\n min-height: 25px;\n margin-top: -4px;\n}\n.native-select.default.focused wj-label {\n opacity: 0.67;\n font-size: 12px;\n letter-spacing: normal;\n}\n.native-select.default wj-label {\n margin: 0;\n display: block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease 0s;\n line-height: var(--wj-select-line-height);\n}\n.native-select.default wj-label.fade {\n opacity: 0.5;\n font-size: 12px;\n letter-spacing: normal;\n}\n.native-select.standard .wrapper {\n border-width: var(--wj-select-border-width);\n border-style: var(--wj-select-border-style);\n border-color: var(--wj-select-border-color);\n border-radius: var(--wj-select-border-radius);\n}\n.native-select.standard .input-wrapper {\n background: transparent;\n width: 100%;\n}\n\n.wrapper {\n display: flex;\n width: 100%;\n}\n\n.input-wrapper {\n display: grid;\n grid-template-columns: 1fr auto auto;\n align-items: center;\n background-color: var(--wj-select-background);\n min-height: 28px;\n color: var(--wj-select-color);\n line-height: var(--wj-select-line-height);\n appearance: none;\n padding: 2px 0.5rem;\n font-size: 14px;\n font-weight: normal;\n vertical-align: middle;\n}\n\ninput {\n border: medium;\n height: 25px;\n min-height: 25px;\n padding: 0;\n background: none;\n box-shadow: none;\n width: 100%;\n outline: 0;\n}\n\n::placeholder {\n opacity: 1;\n}\n\n:host [active] .wrapper {\n border-radius: var(--wj-select-border-radius) var(--wj-select-border-radius) 0 0;\n}\n:host [active] [slot=arrow] {\n transform: rotate(180deg);\n transition: all 0.2s ease-in;\n}\n\n.option-wrapper {\n border-width: var(--wj-select-options-border-width);\n border-style: var(--wj-select-options-border-style);\n border-color: var(--wj-select-options-border-color);\n border-radius: 0 0 var(--wj-select-border-radius) var(--wj-select-border-radius);\n margin-top: -1px;\n background: var(--wj-select-background);\n overflow: auto;\n}\n\n:host([multiple]) input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 0;\n height: 0;\n opacity: 0;\n}\n\n:host([multiple]) .chips {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: wrap;\n}\n\n:host([disabled]) .input-wrapper {\n opacity: 0.5;\n pointer-events: none;\n cursor: not-allowed;\n}\n\n.counter {\n padding-inline: 0.5rem;\n}\n\nwj-chip {\n --wj-chip-margin: 0 .25rem 0 0;\n}\n\nwj-button {\n --wj-padding-top: .25rem;\n --wj-padding-start: .25rem;\n --wj-padding-end: .25rem;\n --wj-padding-bottom: .25rem;\n --wj-button-margin-inline: 0 .25rem;\n}";
|
|
9
9
|
class Select extends WJElement {
|
|
10
10
|
constructor() {
|
|
11
11
|
super();
|
package/dist/wj-split-view.js
CHANGED
|
@@ -40,7 +40,7 @@ class SplitView extends WJElement {
|
|
|
40
40
|
return false;
|
|
41
41
|
drag(this, {
|
|
42
42
|
onMove: (x, y) => {
|
|
43
|
-
let newPositionInPixels = this.hasAttribute("
|
|
43
|
+
let newPositionInPixels = this.hasAttribute("horizontal") ? y : x;
|
|
44
44
|
let sizeA = this.pixelsToPercentage(newPositionInPixels);
|
|
45
45
|
let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);
|
|
46
46
|
this.style.setProperty("--wj-split-view-calc-a", sizeA + "%");
|
|
@@ -94,7 +94,7 @@ class SplitView extends WJElement {
|
|
|
94
94
|
}
|
|
95
95
|
detectSize() {
|
|
96
96
|
const { width, height } = this.getBoundingClientRect();
|
|
97
|
-
this.size = this.hasAttribute("
|
|
97
|
+
this.size = this.hasAttribute("horizontal") ? height : width;
|
|
98
98
|
}
|
|
99
99
|
percentageToPixels(value) {
|
|
100
100
|
return this.size * (value / 100);
|
package/dist/wj-thumbnail.js
CHANGED
|
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
|
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
7
|
import WJElement from "./wj-element.js";
|
|
8
|
-
const styles = "/*\n[ WJ Thumbnail ]\n*/\n:host {\n --wj-thumbnail-width: 48px;\n --wj-thumbnail-height: 48px;\n --wj-thumbnail-border-radius: var(--wj-border-radius-medium);\n}\n\n:host {\n width: var(--wj-thumbnail-width);\n height: var(--wj-thumbnail-height);\n display: block;\n border-radius: var(--wj-border-radius);\n}\n\n::slotted(wj-img),\n::slotted(img) {\n border-radius: var(--wj-thumbnail-border-radius);\n width: 100%;\n height: 100%;\n object-fit: cover;\n overflow: hidden;\n}";
|
|
8
|
+
const styles = "/*\n[ WJ Thumbnail ]\n*/\n:host {\n --wj-thumbnail-width: 48px;\n --wj-thumbnail-height: 48px;\n --wj-thumbnail-border-radius: var(--wj-border-radius-medium);\n}\n\n:host {\n width: var(--wj-thumbnail-width);\n height: var(--wj-thumbnail-height);\n display: block;\n border-radius: var(--wj-border-radius);\n}\n\n:host([circle]) ::slotted(img) {\n border-radius: 50%;\n}\n\n::slotted(wj-img),\n::slotted(img) {\n border-radius: var(--wj-thumbnail-border-radius);\n width: 100%;\n height: 100%;\n object-fit: cover;\n overflow: hidden;\n}";
|
|
9
9
|
class Thumbnail extends WJElement {
|
|
10
10
|
constructor() {
|
|
11
11
|
super();
|
package/dist/wj-toolbar.js
CHANGED
|
@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
|
|
|
6
6
|
};
|
|
7
7
|
import WJElement from "./wj-element.js";
|
|
8
8
|
import { w as withRouterLinks } from "./router-links-F7MJWhZi.js";
|
|
9
|
-
const styles = "/*\n[ WJ Toolbar ]\n*/\n:host {\n --wj-toolbar-background: var(--wj-background);\n --wj-toolbar-min-height: 70px;\n --wj-toolbar-padding-top: 1rem;\n --wj-toolbar-padding-bottom: 1rem;\n --wj-toolbar-padding-inline: 1.5rem;\n --wj-toolbar-border-color: var(--wj-border-color);\n --wj-toolbar-top: 0;\n width: 100%;\n height: var(--wj-toolbar-height);\n}\n\n.native-toolbar {\n background-color: var(--wj-toolbar-background);\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n justify-content: flex-start;\n border-bottom: 1px solid var(--wj-toolbar-border-color);\n padding-inline: var(--wj-toolbar-padding-inline);\n padding-top: var(--wj-toolbar-padding-top);\n padding-bottom: var(--wj-toolbar-padding-bottom);\n box-shadow: 0 10px 30px 0 rgba(82, 63, 105, 0.05);\n}\n\n::slotted {\n grid-column: span 4;\n}\n\n::slotted([slot=start]) {\n margin-right: auto;\n}\n\n:host([sticky]) {\n position: sticky;\n top: var(--wj-toolbar-top);\n z-index:
|
|
9
|
+
const styles = "/*\n[ WJ Toolbar ]\n*/\n:host {\n --wj-toolbar-background: var(--wj-background);\n --wj-toolbar-min-height: 70px;\n --wj-toolbar-padding-top: 1rem;\n --wj-toolbar-padding-bottom: 1rem;\n --wj-toolbar-padding-inline: 1.5rem;\n --wj-toolbar-border-color: var(--wj-border-color);\n --wj-toolbar-top: 0;\n width: 100%;\n height: var(--wj-toolbar-height);\n}\n\n.native-toolbar {\n background-color: var(--wj-toolbar-background);\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n justify-content: flex-start;\n border-bottom: 1px solid var(--wj-toolbar-border-color);\n padding-inline: var(--wj-toolbar-padding-inline);\n padding-top: var(--wj-toolbar-padding-top);\n padding-bottom: var(--wj-toolbar-padding-bottom);\n box-shadow: 0 10px 30px 0 rgba(82, 63, 105, 0.05);\n}\n\n::slotted {\n grid-column: span 4;\n}\n\n::slotted([slot=start]) {\n margin-right: auto;\n}\n\n:host([sticky]) {\n position: sticky;\n top: var(--wj-toolbar-top);\n z-index: 99;\n}";
|
|
10
10
|
class Toolbar extends withRouterLinks(WJElement) {
|
|
11
11
|
constructor() {
|
|
12
12
|
super();
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wj-elements",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.28",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
7
7
|
"./dist"
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"tinycolor2": "^1.6.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"miragejs": "^0.1.
|
|
28
|
+
"miragejs": "^0.1.48",
|
|
29
29
|
"sass": "^1.63.5",
|
|
30
30
|
"vite": "^5.1.2"
|
|
31
31
|
}
|