my account navigation

libs/base/ui/graphical/icon/src/icon.types.ts

@@ -100,6 +100,7 @@ export enum IconTypes {
   Carrier = 'carrier',
   Location = 'location_on',
   Login = 'login',
+  Logout = 'logout',
   List = 'list',
   ViewList = 'view_list',
   BulletList = 'format_list_bulleted',

libs/base/ui/overlays/dropdown/src/styles/base.styles.ts

@@ -5,7 +5,6 @@ import { Position } from '../dropdown.model';
 
 export const dropdownBaseStyles = css`
   :host {
-    --oryx-popover-top-space: 4px;
     --oryx-popover-vertical-offset: 10px;
     --oryx-popover-maxwidth: 206px;
 
@@ -23,16 +22,16 @@ export const dropdownBaseStyles = css`
       var(--oryx-popover-maxwidth)
     );
 
-    z-index: 100;
-    overflow: auto;
+    /* z-index: 100; */
+    /* overflow: auto; */
     max-height: min(
       calc(
         var(--_available-popover-height, ${unsafecss(POPOVER_HEIGHT)}px) +
           var(--_bounding-element-height, 0)
       ),
       var(--oryx-popover-maxheight, ${unsafecss(POPOVER_HEIGHT)}px)
     );
-    width: var(--_oryx-dropdown-width);
+    width: var(--oryx-dropdown-width, var(--_oryx-dropdown-width));
     inset-block-start: 0;
     inset-inline: var(--_oryx-dropdown-start-offset, auto)
       var(--_oryx-dropdown-end-offset, auto);
@@ -49,9 +48,8 @@ export const dropdownBaseStyles = css`
 
   ${featureVersion >= `1.3`
     ? css`
-        :host(:not([vertical-align])) oryx-popover {
-          transform: scaleX(var(--oryx-popover-visible, 0))
-            scaleY(var(--oryx-popover-visible, 0));
+        :host([vertical-align]) oryx-popover {
+          transform: scaleY(var(--oryx-popover-visible, 0));
         }
       `
     : css``}
@@ -95,7 +93,7 @@ export const dropdownBaseStyles = css`
   }
 
   :host([vertical-align]:not([up])) oryx-popover {
-    inset-block-start: calc(100% + var(--oryx-popover-top-space));
+    inset-block-start: calc(100% + var(--oryx-popover-top-space, 4px));
   }
 
   :host([vertical-align][up]) oryx-popover {

libs/base/ui/overlays/popover/src/styles/oryx.styles.ts

@@ -3,8 +3,12 @@ import { css } from 'lit';
 export const popoverStyles = css`
   :host {
     background-color: var(--oryx-color-neutral-1);
-    box-shadow: var(--oryx-elevation-2) var(--oryx-color-elevation);
-    border-radius: var(--oryx-border-radius-small);
+    box-shadow: var(--oryx-shadow-hovering) var(--oryx-color-elevation);
+    border-radius: var(
+      --oryx-popover-border-radius,
+      var(--oryx-border-radius-small)
+    );
     transition: transform var(--oryx-transition-time) ease-in-out;
+    width: var(--oryx-popover-width);
   }
 `;

libs/domain/content/link/link.component.ts

@@ -36,7 +36,7 @@ export class ContentLinkComponent extends ContentMixin<
   protected $link = computed(() => {
     const { url, type, id, params } = this.$options();
     if (url) return of(url);
-    if (type) return this.semanticLinkService.get({ type: type, id, params });
+    if (type) return this.semanticLinkService.get({ type, id, params });
     return of(null);
   });
 
@@ -56,9 +56,9 @@ export class ContentLinkComponent extends ContentMixin<
     const { button, icon, singleLine, color } = this.$options();
 
     if (button) {
-      return html`<oryx-button part="link" }
-        >${this.renderLink(true)}</oryx-button
-      >`;
+      return html`<oryx-button part="link">
+        ${this.renderLink(true)}
+      </oryx-button>`;
     }
 
     return html`<oryx-link
@@ -78,7 +78,7 @@ export class ContentLinkComponent extends ContentMixin<
 
     if (type === RouteType.Category && id) {
       return this.categoryService
-        .get(id)
+        .get({ id })
         .pipe(map((category) => category?.name));
     }
 
@@ -94,7 +94,7 @@ export class ContentLinkComponent extends ContentMixin<
   });
 
   protected renderLink(custom?: boolean): TemplateResult {
-    if (!this.$link()) return html`${this.$text()}`;
+    if (!this.$link()) return html`<a tabindex="0">${this.$text()}</a>`;
 
     const { label, target } = this.$options();
 

libs/domain/product/categories/list/index.ts

@@ -0,0 +1,4 @@
+export * from './list.component';
+export * from './list.model';
+export * from './list.schema';
+export * from './list.styles';

libs/domain/product/categories/list/list.component.ts

@@ -0,0 +1,141 @@
+import { resolve } from '@spryker-oryx/di';
+import { ContentMixin, LayoutMixin } from '@spryker-oryx/experience';
+import { ProductCategoryService, ProductMixin } from '@spryker-oryx/product';
+import {
+  computed,
+  hydrate,
+  signal,
+  signalProperty,
+} from '@spryker-oryx/utilities';
+import { LitElement, TemplateResult, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import {
+  ProductCategoryListAttributes,
+  ProductCategoryListOptions,
+} from './list.model';
+import { categoryListStyles } from './list.styles';
+
+@hydrate()
+export class ProductCategoryListComponent
+  extends ProductMixin(
+    LayoutMixin(ContentMixin<ProductCategoryListOptions>(LitElement))
+  )
+  implements ProductCategoryListAttributes
+{
+  static styles = categoryListStyles;
+
+  @signalProperty() categoryId?: string;
+  @property({ type: 'boolean' }) dropdown?: boolean;
+
+  protected productCategoryService = resolve(ProductCategoryService);
+
+  protected $all = signal(this.productCategoryService.getTree());
+
+  protected $list = computed(() => {
+    const { id, nested } = this.$options();
+    if (!(id || this.categoryId) || !nested) {
+      return this.productCategoryService.getList();
+    } else {
+      return this.productCategoryService.getList({
+        parent: id || this.categoryId,
+      });
+    }
+  });
+
+  protected $filteredList = computed(() => {
+    const items = this.$list() ?? [];
+    const excludes = this.getExcludes(items.map((c) => c.id));
+    return items.filter((c) => !excludes.includes(c.id));
+  });
+
+  protected override render(): TemplateResult {
+    return html`
+      <section>
+        ${repeat(
+          this.$filteredList(),
+          (c) => c.id,
+          (c) => this.renderItem(c.id)
+        )}
+      </section>
+      <section>
+        <oryx-content-link
+          .options=${{
+            id: 5,
+            type: 'category',
+            singleLine: true,
+          }}
+        ></oryx-content-link>
+      </section>
+      ${unsafeHTML(`<style>${this.layoutStyles()}</style>`)}
+    `;
+  }
+
+  protected renderItem(id: string): TemplateResult {
+    const hasChildren = this.hasChildren(id);
+    const iconSuffix =
+      this.dropdown && hasChildren ? 'navigate_next' : undefined;
+
+    const link = html`<oryx-content-link
+      .options=${{
+        id,
+        type: 'category',
+        iconSuffix: iconSuffix,
+        singleLine: true,
+      }}
+    ></oryx-content-link>`;
+
+    const { nested } = this.$options();
+    if (nested && hasChildren) {
+      return html`<div>
+        ${link}
+        <oryx-product-category-list
+          .options=${{ id, nested }}
+        ></oryx-product-category-list>
+      </div>`;
+    } else {
+      return link;
+    }
+  }
+
+  protected hasChildren(categoryId: string): boolean {
+    return !!this.$all()?.find((c) => c.parent === categoryId);
+  }
+
+  protected getExcludes(categories: string[]): string[] {
+    const { exclude } = this.$options();
+    let excludedIds: string[] = [];
+
+    if (exclude) {
+      // Convert both string and array notations to array of strings
+      const excludeIds = Array.isArray(exclude)
+        ? exclude.map(String)
+        : exclude.split(',').map((id) => id.trim());
+
+      // Handle range notations like >5, <4, 4..11
+      excludedIds = categories.filter((categoryId) => {
+        return excludeIds.some((excludedId) => {
+          if (excludedId.includes('..')) {
+            const [start, end] = excludedId
+              .split('..')
+              .map((num) => parseInt(num, 10));
+            const num = parseInt(categoryId, 10);
+            return num >= start && num <= end;
+          } else if (excludedId.startsWith('>')) {
+            const threshold = parseInt(excludedId.slice(1), 10);
+            return parseInt(categoryId, 10) > threshold;
+          } else if (excludedId.startsWith('<')) {
+            const threshold = parseInt(excludedId.slice(1), 10);
+            return parseInt(categoryId, 10) < threshold;
+          } else {
+            // Regular ID match
+            return categoryId === excludedId;
+          }
+        });
+      });
+    }
+
+    return excludedIds;
+  }
+}

libs/domain/product/categories/list/list.def.ts

@@ -0,0 +1,16 @@
+import { componentDef } from '@spryker-oryx/utilities';
+import { ProductCategoryListOptions } from './list.model';
+
+declare global {
+  interface FeatureOptions {
+    'oryx-product-category-list'?: ProductCategoryListOptions;
+  }
+}
+
+export const productCategoryListComponent = componentDef({
+  name: 'oryx-product-category-list',
+  impl: () =>
+    import('./list.component').then((m) => m.ProductCategoryListComponent),
+  schema: () =>
+    import('./list.schema').then((m) => m.productCategoryListSchema),
+});

libs/domain/product/categories/list/list.model.ts

@@ -0,0 +1,42 @@
+export interface ProductCategoryListOptions {
+  heading?: string;
+
+  id?: string;
+
+  /**
+   * Whether to render nested categories or not.
+   */
+  nested?: boolean;
+
+  /**
+   * Excludes categories from the list.
+   *
+   * The `exclude` property can be specified in different formats:
+   * - A comma-separated string of category IDs.
+   * - An array of category IDs.
+   *
+   * The category IDs can be an actual ID or a range notation, like `>5`, `<4`, `4..11`.
+   *
+   * Examples:
+   * ```ts
+   * const excludeString = "1, 2, 3";
+   * const excludeArray = [4, 5, 6];
+   * const excludeRange = ">8";
+   * ```
+   *
+   * @remarks
+   * The `exclude` string or array can contain notations to specify which IDs should be excluded.
+   * Notations include:
+   * - `>X` for excluding IDs greater than X.
+   * - `<X` for excluding IDs less than X.
+   * - `X..Y` for excluding IDs within the range of X to Y (inclusive).
+   */
+  exclude?: string | string[];
+}
+
+export interface ProductCategoryListAttributes {
+  /**
+   * Optional category id to filter products by.
+   */
+  categoryId?: string;
+}

libs/domain/product/categories/list/list.schema.ts

@@ -0,0 +1,11 @@
+import { ContentComponentSchema } from '@spryker-oryx/experience';
+import { IconTypes } from '@spryker-oryx/ui/icon';
+import { ProductCategoryListComponent } from './list.component';
+
+export const productCategoryListSchema: ContentComponentSchema<ProductCategoryListComponent> =
+  {
+    name: 'Product Category List',
+    group: 'Product',
+    icon: IconTypes.ViewList,
+    options: {},
+  };

libs/domain/product/categories/list/list.styles.ts

@@ -0,0 +1,39 @@
+import { css } from 'lit';
+
+export const categoryListStyles = css`
+  :host {
+    /* --oryx-popover-visible: 1; */
+
+    display: contents;
+    width: inherit;
+  }
+
+  section {
+    display: contents;
+  }
+
+  div {
+    /* position: relative; */
+    display: contents;
+    width: inherit;
+  }
+
+  div > oryx-product-category-list {
+    display: block;
+  }
+
+  oryx-product-category-list {
+    position: absolute;
+    inset-inline-start: 100%;
+    inset-block-start: 0;
+    /* outline: solid 1px red; */
+    height: 100%;
+    background-color: var(--oryx-color-neutral-1);
+    width: inherit;
+  }
+
+  div:not(:hover) oryx-product-category-list {
+    opacity: 0;
+    pointer-events: none;
+  }
+`;

libs/domain/product/src/services/category/default-category.service.ts

@@ -77,6 +77,7 @@ export class DefaultProductCategoryService implements ProductCategoryService {
           : of([category])
       ),
       map((trail) => trail.sort((a, b) => (a.id === b.parent ? -1 : 1)))
+      // tap(console.log)
     );
   }
 

libs/domain/product/src/services/resolvers/breadcrumb/product-details.resolver.ts

@@ -70,7 +70,7 @@ export class ProductDetailsBreadcrumbResolver implements BreadcrumbResolver {
     }
 
     return combineLatest(
-      categoryIds.map((id) => this.categoryService.getTrail(id))
+      categoryIds.map((id) => this.categoryService.getTrail({ id }))
     ).pipe(
       switchMap((trails) =>
         combineLatest([

libs/domain/search/src/services/resolvers/breadcrumb.resolver.ts

@@ -22,7 +22,7 @@ export class CategoryBreadcrumbResolver implements BreadcrumbResolver {
       switchMap((category) =>
         this.categoryService
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          .getTrail(String((category as ValueFacet).selectedValues![0]))
+          .getTrail({ id: String((category as ValueFacet).selectedValues![0]) })
           .pipe(
             switchMap((trail) =>
               combineLatest(

libs/domain/user/navigation-trigger/index.ts

@@ -0,0 +1 @@
+export * from './navigation-trigger.component.js';