@odx/foundation 0.1.0-alpha.4 → 0.1.0-alpha.5

package/dist/components/navigation-item/navigation-item.component.d.ts

@@ -8,7 +8,6 @@ declare global {
 }
 export declare class OdxNavigationItemComponent extends BaseButtonComponent {
     size?: NavigationItemSize | null;
-    collapsed: boolean;
     selected: boolean;
     protected renderContent(): TemplateResult;
 }

package/dist/components/navigation-item/navigation-item.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-item.component.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-item.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;AAED,qBACa,0BAA2B,SAAQ,mBAAmB;IAEjE,IAAI,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAGjC,SAAS,UAAS;IAGlB,QAAQ,UAAS;cAEE,aAAa,IAAI,cAAc;CAQnD"}
+{"version":3,"file":"navigation-item.component.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-item.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;AAED,qBACa,0BAA2B,SAAQ,mBAAmB;IAEjE,IAAI,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAGjC,QAAQ,UAAS;cAEE,aAAa,IAAI,cAAc;CAOnD"}

package/dist/components/rail-navigation/rail-navigation.component.d.ts

@@ -1,12 +1,16 @@
 import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
+import { OdxNavigationItemComponent } from '../navigation-item';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-rail-navigation': OdxRailNavigationComponent;
     }
 }
 export declare class OdxRailNavigationComponent extends CustomElement {
+    #private;
+    protected navigationItems: OdxNavigationItemComponent[];
     collapsed: boolean;
     protected render(): TemplateResult;
+    getItems(): OdxNavigationItemComponent[];
 }
 //# sourceMappingURL=rail-navigation.component.d.ts.map

package/dist/components/rail-navigation/rail-navigation.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rail-navigation.component.d.ts","sourceRoot":"","sources":["../../../src/components/rail-navigation/rail-navigation.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;AAED,qBACa,0BAA2B,SAAQ,aAAa;IAE3D,SAAS,UAAS;cAEC,MAAM,IAAI,cAAc;CAQ5C"}
+{"version":3,"file":"rail-navigation.component.d.ts","sourceRoot":"","sources":["../../../src/components/rail-navigation/rail-navigation.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAsB,0BAA0B,EAAE,MAAM,oBAAoB,CAAC;AAGpF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;AAED,qBACa,0BAA2B,SAAQ,aAAa;;IAE3D,SAAS,CAAC,eAAe,EAAG,0BAA0B,EAAE,CAAC;IAGzD,SAAS,UAAS;cAEC,MAAM,IAAI,cAAc;IAU3C,QAAQ,IAAI,0BAA0B,EAAE;CAezC"}

package/dist/components.js

@@ -135,7 +135,7 @@ OdxLinkComponent = __decorateClass$q([
 const styles$i = ":host{display:contents}:host([aria-hidden=\"true\"]){display:none}:host::part(separator){color:var(--odx-color-foreground-muted)}";
 
 var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __typeError$5 = (msg) => {
+var __typeError$6 = (msg) => {
   throw TypeError(msg);
 };
 var __decorateClass$p = (decorators, target, key, kind) => {
@@ -145,14 +145,14 @@ var __decorateClass$p = (decorators, target, key, kind) => {
       result = (decorator(result)) || result;
   return result;
 };
-var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
-var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$4 = (obj, member, method) => (__accessCheck$5(obj, member, "access private method"), method);
+var __accessCheck$6 = (obj, member, msg) => member.has(obj) || __typeError$6("Cannot " + msg);
+var __privateAdd$6 = (obj, member, value) => member.has(obj) ? __typeError$6("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod$4 = (obj, member, method) => (__accessCheck$6(obj, member, "access private method"), method);
 var _OdxBreadcrumbItemComponent_instances, updateVisibility_fn;
 let OdxBreadcrumbItemComponent = class extends CustomElement {
   constructor() {
     super(...arguments);
-    __privateAdd$5(this, _OdxBreadcrumbItemComponent_instances);
+    __privateAdd$6(this, _OdxBreadcrumbItemComponent_instances);
   }
   get interactiveElement() {
     return this.querySelector(OdxLinkComponent.selector);
@@ -186,7 +186,7 @@ const styles$h = ":host{--_breadcrumb-gap: var(--odx-size-37);display:flex;colum
 
 var __defProp$k = Object.defineProperty;
 var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __typeError$4 = (msg) => {
+var __typeError$5 = (msg) => {
   throw TypeError(msg);
 };
 var __decorateClass$o = (decorators, target, key, kind) => {
@@ -197,14 +197,14 @@ var __decorateClass$o = (decorators, target, key, kind) => {
   if (kind && result) __defProp$k(target, key, result);
   return result;
 };
-var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
-var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$3 = (obj, member, method) => (__accessCheck$4(obj, member, "access private method"), method);
+var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
+var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod$3 = (obj, member, method) => (__accessCheck$5(obj, member, "access private method"), method);
 var _OdxBreadcrumbComponent_instances, updateContext_fn;
 let OdxBreadcrumbComponent = class extends CustomElement {
   constructor() {
     super(...arguments);
-    __privateAdd$4(this, _OdxBreadcrumbComponent_instances);
+    __privateAdd$5(this, _OdxBreadcrumbComponent_instances);
     this.max = 5;
   }
   render() {
@@ -299,7 +299,7 @@ const styles$g = ":host{--_color-border: transparent;--_color-border-hover: tran
 
 var __defProp$i = Object.defineProperty;
 var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __typeError$3 = (msg) => {
+var __typeError$4 = (msg) => {
   throw TypeError(msg);
 };
 var __decorateClass$m = (decorators, target, key, kind) => {
@@ -310,16 +310,16 @@ var __decorateClass$m = (decorators, target, key, kind) => {
   if (kind && result) __defProp$i(target, key, result);
   return result;
 };
-var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
-var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$2 = (obj, member, method) => (__accessCheck$3(obj, member, "access private method"), method);
+var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
+var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), member.get(obj));
+var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod$2 = (obj, member, method) => (__accessCheck$4(obj, member, "access private method"), method);
 var _internals, _OdxButtonComponent_instances, handleClick_fn;
 let OdxButtonComponent = class extends WithLoadingState(BaseButtonComponent) {
   constructor() {
     super(...arguments);
-    __privateAdd$3(this, _OdxButtonComponent_instances);
-    __privateAdd$3(this, _internals, this.attachInternals());
+    __privateAdd$4(this, _OdxButtonComponent_instances);
+    __privateAdd$4(this, _internals, this.attachInternals());
   }
   async connectedCallback() {
     super.connectedCallback();
@@ -344,11 +344,11 @@ _internals = new WeakMap();
 _OdxButtonComponent_instances = new WeakSet();
 handleClick_fn = function(_event) {
   if (this.type === "submit") {
-    __privateGet$3(this, _internals).form?.requestSubmit();
+    __privateGet$4(this, _internals).form?.requestSubmit();
     return;
   }
   if (this.type === "reset") {
-    __privateGet$3(this, _internals).form?.reset();
+    __privateGet$4(this, _internals).form?.reset();
     return;
   }
 };
@@ -566,7 +566,7 @@ OdxFormatNumberComponent = __decorateClass$h([
 
 var __defProp$c = Object.defineProperty;
 var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __typeError$2 = (msg) => {
+var __typeError$3 = (msg) => {
   throw TypeError(msg);
 };
 var __decorateClass$g = (decorators, target, key, kind) => {
@@ -577,17 +577,17 @@ var __decorateClass$g = (decorators, target, key, kind) => {
   if (kind && result) __defProp$c(target, key, result);
   return result;
 };
-var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
-var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), member.set(obj, value), value);
-var __privateMethod$1 = (obj, member, method) => (__accessCheck$2(obj, member, "access private method"), method);
+var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
+var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), member.get(obj));
+var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod$1 = (obj, member, method) => (__accessCheck$3(obj, member, "access private method"), method);
 var _syncInterval, _OdxRelativeTimeComponent_instances, setupSyncInterval_fn;
 let OdxRelativeTimeComponent = class extends FormatComponent {
   constructor() {
     super(...arguments);
-    __privateAdd$2(this, _OdxRelativeTimeComponent_instances);
-    __privateAdd$2(this, _syncInterval);
+    __privateAdd$3(this, _OdxRelativeTimeComponent_instances);
+    __privateAdd$3(this, _syncInterval);
     this.value = Date.now();
     this.syncInterval = null;
   }
@@ -599,7 +599,7 @@ let OdxRelativeTimeComponent = class extends FormatComponent {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    clearInterval(__privateGet$2(this, _syncInterval));
+    clearInterval(__privateGet$3(this, _syncInterval));
   }
   willUpdate(props) {
     super.willUpdate?.(props);
@@ -615,7 +615,7 @@ let OdxRelativeTimeComponent = class extends FormatComponent {
 _syncInterval = new WeakMap();
 _OdxRelativeTimeComponent_instances = new WeakSet();
 setupSyncInterval_fn = function() {
-  clearInterval(__privateGet$2(this, _syncInterval));
+  clearInterval(__privateGet$3(this, _syncInterval));
   if (typeof this.syncInterval !== "number") return;
   __privateSet$1(this, _syncInterval, window.setInterval(() => this.requestUpdate(), Math.max(this.syncInterval, 1e3)));
 };
@@ -699,7 +699,7 @@ const styles$c = ":host{display:flex;block-size:var(--odx-size-300);background-c
 
 var __defProp$a = Object.defineProperty;
 var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __typeError$1 = (msg) => {
+var __typeError$2 = (msg) => {
   throw TypeError(msg);
 };
 var __decorateClass$d = (decorators, target, key, kind) => {
@@ -710,14 +710,14 @@ var __decorateClass$d = (decorators, target, key, kind) => {
   if (kind && result) __defProp$a(target, key, result);
   return result;
 };
-var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
-var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleSlotChange$1;
+var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
+var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _handleSlotChange$2;
 let OdxHeaderComponent = class extends CustomElement {
   constructor() {
     super(...arguments);
-    __privateAdd$1(this, _handleSlotChange$1, () => {
+    __privateAdd$2(this, _handleSlotChange$2, () => {
       const [titleElement] = this.titleElements;
       if (!titleElement) return;
       titleElement.ariaLevel = "1";
@@ -734,12 +734,12 @@ let OdxHeaderComponent = class extends CustomElement {
     return html`
       <slot name="prefix"></slot>
       <odx-logo size="sm"></odx-logo>
-      <slot @slotchange=${__privateGet$1(this, _handleSlotChange$1)}></slot>
+      <slot @slotchange=${__privateGet$2(this, _handleSlotChange$2)}></slot>
       <slot name="actions"></slot>
     `;
   }
 };
-_handleSlotChange$1 = new WeakMap();
+_handleSlotChange$2 = new WeakMap();
 __decorateClass$d([
   queryAssignedElements({ selector: OdxTitleComponent.selector, flatten: true })
 ], OdxHeaderComponent.prototype, "titleElements", 2);
@@ -887,24 +887,19 @@ var __decorateClass$8 = (decorators, target, key, kind) => {
 let OdxNavigationItemComponent = class extends BaseButtonComponent {
   constructor() {
     super(...arguments);
-    this.collapsed = false;
     this.selected = false;
   }
   renderContent() {
     return html`
       <slot name="start"></slot>
-      <div class="content">
-        <slot></slot>
-      </div>
+      <slot></slot>
+      <slot name="end"></slot>
     `;
   }
 };
 __decorateClass$8([
   property({ reflect: true })
 ], OdxNavigationItemComponent.prototype, "size", 2);
-__decorateClass$8([
-  property({ type: Boolean, reflect: true })
-], OdxNavigationItemComponent.prototype, "collapsed", 2);
 __decorateClass$8([
   property({ type: Boolean, reflect: true })
 ], OdxNavigationItemComponent.prototype, "selected", 2);
@@ -999,10 +994,13 @@ OdxPageLayoutComponent = __decorateClass$6([
   customElement("odx-page-layout", [styles$6])
 ], OdxPageLayoutComponent);
 
-const styles$5 = ":host{display:flex;flex-direction:column;block-size:100%;padding-inline:var(--odx-size-50);padding-block:var(--odx-size-150);gap:var(--odx-size-75);inline-size:7rem}.toggle-control{margin-block-start:auto}";
+const styles$5 = ":host{--max-inline-size: 192px;display:flex;flex-direction:column;block-size:100%;padding-inline:var(--odx-size-50);padding-block:var(--odx-size-150);gap:var(--odx-size-75);max-inline-size:var(--max-inline-size);transition:var(--odx-transition-default);transition-property:max-inline-size}.toggle-control{margin-block-start:auto}.toggle-icon{transition:var(--odx-transition-default)}:host([collapsed]:not([collapsed=\"false\"])){--max-inline-size: var(--odx-size-400);.toggle-icon{transform:rotateY(-180deg)}}";
 
 var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __typeError$1 = (msg) => {
+  throw TypeError(msg);
+};
 var __decorateClass$5 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
@@ -1011,20 +1009,43 @@ var __decorateClass$5 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$4(target, key, result);
   return result;
 };
+var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
+var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _handleControlClick, _handleSlotChange$1;
 let OdxRailNavigationComponent = class extends CustomElement {
   constructor() {
     super(...arguments);
     this.collapsed = false;
+    __privateAdd$1(this, _handleControlClick, (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.collapsed = !this.collapsed;
+    });
+    __privateAdd$1(this, _handleSlotChange$1, () => {
+      for (const item of this.navigationItems) {
+        item.size = NavigationItemSize.LG;
+      }
+    });
   }
   render() {
     return html`
-      <slot></slot>
-      <odx-navigation-item class="toggle-control" size="lg">
-        <odx-icon name="core::chevron-left" slot="start"></odx-icon>
+      <slot @slotchange=${__privateGet$1(this, _handleSlotChange$1)}></slot>
+      <odx-navigation-item class="toggle-control" size="lg" @click=${__privateGet$1(this, _handleControlClick)}>
+        <odx-icon class="toggle-icon" name="core::chevron-left" slot="start"></odx-icon>
+        <odx-visually-hidden>${this.collapsed ? "Expand" : "Collapse"} navigation</odx-visually-hidden>
       </odx-navigation-item>
     `;
   }
+  getItems() {
+    return this.navigationItems;
+  }
 };
+_handleControlClick = new WeakMap();
+_handleSlotChange$1 = new WeakMap();
+__decorateClass$5([
+  queryAssignedElements({ selector: OdxNavigationItemComponent.selector, flatten: true })
+], OdxRailNavigationComponent.prototype, "navigationItems", 2);
 __decorateClass$5([
   property({ type: Boolean, reflect: true })
 ], OdxRailNavigationComponent.prototype, "collapsed", 2);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.5",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",