valtech-components 2.0.687 → 2.0.689

package/src/lib/components/atoms/box/box.stories.ts

@@ -0,0 +1,280 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { BoxComponent } from './box.component';
+
+const meta: Meta<BoxComponent> = {
+  title: 'Atoms/Box',
+  component: BoxComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, BoxComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Box configuration object',
+      control: 'object',
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Event emitted when the box or icon is clicked',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-box
+
+A stylized card container for grouping content. Supports optional icons, colors, borders, and click events.
+
+### Usage
+
+\`\`\`html
+<val-box
+  [props]="{
+    color: 'primary',
+    rounded: true,
+    bordered: true,
+    padding: '16px'
+  }"
+  (onClick)="handleClick()"
+>
+  <div body>Your content here</div>
+</val-box>
+\`\`\`
+
+### Features
+
+- Color variants from Ionic palette
+- Optional icon with click event
+- Border styles (bordered, leftBorder)
+- Rounded corners
+- Custom padding
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<BoxComponent>;
+
+export const Default: Story = {
+  args: {
+    props: {
+      color: 'light',
+      icon: '',
+      padding: '16px',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <val-box [props]="props">
+        <div body>
+          <p style="margin: 0; font-family: system-ui;">Default box content</p>
+        </div>
+      </val-box>
+    `,
+  }),
+};
+
+export const Primary: Story = {
+  args: {
+    props: {
+      color: 'primary',
+      icon: '',
+      padding: '16px',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <val-box [props]="props">
+        <div body>
+          <p style="margin: 0; font-family: system-ui; color: white;">Primary colored box</p>
+        </div>
+      </val-box>
+    `,
+  }),
+};
+
+export const Secondary: Story = {
+  args: {
+    props: {
+      color: 'secondary',
+      icon: '',
+      padding: '16px',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <val-box [props]="props">
+        <div body>
+          <p style="margin: 0; font-family: system-ui; color: white;">Secondary colored box</p>
+        </div>
+      </val-box>
+    `,
+  }),
+};
+
+export const WithIcon: Story = {
+  args: {
+    props: {
+      color: 'light',
+      icon: 'close-outline',
+      padding: '16px',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <val-box [props]="props" (onClick)="onClick($event)">
+        <div body>
+          <p style="margin: 0; font-family: system-ui;">Box with clickable icon</p>
+        </div>
+      </val-box>
+    `,
+  }),
+};
+
+export const Rounded: Story = {
+  args: {
+    props: {
+      color: 'tertiary',
+      icon: '',
+      rounded: true,
+      padding: '16px',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <val-box [props]="props">
+        <div body>
+          <p style="margin: 0; font-family: system-ui; color: white;">Rounded corners</p>
+        </div>
+      </val-box>
+    `,
+  }),
+};
+
+export const Bordered: Story = {
+  args: {
+    props: {
+      color: 'light',
+      icon: '',
+      bordered: true,
+      padding: '16px',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <val-box [props]="props">
+        <div body>
+          <p style="margin: 0; font-family: system-ui;">Bordered box</p>
+        </div>
+      </val-box>
+    `,
+  }),
+};
+
+export const LeftBorder: Story = {
+  args: {
+    props: {
+      color: 'light',
+      icon: '',
+      leftBorder: true,
+      padding: '16px',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <val-box [props]="props">
+        <div body>
+          <p style="margin: 0; font-family: system-ui;">Box with left accent border</p>
+        </div>
+      </val-box>
+    `,
+  }),
+};
+
+export const Transparent: Story = {
+  args: {
+    props: {
+      color: undefined as any,
+      icon: '',
+      bordered: true,
+      padding: '16px',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <val-box [props]="props">
+        <div body>
+          <p style="margin: 0; font-family: system-ui;">Transparent box with border</p>
+        </div>
+      </val-box>
+    `,
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 600px;">
+        <h3 style="margin: 0; font-family: system-ui;">Colors</h3>
+        <div style="display: flex; flex-direction: column; gap: 12px;">
+          <val-box [props]="{ color: 'primary', icon: '', padding: '16px' }">
+            <div body><p style="margin: 0; font-family: system-ui; color: white;">Primary</p></div>
+          </val-box>
+          <val-box [props]="{ color: 'secondary', icon: '', padding: '16px' }">
+            <div body><p style="margin: 0; font-family: system-ui; color: white;">Secondary</p></div>
+          </val-box>
+          <val-box [props]="{ color: 'success', icon: '', padding: '16px' }">
+            <div body><p style="margin: 0; font-family: system-ui; color: white;">Success</p></div>
+          </val-box>
+          <val-box [props]="{ color: 'warning', icon: '', padding: '16px' }">
+            <div body><p style="margin: 0; font-family: system-ui;">Warning</p></div>
+          </val-box>
+          <val-box [props]="{ color: 'danger', icon: '', padding: '16px' }">
+            <div body><p style="margin: 0; font-family: system-ui; color: white;">Danger</p></div>
+          </val-box>
+        </div>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Styles</h3>
+        <div style="display: flex; flex-direction: column; gap: 12px;">
+          <val-box [props]="{ color: 'light', icon: '', rounded: true, padding: '16px' }">
+            <div body><p style="margin: 0; font-family: system-ui;">Rounded</p></div>
+          </val-box>
+          <val-box [props]="{ color: 'light', icon: '', bordered: true, padding: '16px' }">
+            <div body><p style="margin: 0; font-family: system-ui;">Bordered</p></div>
+          </val-box>
+          <val-box [props]="{ color: 'light', icon: '', leftBorder: true, padding: '16px' }">
+            <div body><p style="margin: 0; font-family: system-ui;">Left Border Accent</p></div>
+          </val-box>
+        </div>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">With Icons</h3>
+        <div style="display: flex; flex-direction: column; gap: 12px;">
+          <val-box [props]="{ color: 'light', icon: 'information-circle-outline', padding: '16px' }">
+            <div body><p style="margin: 0; font-family: system-ui;">Info box with icon</p></div>
+          </val-box>
+          <val-box [props]="{ color: 'warning', icon: 'warning-outline', padding: '16px' }">
+            <div body><p style="margin: 0; font-family: system-ui;">Warning box with icon</p></div>
+          </val-box>
+          <val-box [props]="{ color: 'danger', icon: 'alert-circle-outline', padding: '16px' }">
+            <div body><p style="margin: 0; font-family: system-ui; color: white;">Error box with icon</p></div>
+          </val-box>
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/lib/components/atoms/box/types.ts

@@ -0,0 +1,20 @@
+import { Color } from '@ionic/core';
+
+/**
+ * Props for val-box component.
+ *
+ * @property color - The color of the box (Ionic color string).
+ * @property icon - The name of the icon to display (optional).
+ * @property bordered - Whether the box has a border (optional).
+ * @property leftBorder - Whether the box has a left border (optional).
+ * @property rounded - Whether the box has rounded corners (optional).
+ * @property padding - Custom padding for the box (optional).
+ */
+export interface BoxMetadata {
+  color: Color;
+  icon: string;
+  bordered?: boolean;
+  leftBorder?: boolean;
+  rounded?: boolean;
+  padding?: string;
+}

package/src/lib/components/atoms/button/button.component.scss

@@ -0,0 +1,20 @@
+@import '../../styles/mixins.scss';
+
+ion-button {
+  font-family: var(--ion-default-font), Arial, sans-serif;
+  min-width: pxToRem(100);
+
+  margin: 0;
+
+  &.small {
+    --padding-bottom: 12px;
+    --padding-end: 14px;
+    --padding-start: 14px;
+    --padding-top: 12px;
+  }
+
+  &.button-clear {
+    padding: 0;
+    margin: 0;
+  }
+}

package/src/lib/components/atoms/button/button.component.ts

@@ -0,0 +1,174 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, inject, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { IonButton, IonIcon, IonSpinner, IonText } from '@ionic/angular/standalone';
+import { DownloadService } from '../../../services/download.service';
+import { IconService } from '../../../services/icons.service';
+import { NavigationService } from '../../../services/navigation';
+import { PresetService } from '../../../services/presets';
+import { ActionType, ButtonMetadata, ComponentStates } from '../../types';
+
+@Component({
+  selector: 'val-button',
+  standalone: true,
+  imports: [CommonModule, IonButton, IonIcon, IonSpinner, IonText],
+  template: `
+    <ion-button
+      [type]="resolvedProps.type"
+      [color]="resolvedProps.color"
+      [expand]="resolvedProps.expand"
+      [fill]="resolvedProps.fill"
+      [size]="resolvedProps.size"
+      [href]="resolvedProps.href"
+      [target]="resolvedProps.target"
+      [shape]="resolvedProps.shape"
+      (click)="clickHandler()"
+      [disabled]="resolvedProps.state === states.DISABLED"
+      [ngClass]="resolvedProps.size ? [resolvedProps.size] : []"
+    >
+      <ion-icon *ngIf="resolvedProps.icon" [slot]="resolvedProps.icon.slot" [name]="resolvedProps.icon.name"></ion-icon>
+      <ion-spinner *ngIf="resolvedProps.state === states.WORKING" name="circular"></ion-spinner>
+      <ion-text *ngIf="resolvedProps.state !== states.WORKING">{{ displayText }}</ion-text>
+    </ion-button>
+  `,
+  styleUrls: ['./button.component.scss'],
+})
+/**
+ * val-button
+ *
+ * A customizable button supporting icons, loading state, navigation, and presets.
+ *
+ * @example With preset (recommended with i18n):
+ * <val-button preset="primary-action" [props]="{ text: 'Submit' | t }"></val-button>
+ *
+ * @example Static text:
+ * <val-button [props]="{
+ *   text: 'Save',
+ *   color: 'primary',
+ *   type: 'button',
+ *   state: 'ENABLED',
+ *   icon: { name: 'save', slot: 'start' }
+ * }" (onClick)="handler()"></val-button>
+ *
+ * @input preset: string - Name of preset to apply (e.g., 'primary-action', 'danger')
+ * @input props: ButtonMetadata - Configuration for the button (overrides preset values)
+ * @output onClick - Emits when the button is clicked
+ */
+export class ButtonComponent implements OnInit, OnChanges {
+  states = ComponentStates;
+
+  private presets = inject(PresetService);
+
+  /**
+   * The text to display on the button.
+   */
+  displayText: string = '';
+
+  /**
+   * Preset name to apply. Presets define reusable button configurations
+   * (size, color, fill, etc.) that can be registered at app level.
+   *
+   * @example
+   * <val-button preset="primary-action" [props]="{ text: 'Save' }"></val-button>
+   */
+  @Input() preset?: string;
+
+  /**
+   * Button configuration. Values here override preset values.
+   * When using presets, only partial props are needed (preset provides defaults).
+   */
+  @Input() props: Partial<ButtonMetadata> = {};
+
+  /**
+   * Resolved props after merging preset + explicit props.
+   * Preset values are overridden by explicit props.
+   */
+  resolvedProps: ButtonMetadata = {} as ButtonMetadata;
+
+  /**
+   * Event emitted when the button is clicked.
+   */
+  @Output()
+  onClick = new EventEmitter<string>();
+
+  constructor(
+    private download: DownloadService,
+    _icon: IconService,
+    private navigation: NavigationService
+  ) {}
+
+  ngOnInit() {
+    this.resolveProps();
+    this.setupDisplayText();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['preset'] || changes['props']) {
+      this.resolveProps();
+      this.setupDisplayText();
+    }
+  }
+
+  /**
+   * Merge preset configuration with explicit props.
+   * Explicit props take precedence over preset values.
+   */
+  private resolveProps(): void {
+    const presetProps = this.preset
+      ? (this.presets.get('button', this.preset) as Partial<ButtonMetadata>)
+      : {};
+
+    // Merge: preset defaults < explicit props
+    this.resolvedProps = {
+      ...presetProps,
+      ...this.props,
+    } as ButtonMetadata;
+  }
+
+  /**
+   * Set up the text content based on the resolved props configuration.
+   */
+  private setupDisplayText(): void {
+    if (this.resolvedProps.text) {
+      if (this.resolvedProps.contentInterpolation) {
+        this.displayText = this.interpolateContent(this.resolvedProps.text, this.resolvedProps.contentInterpolation);
+      } else {
+        this.displayText = this.resolvedProps.text;
+      }
+    } else if (this.resolvedProps.contentFallback) {
+      // Backwards compatibility: use fallback if text is not provided
+      this.displayText = this.resolvedProps.contentFallback;
+    } else {
+      this.displayText = '';
+    }
+  }
+
+  /**
+   * Interpolate placeholders in content with provided values.
+   * Supports {{placeholder}} format.
+   */
+  private interpolateContent(content: string, values: Record<string, any>): string {
+    return content.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+      return values[key] !== undefined ? String(values[key]) : match;
+    });
+  }
+
+  clickHandler() {
+    if (this.resolvedProps.state === this.states.DISABLED) {
+      return;
+    }
+
+    if (this.resolvedProps.actionType === ActionType.APP_NAVIGATION) {
+      this.navigation.navigateByUrl(this.resolvedProps.link);
+    }
+
+    if (this.resolvedProps.download) {
+      this.download.downloadLinkFromBrowser(this.resolvedProps.download);
+    }
+
+    if (this.resolvedProps.handler) {
+      this.resolvedProps.handler(this.resolvedProps.ref);
+    }
+
+    this.onClick.emit(this.resolvedProps.token);
+  }
+}