valtech-components 2.0.691 → 2.0.692

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

@@ -1,152 +0,0 @@
-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

@@ -1,209 +0,0 @@
-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

@@ -1,41 +0,0 @@
-/**
- * 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

@@ -1,9 +0,0 @@
-@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

@@ -1,49 +0,0 @@
-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

@@ -1,160 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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';
-}