wj-elements 0.1.83 → 0.1.84
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/dark.css +6 -0
- package/dist/light.css +21 -0
- package/dist/wje-card-controls.js +1 -1
- package/dist/wje-input.js +1 -1
- package/dist/wje-item.js +1 -1
- package/dist/wje-select.js +21 -1
- package/dist/wje-textarea.js +1 -1
- package/package.json +4 -2
package/dist/dark.css
CHANGED
|
@@ -149,6 +149,12 @@
|
|
|
149
149
|
/* Divider */
|
|
150
150
|
--wje-divider-border-color: var(--wje-border-color);
|
|
151
151
|
|
|
152
|
+
/* Item */
|
|
153
|
+
--wje-item-color: var(--wje-color);
|
|
154
|
+
--wje-item-border-color: var(--wje-border-color);
|
|
155
|
+
--wje-item-background: transparent;
|
|
156
|
+
--wje-item-background-hover: var(--wje-color-contrast-3);
|
|
157
|
+
|
|
152
158
|
/* List */
|
|
153
159
|
--wje-list-background: var(--wje-background);
|
|
154
160
|
|
package/dist/light.css
CHANGED
|
@@ -340,6 +340,27 @@
|
|
|
340
340
|
--wje-img-compare-position: 50%;
|
|
341
341
|
--wje-img-compare-clip-path: inset(0 calc(100% - var(--wje-img-compare-position)) 0 0);
|
|
342
342
|
|
|
343
|
+
/* Item */
|
|
344
|
+
--wje-item-color: var(--wje-color);
|
|
345
|
+
--wje-item-border-width: 0 0 1px 0;
|
|
346
|
+
--wje-item-border-style: solid;
|
|
347
|
+
--wje-item-border-color: var(--wje-border-color);
|
|
348
|
+
--wje-item-border-radius: 0;
|
|
349
|
+
--wje-item-background: transparent;
|
|
350
|
+
--wje-item-background-hover: var(--wje-color-contrast-3);
|
|
351
|
+
--wje-item-padding-top: 0px;
|
|
352
|
+
--wje-item-padding-bottom: 0px;
|
|
353
|
+
--wje-item-padding-end: 0px;
|
|
354
|
+
--wje-item-padding-start: 0px;
|
|
355
|
+
--wje-item-inner-border-width: 0 0 1px 0;
|
|
356
|
+
--wje-item-inner-padding-top: 0px;
|
|
357
|
+
--wje-item-inner-padding-bottom: 0px;
|
|
358
|
+
--wje-item-inner-padding-start: 0px;
|
|
359
|
+
--wje-item-inner-padding-end: 0px;
|
|
360
|
+
--wje-item-inner-box-shadow: none;
|
|
361
|
+
--wje-item-min-height: 40px;
|
|
362
|
+
--wje-item-transition: var(--wje-transition-fast);
|
|
363
|
+
|
|
343
364
|
/* List */
|
|
344
365
|
--wje-list-inset-padding: 1rem;
|
|
345
366
|
--wje-list-border-radius: var(--wje-border-radius-medium);
|
|
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
|
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
7
|
import WJElement from "./wje-element.js";
|
|
8
|
-
const styles = "/*\n[ WJ Card - Controls ]\n*/\n\n:host {\n font-family: var(--wje-card-controls-font-family);\n text-transform: uppercase;\n display: inline-block;\n letter-spacing: 0.06em;\n font-size: var(--wje-card-controls-font-size);\n font-weight: 500;\n margin: 0;\n padding: 0;\n line-height: normal;\n overflow: hidden
|
|
8
|
+
const styles = "/*\n[ WJ Card - Controls ]\n*/\n\n:host {\n font-family: var(--wje-card-controls-font-family);\n text-transform: uppercase;\n display: inline-block;\n letter-spacing: 0.06em;\n font-size: var(--wje-card-controls-font-size);\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 transition: opacity 0.3s ease;\n position: absolute;\n right: 1rem;\n top: .5rem;\n}";
|
|
9
9
|
class CardControls extends WJElement {
|
|
10
10
|
/**
|
|
11
11
|
* CardControls constructor
|
package/dist/wje-input.js
CHANGED
|
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
|
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
7
|
import WJElement, { event } from "./wje-element.js";
|
|
8
|
-
const styles = '/*\n[ WJ Input ]\n*/\n\n:host {\n --wje-input-font-family: var(--wje-font-family);\n --wje-input-background-color: var(--wje-background);\n --wje-input-color: var(--wje-color);\n --wje-input-color-invalid: var(--wje-color-danger);\n --wje-input-border-color: var(--wje-border-color);\n --wje-input-border-color-focus: var(--wje-color-primary);\n --wje-input-border-width: 1px;\n --wje-input-border-style: solid;\n --wje-input-border-radius: 4px;\n --wje-input-margin-bottom: .5rem;\n --wje-input-line-height: 20px;\n --wje-input-slot-padding-inline: .5rem;\n width: 100%;\n margin-bottom: var(--wje-input-margin-bottom);\n display: block;\n\n .wrapper {\n display: flex;\n width: 100%;\n }\n .native-input {\n .input-wrapper {\n width: 100%;\n position: relative;\n }\n &.default {\n background-color: var(--wje-input-background-color);\n font-family: var(--wje-input-font-family);\n position: relative;\n border-radius: var(--wje-input-border-radius);\n border-width: var(--wje-input-border-width);\n border-style: var(--wje-input-border-style);\n border-color: var(--wje-input-border-color);\n padding-inline: 0;\n padding-top: .25rem;\n padding-bottom: .25rem;\n transition: background-color 0.2s ease;\n cursor: text;\n .input-wrapper {\n margin-inline: .5rem;\n }\n &.focused {\n border-color: var(--wje-input-border-color-focus) !important;\n label {\n opacity: 0.67;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n input {\n border: none;\n height: 25px;\n min-height: 25px;\n padding: 0;\n margin-top: -4px;\n background: none;\n box-shadow: none;\n width: 100%;\n }\n label {\n margin: 0;\n display: block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease;\n line-height: var(--wje-input-line-height);\n &.fade {\n opacity: 0.5;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n ::slotted([slot="start"]) {\n border-left: none;\n border-top: none;\n border-bottom: none;\n }\n\n ::slotted([slot="end"]) {\n border-right: none;\n border-top: none;\n border-bottom: none;\n }\n }\n &.standard {\n font-family: var(--wje-input-font-family);\n position: relative;\n border-radius: var(--wje-input-border-radius);\n padding-inline: 0;\n padding-top: 0;\n padding-bottom: 0;\n transition: background-color 0.2s ease;\n cursor: text;\n &.focused {\n input {\n border-color: var(--wje-input-border-color-focus) !important;\n }\n }\n input {\n background-color: var(--wje-input-background-color);\n display: block;\n min-height: 32px;\n padding-inline: .5rem;\n padding-top: 0;\n padding-bottom: 0;\n /*background: none;*/\n box-shadow: none;\n width: 100%;\n box-sizing: border-box;\n border-radius: var(--wje-input-border-radius);\n border-width: var(--wje-input-border-width);\n border-style: var(--wje-input-border-style);\n border-color: var(--wje-input-border-color);\n }\n label {\n margin: 0;\n display: inline-block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease;\n line-height: var(--wje-input-line-height);\n }\n .input-wrapper {\n &:hover .clear {\n visibility: visible;\n }\n }\n ::slotted([slot="start"]) {\n border-right: none;\n border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n }\n\n ::slotted([slot="end"]) {\n border-left: none;\n border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n }\n\n &.has-start input{\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n &.has-end input{\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .error-message {\n position: static;\n\n background: transparent;\n padding: 0.25rem 0;\n left: auto;\n transform: none;\n color: var(--wje-input-color-invalid);\n font-size: 12px;\n line-height: normal;\n }\n }\n }\n}\n\n.clear {\n visibility: hidden;\n position: absolute;\n right: 0;\n top: 3px;\n --wje-padding-top: .25rem;\n --wje-padding-start: .25rem;\n --wje-padding-end: .25rem;\n --wje-padding-bottom: .25rem;\n --wje-button-margin-inline: 0 .25rem;\n}\n\n:host([required]) .input-wrapper::after {\n color: var(--wje-input-color-invalid);\n content: "*";\n font-family: var(--wje-force-mac-font-family);\n font-size: 20px;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n top: 0;\n}\n\n:host([invalid]) {\n .error-message {\n display: block;\n }\n .default {\n label {\n opacity: 1 !important;\n color: var(--wje-input-color-invalid) !important;\n animation-name: shake;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n }\n }\n}\n\n::slotted([slot="start"]), ::slotted([slot="end"]) {\n display: flex;\n align-items: center;\n border-width: var(--wje-input-border-width);\n border-style: var(--wje-input-border-style);\n border-color: var(--wje-input-border-color);\n padding-inline: var(--wje-input-slot-padding-inline);\n}\n\nslot[name="start"], slot[name="end"] {\n display: flex;\n}\n\nslot[name="error"] {\n display: none;\n margin-inline: .5rem;\n}\n\n:host([invalid]) slot[name="error"] {\n display: block;\n}\n\ninput {\n background-color: var(--wje-input-background-color);\n border-width: var(--wje-input-border-width);\n border-style: var(--wje-input-border-style);\n border-color: var(--wje-input-border-color);\n font-family: var(--wje-input-font-family);\n color: var(--wje-input-color);\n appearance: none;\n outline: 0;\n padding: .25rem .5rem;\n line-height: var(--wje-input-line-height);\n font-size: 14px;\n font-weight: normal;\n vertical-align: middle;\n min-height: 32px;\n}\n\n.error-message {\n display: none;\n position: absolute;\n width: auto;\n max-width: 100%;\n min-width: auto;\n border-radius: 50px;\n background: black;\n padding: .25rem .5rem;\n top: 0;\n left: 50%;\n transform: translate(-50%, -50%);\n color: white;\n font-size: 12px;\n line-height: normal;\n}\n\n@keyframes shake {\n 8%,\n 41% {\n transform: translateX(-4px);\n }\n 25%,\n 58% {\n transform: translateX(4px);\n }\n 75% {\n transform: translateX(-2px);\n }\n 92% {\n transform: translateX(2px);\n }\n 0%,\n 100% {\n transform: translateX(0);\n }\n}';
|
|
8
|
+
const styles = '/*\n[ WJ Input ]\n*/\n\n:host {\n --wje-input-font-family: var(--wje-font-family);\n --wje-input-background-color: var(--wje-background);\n --wje-input-color: var(--wje-color);\n --wje-input-color-invalid: var(--wje-color-danger);\n --wje-input-border-color: var(--wje-border-color);\n --wje-input-border-color-focus: var(--wje-color-primary);\n --wje-input-border-width: 1px;\n --wje-input-border-style: solid;\n --wje-input-border-radius: 4px;\n --wje-input-margin-bottom: .5rem;\n --wje-input-line-height: 20px;\n --wje-input-slot-padding-inline: .5rem;\n width: 100%;\n margin-bottom: var(--wje-input-margin-bottom);\n display: block;\n\n .wrapper {\n display: flex;\n width: 100%;\n }\n .native-input {\n .input-wrapper {\n width: 100%;\n position: relative;\n box-sizing: border-box;\n }\n &.default {\n background-color: var(--wje-input-background-color);\n font-family: var(--wje-input-font-family);\n position: relative;\n border-radius: var(--wje-input-border-radius);\n border-width: var(--wje-input-border-width);\n border-style: var(--wje-input-border-style);\n border-color: var(--wje-input-border-color);\n padding-inline: 0;\n padding-top: .25rem;\n padding-bottom: .25rem;\n transition: background-color 0.2s ease;\n cursor: text;\n .input-wrapper {\n margin-inline: .5rem;\n }\n &.focused {\n border-color: var(--wje-input-border-color-focus) !important;\n label {\n opacity: 0.67;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n input {\n border: none;\n height: 25px;\n min-height: 25px;\n padding: 0;\n margin-top: -4px;\n background: none;\n box-shadow: none;\n width: 100%;\n }\n label {\n margin: 0;\n display: block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease;\n line-height: var(--wje-input-line-height);\n &.fade {\n opacity: 0.5;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n ::slotted([slot="start"]) {\n border-left: none;\n border-top: none;\n border-bottom: none;\n }\n\n ::slotted([slot="end"]) {\n border-right: none;\n border-top: none;\n border-bottom: none;\n }\n }\n &.standard {\n font-family: var(--wje-input-font-family);\n position: relative;\n border-radius: var(--wje-input-border-radius);\n padding-inline: 0;\n padding-top: 0;\n padding-bottom: 0;\n transition: background-color 0.2s ease;\n cursor: text;\n &.focused {\n input {\n border-color: var(--wje-input-border-color-focus) !important;\n }\n }\n input {\n background-color: var(--wje-input-background-color);\n display: block;\n min-height: 32px;\n padding-inline: .5rem;\n padding-top: 0;\n padding-bottom: 0;\n /*background: none;*/\n box-shadow: none;\n width: 100%;\n box-sizing: border-box;\n border-radius: var(--wje-input-border-radius);\n border-width: var(--wje-input-border-width);\n border-style: var(--wje-input-border-style);\n border-color: var(--wje-input-border-color);\n }\n label {\n margin: 0;\n display: inline-block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease;\n line-height: var(--wje-input-line-height);\n }\n .input-wrapper {\n &:hover .clear {\n visibility: visible;\n }\n }\n ::slotted([slot="start"]) {\n border-right: none;\n border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n }\n\n ::slotted([slot="end"]) {\n border-left: none;\n border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n }\n\n &.has-start input{\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n &.has-end input{\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .error-message {\n position: static;\n\n background: transparent;\n padding: 0.25rem 0;\n left: auto;\n transform: none;\n color: var(--wje-input-color-invalid);\n font-size: 12px;\n line-height: normal;\n }\n }\n }\n}\n\n.clear {\n visibility: hidden;\n position: absolute;\n right: 0;\n top: 3px;\n --wje-padding-top: .25rem;\n --wje-padding-start: .25rem;\n --wje-padding-end: .25rem;\n --wje-padding-bottom: .25rem;\n --wje-button-margin-inline: 0 .25rem;\n}\n\n:host([required]) .input-wrapper::after {\n color: var(--wje-input-color-invalid);\n content: "*";\n font-family: var(--wje-force-mac-font-family);\n font-size: 20px;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n top: 0;\n}\n\n:host([invalid]) {\n .error-message {\n display: block;\n }\n .default {\n label {\n opacity: 1 !important;\n color: var(--wje-input-color-invalid) !important;\n animation-name: shake;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n }\n }\n}\n\n::slotted([slot="start"]), ::slotted([slot="end"]) {\n display: flex;\n align-items: center;\n border-width: var(--wje-input-border-width);\n border-style: var(--wje-input-border-style);\n border-color: var(--wje-input-border-color);\n padding-inline: var(--wje-input-slot-padding-inline);\n}\n\n/*\n .options-show is a class that is added to the host element when the select options are shown\n */\n:host(.options-show) ::slotted([slot="start"]) {\n border-bottom-left-radius: 0 !important;\n}\n\n:host(.options-show) ::slotted([slot="end"]) {\n border-bottom-right-radius: 0 !important;\n}\n\nslot[name="start"], slot[name="end"] {\n display: flex;\n}\n\nslot[name="error"] {\n display: none;\n margin-inline: .5rem;\n}\n\n:host([invalid]) slot[name="error"] {\n display: block;\n}\n\ninput {\n background-color: var(--wje-input-background-color);\n border-width: var(--wje-input-border-width);\n border-style: var(--wje-input-border-style);\n border-color: var(--wje-input-border-color);\n font-family: var(--wje-input-font-family);\n color: var(--wje-input-color);\n appearance: none;\n outline: 0;\n padding: .25rem .5rem;\n line-height: var(--wje-input-line-height);\n font-size: 14px;\n font-weight: normal;\n vertical-align: middle;\n min-height: 32px;\n}\n\n.error-message {\n display: none;\n position: absolute;\n width: auto;\n max-width: 100%;\n min-width: auto;\n border-radius: 50px;\n background: black;\n padding: .25rem .5rem;\n top: 0;\n left: 50%;\n transform: translate(-50%, -50%);\n color: white;\n font-size: 12px;\n line-height: normal;\n}\n\n@keyframes shake {\n 8%,\n 41% {\n transform: translateX(-4px);\n }\n 25%,\n 58% {\n transform: translateX(4px);\n }\n 75% {\n transform: translateX(-2px);\n }\n 92% {\n transform: translateX(2px);\n }\n 0%,\n 100% {\n transform: translateX(0);\n }\n}';
|
|
9
9
|
class Input extends WJElement {
|
|
10
10
|
/**
|
|
11
11
|
* Constructor for the Input class.
|
package/dist/wje-item.js
CHANGED
|
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
|
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
7
|
import WJElement from "./wje-element.js";
|
|
8
|
-
const styles = '/*\n[ WJ Item ]\n*/\n\n:host {\n
|
|
8
|
+
const styles = '/*\n[ WJ Item ]\n*/\n\n:host {\n display: block;\n position: relative;\n align-items: center;\n justify-content: space-between;\n outline: none;\n color: var(--wje-item-color);\n text-align: initial;\n text-decoration: none;\n overflow: hidden;\n box-sizing: border-box;\n width: 100%;\n}\n\n.item-native {\n border-radius: var(--wje-item-border-radius);\n padding-top: var(--wje-item-padding-top);\n padding-bottom: var(--wje-item-padding-bottom);\n padding-inline: var(--wje-item-padding-start) var(--wje-item-padding-end);\n margin: 0;\n display: flex;\n position: relative;\n align-items: inherit;\n justify-content: inherit;\n width: 100%;\n min-height: var(--wje-item-min-height);\n transition: var(--wje-item-transition);\n outline: none;\n background: var(--wje-item-background);\n overflow: inherit;\n box-sizing: border-box;\n z-index: 1;\n text-decoration: none;\n color: var(--wje-item-color);\n\n .item-inner {\n margin: 0;\n padding: var(--wje-item-inner-padding-top) var(--wje-item-inner-padding-end) var(--wje-item-inner-padding-bottom) var(--wje-item-inner-padding-start);\n\n display: flex;\n position: relative;\n\n flex: 1 1 0;\n flex-direction: inherit;\n align-items: inherit;\n align-self: stretch;\n\n min-height: inherit;\n\n border-width: var(--wje-item-border-width);\n border-style: var(--wje-item-border-style);\n border-color: var(--wje-item-border-color);\n\n box-shadow: var(--wje-item-inner-box-shadow);\n overflow: inherit;\n box-sizing: border-box;\n\n .input-wrapper {\n display: flex;\n flex: 1 1 0;\n flex-direction: inherit;\n align-items: inherit;\n align-self: stretch;\n text-overflow: ellipsis;\n overflow: inherit;\n box-sizing: border-box;\n }\n }\n\n .item-bottom {\n padding: 0 var(--wje-item-inner-padding-end) 0 var(--wje-item-padding-start);\n display: flex;\n justify-content: space-between;\n }\n}\n\n@media (any-hover: hover) {\n :host(:hover) .item-native {\n color: var(--wje-item-color);\n\n :after {\n transition: var(--wje-item-transition);\n z-index: -1;\n inset: 0;\n position: absolute;\n content: "";\n background: var(--wje-item-background-hover);\n opacity: 0.7;\n }\n }\n}\n\nbutton,\na {\n cursor: pointer;\n user-select: none;\n -webkit-user-drag: none;\n}\n\n::slotted([slot="start"]) {\n margin-inline: 0 1rem;\n}\n\n::slotted(wje-label:not([slot="end"])) {\n flex: 1 1 0;\n}';
|
|
9
9
|
class Item extends WJElement {
|
|
10
10
|
constructor() {
|
|
11
11
|
super();
|
package/dist/wje-select.js
CHANGED
|
@@ -14,7 +14,7 @@ import Input from "./wje-input.js";
|
|
|
14
14
|
import Option from "./wje-option.js";
|
|
15
15
|
import Options from "./wje-options.js";
|
|
16
16
|
import { P as Popup } from "./popup.element-DvPGL_NN.js";
|
|
17
|
-
const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n --wje-select-border-width: 1px;\n --wje-select-border-style: solid;\n --wje-select-border-color: var(--wje-border-color);\n\n --wje-select-options-border-width: 1px;\n --wje-select-options-border-style: var(--wje-border-style);\n --wje-select-options-border-color: var(--wje-border-color);\n\n --wje-select-background: var(--wje-background);\n --wje-select-line-height: 20px;\n --wje-select-color: var(--wje-color);\n --wje-select-border-radius: var(--wje-border-radius-medium);\n\n width: 100%;\n display: block;\n [slot=arrow] {\n transform: rotate(0deg);\n transition: all .2s ease-in;\n }\n}\n\n.native-select {\n &.default{\n .wrapper {\n display: block;\n border-width: var(--wje-select-border-width);\n border-style: var(--wje-select-border-style);\n border-color: var(--wje-select-border-color);\n border-radius: var(--wje-select-border-radius);\n padding-inline: .5rem;\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n }\n .input-wrapper {\n padding: 0;\n min-height: 28px;\n margin-top: -4px;\n }\n &.focused {\n wje-label {\n opacity: 0.67;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n wje-label {\n margin: 0;\n display: block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease 0s;\n line-height: var(--wje-select-line-height);\n &.fade {\n opacity: 0.5;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n }\n &.standard {\n .wrapper {\n background-color: var(--wje-select-background);\n border-width: var(--wje-select-border-width);\n border-style: var(--wje-select-border-style);\n border-color: var(--wje-select-border-color);\n border-radius: var(--wje-select-border-radius);\n }\n .input-wrapper {\n background: transparent;\n width: 100%;\n }\n }\n}\n\n.wrapper {\n display: flex;\n width: 100%;\n}\n\n.input-wrapper {\n display: grid;\n grid-template-columns:
|
|
17
|
+
const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n --wje-select-border-width: 1px;\n --wje-select-border-style: solid;\n --wje-select-border-color: var(--wje-border-color);\n\n --wje-select-options-border-width: 1px;\n --wje-select-options-border-style: var(--wje-border-style);\n --wje-select-options-border-color: var(--wje-border-color);\n\n --wje-select-background: var(--wje-background);\n --wje-select-line-height: 20px;\n --wje-select-color: var(--wje-color);\n --wje-select-border-radius: var(--wje-border-radius-medium);\n\n width: 100%;\n display: block;\n [slot=arrow] {\n transform: rotate(0deg);\n transition: all .2s ease-in;\n }\n}\n\n.native-select {\n &.default{\n .wrapper {\n display: block;\n border-width: var(--wje-select-border-width);\n border-style: var(--wje-select-border-style);\n border-color: var(--wje-select-border-color);\n border-radius: var(--wje-select-border-radius);\n padding-inline: .5rem;\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n }\n .input-wrapper {\n padding: 0;\n min-height: 28px;\n margin-top: -4px;\n }\n &.focused {\n wje-label {\n opacity: 0.67;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n wje-label {\n margin: 0;\n display: block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease 0s;\n line-height: var(--wje-select-line-height);\n &.fade {\n opacity: 0.5;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n }\n &.standard {\n .wrapper {\n background-color: var(--wje-select-background);\n border-width: var(--wje-select-border-width);\n border-style: var(--wje-select-border-style);\n border-color: var(--wje-select-border-color);\n border-radius: var(--wje-select-border-radius);\n }\n .input-wrapper {\n background: transparent;\n width: 100%;\n }\n }\n}\n\n.wrapper {\n display: flex;\n width: 100%;\n}\n\n.input-wrapper {\n display: grid;\n grid-template-columns: auto auto auto auto;\n align-items: center;\n background-color: var(--wje-select-background);\n min-height: 28px;\n color: var(--wje-select-color);\n line-height: var(--wje-select-line-height);\n appearance: none;\n padding: 2px .5rem;\n font-size: 14px !important;\n font-weight: normal;\n vertical-align: middle;\n}\n\ninput {\n color: var(--wje-select-color);\n line-height: var(--wje-select-line-height);\n font-size: 14px !important;\n font-weight: 400;\n letter-spacing: .01em;\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 font-size: 14px !important;\n}\n\n::placeholder {\n opacity: 1;\n}\n\n:host [active] {\n .wrapper {\n border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\n }\n [slot=arrow] {\n transform: rotate(180deg);\n transition: all .2s ease-in;\n }\n}\n\n.options-wrapper {\n border-width: var(--wje-select-options-border-width);\n border-style: var(--wje-select-options-border-style);\n border-color: var(--wje-select-options-border-color);\n border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\n margin-top: calc(0px - var(--wje-select-border-width));\n background: var(--wje-select-background);\n overflow: hidden;\n\n}\n\n.find {\n --wje-input-border-radius: 0;\n --wje-input-border-width: 0 0 1px 0;\n}\n\n.list {\n overflow: auto;\n height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n height: calc(100% - 32px - .5rem);\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: .5rem;\n}\n\nwje-chip {\n --wje-chip-margin: 0 .25rem 0 0;\n}\n\nwje-button {\n --wje-padding-top: .25rem;\n --wje-padding-start: .25rem;\n --wje-padding-end: .25rem;\n --wje-padding-bottom: .25rem;\n --wje-button-margin-inline: 0 .25rem;\n}\n\n.slot-start, .slot-end {\n &:not(:empty) {\n margin-right: .5rem;\n }\n}\n";
|
|
18
18
|
class Select extends WJElement {
|
|
19
19
|
/**
|
|
20
20
|
* Creates an instance of Select.
|
|
@@ -142,13 +142,18 @@ class Select extends WJElement {
|
|
|
142
142
|
let label = document.createElement("wje-label");
|
|
143
143
|
label.innerText = this.label || "";
|
|
144
144
|
let inputWrapper = document.createElement("div");
|
|
145
|
+
inputWrapper.setAttribute("part", "input-wrapper");
|
|
145
146
|
inputWrapper.classList.add("input-wrapper");
|
|
147
|
+
let slotStart = document.createElement("div");
|
|
148
|
+
slotStart.classList.add("slot-start");
|
|
146
149
|
let input = document.createElement("input");
|
|
147
150
|
input.setAttribute("type", "text");
|
|
148
151
|
input.setAttribute("part", "input");
|
|
149
152
|
input.setAttribute("autocomplete", "off");
|
|
150
153
|
input.setAttribute("readonly", "");
|
|
151
154
|
input.setAttribute("placeholder", this.placeholder || "");
|
|
155
|
+
let slotEnd = document.createElement("div");
|
|
156
|
+
slotEnd.classList.add("slot-end");
|
|
152
157
|
let arrow = document.createElement("wje-icon");
|
|
153
158
|
arrow.setAttribute("name", "chevron-down");
|
|
154
159
|
arrow.setAttribute("slot", "arrow");
|
|
@@ -156,6 +161,7 @@ class Select extends WJElement {
|
|
|
156
161
|
chips.classList.add("chips");
|
|
157
162
|
chips.innerText = this.placeholder || "";
|
|
158
163
|
let optionsWrapper = document.createElement("div");
|
|
164
|
+
optionsWrapper.setAttribute("part", "options-wrapper");
|
|
159
165
|
optionsWrapper.classList.add("options-wrapper");
|
|
160
166
|
optionsWrapper.style.setProperty("height", this.maxHeight || "auto");
|
|
161
167
|
let list = document.createElement("div");
|
|
@@ -179,11 +185,13 @@ class Select extends WJElement {
|
|
|
179
185
|
} else {
|
|
180
186
|
wrapper.appendChild(label);
|
|
181
187
|
}
|
|
188
|
+
inputWrapper.appendChild(slotStart);
|
|
182
189
|
inputWrapper.appendChild(input);
|
|
183
190
|
if (this.hasAttribute("multiple"))
|
|
184
191
|
inputWrapper.appendChild(chips);
|
|
185
192
|
if (this.hasAttribute("clearable"))
|
|
186
193
|
inputWrapper.appendChild(clear);
|
|
194
|
+
inputWrapper.appendChild(slotEnd);
|
|
187
195
|
inputWrapper.appendChild(arrow);
|
|
188
196
|
list.appendChild(slot);
|
|
189
197
|
if (this.hasAttribute("find")) {
|
|
@@ -204,6 +212,8 @@ class Select extends WJElement {
|
|
|
204
212
|
this.native = native;
|
|
205
213
|
this.popup = popup;
|
|
206
214
|
this.labelElement = label;
|
|
215
|
+
this.slotStart = slotStart;
|
|
216
|
+
this.slotEnd = slotEnd;
|
|
207
217
|
this.input = input;
|
|
208
218
|
this.optionsWrapper = optionsWrapper;
|
|
209
219
|
this.chips = chips;
|
|
@@ -311,6 +321,16 @@ class Select extends WJElement {
|
|
|
311
321
|
let value = (option == null ? void 0 : option.textContent.trim()) || "";
|
|
312
322
|
this.value = value;
|
|
313
323
|
this.input.value = value;
|
|
324
|
+
if (option && option instanceof HTMLElement) {
|
|
325
|
+
this.slotStart.innerHTML = "";
|
|
326
|
+
if (option == null ? void 0 : option.querySelector("[slot=start]")) {
|
|
327
|
+
this.slotStart.appendChild(option == null ? void 0 : option.querySelector("[slot=start]").cloneNode(true));
|
|
328
|
+
}
|
|
329
|
+
this.slotEnd.innerHTML = "";
|
|
330
|
+
if (option == null ? void 0 : option.querySelector("[slot=end]")) {
|
|
331
|
+
this.slotEnd.appendChild(option == null ? void 0 : option.querySelector("[slot=end]").cloneNode(true));
|
|
332
|
+
}
|
|
333
|
+
}
|
|
314
334
|
}
|
|
315
335
|
}
|
|
316
336
|
/**
|
package/dist/wje-textarea.js
CHANGED
|
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
|
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
7
|
import WJElement, { event } from "./wje-element.js";
|
|
8
|
-
const styles = '/*\n[ WJ Textarea ]\n*/\n\n:host {\n width: 100%;\n margin-bottom: var(--wje-textarea-margin-bottom);\n display: block;\n .wrapper {\n display: flex;\n width: 100%;\n border-width: var(--wje-textarea-border-width);\n border-style: var(--wje-textarea-border-style);\n border-color: var(--wje-textarea-border-color);\n border-radius: var(--wje-textarea-border-radius);\n }\n textarea {\n font-family: var(--wje-textarea-font-family);\n color: var(--wje-textarea-color);\n font-size: 14px;\n border: 0 none;\n padding: 0 var(--wje-textarea-padding);\n &:focus {\n outline: none;\n }\n }\n}\n\n:host([resize="auto"]) textarea,\n:host([resize="none"]) textarea {\n resize: none;\n}\n\n.native-textarea {\n .input-wrapper {\n width: 100%;\n line-height: normal;\n }\n &.default {\n background-color: var(--wje-textarea-background-color);\n font-family: var(--wje-textarea-font-family);\n position: relative;\n padding-inline: 0;\n padding-top: 0;\n transition: background-color 0.2s ease;\n cursor: text;\n &.focused {\n .wrapper {\n border-color: var(--wje-textarea-border-color-focus) !important;\n }\n label {\n opacity: 0.67;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n textarea {\n border: none;\n padding-top: 0;\n background: none;\n box-shadow: none;\n width: calc(100% - var(--wje-textarea-padding) * 2);\n max-width: calc(100% - var(--wje-textarea-padding) * 2);\n min-width: calc(100% - var(--wje-textarea-padding) * 2);\n }\n label {\n padding: 0 var(--wje-textarea-padding);\n display: block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease;\n line-height: var(--wje-textarea-line-height);\n padding-top: .25rem;\n &.fade {\n opacity: 0.5;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n ::slotted([slot="start"]) {\n border-left: none;\n border-top: none;\n border-bottom: none;\n }\n\n ::slotted([slot="end"]) {\n border-right: none;\n border-top: none;\n border-bottom: none;\n }\n }\n &.standard {\n font-family: var(--wje-textarea-font-family);\n position: relative;\n border-radius: var(--wje-textarea-border-radius);\n padding: 0;\n transition: background-color 0.2s ease;\n cursor: text;\n &.focused {\n .wrapper {\n border-color: var(--wje-textarea-border-color-focus) !important;\n }\n }\n textarea {\n background-color: var(--wje-textarea-background-color);\n display: block;\n min-height: 32px;\n box-shadow: none;\n width: 100%;\n box-sizing: border-box;\n border-radius: var(--wje-textarea-border-radius);\n }\n label {\n margin: 0;\n display: inline-block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease;\n line-height: var(--wje-textarea-line-height);\n }\n ::slotted([slot="start"]) {\n border-right: none;\n border-radius: var(--wje-textarea-border-radius) 0 0 var(--wje-textarea-border-radius);\n }\n\n ::slotted([slot="end"]) {\n border-left: none;\n border-radius: 0 var(--wje-textarea-border-radius) var(--wje-textarea-border-radius) 0;\n }\n\n &.has-start textarea{\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n &.has-end textarea{\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .error-message {\n position: static;\n background: transparent;\n padding: 0.25rem 0;\n left: auto;\n transform: none;\n color: var(--wje-textarea-color-invalid);\n font-size: 12px;\n line-height: normal;\n }\n }\n}\n\n.counter {\n float: right;\n}';
|
|
8
|
+
const styles = '/*\n[ WJ Textarea ]\n*/\n\n:host {\n width: 100%;\n margin-bottom: var(--wje-textarea-margin-bottom);\n display: block;\n .wrapper {\n display: flex;\n width: 100%;\n border-width: var(--wje-textarea-border-width);\n border-style: var(--wje-textarea-border-style);\n border-color: var(--wje-textarea-border-color);\n border-radius: var(--wje-textarea-border-radius);\n box-sizing: border-box;\n }\n textarea {\n font-family: var(--wje-textarea-font-family);\n color: var(--wje-textarea-color);\n font-size: 14px;\n border: 0 none;\n padding: 0 var(--wje-textarea-padding);\n &:focus {\n outline: none;\n }\n }\n}\n\n:host([resize="auto"]) textarea,\n:host([resize="none"]) textarea {\n resize: none;\n}\n\n.native-textarea {\n .input-wrapper {\n width: 100%;\n line-height: normal;\n }\n &.default {\n background-color: var(--wje-textarea-background-color);\n font-family: var(--wje-textarea-font-family);\n position: relative;\n padding-inline: 0;\n padding-top: 0;\n transition: background-color 0.2s ease;\n cursor: text;\n &.focused {\n .wrapper {\n border-color: var(--wje-textarea-border-color-focus) !important;\n }\n label {\n opacity: 0.67;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n textarea {\n border: none;\n padding-top: 0;\n background: none;\n box-shadow: none;\n width: calc(100% - var(--wje-textarea-padding) * 2);\n max-width: calc(100% - var(--wje-textarea-padding) * 2);\n min-width: calc(100% - var(--wje-textarea-padding) * 2);\n }\n label {\n padding: 0 var(--wje-textarea-padding);\n display: block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease;\n line-height: var(--wje-textarea-line-height);\n padding-top: .25rem;\n &.fade {\n opacity: 0.5;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n ::slotted([slot="start"]) {\n border-left: none;\n border-top: none;\n border-bottom: none;\n }\n\n ::slotted([slot="end"]) {\n border-right: none;\n border-top: none;\n border-bottom: none;\n }\n }\n &.standard {\n font-family: var(--wje-textarea-font-family);\n position: relative;\n border-radius: var(--wje-textarea-border-radius);\n padding: 0;\n transition: background-color 0.2s ease;\n cursor: text;\n &.focused {\n .wrapper {\n border-color: var(--wje-textarea-border-color-focus) !important;\n }\n }\n textarea {\n background-color: var(--wje-textarea-background-color);\n display: block;\n min-height: 32px;\n box-shadow: none;\n width: 100%;\n box-sizing: border-box;\n border-radius: var(--wje-textarea-border-radius);\n }\n label {\n margin: 0;\n display: inline-block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease;\n line-height: var(--wje-textarea-line-height);\n }\n ::slotted([slot="start"]) {\n border-right: none;\n border-radius: var(--wje-textarea-border-radius) 0 0 var(--wje-textarea-border-radius);\n }\n\n ::slotted([slot="end"]) {\n border-left: none;\n border-radius: 0 var(--wje-textarea-border-radius) var(--wje-textarea-border-radius) 0;\n }\n\n &.has-start textarea{\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n &.has-end textarea{\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .error-message {\n position: static;\n background: transparent;\n padding: 0.25rem 0;\n left: auto;\n transform: none;\n color: var(--wje-textarea-color-invalid);\n font-size: 12px;\n line-height: normal;\n }\n }\n}\n\n.counter {\n float: right;\n}';
|
|
9
9
|
class Textarea extends WJElement {
|
|
10
10
|
/**
|
|
11
11
|
* Creates an instance of Textarea.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wj-elements",
|
|
3
3
|
"description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.84",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -61,6 +61,8 @@
|
|
|
61
61
|
"sass": "^1.63.5",
|
|
62
62
|
"terser": "^5.29.2",
|
|
63
63
|
"vite": "^5.1.2",
|
|
64
|
-
"vite-plugin-javascript-obfuscator": "^3.1.0"
|
|
64
|
+
"vite-plugin-javascript-obfuscator": "^3.1.0",
|
|
65
|
+
"dotenv": "^16.4.5",
|
|
66
|
+
"animate.css": "^4.1.1"
|
|
65
67
|
}
|
|
66
68
|
}
|