wj-elements 0.1.140 → 0.1.142
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 -2
- package/dist/infinite-scroll.element-XVJukzjy.js.map +1 -1
- package/dist/light.css +14 -2
- package/dist/localize.js +2 -6
- package/dist/localize.js.map +1 -1
- package/dist/packages/index.d.ts +2 -0
- package/dist/packages/localize/localize.d.ts +1 -1
- package/dist/packages/translations/en-gb.d.ts +5 -0
- package/dist/packages/utils/permissions-api.d.ts +2 -2
- package/dist/packages/wje-accordion/accordion.element.d.ts +2 -2
- package/dist/packages/wje-accordion-item/accordion-item.element.d.ts +1 -1
- package/dist/packages/wje-animation/animation.element.d.ts +1 -1
- package/dist/packages/wje-aside/aside.element.d.ts +1 -1
- package/dist/packages/wje-badge/badge.element.d.ts +1 -1
- package/dist/packages/wje-breadcrumb/breadcrumb.element.d.ts +2 -2
- package/dist/packages/wje-breadcrumbs/breadcrumbs.element.d.ts +3 -3
- package/dist/packages/wje-button/button.element.d.ts +5 -5
- package/dist/packages/wje-button-group/button-group.element.d.ts +2 -2
- package/dist/packages/wje-card/card.element.d.ts +1 -1
- package/dist/packages/wje-card-content/card-content.element.d.ts +1 -1
- package/dist/packages/wje-card-controls/card-controls.element.d.ts +1 -1
- package/dist/packages/wje-card-header/card-header.element.d.ts +1 -1
- package/dist/packages/wje-card-subtitle/card-subtitle.element.d.ts +1 -1
- package/dist/packages/wje-card-title/card-title.element.d.ts +1 -1
- package/dist/packages/wje-carousel/carousel.element.d.ts +2 -2
- package/dist/packages/wje-chip/chip.element.d.ts +1 -0
- package/dist/packages/wje-color-picker/color-picker.element.d.ts +4 -4
- package/dist/packages/wje-color-picker/color-picker.test.d.ts +1 -0
- package/dist/packages/wje-container/container.element.d.ts +1 -1
- package/dist/packages/wje-dialog/dialog.element.d.ts +2 -2
- package/dist/packages/wje-dropdown/dropdown.element.d.ts +2 -2
- package/dist/packages/wje-element/element.d.ts +2 -2
- package/dist/packages/wje-file-upload/file-upload.element.d.ts +2 -2
- package/dist/packages/wje-file-upload-item/file-upload-item.element.d.ts +1 -1
- package/dist/packages/wje-footer/footer.element.d.ts +1 -1
- package/dist/packages/wje-format-digital/format-digital.element.d.ts +1 -1
- package/dist/packages/wje-header/header.element.d.ts +1 -1
- package/dist/packages/wje-icon/icon.element.d.ts +1 -1
- package/dist/packages/wje-icon-picker/icon-picker.element.d.ts +1 -1
- package/dist/packages/wje-img/img.element.d.ts +1 -1
- package/dist/packages/wje-img-comparer/img-comparer.element.d.ts +1 -1
- package/dist/packages/wje-infinite-scroll/infinite-scroll.element.d.ts +3 -3
- package/dist/packages/wje-input-file/input-file.element.d.ts +1 -1
- package/dist/packages/wje-item/item.element.d.ts +1 -1
- package/dist/packages/wje-kanban/kanban.element.d.ts +3 -3
- package/dist/packages/wje-label/label.element.d.ts +1 -1
- package/dist/packages/wje-level-indicator/level-indicator.d.ts +2 -0
- package/dist/packages/wje-level-indicator/level-indicator.element.d.ts +91 -0
- package/dist/packages/wje-main/main.element.d.ts +1 -1
- package/dist/packages/wje-menu/menu.element.d.ts +1 -1
- package/dist/packages/wje-menu-button/menu-button.element.d.ts +1 -1
- package/dist/packages/wje-menu-label/menu-label.element.d.ts +1 -1
- package/dist/packages/wje-option/option.element.d.ts +1 -1
- package/dist/packages/wje-options/options.element.d.ts +1 -1
- package/dist/packages/wje-pagination/pagination.d.ts +2 -0
- package/dist/packages/wje-pagination/pagination.element.d.ts +166 -0
- package/dist/packages/wje-pagination/pagination.test.d.ts +1 -0
- package/dist/packages/wje-pagination/service/service.d.ts +9 -0
- package/dist/packages/wje-popup/popup.element.d.ts +1 -1
- package/dist/packages/wje-progress-bar/progress-bar.element.d.ts +1 -1
- package/dist/packages/wje-radio/radio.element.d.ts +1 -1
- package/dist/packages/wje-rate/rate.element.d.ts +3 -3
- package/dist/packages/wje-relative-time/relative-time.element.d.ts +1 -1
- package/dist/packages/wje-reorder/reorder.element.d.ts +1 -1
- package/dist/packages/wje-route/route.element.d.ts +1 -1
- package/dist/packages/wje-router/router.element.d.ts +1 -1
- package/dist/packages/wje-router-link/router-link.element.d.ts +1 -1
- package/dist/packages/wje-select/select.element.d.ts +2 -2
- package/dist/packages/wje-slider/slider.element.d.ts +1 -1
- package/dist/packages/wje-split-view/split-view.element.d.ts +1 -1
- package/dist/packages/wje-textarea/textarea.element.d.ts +1 -1
- package/dist/packages/wje-tree/tree.test.d.ts +1 -0
- package/dist/packages/wje-tree-item/tree-item.element.d.ts +2 -2
- package/dist/packages/wje-tree-item/tree-item.test.d.ts +1 -0
- package/dist/wje-animation.js +3 -3
- package/dist/wje-animation.js.map +1 -1
- package/dist/wje-button.js +4 -2
- package/dist/wje-button.js.map +1 -1
- package/dist/wje-checkbox.js +1 -1
- package/dist/wje-checkbox.js.map +1 -1
- package/dist/wje-chip.js +7 -2
- package/dist/wje-chip.js.map +1 -1
- package/dist/wje-color-picker.js.map +1 -1
- package/dist/wje-dialog.js +1 -1
- package/dist/wje-dialog.js.map +1 -1
- package/dist/wje-element.js +4 -4
- package/dist/wje-element.js.map +1 -1
- package/dist/wje-fetchAndParseCSS.js.map +1 -1
- package/dist/wje-file-upload-item.js.map +1 -1
- package/dist/wje-file-upload.js.map +1 -1
- package/dist/wje-format-digital.js.map +1 -1
- package/dist/wje-icon-picker.js +6 -8
- package/dist/wje-icon-picker.js.map +1 -1
- package/dist/wje-level-indicator.js +160 -0
- package/dist/wje-level-indicator.js.map +1 -0
- package/dist/wje-master.js +190 -651
- package/dist/wje-master.js.map +1 -1
- package/dist/wje-options.js +1 -6
- package/dist/wje-options.js.map +1 -1
- package/dist/wje-pagination.js +355 -0
- package/dist/wje-pagination.js.map +1 -0
- package/dist/wje-slider.js +1 -1
- package/dist/wje-slider.js.map +1 -1
- package/dist/wje-split-view.js.map +1 -1
- package/dist/wje-store.js +5 -7
- package/dist/wje-store.js.map +1 -1
- package/dist/wje-textarea.js +1 -4
- package/dist/wje-textarea.js.map +1 -1
- package/dist/wje-tree-item.js +371 -0
- package/dist/wje-tree-item.js.map +1 -0
- package/dist/wje-tree.js +205 -0
- package/dist/wje-tree.js.map +1 -0
- package/package.json +6 -3
- /package/dist/packages/{bundle.d.ts → wje-accordion/accordion.test.d.ts} +0 -0
package/dist/wje-animation.js
CHANGED
|
@@ -3,6 +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 { fetchAndParseCSS } from "./wje-fetchAndParseCSS.js";
|
|
5
5
|
import WJElement from "./wje-element.js";
|
|
6
|
+
const styles = "/*\n[ Standard Element ]\n*/\n\nhtml {\n font-size: 100%;\n -ms-text-size-adjust: 100%;\n -webkit-text-size-adjust: 100%;\n}\nbody {\n color: var(--wje-color-contrast-8);\n font-family: var(--wje-font-family);\n font-size: var(--wje-font-size);\n font-weight: normal;\n letter-spacing: 0.01em;\n -webkit-font-smoothing: antialiased;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n -webkit-font-feature-settings: 'kern' 1;\n -moz-font-feature-settings: 'kern' 1;\n margin: 0;\n padding: 0 !important;\n}\n/* Headings\n------------------------------------\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin: 0.625rem 0;\n font-family: var(--wje-font-family);\n -webkit-font-smoothing: antialiased;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n font-weight: 500;\n color: inherit;\n display: inline-block;\n}\nh1 {\n font-size: var(--wje-font-size-2x-large);\n line-height: 44px;\n letter-spacing: -0.0141279em;\n}\nh2 {\n font-size: var(--wje-font-size-x-large);\n line-height: 34px;\n letter-spacing: -0.021em;\n}\nh3 {\n font-size: var(--wje-font-size-large);\n line-height: 28px;\n letter-spacing: -0.0114923em;\n}\nh4 {\n font-size: var(--wje-font-size-large);\n line-height: 26px;\n letter-spacing: -0.00865734em;\n}\nh5 {\n font-size: var(--wje-font-size-medium);\n line-height: 24px;\n letter-spacing: -0.00630069em;\n}\nh3 small,\nh4 small,\nh5 small {\n font-weight: 300;\n}\nh1.block,\nh2.block,\nh3.block,\nh4.block,\nh5.block,\nh6.block {\n padding-bottom: 0.625rem;\n}\n/* Lins and Others\n------------------------------------\n*/\na {\n text-shadow: none !important;\n color: var(--wje-color-primary-11);\n transition:\n color 0.1s linear 0s,\n background-color 0.1s linear 0s,\n opacity 0.2s linear 0s !important;\n font-weight: 500;\n}\na:focus,\na:hover,\na:active {\n color: var(--wje-color-primary);\n}\n\na,\na:focus,\na:hover,\na:active {\n outline: 0 !important;\n text-decoration: none;\n}\n\na.no-style {\n color: inherit;\n font-weight: normal;\n}\n\nbr {\n line-height: normal;\n clear: both;\n}\n\np {\n display: block;\n color: inherit;\n font-size: var(--wje-font-size);\n font-weight: normal;\n letter-spacing: 0.00177646em;\n line-height: 21px;\n margin: 0 0 0.625rem 0;\n font-style: normal;\n white-space: normal;\n}\n\nsmall,\n.small {\n line-height: 18px;\n font-size: 85.714%;\n}\n\nlabel {\n &.inline {\n display: inline-block;\n position: relative;\n top: 0;\n font-size: 13px;\n }\n}\n\nul,\nol {\n margin-bottom: 0.625rem;\n & > li {\n padding-left: 3px;\n line-height: 24px;\n }\n &.lg-icon {\n & > li {\n font-size: 21px;\n & span {\n font-size: 14px;\n }\n }\n }\n &.no-style {\n list-style: none;\n padding-left: 5px;\n }\n}\n\naddress {\n margin-bottom: 0;\n a {\n color: var(--wje-color-contrast-8);\n }\n}\n\nblockquote {\n padding: 4px 0 0 18px;\n border-left: 0;\n &:before {\n content: '\\e95d';\n font-size: 20px;\n margin-right: 6px;\n float: left;\n position: relative;\n top: -12px;\n }\n p {\n font-size: 16px;\n margin-bottom: 4px;\n }\n small {\n line-height: 29px;\n color: var(--wje-color-contrast-8);\n &:before {\n content: '—';\n margin-right: 6px;\n }\n }\n &.pull-right {\n border-right: 0;\n &:before {\n float: right;\n content: '';\n margin-left: 6px;\n margin-right: 0;\n }\n small {\n padding-right: 30px;\n &:after {\n content: '';\n }\n }\n }\n}\nhr {\n border-color: var(--wje-border-color);\n &.double {\n border-width: 2px;\n }\n &.dotted {\n border-style: dotted none none;\n }\n}\n\n.ff-sup {\n font-feature-settings:\n 'kern' 1,\n 'sups' 1;\n -webkit-font-feature-settings:\n 'kern' 1,\n 'sups' 1;\n -moz-font-feature-settings:\n 'kern' 1,\n 'sups' 1;\n}\n\n.ff-sub {\n font-feature-settings:\n 'kern' 1,\n 'subs' 1;\n -webkit-font-feature-settings:\n 'kern' 1,\n 'subs' 1;\n -moz-font-feature-settings:\n 'kern' 1,\n 'subs' 1;\n}\n\n/* Standard HTML Typography tags\n------------------------------------\n*/\n\ncode {\n color: var(--wje-color-contrast-6);\n background-color: var(--wje-color);\n font-size: 97%;\n position: relative;\n line-height: inherit;\n border-radius: 3px;\n padding: 5px 7px;\n margin: 0;\n &:hover {\n color: var(--wje-color-complete);\n }\n &.code-sm {\n padding: 3px 6px;\n }\n}\n\nfigcaption {\n font-size: 13px;\n margin-top: 0.625rem;\n font-weight: 400;\n display: block;\n letter-spacing: 0.008em;\n text-align: center;\n color: var(--wje-color-contrast-6);\n line-height: 1.46;\n}\n\nem {\n font-style: italic !important;\n font-family: inherit;\n font-weight: inherit;\n}\n\nins {\n font-family: var(--wje-font-family);\n border-bottom: 1px solid #d0d0d0;\n text-decoration: none;\n color: var(--wje-color-contrast-8);\n font-weight: normal;\n font-size: 94%;\n}\n\ncite {\n font-family: var(--wje-font-family);\n font-weight: 300;\n color: var(--wje-color-contrast-6);\n text-decoration: none;\n font-style: normal;\n hanging-punctuation: first;\n}\n\nsup {\n top: -0.28em;\n font-size: 70%;\n}\n\nsub {\n bottom: 0.03em;\n}\n\nvar {\n font-family: var(--wje-font-family);\n font-feature-settings:\n 'calt' 1,\n 'tnum' 1,\n 'frac' 1,\n 'case' 1,\n 'ss01' 1,\n 'cv11' 1;\n}\n\nabbr {\n text-decoration: none;\n letter-spacing: 0.01em;\n background-color: transparent;\n border-bottom: 2px solid #ffba5a;\n transition-property: color, background, border;\n transition-duration: 0.15s;\n transition-timing-function: linear;\n color: var(--wje-color-contrast-8);\n}\n\nq {\n font-family: var(--wje-font-family);\n font-weight: 500;\n font-size: 20px;\n hanging-punctuation: first;\n\n &:before {\n content: '\\201C';\n color: rgba(0, 0, 0, 0.44);\n font-size: 35px;\n }\n\n &:after {\n content: '\\201D';\n font-size: 35px;\n color: rgba(0, 0, 0, 0.44);\n }\n}\naudio {\n margin-top: 42px;\n}\nhr {\n clear: both;\n margin-bottom: 42px;\n margin-top: 42px;\n border: 0;\n border-bottom: 1px solid rgba(0, 0, 0, 0.13);\n}\naddress {\n font-family: var(--wje-font-family);\n font-style: normal;\n margin: 0 0 1.75em;\n font-size: 14px;\n line-height: 24px;\n margin-top: 24px;\n}\nabbr {\n text-decoration: none;\n letter-spacing: 0.01em;\n background-color: transparent;\n border-bottom: 2px solid #ffba5a;\n transition-property: color, background, border;\n transition-duration: 0.15s;\n transition-timing-function: linear;\n color: var(--wje-color-contrast-8);\n}\n\nacronym {\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n background-color: transparent;\n border-bottom: 2px solid #ffba5a;\n transition-property: color, background, border;\n transition-duration: 0.15s;\n transition-timing-function: linear;\n color: var(--wje-color-contrast-8);\n}\n\npre {\n tab-size: 4;\n font-size: 85.714%;\n overflow-x: auto;\n font-family: monospace, monospace;\n line-height: 1.7;\n counter-reset: line;\n background-color: var(--wje-color-contrast-3) er;\n color: var(--wje-color-contrast-8);\n margin-inline: 0;\n padding: 1rem 1.25rem;\n border-radius: 3px;\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\ndt {\n font-weight: 700;\n margin-bottom: 5px;\n}\n\ndd {\n margin: 0 0 1.75em;\n}\n\nkbd {\n font-size: 85.714%;\n font-family: var(--wje-font-family);\n position: relative;\n line-height: 34px;\n top: -3px;\n letter-spacing: 0.01em;\n padding: 5px 7px;\n margin: 0;\n color: rgba(0, 0, 0, 0.53);\n background-color: #fff;\n border-radius: 3px;\n box-shadow:\n 0 2px 0 1px #c7c7c7,\n 0 1px 0 1px rgba(0, 0, 0, 0.15),\n 0 0 0 1px #ececec;\n}\n\n/* Types\n------------------------------------\n*/\n\n.overline {\n text-transform: uppercase;\n display: inline-block;\n letter-spacing: 0.06em;\n font-size: 11px;\n}\n\n/* Font Sizes\n------------------------------------\n*/\n\n.small-text {\n font-size: 12px !important;\n letter-spacing: 0.00849077em;\n line-height: 18px;\n a {\n text-decoration: underline;\n }\n}\n.normal-text {\n font-size: 13px !important;\n}\n.large-text {\n font-size: 15px !important;\n}\n\n/* Font Weights\n------------------------------------\n */\n\n.normal {\n font-weight: normal !important;\n}\n.semi-bold {\n font-weight: 500 !important;\n}\n.bold {\n font-weight: 600 !important;\n}\n.light {\n font-weight: 300 !important;\n}\n\n/* Misc\n------------------------------------\n*/\n\n.all-caps {\n text-transform: uppercase;\n letter-spacing: 0.07em !important;\n}\n.text-uppercase {\n text-transform: uppercase !important;\n letter-spacing: 0.07em !important;\n}\n.muted {\n color: var(--wje-color-contrast-6);\n}\n.hint-text {\n opacity: 0.76 !important;\n}\n.no-decoration {\n text-decoration: none !important;\n}\n\n.text-ellipsis {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Gradients\n------------------------------------\n*/\n.gradient-grey {\n background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n.gradient-black {\n background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n\n/* Other Colors\n------------------------------------\n*/\n.bg-black {\n background-color: var(--wje-color-black) !important;\n color: var(--wje-color-contrast-0);\n}\n.bg-white {\n background-color: var(--wje-color-contrast-0) !important;\n color: var(--wje-color-contrast-8);\n}\n.bg-transparent {\n background-color: transparent !important;\n}\n\n/* Text Colors */\n.link {\n opacity: 0.7;\n &:hover {\n opacity: 1;\n }\n}\n\n/* Text Aligngments\n------------------------------------\n*/\n\n.text-right {\n text-align: right !important;\n}\n.text-left {\n text-align: left !important;\n}\n.text-center {\n text-align: center !important;\n}\n\n/* Strokes\n------------------------------------\n*/\n\n.stroke-primary {\n stroke: var(--wje-color-primary) !important;\n}\n.stroke-complete {\n stroke: var(--wje-color-complete) !important;\n}\n.stroke-success {\n stroke: var(--wje-color-success) !important;\n}\n.stroke-info {\n stroke: var(--wje-color-info) !important;\n}\n.stroke-warning {\n stroke: var(--wje-color-warning) !important;\n}\n.stroke-danger {\n stroke: var(--wje-color-danger) !important;\n}\n\n/* Font Sizes\n------------------------------------\ntracking =a+b×e(c × z)\n\na, b and c are constants\na = -0.0223\nb = 0.185\nc = -0.1745\nz = font size\n\n*/\n.fs-x-small {\n font-size: var(--wje-font-size-x-small) !important;\n letter-spacing: 0.0180093em;\n line-height: 15px;\n}\n.fs-small {\n font-size: var(--wje-font-size-small) !important;\n letter-spacing: 0.00849077em;\n line-height: 18px;\n}\n.fs {\n font-size: var(--wje-font-size) !important;\n letter-spacing: 0.00177646em;\n line-height: 22px;\n}\n\n.fs-medium {\n font-size: var(--wje-font-size-medium) !important;\n letter-spacing: -0.00295978em;\n line-height: 24px;\n}\n\n.fs-large {\n font-size: var(--wje-font-size-large) !important;\n letter-spacing: normal;\n line-height: normal;\n}\n\n.fs-x-large {\n font-size: var(--wje-font-size-x-large) !important;\n letter-spacing: normal;\n line-height: normal;\n}\n\n.fs-2x-large {\n font-size: var(--wje-font-size-2x-large) !important;\n letter-spacing: normal;\n line-height: normal;\n}\n\n.fs-3x-large {\n font-size: var(--wje-font-size-3x-large) !important;\n letter-spacing: normal;\n line-height: normal;\n}\n\n.fs-4x-large {\n font-size: var(--wje-font-size-4x-large) !important;\n letter-spacing: normal;\n line-height: normal;\n}\n\n/* Line-heights\n------------------------------------\n*/\n.lh-normal {\n line-height: normal;\n}\n.lh-10 {\n line-height: 10px;\n}\n.lh-11 {\n line-height: 11px;\n}\n.lh-12 {\n line-height: 12px;\n}\n.lh-13 {\n line-height: 13px;\n}\n.lh-14 {\n line-height: 14px;\n}\n.lh-15 {\n line-height: 15px;\n}\n.lh-16 {\n line-height: 16px;\n}\n\n/* Font Faces\n------------------------------------\n*/\n\n.font-arial {\n font-family: Arial, sans-serif !important;\n}\n.font-montserrat {\n font-family: var(--wje-font-family-secondary) !important;\n}\n.font-heading {\n font-family: var(--wje-font-family-secondary);\n}\n.font-secondary {\n font-family: var(--wje-font-family-secondary);\n}\n\n/* Wells\n------------------------------------\n*/\n.well {\n background-color: var(--wje-color-contrast-3);\n -webkit-border-radius: 3px;\n -moz-border-radius: 3px;\n border-radius: 3px;\n -webkit-box-shadow: none !important;\n -moz-box-shadow: none !important;\n box-shadow: none !important;\n border: none;\n background-image: none;\n &.well-large {\n padding: 24px;\n width: auto;\n }\n &.well-small {\n padding: 13px;\n width: auto;\n }\n &.green {\n background-color: var(--wje-color-complete);\n color: var(--wje-color-contrast-0);\n border: none;\n }\n}\n.overflow-ellipsis {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n\n/* Responsive Handlers : Typo\n------------------------------------\n*/\n\n@media (max-width: 1024px) {\n body,\n p {\n font-size: var(--wje-font-size-small);\n line-height: 20px;\n }\n\n h1 {\n font-size: var(--wje-font-size-2x-large);\n line-height: 44px;\n letter-spacing: -0.08px;\n }\n h2 {\n font-size: var(--wje-font-size-x-large);\n line-height: 40px;\n }\n h3 {\n font-size: var(--wje-font-size-large);\n line-height: 35.88px;\n }\n h4 {\n font-size: var(--wje-font-size-large);\n line-height: 33.88px;\n }\n h5 {\n font-size: var(--wje-font-size-medium);\n line-height: 25.88px;\n }\n small,\n .small {\n font-size: 89%;\n line-height: 17px;\n }\n}\n\n.alert {\n & > p,\n & > ul {\n margin-bottom: 0;\n }\n}\n.table {\n & > tbody {\n & > tr {\n & > td,\n & > th {\n line-height: 1.42857143;\n }\n }\n }\n & > tfoot {\n & > tr {\n & > td,\n & > th {\n line-height: 1.42857143;\n }\n }\n }\n & > thead {\n & > tr {\n & > td,\n & > th {\n line-height: 1.42857143;\n }\n }\n }\n}\n\n/* For Windows : Fixes\n------------------------------------\n*/\n\n.line-clamp-2 {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.line-clamp-3 {\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.line-clamp-5 {\n display: -webkit-box;\n -webkit-line-clamp: 5;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.text-separator {\n display: block;\n text-align: center;\n margin: 1.5rem 0;\n width: 100%;\n background: linear-gradient(\n to top,\n transparent 0%,\n transparent calc(50% - 1px),\n var(--wje-border-color) calc(50% - 1px),\n var(--wje-border-color) calc(50% + 1px),\n transparent calc(50% + 1px),\n transparent 100%\n );\n}\n.text-separator::before {\n background: #fff;\n content: attr(data-text);\n padding: 0 1rem;\n text-transform: uppercase;\n}\n\n.wje-toast-stack {\n position: fixed;\n top: 0;\n margin: 0 0.5rem;\n width: 300px;\n max-width: 100%;\n max-height: 100%;\n overflow: auto;\n z-index: 9999;\n}\n";
|
|
6
7
|
const animations = `@charset "UTF-8";/*!
|
|
7
8
|
* animate.css - https://animate.style/
|
|
8
9
|
* Version - 4.1.1
|
|
@@ -4076,7 +4077,6 @@ const animations = `@charset "UTF-8";/*!
|
|
|
4076
4077
|
animation-name: slideOutUp;
|
|
4077
4078
|
}
|
|
4078
4079
|
`;
|
|
4079
|
-
const styles = "/*\n[ Standard Element ]\n*/\n\nhtml {\n font-size: 100%;\n -ms-text-size-adjust: 100%;\n -webkit-text-size-adjust: 100%;\n}\nbody {\n color: var(--wje-color-contrast-8);\n font-family: var(--wje-font-family);\n font-size: var(--wje-font-size);\n font-weight: normal;\n letter-spacing: 0.01em;\n -webkit-font-smoothing: antialiased;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n -webkit-font-feature-settings: 'kern' 1;\n -moz-font-feature-settings: 'kern' 1;\n margin: 0;\n padding: 0 !important;\n}\n/* Headings\n------------------------------------\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin: 0.625rem 0;\n font-family: var(--wje-font-family);\n -webkit-font-smoothing: antialiased;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n font-weight: 500;\n color: inherit;\n display: inline-block;\n}\nh1 {\n font-size: var(--wje-font-size-2x-large);\n line-height: 44px;\n letter-spacing: -0.0141279em;\n}\nh2 {\n font-size: var(--wje-font-size-x-large);\n line-height: 34px;\n letter-spacing: -0.021em;\n}\nh3 {\n font-size: var(--wje-font-size-large);\n line-height: 28px;\n letter-spacing: -0.0114923em;\n}\nh4 {\n font-size: var(--wje-font-size-large);\n line-height: 26px;\n letter-spacing: -0.00865734em;\n}\nh5 {\n font-size: var(--wje-font-size-medium);\n line-height: 24px;\n letter-spacing: -0.00630069em;\n}\nh3 small,\nh4 small,\nh5 small {\n font-weight: 300;\n}\nh1.block,\nh2.block,\nh3.block,\nh4.block,\nh5.block,\nh6.block {\n padding-bottom: 0.625rem;\n}\n/* Lins and Others\n------------------------------------\n*/\na {\n text-shadow: none !important;\n color: var(--wje-color-primary-11);\n transition:\n color 0.1s linear 0s,\n background-color 0.1s linear 0s,\n opacity 0.2s linear 0s !important;\n font-weight: 500;\n}\na:focus,\na:hover,\na:active {\n color: var(--wje-color-primary);\n}\n\na,\na:focus,\na:hover,\na:active {\n outline: 0 !important;\n text-decoration: none;\n}\n\na.no-style {\n color: inherit;\n font-weight: normal;\n}\n\nbr {\n line-height: normal;\n clear: both;\n}\n\np {\n display: block;\n color: inherit;\n font-size: var(--wje-font-size);\n font-weight: normal;\n letter-spacing: 0.00177646em;\n line-height: 21px;\n margin: 0 0 0.625rem 0;\n font-style: normal;\n white-space: normal;\n}\n\nsmall,\n.small {\n line-height: 18px;\n font-size: 85.714%;\n}\n\nlabel {\n &.inline {\n display: inline-block;\n position: relative;\n top: 0;\n font-size: 13px;\n }\n}\n\nul,\nol {\n margin-bottom: 0.625rem;\n & > li {\n padding-left: 3px;\n line-height: 24px;\n }\n &.lg-icon {\n & > li {\n font-size: 21px;\n & span {\n font-size: 14px;\n }\n }\n }\n &.no-style {\n list-style: none;\n padding-left: 5px;\n }\n}\n\naddress {\n margin-bottom: 0;\n a {\n color: var(--wje-color-contrast-8);\n }\n}\n\nblockquote {\n padding: 4px 0 0 18px;\n border-left: 0;\n &:before {\n content: '\\e95d';\n font-size: 20px;\n margin-right: 6px;\n float: left;\n position: relative;\n top: -12px;\n }\n p {\n font-size: 16px;\n margin-bottom: 4px;\n }\n small {\n line-height: 29px;\n color: var(--wje-color-contrast-8);\n &:before {\n content: '—';\n margin-right: 6px;\n }\n }\n &.pull-right {\n border-right: 0;\n &:before {\n float: right;\n content: '';\n margin-left: 6px;\n margin-right: 0;\n }\n small {\n padding-right: 30px;\n &:after {\n content: '';\n }\n }\n }\n}\nhr {\n border-color: var(--wje-border-color);\n &.double {\n border-width: 2px;\n }\n &.dotted {\n border-style: dotted none none;\n }\n}\n\n.ff-sup {\n font-feature-settings:\n 'kern' 1,\n 'sups' 1;\n -webkit-font-feature-settings:\n 'kern' 1,\n 'sups' 1;\n -moz-font-feature-settings:\n 'kern' 1,\n 'sups' 1;\n}\n\n.ff-sub {\n font-feature-settings:\n 'kern' 1,\n 'subs' 1;\n -webkit-font-feature-settings:\n 'kern' 1,\n 'subs' 1;\n -moz-font-feature-settings:\n 'kern' 1,\n 'subs' 1;\n}\n\n/* Standard HTML Typography tags\n------------------------------------\n*/\n\ncode {\n color: var(--wje-color-contrast-6);\n background-color: var(--wje-color);\n font-size: 97%;\n position: relative;\n line-height: inherit;\n border-radius: 3px;\n padding: 5px 7px;\n margin: 0;\n &:hover {\n color: var(--wje-color-complete);\n }\n &.code-sm {\n padding: 3px 6px;\n }\n}\n\nfigcaption {\n font-size: 13px;\n margin-top: 0.625rem;\n font-weight: 400;\n display: block;\n letter-spacing: 0.008em;\n text-align: center;\n color: var(--wje-color-contrast-6);\n line-height: 1.46;\n}\n\nem {\n font-style: italic !important;\n font-family: inherit;\n font-weight: inherit;\n}\n\nins {\n font-family: var(--wje-font-family);\n border-bottom: 1px solid #d0d0d0;\n text-decoration: none;\n color: var(--wje-color-contrast-8);\n font-weight: normal;\n font-size: 94%;\n}\n\ncite {\n font-family: var(--wje-font-family);\n font-weight: 300;\n color: var(--wje-color-contrast-6);\n text-decoration: none;\n font-style: normal;\n hanging-punctuation: first;\n}\n\nsup {\n top: -0.28em;\n font-size: 70%;\n}\n\nsub {\n bottom: 0.03em;\n}\n\nvar {\n font-family: var(--wje-font-family);\n font-feature-settings:\n 'calt' 1,\n 'tnum' 1,\n 'frac' 1,\n 'case' 1,\n 'ss01' 1,\n 'cv11' 1;\n}\n\nabbr {\n text-decoration: none;\n letter-spacing: 0.01em;\n background-color: transparent;\n border-bottom: 2px solid #ffba5a;\n transition-property: color, background, border;\n transition-duration: 0.15s;\n transition-timing-function: linear;\n color: var(--wje-color-contrast-8);\n}\n\nq {\n font-family: var(--wje-font-family);\n font-weight: 500;\n font-size: 20px;\n hanging-punctuation: first;\n\n &:before {\n content: '\\201C';\n color: rgba(0, 0, 0, 0.44);\n font-size: 35px;\n }\n\n &:after {\n content: '\\201D';\n font-size: 35px;\n color: rgba(0, 0, 0, 0.44);\n }\n}\naudio {\n margin-top: 42px;\n}\nhr {\n clear: both;\n margin-bottom: 42px;\n margin-top: 42px;\n border: 0;\n border-bottom: 1px solid rgba(0, 0, 0, 0.13);\n}\naddress {\n font-family: var(--wje-font-family);\n font-style: normal;\n margin: 0 0 1.75em;\n font-size: 14px;\n line-height: 24px;\n margin-top: 24px;\n}\nabbr {\n text-decoration: none;\n letter-spacing: 0.01em;\n background-color: transparent;\n border-bottom: 2px solid #ffba5a;\n transition-property: color, background, border;\n transition-duration: 0.15s;\n transition-timing-function: linear;\n color: var(--wje-color-contrast-8);\n}\n\nacronym {\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n background-color: transparent;\n border-bottom: 2px solid #ffba5a;\n transition-property: color, background, border;\n transition-duration: 0.15s;\n transition-timing-function: linear;\n color: var(--wje-color-contrast-8);\n}\n\npre {\n tab-size: 4;\n font-size: 85.714%;\n overflow-x: auto;\n font-family: monospace, monospace;\n line-height: 1.7;\n counter-reset: line;\n background-color: var(--wje-color-contrast-3) er;\n color: var(--wje-color-contrast-8);\n margin-inline: 0;\n padding: 1rem 1.25rem;\n border-radius: 3px;\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\ndt {\n font-weight: 700;\n margin-bottom: 5px;\n}\n\ndd {\n margin: 0 0 1.75em;\n}\n\nkbd {\n font-size: 85.714%;\n font-family: var(--wje-font-family);\n position: relative;\n line-height: 34px;\n top: -3px;\n letter-spacing: 0.01em;\n padding: 5px 7px;\n margin: 0;\n color: rgba(0, 0, 0, 0.53);\n background-color: #fff;\n border-radius: 3px;\n box-shadow:\n 0 2px 0 1px #c7c7c7,\n 0 1px 0 1px rgba(0, 0, 0, 0.15),\n 0 0 0 1px #ececec;\n}\n\n/* Types\n------------------------------------\n*/\n\n.overline {\n text-transform: uppercase;\n display: inline-block;\n letter-spacing: 0.06em;\n font-size: 11px;\n}\n\n/* Font Sizes\n------------------------------------\n*/\n\n.small-text {\n font-size: 12px !important;\n letter-spacing: 0.00849077em;\n line-height: 18px;\n a {\n text-decoration: underline;\n }\n}\n.normal-text {\n font-size: 13px !important;\n}\n.large-text {\n font-size: 15px !important;\n}\n\n/* Font Weights\n------------------------------------\n */\n\n.normal {\n font-weight: normal !important;\n}\n.semi-bold {\n font-weight: 500 !important;\n}\n.bold {\n font-weight: 600 !important;\n}\n.light {\n font-weight: 300 !important;\n}\n\n/* Misc\n------------------------------------\n*/\n\n.all-caps {\n text-transform: uppercase;\n letter-spacing: 0.07em !important;\n}\n.text-uppercase {\n text-transform: uppercase !important;\n letter-spacing: 0.07em !important;\n}\n.muted {\n color: var(--wje-color-contrast-6);\n}\n.hint-text {\n opacity: 0.76 !important;\n}\n.no-decoration {\n text-decoration: none !important;\n}\n\n.text-ellipsis {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Gradients\n------------------------------------\n*/\n.gradient-grey {\n background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n.gradient-black {\n background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n\n/* Other Colors\n------------------------------------\n*/\n.bg-black {\n background-color: var(--wje-color-black) !important;\n color: var(--wje-color-contrast-0);\n}\n.bg-white {\n background-color: var(--wje-color-contrast-0) !important;\n color: var(--wje-color-contrast-8);\n}\n.bg-transparent {\n background-color: transparent !important;\n}\n\n/* Text Colors */\n.link {\n opacity: 0.7;\n &:hover {\n opacity: 1;\n }\n}\n\n/* Text Aligngments\n------------------------------------\n*/\n\n.text-right {\n text-align: right !important;\n}\n.text-left {\n text-align: left !important;\n}\n.text-center {\n text-align: center !important;\n}\n\n/* Strokes\n------------------------------------\n*/\n\n.stroke-primary {\n stroke: var(--wje-color-primary) !important;\n}\n.stroke-complete {\n stroke: var(--wje-color-complete) !important;\n}\n.stroke-success {\n stroke: var(--wje-color-success) !important;\n}\n.stroke-info {\n stroke: var(--wje-color-info) !important;\n}\n.stroke-warning {\n stroke: var(--wje-color-warning) !important;\n}\n.stroke-danger {\n stroke: var(--wje-color-danger) !important;\n}\n\n/* Font Sizes\n------------------------------------\ntracking =a+b×e(c × z)\n\na, b and c are constants\na = -0.0223\nb = 0.185\nc = -0.1745\nz = font size\n\n*/\n.fs-x-small {\n font-size: var(--wje-font-size-x-small) !important;\n letter-spacing: 0.0180093em;\n line-height: 15px;\n}\n.fs-small {\n font-size: var(--wje-font-size-small) !important;\n letter-spacing: 0.00849077em;\n line-height: 18px;\n}\n.fs {\n font-size: var(--wje-font-size) !important;\n letter-spacing: 0.00177646em;\n line-height: 22px;\n}\n\n.fs-medium {\n font-size: var(--wje-font-size-medium) !important;\n letter-spacing: -0.00295978em;\n line-height: 24px;\n}\n\n.fs-large {\n font-size: var(--wje-font-size-large) !important;\n letter-spacing: normal;\n line-height: normal;\n}\n\n.fs-x-large {\n font-size: var(--wje-font-size-x-large) !important;\n letter-spacing: normal;\n line-height: normal;\n}\n\n.fs-2x-large {\n font-size: var(--wje-font-size-2x-large) !important;\n letter-spacing: normal;\n line-height: normal;\n}\n\n.fs-3x-large {\n font-size: var(--wje-font-size-3x-large) !important;\n letter-spacing: normal;\n line-height: normal;\n}\n\n.fs-4x-large {\n font-size: var(--wje-font-size-4x-large) !important;\n letter-spacing: normal;\n line-height: normal;\n}\n\n/* Line-heights\n------------------------------------\n*/\n.lh-normal {\n line-height: normal;\n}\n.lh-10 {\n line-height: 10px;\n}\n.lh-11 {\n line-height: 11px;\n}\n.lh-12 {\n line-height: 12px;\n}\n.lh-13 {\n line-height: 13px;\n}\n.lh-14 {\n line-height: 14px;\n}\n.lh-15 {\n line-height: 15px;\n}\n.lh-16 {\n line-height: 16px;\n}\n\n/* Font Faces\n------------------------------------\n*/\n\n.font-arial {\n font-family: Arial, sans-serif !important;\n}\n.font-montserrat {\n font-family: var(--wje-font-family-secondary) !important;\n}\n.font-heading {\n font-family: var(--wje-font-family-secondary);\n}\n.font-secondary {\n font-family: var(--wje-font-family-secondary);\n}\n\n/* Wells\n------------------------------------\n*/\n.well {\n background-color: var(--wje-color-contrast-3);\n -webkit-border-radius: 3px;\n -moz-border-radius: 3px;\n border-radius: 3px;\n -webkit-box-shadow: none !important;\n -moz-box-shadow: none !important;\n box-shadow: none !important;\n border: none;\n background-image: none;\n &.well-large {\n padding: 24px;\n width: auto;\n }\n &.well-small {\n padding: 13px;\n width: auto;\n }\n &.green {\n background-color: var(--wje-color-complete);\n color: var(--wje-color-contrast-0);\n border: none;\n }\n}\n.overflow-ellipsis {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n\n/* Responsive Handlers : Typo\n------------------------------------\n*/\n\n@media (max-width: 1024px) {\n body,\n p {\n font-size: var(--wje-font-size-small);\n line-height: 20px;\n }\n\n h1 {\n font-size: var(--wje-font-size-2x-large);\n line-height: 44px;\n letter-spacing: -0.08px;\n }\n h2 {\n font-size: var(--wje-font-size-x-large);\n line-height: 40px;\n }\n h3 {\n font-size: var(--wje-font-size-large);\n line-height: 35.88px;\n }\n h4 {\n font-size: var(--wje-font-size-large);\n line-height: 33.88px;\n }\n h5 {\n font-size: var(--wje-font-size-medium);\n line-height: 25.88px;\n }\n small,\n .small {\n font-size: 89%;\n line-height: 17px;\n }\n}\n\n.alert {\n & > p,\n & > ul {\n margin-bottom: 0;\n }\n}\n.table {\n & > tbody {\n & > tr {\n & > td,\n & > th {\n line-height: 1.42857143;\n }\n }\n }\n & > tfoot {\n & > tr {\n & > td,\n & > th {\n line-height: 1.42857143;\n }\n }\n }\n & > thead {\n & > tr {\n & > td,\n & > th {\n line-height: 1.42857143;\n }\n }\n }\n}\n\n/* For Windows : Fixes\n------------------------------------\n*/\n\n.line-clamp-2 {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.line-clamp-3 {\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.line-clamp-5 {\n display: -webkit-box;\n -webkit-line-clamp: 5;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.text-separator {\n display: block;\n text-align: center;\n margin: 1.5rem 0;\n width: 100%;\n background: linear-gradient(\n to top,\n transparent 0%,\n transparent calc(50% - 1px),\n var(--wje-border-color) calc(50% - 1px),\n var(--wje-border-color) calc(50% + 1px),\n transparent calc(50% + 1px),\n transparent 100%\n );\n}\n.text-separator::before {\n background: #fff;\n content: attr(data-text);\n padding: 0 1rem;\n text-transform: uppercase;\n}\n\n.wje-toast-stack {\n position: fixed;\n top: 0;\n margin: 0 0.5rem;\n width: 300px;\n max-width: 100%;\n max-height: 100%;\n overflow: auto;\n z-index: 9999;\n}\n";
|
|
4080
4080
|
class Animation extends WJElement {
|
|
4081
4081
|
/**
|
|
4082
4082
|
* Constructor for the Animation class.
|
|
@@ -4270,8 +4270,8 @@ class Animation extends WJElement {
|
|
|
4270
4270
|
this.destroyAnimation();
|
|
4271
4271
|
const element = this.slotEl.assignedElements()[0];
|
|
4272
4272
|
this.animations = await this.getAnimationsArray();
|
|
4273
|
-
const selected = this.animations.find((k) => k.name === this.name);
|
|
4274
|
-
this.animation = element == null ? void 0 : element.animate(selected.keyframes, {
|
|
4273
|
+
const selected = await this.animations.find((k) => k.name === this.name);
|
|
4274
|
+
this.animation = element == null ? void 0 : element.animate(selected == null ? void 0 : selected.keyframes, {
|
|
4275
4275
|
delay: +this.delay,
|
|
4276
4276
|
endDelay: +this.endDelay,
|
|
4277
4277
|
fill: this.fill,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-animation.js","sources":["../packages/wje-animation/animation.element.js","../packages/wje-animation/animation.js"],"sourcesContent":["import animations from 'animate.css?inline';\n\nimport styles from '../styles/styles.css?inline';\nimport { fetchAndParseCSS } from '../utils/animations.js';\nimport { default as WJElement } from '../wje-element/element.js';\n\n/**\n * @summary This class represents an Animation element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/animation\n * @status stable\n * @augments WJElement\n * @slot - The animation main content.\n * @cssproperty --size - The size of the avatar.\n * @tag wje-animation\n */\nexport default class Animation extends WJElement {\n /**\n * Constructor for the Animation class.\n */\n constructor() {\n super();\n this._animations = [];\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set name(value) {\n this.setAttribute('name', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get name() {\n return this.getAttribute('name') || 'heartBeat';\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set duration(value) {\n this.setAttribute('duration', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get duration() {\n return +this.getAttribute('duration') || 1000;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set delay(value) {\n this.setAttribute('delay', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get delay() {\n return +this.getAttribute('delay') || 0;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set endDelay(value) {\n this.setAttribute('endDelay', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get endDelay() {\n return +this.getAttribute('endDelay') || 0;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set fill(value) {\n this.setAttribute('fill', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get fill() {\n return this.getAttribute('fill') || 'auto';\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set iterations(value) {\n this.setAttribute('iterations', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string|number}\n */\n get iterations() {\n return this.getAttribute('iterations') || Infinity;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set iterationStart(value) {\n this.setAttribute('iterationStart', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get iterationStart() {\n return +this.getAttribute('iterationStart') || 0;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set direction(value) {\n this.setAttribute('direction', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get direction() {\n return this.getAttribute('direction') || 'normal';\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set easing(value) {\n this.setAttribute('easing', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get easing() {\n return this.getAttribute('easing') || 'linear';\n }\n\n /**\n * Setter for the animations property.\n * @param {Array} value The new value for the animations property.\n */\n set animations(value) {\n this._animations = value;\n }\n\n /**\n * Getter for the animations' property.\n * @returns {Array} The current value of the animations' property.\n */\n get animations() {\n return this._animations;\n }\n\n /**\n * The class name for the Animation element.\n * @type {string}\n */\n className = 'Animation';\n\n /**\n * Getter for the CSS stylesheet.\n * @returns {object} The styles for the Animation element.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observed attributes.\n * @returns {Array} An array containing the name of the observed attribute.\n */\n static get observedAttributes() {\n return ['name'];\n }\n\n /**\n * Method to setup attributes for the Animation element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Method to draw the Animation element.\n * @returns {object} The document fragment containing the drawn element.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let slot = document.createElement('slot');\n\n fragment.appendChild(slot);\n\n this.slotEl = slot;\n\n return fragment;\n }\n\n /**\n * Method to perform actions after the Animation element is drawn.\n * This method destroys any existing animation, fetches a new animations array,\n * selects the appropriate animation, and applies it to the element.\n */\n async afterDraw() {\n this.destroyAnimation();\n\n const element = this.slotEl.assignedElements()[0];\n this.animations = await this.getAnimationsArray();\n const selected = this.animations.find((k) => k.name === this.name);\n\n this.animation = element?.animate(selected.keyframes, {\n delay: +this.delay,\n endDelay: +this.endDelay,\n fill: this.fill,\n duration: +this.duration,\n iterationStart: +this.iterationStart,\n iterations: this.iterations,\n direction: this.direction,\n easing: this.easing,\n });\n if (this.animation) this.animation.play();\n }\n\n /**\n * Method to fetch and parse the animations array from a CSS file.\n * @returns {Array} An array of animation definitions parsed from the CSS file.\n */\n async getAnimationsArray() {\n return await fetchAndParseCSS(animations);\n }\n\n /**\n * Method to destroy the current animation.\n */\n destroyAnimation() {\n if (this.animation) {\n this.cancel();\n }\n }\n\n /**\n * Method to play the current animation.\n */\n play() {\n if (this.animation) {\n this.animation.play();\n }\n }\n\n /**\n * Method to cancel the current animation.\n */\n cancel() {\n if (this.animation && typeof this.animation.cancel === 'function') {\n this.animation.cancel();\n } else {\n console.warn('Animation is not initialized or cancel is not available');\n }\n }\n}\n","import Animation from './animation.element.js';\n\nexport default Animation;\n\nAnimation.define('wje-animation', Animation);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
|
|
1
|
+
{"version":3,"file":"wje-animation.js","sources":["../packages/wje-animation/animation.element.js","../packages/wje-animation/animation.js"],"sourcesContent":["import { fetchAndParseCSS } from '../utils/animations.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from '../styles/styles.css?inline';\nimport animations from 'animate.css?inline';\n\n/**\n * @summary This class represents an Animation element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/animation\n * @status stable\n * @augments WJElement\n * @slot - The animation main content.\n * @cssproperty --size - The size of the avatar.\n * @tag wje-animation\n */\nexport default class Animation extends WJElement {\n /**\n * Constructor for the Animation class.\n */\n constructor() {\n super();\n this._animations = [];\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set name(value) {\n this.setAttribute('name', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get name() {\n return this.getAttribute('name') || 'heartBeat';\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set duration(value) {\n this.setAttribute('duration', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get duration() {\n return +this.getAttribute('duration') || 1000;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set delay(value) {\n this.setAttribute('delay', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get delay() {\n return +this.getAttribute('delay') || 0;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set endDelay(value) {\n this.setAttribute('endDelay', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get endDelay() {\n return +this.getAttribute('endDelay') || 0;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set fill(value) {\n this.setAttribute('fill', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get fill() {\n return this.getAttribute('fill') || 'auto';\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set iterations(value) {\n this.setAttribute('iterations', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string|number}\n */\n get iterations() {\n return this.getAttribute('iterations') || Infinity;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set iterationStart(value) {\n this.setAttribute('iterationStart', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get iterationStart() {\n return +this.getAttribute('iterationStart') || 0;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set direction(value) {\n this.setAttribute('direction', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get direction() {\n return this.getAttribute('direction') || 'normal';\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set easing(value) {\n this.setAttribute('easing', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get easing() {\n return this.getAttribute('easing') || 'linear';\n }\n\n /**\n * Setter for the animations property.\n * @param {Array} value The new value for the animations property.\n */\n set animations(value) {\n this._animations = value;\n }\n\n /**\n * Getter for the animations' property.\n * @returns {Array} The current value of the animations' property.\n */\n get animations() {\n return this._animations;\n }\n\n /**\n * The class name for the Animation element.\n * @type {string}\n */\n className = 'Animation';\n\n /**\n * Getter for the CSS stylesheet.\n * @returns {object} The styles for the Animation element.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observed attributes.\n * @returns {Array} An array containing the name of the observed attribute.\n */\n static get observedAttributes() {\n return ['name'];\n }\n\n /**\n * Method to setup attributes for the Animation element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Method to draw the Animation element.\n * @returns {object} The document fragment containing the drawn element.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let slot = document.createElement('slot');\n\n fragment.appendChild(slot);\n\n this.slotEl = slot;\n\n return fragment;\n }\n\n /**\n * Method to perform actions after the Animation element is drawn.\n * This method destroys any existing animation, fetches a new animations array,\n * selects the appropriate animation, and applies it to the element.\n */\n async afterDraw() {\n this.destroyAnimation();\n\n const element = this.slotEl.assignedElements()[0];\n this.animations = await this.getAnimationsArray();\n const selected = await this.animations.find((k) => k.name === this.name);\n\n this.animation = element?.animate(selected?.keyframes, {\n delay: +this.delay,\n endDelay: +this.endDelay,\n fill: this.fill,\n duration: +this.duration,\n iterationStart: +this.iterationStart,\n iterations: this.iterations,\n direction: this.direction,\n easing: this.easing,\n });\n if (this.animation) this.animation.play();\n }\n\n /**\n * Method to fetch and parse the animations array from a CSS file.\n * @returns {Array} An array of animation definitions parsed from the CSS file.\n */\n async getAnimationsArray() {\n return await fetchAndParseCSS(animations);\n }\n\n /**\n * Method to destroy the current animation.\n */\n destroyAnimation() {\n if (this.animation) {\n this.cancel();\n }\n }\n\n /**\n * Method to play the current animation.\n */\n play() {\n if (this.animation) {\n this.animation.play();\n }\n }\n\n /**\n * Method to cancel the current animation.\n */\n cancel() {\n if (this.animation && typeof this.animation.cancel === 'function') {\n this.animation.cancel();\n } else {\n console.warn('Animation is not initialized or cancel is not available');\n }\n }\n}\n","import Animation from './animation.element.js';\n\nexport default Animation;\n\nAnimation.define('wje-animation', Animation);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
|
package/dist/wje-button.js
CHANGED
|
@@ -125,8 +125,10 @@ class Button extends WJElement {
|
|
|
125
125
|
* @param {boolean} value The value to set
|
|
126
126
|
*/
|
|
127
127
|
set disabled(value) {
|
|
128
|
-
|
|
129
|
-
|
|
128
|
+
this.removeAttribute("disabled");
|
|
129
|
+
if (value) {
|
|
130
|
+
this.setAttribute("disabled", "");
|
|
131
|
+
}
|
|
130
132
|
}
|
|
131
133
|
/**
|
|
132
134
|
* Get disabled state of the Button element.
|
package/dist/wje-button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-button.js","sources":["../packages/utils/utils.js","../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["export const bool = (v) => {\n return v === 'false' || v === 'null' || v === 'NaN' || v === 'undefined' || v === '0' ? false : !!v;\n};\n","import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n */\n\nexport default class Button extends WJElement {\n /**\n * Button constructor method.\n * @class\n */\n constructor() {\n super();\n\n this.internals_ = this.attachInternals();\n }\n\n /**\n * Dependencies of the Button element.\n * @type {object}\n */\n dependencies = {\n 'wje-icon': Icon,\n };\n\n /**\n * Properties of the element Button.\n * @param value\n */\n set color(value) {\n this.setAttribute('color', value || 'default');\n }\n\n /**\n * Get color of the Button element.\n * @returns {string|string}\n */\n get color() {\n return this.getAttribute('color') || 'default';\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set caret(value) {\n this.setAttribute('caret', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {boolean}\n */\n get caret() {\n return this.hasAttribute('caret');\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set tooltip(value) {\n this.setAttribute('tooltip', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {boolean}\n */\n get tooltip() {\n return this.hasAttribute('tooltip');\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set dialog(value) {\n this.setAttribute('dialog', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {string|object}\n */\n get dialog() {\n return this.getAttribute('dialog');\n }\n\n /**\n * Set active state of the Button element.\n * @param {boolean} value The value to set\n */\n set active(value) {\n this.setAttribute('active', '');\n }\n\n /**\n * Get active state of the Button element.\n * @returns {boolean} active - The active state\n */\n get active() {\n return this.hasAttribute('active');\n }\n\n /**\n * Set disabled state of the Button element.\n * @param {boolean} value The value to set\n */\n set disabled(value) {\n if (value) this.setAttribute('disabled', '');\n else this.removeAttribute('disabled');\n }\n\n /**\n * Get disabled state of the Button element.\n * @returns {boolean} disabled - The disabled state\n */\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /**\n * Set fill of the Button element.\n * @param {string} value The value to set\n */\n set fill(value) {\n this.setAttribute('fill', value);\n }\n\n /**\n * Get fill of the Button element.\n * @returns {string} fill - The fill value\n */\n get fill() {\n return this.getAttribute('fill') || 'solid';\n }\n\n /**\n * Set outline state of the Button element.\n * @param {boolean} value The value to set\n */\n set outline(value) {\n this.setAttribute('outline', '');\n }\n\n /**\n * Get outline state of the Button element.\n * @returns {boolean} outline - The outline state\n */\n get outline() {\n return this.hasAttribute('outline');\n }\n\n /**\n * Set stop propagation state of the Button element.\n * @param {boolean} value The value to set\n */\n set stopPropagation(value) {\n this.setAttribute('stop-propagation', bool(value));\n }\n\n /**\n * Get stop propagation state of the Button element.\n * @returns {boolean} stopPropagation - The stop propagation state\n */\n get stopPropagation() {\n return bool(this.getAttribute('stop-propagation'));\n }\n\n /**\n * Class name for the Button element\n * @type {string}\n */\n className = 'Button';\n\n /**\n * Get CSS stylesheet for the Button element.\n * @static\n * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Get observed attributes for the Button element.\n * @static\n * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n */\n static get observedAttributes() {\n return ['disabled'];\n }\n\n /**\n * @summary A static property that indicates whether the custom element is form-associated or not.\n * Form-associated custom elements are elements that can participate in form submission.\n * @type {boolean}\n */\n static formAssociated = true;\n\n /**\n * @summary Callback function that is called when the custom element is associated with a form.\n * This function sets the internal `_form` property to the associated form.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n */\n formAssociatedCallback(form) {\n this._form = form;\n }\n\n /**\n * @summary Callback function that is called when the form-associated state of the custom element changes.\n * This function updates the 'disabled' attribute of the element based on the new state.\n * @param {boolean} disabled The new form-associated state.\n */\n formDisabledCallback(disabled) {\n if (disabled) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /**\n * Setup attributes for the Button element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draw method for the Button element.\n * @returns {object} fragment - The document fragment containing the drawn element.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n if (this.hasAttribute('href')) {\n native.setAttribute('href', this.getAttribute('href'));\n } else {\n if (this.type === 'submit') {\n native.setAttribute('type', 'submit');\n }\n }\n\n native.classList.add('native-button');\n native.setAttribute('part', 'native');\n\n this.classList.remove('wje-button-disabled');\n\n if (this.disabled) native.classList.add('wje-button-disabled');\n\n if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n if (this.outline) native.classList.add('wje-outline');\n\n if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n if (this.size) native.classList.add('wje-button-' + this.size);\n\n if (\n (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) ||\n this.hasAttribute('only-caret')\n ) {\n let i = document.createElement('wje-icon');\n i.style.setProperty('--wje-icon-size', '14px');\n i.setAttribute('slot', 'caret');\n i.setAttribute('name', 'chevron-down');\n i.setAttribute('part', 'caret');\n\n this.appendChild(i);\n }\n\n if (this.active) {\n this.classList.add('wje-active');\n let i = document.createElement('wje-icon');\n i.setAttribute('name', 'check');\n\n this.appendChild(i);\n }\n\n native.classList.add('wje-color-' + this.color, 'wje-color');\n\n let span = document.createElement('span');\n span.setAttribute('part', 'inner');\n span.classList.add('button-inner');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'icon-only');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'start');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'end');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'caret');\n span.appendChild(slot);\n\n this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n if (this.hasToggle) {\n this.slotToggle = document.createElement('slot');\n this.slotToggle.setAttribute('name', 'toggle');\n\n span.appendChild(this.slotToggle);\n }\n\n native.appendChild(span);\n\n if (this.tooltip) {\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', this.getAttribute('tooltip'));\n tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') || 'top');\n tooltip.appendChild(native);\n\n fragment.appendChild(tooltip);\n } else {\n fragment.appendChild(native);\n }\n\n return fragment;\n }\n\n /**\n * After draw method for the Button element.\n */\n afterDraw() {\n if (this.hasAttribute('route')) {\n this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n }\n\n // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n if (this.hasToggle) {\n if (this.toggle === 'off') {\n this.slotToggle.assignedNodes()[1].classList.add('show');\n this.setAttribute('value', 'off');\n } else {\n this.slotToggle.assignedNodes()[0].classList.add('show');\n this.setAttribute('value', 'on');\n }\n }\n\n if (this.hasAttribute('dialog')) {\n event.addListener(this, 'click', null, this.eventDialogOpen);\n } else {\n event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n }\n\n if (this.hasToggle)\n event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n stopPropagation: this.stopPropagation,\n });\n\n if (this.type === 'submit') {\n event.addListener(this, 'click', 'wje-button:submit', () => {\n console.log('submit', this.internals_.form);\n event.dispatchCustomEvent(this.internals_.form, 'submit', {});\n });\n }\n\n if (this.type === 'reset') {\n event.addListener(this, 'click', 'wje-button:reset', () => {\n this.internals_.form.reset();\n });\n }\n }\n\n /**\n * Before disconnect method for the Button element.\n */\n beforeDisconnect() {\n this.removeEventListener('click', this.eventDialogOpen);\n this.unbindRouterLinks?.();\n }\n\n /**\n * Event dialog open method for the Button element.\n * @param {Event} e The event object\n */\n eventDialogOpen = (e) => {\n event.dispatchCustomEvent(this, this.dialog);\n };\n\n /**\n * Toggle states method for the Button element.\n */\n toggleStates = () => {\n const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n\n nodes.forEach((node, index) => {\n if (node.classList.contains('show')) {\n node.classList.remove('show');\n } else {\n node.classList.add('show');\n this.setAttribute('value', index === 0 ? 'on' : 'off');\n }\n });\n };\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-button.js","sources":["../packages/utils/utils.js","../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["export const bool = (v) => {\n return v === 'false' || v === 'null' || v === 'NaN' || v === 'undefined' || v === '0' ? false : !!v;\n};\n","import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n */\n\nexport default class Button extends WJElement {\n /**\n * Button constructor method.\n * @class\n */\n constructor() {\n super();\n\n this.internals_ = this.attachInternals();\n }\n\n /**\n * Dependencies of the Button element.\n * @type {object}\n */\n dependencies = {\n 'wje-icon': Icon,\n };\n\n /**\n * Properties of the element Button.\n * @param value\n */\n set color(value) {\n this.setAttribute('color', value || 'default');\n }\n\n /**\n * Get color of the Button element.\n * @returns {string|string}\n */\n get color() {\n return this.getAttribute('color') || 'default';\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set caret(value) {\n this.setAttribute('caret', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {boolean}\n */\n get caret() {\n return this.hasAttribute('caret');\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set tooltip(value) {\n this.setAttribute('tooltip', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {boolean}\n */\n get tooltip() {\n return this.hasAttribute('tooltip');\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set dialog(value) {\n this.setAttribute('dialog', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {string|object}\n */\n get dialog() {\n return this.getAttribute('dialog');\n }\n\n /**\n * Set active state of the Button element.\n * @param {boolean} value The value to set\n */\n set active(value) {\n this.setAttribute('active', '');\n }\n\n /**\n * Get active state of the Button element.\n * @returns {boolean} active - The active state\n */\n get active() {\n return this.hasAttribute('active');\n }\n\n /**\n * Set disabled state of the Button element.\n * @param {boolean} value The value to set\n */\n set disabled(value) {\n this.removeAttribute('disabled');\n\n if (value) {\n this.setAttribute('disabled', '');\n }\n }\n\n /**\n * Get disabled state of the Button element.\n * @returns {boolean} disabled - The disabled state\n */\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /**\n * Set fill of the Button element.\n * @param {string} value The value to set\n */\n set fill(value) {\n this.setAttribute('fill', value);\n }\n\n /**\n * Get fill of the Button element.\n * @returns {string} fill - The fill value\n */\n get fill() {\n return this.getAttribute('fill') || 'solid';\n }\n\n /**\n * Set outline state of the Button element.\n * @param {boolean} value The value to set\n */\n set outline(value) {\n this.setAttribute('outline', '');\n }\n\n /**\n * Get outline state of the Button element.\n * @returns {boolean} outline - The outline state\n */\n get outline() {\n return this.hasAttribute('outline');\n }\n\n /**\n * Set stop propagation state of the Button element.\n * @param {boolean} value The value to set\n */\n set stopPropagation(value) {\n this.setAttribute('stop-propagation', bool(value));\n }\n\n /**\n * Get stop propagation state of the Button element.\n * @returns {boolean} stopPropagation - The stop propagation state\n */\n get stopPropagation() {\n return bool(this.getAttribute('stop-propagation'));\n }\n\n /**\n * Class name for the Button element\n * @type {string}\n */\n className = 'Button';\n\n /**\n * Get CSS stylesheet for the Button element.\n * @static\n * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Get observed attributes for the Button element.\n * @static\n * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n */\n static get observedAttributes() {\n return ['disabled'];\n }\n\n /**\n * @summary A static property that indicates whether the custom element is form-associated or not.\n * Form-associated custom elements are elements that can participate in form submission.\n * @type {boolean}\n */\n static formAssociated = true;\n\n /**\n * @summary Callback function that is called when the custom element is associated with a form.\n * This function sets the internal `_form` property to the associated form.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n */\n formAssociatedCallback(form) {\n this._form = form;\n }\n\n /**\n * @summary Callback function that is called when the form-associated state of the custom element changes.\n * This function updates the 'disabled' attribute of the element based on the new state.\n * @param {boolean} disabled The new form-associated state.\n */\n formDisabledCallback(disabled) {\n if (disabled) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /**\n * Setup attributes for the Button element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draw method for the Button element.\n * @returns {object} fragment - The document fragment containing the drawn element.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n if (this.hasAttribute('href')) {\n native.setAttribute('href', this.getAttribute('href'));\n } else {\n if (this.type === 'submit') {\n native.setAttribute('type', 'submit');\n }\n }\n\n native.classList.add('native-button');\n native.setAttribute('part', 'native');\n\n this.classList.remove('wje-button-disabled');\n\n if (this.disabled) native.classList.add('wje-button-disabled');\n\n if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n if (this.outline) native.classList.add('wje-outline');\n\n if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n if (this.size) native.classList.add('wje-button-' + this.size);\n\n if (\n (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) ||\n this.hasAttribute('only-caret')\n ) {\n let i = document.createElement('wje-icon');\n i.style.setProperty('--wje-icon-size', '14px');\n i.setAttribute('slot', 'caret');\n i.setAttribute('name', 'chevron-down');\n i.setAttribute('part', 'caret');\n\n this.appendChild(i);\n }\n\n if (this.active) {\n this.classList.add('wje-active');\n let i = document.createElement('wje-icon');\n i.setAttribute('name', 'check');\n\n this.appendChild(i);\n }\n\n native.classList.add('wje-color-' + this.color, 'wje-color');\n\n let span = document.createElement('span');\n span.setAttribute('part', 'inner');\n span.classList.add('button-inner');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'icon-only');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'start');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'end');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'caret');\n span.appendChild(slot);\n\n this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n if (this.hasToggle) {\n this.slotToggle = document.createElement('slot');\n this.slotToggle.setAttribute('name', 'toggle');\n\n span.appendChild(this.slotToggle);\n }\n\n native.appendChild(span);\n\n if (this.tooltip) {\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', this.getAttribute('tooltip'));\n tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') || 'top');\n tooltip.appendChild(native);\n\n fragment.appendChild(tooltip);\n } else {\n fragment.appendChild(native);\n }\n\n return fragment;\n }\n\n /**\n * After draw method for the Button element.\n */\n afterDraw() {\n if (this.hasAttribute('route')) {\n this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n }\n\n // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n if (this.hasToggle) {\n if (this.toggle === 'off') {\n this.slotToggle.assignedNodes()[1].classList.add('show');\n this.setAttribute('value', 'off');\n } else {\n this.slotToggle.assignedNodes()[0].classList.add('show');\n this.setAttribute('value', 'on');\n }\n }\n\n if (this.hasAttribute('dialog')) {\n event.addListener(this, 'click', null, this.eventDialogOpen);\n } else {\n event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n }\n\n if (this.hasToggle)\n event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n stopPropagation: this.stopPropagation,\n });\n\n if (this.type === 'submit') {\n event.addListener(this, 'click', 'wje-button:submit', () => {\n console.log('submit', this.internals_.form);\n event.dispatchCustomEvent(this.internals_.form, 'submit', {});\n });\n }\n\n if (this.type === 'reset') {\n event.addListener(this, 'click', 'wje-button:reset', () => {\n this.internals_.form.reset();\n });\n }\n }\n\n /**\n * Before disconnect method for the Button element.\n */\n beforeDisconnect() {\n this.removeEventListener('click', this.eventDialogOpen);\n this.unbindRouterLinks?.();\n }\n\n /**\n * Event dialog open method for the Button element.\n * @param {Event} e The event object\n */\n eventDialogOpen = (e) => {\n event.dispatchCustomEvent(this, this.dialog);\n };\n\n /**\n * Toggle states method for the Button element.\n */\n toggleStates = () => {\n const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n\n nodes.forEach((node, index) => {\n if (node.classList.contains('show')) {\n node.classList.remove('show');\n } else {\n node.classList.add('show');\n this.setAttribute('value', index === 0 ? 'on' : 'off');\n }\n });\n };\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}
|
package/dist/wje-checkbox.js
CHANGED
|
@@ -419,7 +419,7 @@ class Checkbox extends WJElement {
|
|
|
419
419
|
return styles;
|
|
420
420
|
}
|
|
421
421
|
static get observedAttributes() {
|
|
422
|
-
return ["checked", "disabled", "value"];
|
|
422
|
+
return ["checked", "disabled", "value", "indeterminate"];
|
|
423
423
|
}
|
|
424
424
|
/**
|
|
425
425
|
* Sets up the attributes for the checkbox.
|
package/dist/wje-checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-checkbox.js","sources":["../packages/wje-checkbox/checkbox.element.js","../packages/wje-checkbox/checkbox.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-checkbox:change\".\n * It is triggered when the input event is fired, which happens when the state of the checkbox changes.\n * The event is dispatched on the current instance of the Checkbox class.\n * @documentation https://elements.webjet.sk/components/checkbox\n * @status stable\n * @augments WJElement\n * @slot - The checkbox main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-checkbox-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-checkbox-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-checkbox-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-checkbox-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-checkbox-margin-inline=0] - Margin inline of the component;\n * //@fires wje-checkbox:change - Dispatched when the checkbox state changes;\n */\nexport default class Checkbox extends WJElement {\n /**\n * Checkbox constructor method.\n */\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n /**\n * Setter for the value attribute.\n * @param {string} value The value to set.\n */\n set value(value) {\n this.internals.setFormValue(value);\n\n if (this.input) this.input.value = value;\n }\n\n /**\n * Getter for the value attribute.\n * @returns {string} The value of the attribute.\n */\n get value() {\n return this.input?.value || '';\n }\n\n /**\n * Getter for the customErrorDisplay attribute.\n * @returns {boolean} Whether the attribute is present.\n */\n get customErrorDisplay() {\n return this.hasAttribute('custom-error-display');\n }\n\n /**\n * Getter for the validateOnChange attribute.\n * @returns {boolean} Whether the attribute is present.\n */\n get validateOnChange() {\n return this.hasAttribute('validate-on-change');\n }\n\n /**\n * Setter for the invalid attribute.\n * @param {boolean} isInvalid Whether the input is invalid.\n */\n set invalid(isInvalid) {\n if (isInvalid) this.setAttribute('invalid', '');\n else this.removeAttribute('invalid');\n }\n\n /**\n * Getter for the invalid attribute.\n * @returns {boolean} Whether the attribute is present.\n */\n get invalid() {\n return this.hasAttribute('invalid');\n }\n\n /**\n * Getter for the form attribute.\n * @returns {HTMLFormElement} The form the input is associated with.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string} The name of the input.\n */\n get name() {\n return this.getAttribute('name');\n }\n\n /**\n * Getter for the type attribute.\n * @returns {string} The type of the input.\n */\n get type() {\n return this.localName;\n }\n\n /**\n * Getter for the validity attribute.\n * @returns {ValidityState} The validity state of the input.\n */\n get validity() {\n return this.internals.validity;\n }\n\n /**\n * Getter for the validationMessage attribute.\n * @returns {string} The validation message of the input.\n */\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /**\n * Getter for the willValidate attribute.\n * @returns {boolean} Whether the input will be validated.\n */\n get willValidate() {\n return this.internals.willValidate;\n }\n\n /**\n * Getter for the defaultValue attribute.\n * This method retrieves the 'value' attribute of the custom input element.\n * The 'value' attribute represents the default value of the input element.\n * If the 'value' attribute is not set, it returns an empty string.\n * @returns {string} The default value of the input element.\n */\n get defaultValue() {\n return this.getAttribute('value') ?? '';\n }\n\n /**\n * Setter for the defaultValue attribute.\n * This method sets the 'value' attribute of the custom input element to the provided value.\n * The 'value' attribute represents the default value of the input element.\n * @param {string} value The value to set as the default value.\n */\n set defaultValue(value) {\n this.setAttribute('value', value);\n }\n\n /**\n * Set checked attribute.\n * @param {boolean} value true if the toggle is checked, false otherwise\n */\n set disabled(value) {\n if (value) this.setAttribute('disabled', '');\n else this.removeAttribute('disabled');\n }\n\n /**\n * Get disabled attribute value.\n * @returns {boolean} true if the toggle is disabled, false otherwise\n */\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /**\n * Set checked attribute.\n * @param {boolean} value true if the toggle is checked, false otherwise\n */\n set checked(value) {\n if (value) this.setAttribute('checked', '');\n else this.removeAttribute('checked');\n }\n\n /**\n * Get checked attribute.\n * @returns {boolean} true if the toggle is checked, false otherwise\n */\n get checked() {\n return this.hasAttribute('checked');\n }\n\n /**\n * The class name for the Checkbox.\n */\n className = 'Checkbox';\n\n /**\n * Getter for the CSS stylesheet.\n * @returns {string} The CSS stylesheet.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n static get observedAttributes() {\n return ['checked', 'disabled', 'value'];\n }\n\n /**\n * Whether the input is associated with a form.\n * @type {boolean}\n */\n static formAssociated = true;\n\n /**\n * Sets up the attributes for the checkbox.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draws the checkbox element.\n * @returns {DocumentFragment} The created fragment.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-checkbox');\n\n let input = document.createElement('input');\n input.type = 'checkbox';\n input.id = 'checkbox';\n input.name = this.name || 'checkbox';\n input.checked = this.hasAttribute('checked');\n input.disabled = this.hasAttribute('disabled');\n input.indeterminate = this.hasAttribute('indeterminate');\n\n let label = document.createElement('label');\n label.htmlFor = 'checkbox';\n label.innerHTML = '<slot></slot>';\n\n native.appendChild(input);\n native.appendChild(label);\n\n this.input = input;\n\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /**\n * Adds an event listener after drawing the checkbox.\n */\n afterDraw() {\n if (!this.disabled) {\n this.input.addEventListener('input', (e) => {\n this.value = e.target.checked;\n this.checked = e.target.checked;\n event.dispatchCustomEvent(this, 'wje-toggle:input');\n });\n\n this.input.addEventListener('change', (e) => {\n this.value = e.target.checked;\n this.checked = e.target.checked;\n event.dispatchCustomEvent(this, 'wje-toggle:change');\n });\n }\n }\n\n /**\n * Removes the event listener when the checkbox is disconnected.\n */\n beforeDisconnect() {\n event.removeElement(this.input);\n }\n\n /**\n * @summary Callback function that is called when the custom element is associated with a form.\n * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n */\n formAssociatedCallback(form) {\n form?.addEventListener('submit', () => {\n // this.validateInput();\n // this.propagateValidation();\n });\n }\n\n /**\n * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n * This method is responsible for resetting the value of the custom input element to its default value.\n * It also resets the form value and validity state in the form internals.\n * @function\n */\n formResetCallback() {\n // Set the value of the custom input element to its default value\n this.value = this.defaultValue;\n // Reset the form value in the form internals to the default value\n this.internals.setFormValue(this.defaultValue);\n // Reset the validity state in the form internals\n this.internals.setValidity({});\n }\n\n /**\n * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n * This method is responsible for restoring the value of the custom input element to its saved state.\n * It also restores the form value and validity state in the form internals to their saved states.\n * @param {object} state The saved state of the custom input element.\n * @function\n */\n formStateRestoreCallback(state) {\n // Set the value of the custom input element to its saved value\n this.value = state.value;\n // Restore the form value in the form internals to the saved value\n this.internals.setFormValue(state.value);\n // Restore the validity state in the form internals to the saved state\n this.internals.setValidity({});\n }\n\n /**\n * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n * This method is responsible for saving the value of the custom input element.\n * @returns {object} The saved state of the custom input element.\n * @function\n */\n formStateSaveCallback() {\n return {\n value: this.value,\n };\n }\n\n /**\n * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n * This method is not implemented yet.\n * @param {boolean} disabled The new disabled state of the custom input element.\n * @function\n */\n formDisabledCallback(disabled) {\n console.warn('formDisabledCallback not implemented yet');\n }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Checkbox from './checkbox.element.js';\n\n// export * from \"./checkbox.element.js\";\nexport default Checkbox;\n\nWJElement.define('wje-checkbox', Checkbox);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-checkbox.js","sources":["../packages/wje-checkbox/checkbox.element.js","../packages/wje-checkbox/checkbox.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-checkbox:change\".\n * It is triggered when the input event is fired, which happens when the state of the checkbox changes.\n * The event is dispatched on the current instance of the Checkbox class.\n * @documentation https://elements.webjet.sk/components/checkbox\n * @status stable\n * @augments WJElement\n * @slot - The checkbox main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-checkbox-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-checkbox-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-checkbox-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-checkbox-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-checkbox-margin-inline=0] - Margin inline of the component;\n * //@fires wje-checkbox:change - Dispatched when the checkbox state changes;\n */\nexport default class Checkbox extends WJElement {\n /**\n * Checkbox constructor method.\n */\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n /**\n * Setter for the value attribute.\n * @param {string} value The value to set.\n */\n set value(value) {\n this.internals.setFormValue(value);\n\n if (this.input) this.input.value = value;\n }\n\n /**\n * Getter for the value attribute.\n * @returns {string} The value of the attribute.\n */\n get value() {\n return this.input?.value || '';\n }\n\n /**\n * Getter for the customErrorDisplay attribute.\n * @returns {boolean} Whether the attribute is present.\n */\n get customErrorDisplay() {\n return this.hasAttribute('custom-error-display');\n }\n\n /**\n * Getter for the validateOnChange attribute.\n * @returns {boolean} Whether the attribute is present.\n */\n get validateOnChange() {\n return this.hasAttribute('validate-on-change');\n }\n\n /**\n * Setter for the invalid attribute.\n * @param {boolean} isInvalid Whether the input is invalid.\n */\n set invalid(isInvalid) {\n if (isInvalid) this.setAttribute('invalid', '');\n else this.removeAttribute('invalid');\n }\n\n /**\n * Getter for the invalid attribute.\n * @returns {boolean} Whether the attribute is present.\n */\n get invalid() {\n return this.hasAttribute('invalid');\n }\n\n /**\n * Getter for the form attribute.\n * @returns {HTMLFormElement} The form the input is associated with.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string} The name of the input.\n */\n get name() {\n return this.getAttribute('name');\n }\n\n /**\n * Getter for the type attribute.\n * @returns {string} The type of the input.\n */\n get type() {\n return this.localName;\n }\n\n /**\n * Getter for the validity attribute.\n * @returns {ValidityState} The validity state of the input.\n */\n get validity() {\n return this.internals.validity;\n }\n\n /**\n * Getter for the validationMessage attribute.\n * @returns {string} The validation message of the input.\n */\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /**\n * Getter for the willValidate attribute.\n * @returns {boolean} Whether the input will be validated.\n */\n get willValidate() {\n return this.internals.willValidate;\n }\n\n /**\n * Getter for the defaultValue attribute.\n * This method retrieves the 'value' attribute of the custom input element.\n * The 'value' attribute represents the default value of the input element.\n * If the 'value' attribute is not set, it returns an empty string.\n * @returns {string} The default value of the input element.\n */\n get defaultValue() {\n return this.getAttribute('value') ?? '';\n }\n\n /**\n * Setter for the defaultValue attribute.\n * This method sets the 'value' attribute of the custom input element to the provided value.\n * The 'value' attribute represents the default value of the input element.\n * @param {string} value The value to set as the default value.\n */\n set defaultValue(value) {\n this.setAttribute('value', value);\n }\n\n /**\n * Set checked attribute.\n * @param {boolean} value true if the toggle is checked, false otherwise\n */\n set disabled(value) {\n if (value) this.setAttribute('disabled', '');\n else this.removeAttribute('disabled');\n }\n\n /**\n * Get disabled attribute value.\n * @returns {boolean} true if the toggle is disabled, false otherwise\n */\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /**\n * Set checked attribute.\n * @param {boolean} value true if the toggle is checked, false otherwise\n */\n set checked(value) {\n if (value) this.setAttribute('checked', '');\n else this.removeAttribute('checked');\n }\n\n /**\n * Get checked attribute.\n * @returns {boolean} true if the toggle is checked, false otherwise\n */\n get checked() {\n return this.hasAttribute('checked');\n }\n\n /**\n * The class name for the Checkbox.\n */\n className = 'Checkbox';\n\n /**\n * Getter for the CSS stylesheet.\n * @returns {string} The CSS stylesheet.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n static get observedAttributes() {\n return ['checked', 'disabled', 'value', 'indeterminate'];\n }\n\n /**\n * Whether the input is associated with a form.\n * @type {boolean}\n */\n static formAssociated = true;\n\n /**\n * Sets up the attributes for the checkbox.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draws the checkbox element.\n * @returns {DocumentFragment} The created fragment.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-checkbox');\n\n let input = document.createElement('input');\n input.type = 'checkbox';\n input.id = 'checkbox';\n input.name = this.name || 'checkbox';\n input.checked = this.hasAttribute('checked');\n input.disabled = this.hasAttribute('disabled');\n input.indeterminate = this.hasAttribute('indeterminate');\n\n let label = document.createElement('label');\n label.htmlFor = 'checkbox';\n label.innerHTML = '<slot></slot>';\n\n native.appendChild(input);\n native.appendChild(label);\n\n this.input = input;\n\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /**\n * Adds an event listener after drawing the checkbox.\n */\n afterDraw() {\n if (!this.disabled) {\n this.input.addEventListener('input', (e) => {\n this.value = e.target.checked;\n this.checked = e.target.checked;\n event.dispatchCustomEvent(this, 'wje-toggle:input');\n });\n\n this.input.addEventListener('change', (e) => {\n this.value = e.target.checked;\n this.checked = e.target.checked;\n event.dispatchCustomEvent(this, 'wje-toggle:change');\n });\n }\n }\n\n /**\n * Removes the event listener when the checkbox is disconnected.\n */\n beforeDisconnect() {\n event.removeElement(this.input);\n }\n\n /**\n * @summary Callback function that is called when the custom element is associated with a form.\n * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n */\n formAssociatedCallback(form) {\n form?.addEventListener('submit', () => {\n // this.validateInput();\n // this.propagateValidation();\n });\n }\n\n /**\n * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n * This method is responsible for resetting the value of the custom input element to its default value.\n * It also resets the form value and validity state in the form internals.\n * @function\n */\n formResetCallback() {\n // Set the value of the custom input element to its default value\n this.value = this.defaultValue;\n // Reset the form value in the form internals to the default value\n this.internals.setFormValue(this.defaultValue);\n // Reset the validity state in the form internals\n this.internals.setValidity({});\n }\n\n /**\n * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n * This method is responsible for restoring the value of the custom input element to its saved state.\n * It also restores the form value and validity state in the form internals to their saved states.\n * @param {object} state The saved state of the custom input element.\n * @function\n */\n formStateRestoreCallback(state) {\n // Set the value of the custom input element to its saved value\n this.value = state.value;\n // Restore the form value in the form internals to the saved value\n this.internals.setFormValue(state.value);\n // Restore the validity state in the form internals to the saved state\n this.internals.setValidity({});\n }\n\n /**\n * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n * This method is responsible for saving the value of the custom input element.\n * @returns {object} The saved state of the custom input element.\n * @function\n */\n formStateSaveCallback() {\n return {\n value: this.value,\n };\n }\n\n /**\n * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n * This method is not implemented yet.\n * @param {boolean} disabled The new disabled state of the custom input element.\n * @function\n */\n formDisabledCallback(disabled) {\n console.warn('formDisabledCallback not implemented yet');\n }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Checkbox from './checkbox.element.js';\n\n// export * from \"./checkbox.element.js\";\nexport default Checkbox;\n\nWJElement.define('wje-checkbox', Checkbox);\n"],"names":[],"mappings":"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"}
|
package/dist/wje-chip.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
-
import WJElement, { event } from "./wje-element.js";
|
|
5
|
-
const styles = "/*\n[ WJ Chip ]\n*/\n\n.native-chip {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n font-size: 14px;\n letter-spacing: -0.006em;\n margin: 0;\n padding: 0.5rem 0.75rem;\n text-align: center;\n cursor: pointer;\n white-space: nowrap;\n text-shadow: none;\n box-shadow: none;\n border: 0 none;\n line-height: 14px;\n min-height: 28px;\n height: 28px;\n width: 100%;\n max-width: fit-content;\n min-width: 28px;\n position: relative;\n transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n border-radius: var(--wje-border-radius-pill);\n overflow: hidden;\n vertical-align: middle;\n box-sizing: border-box;\n}\n\n:host(.focus) {\n box-shadow: none;\n}\n\n:host(.wje-active) .native-chip {\n border: 1px solid var(--wje-color-primary-11);\n background-color: var(--wje-color-contrast-3);\n color: var(--wje-color);\n}\n\n:host(:focus, :active:focus, .wje-active:focus) {\n outline: none !important;\n}\n\n.check {\n display: none;\n}\n\n:host([active]) {\n .check {\n display: block;\n margin-inline: 4px 0;\n }\n}\n\n:host([disabled]) {\n opacity: 0.5;\n border: 0;\n pointer-events: none;\n cursor: not-allowed;\n}\n\n::slotted(wje-avatar) {\n width: 22px;\n height: 22px;\n}\n\n::slotted(wje-avatar:first-child) {\n margin-inline: -8px 8px;\n margin-top: -4px;\n margin-bottom: -4px;\n}\n\n::slotted(wje-icon:first-child) {\n margin: -4px 8px -4px -4px;\n}\n\n::slotted(wje-icon:last-child) {\n margin: -4px -4px -4px 8px;\n}\n\nwje-button {\n --wje-button-border-radius: 50%;\n --wje-button-margin-inline: 0.25rem -0.5rem;\n --wje-padding-top: 0.15rem;\n --wje-padding-start: 0.15rem;\n --wje-padding-end: 0.15rem;\n --wje-padding-bottom: 0.15rem;\n}\n\n/*BG - TEXT*/\n.native-chip.wje-color-primary {\n background-color: var(--wje-color-primary-1);\n color: var(--wje-color-primary-9);\n}\n\n.native-chip.wje-color-complete {\n background-color: var(--wje-color-complete-1);\n color: var(--wje-color-complete-9);\n}\n\n.native-chip.wje-color-success {\n background-color: var(--wje-color-success-1);\n color: var(--wje-color-success-9);\n}\n\n.native-chip.wje-color-warning {\n background-color: var(--wje-color-warning-2);\n color: var(--wje-color-warning-11);\n}\n\n.native-chip.wje-color-danger {\n background-color: var(--wje-color-danger-1);\n color: var(--wje-color-danger-9);\n}\n\n.native-chip.wje-color-info {\n background-color: var(--wje-color-info-1);\n color: var(--wje-color-info-9);\n}\n\n.native-chip.wje-color-default {\n background-color: var(--wje-color-contrast-3);\n color: var(--wje-color-contrast-11);\n}\n\n/*HOVER*/\n@media (any-hover: hover) {\n .native-chip.wje-color-primary:hover {\n background-color: var(--wje-color-primary-4);\n color: var(--wje-color-primary-10);\n }\n\n .native-chip.wje-color-complete:hover {\n background-color: var(--wje-color-complete-4);\n color: var(--wje-color-complete-10);\n }\n\n .native-chip.wje-color-success:hover {\n background-color: var(--wje-color-success-4);\n color: var(--wje-color-success-10);\n }\n\n .native-chip.wje-color-warning:hover {\n background-color: var(--wje-color-warning-4);\n color: var(--wje-color-warning-11);\n }\n\n .native-chip.wje-color-danger:hover {\n background-color: var(--wje-color-danger-4);\n color: var(--wje-color-danger-10);\n }\n\n .native-chip.wje-color-info:hover {\n background-color: var(--wje-color-info-4);\n color: var(--wje-color-info-10);\n }\n\n .native-chip.wje-color-default:hover {\n background-color: var(--wje-color-contrast-4);\n color: var(--wje-color-contrast-11);\n }\n}\n";
|
|
4
|
+
import WJElement, { WjElementUtils, event } from "./wje-element.js";
|
|
5
|
+
const styles = "/*\n[ WJ Chip ]\n*/\n\n.native-chip {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n font-size: 14px;\n letter-spacing: -0.006em;\n margin: 0;\n padding: 0.5rem 0.75rem;\n text-align: center;\n cursor: pointer;\n white-space: nowrap;\n text-shadow: none;\n box-shadow: none;\n border: 0 none;\n line-height: 14px;\n min-height: 28px;\n height: 28px;\n width: 100%;\n max-width: fit-content;\n min-width: 28px;\n position: relative;\n transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n border-radius: var(--wje-border-radius-pill);\n overflow: hidden;\n vertical-align: middle;\n box-sizing: border-box;\n}\n\n:host(.focus) {\n box-shadow: none;\n}\n\n:host(.wje-active) .native-chip {\n border: 1px solid var(--wje-color-primary-11);\n background-color: var(--wje-color-contrast-3);\n color: var(--wje-color);\n}\n\n:host(:focus, :active:focus, .wje-active:focus) {\n outline: none !important;\n}\n\n.check {\n display: none;\n}\n\n:host([active]) {\n .check {\n display: block;\n margin-inline: 4px 0;\n }\n}\n\n:host([disabled]) {\n opacity: 0.5;\n border: 0;\n pointer-events: none;\n cursor: not-allowed;\n}\n\n::slotted(wje-avatar) {\n width: 22px;\n height: 22px;\n}\n\n::slotted(wje-avatar:first-child) {\n margin-inline: -8px 8px;\n margin-top: -4px;\n margin-bottom: -4px;\n}\n\n::slotted(wje-icon:first-child) {\n margin: -4px 8px -4px -4px;\n}\n\n::slotted(wje-icon:last-child) {\n margin: -4px -4px -4px 8px;\n}\n\nslot[name='end'].has-content {\n display: block;\n margin-inline-start: 8px;\n}\n\nwje-button {\n --wje-button-border-radius: 50%;\n --wje-button-margin-inline: 0.25rem -0.5rem;\n --wje-padding-top: 0.15rem;\n --wje-padding-start: 0.15rem;\n --wje-padding-end: 0.15rem;\n --wje-padding-bottom: 0.15rem;\n}\n\n/*BG - TEXT*/\n.native-chip.wje-color-primary {\n background-color: var(--wje-color-primary-1);\n color: var(--wje-color-primary-9);\n}\n\n.native-chip.wje-color-complete {\n background-color: var(--wje-color-complete-1);\n color: var(--wje-color-complete-9);\n}\n\n.native-chip.wje-color-success {\n background-color: var(--wje-color-success-1);\n color: var(--wje-color-success-9);\n}\n\n.native-chip.wje-color-warning {\n background-color: var(--wje-color-warning-2);\n color: var(--wje-color-warning-11);\n}\n\n.native-chip.wje-color-danger {\n background-color: var(--wje-color-danger-1);\n color: var(--wje-color-danger-9);\n}\n\n.native-chip.wje-color-info {\n background-color: var(--wje-color-info-1);\n color: var(--wje-color-info-9);\n}\n\n.native-chip.wje-color-default {\n background-color: var(--wje-color-contrast-3);\n color: var(--wje-color-contrast-11);\n}\n\n/*HOVER*/\n@media (any-hover: hover) {\n .native-chip.wje-color-primary:hover {\n background-color: var(--wje-color-primary-4);\n color: var(--wje-color-primary-10);\n }\n\n .native-chip.wje-color-complete:hover {\n background-color: var(--wje-color-complete-4);\n color: var(--wje-color-complete-10);\n }\n\n .native-chip.wje-color-success:hover {\n background-color: var(--wje-color-success-4);\n color: var(--wje-color-success-10);\n }\n\n .native-chip.wje-color-warning:hover {\n background-color: var(--wje-color-warning-4);\n color: var(--wje-color-warning-11);\n }\n\n .native-chip.wje-color-danger:hover {\n background-color: var(--wje-color-danger-4);\n color: var(--wje-color-danger-10);\n }\n\n .native-chip.wje-color-info:hover {\n background-color: var(--wje-color-info-4);\n color: var(--wje-color-info-10);\n }\n\n .native-chip.wje-color-default:hover {\n background-color: var(--wje-color-contrast-4);\n color: var(--wje-color-contrast-11);\n }\n}\n";
|
|
6
6
|
class Chip extends WJElement {
|
|
7
7
|
/**
|
|
8
8
|
* Chip constructor method.
|
|
@@ -37,6 +37,8 @@ class Chip extends WJElement {
|
|
|
37
37
|
let native = document.createElement("div");
|
|
38
38
|
native.classList.add("native-chip");
|
|
39
39
|
let slot = document.createElement("slot");
|
|
40
|
+
let slotEnd = document.createElement("slot");
|
|
41
|
+
slotEnd.setAttribute("name", "end");
|
|
40
42
|
let remove = document.createElement("wje-button");
|
|
41
43
|
remove.setAttribute("part", "remove");
|
|
42
44
|
remove.setAttribute("fill", "link");
|
|
@@ -50,16 +52,19 @@ class Chip extends WJElement {
|
|
|
50
52
|
if (this.disabled) this.classList.add("wje-disabled");
|
|
51
53
|
if (this.outline) this.classList.add("wje-outline");
|
|
52
54
|
native.appendChild(slot);
|
|
55
|
+
native.appendChild(slotEnd);
|
|
53
56
|
native.appendChild(active);
|
|
54
57
|
if (this.hasAttribute("removable")) native.appendChild(remove);
|
|
55
58
|
fragment.appendChild(native);
|
|
56
59
|
this.removeElement = remove;
|
|
60
|
+
this.slotEnd = slotEnd;
|
|
57
61
|
return fragment;
|
|
58
62
|
}
|
|
59
63
|
/**
|
|
60
64
|
* Getter for the observed attributes.
|
|
61
65
|
*/
|
|
62
66
|
afterDraw() {
|
|
67
|
+
if (WjElementUtils.hasSlotContent(this.context, "end")) this.slotEnd.classList.add("has-content");
|
|
63
68
|
event.addListener(this.removeElement, "click", "wje:chip-remove", null, { stopPropagation: true });
|
|
64
69
|
}
|
|
65
70
|
/**
|
package/dist/wje-chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-chip.js","sources":["../packages/wje-chip/chip.element.js","../packages/wje-chip/chip.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-chip:remove\".\n * It is triggered when the remove button is clicked, which happens when the chip is removed.\n * The event is dispatched on the current instance of the Chip class.\n * @documentation https://elements.webjet.sk/components/chip\n * @status stable\n * @augments WJElement\n * @slot - The chip main content.\n * @csspart native - The component's native wrapper.\n * //@fires wje-chip:remove - Dispatched when the chip is removed;\n */\nexport default class Chip extends WJElement {\n /**\n * Chip constructor method.\n */\n constructor() {\n super();\n }\n\n /**\n * Class name for the Chip element.\n * @type {string}\n */\n className = 'Chip';\n\n /**\n * Getter for the CSS stylesheet.\n * @returns {*}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observed attributes.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draws the Chip element.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-chip');\n\n let slot = document.createElement('slot');\n\n let remove = document.createElement('wje-button');\n remove.setAttribute('part', 'remove');\n remove.setAttribute('fill', 'link');\n remove.setAttribute('color', this.color || 'default');\n remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n\n let active = document.createElement('wje-icon');\n active.setAttribute('name', 'check');\n active.classList.add('check');\n\n // Add color\n if (this.hasAttribute('color')) native.classList.add('wje-color-' + this.color, 'wje-color');\n else native.classList.add('wje-color-default', 'wje-color');\n\n if (this.disabled) this.classList.add('wje-disabled');\n\n if (this.outline) this.classList.add('wje-outline');\n\n native.appendChild(slot);\n native.appendChild(active);\n\n if (this.hasAttribute('removable')) native.appendChild(remove);\n\n fragment.appendChild(native);\n\n this.removeElement = remove;\n return fragment;\n }\n\n /**\n * Getter for the observed attributes.\n */\n afterDraw() {\n event.addListener(this.removeElement, 'click', 'wje:chip-remove', null, { stopPropagation: true });\n }\n\n /**\n * Before disconnect event for the Chip element.\n */\n beforeDisconnect() {\n event.removeListener(this.removeElement, 'click', 'wje:chip-remove');\n }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Chip from './chip.element.js';\n\n// export * from \"./chip.element.js\";\nexport default Chip;\n\nWJElement.define('wje-chip', Chip);\n"],"names":[],"mappings":";;;;;AAce,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,aAAa;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,SAAS,SAAS,cAAc,YAAY;AAChD,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,QAAQ,MAAM;AAClC,WAAO,aAAa,SAAS,KAAK,SAAS,SAAS;AACpD,WAAO,YAAY;AAEnB,QAAI,SAAS,SAAS,cAAc,UAAU;AAC9C,WAAO,aAAa,QAAQ,OAAO;AACnC,WAAO,UAAU,IAAI,OAAO;AAG5B,QAAI,KAAK,aAAa,OAAO,EAAG,QAAO,UAAU,IAAI,eAAe,KAAK,OAAO,WAAW;AAAA,QACtF,QAAO,UAAU,IAAI,qBAAqB,WAAW;AAE1D,QAAI,KAAK,SAAU,MAAK,UAAU,IAAI,cAAc;AAEpD,QAAI,KAAK,QAAS,MAAK,UAAU,IAAI,aAAa;AAElD,WAAO,YAAY,IAAI;AACvB,WAAO,YAAY,MAAM;AAEzB,QAAI,KAAK,aAAa,WAAW,EAAG,QAAO,YAAY,MAAM;AAE7D,aAAS,YAAY,MAAM;AAE3B,SAAK,gBAAgB;AACrB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,UAAM,YAAY,KAAK,eAAe,SAAS,mBAAmB,MAAM,EAAE,iBAAiB,MAAM;AAAA,EACzG;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;AACf,UAAM,eAAe,KAAK,eAAe,SAAS,iBAAiB;AAAA,EAC3E;AACA;
|
|
1
|
+
{"version":3,"file":"wje-chip.js","sources":["../packages/wje-chip/chip.element.js","../packages/wje-chip/chip.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-chip:remove\".\n * It is triggered when the remove button is clicked, which happens when the chip is removed.\n * The event is dispatched on the current instance of the Chip class.\n * @documentation https://elements.webjet.sk/components/chip\n * @status stable\n * @augments WJElement\n * @slot - The chip main content.\n * @csspart native - The component's native wrapper.\n * //@fires wje-chip:remove - Dispatched when the chip is removed;\n */\nexport default class Chip extends WJElement {\n /**\n * Chip constructor method.\n */\n constructor() {\n super();\n }\n\n /**\n * Class name for the Chip element.\n * @type {string}\n */\n className = 'Chip';\n\n /**\n * Getter for the CSS stylesheet.\n * @returns {*}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observed attributes.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draws the Chip element.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-chip');\n\n let slot = document.createElement('slot');\n\n let slotEnd = document.createElement('slot');\n slotEnd.setAttribute('name', 'end');\n\n let remove = document.createElement('wje-button');\n remove.setAttribute('part', 'remove');\n remove.setAttribute('fill', 'link');\n remove.setAttribute('color', this.color || 'default');\n remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n\n let active = document.createElement('wje-icon');\n active.setAttribute('name', 'check');\n active.classList.add('check');\n\n // Add color\n if (this.hasAttribute('color')) native.classList.add('wje-color-' + this.color, 'wje-color');\n else native.classList.add('wje-color-default', 'wje-color');\n\n if (this.disabled) this.classList.add('wje-disabled');\n\n if (this.outline) this.classList.add('wje-outline');\n\n native.appendChild(slot);\n native.appendChild(slotEnd);\n native.appendChild(active);\n\n if (this.hasAttribute('removable')) native.appendChild(remove);\n\n fragment.appendChild(native);\n\n this.removeElement = remove;\n this.slotEnd = slotEnd;\n\n return fragment;\n }\n\n /**\n * Getter for the observed attributes.\n */\n afterDraw() {\n if (WjElementUtils.hasSlotContent(this.context, 'end')) this.slotEnd.classList.add('has-content');\n\n event.addListener(this.removeElement, 'click', 'wje:chip-remove', null, { stopPropagation: true });\n }\n\n /**\n * Before disconnect event for the Chip element.\n */\n beforeDisconnect() {\n event.removeListener(this.removeElement, 'click', 'wje:chip-remove');\n }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Chip from './chip.element.js';\n\n// export * from \"./chip.element.js\";\nexport default Chip;\n\nWJElement.define('wje-chip', Chip);\n"],"names":[],"mappings":";;;;;AAce,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,aAAa;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,YAAQ,aAAa,QAAQ,KAAK;AAElC,QAAI,SAAS,SAAS,cAAc,YAAY;AAChD,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,QAAQ,MAAM;AAClC,WAAO,aAAa,SAAS,KAAK,SAAS,SAAS;AACpD,WAAO,YAAY;AAEnB,QAAI,SAAS,SAAS,cAAc,UAAU;AAC9C,WAAO,aAAa,QAAQ,OAAO;AACnC,WAAO,UAAU,IAAI,OAAO;AAG5B,QAAI,KAAK,aAAa,OAAO,EAAG,QAAO,UAAU,IAAI,eAAe,KAAK,OAAO,WAAW;AAAA,QACtF,QAAO,UAAU,IAAI,qBAAqB,WAAW;AAE1D,QAAI,KAAK,SAAU,MAAK,UAAU,IAAI,cAAc;AAEpD,QAAI,KAAK,QAAS,MAAK,UAAU,IAAI,aAAa;AAElD,WAAO,YAAY,IAAI;AACvB,WAAO,YAAY,OAAO;AAC1B,WAAO,YAAY,MAAM;AAEzB,QAAI,KAAK,aAAa,WAAW,EAAG,QAAO,YAAY,MAAM;AAE7D,aAAS,YAAY,MAAM;AAE3B,SAAK,gBAAgB;AACrB,SAAK,UAAU;AAEf,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,eAAe,eAAe,KAAK,SAAS,KAAK,EAAG,MAAK,QAAQ,UAAU,IAAI,aAAa;AAEhG,UAAM,YAAY,KAAK,eAAe,SAAS,mBAAmB,MAAM,EAAE,iBAAiB,MAAM;AAAA,EACzG;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;AACf,UAAM,eAAe,KAAK,eAAe,SAAS,iBAAiB;AAAA,EAC3E;AACA;ACnGA,UAAU,OAAO,YAAY,IAAI;"}
|