@public-ui/hydrate 2.0.0-rc.0 → 2.0.0-rc.2

package/dist/index.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /*!
- Stencil Mock Doc v4.3.0 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc v4.5.0 | MIT Licensed | https://stenciljs.com
  */
 const CONTENT_REF_ID = 'r';
 const ORG_LOCATION_ID = 'o';
@@ -1626,6 +1626,14 @@ class MockNodeList {
   }
 }
 class MockElement extends MockNode {
+  attachInternals() {
+    return new Proxy({}, {
+      get: function (_target, prop, _receiver) {
+        console.error(`NOTE: Property ${String(prop)} was accessed on ElementInternals, but this property is not implemented.
+Testing components with ElementInternals is fully supported in e2e tests.`);
+      },
+    });
+  }
   constructor(ownerDocument, nodeName) {
     super(ownerDocument, 1 /* NODE_TYPES.ELEMENT_NODE */, typeof nodeName === 'string' ? nodeName : null, null);
     this.namespaceURI = null;
@@ -4953,7 +4961,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'kolibri';
-const BUILD = /* kolibri */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: true, observeAttribute: true, patchPseudoShadowDom: false, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* kolibri */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: true, observeAttribute: true, patchPseudoShadowDom: false, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -5756,7 +5764,8 @@ class Translator extends EventEmitter {
             usedKey: key,
             exactUsedKey: key,
             usedLng: lng,
-            usedNS: namespace
+            usedNS: namespace,
+            usedParams: this.getUsedParamsDetails(options)
           };
         }
         return `${namespace}${nsSeparator}${key}`;
@@ -5767,7 +5776,8 @@ class Translator extends EventEmitter {
           usedKey: key,
           exactUsedKey: key,
           usedLng: lng,
-          usedNS: namespace
+          usedNS: namespace,
+          usedParams: this.getUsedParamsDetails(options)
         };
       }
       return key;
@@ -5792,6 +5802,7 @@ class Translator extends EventEmitter {
         }) : `key '${key} (${this.language})' returned an object instead of string.`;
         if (returnDetails) {
           resolved.res = r;
+          resolved.usedParams = this.getUsedParamsDetails(options);
           return resolved;
         }
         return r;
@@ -5892,6 +5903,7 @@ class Translator extends EventEmitter {
     }
     if (returnDetails) {
       resolved.res = res;
+      resolved.usedParams = this.getUsedParamsDetails(options);
       return resolved;
     }
     return res;
@@ -6041,6 +6053,30 @@ class Translator extends EventEmitter {
     if (this.i18nFormat && this.i18nFormat.getResource) return this.i18nFormat.getResource(code, ns, key, options);
     return this.resourceStore.getResource(code, ns, key, options);
   }
+  getUsedParamsDetails() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const optionsKeys = ['defaultValue', 'ordinal', 'context', 'replace', 'lng', 'lngs', 'fallbackLng', 'ns', 'keySeparator', 'nsSeparator', 'returnObjects', 'returnDetails', 'joinArrays', 'postProcess', 'interpolation'];
+    const useOptionsReplaceForData = options.replace && typeof options.replace !== 'string';
+    let data = useOptionsReplaceForData ? options.replace : options;
+    if (useOptionsReplaceForData && typeof options.count !== 'undefined') {
+      data.count = options.count;
+    }
+    if (this.options.interpolation.defaultVariables) {
+      data = {
+        ...this.options.interpolation.defaultVariables,
+        ...data
+      };
+    }
+    if (!useOptionsReplaceForData) {
+      data = {
+        ...data
+      };
+      for (const key of optionsKeys) {
+        delete data[key];
+      }
+    }
+    return data;
+  }
   static hasDefaultValue(options) {
     const prefix = 'defaultValue';
     for (const option in options) {
@@ -7810,7 +7846,7 @@ const initKoliBri = () => {
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
 	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.0
+	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.2
 		`, {
       forceLog: true,
     });
@@ -8279,36 +8315,42 @@ const createElm = (e, t, o, n) => {
  isSvgMode && "svg" === l && (isSvgMode = !1));
 }, updateFallbackSlotVisibility = e => {
  const t = e.childNodes;
- let o, n, s, l, a, r;
- for (n = 0, s = t.length; n < s; n++) if (o = t[n], 1 === o.nodeType) {
-  if (o["s-sr"]) for (a = o["s-sn"], o.hidden = !1, l = 0; l < s; l++) if (r = t[l].nodeType, 
-  t[l]["s-hn"] !== o["s-hn"] || "" !== a) {
-   if (1 === r && a === t[l].getAttribute("slot")) {
-    o.hidden = !0;
+ for (const e of t) if (1 === e.nodeType) {
+  if (e["s-sr"]) {
+   const o = e["s-sn"];
+   e.hidden = !1;
+   for (const n of t) if (n["s-hn"] !== e["s-hn"] || "" !== o) {
+    if (1 === n.nodeType && o === n.getAttribute("slot")) {
+     e.hidden = !0;
+     break;
+    }
+   } else if (1 === n.nodeType || 3 === n.nodeType && "" !== n.textContent.trim()) {
+    e.hidden = !0;
     break;
    }
-  } else if (1 === r || 3 === r && "" !== t[l].textContent.trim()) {
-   o.hidden = !0;
-   break;
   }
-  updateFallbackSlotVisibility(o);
+  updateFallbackSlotVisibility(e);
  }
-}, relocateNodes = [], relocateSlotContent = e => {
- let t, o, n, s, l, a, r = 0;
- const i = e.childNodes, d = i.length;
- for (;r < d; r++) {
-  if (t = i[r], t["s-sr"] && (o = t["s-cr"]) && o.parentNode) for (n = o.parentNode.childNodes, 
-  s = t["s-sn"], a = n.length - 1; a >= 0; a--) o = n[a], o["s-cn"] || o["s-nr"] || o["s-hn"] === t["s-hn"] || (isNodeLocatedInSlot(o, s) ? (l = relocateNodes.find((e => e.$nodeToRelocate$ === o)), 
-  checkSlotFallbackVisibility = !0, o["s-sn"] = o["s-sn"] || s, l ? l.$slotRefNode$ = t : relocateNodes.push({
-   $slotRefNode$: t,
-   $nodeToRelocate$: o
-  }), o["s-sr"] && relocateNodes.map((e => {
-   isNodeLocatedInSlot(e.$nodeToRelocate$, o["s-sn"]) && (l = relocateNodes.find((e => e.$nodeToRelocate$ === o)), 
-   l && !e.$slotRefNode$ && (e.$slotRefNode$ = l.$slotRefNode$));
-  }))) : relocateNodes.some((e => e.$nodeToRelocate$ === o)) || relocateNodes.push({
-   $nodeToRelocate$: o
-  }));
-  1 === t.nodeType && relocateSlotContent(t);
+}, relocateNodes = [], markSlotContentForRelocation = e => {
+ let t, o, n;
+ for (const s of e.childNodes) {
+  if (s["s-sr"] && (t = s["s-cr"]) && t.parentNode) {
+   o = t.parentNode.childNodes;
+   const e = s["s-sn"];
+   for (n = o.length - 1; n >= 0; n--) if (t = o[n], !t["s-cn"] && !t["s-nr"] && t["s-hn"] !== s["s-hn"]) if (isNodeLocatedInSlot(t, e)) {
+    let o = relocateNodes.find((e => e.$nodeToRelocate$ === t));
+    checkSlotFallbackVisibility = !0, t["s-sn"] = t["s-sn"] || e, o ? o.$slotRefNode$ = s : relocateNodes.push({
+     $slotRefNode$: s,
+     $nodeToRelocate$: t
+    }), t["s-sr"] && relocateNodes.map((e => {
+     isNodeLocatedInSlot(e.$nodeToRelocate$, t["s-sn"]) && (o = relocateNodes.find((e => e.$nodeToRelocate$ === t)), 
+     o && !e.$slotRefNode$ && (e.$slotRefNode$ = o.$slotRefNode$));
+    }));
+   } else relocateNodes.some((e => e.$nodeToRelocate$ === t)) || relocateNodes.push({
+    $nodeToRelocate$: t
+   });
+  }
+  1 === s.nodeType && markSlotContentForRelocation(s);
  }
 }, isNodeLocatedInSlot = (e, t) => 1 === e.nodeType ? null === e.getAttribute("slot") && "" === t || e.getAttribute("slot") === t : e["s-sn"] === t || "" === t, nullifyVNodeRefs = e => {
  (e.$attrs$ && e.$attrs$.ref && e.$attrs$.ref(null), e.$children$ && e.$children$.map(nullifyVNodeRefs));
@@ -8323,7 +8365,7 @@ const createElm = (e, t, o, n) => {
  BUILD.slotRelocation) {
   if (plt.$flags$ |= 1, checkSlotRelocate) {
    let e, t, o, n, s, l;
-   relocateSlotContent(a.$elm$);
+   markSlotContentForRelocation(a.$elm$);
    let r = 0;
    for (;r < relocateNodes.length; r++) e = relocateNodes[r], t = e.$nodeToRelocate$, 
    t["s-ol"] || (o = originalLocationDebugNode(t) , 
@@ -8387,9 +8429,9 @@ const callRender = (e, t, o, n) => {
  (safeCall(s, "componentDidRender"), 
  BUILD.isDev ), 64 & e.$flags$ ? (n()) : (e.$flags$ |= 64, addHydratedFlag(o), 
  (safeCall(s, "componentDidLoad"), 
- BUILD.isDev ), n(), (e.$onReadyResolve$(o), l || appDidLoad())), e.$onInstanceResolve$(o), (e.$onRenderResolve$ && (e.$onRenderResolve$(), 
- e.$onRenderResolve$ = void 0), 512 & e.$flags$ && nextTick((() => scheduleUpdate(e, !1))), 
- e.$flags$ &= -517);
+ BUILD.isDev ), n(), (e.$onReadyResolve$(o), l || appDidLoad())), e.$onInstanceResolve$(o), 
+ (e.$onRenderResolve$ && (e.$onRenderResolve$(), e.$onRenderResolve$ = void 0), 
+ 512 & e.$flags$ && nextTick((() => scheduleUpdate(e, !1))), e.$flags$ &= -517);
 }, appDidLoad = e => {
  addHydratedFlag(doc.documentElement), nextTick((() => emitEvent(win, "appload", {
   detail: {
@@ -8477,10 +8519,11 @@ const callRender = (e, t, o, n) => {
   }
  }
  return e;
-}, initializeComponent = async (e, t, o, n, s) => {
+}, initializeComponent = async (e, t, o, n) => {
+ let s;
  if (0 == (32 & t.$flags$)) {
   if (t.$flags$ |= 32, BUILD.lazyLoad ) {
-   if ((s = loadModule(o)).then) {
+   if (s = loadModule(o), s.then) {
     const e = (() => {});
     s = await s, e();
    }
@@ -10232,6 +10275,8 @@ var locale_de = {
   'page-current': 'Seite {{page}}',
   'page-selected': 'Seite {{page}} ist ausgewählt',
   'page-per-site': '{{entries}} Einträge pro Seite',
+  'nav-maximize': 'Navigation maximieren',
+  'nav-minimize': 'Navigation minimieren',
   'logo-description': 'Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}',
   'open-link-in-tab': 'Der Link wird in einem neuen Tab geöffnet.',
   'kolibri-logo': 'Logo von KoliBri',
@@ -10267,6 +10312,8 @@ var locale_en = {
   'page-current': 'Page {{page}}',
   'page-selected': 'Page {{page}} is selected',
   'page-per-site': '{{entries}} entries per page',
+  'nav-maximize': 'Maximize navigation',
+  'nav-minimize': 'Minimize navigation',
   'logo-description': 'Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}',
   'open-link-in-tab': 'The link will open in a new tab.',
   'kolibri-logo': 'KoliBri logo',
@@ -11373,7 +11420,7 @@ class KolButtonLinkTextSwitch {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.button = (button) => hAsync("kol-button-wc", Object.assign({}, button));
-    this.link = (link) => hAsync("kol-link-wc", Object.assign({}, link));
+    this.link = (link) => hAsync("kol-link-wc", Object.assign({ _label: link._href }, link));
     this.text = (text) => hAsync("kol-span-wc", Object.assign({}, text));
     this._link = undefined;
   }
@@ -12102,7 +12149,7 @@ class DetailsAnimationController {
   }
 }
 
-const defaultStyleCss$z = "/*!@:host*/.sc-kol-details-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-details-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-details-default,button.sc-kol-details-default:not([role='link']),kol-input.sc-kol-details-default .input.sc-kol-details-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-details-default,button.sc-kol-details-default,h1.sc-kol-details-default,h2.sc-kol-details-default,h3.sc-kol-details-default,h4.sc-kol-details-default,h5.sc-kol-details-default,h6.sc-kol-details-default,input.sc-kol-details-default,option.sc-kol-details-default,select.sc-kol-details-default,textarea.sc-kol-details-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-details-default:is(a,button).sc-kol-details-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-details-default-h{max-width:100%}/*!@**/*.sc-kol-details-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-details-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-details-default>span.sc-kol-details-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-details-default,button.sc-kol-details-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-details-default,input.sc-kol-details-default,option.sc-kol-details-default,select.sc-kol-details-default,textarea.sc-kol-details-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-details-default>kol-span-wc.sc-kol-details-default>span.sc-kol-details-default>span.sc-kol-details-default{display:none}/*!@:host*/.sc-kol-details-default-h{display:block}/*!@details*/details.sc-kol-details-default{display:grid}/*!@details > summary*/details.sc-kol-details-default>summary.sc-kol-details-default{cursor:pointer;display:flex;place-items:center}/*!@details > summary > span*/details.sc-kol-details-default>summary.sc-kol-details-default>span.sc-kol-details-default{border-bottom-color:grey;border-bottom-style:solid}/*!@details > summary:focus > span,\ndetails > summary:hover > span,\ndetails[open] > summary > span*/details.sc-kol-details-default>summary.sc-kol-details-default:focus>span.sc-kol-details-default,details.sc-kol-details-default>summary.sc-kol-details-default:hover>span.sc-kol-details-default,details[open].sc-kol-details-default>summary.sc-kol-details-default>span.sc-kol-details-default{border-bottom-color:#000}/*!@details > kol-indented-text*/details.sc-kol-details-default>kol-indented-text.sc-kol-details-default{margin:0.25em 0 0 0.5em}";
+const defaultStyleCss$z = "/*!@:host*/.sc-kol-details-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-details-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-details-default,button.sc-kol-details-default:not([role='link']),kol-input.sc-kol-details-default .input.sc-kol-details-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-details-default,button.sc-kol-details-default,h1.sc-kol-details-default,h2.sc-kol-details-default,h3.sc-kol-details-default,h4.sc-kol-details-default,h5.sc-kol-details-default,h6.sc-kol-details-default,input.sc-kol-details-default,option.sc-kol-details-default,select.sc-kol-details-default,textarea.sc-kol-details-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-details-default:is(a,button).sc-kol-details-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-details-default-h{max-width:100%}/*!@**/*.sc-kol-details-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-details-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-details-default>span.sc-kol-details-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-details-default,button.sc-kol-details-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-details-default,input.sc-kol-details-default,option.sc-kol-details-default,select.sc-kol-details-default,textarea.sc-kol-details-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-details-default>kol-span-wc.sc-kol-details-default>span.sc-kol-details-default>span.sc-kol-details-default{display:none}/*!@:host*/.sc-kol-details-default-h{display:block}/*!@details*/details.sc-kol-details-default{display:grid}/*!@details > summary*/details.sc-kol-details-default>summary.sc-kol-details-default{cursor:pointer;display:flex;place-items:center}/*!@details > summary > span*/details.sc-kol-details-default>summary.sc-kol-details-default>span.sc-kol-details-default{border-bottom-color:grey;border-bottom-style:solid}/*!@details > summary:focus > span,\ndetails > summary:hover > span,\ndetails[open] > summary > span*/details.sc-kol-details-default>summary.sc-kol-details-default:focus>span.sc-kol-details-default,details.sc-kol-details-default>summary.sc-kol-details-default:hover>span.sc-kol-details-default,details[open].sc-kol-details-default>summary.sc-kol-details-default>span.sc-kol-details-default{border-bottom-color:#000}/*!@details > kol-indented-text*/details.sc-kol-details-default>kol-indented-text.sc-kol-details-default{margin:0.25em 0 0 0.5em}/*!@.icon.is-open::part(icon)*/.icon.is-open.sc-kol-details-default::part(icon){transform:rotate(90deg)}";
 
 class KolDetails {
   constructor(hostRef) {
@@ -12132,7 +12179,7 @@ class KolDetails {
   render() {
     return (hAsync(Host, null, hAsync("details", { ref: (el) => {
         this.detailsElement = el;
-      }, onToggle: this.handleToggle }, hAsync("summary", { ref: (element) => (this.summaryElement = element) }, this.state._open ? hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-down" }) : hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-right" }), hAsync("span", null, this.state._label)), hAsync("div", { class: "content", ref: (element) => (this.contentElement = element) }, hAsync("kol-indented-text", null, hAsync("slot", null))))));
+      }, onToggle: this.handleToggle }, hAsync("summary", { ref: (element) => (this.summaryElement = element) }, hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), hAsync("span", null, this.state._label)), hAsync("div", { class: "content", ref: (element) => (this.contentElement = element) }, hAsync("kol-indented-text", null, hAsync("slot", null))))));
   }
   validateLabel(value) {
     validateLabel(this, value);
@@ -16461,6 +16508,10 @@ const validateCollapsible = (component, value) => {
   watchBoolean(component, '_collapsible', value);
 };
 
+const validateHasCompactButton = (component, value) => {
+  watchBoolean(component, '_hasCompactButton', value);
+};
+
 const defaultStyleCss$e = "/*!@:host*/.sc-kol-nav-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-nav-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-nav-default,button.sc-kol-nav-default:not([role='link']),kol-input.sc-kol-nav-default .input.sc-kol-nav-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-nav-default,button.sc-kol-nav-default,h1.sc-kol-nav-default,h2.sc-kol-nav-default,h3.sc-kol-nav-default,h4.sc-kol-nav-default,h5.sc-kol-nav-default,h6.sc-kol-nav-default,input.sc-kol-nav-default,option.sc-kol-nav-default,select.sc-kol-nav-default,textarea.sc-kol-nav-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-nav-default:is(a,button).sc-kol-nav-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-nav-default-h{max-width:100%}/*!@**/*.sc-kol-nav-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-nav-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-nav-default>span.sc-kol-nav-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-nav-default,button.sc-kol-nav-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-nav-default,input.sc-kol-nav-default,option.sc-kol-nav-default,select.sc-kol-nav-default,textarea.sc-kol-nav-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-nav-default>kol-span-wc.sc-kol-nav-default>span.sc-kol-nav-default>span.sc-kol-nav-default{display:none}/*!@:host > div*/.sc-kol-nav-default-h>div.sc-kol-nav-default{display:grid;place-items:center}/*!@nav*/nav.sc-kol-nav-default{width:100%}/*!@.list*/.list.sc-kol-nav-default{display:flex;list-style:none;margin:0;padding:0}/*!@.list.vertical*/.list.vertical.sc-kol-nav-default{flex-direction:column}/*!@.entry*/.entry.sc-kol-nav-default{display:flex}/*!@.entry kol-button-wc:first-child,\n.entry kol-link-wc,\n.entry kol-span-wc*/.entry.sc-kol-nav-default kol-button-wc.sc-kol-nav-default:first-child,.entry.sc-kol-nav-default kol-link-wc.sc-kol-nav-default,.entry.sc-kol-nav-default kol-span-wc.sc-kol-nav-default{flex-grow:1}/*!@.entry kol-span-wc*/.entry.sc-kol-nav-default kol-span-wc.sc-kol-nav-default{justify-items:start}";
 
 class KolNav {
@@ -16483,6 +16534,7 @@ class KolNav {
     };
     this._ariaCurrentValue = false;
     this._collapsible = true;
+    this._hasCompactButton = false;
     this._hideLabel = false;
     this._label = undefined;
     this._links = undefined;
@@ -16490,6 +16542,7 @@ class KolNav {
     this.state = {
       _ariaCurrentValue: false,
       _collapsible: true,
+      _hasCompactButton: false,
       _hideLabel: false,
       _label: '…',
       _links: [],
@@ -16513,12 +16566,21 @@ class KolNav {
       }, key: index }, this.entry(collapsible, hideLabel, hasChildren, link, active), expanded ? (hAsync(this.linkList, { collapsible: collapsible, hideLabel: hideLabel, deep: deep + 1, links: link._children || [], orientation: orientation })) : ('')));
   }
   render() {
+    let hasCompactButton = this.state._hasCompactButton;
+    if (this.state._orientation === 'horizontal' && this.state._hasCompactButton === true) {
+      hasCompactButton = false;
+      devWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);
+    }
     const collapsible = this.state._collapsible === true;
     const hideLabel = this.state._hideLabel === true;
     const orientation = this.state._orientation;
     return (hAsync(Host, null, hAsync("div", { class: {
         [orientation]: true,
-      } }, hAsync("nav", { "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })))));
+      } }, hAsync("nav", { "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { class: "compact" }, hAsync("kol-button", { _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
+        onClick: () => {
+          this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
+        },
+      }, _tooltipAlign: "right", _variant: "ghost" }))))));
   }
   validateAriaCurrentValue(value) {
     watchValidator(this, '_ariaCurrentValue', (value) => value === true || value === 'date' || value === 'location' || value === 'page' || value === 'step' || value === 'time', new Set(['boolean', 'String {data, location, page, step, time}']), value);
@@ -16526,6 +16588,9 @@ class KolNav {
   validateCollapsible(value) {
     validateCollapsible(this, value);
   }
+  validateHasCompactButton(value) {
+    validateHasCompactButton(this, value);
+  }
   validateHideLabel(value) {
     validateHideLabel(this, value);
   }
@@ -16550,6 +16615,7 @@ class KolNav {
     this.validateAriaCurrentValue(this._ariaCurrentValue);
     this.validateCollapsible(this._collapsible);
     this.validateHideLabel(this._hideLabel);
+    this.validateHasCompactButton(this._hasCompactButton);
     this.validateLabel(this._label, undefined, true);
     this.validateLinks(this._links);
     this.validateOrientation(this._orientation);
@@ -16560,6 +16626,7 @@ class KolNav {
   static get watchers() { return {
     "_ariaCurrentValue": ["validateAriaCurrentValue"],
     "_collapsible": ["validateCollapsible"],
+    "_hasCompactButton": ["validateHasCompactButton"],
     "_hideLabel": ["validateHideLabel"],
     "_label": ["validateLabel"],
     "_links": ["validateLinks"],
@@ -16574,6 +16641,7 @@ class KolNav {
     "$members$": {
       "_ariaCurrentValue": [8, "_aria-current-value"],
       "_collapsible": [4],
+      "_hasCompactButton": [4, "_has-compact-button"],
       "_hideLabel": [4, "_hide-label"],
       "_label": [1],
       "_links": [1],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.2",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": "https://github.com/public-ui/kolibri",
@@ -42,11 +42,11 @@
     "hydrate"
   ],
   "devDependencies": {
-    "@public-ui/components": "2.0.0-rc.0",
+    "@public-ui/components": "2.0.0-rc.2",
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "@public-ui/components": "2.0.0-rc.0"
+    "@public-ui/components": "2.0.0-rc.2"
   },
   "sideEffects": false,
   "type": "commonjs",