valtech-components 2.0.690 → 2.0.691

package/src/lib/components/molecules/links-accordion/links-accordion.component.ts

@@ -0,0 +1,152 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, inject, Input, Output, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, IonList, MenuController } from '@ionic/angular/standalone';
+import { I18nService } from '../../../services/i18n';
+import { LinksAccordionLink, LinksAccordionMetadata, LinksAccordionSection } from './types';
+
+/**
+ * val-links-accordion
+ *
+ * A hierarchical navigation component using Ionic accordions.
+ * Supports sections with optional sub-links and automatic menu closing.
+ *
+ * @example
+ * <val-links-accordion
+ *   [props]="{
+ *     sections: [
+ *       { title: 'Home', route: ['/'] },
+ *       { title: 'Products', links: [
+ *         { text: 'Catalog', route: ['/products'] },
+ *         { text: 'New Arrivals', route: ['/products', 'new'] }
+ *       ]}
+ *     ]
+ *   }"
+ *   (navigate)="onNavigate($event)"
+ * ></val-links-accordion>
+ *
+ * @input props - Accordion configuration
+ * @output navigate - Emits route when a link is clicked
+ */
+@Component({
+  selector: 'val-links-accordion',
+  standalone: true,
+  imports: [CommonModule, IonAccordionGroup, IonAccordion, IonItem, IonLabel, IonList],
+  template: `
+    <div class="links-accordion">
+      <ion-accordion-group #accordionGroup>
+        <ion-accordion
+          *ngFor="let section of props.sections; let i = index"
+          [value]="getSectionValue(section, i)"
+          [toggleIcon]="section.links?.length ? 'chevron-down-outline' : ''"
+          [readonly]="!section.links?.length"
+        >
+          <ion-item
+            slot="header"
+            color="light"
+            [ngStyle]="{ background: props.backgroundColor || 'var(--ion-background-color)' }"
+            (click)="section.route ? onLinkClick(section.route, $event) : null"
+            [button]="!!section.route"
+            lines="none"
+          >
+            <ion-label class="accordion-label">{{ getSectionTitle(section) }}</ion-label>
+          </ion-item>
+          <div
+            slot="content"
+            [ngStyle]="{ background: props.backgroundColor || 'var(--ion-background-color)' }"
+            *ngIf="section.links?.length"
+          >
+            <ion-list lines="none">
+              <ion-item
+                *ngFor="let link of section.links"
+                [ngStyle]="{ background: props.backgroundColor || 'var(--ion-background-color)' }"
+                (click)="onLinkClick(link.route, $event)"
+                button
+              >
+                <ion-label class="accordion-item-label">{{ getLinkText(link) }}</ion-label>
+              </ion-item>
+            </ion-list>
+          </div>
+        </ion-accordion>
+      </ion-accordion-group>
+    </div>
+  `,
+  styleUrls: ['./links-accordion.component.scss'],
+})
+export class LinksAccordionComponent {
+  private i18n = inject(I18nService);
+
+  /**
+   * Accordion configuration.
+   */
+  @Input() props: LinksAccordionMetadata = {
+    sections: [],
+    backgroundColor: 'var(--ion-background-color)',
+    closeMenuOnClick: true,
+    closeAccordionOnClick: true,
+  };
+
+  /**
+   * Emits the route when a link is clicked.
+   */
+  @Output() navigate = new EventEmitter<string[]>();
+
+  @ViewChild('accordionGroup') accordionGroup!: IonAccordionGroup;
+
+  constructor(
+    private router: Router,
+    private menuCtrl: MenuController
+  ) {}
+
+  /**
+   * Gets a unique value for the accordion section.
+   */
+  getSectionValue(section: LinksAccordionSection, index: number): string {
+    return section.titleKey || section.title || `section-${index}`;
+  }
+
+  /**
+   * Gets the section title, supporting i18n via titleKey.
+   */
+  getSectionTitle(section: LinksAccordionSection): string {
+    if (section.titleKey && this.props.i18nNamespace) {
+      return this.i18n.t(section.titleKey, this.props.i18nNamespace);
+    }
+    return section.title || '';
+  }
+
+  /**
+   * Gets the link text, supporting i18n via textKey.
+   */
+  getLinkText(link: LinksAccordionLink): string {
+    if (link.textKey && this.props.i18nNamespace) {
+      return this.i18n.t(link.textKey, this.props.i18nNamespace);
+    }
+    return link.text || '';
+  }
+
+  /**
+   * Handles link click - closes accordion/menu and navigates.
+   */
+  async onLinkClick(route: string[], event?: Event): Promise<void> {
+    if (event) {
+      event.stopPropagation();
+    }
+
+    // Close accordion before navigating
+    if (this.props.closeAccordionOnClick !== false && this.accordionGroup) {
+      this.accordionGroup.value = undefined;
+    }
+
+    // Close menu if enabled
+    if (this.props.closeMenuOnClick !== false) {
+      await this.menuCtrl.close();
+    }
+
+    // Emit event
+    this.navigate.emit(route);
+
+    // Navigate
+    this.router.navigate(route);
+  }
+}

package/src/lib/components/molecules/links-accordion/links-accordion.stories.ts

@@ -0,0 +1,209 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { LinksAccordionComponent } from './links-accordion.component';
+
+const meta: Meta<LinksAccordionComponent> = {
+  title: 'Molecules/LinksAccordion',
+  component: LinksAccordionComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, LinksAccordionComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Accordion configuration object',
+      control: 'object',
+    },
+    navigate: {
+      action: 'navigate',
+      description: 'Emits route when a link is clicked',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-links-accordion
+
+A hierarchical navigation component using Ionic accordions.
+
+### Problem it solves
+
+Mobile navigation often requires:
+- Collapsible sections for categories
+- Nested links within sections
+- Automatic menu closing on navigation
+- Consistent styling with the app
+
+This component provides all of this with Ionic integration.
+
+### Usage
+
+\`\`\`html
+<val-links-accordion
+  [props]="{
+    sections: [
+      { title: 'Home', route: ['/'] },
+      { title: 'Products', links: [
+        { text: 'Catalog', route: ['/products'] },
+        { text: 'New Arrivals', route: ['/products', 'new'] }
+      ]}
+    ]
+  }"
+  (navigate)="onNavigate($event)"
+></val-links-accordion>
+\`\`\`
+
+### Features
+
+- Collapsible sections with smooth animations
+- Sections can be links themselves or contain sub-links
+- Automatic accordion closing on navigation
+- Automatic menu closing (for side menus)
+- Customizable background color
+- Route array support for complex navigation
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<LinksAccordionComponent>;
+
+export const Default: Story = {
+  args: {
+    props: {
+      sections: [
+        { title: 'Home', route: ['/'] },
+        { title: 'About', route: ['/about'] },
+        {
+          title: 'Products',
+          links: [
+            { text: 'All Products', route: ['/products'] },
+            { text: 'New Arrivals', route: ['/products', 'new'] },
+            { text: 'Best Sellers', route: ['/products', 'best'] },
+          ],
+        },
+        {
+          title: 'Services',
+          links: [
+            { text: 'Consulting', route: ['/services', 'consulting'] },
+            { text: 'Development', route: ['/services', 'development'] },
+          ],
+        },
+        { title: 'Contact', route: ['/contact'] },
+      ],
+    },
+  },
+};
+
+export const SimpleMenu: Story = {
+  args: {
+    props: {
+      sections: [
+        { title: 'Dashboard', route: ['/dashboard'] },
+        { title: 'Profile', route: ['/profile'] },
+        { title: 'Settings', route: ['/settings'] },
+        { title: 'Help', route: ['/help'] },
+        { title: 'Logout', route: ['/logout'] },
+      ],
+    },
+  },
+};
+
+export const NestedNavigation: Story = {
+  args: {
+    props: {
+      sections: [
+        {
+          title: 'Components',
+          links: [
+            { text: 'Atoms', route: ['/components', 'atoms'] },
+            { text: 'Molecules', route: ['/components', 'molecules'] },
+            { text: 'Organisms', route: ['/components', 'organisms'] },
+            { text: 'Templates', route: ['/components', 'templates'] },
+          ],
+        },
+        {
+          title: 'Services',
+          links: [
+            { text: 'Theme', route: ['/services', 'theme'] },
+            { text: 'Language', route: ['/services', 'language'] },
+            { text: 'Navigation', route: ['/services', 'navigation'] },
+          ],
+        },
+        {
+          title: 'Guides',
+          links: [
+            { text: 'Getting Started', route: ['/guides', 'start'] },
+            { text: 'Best Practices', route: ['/guides', 'best-practices'] },
+          ],
+        },
+      ],
+    },
+  },
+};
+
+export const CustomBackground: Story = {
+  args: {
+    props: {
+      sections: [
+        { title: 'Home', route: ['/'] },
+        {
+          title: 'Features',
+          links: [
+            { text: 'Feature 1', route: ['/features', '1'] },
+            { text: 'Feature 2', route: ['/features', '2'] },
+          ],
+        },
+        { title: 'Pricing', route: ['/pricing'] },
+      ],
+      backgroundColor: '#f0f0f0',
+    },
+  },
+};
+
+export const InMenuContext: Story = {
+  render: () => ({
+    props: {
+      accordionProps: {
+        sections: [
+          { title: 'Home', route: ['/'] },
+          {
+            title: 'Products',
+            links: [
+              { text: 'Catalog', route: ['/products'] },
+              { text: 'New', route: ['/products', 'new'] },
+            ],
+          },
+          { title: 'Contact', route: ['/contact'] },
+        ],
+        closeMenuOnClick: true,
+      },
+    },
+    template: `
+      <div style="
+        width: 280px;
+        background: var(--ion-background-color, #fff);
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+      ">
+        <div style="
+          padding: 16px;
+          background: var(--ion-color-primary);
+          color: white;
+          font-family: system-ui;
+          font-weight: 600;
+        ">
+          Menu
+        </div>
+        <val-links-accordion [props]="accordionProps"></val-links-accordion>
+      </div>
+    `,
+  }),
+};

package/src/lib/components/molecules/links-accordion/types.ts

@@ -0,0 +1,41 @@
+/**
+ * A link item within an accordion section.
+ */
+export interface LinksAccordionLink {
+  /** Display text for the link (static) */
+  text?: string;
+  /** i18n key for the link text (use with namespace in LinksAccordionMetadata) */
+  textKey?: string;
+  /** Route segments for navigation */
+  route: string[];
+}
+
+/**
+ * An accordion section with optional sub-links.
+ */
+export interface LinksAccordionSection {
+  /** Section title (static) */
+  title?: string;
+  /** i18n key for the section title (use with namespace in LinksAccordionMetadata) */
+  titleKey?: string;
+  /** Optional route if the section itself is clickable */
+  route?: string[];
+  /** Optional sub-links within this section */
+  links?: LinksAccordionLink[];
+}
+
+/**
+ * Configuration for the links accordion component.
+ */
+export interface LinksAccordionMetadata {
+  /** Array of accordion sections */
+  sections: LinksAccordionSection[];
+  /** Background color for the accordion. Default: 'var(--ion-background-color)' */
+  backgroundColor?: string;
+  /** Whether to close the menu when a link is clicked. Default: true */
+  closeMenuOnClick?: boolean;
+  /** Whether to close the accordion when navigating. Default: true */
+  closeAccordionOnClick?: boolean;
+  /** i18n namespace for translating titleKey and textKey values */
+  i18nNamespace?: string;
+}

package/src/lib/components/molecules/links-cake/links-cake.component.scss

@@ -0,0 +1,9 @@
+@import '../../styles/mixins.scss';
+
+.title {
+  margin: pxToRem(16) 0;
+}
+
+.link {
+  margin-bottom: pxToRem(8);
+}

package/src/lib/components/molecules/links-cake/links-cake.component.ts

@@ -0,0 +1,49 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { HrefComponent } from '../../atoms/href/href.component';
+import { TitleComponent } from '../../atoms/title/title.component';
+import { LinkCakeMetadata } from './types';
+
+@Component({
+  selector: 'val-links-cake',
+  standalone: true,
+  imports: [CommonModule, TitleComponent, HrefComponent],
+  template: `
+    <div>
+      @if (props.title) {
+        <div class="title">
+          <val-title [props]="{ content: props.title, color: 'dark', bold: false, size: props.size }"></val-title>
+        </div>
+      }
+      <div class="link" *ngFor="let l of props.links">
+        <val-href [props]="l"></val-href>
+      </div>
+    </div>
+  `,
+  styleUrls: ['./links-cake.component.scss'],
+})
+/**
+ * val-links-cake
+ *
+ * Displays a list of links with an optional title, styled as a "cake" of links.
+ *
+ * @example
+ * <val-links-cake [props]="{ title: 'Links', links: [...], size: 'medium' }"></val-links-cake>
+ *
+ * @input props: LinkCakeMetadata - Configuration for the links cake (title, links, size)
+ */
+export class LinksCakeComponent implements OnInit {
+  /**
+   * Links cake configuration object.
+   * @type {LinkCakeMetadata}
+   * @property title - The title for the links section (optional).
+   * @property links - Array of link configurations.
+   * @property size - The size of the title and links.
+   */
+  @Input()
+  props: LinkCakeMetadata;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/molecules/links-cake/links-cake.stories.ts

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { LinksCakeComponent } from './links-cake.component';
+import { LinkCakeMetadata } from './types';
+
+const createHref = (text: string, url: string, color: string = 'primary') => ({
+  text,
+  url,
+  color,
+  token: '',
+  download: false,
+  hoverable: true,
+} as any);
+
+const createLinksCakeProps = (overrides: Partial<LinkCakeMetadata> = {}) => ({
+  title: 'Quick Links',
+  size: 'medium' as const,
+  links: [
+    createHref('Home', '/'),
+    createHref('About Us', '/about'),
+    createHref('Contact', '/contact'),
+  ],
+  ...overrides,
+} as LinkCakeMetadata);
+
+const defaultProps = createLinksCakeProps();
+
+const smallProps = createLinksCakeProps({
+  title: 'Small Links',
+  size: 'small',
+  links: [
+    createHref('Privacy Policy', '/privacy', 'medium'),
+    createHref('Terms of Service', '/terms', 'medium'),
+    createHref('Cookie Policy', '/cookies', 'medium'),
+  ],
+});
+
+const largeProps = createLinksCakeProps({
+  title: 'Featured Pages',
+  size: 'large',
+  links: [
+    createHref('Products', '/products'),
+    createHref('Services', '/services'),
+    createHref('Portfolio', '/portfolio'),
+  ],
+});
+
+const externalLinksProps = createLinksCakeProps({
+  title: 'External Resources',
+  size: 'medium',
+  links: [
+    createHref('GitHub', 'https://github.com', 'dark'),
+    createHref('Documentation', 'https://docs.example.com', 'dark'),
+    createHref('Support', 'https://support.example.com', 'dark'),
+  ],
+});
+
+const noTitleProps = createLinksCakeProps({
+  title: '',
+  size: 'medium',
+  links: [
+    createHref('Link One', '#'),
+    createHref('Link Two', '#'),
+  ],
+});
+
+const footerLinksProps = createLinksCakeProps({
+  title: 'Company',
+  size: 'small',
+  links: [
+    createHref('About', '/about', 'medium'),
+    createHref('Careers', '/careers', 'medium'),
+    createHref('Blog', '/blog', 'medium'),
+    createHref('Press', '/press', 'medium'),
+  ],
+});
+
+const supportLinksProps = createLinksCakeProps({
+  title: 'Support',
+  size: 'small',
+  links: [
+    createHref('Help Center', '/help', 'medium'),
+    createHref('Contact Us', '/contact', 'medium'),
+    createHref('FAQ', '/faq', 'medium'),
+  ],
+});
+
+const legalLinksProps = createLinksCakeProps({
+  title: 'Legal',
+  size: 'small',
+  links: [
+    createHref('Privacy', '/privacy', 'medium'),
+    createHref('Terms', '/terms', 'medium'),
+  ],
+});
+
+const meta: Meta<LinksCakeComponent> = {
+  title: 'Molecules/LinksCake',
+  component: LinksCakeComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Configuration object for the links cake',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<LinksCakeComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    props: { props: defaultProps },
+    template: `<val-links-cake [props]="props"></val-links-cake>`,
+  }),
+};
+
+export const SmallSize: Story = {
+  render: () => ({
+    props: { props: smallProps },
+    template: `<val-links-cake [props]="props"></val-links-cake>`,
+  }),
+};
+
+export const LargeSize: Story = {
+  render: () => ({
+    props: { props: largeProps },
+    template: `<val-links-cake [props]="props"></val-links-cake>`,
+  }),
+};
+
+export const ExternalLinks: Story = {
+  render: () => ({
+    props: { props: externalLinksProps },
+    template: `<val-links-cake [props]="props"></val-links-cake>`,
+  }),
+};
+
+export const NoTitle: Story = {
+  render: () => ({
+    props: { props: noTitleProps },
+    template: `<val-links-cake [props]="props"></val-links-cake>`,
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    props: {
+      footerLinks: footerLinksProps,
+      supportLinks: supportLinksProps,
+      legalLinks: legalLinksProps,
+    },
+    template: `
+      <div style="display: flex; gap: 48px; padding: 24px; background: var(--ion-color-light); border-radius: 8px;">
+        <val-links-cake [props]="footerLinks"></val-links-cake>
+        <val-links-cake [props]="supportLinks"></val-links-cake>
+        <val-links-cake [props]="legalLinks"></val-links-cake>
+      </div>
+    `,
+  }),
+};

package/src/lib/components/molecules/links-cake/types.ts

@@ -0,0 +1,14 @@
+import { HrefMetadata } from '../../atoms/href/types';
+
+/**
+ * Props for val-links-cake component.
+ *
+ * @property title - The title for the links section (optional).
+ * @property links - Array of link configurations.
+ * @property size - The size of the title and links ('small' | 'medium' | 'large').
+ */
+export interface LinkCakeMetadata {
+  title: string;
+  links: HrefMetadata[];
+  size: 'small' | 'medium' | 'large';
+}