valtech-components 2.0.690 → 2.0.691

package/src/lib/components/molecules/multi-select-search/multi-select-search.stories.ts

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { FormControl } from '@angular/forms';
+import { MultiSelectSearchComponent } from './multi-select-search.component';
+
+const countryOptions = [
+  { id: 'us', name: 'United States' },
+  { id: 'uk', name: 'United Kingdom' },
+  { id: 'ca', name: 'Canada' },
+  { id: 'au', name: 'Australia' },
+  { id: 'de', name: 'Germany' },
+  { id: 'fr', name: 'France' },
+  { id: 'es', name: 'Spain' },
+  { id: 'it', name: 'Italy' },
+  { id: 'jp', name: 'Japan' },
+  { id: 'br', name: 'Brazil' },
+];
+
+const categoryOptions = [
+  { id: 'tech', name: 'Technology' },
+  { id: 'health', name: 'Healthcare' },
+  { id: 'finance', name: 'Finance' },
+  { id: 'education', name: 'Education' },
+  { id: 'retail', name: 'Retail' },
+  { id: 'manufacturing', name: 'Manufacturing' },
+];
+
+const skillOptions = [
+  { id: 'js', name: 'JavaScript' },
+  { id: 'ts', name: 'TypeScript' },
+  { id: 'py', name: 'Python' },
+  { id: 'java', name: 'Java' },
+  { id: 'csharp', name: 'C#' },
+  { id: 'go', name: 'Go' },
+  { id: 'rust', name: 'Rust' },
+  { id: 'ruby', name: 'Ruby' },
+  { id: 'php', name: 'PHP' },
+  { id: 'swift', name: 'Swift' },
+];
+
+const createMultiSelectProps = (overrides: Record<string, any> = {}) => ({
+  control: new FormControl(''),
+  options: countryOptions,
+  placeholder: 'Select options...',
+  ...overrides,
+});
+
+const defaultProps = createMultiSelectProps();
+
+const withPreselectedProps = createMultiSelectProps({
+  control: new FormControl('us,uk,ca'),
+  options: countryOptions,
+  placeholder: 'Select countries...',
+});
+
+const categoriesProps = createMultiSelectProps({
+  control: new FormControl(''),
+  options: categoryOptions,
+  placeholder: 'Select categories...',
+});
+
+const skillsProps = createMultiSelectProps({
+  control: new FormControl('js,ts'),
+  options: skillOptions,
+  placeholder: 'Select skills...',
+});
+
+const disabledProps = createMultiSelectProps({
+  control: new FormControl({ value: 'us,uk', disabled: true }),
+  options: countryOptions,
+  placeholder: 'Disabled input',
+});
+
+const showcaseCountriesProps = createMultiSelectProps({
+  control: new FormControl(''),
+  options: countryOptions,
+  placeholder: 'Select target countries...',
+});
+
+const showcaseSkillsProps = createMultiSelectProps({
+  control: new FormControl(''),
+  options: skillOptions,
+  placeholder: 'Select required skills...',
+});
+
+const meta: Meta<MultiSelectSearchComponent> = {
+  title: 'Molecules/MultiSelectSearch',
+  component: MultiSelectSearchComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Configuration object for the multi-select search',
+    },
+    label: {
+      description: 'Label for the modal header',
+      control: 'text',
+    },
+    labelProperty: {
+      description: 'Property name to display as label',
+      control: 'text',
+    },
+    valueProperty: {
+      description: 'Property name to use as value',
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<MultiSelectSearchComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    props: { props: defaultProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-multi-select-search [props]="props" label="Select Countries"></val-multi-select-search>
+      </div>
+    `,
+  }),
+};
+
+export const WithPreselected: Story = {
+  render: () => ({
+    props: { props: withPreselectedProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-multi-select-search [props]="props" label="Select Countries"></val-multi-select-search>
+      </div>
+    `,
+  }),
+};
+
+export const Categories: Story = {
+  render: () => ({
+    props: { props: categoriesProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-multi-select-search [props]="props" label="Select Categories"></val-multi-select-search>
+      </div>
+    `,
+  }),
+};
+
+export const Skills: Story = {
+  render: () => ({
+    props: { props: skillsProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-multi-select-search [props]="props" label="Select Skills"></val-multi-select-search>
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  render: () => ({
+    props: { props: disabledProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-multi-select-search [props]="props" label="Select Countries"></val-multi-select-search>
+      </div>
+    `,
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    props: {
+      countriesProps: showcaseCountriesProps,
+      skillsProps: showcaseSkillsProps,
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
+        <div>
+          <h4 style="margin-bottom: 8px;">Target Countries</h4>
+          <p style="color: var(--ion-color-medium); font-size: 14px; margin-bottom: 8px;">Select countries for market expansion:</p>
+          <val-multi-select-search [props]="countriesProps" label="Select Countries"></val-multi-select-search>
+        </div>
+
+        <div>
+          <h4 style="margin-bottom: 8px;">Required Skills</h4>
+          <p style="color: var(--ion-color-medium); font-size: 14px; margin-bottom: 8px;">Select programming languages for the job posting:</p>
+          <val-multi-select-search [props]="skillsProps" label="Select Skills"></val-multi-select-search>
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/lib/components/molecules/notes-box/notes-box.component.scss

@@ -0,0 +1,5 @@
+@import '../../styles/mixins.scss';
+
+.content-container {
+  display: inline-grid;
+}

package/src/lib/components/molecules/notes-box/notes-box.component.ts

@@ -0,0 +1,62 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { BoxComponent } from '../../atoms/box/box.component';
+import { TextComponent } from '../../atoms/text/text.component';
+import { NotesBoxMetadata } from './types';
+
+@Component({
+  selector: 'val-notes-box',
+  standalone: true,
+  imports: [CommonModule, BoxComponent, TextComponent],
+  template: `
+    <val-box
+      [props]="{
+        icon: '',
+        bordered: false,
+        color: props.color,
+        leftBorder: true,
+        rounded: props.rounded,
+        padding: props.padding,
+      }"
+    >
+      <div [ngClass]="['content-container', props.size]" body>
+        @if (props.prefix) {
+          <val-text
+            [props]="{ content: props.prefix, color: props.textColor, bold: true, size: props.size }"
+          ></val-text>
+        }
+        <val-text [props]="{ content: props.text, color: props.textColor, bold: false, size: props.size }"></val-text>
+      </div>
+    </val-box>
+  `,
+  styleUrls: ['./notes-box.component.scss'],
+})
+/**
+ * val-notes-box
+ *
+ * Displays a styled notes/info box with optional prefix and configurable color, size, and padding.
+ *
+ * @example
+ * <val-notes-box [props]="{ text: 'Note', prefix: 'Info', color: 'primary', textColor: 'dark', size: 'medium', rounded: true, padding: '8px' }"></val-notes-box>
+ *
+ * @input props: NotesBoxMetadata - Configuration for the notes box (text, prefix, color, textColor, size, rounded, padding)
+ */
+export class NotesBoxComponent implements OnInit {
+  /**
+   * Notes box configuration object.
+   * @type {NotesBoxMetadata}
+   * @property text - The main text content.
+   * @property prefix - Optional prefix text (bold).
+   * @property color - The background color of the box.
+   * @property textColor - The color of the text.
+   * @property size - The size of the text and box.
+   * @property rounded - Whether the box has rounded corners.
+   * @property padding - Custom padding for the box.
+   */
+  @Input()
+  props: NotesBoxMetadata;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/molecules/notes-box/notes-box.stories.ts

@@ -0,0 +1,308 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { NotesBoxComponent } from './notes-box.component';
+import { NotesBoxMetadata } from './types';
+
+const meta: Meta<NotesBoxComponent> = {
+  title: 'Molecules/Notes Box',
+  component: NotesBoxComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, NotesBoxComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Notes box configuration object',
+      control: 'object',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-notes-box
+
+A styled information box with an optional prefix and left border accent. Ideal for displaying notes, tips, warnings, or important information.
+
+### Usage
+
+\`\`\`html
+<val-notes-box
+  [props]="{
+    text: 'This is important information.',
+    prefix: 'Note:',
+    color: 'warning',
+    textColor: 'dark',
+    size: 'medium',
+    rounded: true,
+    padding: '16px'
+  }">
+</val-notes-box>
+\`\`\`
+
+### Features
+
+- Left border accent for visual distinction
+- Optional bold prefix text
+- Configurable background and text colors
+- Multiple size options
+- Optional rounded corners
+- Customizable padding
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<NotesBoxComponent>;
+
+const createProps = (overrides: Partial<NotesBoxMetadata> = {}): NotesBoxMetadata => ({
+  text: 'This is important information that the user should be aware of.',
+  prefix: 'Note:',
+  color: 'light',
+  textColor: 'dark',
+  size: 'medium',
+  rounded: true,
+  padding: '16px',
+  ...overrides,
+});
+
+export const Default: Story = {
+  args: {
+    props: createProps(),
+  },
+};
+
+export const InfoNote: Story = {
+  args: {
+    props: createProps({
+      text: 'You can customize your settings at any time from the preferences menu.',
+      prefix: 'Info:',
+      color: 'primary',
+      textColor: 'dark',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'An informational note with primary color accent.',
+      },
+    },
+  },
+};
+
+export const WarningNote: Story = {
+  args: {
+    props: createProps({
+      text: 'This action cannot be undone. Please proceed with caution.',
+      prefix: 'Warning:',
+      color: 'warning',
+      textColor: 'dark',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A warning note to alert users of potential risks.',
+      },
+    },
+  },
+};
+
+export const ErrorNote: Story = {
+  args: {
+    props: createProps({
+      text: 'There was an error processing your request. Please try again later.',
+      prefix: 'Error:',
+      color: 'danger',
+      textColor: 'dark',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'An error note for displaying error messages.',
+      },
+    },
+  },
+};
+
+export const SuccessNote: Story = {
+  args: {
+    props: createProps({
+      text: 'Your changes have been saved successfully.',
+      prefix: 'Success:',
+      color: 'success',
+      textColor: 'dark',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A success note for positive feedback.',
+      },
+    },
+  },
+};
+
+export const TipNote: Story = {
+  args: {
+    props: createProps({
+      text: 'Press Ctrl+S to save your work quickly.',
+      prefix: 'Tip:',
+      color: 'tertiary',
+      textColor: 'dark',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A tip note for helpful suggestions.',
+      },
+    },
+  },
+};
+
+export const WithoutPrefix: Story = {
+  args: {
+    props: createProps({
+      text: 'This note does not have a prefix, showing just the main text content.',
+      prefix: '',
+      color: 'light',
+      textColor: 'medium',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Notes box without a prefix, useful for simple informational text.',
+      },
+    },
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    props: createProps({
+      text: 'Small text for compact layouts.',
+      prefix: 'Note:',
+      size: 'small',
+      padding: '8px',
+    }),
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    props: createProps({
+      text: 'Larger text for more prominent notes.',
+      prefix: 'Important:',
+      size: 'large',
+      padding: '20px',
+    }),
+  },
+};
+
+export const XLargeSize: Story = {
+  args: {
+    props: createProps({
+      text: 'Extra large text for maximum visibility.',
+      prefix: 'Alert:',
+      size: 'xlarge',
+      padding: '24px',
+    }),
+  },
+};
+
+export const NotRounded: Story = {
+  args: {
+    props: createProps({
+      text: 'This box has sharp corners for a different visual style.',
+      prefix: 'Note:',
+      rounded: false,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Notes box without rounded corners.',
+      },
+    },
+  },
+};
+
+export const CustomPadding: Story = {
+  args: {
+    props: createProps({
+      text: 'This box has extra padding for emphasis.',
+      prefix: 'Featured:',
+      color: 'secondary',
+      padding: '24px 32px',
+    }),
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    props: createProps({
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+      prefix: 'Details:',
+      color: 'light',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Notes box with longer content demonstrating text wrapping.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px; padding: 16px;">
+        <h3 style="margin: 0; color: #666;">Color Variants</h3>
+
+        <val-notes-box [props]="infoProps"></val-notes-box>
+        <val-notes-box [props]="warningProps"></val-notes-box>
+        <val-notes-box [props]="errorProps"></val-notes-box>
+        <val-notes-box [props]="successProps"></val-notes-box>
+        <val-notes-box [props]="tipProps"></val-notes-box>
+
+        <h3 style="margin: 16px 0 0 0; color: #666;">Size Variants</h3>
+
+        <val-notes-box [props]="smallProps"></val-notes-box>
+        <val-notes-box [props]="mediumProps"></val-notes-box>
+        <val-notes-box [props]="largeProps"></val-notes-box>
+
+        <h3 style="margin: 16px 0 0 0; color: #666;">Without Prefix</h3>
+
+        <val-notes-box [props]="noPrefixProps"></val-notes-box>
+      </div>
+    `,
+    props: {
+      infoProps: createProps({ text: 'General information for the user.', prefix: 'Info:', color: 'primary' }),
+      warningProps: createProps({ text: 'Proceed with caution.', prefix: 'Warning:', color: 'warning' }),
+      errorProps: createProps({ text: 'An error has occurred.', prefix: 'Error:', color: 'danger' }),
+      successProps: createProps({ text: 'Operation completed successfully.', prefix: 'Success:', color: 'success' }),
+      tipProps: createProps({ text: 'Here is a helpful tip.', prefix: 'Tip:', color: 'tertiary' }),
+      smallProps: createProps({ text: 'Small note', prefix: 'Small:', size: 'small', padding: '8px' }),
+      mediumProps: createProps({ text: 'Medium note', prefix: 'Medium:', size: 'medium' }),
+      largeProps: createProps({ text: 'Large note', prefix: 'Large:', size: 'large', padding: '20px' }),
+      noPrefixProps: createProps({ text: 'This note has no prefix and uses only the main text.', prefix: '', color: 'light' }),
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A showcase of all notes box variants including colors and sizes.',
+      },
+    },
+  },
+};

package/src/lib/components/molecules/notes-box/types.ts

@@ -0,0 +1,22 @@
+import { Color } from '@ionic/core';
+
+/**
+ * Props for val-notes-box component.
+ *
+ * @property color - The background color of the box.
+ * @property textColor - The color of the text.
+ * @property prefix - Optional prefix text (bold).
+ * @property text - The main text content.
+ * @property size - The size of the text and box ('small' | 'medium' | 'large' | 'xlarge').
+ * @property rounded - Whether the box has rounded corners.
+ * @property padding - Custom padding for the box (optional).
+ */
+export interface NotesBoxMetadata {
+  color: Color;
+  textColor: Color;
+  prefix: string;
+  text: string;
+  size: 'small' | 'medium' | 'large' | 'xlarge';
+  rounded: boolean;
+  padding?: string;
+}

package/src/lib/components/molecules/number-from-to/number-from-to.component.scss

@@ -0,0 +1,10 @@
+.number-from-to-container {
+  // display: flex;
+  // gap: 1rem;
+  // align-items: flex-end;
+
+  // @media (max-width: 768px) {
+  //   flex-direction: column;
+  //   gap: 0.5rem;
+  // }
+}