valtech-components 2.0.687 → 2.0.689

package/src/lib/components/molecules/textarea-input/textarea-input.stories.ts

@@ -0,0 +1,329 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { TextareaInputComponent } from './textarea-input.component';
+import { TextareaInputMetadata } from './types';
+
+const createTextareaInputProps = (overrides: Partial<TextareaInputMetadata> = {}): TextareaInputMetadata => ({
+  control: new FormControl(''),
+  placeholder: 'Enter text...',
+  rows: 4,
+  ...overrides,
+});
+
+// Pre-create all props at module level
+const defaultProps = createTextareaInputProps();
+const withLabelProps = createTextareaInputProps({ label: 'Description', placeholder: 'Enter description...' });
+const withValueProps = createTextareaInputProps({
+  control: new FormControl('This is some pre-filled content in the textarea.'),
+  label: 'Comments',
+});
+const withHintProps = createTextareaInputProps({
+  label: 'Bio',
+  placeholder: 'Tell us about yourself...',
+  hint: 'This will be shown on your profile',
+});
+const withCounterProps = createTextareaInputProps({
+  label: 'Message',
+  placeholder: 'Write your message...',
+  maxLength: 280,
+  showCounter: true,
+});
+const remainingCounterProps = createTextareaInputProps({
+  label: 'Tweet',
+  placeholder: "What's happening?",
+  maxLength: 280,
+  showCounter: true,
+  counterFormat: 'remaining',
+});
+const autoGrowProps = createTextareaInputProps({
+  label: 'Notes',
+  placeholder: 'Start typing...',
+  autoGrow: true,
+  rows: 2,
+});
+const moreRowsProps = createTextareaInputProps({
+  label: 'Long text',
+  placeholder: 'Write a longer text...',
+  rows: 8,
+});
+const outlineProps = createTextareaInputProps({
+  label: 'Outline style',
+  fill: 'outline',
+});
+const solidProps = createTextareaInputProps({
+  label: 'Solid style',
+  fill: 'solid',
+});
+const floatingLabelProps = createTextareaInputProps({
+  label: 'Floating label',
+  labelPlacement: 'floating',
+  fill: 'outline',
+});
+const withValidationProps = createTextareaInputProps({
+  control: new FormControl('', [Validators.required, Validators.minLength(10)]),
+  label: 'Required field',
+  placeholder: 'Minimum 10 characters',
+  showErrors: true,
+  errors: {
+    required: 'This field is required',
+    minlength: 'Minimum 10 characters required',
+  },
+});
+const disabledProps = createTextareaInputProps({
+  control: new FormControl({ value: 'This field is disabled', disabled: true }),
+  label: 'Disabled',
+  state: 'DISABLED',
+});
+
+// Showcase props
+const showcaseBasicProps = createTextareaInputProps({
+  label: 'Description',
+  placeholder: 'Enter description...',
+});
+const showcaseCounterProps = createTextareaInputProps({
+  label: 'Bio',
+  placeholder: 'Tell us about yourself...',
+  maxLength: 200,
+  showCounter: true,
+  counterFormat: 'remaining',
+});
+const showcaseAutoGrowProps = createTextareaInputProps({
+  label: 'Notes',
+  placeholder: 'Auto-growing textarea...',
+  autoGrow: true,
+  rows: 2,
+});
+const showcaseValidationProps = createTextareaInputProps({
+  control: new FormControl('', [Validators.required]),
+  label: 'Required Message',
+  placeholder: 'This field is required',
+  showErrors: true,
+  errors: { required: 'Please enter a message' },
+});
+
+const meta: Meta<TextareaInputComponent> = {
+  title: 'Molecules/TextareaInput',
+  component: TextareaInputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ReactiveFormsModule, TextareaInputComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Textarea input configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'TextareaInputMetadata',
+          detail: `{
+  control: FormControl<string>;
+  label?: string;
+  placeholder?: string;
+  hint?: string;
+  rows?: number;
+  autoGrow?: boolean;
+  maxLength?: number;
+  showCounter?: boolean;
+  counterFormat?: 'remaining' | 'current';
+  fill?: 'outline' | 'solid';
+  labelPlacement?: 'fixed' | 'floating' | 'stacked';
+  showErrors?: boolean;
+  errors?: Record<string, string>;
+}`,
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-textarea-input
+
+A textarea input field with character counter, auto-grow, and validation support.
+
+### Features
+
+- **Character Counter**: Show current/max or remaining characters
+- **Auto Grow**: Expand based on content
+- **Validation**: Built-in error display
+- **Label Placement**: Fixed, floating, or stacked
+
+### Usage
+
+\`\`\`html
+<val-textarea-input
+  [props]="{
+    control: messageControl,
+    label: 'Message',
+    placeholder: 'Enter your message...',
+    maxLength: 500,
+    showCounter: true
+  }"
+></val-textarea-input>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<TextareaInputComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-textarea-input [props]="textareaProps"></val-textarea-input></div>`,
+    props: { textareaProps: defaultProps },
+  }),
+};
+
+export const WithLabel: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-textarea-input [props]="textareaProps"></val-textarea-input></div>`,
+    props: { textareaProps: withLabelProps },
+  }),
+};
+
+export const WithValue: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-textarea-input [props]="textareaProps"></val-textarea-input></div>`,
+    props: { textareaProps: withValueProps },
+  }),
+};
+
+export const WithHint: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-textarea-input [props]="textareaProps"></val-textarea-input></div>`,
+    props: { textareaProps: withHintProps },
+  }),
+};
+
+export const WithCounter: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-textarea-input [props]="textareaProps"></val-textarea-input></div>`,
+    props: { textareaProps: withCounterProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows character count in current/max format.',
+      },
+    },
+  },
+};
+
+export const RemainingCounter: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-textarea-input [props]="textareaProps"></val-textarea-input></div>`,
+    props: { textareaProps: remainingCounterProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows remaining characters (Twitter-style).',
+      },
+    },
+  },
+};
+
+export const AutoGrow: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-textarea-input [props]="textareaProps"></val-textarea-input></div>`,
+    props: { textareaProps: autoGrowProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Textarea automatically grows as you type.',
+      },
+    },
+  },
+};
+
+export const MoreRows: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-textarea-input [props]="textareaProps"></val-textarea-input></div>`,
+    props: { textareaProps: moreRowsProps },
+  }),
+};
+
+export const FillOutline: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-textarea-input [props]="textareaProps"></val-textarea-input></div>`,
+    props: { textareaProps: outlineProps },
+  }),
+};
+
+export const FillSolid: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-textarea-input [props]="textareaProps"></val-textarea-input></div>`,
+    props: { textareaProps: solidProps },
+  }),
+};
+
+export const FloatingLabel: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-textarea-input [props]="textareaProps"></val-textarea-input></div>`,
+    props: { textareaProps: floatingLabelProps },
+  }),
+};
+
+export const WithValidation: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-textarea-input [props]="textareaProps"></val-textarea-input></div>`,
+    props: { textareaProps: withValidationProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Click in the field and then click out to see validation error.',
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-textarea-input [props]="textareaProps"></val-textarea-input></div>`,
+    props: { textareaProps: disabledProps },
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 450px;">
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Basic Textarea</h3>
+          <val-textarea-input [props]="basic"></val-textarea-input>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">With Character Counter</h3>
+          <val-textarea-input [props]="counter"></val-textarea-input>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Auto-Growing</h3>
+          <val-textarea-input [props]="autoGrow"></val-textarea-input>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">With Validation</h3>
+          <val-textarea-input [props]="validation"></val-textarea-input>
+        </div>
+      </div>
+    `,
+    props: {
+      basic: showcaseBasicProps,
+      counter: showcaseCounterProps,
+      autoGrow: showcaseAutoGrowProps,
+      validation: showcaseValidationProps,
+    },
+  }),
+};

package/src/lib/components/molecules/textarea-input/types.ts

@@ -0,0 +1,83 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+
+/**
+ * Metadata for the textarea input component.
+ */
+export interface TextareaInputMetadata {
+  /** Associated form control */
+  control: FormControl<string>;
+  /** Unique token for the input */
+  token?: string;
+  /** Display label */
+  label?: string;
+  /** Field name */
+  name?: string;
+  /** Help text */
+  hint?: string;
+  /** Input placeholder */
+  placeholder?: string;
+  /** Field state */
+  state?: ComponentState;
+  /** Initial value for the field */
+  value?: string;
+  /** Default value configuration */
+  withDefault?: string | boolean;
+
+  // === Textarea specific ===
+  /** Number of visible rows */
+  rows?: number;
+  /** Minimum number of rows (for autoGrow) */
+  minRows?: number;
+  /** Maximum number of rows (for autoGrow) */
+  maxRows?: number;
+  /** Auto grow textarea based on content */
+  autoGrow?: boolean;
+  /** Maximum character count */
+  maxLength?: number;
+  /** Minimum character count */
+  minLength?: number;
+  /** Show character counter */
+  showCounter?: boolean;
+  /** Counter format: 'remaining' shows remaining chars, 'current' shows current/max */
+  counterFormat?: 'remaining' | 'current';
+  /** Disable resize */
+  disableResize?: boolean;
+  /** Input mode for virtual keyboard */
+  inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+  /** Autocapitalize behavior */
+  autocapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+  /** Enable spellcheck */
+  spellcheck?: boolean;
+  /** Wrap mode */
+  wrap?: 'hard' | 'soft' | 'off';
+
+  // === Styling ===
+  /** Component color */
+  color?: Color;
+  /** Fill style */
+  fill?: 'outline' | 'solid';
+  /** Label placement */
+  labelPlacement?: 'fixed' | 'floating' | 'stacked' | 'start' | 'end';
+  /** Show clear button */
+  clearOnEdit?: boolean;
+  /** Custom CSS class */
+  cssClass?: string;
+
+  // === Reactive content ===
+  /** Content key for reactive label */
+  labelContentKey?: string;
+  /** Content key for reactive placeholder */
+  placeholderContentKey?: string;
+  /** Content key for reactive hint */
+  hintContentKey?: string;
+  /** Component class name for content lookup */
+  contentClass?: string;
+
+  // === Validation display ===
+  /** Custom error messages */
+  errors?: Record<string, string>;
+  /** Show validation errors */
+  showErrors?: boolean;
+}

package/src/lib/components/molecules/ticket-grid/ticket-grid.component.scss

@@ -0,0 +1,270 @@
+:host {
+  display: block;
+}
+
+.ticket-grid-container {
+  --grid-columns: 10;
+  --grid-gap: 4px;
+  --selected-color: var(--ion-color-primary);
+
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+// === Controls ===
+
+.grid-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ticket-search {
+  flex: 1;
+  min-width: 200px;
+  max-width: 300px;
+  --border-radius: 8px;
+}
+
+// === Legend ===
+
+.ticket-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 8px 0;
+
+  &.bottom {
+    border-top: 1px solid var(--ion-color-light-shade);
+    padding-top: 12px;
+    margin-top: 8px;
+  }
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--ion-color-medium-shade);
+}
+
+.legend-color {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid var(--ion-color-medium);
+
+  &.status-available {
+    background: var(--ion-color-light);
+    border-color: var(--ion-color-medium);
+  }
+
+  &.status-selected {
+    background: var(--selected-color);
+    border-color: var(--selected-color);
+  }
+
+  &.status-sold {
+    background: var(--ion-color-medium);
+    border-color: var(--ion-color-medium-shade);
+  }
+
+  &.status-reserved {
+    background: var(--ion-color-warning-tint);
+    border-color: var(--ion-color-warning);
+  }
+
+  &.status-disabled {
+    background: var(--ion-color-light-shade);
+    border-color: var(--ion-color-medium);
+    opacity: 0.5;
+  }
+}
+
+.legend-count {
+  color: var(--ion-color-medium);
+  font-size: 11px;
+}
+
+// === Summary ===
+
+.ticket-summary {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 14px;
+  color: var(--ion-color-dark);
+  padding: 8px 12px;
+  background: var(--ion-color-light);
+  border-radius: 8px;
+}
+
+.summary-item {
+  &:not(:last-child)::after {
+    content: '•';
+    margin-left: 8px;
+    color: var(--ion-color-medium);
+  }
+}
+
+// === Grid ===
+
+.ticket-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  gap: var(--grid-gap);
+}
+
+.ticket-cell {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--ion-color-medium);
+  border-radius: 4px;
+  background: var(--ion-color-light);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--ion-color-dark);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  padding: 0;
+  font-family: inherit;
+
+  &:hover:not(:disabled) {
+    border-color: var(--selected-color);
+    transform: scale(1.05);
+    z-index: 1;
+  }
+
+  &:focus {
+    outline: 2px solid var(--selected-color);
+    outline-offset: 1px;
+  }
+
+  // Status styles
+  &.status-available {
+    background: var(--ion-color-light);
+    border-color: var(--ion-color-medium);
+
+    &:hover:not(:disabled) {
+      background: var(--ion-color-light-shade);
+    }
+  }
+
+  &.status-selected {
+    background: var(--selected-color);
+    border-color: var(--selected-color);
+    color: white;
+    font-weight: 600;
+  }
+
+  &.status-sold {
+    background: var(--ion-color-medium);
+    border-color: var(--ion-color-medium-shade);
+    color: var(--ion-color-medium-contrast);
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+
+  &.status-reserved {
+    background: var(--ion-color-warning-tint);
+    border-color: var(--ion-color-warning);
+    color: var(--ion-color-warning-shade);
+    cursor: not-allowed;
+  }
+
+  &.status-disabled {
+    background: var(--ion-color-light-shade);
+    border-color: var(--ion-color-medium);
+    color: var(--ion-color-medium);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  // Highlighted (search match)
+  &.highlighted {
+    box-shadow: 0 0 0 2px var(--ion-color-tertiary);
+    z-index: 2;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+// === Size variants ===
+
+.size-small {
+  .ticket-grid {
+    --grid-gap: 2px;
+  }
+
+  .ticket-cell {
+    font-size: 10px;
+    border-radius: 2px;
+  }
+
+  .ticket-legend {
+    gap: 12px;
+  }
+
+  .legend-color {
+    width: 12px;
+    height: 12px;
+  }
+
+  .legend-item {
+    font-size: 11px;
+  }
+}
+
+.size-medium {
+  // Default styles
+}
+
+.size-large {
+  .ticket-grid {
+    --grid-gap: 6px;
+  }
+
+  .ticket-cell {
+    font-size: 14px;
+    border-radius: 6px;
+    font-weight: 600;
+  }
+
+  .ticket-legend {
+    gap: 20px;
+  }
+
+  .legend-color {
+    width: 20px;
+    height: 20px;
+  }
+
+  .legend-item {
+    font-size: 14px;
+  }
+}
+
+// === Responsive ===
+
+@media (max-width: 576px) {
+  .grid-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .ticket-search {
+    max-width: 100%;
+  }
+
+  .ticket-legend {
+    justify-content: center;
+  }
+}