https://afsprakenstelsel.twiin.nl/__theme/b_8ca5a7d7-80f3-41c8-bea…l-sites-help-center-theme/51/breadcrumbs.js

1var U = Object.defineProperty;
2var y = (s) => {
3  throw TypeError(s);
4};
5var D = (s, i, e) => i in s ? U(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e;
6var w = (s, i, e) => D(s, typeof i != "symbol" ? i + "" : i, e), x = (s, i, e) => i.has(s) || y("Cannot " + e);
7var t = (s, i, e) => (x(s, i, "read from private field"), e ? e.call(s) : i.get(s)), u = (s, i, e) => i.has(s) ? y("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), d = (s, i, e, n) => (x(s, i, "write to private field"), n ? n.call(s, e) : i.set(s, e), e), h = (s, i, e) => (x(s, i, "access private method"), e);
8const E = (s) => s !== null && s.trim() !== "" && !Number.isNaN(Number(s));
9var f;
10class H extends EventTarget {
11  /**
12   * @param {T} value */
13  constructor(e) {
14    super();
15    /** @type {T} */
16    u(this, f);
17    d(this, f, e);
18  }
19  /** @returns {T} */
20  get value() {
21    return t(this, f);
22  }
23  /** @param {T} newValue */
24  set value(e) {
25    d(this, f, e), this.dispatchEvent(new CustomEvent("change", {
26      detail: e
27    }));
28  }
29}
30f = new WeakMap();
31var v, c, o, p, m, r, N, k, A, B, C, q, L, M, T;
32class I extends HTMLElement {
33  constructor() {
34    super();
35    u(this, r);
36    u(this, v, {
37      maxItems: 3,
38      itemsBeforeCollapse: 1
39    });
40    /** @type {Signal<Array<BreadcrumbsNode>>} */
41    u(this, c);
42    /** @type {HTMLSelectElement | null} */
43    u(this, o, null);
44    /** @type {MediaQueryList} */
45    u(this, p);
46    /** @type {AbortController | null} */
47    u(this, m, null);
48    d(this, c, new H([])), d(this, p, self.matchMedia("(width <= 768px)"));
49  }
50  connectedCallback() {
51    var n;
52    const e = Array.from(((n = this.querySelector(":scope :is(ul, ol)")) == null ? void 0 : n.children) ?? []);
53    t(this, c).value = h(this, r, C).call(this, h(this, r, B).call(this, e)), t(this, c).value.length > this.maxItems && h(this, r, q).call(this), h(this, r, k).call(this);
54  }
55  disconnectedCallback() {
56    h(this, r, A).call(this);
57  }
58  attributeChangedCallback(e, n, l) {
59    l !== n && E(l) && !t(this, p).matches && (t(this, c).value = h(this, r, C).call(this, t(this, c).value));
60  }
61  get maxItems() {
62    if (t(this, p).matches)
63      return 2;
64    const e = this.getAttribute("maxitems");
65    return E(e) && Number(e) > 0 ? Number(e) : t(this, v).maxItems;
66  }
67  get itemsBeforeCollapse() {
68    if (t(this, p).matches)
69      return 1;
70    const e = this.getAttribute("itemsbeforecollapse");
71    return E(e) && Number(e) >= 0 ? Number(e) : t(this, v).itemsBeforeCollapse;
72  }
73}
74v = new WeakMap(), c = new WeakMap(), o = new WeakMap(), p = new WeakMap(), m = new WeakMap(), r = new WeakSet(), N = function() {
75  const e = crypto.randomUUID();
76  return `
77			<li data-collapsed="">
78				<i18n-message class="sr-only" i18nkey="breadcrumbs.more.label" attribute="value" targetelement="${e}"></i18n-message>
79				<theme-tooltip id="${e}" value="More options">
80					<div class="picker picker--icon-only">
81						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" data-component="icon" class="icon icon-more_horiz picker-icon picker-prefix" role="img" aria-hidden="true">
82							<path d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z"/>
83						</svg>
84						<label for="breadcrumb-more-options" class="sr-only">
85							<i18n-message i18nkey="breadcrumbs.more.label"></i18n-message>
86						</label>
87						<select id="breadcrumb-more-options"></select>
88					</div>
89				</theme-tooltip>
90			</li>
91		`;
92}, k = function() {
93  var e;
94  (t(this, m) === null || (e = t(this, m)) != null && e.signal.aborted) && d(this, m, new AbortController()), t(this, p).addEventListener("change", () => {
95    t(this, c).value = h(this, r, C).call(this, t(this, c).value);
96  }, {
97    signal: t(this, m).signal
98  }), t(this, c).addEventListener("change", () => {
99    h(this, r, q).call(this);
100  }, {
101    signal: t(this, m).signal
102  });
103}, A = function() {
104  var e;
105  (t(this, m) !== null || !((e = t(this, m)) != null && e.signal.aborted)) && t(this, m).abort();
106}, /**
107 * @param {Array<HTMLElement>} elements
108 * @returns {Array<BreadcrumbsNode>}
109 */
110B = function(e) {
111  return e.map((n) => {
112    var l;
113    return {
114      textContent: n.textContent,
115      href: (
116        /** @type {HTMLAnchorElement} */
117        (l = n.querySelector(":scope a")) == null ? void 0 : l.href
118      ),
119      element: n,
120      visible: !0
121    };
122  });
123}, /**
124 * @param {Array<BreadcrumbsNode>} items
125 * @returns {Array<BreadcrumbsNode>}
126 */
127C = function(e) {
128  const n = (l, a) => a <= this.maxItems || l < this.itemsBeforeCollapse || l === a - 1;
129  return e.map((l, a) => (l.visible = n(a, e.length), l));
130}, q = function() {
131  const e = t(this, c).value;
132  h(this, r, L).call(this, e), t(this, o) ? h(this, r, T).call(this, e) : h(this, r, M).call(this, e);
133}, /** @param {Array<BreadcrumbsNode>} nodes */
134L = function(e) {
135  e.forEach(({
136    element: n,
137    visible: l
138  }) => {
139    n.toggleAttribute("hidden", !l);
140  });
141}, /** @param {Array<BreadcrumbsNode>} nodes */
142M = function(e) {
143  var b;
144  const n = document.createElement("template");
145  n.innerHTML = t(this, r, N);
146  const l = (
147    /** @type {DocumentFragment} */
148    n.content.cloneNode(!0)
149  );
150  if (d(this, o, l.querySelector("select")), !t(this, o))
151    return;
152  const a = document.createElement("option");
153  a.textContent = "…", a.disabled = !0, a.selected = !0, t(this, o).appendChild(a), t(this, o).addEventListener("change", (g) => {
154    const S = new URL(g.target.value, self.location.origin);
155    self.location.assign(S);
156  }), l.firstElementChild && ((b = e.at(this.itemsBeforeCollapse)) == null || b.element.insertAdjacentElement("beforebegin", l.firstElementChild)), h(this, r, T).call(this, e);
157}, /** @param {Array<BreadcrumbsNode>} nodes */
158T = function(e) {
159  var l;
160  if (!t(this, o))
161    return;
162  const n = t(this, o).closest("[data-collapsed]");
163  if (n) {
164    if (e.every(({
165      visible: a
166    }) => a)) {
167      n.remove(), d(this, o, null);
168      return;
169    }
170    for (; t(this, o).children.length > 1; )
171      t(this, o).lastChild && t(this, o).removeChild(t(this, o).lastChild);
172    e.forEach((a) => {
173      var b;
174      if (!a.visible) {
175        const g = document.createElement("option");
176        g.textContent = a.textContent, a.href && (g.value = a.href), (b = t(this, o)) == null || b.appendChild(g);
177      }
178    }), (l = e.at(this.itemsBeforeCollapse)) == null || l.element.before(n);
179  }
180}, w(I, "observedAttributes", ["maxitems", "itemsbeforecollapse"]);
181customElements.define("theme-breadcrumbs", I);