wj-elements 0.1.247 → 0.1.249
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 +2 -1
- package/dist/{icon-DGGYr4tD.js → icon-DY5AZ6xM.js} +6 -8
- package/dist/{icon-DGGYr4tD.js.map → icon-DY5AZ6xM.js.map} +1 -1
- package/dist/light.css +5 -1
- package/dist/packages/wje-element/element.d.ts +7 -8
- package/dist/packages/wje-router/router.element.d.ts +3 -39
- package/dist/wje-button.js +5 -12
- package/dist/wje-button.js.map +1 -1
- package/dist/wje-color-picker.js +13 -9
- package/dist/wje-color-picker.js.map +1 -1
- package/dist/wje-element.js +64 -107
- package/dist/wje-element.js.map +1 -1
- package/dist/wje-file-upload-item.js +1 -1
- package/dist/wje-icon.js +1 -1
- package/dist/wje-img-comparer.js +1 -1
- package/dist/wje-img.js +6 -25
- package/dist/wje-img.js.map +1 -1
- package/dist/wje-master.js +1 -1
- package/dist/wje-option.js +1 -1
- package/dist/wje-pagination.js +1 -1
- package/dist/wje-routerx.js +2 -54
- package/dist/wje-routerx.js.map +1 -1
- package/dist/wje-select.js +2 -2
- package/dist/wje-textarea.js +1 -1
- package/package.json +1 -1
package/dist/wje-textarea.js
CHANGED
|
@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
|
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
4
|
import { F as FormAssociatedElement } from "./form-associated-element-o0UjvdUp.js";
|
|
5
5
|
import { event } from "./event.js";
|
|
6
|
-
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: var(--wje-textarea-padding);\n &:focus {\n outline: none;\n }\n }\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:host([required]) .wrapper::after {\n color: var(--wje-input-color-invalid);\n content: var(--wje-input-required-symbol);\n font-size: 24px;\n position: absolute;\n right: 12px;\n top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n right: 13px;\n top: -20px;\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 padding: 0 var(--wje-textarea-padding);\n }\n label {\n padding:
|
|
6
|
+
const styles = "/*\n[ WJ Textarea ]\n*/\n\n:host {\n width: 100%;\n margin-bottom: var(--wje-textarea-margin-bottom);\n display: block;\n\n label {\n margin: var(--wje-textarea-label-margin);\n padding: var(--wje-textarea-label-padding);\n display: var(--wje-textarea-label-display);\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease;\n line-height: var(--wje-textarea-label-line-height);\n font-size: var(--wje-textarea-label-font-size);\n }\n\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: var(--wje-textarea-padding);\n &:focus {\n outline: none;\n }\n }\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:host([required]) .wrapper::after {\n color: var(--wje-input-color-invalid);\n content: var(--wje-input-required-symbol);\n font-size: 24px;\n position: absolute;\n right: 12px;\n top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n right: 13px;\n top: -20px;\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 padding: 0 var(--wje-textarea-padding);\n }\n label {\n margin: var(--wje-textarea-label-margin);\n padding: var(--wje-textarea-label-padding);\n display: var(--wje-textarea-label-display);\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease;\n line-height: var(--wje-textarea-label-line-height);\n font-size: var(--wje-textarea-label-font-size);\n }\n /*label {*/\n /* padding: 0 var(--wje-textarea-padding);*/\n /* display: block;*/\n /* line-height: var(--wje-textarea-line-height);*/\n /* padding-top: 0.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 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: var(--wje-textarea-label-margin);*/\n /* display: inline-block;*/\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 slot[name='error'] {\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}\n\nslot[name='error'] {\n display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n display: block;\n}\n\nslot[name='error'] {\n display: none;\n position: absolute;\n max-width: 100%;\n min-width: auto;\n border-radius: 50px;\n background: black;\n padding: 0.25rem 0.5rem;\n top: 0;\n left: 50%;\n transform: translate(-50%, -50%);\n color: white;\n font-size: var(--wje-font-size-small);\n width: max-content;\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}\n";
|
|
7
7
|
class Textarea extends FormAssociatedElement {
|
|
8
8
|
/**
|
|
9
9
|
* 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.249",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|