valtech-components 2.0.691 → 2.0.692

package/src/lib/components/atoms/progress-ring/progress-ring.stories.ts

@@ -1,323 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { ProgressRingComponent } from './progress-ring.component';
-import { ProgressRingMetadata } from './types';
-
-const createProgressRingProps = (overrides: Partial<ProgressRingMetadata> = {}): ProgressRingMetadata => ({
-  value: 75,
-  showValue: true,
-  animated: true,
-  ...overrides,
-});
-
-// Pre-create all props at module level
-const defaultProps = createProgressRingProps();
-const zeroProps = createProgressRingProps({ value: 0 });
-const quarterProps = createProgressRingProps({ value: 25 });
-const halfProps = createProgressRingProps({ value: 50 });
-const fullProps = createProgressRingProps({ value: 100 });
-const smallProps = createProgressRingProps({ size: 60, strokeWidth: 6 });
-const largeProps = createProgressRingProps({ size: 120, strokeWidth: 12 });
-const xlargeProps = createProgressRingProps({ size: 160, strokeWidth: 16 });
-const primaryProps = createProgressRingProps({ color: 'primary' });
-const secondaryProps = createProgressRingProps({ color: 'secondary', value: 65 });
-const successProps = createProgressRingProps({ color: 'success', value: 100 });
-const warningProps = createProgressRingProps({ color: 'warning', value: 45 });
-const dangerProps = createProgressRingProps({ color: 'danger', value: 20 });
-const customLabelProps = createProgressRingProps({ value: 42, label: '42 pts' });
-const noValueProps = createProgressRingProps({ showValue: false });
-const thickStrokeProps = createProgressRingProps({ strokeWidth: 16, size: 100 });
-const thinStrokeProps = createProgressRingProps({ strokeWidth: 4, size: 100 });
-const customTrackProps = createProgressRingProps({ trackColor: 'medium' });
-
-// Showcase props
-const showcase0Props = createProgressRingProps({ value: 0, size: 60 });
-const showcase25Props = createProgressRingProps({ value: 25, size: 60 });
-const showcase50Props = createProgressRingProps({ value: 50, size: 60 });
-const showcase75Props = createProgressRingProps({ value: 75, size: 60 });
-const showcase100Props = createProgressRingProps({ value: 100, size: 60 });
-const showcasePrimaryProps = createProgressRingProps({ value: 75, color: 'primary', size: 60 });
-const showcaseSuccessProps = createProgressRingProps({ value: 75, color: 'success', size: 60 });
-const showcaseWarningProps = createProgressRingProps({ value: 75, color: 'warning', size: 60 });
-const showcaseDangerProps = createProgressRingProps({ value: 75, color: 'danger', size: 60 });
-const showcaseSmallProps = createProgressRingProps({ value: 75, size: 50, strokeWidth: 4 });
-const showcaseMediumProps = createProgressRingProps({ value: 75, size: 80 });
-const showcaseLargeProps = createProgressRingProps({ value: 75, size: 120, strokeWidth: 12 });
-const showcaseScoreProps = createProgressRingProps({ value: 85, size: 100, color: 'success', label: '85%' });
-
-const meta: Meta<ProgressRingComponent> = {
-  title: 'Atoms/ProgressRing',
-  component: ProgressRingComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, ProgressRingComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Progress ring configuration object',
-      control: 'object',
-      table: {
-        type: {
-          summary: 'ProgressRingMetadata',
-          detail: `{
-  value: number;           // 0-100
-  size?: number;           // Size in pixels
-  strokeWidth?: number;    // Stroke thickness
-  color?: Color;           // Progress color
-  trackColor?: Color;      // Background track color
-  showValue?: boolean;     // Show percentage in center
-  label?: string;          // Custom label
-  animated?: boolean;      // Animate changes
-}`,
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-progress-ring
-
-A circular progress indicator component.
-
-### Features
-
-- **Animated**: Smooth transitions
-- **Customizable**: Size, stroke, colors
-- **Labels**: Show percentage or custom text
-
-### Usage
-
-\`\`\`html
-<val-progress-ring
-  [props]="{
-    value: 75,
-    showValue: true,
-    color: 'success'
-  }"
-></val-progress-ring>
-
-<val-progress-ring
-  [props]="{
-    value: 42,
-    size: 120,
-    label: '42 pts'
-  }"
-></val-progress-ring>
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<ProgressRingComponent>;
-
-export const Default: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: defaultProps },
-  }),
-};
-
-export const Zero: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: zeroProps },
-  }),
-};
-
-export const Quarter: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: quarterProps },
-  }),
-};
-
-export const Half: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: halfProps },
-  }),
-};
-
-export const Full: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: fullProps },
-  }),
-};
-
-export const SizeSmall: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: smallProps },
-  }),
-};
-
-export const SizeLarge: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: largeProps },
-  }),
-};
-
-export const SizeXLarge: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: xlargeProps },
-  }),
-};
-
-export const ColorPrimary: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: primaryProps },
-  }),
-};
-
-export const ColorSecondary: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: secondaryProps },
-  }),
-};
-
-export const ColorSuccess: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: successProps },
-  }),
-};
-
-export const ColorWarning: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: warningProps },
-  }),
-};
-
-export const ColorDanger: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: dangerProps },
-  }),
-};
-
-export const CustomLabel: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: customLabelProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Custom label instead of percentage.',
-      },
-    },
-  },
-};
-
-export const NoValue: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: noValueProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Progress ring without center label.',
-      },
-    },
-  },
-};
-
-export const ThickStroke: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: thickStrokeProps },
-  }),
-};
-
-export const ThinStroke: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: thinStrokeProps },
-  }),
-};
-
-export const CustomTrackColor: Story = {
-  render: () => ({
-    template: `<val-progress-ring [props]="ringProps"></val-progress-ring>`,
-    props: { ringProps: customTrackProps },
-  }),
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 32px;">
-        <div>
-          <h3 style="margin: 0 0 16px; font-family: system-ui;">Progress Values</h3>
-          <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: center;">
-            <val-progress-ring [props]="p0"></val-progress-ring>
-            <val-progress-ring [props]="p25"></val-progress-ring>
-            <val-progress-ring [props]="p50"></val-progress-ring>
-            <val-progress-ring [props]="p75"></val-progress-ring>
-            <val-progress-ring [props]="p100"></val-progress-ring>
-          </div>
-        </div>
-
-        <div>
-          <h3 style="margin: 0 0 16px; font-family: system-ui;">Colors</h3>
-          <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: center;">
-            <val-progress-ring [props]="cPrimary"></val-progress-ring>
-            <val-progress-ring [props]="cSuccess"></val-progress-ring>
-            <val-progress-ring [props]="cWarning"></val-progress-ring>
-            <val-progress-ring [props]="cDanger"></val-progress-ring>
-          </div>
-        </div>
-
-        <div>
-          <h3 style="margin: 0 0 16px; font-family: system-ui;">Sizes</h3>
-          <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: center;">
-            <val-progress-ring [props]="sSmall"></val-progress-ring>
-            <val-progress-ring [props]="sMedium"></val-progress-ring>
-            <val-progress-ring [props]="sLarge"></val-progress-ring>
-          </div>
-        </div>
-
-        <div>
-          <h3 style="margin: 0 0 16px; font-family: system-ui;">Score Display</h3>
-          <div style="display: flex; gap: 16px; align-items: center;">
-            <val-progress-ring [props]="score"></val-progress-ring>
-            <div style="font-family: system-ui;">
-              <div style="font-weight: bold;">Excellent!</div>
-              <div style="color: #666; font-size: 14px;">Your score is above average</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `,
-    props: {
-      p0: showcase0Props,
-      p25: showcase25Props,
-      p50: showcase50Props,
-      p75: showcase75Props,
-      p100: showcase100Props,
-      cPrimary: showcasePrimaryProps,
-      cSuccess: showcaseSuccessProps,
-      cWarning: showcaseWarningProps,
-      cDanger: showcaseDangerProps,
-      sSmall: showcaseSmallProps,
-      sMedium: showcaseMediumProps,
-      sLarge: showcaseLargeProps,
-      score: showcaseScoreProps,
-    },
-  }),
-};

package/src/lib/components/atoms/progress-ring/types.ts

@@ -1,25 +0,0 @@
-import { Color } from '@ionic/core';
-
-/**
- * Metadata for the progress ring component.
- */
-export interface ProgressRingMetadata {
-  /** Progress value (0-100) */
-  value: number;
-  /** Size in pixels */
-  size?: number;
-  /** Stroke width */
-  strokeWidth?: number;
-  /** Progress color */
-  color?: Color;
-  /** Track (background) color */
-  trackColor?: Color;
-  /** Show percentage value */
-  showValue?: boolean;
-  /** Custom label (overrides percentage) */
-  label?: string;
-  /** Animate progress changes */
-  animated?: boolean;
-  /** Unique token identifier */
-  token?: string;
-}

package/src/lib/components/atoms/qr-code/qr-code.component.scss

@@ -1,353 +0,0 @@
-:host {
-  display: inline-block;
-}
-
-.qr-code-container {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: var(--padding);
-  background: var(--container-bg);
-  border-radius: var(--border-radius);
-  box-shadow: var(--shadow);
-  position: relative;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-
-  &.with-border {
-    border: 1px solid var(--border-color);
-  }
-
-  &.loading {
-    .qr-image-wrapper {
-      opacity: 0.5;
-    }
-  }
-
-  // Hover animations
-  &.scale-on-hover:hover {
-    transform: scale(1.02);
-  }
-
-  &.pulse-on-hover:hover {
-    animation: pulse 1.5s infinite;
-  }
-}
-
-// Label styles
-.qr-label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--label-color);
-  font-size: var(--label-size);
-
-  ion-icon {
-    font-size: 1.1em;
-  }
-
-  .font-weight--normal {
-    font-weight: 400;
-  }
-  .font-weight--medium {
-    font-weight: 500;
-  }
-  .font-weight--semibold {
-    font-weight: 600;
-  }
-  .font-weight--bold {
-    font-weight: 700;
-  }
-}
-
-.qr-label--top {
-  margin-bottom: 4px;
-}
-
-.qr-label--bottom {
-  margin-top: 4px;
-}
-
-.loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(255, 255, 255, 0.7);
-  border-radius: var(--border-radius);
-  z-index: 1;
-
-  ion-spinner {
-    width: 32px;
-    height: 32px;
-  }
-}
-
-.qr-image-wrapper {
-  width: var(--size);
-  height: var(--size);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: opacity 0.2s;
-}
-
-.qr-image {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  display: block;
-  border-radius: var(--qr-border-radius);
-}
-
-.qr-actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-
-  ion-button {
-    --padding-start: 8px;
-    --padding-end: 8px;
-    --color: var(--ion-color-medium);
-
-    &:hover {
-      --color: var(--ion-color-primary);
-    }
-
-    ion-icon {
-      font-size: 20px;
-    }
-  }
-}
-
-// ===========================
-// THEME PRESETS
-// ===========================
-
-// Minimal theme
-.theme--minimal {
-  background: transparent !important;
-  padding: 0 !important;
-  box-shadow: none !important;
-  border: none !important;
-}
-
-// Gradient Purple theme
-.theme--gradient-purple {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-  padding: 20px !important;
-  border-radius: 16px !important;
-
-  .qr-image {
-    border-radius: 8px;
-  }
-
-  .qr-label {
-    color: white;
-  }
-
-  .qr-actions ion-button {
-    --color: rgba(255, 255, 255, 0.8);
-
-    &:hover {
-      --color: white;
-    }
-  }
-}
-
-// Gradient Blue theme
-.theme--gradient-blue {
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
-  padding: 20px !important;
-  border-radius: 16px !important;
-
-  .qr-image {
-    border-radius: 8px;
-  }
-
-  .qr-label {
-    color: white;
-  }
-
-  .qr-actions ion-button {
-    --color: rgba(255, 255, 255, 0.8);
-
-    &:hover {
-      --color: white;
-    }
-  }
-}
-
-// Gradient Sunset theme
-.theme--gradient-sunset {
-  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
-  padding: 20px !important;
-  border-radius: 16px !important;
-
-  .qr-image {
-    border-radius: 8px;
-  }
-
-  .qr-label {
-    color: white;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  }
-
-  .qr-actions ion-button {
-    --color: rgba(255, 255, 255, 0.9);
-
-    &:hover {
-      --color: white;
-    }
-  }
-}
-
-// Gradient Mint theme
-.theme--gradient-mint {
-  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
-  padding: 20px !important;
-  border-radius: 16px !important;
-
-  .qr-image {
-    border-radius: 8px;
-  }
-
-  .qr-label {
-    color: white;
-  }
-
-  .qr-actions ion-button {
-    --color: rgba(255, 255, 255, 0.8);
-
-    &:hover {
-      --color: white;
-    }
-  }
-}
-
-// Dark theme
-.theme--dark {
-  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%) !important;
-  padding: 20px !important;
-  border-radius: 16px !important;
-  border: 1px solid rgba(255, 255, 255, 0.1) !important;
-
-  .qr-image {
-    border-radius: 8px;
-    filter: invert(1);
-  }
-
-  .qr-label {
-    color: #e0e0e0;
-  }
-
-  .qr-actions ion-button {
-    --color: rgba(255, 255, 255, 0.6);
-
-    &:hover {
-      --color: white;
-    }
-  }
-}
-
-// Neon theme
-.theme--neon {
-  background: #0a0a0a !important;
-  padding: 20px !important;
-  border-radius: 16px !important;
-  border: 2px solid var(--glow-color) !important;
-  box-shadow: 0 0 20px var(--glow-color), inset 0 0 20px rgba(139, 92, 246, 0.1) !important;
-
-  .qr-image {
-    border-radius: 8px;
-    filter: drop-shadow(0 0 8px var(--glow-color));
-  }
-
-  .qr-label {
-    color: var(--glow-color);
-    text-shadow: 0 0 10px var(--glow-color);
-  }
-
-  .qr-actions ion-button {
-    --color: var(--glow-color);
-
-    &:hover {
-      --color: white;
-    }
-  }
-}
-
-// ===========================
-// HOST VARIANTS
-// ===========================
-
-// Variant: compact (no visible buttons, just QR)
-:host(.compact) {
-  .qr-actions {
-    position: absolute;
-    bottom: 8px;
-    left: 50%;
-    transform: translateX(-50%);
-    opacity: 0;
-    transition: opacity 0.2s;
-    background-color: rgba(255, 255, 255, 0.9);
-    border-radius: 8px;
-    padding: 4px;
-  }
-
-  .qr-code-container:hover .qr-actions {
-    opacity: 1;
-  }
-}
-
-// Variant: card style
-:host(.card) {
-  .qr-code-container {
-    background-color: var(--ion-background-color, white);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    padding: 16px;
-    border-radius: 12px;
-  }
-}
-
-// ===========================
-// ANIMATIONS
-// ===========================
-
-@keyframes pulse {
-  0% {
-    box-shadow: var(--shadow), 0 0 0 0 rgba(99, 102, 241, 0.4);
-  }
-  70% {
-    box-shadow: var(--shadow), 0 0 0 10px rgba(99, 102, 241, 0);
-  }
-  100% {
-    box-shadow: var(--shadow), 0 0 0 0 rgba(99, 102, 241, 0);
-  }
-}
-
-// ===========================
-// DARK MODE
-// ===========================
-
-@media (prefers-color-scheme: dark) {
-  .loading-overlay {
-    background-color: rgba(0, 0, 0, 0.7);
-  }
-
-  :host(.compact) {
-    .qr-actions {
-      background-color: rgba(0, 0, 0, 0.9);
-    }
-  }
-
-  // Auto-invert QR in dark mode for default theme
-  .theme--default .qr-image {
-    filter: invert(1);
-  }
-}