valtech-components 2.0.688 → 2.0.689

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

@@ -0,0 +1,323 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,353 @@
+: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);
+  }
+}