valtech-components 2.0.795 → 2.0.796

package/src/lib/components/molecules/chip-group/chip-group.stories.ts

@@ -1,307 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { ChipGroupComponent } from './chip-group.component';
-import { ChipGroupMetadata, ChipMetadata } from './types';
-
-const createChipGroupProps = (overrides: Partial<ChipGroupMetadata> = {}): ChipGroupMetadata => ({
-  chips: [
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ],
-  color: 'primary',
-  ...overrides,
-});
-
-// Pre-create all props at module level
-const defaultProps = createChipGroupProps();
-const selectableProps = createChipGroupProps({
-  selectable: true,
-  chips: [
-    { value: 'small', label: 'Small' },
-    { value: 'medium', label: 'Medium', selected: true },
-    { value: 'large', label: 'Large' },
-  ],
-});
-const multiSelectProps = createChipGroupProps({
-  selectable: true,
-  multiple: true,
-  selectedColor: 'success',
-  chips: [
-    { value: 'angular', label: 'Angular', selected: true },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue', selected: true },
-    { value: 'svelte', label: 'Svelte' },
-  ],
-});
-const removableProps = createChipGroupProps({
-  removable: true,
-  chips: [
-    { value: 'tag1', label: 'JavaScript', icon: 'pricetag' },
-    { value: 'tag2', label: 'TypeScript', icon: 'pricetag' },
-    { value: 'tag3', label: 'Python', icon: 'pricetag' },
-  ],
-  color: 'tertiary',
-});
-const withIconsProps = createChipGroupProps({
-  chips: [
-    { value: 'home', label: 'Home', icon: 'home' },
-    { value: 'search', label: 'Search', icon: 'search' },
-    { value: 'settings', label: 'Settings', icon: 'settings' },
-  ],
-});
-const outlineProps = createChipGroupProps({
-  outline: true,
-  selectable: true,
-  selectedColor: 'primary',
-  chips: [
-    { value: 'opt1', label: 'Option 1' },
-    { value: 'opt2', label: 'Option 2', selected: true },
-    { value: 'opt3', label: 'Option 3' },
-  ],
-});
-const colorsProps = createChipGroupProps({
-  chips: [
-    { value: 'primary', label: 'Primary', color: 'primary' },
-    { value: 'secondary', label: 'Secondary', color: 'secondary' },
-    { value: 'success', label: 'Success', color: 'success' },
-    { value: 'warning', label: 'Warning', color: 'warning' },
-    { value: 'danger', label: 'Danger', color: 'danger' },
-  ],
-});
-const disabledProps = createChipGroupProps({
-  selectable: true,
-  chips: [
-    { value: 'enabled', label: 'Enabled' },
-    { value: 'disabled', label: 'Disabled', disabled: true },
-    { value: 'also-enabled', label: 'Also Enabled' },
-  ],
-});
-
-// Showcase props
-const showcaseFiltersProps = createChipGroupProps({
-  selectable: true,
-  multiple: true,
-  outline: true,
-  selectedColor: 'primary',
-  chips: [
-    { value: 'all', label: 'All', selected: true },
-    { value: 'electronics', label: 'Electronics' },
-    { value: 'clothing', label: 'Clothing' },
-    { value: 'home', label: 'Home & Garden' },
-  ],
-});
-const showcaseTagsProps = createChipGroupProps({
-  removable: true,
-  color: 'medium',
-  chips: [
-    { value: 't1', label: 'travel' },
-    { value: 't2', label: 'photography' },
-    { value: 't3', label: 'nature' },
-  ],
-});
-const showcaseSizesProps = createChipGroupProps({
-  selectable: true,
-  chips: [
-    { value: 'xs', label: 'XS' },
-    { value: 's', label: 'S' },
-    { value: 'm', label: 'M', selected: true },
-    { value: 'l', label: 'L' },
-    { value: 'xl', label: 'XL' },
-  ],
-});
-
-const meta: Meta<ChipGroupComponent> = {
-  title: 'Molecules/ChipGroup',
-  component: ChipGroupComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, ChipGroupComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Chip group configuration object',
-      control: 'object',
-      table: {
-        type: {
-          summary: 'ChipGroupMetadata',
-          detail: `{
-  chips: ChipMetadata[];
-  selectable?: boolean;
-  multiple?: boolean;
-  removable?: boolean;
-  color?: Color;
-  selectedColor?: Color;
-  outline?: boolean;
-  wrap?: boolean;
-}`,
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-chip-group
-
-A group of chips for tags, filters, or selections.
-
-### Features
-
-- **Single/Multiple Selection**: Choose one or many options
-- **Removable Chips**: Allow users to remove chips
-- **Icons**: Support for icons in chips
-- **Colors**: All Ionic colors supported
-- **Outline Style**: Outlined chips with fill on selection
-
-### Usage
-
-\`\`\`html
-<!-- Selectable chips -->
-<val-chip-group
-  [props]="{
-    chips: [
-      { value: 'opt1', label: 'Option 1' },
-      { value: 'opt2', label: 'Option 2' }
-    ],
-    selectable: true,
-    multiple: true
-  }"
-  (selectionChange)="onSelectionChange($event)"
-></val-chip-group>
-
-<!-- Removable tags -->
-<val-chip-group
-  [props]="{
-    chips: [...],
-    removable: true
-  }"
-  (chipRemove)="onChipRemove($event)"
-></val-chip-group>
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<ChipGroupComponent>;
-
-export const Default: Story = {
-  render: () => ({
-    template: `<val-chip-group [props]="chipGroupProps"></val-chip-group>`,
-    props: { chipGroupProps: defaultProps },
-  }),
-};
-
-export const Selectable: Story = {
-  render: () => ({
-    template: `<val-chip-group [props]="chipGroupProps"></val-chip-group>`,
-    props: { chipGroupProps: selectableProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Single selection mode - only one chip can be selected at a time.',
-      },
-    },
-  },
-};
-
-export const MultipleSelection: Story = {
-  render: () => ({
-    template: `<val-chip-group [props]="chipGroupProps"></val-chip-group>`,
-    props: { chipGroupProps: multiSelectProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Multiple selection mode - select multiple chips simultaneously.',
-      },
-    },
-  },
-};
-
-export const Removable: Story = {
-  render: () => ({
-    template: `<val-chip-group [props]="chipGroupProps"></val-chip-group>`,
-    props: { chipGroupProps: removableProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Chips with remove button - click X to remove chips.',
-      },
-    },
-  },
-};
-
-export const WithIcons: Story = {
-  render: () => ({
-    template: `<val-chip-group [props]="chipGroupProps"></val-chip-group>`,
-    props: { chipGroupProps: withIconsProps },
-  }),
-};
-
-export const Outline: Story = {
-  render: () => ({
-    template: `<val-chip-group [props]="chipGroupProps"></val-chip-group>`,
-    props: { chipGroupProps: outlineProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Outline style chips that fill when selected.',
-      },
-    },
-  },
-};
-
-export const Colors: Story = {
-  render: () => ({
-    template: `<val-chip-group [props]="chipGroupProps"></val-chip-group>`,
-    props: { chipGroupProps: colorsProps },
-  }),
-};
-
-export const WithDisabled: Story = {
-  render: () => ({
-    template: `<val-chip-group [props]="chipGroupProps"></val-chip-group>`,
-    props: { chipGroupProps: disabledProps },
-  }),
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 500px;">
-        <h3 style="margin: 0; font-family: system-ui;">Chip Groups</h3>
-
-        <div>
-          <h4 style="margin: 0 0 12px; font-family: system-ui; font-size: 14px; color: #666;">Category Filters</h4>
-          <val-chip-group [props]="filters"></val-chip-group>
-        </div>
-
-        <div>
-          <h4 style="margin: 0 0 12px; font-family: system-ui; font-size: 14px; color: #666;">Tags</h4>
-          <val-chip-group [props]="tags"></val-chip-group>
-        </div>
-
-        <div>
-          <h4 style="margin: 0 0 12px; font-family: system-ui; font-size: 14px; color: #666;">Size Selection</h4>
-          <val-chip-group [props]="sizes"></val-chip-group>
-        </div>
-      </div>
-    `,
-    props: {
-      filters: showcaseFiltersProps,
-      tags: showcaseTagsProps,
-      sizes: showcaseSizesProps,
-    },
-  }),
-};

package/src/lib/components/molecules/chip-group/types.ts

@@ -1,69 +0,0 @@
-import { Color } from '@ionic/core';
-
-/**
- * Single chip configuration.
- */
-export interface ChipMetadata {
-  /** Unique chip identifier */
-  value: string;
-  /** Chip label */
-  label?: string;
-  /** Chip icon */
-  icon?: string;
-  /** Chip color */
-  color?: Color;
-  /** Whether chip is selected */
-  selected?: boolean;
-  /** Whether chip is disabled */
-  disabled?: boolean;
-  /** Reactive content key for label */
-  contentKey?: string;
-  /** Component class name for content lookup */
-  contentClass?: string;
-  /** Fallback for label */
-  contentFallback?: string;
-}
-
-/**
- * Metadata for the chip group component.
- */
-export interface ChipGroupMetadata {
-  /** Chip items */
-  chips: ChipMetadata[];
-  /** Allow selection */
-  selectable?: boolean;
-  /** Allow multiple selection */
-  multiple?: boolean;
-  /** Allow removing chips */
-  removable?: boolean;
-  /** Default color for all chips */
-  color?: Color;
-  /** Selected color */
-  selectedColor?: Color;
-  /** Chip outline style */
-  outline?: boolean;
-  /** Unique token identifier */
-  token?: string;
-  /** Wrap chips or scroll */
-  wrap?: boolean;
-}
-
-/**
- * Event emitted when chip selection changes.
- */
-export interface ChipSelectionEvent {
-  /** Selected chip(s) */
-  selected: ChipMetadata | ChipMetadata[];
-  /** Selected value(s) */
-  values: string | string[];
-}
-
-/**
- * Event emitted when chip is removed.
- */
-export interface ChipRemoveEvent {
-  /** Removed chip */
-  chip: ChipMetadata;
-  /** Remaining chips */
-  remaining: ChipMetadata[];
-}

package/src/lib/components/molecules/code-display/code-display.component.scss

@@ -1,246 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.code-viewer-container {
-  background-color: #ffffff;
-  border-radius: 24px;
-  overflow: hidden;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  border: 1px solid #f2f6f7;
-  position: relative;
-  min-width: 320px;
-  max-width: 100%;
-}
-
-.tab-bar {
-  display: flex;
-  background: #f6f9fa;
-  border-bottom: 1px solid #f2f6f7;
-  gap: 2px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: thin;
-  scrollbar-color: #e0e0e0 #f6f9fa;
-  -webkit-overflow-scrolling: touch;
-  max-width: 100%;
-  font-size: 12px;
-}
-
-.tab-bar::-webkit-scrollbar {
-  height: 6px;
-  background: #f6f9fa;
-}
-
-.tab-bar::-webkit-scrollbar-thumb {
-  background: #e0e0e0;
-  border-radius: 4px;
-}
-
-.tab {
-  padding: 10px 18px 8px 18px;
-  font-family: 'Roboto Mono', monospace;
-  font-size: 0.95em;
-  color: #899396;
-  cursor: pointer;
-  border-radius: 8px 8px 0 0;
-  background: transparent;
-  transition:
-    background 0.2s,
-    color 0.2s;
-  margin-bottom: -1px;
-  border: 1px solid transparent;
-  border-bottom: none;
-}
-
-.tab:hover {
-  background: #e8eef2;
-}
-
-.tab.active {
-  background: #ffffff;
-  color: #19422d;
-  border: 1px solid #f2f6f7;
-  border-bottom: 1px solid #ffffff;
-  z-index: 2;
-}
-
-.tab-label {
-  font-weight: 500;
-}
-
-.code-content {
-  overflow-x: auto;
-  overflow-y: auto;
-  max-height: 30rem;
-  min-height: 5rem;
-  background: hsl(0, 0%, 100%);
-  position: relative;
-}
-
-.language-badge {
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  background: #f6f9fa;
-  color: #899396;
-  font-family: 'Roboto Mono', monospace;
-  font-size: 0.8em;
-  font-weight: 500;
-  border-radius: 6px;
-  padding: 2px 8px;
-  z-index: 3;
-  pointer-events: none;
-  text-transform: uppercase;
-}
-
-.copy-button-wrapper {
-  position: sticky;
-  top: 10px;
-  float: right;
-  z-index: 10;
-  height: 0;
-  margin-right: 15px;
-}
-
-.copy-button {
-  --padding-start: 2px;
-  --padding-end: 2px;
-  --padding-top: 2px;
-  --padding-bottom: 2px;
-  min-width: 28px;
-  min-height: 28px;
-  height: 28px;
-  width: 28px;
-  color: var(--ion-color-primary);
-  background: rgba(255, 255, 255, 0.7);
-  border-radius: 6px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition:
-    opacity 0.2s ease,
-    background 0.2s ease;
-}
-
-.code-content:hover .copy-button {
-  opacity: 1;
-}
-
-.copy-button:hover {
-  background: rgba(255, 255, 255, 0.9);
-}
-
-.copy-button ion-icon {
-  font-size: 1.2em;
-  margin: 0;
-}
-
-pre {
-  margin: 0;
-  padding: 0;
-  background-color: transparent;
-  min-width: 100%;
-  min-height: 100%;
-  white-space: pre;
-  word-break: normal;
-  font-family: 'Roboto Mono', monospace;
-}
-
-code {
-  font-family: 'Roboto Mono', monospace;
-  font-size: 0.9em;
-  line-height: 1.5;
-  display: block;
-  white-space: inherit;
-  word-break: normal;
-}
-
-@media (max-width: 600px) {
-  .code-viewer-container {
-    border-radius: 24px;
-  }
-  .tab-bar {
-    font-size: 11px;
-  }
-  .language-badge {
-    font-size: 0.7em;
-    padding: 1px 6px;
-    top: 10px;
-    left: 10px;
-  }
-  .copy-button-wrapper {
-    margin-right: 10px;
-  }
-  .code-content {
-    max-height: 20rem;
-  }
-  code {
-    font-size: 0.7em;
-  }
-}
-
-@media (min-width: 600px) {
-  code {
-    font-size: 0.8em;
-  }
-}
-
-// Dark mode — class-based ONLY (Ionic body.dark / html.ion-palette-dark)
-:host-context(.dark),
-:host-context(.ion-palette-dark),
-:host-context(html.ion-palette-dark),
-:host-context(body.dark),
-:host-context([data-theme='dark']) {
-  .code-viewer-container {
-    background-color: #21252b;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
-    border: 1px solid #3b4048;
-  }
-
-  .tab-bar {
-    background: #1a1a1a;
-    border-bottom: 1px solid #3b4048;
-    scrollbar-color: #3b4048 #1a1a1a;
-  }
-
-  .tab-bar::-webkit-scrollbar {
-    background: #1a1a1a;
-  }
-
-  .tab-bar::-webkit-scrollbar-thumb {
-    background: #3b4048;
-  }
-
-  .tab {
-    color: #8b949e;
-  }
-
-  .tab:hover {
-    background: #21252b;
-  }
-
-  .tab.active {
-    background: #282c34;
-    color: #c9d1d9;
-    border: 1px solid #3b4048;
-    border-bottom: 1px solid #282c34;
-  }
-
-  .code-content {
-    background: #161b22;
-  }
-
-  .language-badge {
-    background: #3e4451;
-    color: #8b949e;
-  }
-
-  .copy-button {
-    background: rgba(0, 0, 0, 0.4);
-  }
-
-  .copy-button:hover {
-    background: rgba(0, 0, 0, 0.6);
-  }
-}