wj-elements 0.1.84 → 0.1.85

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.
Files changed (4) hide show
  1. package/dist/wje-option.js +1 -1
  2. package/dist/wje-select.js +3 -2
  3. package/dist/wje-toast.js +43 -75
  4. package/package.json +1 -1
package/dist/wje-option.js CHANGED
@@ -102,7 +102,7 @@ class Option extends WJElement {
102
102
  * Adds event listeners after the component is drawn.
103
103
  */
104
104
  afterDraw() {
105
- event.addListener(this, "click", "wje:option-change");
105
+ event.addListener(this, "click", "wje-option:change");
106
106
  }
107
107
  }
108
108
  Option.define("wje-option", Option);
package/dist/wje-select.js CHANGED
@@ -14,7 +14,7 @@ import Input from "./wje-input.js";
14
14
  import Option from "./wje-option.js";
15
15
  import Options from "./wje-options.js";
16
16
  import { P as Popup } from "./popup.element-DvPGL_NN.js";
17
- const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n --wje-select-border-width: 1px;\n --wje-select-border-style: solid;\n --wje-select-border-color: var(--wje-border-color);\n\n --wje-select-options-border-width: 1px;\n --wje-select-options-border-style: var(--wje-border-style);\n --wje-select-options-border-color: var(--wje-border-color);\n\n --wje-select-background: var(--wje-background);\n --wje-select-line-height: 20px;\n --wje-select-color: var(--wje-color);\n --wje-select-border-radius: var(--wje-border-radius-medium);\n\n width: 100%;\n display: block;\n [slot=arrow] {\n transform: rotate(0deg);\n transition: all .2s ease-in;\n }\n}\n\n.native-select {\n &.default{\n .wrapper {\n display: block;\n border-width: var(--wje-select-border-width);\n border-style: var(--wje-select-border-style);\n border-color: var(--wje-select-border-color);\n border-radius: var(--wje-select-border-radius);\n padding-inline: .5rem;\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n }\n .input-wrapper {\n padding: 0;\n min-height: 28px;\n margin-top: -4px;\n }\n &.focused {\n wje-label {\n opacity: 0.67;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n wje-label {\n margin: 0;\n display: block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease 0s;\n line-height: var(--wje-select-line-height);\n &.fade {\n opacity: 0.5;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n }\n &.standard {\n .wrapper {\n background-color: var(--wje-select-background);\n border-width: var(--wje-select-border-width);\n border-style: var(--wje-select-border-style);\n border-color: var(--wje-select-border-color);\n border-radius: var(--wje-select-border-radius);\n }\n .input-wrapper {\n background: transparent;\n width: 100%;\n }\n }\n}\n\n.wrapper {\n display: flex;\n width: 100%;\n}\n\n.input-wrapper {\n display: grid;\n grid-template-columns: auto auto auto auto;\n align-items: center;\n background-color: var(--wje-select-background);\n min-height: 28px;\n color: var(--wje-select-color);\n line-height: var(--wje-select-line-height);\n appearance: none;\n padding: 2px .5rem;\n font-size: 14px !important;\n font-weight: normal;\n vertical-align: middle;\n}\n\ninput {\n color: var(--wje-select-color);\n line-height: var(--wje-select-line-height);\n font-size: 14px !important;\n font-weight: 400;\n letter-spacing: .01em;\n border: medium;\n height: 25px;\n min-height: 25px;\n padding: 0;\n background: none;\n box-shadow: none;\n width: 100%;\n outline: 0;\n font-size: 14px !important;\n}\n\n::placeholder {\n opacity: 1;\n}\n\n:host [active] {\n .wrapper {\n border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\n }\n [slot=arrow] {\n transform: rotate(180deg);\n transition: all .2s ease-in;\n }\n}\n\n.options-wrapper {\n border-width: var(--wje-select-options-border-width);\n border-style: var(--wje-select-options-border-style);\n border-color: var(--wje-select-options-border-color);\n border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\n margin-top: calc(0px - var(--wje-select-border-width));\n background: var(--wje-select-background);\n overflow: hidden;\n\n}\n\n.find {\n --wje-input-border-radius: 0;\n --wje-input-border-width: 0 0 1px 0;\n}\n\n.list {\n overflow: auto;\n height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n height: calc(100% - 32px - .5rem);\n}\n\n:host([multiple]) input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 0;\n height: 0;\n opacity: 0;\n}\n\n:host([multiple]) .chips {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: wrap;\n}\n\n:host([disabled]) .input-wrapper{\n opacity: 0.5;\n pointer-events: none;\n cursor: not-allowed;\n}\n\n.counter {\n padding-inline: .5rem;\n}\n\nwje-chip {\n --wje-chip-margin: 0 .25rem 0 0;\n}\n\nwje-button {\n --wje-padding-top: .25rem;\n --wje-padding-start: .25rem;\n --wje-padding-end: .25rem;\n --wje-padding-bottom: .25rem;\n --wje-button-margin-inline: 0 .25rem;\n}\n\n.slot-start, .slot-end {\n &:not(:empty) {\n margin-right: .5rem;\n }\n}\n";
17
+ const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n --wje-select-border-width: 1px;\n --wje-select-border-style: solid;\n --wje-select-border-color: var(--wje-border-color);\n\n --wje-select-options-border-width: 1px;\n --wje-select-options-border-style: var(--wje-border-style);\n --wje-select-options-border-color: var(--wje-border-color);\n\n --wje-select-background: var(--wje-background);\n --wje-select-line-height: 20px;\n --wje-select-color: var(--wje-color);\n --wje-select-border-radius: var(--wje-border-radius-medium);\n\n width: 100%;\n display: block;\n [slot=arrow] {\n transform: rotate(0deg);\n transition: all .2s ease-in;\n }\n}\n\n.native-select {\n &.default{\n .wrapper {\n display: block;\n border-width: var(--wje-select-border-width);\n border-style: var(--wje-select-border-style);\n border-color: var(--wje-select-border-color);\n border-radius: var(--wje-select-border-radius);\n padding-inline: .5rem;\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n }\n .input-wrapper {\n padding: 0;\n min-height: 28px;\n margin-top: -4px;\n }\n &.focused {\n wje-label {\n opacity: 0.67;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n wje-label {\n margin: 0;\n display: block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease 0s;\n line-height: var(--wje-select-line-height);\n &.fade {\n opacity: 0.5;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n }\n &.standard {\n .wrapper {\n background-color: var(--wje-select-background);\n border-width: var(--wje-select-border-width);\n border-style: var(--wje-select-border-style);\n border-color: var(--wje-select-border-color);\n border-radius: var(--wje-select-border-radius);\n }\n .input-wrapper {\n background: transparent;\n width: 100%;\n }\n }\n}\n\n.wrapper {\n display: flex;\n width: 100%;\n}\n\n.input-wrapper {\n display: grid;\n grid-template-columns: auto 1fr auto auto auto;\n align-items: center;\n background-color: var(--wje-select-background);\n min-height: 28px;\n color: var(--wje-select-color);\n line-height: var(--wje-select-line-height);\n appearance: none;\n padding: 2px .5rem;\n font-size: 14px !important;\n font-weight: normal;\n vertical-align: middle;\n}\n\ninput {\n color: var(--wje-select-color);\n line-height: var(--wje-select-line-height);\n font-size: 14px !important;\n font-weight: 400;\n letter-spacing: .01em;\n border: medium;\n height: 25px;\n min-height: 25px;\n padding: 0;\n background: none;\n box-shadow: none;\n width: 100%;\n outline: 0;\n font-size: 14px !important;\n}\n\n::placeholder {\n opacity: 1;\n}\n\n:host [active] {\n .wrapper {\n border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\n }\n [slot=arrow] {\n transform: rotate(180deg);\n transition: all .2s ease-in;\n }\n}\n\n.options-wrapper {\n border-width: var(--wje-select-options-border-width);\n border-style: var(--wje-select-options-border-style);\n border-color: var(--wje-select-options-border-color);\n border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\n margin-top: calc(0px - var(--wje-select-border-width));\n background: var(--wje-select-background);\n overflow: hidden;\n\n}\n\n.find {\n --wje-input-border-radius: 0;\n --wje-input-border-width: 0 0 1px 0;\n}\n\n.list {\n overflow: auto;\n height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n height: calc(100% - 32px - .5rem);\n}\n\n:host([multiple]) input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 0;\n height: 0;\n opacity: 0;\n}\n\n:host([multiple]) .chips {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: wrap;\n}\n\n:host([disabled]) .input-wrapper{\n opacity: 0.5;\n pointer-events: none;\n cursor: not-allowed;\n}\n\n.counter {\n padding-inline: .5rem;\n}\n\nwje-chip {\n --wje-chip-margin: 0 .25rem 0 0;\n}\n\nwje-button {\n --wje-padding-top: .25rem;\n --wje-padding-start: .25rem;\n --wje-padding-end: .25rem;\n --wje-padding-bottom: .25rem;\n --wje-button-margin-inline: 0 .25rem;\n}\n\n.slot-start, .slot-end {\n &:not(:empty) {\n margin-right: .5rem;\n }\n}\n";
18
18
  class Select extends WJElement {
19
19
  /**
20
20
  * Creates an instance of Select.
@@ -50,6 +50,7 @@ class Select extends WJElement {
50
50
  }
51
51
  e.target.selected = !e.target.hasAttribute("selected");
52
52
  this.selections(e.target);
53
+ event.dispatchCustomEvent(this, "wje-select:change");
53
54
  });
54
55
  /**
55
56
  * Handles the chip remove event.
@@ -239,7 +240,7 @@ class Select extends WJElement {
239
240
  if (!e.target.value)
240
241
  this.labelElement.classList.remove("fade");
241
242
  });
242
- this.addEventListener("wje:option-change", this.optionChange);
243
+ this.addEventListener("wje-option:change", this.optionChange);
243
244
  this.clear.addEventListener("wje-button:click", (e) => {
244
245
  this.getAllOptions().forEach((option) => {
245
246
  option.selected = false;
package/dist/wje-toast.js CHANGED
@@ -5,58 +5,7 @@ var __publicField = (obj, key, value) => {
5
5
  return value;
6
6
  };
7
7
  import WJElement from "./wje-element.js";
8
- const simple = (notification, alert, options) => {
9
- notification.classList.add("pgn-simple");
10
- alert.innerHTML = "<div>" + options.message + "</div>";
11
- {
12
- alert.appendChild(close());
13
- }
14
- };
15
- const flip = (notification, alert, options) => {
16
- notification.classList.add("pgn-flip");
17
- alert.innerHTML = "<span>" + options.message + "</span>";
18
- {
19
- alert.appendChild(close());
20
- }
21
- };
22
- const circle = (notification, alert, options) => {
23
- notification.classList.add("pgn-circle");
24
- let title = "";
25
- let message = "";
26
- if (options.title)
27
- title = `<p><b>${options.title}</b></p>`;
28
- if (options.message)
29
- message = `<p>${options.message}</p>`;
30
- alert.innerHTML = `<wje-avatar>
31
- <img alt="Silhouette of a person's head" src="/assets/img/avatar.svg" />
32
- </wje-avatar>
33
- <div>
34
- ${title + message}
35
- </div>`;
36
- {
37
- alert.appendChild(close());
38
- }
39
- };
40
- const bar = (notification, alert, options) => {
41
- notification.classList.add("pgn-bar");
42
- alert.classList.add("alert-" + options.type);
43
- alert.innerHTML = "<div>" + options.message + "</div>";
44
- {
45
- alert.appendChild(close());
46
- }
47
- };
48
- const close = () => {
49
- let icon = document.createElement("wje-icon");
50
- icon.setAttribute("name", "x");
51
- icon.setAttribute("slot", "icon-only");
52
- let close2 = document.createElement("wje-button");
53
- close2.setAttribute("fill", "link");
54
- close2.setAttribute("size", "small");
55
- close2.classList.add("close");
56
- close2.appendChild(icon);
57
- return close2;
58
- };
59
- const styles = '/*\n[ TOAST ]\n*/\n\n:host {\n position: fixed;\n z-index: 999;\n}\n\n:host([data-position$="-left"]) {\n left: 0;\n}\n\n:host([data-position$="-right"]) {\n right: 0;\n}\n\n:host([data-position^="top-"]) {\n top: 0;\n}\n\n:host([data-position^="bottom-"]) {\n bottom: 0;\n}\n\n:host([data-position="top"]) {\n top: 0;\n left: 0;\n right: 0;\n}\n\n:host([data-position="bottom"]) {\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.pgn {\n position: relative;\n margin: 10px;\n}\n\n.pgn.pgn-flip{\n /*margin-top: 0;*/\n}\n\n.pgn .alert {\n margin: 0;\n margin-bottom: 4px;\n}\n\n/* Simple\n------------------------------------\n*/\n\n.pgn-simple .alert {\n padding-top: 13px;\n padding-bottom: 13px;\n max-width: 500px;\n animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n -webkit-animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n max-height: 250px;\n overflow: hidden;\n}\n\n/* Bar\n------------------------------------\n*/\n\n.pgn-bar {\n overflow: hidden;\n margin: 0;\n}\n\n.pgn-bar .alert {\n border-radius: 0;\n padding-top: 13px;\n padding-bottom: 13px;\n max-height: 91px;\n}\n\n:host([data-position="top"]) .pgn-bar .alert {\n animation: slideInFromTop 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n -webkit-animation: slideInFromTop 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n transform-origin: top left;\n -webkit-transform-origin: top left;\n}\n\n:host([data-position="bottom"]) .pgn-bar .alert {\n animation: slideInFromBottom 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n -webkit-animation: slideInFromBottom 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n transform-origin: bottom left;\n -webkit-transform-origin: bottom left;\n}\n\n.pgn-bar .alert span {\n opacity: 0;\n animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n -webkit-animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n}\n\n@keyframes slideInFromTop {\n 0% {\n transform: translateY(-100%);\n }\n 100% {\n transform: translateY(0);\n }\n}\n@-webkit-keyframes slideInFromTop {\n 0% {\n -webkit-transform: translateY(-100%);\n }\n 100% {\n -webkit-transform: translateY(0);\n }\n}\n@keyframes slideInFromBottom {\n 0% {\n transform: translateY(100%);\n }\n 100% {\n transform: translateY(0);\n }\n}\n@-webkit-keyframes slideInFromBottom {\n 0% {\n -webkit-transform: translateY(100%);\n }\n 100% {\n -webkit-transform: translateY(0);\n }\n}\n /* Circle\n ------------------------------------\n */\n\n .pgn-circle .alert {\n margin-bottom: 10px;\n border-radius: 300px;\n animation: fadeInCircle 0.3s ease forwards,\n resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;\n -webkit-animation: fadeInCircle 0.3s ease forwards,\n resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;\n height: 48px;\n overflow: hidden;\n padding: 6px 55px 6px 6px;\n -webkit-transform: translateZ(0);\n position: relative;\n display: flex;\n }\n :host {\n &[data-position$="-right"] .pgn-circle .alert {\n float: right;\n }\n\n &[data-position$="-left"] .pgn-circle .alert {\n float: left;\n }\n\n &[data-position^="bottom-"] .pgn-circle .alert {\n margin-bottom: 20px;\n }\n }\n\n wje-avatar:first-child {\n margin-right: 8px;\n }\n\n .pgn-circle .alert .close {\n margin-top: -12px;\n position: absolute;\n right: 18px;\n top: 50%;\n opacity: 0;\n animation: fadeIn 0.3s 0.5s ease forwards;\n -webkit-animation: fadeIn 0.3s 0.5s ease forwards;\n }\n .pgn-circle .alert p {\n margin: 0;\n }\n .pgn-circle .alert > div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n .pgn-circle .alert > div > div {\n display: table-cell;\n vertical-align: middle;\n }\n @keyframes fadeInCircle {\n 0% {\n opacity: 0;\n width: 60px;\n }\n 100% {\n opacity: 1;\n width: 60px;\n }\n }\n @-webkit-keyframes fadeInCircle {\n 0% {\n opacity: 0;\n width: 60px;\n }\n 100% {\n opacity: 1;\n width: 60px;\n }\n }\n @keyframes resizeCircle {\n 0% {\n width: 60px;\n }\n 100% {\n width: 300px;\n }\n }\n @-webkit-keyframes resizeCircle {\n 0% {\n width: 60px;\n }\n 100% {\n width: 300px;\n }\n }\n\n /* Flip\n ------------------------------------\n */\n\n :host[data-position^="bottom-"] .pgn-flip .alert {\n -webkit-transform-origin: 50% 100%;\n transform-origin: 50% 100%;\n }\n .pgn-flip .alert {\n -webkit-transform-origin: 50% 0%;\n transform-origin: 50% 0%;\n -webkit-animation-name: flipInX;\n animation-name: flipInX;\n -webkit-animation-duration: 0.8s;\n animation-duration: 0.8s;\n border-radius: 0;\n padding: 25px 35px;\n max-width: 500px;\n max-height: 250px;\n overflow: hidden;\n }\n @-webkit-keyframes flipInX {\n 0% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\n -webkit-transition-timing-function: ease-in;\n }\n 40% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\n -webkit-transition-timing-function: ease-out;\n }\n 60% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\n -webkit-transition-timing-function: ease-in;\n opacity: 1;\n }\n 80% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\n -webkit-transition-timing-function: ease-out;\n }\n 100% {\n -webkit-transform: perspective(400px);\n }\n }\n @keyframes flipInX {\n 0% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\n -webkit-transition-timing-function: ease-in;\n transition-timing-function: ease-in;\n }\n 40% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\n -webkit-transition-timing-function: ease-out;\n transition-timing-function: ease-out;\n }\n 60% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\n -webkit-transition-timing-function: ease-in;\n transition-timing-function: ease-in;\n opacity: 1;\n }\n 80% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\n -webkit-transition-timing-function: ease-out;\n transition-timing-function: ease-out;\n }\n 100% {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n }\n @keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n @-webkit-keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n /* Pages Notification customizations */\n :host([data-position="top"]) {\n top: 60px;\n left: 0;\n }\n :host([data-position="bottom"]) {\n left: 0;\n }\n\n :host([data-position$="-left"]) {\n left: 0;\n right: auto;\n }\n\n :host([data-position^="top-"]) {\n bottom: auto;\n }\n\n :host {\n z-index: 999;\n }\n\n @media (max-width: 979px) {\n body .pgn-wrapper[data-position="top"] {\n left: 0 !important;\n }\n body .pgn-wrapper[data-position="bottom"] {\n left: 0 !important;\n }\n }\n @media (max-width: 767px) {\n body .pgn-wrapper[data-position$="-left"],\n body .pgn-wrapper[data-position$="-right"] {\n left: 10px !important;\n right: 10px !important;\n }\n body .pgn-wrapper[data-position$="-right"] .alert,\n body .pgn-wrapper[data-position$="-left"] .alert {\n max-width: 100%;\n width: 100%;\n }\n }\n\n.alert {\n background-image: none;\n box-shadow: none;\n text-shadow: none;\n padding: 9px 19px 9px 15px;\n border-radius: 3px;\n font-size: 13px;\n border-width: 0;\n transition: all 0.2s linear 0s;\n display: flex;\n align-items: center;\n &.bordered {\n border-width: 1px;\n }\n\n .link {\n color: #ce8f22;\n font-weight: bold;\n }\n\n .alert-heading {\n color: #ce8f22 !important;\n margin-bottom: 5px;\n font-weight: 600;\n }\n\n .btn-small {\n position: relative;\n top: -3.5px;\n }\n\n .button-set {\n .btn {\n position: relative;\n top: 8px;\n }\n }\n}\n\n/* Alert : Color Options\n------------------------------------\n*/\n.alert-danger,\n.alert-error,\n.alert-danger.btn,\n.alert-error.btn {\n background-color: var(--wje-color-primary-2) !important;\n color: var(--wje-color-primary-11)!important;\n border-color: var(--wje-color-primary-9)!important;\n\n .close {\n background-position: -95px -10px !important;\n }\n}\n\n.alert-warning {\n\n background-color: var(--wje-color-warning-2) !important;\n color: var(--wje-color-warning-11)!important;\n border-color: var(--wje-color-warning-9)!important;\n}\n\n.alert-info {\n background-color: var(--wje-color-complete-2) !important;\n color: var(--wje-color-complete-11) !important;\n border-color: var(--wje-color-complete-9) !important;\n\n .close {\n background-position: -67px -10px !important;\n }\n}\n\n.alert-success, .alert-success.btn {\n background-color: var(--wje-color-success-2) !important;\n color: var(--wje-color-success-11) !important;\n border-color: var(--wje-color-success-9) !important;\n .close {\n background-position: -38px -10px !important;\n }\n}\n\n.alert-default {\n background-color: var(--wje-color-contrast-2) !important;\n color: var(--wje-color-contrast-11)!important;\n border-color: var(--wje-color-contrast-9)!important;\n\n .close {\n background-position: -67px -10px !important;\n }\n}\n';
8
+ const styles = '/*\n[ TOAST ]\n*/\n\n:host {\n position: fixed;\n z-index: 999;\n}\n\n:host([position$="-left"]) {\n left: 0;\n}\n\n:host([position$="-right"]) {\n right: 0;\n}\n\n:host([position^="top-"]) {\n top: 0;\n}\n\n:host([position^="bottom-"]) {\n bottom: 0;\n}\n\n:host([position="top"]) {\n top: 0;\n left: 0;\n right: 0;\n}\n\n:host([position="bottom"]) {\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.pgn {\n position: relative;\n margin: 10px;\n}\n\n.pgn.pgn-flip{\n /*margin-top: 0;*/\n}\n\n.pgn .alert {\n margin: 0;\n /*margin-bottom: 4px;*/\n}\n\n/* Simple\n------------------------------------\n*/\n\n.pgn-simple .alert {\n padding-top: 13px;\n padding-bottom: 13px;\n max-width: 500px;\n animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n -webkit-animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n max-height: 250px;\n overflow: hidden;\n}\n\n/* Bar\n------------------------------------\n*/\n\n.pgn-bar {\n overflow: hidden;\n margin: 0;\n}\n\n.pgn-bar .alert {\n border-radius: 0;\n padding-top: 13px;\n padding-bottom: 13px;\n max-height: 91px;\n}\n\n:host([position="top"]) .pgn-bar .alert {\n animation: slideInFromTop 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n -webkit-animation: slideInFromTop 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n transform-origin: top left;\n -webkit-transform-origin: top left;\n}\n\n:host([position="bottom"]) .pgn-bar .alert {\n animation: slideInFromBottom 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n -webkit-animation: slideInFromBottom 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n transform-origin: bottom left;\n -webkit-transform-origin: bottom left;\n}\n\n.pgn-bar .alert span {\n opacity: 0;\n animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n -webkit-animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n}\n\n@keyframes slideInFromTop {\n 0% {\n transform: translateY(-100%);\n }\n 100% {\n transform: translateY(0);\n }\n}\n@-webkit-keyframes slideInFromTop {\n 0% {\n -webkit-transform: translateY(-100%);\n }\n 100% {\n -webkit-transform: translateY(0);\n }\n}\n@keyframes slideInFromBottom {\n 0% {\n transform: translateY(100%);\n }\n 100% {\n transform: translateY(0);\n }\n}\n@-webkit-keyframes slideInFromBottom {\n 0% {\n -webkit-transform: translateY(100%);\n }\n 100% {\n -webkit-transform: translateY(0);\n }\n}\n /* Circle\n ------------------------------------\n */\n\n .pgn-circle .alert {\n margin-bottom: 10px;\n border-radius: 300px;\n animation: fadeInCircle 0.3s ease forwards,\n resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;\n -webkit-animation: fadeInCircle 0.3s ease forwards,\n resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;\n height: 48px;\n overflow: hidden;\n padding: 6px 55px 6px 6px;\n -webkit-transform: translateZ(0);\n position: relative;\n display: flex;\n }\n :host {\n &[data-position$="-right"] .pgn-circle .alert {\n float: right;\n }\n\n &[data-position$="-left"] .pgn-circle .alert {\n float: left;\n }\n\n &[data-position^="bottom-"] .pgn-circle .alert {\n margin-bottom: 20px;\n }\n }\n\n wje-avatar:first-child {\n margin-right: 8px;\n }\n\n .pgn-circle .alert .close {\n margin-top: -12px;\n position: absolute;\n right: 18px;\n top: 50%;\n opacity: 0;\n animation: fadeIn 0.3s 0.5s ease forwards;\n -webkit-animation: fadeIn 0.3s 0.5s ease forwards;\n }\n .pgn-circle .alert p {\n margin: 0;\n }\n .pgn-circle .alert > div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n .pgn-circle .alert > div > div {\n display: table-cell;\n vertical-align: middle;\n }\n @keyframes fadeInCircle {\n 0% {\n opacity: 0;\n width: 60px;\n }\n 100% {\n opacity: 1;\n width: 60px;\n }\n }\n @-webkit-keyframes fadeInCircle {\n 0% {\n opacity: 0;\n width: 60px;\n }\n 100% {\n opacity: 1;\n width: 60px;\n }\n }\n @keyframes resizeCircle {\n 0% {\n width: 60px;\n }\n 100% {\n width: 300px;\n }\n }\n @-webkit-keyframes resizeCircle {\n 0% {\n width: 60px;\n }\n 100% {\n width: 300px;\n }\n }\n\n /* Flip\n ------------------------------------\n */\n\n :host[data-position^="bottom-"] .pgn-flip .alert {\n -webkit-transform-origin: 50% 100%;\n transform-origin: 50% 100%;\n }\n .pgn-flip .alert {\n -webkit-transform-origin: 50% 0%;\n transform-origin: 50% 0%;\n -webkit-animation-name: flipInX;\n animation-name: flipInX;\n -webkit-animation-duration: 0.8s;\n animation-duration: 0.8s;\n border-radius: 0;\n padding: 25px 35px;\n max-width: 500px;\n max-height: 250px;\n overflow: hidden;\n }\n @-webkit-keyframes flipInX {\n 0% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\n -webkit-transition-timing-function: ease-in;\n }\n 40% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\n -webkit-transition-timing-function: ease-out;\n }\n 60% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\n -webkit-transition-timing-function: ease-in;\n opacity: 1;\n }\n 80% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\n -webkit-transition-timing-function: ease-out;\n }\n 100% {\n -webkit-transform: perspective(400px);\n }\n }\n @keyframes flipInX {\n 0% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\n -webkit-transition-timing-function: ease-in;\n transition-timing-function: ease-in;\n }\n 40% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\n -webkit-transition-timing-function: ease-out;\n transition-timing-function: ease-out;\n }\n 60% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\n -webkit-transition-timing-function: ease-in;\n transition-timing-function: ease-in;\n opacity: 1;\n }\n 80% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\n -webkit-transition-timing-function: ease-out;\n transition-timing-function: ease-out;\n }\n 100% {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n }\n @keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n @-webkit-keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n /* Pages Notification customizations */\n :host([data-position="top"]) {\n top: 60px;\n left: 0;\n }\n :host([data-position="bottom"]) {\n left: 0;\n }\n\n :host([data-position$="-left"]) {\n left: 0;\n right: auto;\n }\n\n :host([data-position^="top-"]) {\n bottom: auto;\n }\n\n :host {\n z-index: 999;\n }\n\n @media (max-width: 979px) {\n body .pgn-wrapper[data-position="top"] {\n left: 0 !important;\n }\n body .pgn-wrapper[data-position="bottom"] {\n left: 0 !important;\n }\n }\n @media (max-width: 767px) {\n body .pgn-wrapper[data-position$="-left"],\n body .pgn-wrapper[data-position$="-right"] {\n left: 10px !important;\n right: 10px !important;\n }\n body .pgn-wrapper[data-position$="-right"] .alert,\n body .pgn-wrapper[data-position$="-left"] .alert {\n max-width: 100%;\n width: 100%;\n }\n }\n\n.alert {\n background-image: none;\n box-shadow: none;\n text-shadow: none;\n padding: 9px 19px 9px 15px;\n border-radius: 3px;\n font-size: 13px;\n border-width: 0;\n transition: all 0.2s linear 0s;\n display: flex;\n align-items: center;\n &.bordered {\n border-width: 1px;\n }\n\n .link {\n color: #ce8f22;\n font-weight: bold;\n }\n\n .alert-heading {\n color: #ce8f22 !important;\n margin-bottom: 5px;\n font-weight: 600;\n }\n\n .btn-small {\n position: relative;\n top: -3.5px;\n }\n\n .button-set {\n .btn {\n position: relative;\n top: 8px;\n }\n }\n}\n\n/* Alert : Color Options\n------------------------------------\n*/\n.alert-danger,\n.alert-error,\n.alert-danger.btn,\n.alert-error.btn {\n background-color: var(--wje-color-primary-2) !important;\n color: var(--wje-color-primary-11)!important;\n border-color: var(--wje-color-primary-9)!important;\n\n .close {\n background-position: -95px -10px !important;\n }\n}\n\n.alert-warning {\n\n background-color: var(--wje-color-warning-2) !important;\n color: var(--wje-color-warning-11)!important;\n border-color: var(--wje-color-warning-9)!important;\n}\n\n.alert-info {\n background-color: var(--wje-color-complete-2) !important;\n color: var(--wje-color-complete-11) !important;\n border-color: var(--wje-color-complete-9) !important;\n\n .close {\n background-position: -67px -10px !important;\n }\n}\n\n.alert-success, .alert-success.btn {\n background-color: var(--wje-color-success-2) !important;\n color: var(--wje-color-success-11) !important;\n border-color: var(--wje-color-success-9) !important;\n .close {\n background-position: -38px -10px !important;\n }\n}\n\n.alert-default {\n background-color: var(--wje-color-contrast-2) !important;\n color: var(--wje-color-contrast-11)!important;\n border-color: var(--wje-color-contrast-9)!important;\n\n .close {\n background-position: -67px -10px !important;\n }\n}\n';
60
9
  class Toast extends WJElement {
61
10
  /**
62
11
  * Toast constructor
@@ -70,6 +19,24 @@ class Toast extends WJElement {
70
19
  */
71
20
  __publicField(this, "className", "Toast");
72
21
  }
22
+ set position(value) {
23
+ this.setAttribute("position", value);
24
+ }
25
+ get position() {
26
+ return this.getAttribute("position");
27
+ }
28
+ set type(value) {
29
+ this.setAttribute("type", value);
30
+ }
31
+ get type() {
32
+ return this.getAttribute("type");
33
+ }
34
+ set variant(value) {
35
+ this.setAttribute("variant", value);
36
+ }
37
+ get variant() {
38
+ return this.getAttribute("variant");
39
+ }
73
40
  /**
74
41
  * Get CSS stylesheet
75
42
  * @static
@@ -78,6 +45,15 @@ class Toast extends WJElement {
78
45
  static get cssStyleSheet() {
79
46
  return styles;
80
47
  }
48
+ /**
49
+ * Returns the list of attributes to observe for changes.
50
+ *
51
+ * @static
52
+ * @returns {Array<string>}
53
+ */
54
+ static get observedAttributes() {
55
+ return ["position", "type", "variant"];
56
+ }
81
57
  /**
82
58
  * Setup attributes
83
59
  */
@@ -93,7 +69,7 @@ class Toast extends WJElement {
93
69
  */
94
70
  draw(context, store, params) {
95
71
  let fragment = document.createDocumentFragment();
96
- let options = {
72
+ ({
97
73
  message: "Záznam bol úspešne uložený.",
98
74
  position: this.position,
99
75
  showClose: true,
@@ -101,28 +77,20 @@ class Toast extends WJElement {
101
77
  timeout: this.duration || 4e3,
102
78
  type: this.type || "success",
103
79
  title: this.title || "John Doe"
104
- };
105
- this.container = document.querySelector("body");
106
- this.notification = document.createElement("div");
107
- this.notification.classList.add("pgn", "push-on-sidebar-open");
108
- this.classList.add("pgn-wrapper");
109
- this.setAttribute("data-position", options.position);
110
- this.alert = document.createElement("div");
111
- this.alert.classList.add("alert");
112
- this.alert.classList.add("alert-" + options.type);
113
- if (options.style == "bar") {
114
- bar(this.notification, this.alert, options);
115
- } else if (options.style == "flip") {
116
- flip(this.notification, this.alert, options);
117
- } else if (options.style == "circle") {
118
- circle(this.notification, this.alert, options);
119
- } else if (options.style == "simple") {
120
- simple(this.notification, this.alert, options);
121
- } else {
122
- simple(this.notification, this.alert, options);
123
- }
124
- this.notification.appendChild(this.alert);
125
- fragment.appendChild(this.notification);
80
+ });
81
+ let native = document.createElement("div");
82
+ native.setAttribute("part", "native");
83
+ native.classList.add("native-toast");
84
+ let avatar = document.createElement("div");
85
+ avatar.classList.add("avatar");
86
+ let content = document.createElement("div");
87
+ content.classList.add("content");
88
+ let close = document.createElement("div");
89
+ close.classList.add("close");
90
+ native.appendChild(avatar);
91
+ native.appendChild(content);
92
+ native.appendChild(close);
93
+ fragment.appendChild(native);
126
94
  return fragment;
127
95
  }
128
96
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "wj-elements",
3
3
  "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
4
- "version": "0.1.84",
4
+ "version": "0.1.85",
5
5
  "homepage": "https://github.com/lencys/wj-elements",
6
6
  "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
7
7
  "license": "MIT",