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

package/dist/index.js

@@ -7846,7 +7846,7 @@ const initKoliBri = () => {
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
 	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.1
+	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.2
 		`, {
       forceLog: true,
     });
@@ -10275,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',
@@ -10310,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',
@@ -11416,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;
   }
@@ -12145,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) {
@@ -12175,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);
@@ -16504,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 {
@@ -16526,6 +16534,7 @@ class KolNav {
     };
     this._ariaCurrentValue = false;
     this._collapsible = true;
+    this._hasCompactButton = false;
     this._hideLabel = false;
     this._label = undefined;
     this._links = undefined;
@@ -16533,6 +16542,7 @@ class KolNav {
     this.state = {
       _ariaCurrentValue: false,
       _collapsible: true,
+      _hasCompactButton: false,
       _hideLabel: false,
       _label: '…',
       _links: [],
@@ -16556,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);
@@ -16569,6 +16588,9 @@ class KolNav {
   validateCollapsible(value) {
     validateCollapsible(this, value);
   }
+  validateHasCompactButton(value) {
+    validateHasCompactButton(this, value);
+  }
   validateHideLabel(value) {
     validateHideLabel(this, value);
   }
@@ -16593,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);
@@ -16603,6 +16626,7 @@ class KolNav {
   static get watchers() { return {
     "_ariaCurrentValue": ["validateAriaCurrentValue"],
     "_collapsible": ["validateCollapsible"],
+    "_hasCompactButton": ["validateHasCompactButton"],
     "_hideLabel": ["validateHideLabel"],
     "_label": ["validateLabel"],
     "_links": ["validateLinks"],
@@ -16617,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.1",
+  "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.1",
+    "@public-ui/components": "2.0.0-rc.2",
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "@public-ui/components": "2.0.0-rc.1"
+    "@public-ui/components": "2.0.0-rc.2"
   },
   "sideEffects": false,
   "type": "commonjs",