wj-elements 0.1.50 → 0.1.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -40,5 +40,4 @@ Use CDN and include compiled CSS and JS files of WebJET Elements in your project
40
40
 
41
41
  ```html
42
42
  <wj-button>Button</wj-button>
43
- ```
44
-
43
+ ```
@@ -1,9 +1,9 @@
1
- var j = Object.defineProperty;
2
- var v = (e, o, r) => o in e ? j(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r;
3
- var n = (e, o, r) => (v(e, typeof o != "symbol" ? o + "" : o, r), r);
4
- import p, { event as s } from "./wje-element.js";
5
- const h = ":host([color=primary]){--wje-accordion-background: var(--wje-color-primary-1);--wje-accordion-border: var(--wje-color-primary-1);--wje-accordion-background-hover: var(--wje-color-primary-2);--wje-accordion-border-hover: var(--wje-color-primary-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-primary-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color=complete]){--wje-accordion-background: var(--wje-color-complete-1);--wje-accordion-border: var(--wje-color-complete-1);--wje-accordion-background-hover: var(--wje-color-complete-2);--wje-accordion-border-hover: var(--wje-color-complete-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-complete-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color=success]){--wje-accordion-background: var(--wje-color-success-1);--wje-accordion-border: var(--wje-color-success-1);--wje-accordion-background-hover: var(--wje-color-success-2);--wje-accordion-border-hover: var(--wje-color-success-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-success-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color=danger]){--wje-accordion-background: var(--wje-color-danger-1);--wje-accordion-border: var(--wje-color-danger-1);--wje-accordion-background-hover: var(--wje-color-danger-2);--wje-accordion-border-hover: var(--wje-color-danger-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-danger-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color=warning]){--wje-accordion-background: var(--wje-color-warning-1);--wje-accordion-border: var(--wje-color-warning-1);--wje-accordion-background-hover: var(--wje-color-warning-2);--wje-accordion-border-hover: var(--wje-color-warning-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-warning-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color=info]){--wje-accordion-background: var(--wje-color-info-1);--wje-accordion-border: var(--wje-color-info-1);--wje-accordion-background-hover: var(--wje-color-info-2);--wje-accordion-border-hover: var(--wje-color-info-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-info-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host{display:block;margin-bottom:.5rem}.native-accordion-item{display:block;background-color:var(--wje-accordion-background);border-radius:var(--wje-border-radius-small);border-width:1px;border-style:solid;border-color:var(--wje-accordion-border);transition:background-color .2s ease-in-out}.native-accordion-item:hover{background-color:var(--wje-accordion-background-hover);border-color:var(--wje-accordion-border-hover)}:host(.expanded) .native-accordion-item{background-color:var(--wje-accordion-background-expanded);border-color:var(--wje-accordion-border-expanded)}#headline{display:block}#headline::slotted(span){display:block;text-transform:uppercase;font-size:var(--wje-font-size)!important;color:var(--wje-accordion-headline-color);line-height:normal!important;margin:0!important;padding:.75rem}#content{display:block;color:var(--wje-accordion-content-color);overflow:hidden;max-height:0;transition:max-height .2s ease-in-out}#content slot{display:block;margin:0 .75rem .75rem}:host(.expanded) #content{max-height:100vh}";
6
- class w extends p {
1
+ var m = Object.defineProperty;
2
+ var h = (r, o, c) => o in r ? m(r, o, { enumerable: !0, configurable: !0, writable: !0, value: c }) : r[o] = c;
3
+ var n = (r, o, c) => (h(r, typeof o != "symbol" ? o + "" : o, c), c);
4
+ import b, { event as p } from "./wje-element.js";
5
+ const u = ":host{--wje-accordion-background: var(--wje-color-contrast-0);--wje-accordion-border: var(--wje-color-contrast-0);--wje-accordion-border-radius: var(--wje-border-radius-large);--wje-accordion-background-hover: var(--wje-color-contrast-2);--wje-accordion-border-hover: var(--wje-color-contrast-2);--wje-accordion-background-expanded: var(--wje-color-contrast-0);--wje-accordion-border-expanded: var(--wje-color-contrast-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color=primary]){--wje-accordion-background: var(--wje-color-primary-1);--wje-accordion-border: var(--wje-color-primary-1);--wje-accordion-background-hover: var(--wje-color-primary-2);--wje-accordion-border-hover: var(--wje-color-primary-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-primary-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color=complete]){--wje-accordion-background: var(--wje-color-complete-1);--wje-accordion-border: var(--wje-color-complete-1);--wje-accordion-background-hover: var(--wje-color-complete-2);--wje-accordion-border-hover: var(--wje-color-complete-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-complete-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color=success]){--wje-accordion-background: var(--wje-color-success-1);--wje-accordion-border: var(--wje-color-success-1);--wje-accordion-background-hover: var(--wje-color-success-2);--wje-accordion-border-hover: var(--wje-color-success-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-success-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color=danger]){--wje-accordion-background: var(--wje-color-danger-1);--wje-accordion-border: var(--wje-color-danger-1);--wje-accordion-background-hover: var(--wje-color-danger-2);--wje-accordion-border-hover: var(--wje-color-danger-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-danger-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color=warning]){--wje-accordion-background: var(--wje-color-warning-1);--wje-accordion-border: var(--wje-color-warning-1);--wje-accordion-background-hover: var(--wje-color-warning-2);--wje-accordion-border-hover: var(--wje-color-warning-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-warning-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color=info]){--wje-accordion-background: var(--wje-color-info-1);--wje-accordion-border: var(--wje-color-info-1);--wje-accordion-background-hover: var(--wje-color-info-2);--wje-accordion-border-hover: var(--wje-color-info-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-info-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host{display:block;margin-bottom:.5rem}.native-accordion-item{display:block;background-color:var(--wje-accordion-background);border-radius:var(--wje-accordion-border-radius);border-width:1px;border-style:solid;border-color:var(--wje-accordion-border);transition:background-color .2s ease-in-out}.native-accordion-item:hover{background-color:var(--wje-accordion-background-hover);border-color:var(--wje-accordion-border-hover)}:host(.expanded) .native-accordion-item{background-color:var(--wje-accordion-background-expanded);border-color:var(--wje-accordion-border-expanded)}.headline{display:grid;grid-template-columns:1fr auto;align-items:center;font-size:var(--wje-font-size)!important;color:var(--wje-accordion-headline-color);line-height:normal!important;margin:0!important;padding:.75rem}[name=description]{font-size:var(--wje-font-size-small);color:var(--wje-color-contrast-6)}wje-icon{margin-left:auto;transform:rotate(var(--wje-accordion-marker-rotate, 0deg))}#content{display:block;color:var(--wje-accordion-content-color);overflow:hidden;max-height:0;transition:max-height .25s ease-in-out}#content slot{display:block;margin:0 .75rem .75rem}:host(.expanded) #content{max-height:100vh}";
6
+ class v extends b {
7
7
  /**
8
8
  * Constructor for the AccordionItem class.
9
9
  */
@@ -14,19 +14,6 @@ class w extends p {
14
14
  * @type {string}
15
15
  */
16
16
  n(this, "className", "AccordionItem");
17
- // afterDraw(context, store, params) {
18
- // this.summary.style.setProperty("--wje-accordion-marker", `url(${svgIcon})`);
19
- // this.summary.style.setProperty("--wje-accordion-marker-rotate", '180deg');
20
- //
21
- // this.native.addEventListener("toggle", (e) => {
22
- // e.stopPropagation();
23
- // if (this.native.open) {
24
- // event.dispatchCustomEvent(this, "wje-accordion-item:open");
25
- // } else {
26
- // event.dispatchCustomEvent(this, "wje-accordion-item:close");
27
- // }
28
- // });
29
- // }
30
17
  n(this, "collapse", () => {
31
18
  this.classList.remove("expanded"), this.classList.add("collapsed");
32
19
  });
@@ -39,7 +26,7 @@ class w extends p {
39
26
  * @return {Object} The styles for the Accordion Item element.
40
27
  */
41
28
  static get cssStyleSheet() {
42
- return h;
29
+ return u;
43
30
  }
44
31
  /**
45
32
  * Getter for the observed attributes.
@@ -61,28 +48,34 @@ class w extends p {
61
48
  * @param {Object} params - The parameters for drawing the element.
62
49
  * @return {Object} The document fragment containing the drawn element.
63
50
  */
64
- draw(r, b, m) {
65
- let i = document.createDocumentFragment(), c = document.createElement("div");
66
- c.setAttribute("part", "native"), c.classList.add("native-accordion-item");
67
- let a = document.createElement("slot");
68
- a.setAttribute("name", "headline"), a.setAttribute("id", "headline");
51
+ draw(c, g, k) {
52
+ let l = document.createDocumentFragment(), a = document.createElement("div");
53
+ a.setAttribute("part", "native"), a.classList.add("native-accordion-item");
54
+ let e = document.createElement("div");
55
+ e.setAttribute("part", "headline"), e.classList.add("headline");
56
+ let d = document.createElement("slot");
57
+ d.setAttribute("part", "description"), d.setAttribute("name", "description");
58
+ let s = document.createElement("slot");
59
+ s.setAttribute("name", "headline");
69
60
  let t = document.createElement("slot");
70
- t.setAttribute("name", "toggle"), t.setAttribute("id", "toggle");
71
- let d = document.createElement("div");
72
- d.setAttribute("id", "content");
73
- let l = document.createElement("slot");
74
- return l.setAttribute("name", "content"), d.appendChild(l), c.appendChild(a), c.appendChild(d), i.appendChild(c), this.headline = a, this.toggle = t, i;
61
+ t.setAttribute("part", "toggle"), t.setAttribute("name", "toggle");
62
+ let w = document.createElement("wje-icon");
63
+ w.setAttribute("name", "chevron-down");
64
+ let i = document.createElement("div");
65
+ i.setAttribute("id", "content");
66
+ let j = document.createElement("slot");
67
+ return j.setAttribute("name", "content"), t.appendChild(w), e.appendChild(s), e.appendChild(t), e.appendChild(d), i.appendChild(j), a.appendChild(e), a.appendChild(i), l.appendChild(a), this.headline = e, this.toggle = t, l;
75
68
  }
76
69
  /**
77
70
  * Method to execute after the Accordion Item element is drawn.
78
71
  */
79
72
  afterDraw() {
80
73
  this.classList.contains("expanded") || this.classList.add("collapsed"), this.headline.addEventListener("click", () => {
81
- this.classList.contains("collapsed") ? (this.collapse(), s.dispatchCustomEvent(this, "wje-accordion-item:open")) : (this.expand(), s.dispatchCustomEvent(this, "wje-accordion-item:close"));
74
+ this.classList.contains("collapsed") ? (p.dispatchCustomEvent(this, "wje-accordion-item:open"), this.toggle.style.setProperty("--wje-accordion-marker-rotate", "180deg"), this.expand()) : (p.dispatchCustomEvent(this, "wje-accordion-item:close"), this.toggle.style.setProperty("--wje-accordion-marker-rotate", "0deg"), this.collapse());
82
75
  });
83
76
  }
84
77
  }
85
- w.define("wje-accordion-item", w);
78
+ v.define("wje-accordion-item", v);
86
79
  export {
87
- w as default
80
+ v as default
88
81
  };
@@ -1,6 +1,6 @@
1
1
  var n = Object.defineProperty;
2
- var a = (s, e, t) => e in s ? n(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
3
- var l = (s, e, t) => (a(s, typeof e != "symbol" ? e + "" : e, t), t);
2
+ var a = (o, e, t) => e in o ? n(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
3
+ var l = (o, e, t) => (a(o, typeof e != "symbol" ? e + "" : e, t), t);
4
4
  import d from "./wje-element.js";
5
5
  const u = ":host{display:block;width:100%}";
6
6
  class c extends d {
@@ -42,8 +42,8 @@ class c extends d {
42
42
  this.isShadowRoot = "open";
43
43
  }
44
44
  beforeDraw() {
45
- console.log("beforeDraw", this.getAccordions()), this.getAccordions().forEach((t, o) => {
46
- console.log(t, o, +this.getAttribute("index")), this.hasAttribute("index") && +this.getAttribute("index") === o && (console.log("index", +this.getAttribute("index") + " !== " + o), t.classList.add("expanded"));
45
+ console.log("beforeDraw", this.getAccordions()), this.getAccordions().forEach((t, s) => {
46
+ console.log(t, s, +this.getAttribute("index")), this.hasAttribute("index") && +this.getAttribute("index") === s && (console.log("index", +this.getAttribute("index") + " !== " + s), t.classList.add("expanded"));
47
47
  });
48
48
  }
49
49
  /**
@@ -53,20 +53,18 @@ class c extends d {
53
53
  * @param {Object} params - The parameters for drawing the element.
54
54
  * @return {Object} The document fragment containing the drawn element.
55
55
  */
56
- draw(t, o, h) {
56
+ draw(t, s, h) {
57
57
  let i = document.createDocumentFragment(), r = document.createElement("slot");
58
58
  return i.appendChild(r), this.slotEl = r, i;
59
59
  }
60
60
  afterDraw() {
61
- this.addEventListener("wje-accordion-item:close", (t) => {
62
- console.log("wje-accordion-item:close", t.detail);
63
- }), this.addEventListener("wje-accordion-item:open", (t) => {
64
- console.log("wje-accordion-item:open", t.detail), this.multiple || this.collapseAll(t.detail.context);
61
+ this.addEventListener("wje-accordion-item:open", (t) => {
62
+ this.multiple || this.collapseAll(t.detail.context);
65
63
  });
66
64
  }
67
65
  collapseAll(t) {
68
- this.getAccordions().forEach((o) => {
69
- o !== t && o.collapse();
66
+ this.getAccordions().forEach((s) => {
67
+ s !== t && s.collapse();
70
68
  });
71
69
  }
72
70
  getAccordions() {
@@ -1,6 +1,6 @@
1
1
  var w = Object.defineProperty;
2
2
  var u = (a, t, e) => t in a ? w(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
3
- var h = (a, t, e) => (u(a, typeof t != "symbol" ? t + "" : t, e), e);
3
+ var m = (a, t, e) => (u(a, typeof t != "symbol" ? t + "" : t, e), e);
4
4
  import c from "./wje-element.js";
5
5
  function j(a, t = 40, e = 65) {
6
6
  let r = a, o = 0;
@@ -13,7 +13,7 @@ function p(a, t = 2) {
13
13
  return e.length > 1 && t > 1 && (r += e[e.length - 1].substring(0, 1).toUpperCase()), r;
14
14
  }
15
15
  const z = ':host{display:inline-block;font-size:var(--wje-avatar-font-size);font-weight:var(--wje-avatar-font-weight);color:var(--wje-avatar-color)}:host .native-avatar{position:relative;display:flex;align-items:center;justify-content:center;width:var(--wje-avatar-size);height:var(--wje-avatar-size);border-radius:var(--wje-avatar-border-radius);background-color:var(--wje-avatar-background-color)}::slotted(wje-img),::slotted(img){border-radius:var(--wje-avatar-border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}:host(.wje-avatar-border){border-color:var(--wje-avatar-border-color);border-width:var(--wje-avatar-border-width);border-style:var(--wje-avatar-border-style)}:host([size="small"]){--wje-avatar-size: var(--wje-size-small);--wje-avatar-font-size: var(--wje-font-size-2x-small)}:host([size="medium"]){--wje-avatar-size: var(--wje-size-medium);--wje-avatar-font-size: var(--wje-font-size-2x-small)}:host([size="normal"]){--wje-avatar-size: var(--wje-size)}:host([size="large"]){--wje-avatar-size: var(--wje-size-large)}:host([size="x-large"]){--wje-avatar-size: var(--wje-size-x-large)}:host([size="2x-large"]){--wje-avatar-size: var(--wje-size-2x-large);--wje-avatar-font-size: var(--wje-font-size-small)}:host([size="3x-large"]){--wje-avatar-size: var(--wje-size-3x-large);--wje-avatar-font-size: var(--wje-font-size-medium)}:host([size="4x-large"]){--wje-avatar-size: var(--wje-size-4x-large);--wje-avatar-font-size: var(--wje-font-size-x-large)}:host([size="5x-large"]){--wje-avatar-size: var(--wje-size-5x-large);--wje-avatar-font-size: var(--wje-font-size-3x-large)}:host slot[name=status]{display:block;position:absolute}:host([status-placement=top-start]) slot[name=status]{top:-4px;left:-4px}:host([status-placement=top-end]) slot[name=status]{top:-4px;right:-4px}:host([status-placement=bottom-start]) slot[name=status]{bottom:-4px;left:-4px}:host([status-placement=bottom-end]) slot[name=status]{bottom:-4px;right:-4px}';
16
- class m extends c {
16
+ class h extends c {
17
17
  /**
18
18
  * Avatar class constructor
19
19
  */
@@ -22,7 +22,7 @@ class m extends c {
22
22
  /**
23
23
  * Class name
24
24
  */
25
- h(this, "className", "Avatar");
25
+ m(this, "className", "Avatar");
26
26
  }
27
27
  /**
28
28
  * Getter for cssStyleSheet
@@ -67,11 +67,8 @@ class m extends c {
67
67
  isImage() {
68
68
  return this.getElementsByTagName("wje-img").length > 0;
69
69
  }
70
- dispatchEvent(e) {
71
- return !1;
72
- }
73
70
  }
74
- m.define("wje-avatar", m);
71
+ h.define("wje-avatar", h);
75
72
  export {
76
- m as default
73
+ h as default
77
74
  };
@@ -1,6 +1,6 @@
1
1
  var u = Object.defineProperty;
2
- var f = (o, t, e) => t in o ? u(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
3
- var s = (o, t, e) => (f(o, typeof t != "symbol" ? t + "" : t, e), e);
2
+ var f = (a, t, e) => t in a ? u(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
3
+ var s = (a, t, e) => (f(a, typeof t != "symbol" ? t + "" : t, e), e);
4
4
  import v, { event as h } from "./wje-element.js";
5
5
  import "./wje-icon.js";
6
6
  const x = ':host .close{margin-left:auto}:host .modal-content{border-radius:3px;box-shadow:none}:host .dialog-header{position:relative;border-bottom:0;padding-inline:var(--wje-dialog-padding);padding-top:var(--wje-dialog-padding);padding-bottom:var(--wje-dialog-padding);display:flex;align-items:center}:host .dialog-header span{font-family:var(--wje-font-family-secondary);font-size:10.5px;text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-weight:500;margin:0;padding:0;line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40)}:host .dialog-content{box-shadow:none;padding-inline:var(--wje-dialog-padding);white-space:normal;z-index:1}:host .dialog-footer{display:flex;justify-content:end;border-top:none;box-shadow:none;margin-top:0;padding-inline:var(--wje-dialog-padding-inline);padding-top:var(--wje-dialog-padding-top);padding-bottom:var(--wje-dialog-padding-bottom)}dialog::backdrop{opacity:var(--wje-backdrop-opacity);background-color:var(--wje-backdrop)}dialog:focus-visible{outline:none}:host(.separator) .dialog-header:after{content:"";height:1px;background:#00000014;left:var(--wje-dialog-padding);right:var(--wje-dialog-padding);position:absolute;bottom:0}:host dialog{box-sizing:border-box;transition:all .2s!important;width:var(--wje-dialog-width);height:var(--wje-dialog-height);box-shadow:0 .5rem 1rem #00000026;border-radius:var(--wje-dialog-border-radius);border-width:var(--wje-dialog-border-width);border-style:var(--wje-dialog-border-style);border-color:var(--wje-dialog-border-color);margin-top:var(--wje-dialog-margin-top);margin-bottom:var(--wje-dialog-margin-bottom);margin-inline:var(--wje-dialog-margin-start) var(--wje-dialog-margin-end);padding:0}:host(.stick-up){--wje-dialog-width: 300px !important;--wje-dialog-height: fit-content;--wje-dialog-border-radius: 0 0 8px 8px;--wje-dialog-border-width: 0 1px 1px 1px;--wje-dialog-margin-top: 0;--wje-dialog-translate-from: translateY(-110%);--wje-dialog-template-to: translateX(0)}:host(.slide-up){--wje-dialog-width: 300px !important;--wje-dialog-height: fit-content;--wje-dialog-border-radius: 8px;--wje-dialog-border-width: 1px;--wje-dialog-opacity-from: 0;--wje-dialog-translate-from: scale(.9);--wje-dialog-translate-to: scale(1)}:host(.fill-in){--wje-dialog-width: 100%;--wje-dialog-height: 100%;--wje-dialog-border-radius: 0 0 0 0 !important;--wje-dialog-border-width: 0;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: 0;--wje-dialog-margin-end: 0;--wje-dialog-margin-bottom: 0;--wje-dialog-translate-from: scale(.95);--wje-dialog-translate-to: scale(1)}:host(.fill-in) dialog{min-width:var(--wje-dialog-width);min-height:var(--wje-dialog-height)}:host(.slide-left){--wje-dialog-width: 300px !important;--wje-dialog-height: 100% !important;--wje-dialog-border-radius: 0;--wje-dialog-border-width: 0 1px 0 0;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: 0;--wje-dialog-margin-end: auto;--wje-dialog-margin-bottom: 0}:host(.slide-left) dialog{min-height:var(--wje-dialog-height);--wje-dialog-translate-from: translateX(-110%);--wje-dialog-template-to: translateX(0)}:host(.slide-right){--wje-dialog-width: 300px !important;--wje-dialog-height: 100% !important;--wje-dialog-border-radius: 0;--wje-dialog-border-width: 0 0 0 1px;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: auto;--wje-dialog-margin-end: 0;--wje-dialog-margin-bottom: 0}:host(.slide-right) dialog{min-height:var(--wje-dialog-height);--wje-dialog-translate-from: translateX(110%);--wje-dialog-template-to: translateX(0)}:host(.small){--wje-dialog-width: 300px !important}:host(.medium){--wje-dialog-width: 500px !important}:host(.large){--wje-dialog-width: 600px !important}:host(.ex-large){--wje-dialog-width: 900px !important}dialog[open]{animation:show .5s ease normal}@keyframes show{0%{opacity:var(--wje-dialog-opacity-from, 1);transform:var(--wje-dialog-translate-from)}to{opacity:1;transform:var(--wje-dialog-translate-to)}}';
@@ -43,8 +43,8 @@ class c extends v {
43
43
  draw(e, j, r) {
44
44
  let p = document.createDocumentFragment();
45
45
  this.classList.add("fade", this.placement, r.size);
46
- let b = document.createElement("slot"), a = document.createElement("dialog");
47
- a.classList.add("modal-dialog");
46
+ let b = document.createElement("slot"), o = document.createElement("dialog");
47
+ o.classList.add("modal-dialog");
48
48
  let g = document.createElement("wje-icon");
49
49
  g.setAttribute("name", "x"), g.setAttribute("slot", "icon-only");
50
50
  let i = document.createElement("wje-button");
@@ -52,7 +52,7 @@ class c extends v {
52
52
  this.close();
53
53
  }), i.appendChild(g);
54
54
  let d = document.createElement("div");
55
- d.setAttribute("part", "header"), d.classList.add("dialog-header"), this.hasAttribute("headline") && (d.innerHTML = `<span>${this.headline}</span>`), d.appendChild(i);
55
+ d.setAttribute("part", "header"), d.classList.add("dialog-header"), this.hasAttribute("headline") && (d.innerHTML = `<span part="headline">${this.headline}</span>`), d.appendChild(i);
56
56
  let m = document.createElement("slot");
57
57
  m.setAttribute("name", "header"), d.appendChild(m);
58
58
  let n = document.createElement("div");
@@ -60,7 +60,7 @@ class c extends v {
60
60
  let l = document.createElement("div");
61
61
  l.setAttribute("part", "footer"), l.classList.add("dialog-footer"), l.innerHTML = "";
62
62
  let w = document.createElement("slot");
63
- return w.setAttribute("name", "footer"), l.appendChild(w), a.appendChild(d), a.appendChild(n), a.appendChild(l), p.appendChild(a), this.dialog = a, p;
63
+ return w.setAttribute("name", "footer"), l.appendChild(w), o.appendChild(d), o.appendChild(n), o.appendChild(l), p.appendChild(o), this.dialog = o, p;
64
64
  }
65
65
  close() {
66
66
  this.onClose();
@@ -3,8 +3,8 @@ var C = (o, l, e) => l in o ? y(o, l, { enumerable: !0, configurable: !0, writab
3
3
  var f = (o, l, e) => (C(o, typeof l != "symbol" ? l + "" : l, e), e);
4
4
  import g from "./wje-element.js";
5
5
  import { event as q } from "./wje-element.js";
6
- import { defaultStoreActions as P, store as U } from "./wje-store.js";
7
- import { b as V, w as $ } from "./router-links-FtZbFUto.js";
6
+ import { defaultStoreActions as P, store as O } from "./wje-store.js";
7
+ import { b as G, w as V } from "./router-links-FtZbFUto.js";
8
8
  import { fetchAndParseCSS as W } from "./wje-fetchAndParseCSS.js";
9
9
  import { Localizer as j } from "./localize.js";
10
10
  import { default as Q } from "./wje-accordion.js";
@@ -31,8 +31,8 @@ import { default as De } from "./wje-col.js";
31
31
  import { default as Ne } from "./wje-color-picker.js";
32
32
  import { default as qe } from "./wje-container.js";
33
33
  import { default as Pe } from "./wje-copy-button.js";
34
- import { default as Ge } from "./wje-dialog.js";
35
- import { default as $e } from "./wje-divider.js";
34
+ import { default as Ue } from "./wje-dialog.js";
35
+ import { default as Ve } from "./wje-divider.js";
36
36
  import { default as We } from "./wje-dropdown.js";
37
37
  import { default as Qe } from "./wje-file-upload.js";
38
38
  import { default as Ke } from "./wje-file-upload-item.js";
@@ -45,53 +45,54 @@ import { default as lt } from "./wje-icon-picker.js";
45
45
  import { default as ct } from "./wje-img.js";
46
46
  import { default as mt } from "./wje-img-comparer.js";
47
47
  import { default as ft } from "./wje-infinite-scroll.js";
48
- import { default as gt } from "./wje-inline-edit.js";
49
- import { default as vt } from "./wje-input.js";
50
- import { default as bt } from "./wje-input-file.js";
51
- import { default as jt } from "./wje-item.js";
52
- import { default as Ct } from "./wje-label.js";
53
- import { default as Et } from "./wje-list.js";
54
- import { default as Mt } from "./wje-main.js";
55
- import { default as Tt } from "./wje-masonry.js";
56
- import { default as Ht } from "./wje-menu.js";
57
- import { default as Dt } from "./wje-menu-button.js";
58
- import { default as Nt } from "./wje-menu-item.js";
59
- import { default as qt } from "./wje-menu-label.js";
60
- import { default as Pt } from "./wje-option.js";
61
- import { default as Gt } from "./wje-options.js";
48
+ import { default as gt } from "./wje-input.js";
49
+ import { default as vt } from "./wje-input-file.js";
50
+ import { default as bt } from "./wje-item.js";
51
+ import { default as jt } from "./wje-label.js";
52
+ import { default as Ct } from "./wje-list.js";
53
+ import { default as Et } from "./wje-main.js";
54
+ import { default as Mt } from "./wje-masonry.js";
55
+ import { default as Tt } from "./wje-menu.js";
56
+ import { default as Ht } from "./wje-menu-button.js";
57
+ import { default as Dt } from "./wje-menu-item.js";
58
+ import { default as Nt } from "./wje-menu-label.js";
59
+ import { default as qt } from "./wje-option.js";
60
+ import { default as Pt } from "./wje-options.js";
61
+ import { default as Ut } from "./wje-orgchart.js";
62
+ import { default as Vt } from "./wje-orgchart-item.js";
62
63
  import "./wje-popup.js";
63
- import { default as $t } from "./wje-progress-bar.js";
64
- import { default as Wt } from "./wje-qr-code.js";
65
- import { default as Qt } from "./wje-radio.js";
66
- import { default as Kt } from "./wje-radio-group.js";
67
- import { default as Zt } from "./wje-rate.js";
68
- import { default as er } from "./wje-relative-time.js";
69
- import { default as rr } from "./wje-reorder.js";
70
- import { default as or } from "./wje-reorder-dropzone.js";
71
- import { default as ir } from "./wje-reorder-handle.js";
72
- import { default as lr } from "./wje-reorder-item.js";
73
- import { default as cr } from "./wje-route.js";
74
- import { default as mr } from "./wje-routerx.js";
75
- import { default as fr } from "./wje-router-link.js";
76
- import { default as gr } from "./wje-router-outlet.js";
77
- import { default as vr } from "./wje-row.js";
78
- import { default as br } from "./wje-select.js";
79
- import { default as jr } from "./wje-slider.js";
80
- import { default as Cr } from "./wje-split-view.js";
81
- import { default as Er } from "./wje-status.js";
82
- import { default as Mr } from "./wje-tab.js";
83
- import { default as Tr } from "./wje-tab-group.js";
84
- import { default as Hr } from "./wje-tab-panel.js";
85
- import { default as Dr } from "./wje-textarea.js";
86
- import { default as Nr } from "./wje-thumbnail.js";
87
- import { default as qr } from "./wje-toast.js";
88
- import { default as Pr } from "./wje-toggle.js";
89
- import { default as Gr } from "./wje-toolbar.js";
90
- import { default as $r } from "./wje-toolbar-action.js";
91
- import { default as Wr } from "./wje-tooltip.js";
92
- import { default as Qr } from "./wje-visually-hidden.js";
93
- import { default as Kr } from "./wje-sliding-container.js";
94
- import { P as Zr } from "./popup.element-CWsSOxs2.js";
64
+ import { default as Wt } from "./wje-progress-bar.js";
65
+ import { default as Qt } from "./wje-qr-code.js";
66
+ import { default as Kt } from "./wje-radio.js";
67
+ import { default as Zt } from "./wje-radio-group.js";
68
+ import { default as er } from "./wje-rate.js";
69
+ import { default as rr } from "./wje-relative-time.js";
70
+ import { default as or } from "./wje-reorder.js";
71
+ import { default as ir } from "./wje-reorder-dropzone.js";
72
+ import { default as lr } from "./wje-reorder-handle.js";
73
+ import { default as cr } from "./wje-reorder-item.js";
74
+ import { default as mr } from "./wje-route.js";
75
+ import { default as fr } from "./wje-routerx.js";
76
+ import { default as gr } from "./wje-router-link.js";
77
+ import { default as vr } from "./wje-router-outlet.js";
78
+ import { default as br } from "./wje-row.js";
79
+ import { default as jr } from "./wje-select.js";
80
+ import { default as Cr } from "./wje-slider.js";
81
+ import { default as Er } from "./wje-split-view.js";
82
+ import { default as Mr } from "./wje-status.js";
83
+ import { default as Tr } from "./wje-tab.js";
84
+ import { default as Hr } from "./wje-tab-group.js";
85
+ import { default as Dr } from "./wje-tab-panel.js";
86
+ import { default as Nr } from "./wje-textarea.js";
87
+ import { default as qr } from "./wje-thumbnail.js";
88
+ import { default as Pr } from "./wje-toast.js";
89
+ import { default as Ur } from "./wje-toggle.js";
90
+ import { default as Vr } from "./wje-toolbar.js";
91
+ import { default as Wr } from "./wje-toolbar-action.js";
92
+ import { default as Qr } from "./wje-tooltip.js";
93
+ import { default as Kr } from "./wje-visually-hidden.js";
94
+ import { default as Zr } from "./wje-sliding-container.js";
95
+ import { P as ea } from "./popup.element-CWsSOxs2.js";
95
96
  const A = {
96
97
  code: "sk",
97
98
  name: "Slovak",
@@ -348,8 +349,8 @@ export {
348
349
  Ne as ColorPicker,
349
350
  qe as Container,
350
351
  Pe as CopyButton,
351
- Ge as Dialog,
352
- $e as Divider,
352
+ Ue as Dialog,
353
+ Ve as Divider,
353
354
  We as Dropdown,
354
355
  Qe as FileUpload,
355
356
  Ke as FileUploadItem,
@@ -362,62 +363,63 @@ export {
362
363
  ct as Img,
363
364
  mt as ImgComparer,
364
365
  ft as InfiniteScroll,
365
- gt as InlineEdit,
366
- vt as Input,
367
- bt as InputFile,
368
- jt as Item,
369
- Ct as Label,
370
- Et as List,
366
+ gt as Input,
367
+ vt as InputFile,
368
+ bt as Item,
369
+ jt as Label,
370
+ Ct as List,
371
371
  j as Localizer,
372
- Mt as Main,
373
- Tt as Masonry,
374
- Ht as Menu,
375
- Dt as MenuButton,
376
- Nt as MenuItem,
377
- qt as MenuLabel,
378
- Pt as Option,
379
- Gt as Options,
380
- Zr as Popup,
381
- $t as ProgressBar,
382
- Wt as QrCode,
383
- Qt as Radio,
384
- Kt as RadioGroup,
385
- Zt as Rate,
386
- er as RelativeTime,
387
- rr as Reorder,
388
- or as ReorderDropzone,
389
- ir as ReorderHandle,
390
- lr as ReorderItem,
391
- cr as Route,
392
- fr as RouterLink,
393
- gr as RouterOutlet,
394
- mr as Routerx,
395
- vr as Row,
396
- br as Select,
397
- jr as Slider,
398
- Kr as SlidingContainer,
399
- Cr as SplitView,
400
- Er as Status,
372
+ Et as Main,
373
+ Mt as Masonry,
374
+ Tt as Menu,
375
+ Ht as MenuButton,
376
+ Dt as MenuItem,
377
+ Nt as MenuLabel,
378
+ qt as Option,
379
+ Pt as Options,
380
+ Ut as Orgchart,
381
+ Vt as OrgchartItem,
382
+ ea as Popup,
383
+ Wt as ProgressBar,
384
+ Qt as QrCode,
385
+ Kt as Radio,
386
+ Zt as RadioGroup,
387
+ er as Rate,
388
+ rr as RelativeTime,
389
+ or as Reorder,
390
+ ir as ReorderDropzone,
391
+ lr as ReorderHandle,
392
+ cr as ReorderItem,
393
+ mr as Route,
394
+ gr as RouterLink,
395
+ vr as RouterOutlet,
396
+ fr as Routerx,
397
+ br as Row,
398
+ jr as Select,
399
+ Cr as Slider,
400
+ Zr as SlidingContainer,
401
+ Er as SplitView,
402
+ Mr as Status,
401
403
  v as Step,
402
404
  w as Stepper,
403
- Mr as Tab,
404
- Tr as TabGroup,
405
- Hr as TabPanel,
406
- Dr as Textarea,
407
- Nr as Thumbnail,
405
+ Tr as Tab,
406
+ Hr as TabGroup,
407
+ Dr as TabPanel,
408
+ Nr as Textarea,
409
+ qr as Thumbnail,
408
410
  b as Timeline,
409
411
  S as TimelineItem,
410
- qr as Toast,
411
- Pr as Toggle,
412
- Gr as Toolbar,
413
- $r as ToolbarAction,
414
- Wr as Tooltip,
415
- Qr as VisuallyHidden,
412
+ Pr as Toast,
413
+ Ur as Toggle,
414
+ Vr as Toolbar,
415
+ Wr as ToolbarAction,
416
+ Qr as Tooltip,
417
+ Kr as VisuallyHidden,
416
418
  g as WJElement,
417
- V as bindRouterLinks,
419
+ G as bindRouterLinks,
418
420
  P as defaultStoreActions,
419
421
  q as event,
420
422
  W as fetchAndParseCSS,
421
- U as store,
422
- $ as withRouterLinks
423
+ O as store,
424
+ V as withRouterLinks
423
425
  };
@@ -0,0 +1,49 @@
1
+ var n = Object.defineProperty;
2
+ var i = (e, t, r) => t in e ? n(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
3
+ var s = (e, t, r) => (i(e, typeof t != "symbol" ? t + "" : t, r), r);
4
+ import l from "./wje-element.js";
5
+ const m = ".orgchart-item{border-width:1px;border-style:solid;border-color:var(--wje-color-contrast-3);border-radius:var(--wje-border-radius-large);padding:.5rem}.orgchart-item p{margin:0}";
6
+ class d extends l {
7
+ /**
8
+ * Creates an instance of OrgchartItem.
9
+ *
10
+ * @constructor
11
+ */
12
+ constructor() {
13
+ super();
14
+ s(this, "className", "OrgchartItem");
15
+ }
16
+ /**
17
+ * Returns the CSS styles for the component.
18
+ *
19
+ * @static
20
+ * @returns {CSSStyleSheet}
21
+ */
22
+ static get cssStyleSheet() {
23
+ return m;
24
+ }
25
+ /**
26
+ * Sets up the attributes for the component.
27
+ */
28
+ setupAttributes() {
29
+ this.isShadowRoot = "open";
30
+ }
31
+ /**
32
+ * Draws the component.
33
+ *
34
+ * @param {Object} context - The context for drawing.
35
+ * @param {Object} store - The store for drawing.
36
+ * @param {Object} params - The parameters for drawing.
37
+ * @returns {DocumentFragment}
38
+ */
39
+ draw(r, p, u) {
40
+ let o = document.createDocumentFragment(), a = document.createElement("div");
41
+ a.setAttribute("part", "native"), a.classList.add("orgchart-item");
42
+ let c = document.createElement("slot");
43
+ return a.appendChild(c), o.appendChild(a), o;
44
+ }
45
+ }
46
+ d.define("wje-orgchart-item", d);
47
+ export {
48
+ d as default
49
+ };