valtech-components 2.0.687 → 2.0.689

package/src/lib/components/atoms/button/factory.ts

@@ -0,0 +1,444 @@
+import { ButtonMetadata, IconMetada } from '../../types';
+
+export const Icon = (name: string, slot: 'start' | 'end'): IconMetada => {
+  return {
+    name,
+    slot,
+  };
+};
+
+/* name convention: COLOR FILL SIZE [optionals: SHAPE EXPAND ICON HREF/DOWNLOAD] TYPE */
+
+export const BaseDefault = (text: string, type: 'button' | 'submit' | 'reset'): ButtonMetadata => {
+  return {
+    color: 'primary',
+    state: 'ENABLED',
+    text,
+    size: 'default',
+    type,
+  };
+};
+
+export const ClearDefault = (text: string, type: 'button' | 'submit' | 'reset'): ButtonMetadata => {
+  return { ...BaseDefault(text, type), fill: 'clear' };
+};
+
+export const ClearDefaultRound = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...ClearDefault(text, type), shape: 'round' };
+};
+
+export const SolidDefault = (text: string, type: 'button' | 'submit' | 'reset'): ButtonMetadata => {
+  return { ...BaseDefault(text, type), fill: 'solid' };
+};
+
+export const SolidDefaultRound = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...SolidDefault(text, type), shape: 'round' };
+};
+
+export const OutlineDefault = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...BaseDefault(text, type), fill: 'outline' };
+};
+
+export const OutlineDefaultRound = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...OutlineDefault(text, type), shape: 'round' };
+};
+
+export const ClearDefaultFull = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...ClearDefault(text, type), expand: 'full' };
+};
+
+export const ClearDefaultRoundFull = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...ClearDefaultRound(text, type), expand: 'full' };
+};
+
+export const ClearDefaultBlock = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...ClearDefault(text, type), expand: 'block' };
+};
+
+export const ClearDefaultRoundBlock = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...ClearDefaultRound(text, type), expand: 'block' };
+};
+
+export const SolidDefaultFull = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...SolidDefault(text, type), expand: 'full' };
+};
+
+export const SolidDefaultRoundFull = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...SolidDefaultRound(text, type), expand: 'full' };
+};
+
+export const SolidDefaultBlock = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...SolidDefault(text, type), expand: 'block' };
+};
+
+export const SolidDefaultRoundBlock = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...SolidDefaultRound(text, type), expand: 'block' };
+};
+
+export const OutlineDefaultFull = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...OutlineDefault(text, type), expand: 'full' };
+};
+
+export const OutlineDefaultRoundFull = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...OutlineDefaultRound(text, type), expand: 'full' };
+};
+
+export const OutlineDefaultBlock = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...OutlineDefault(text, type), expand: 'block' };
+};
+
+export const OutlineDefaultRoundBlock = (
+  text: string,
+  type: 'button' | 'submit' | 'reset'
+): ButtonMetadata => {
+  return { ...OutlineDefaultRound(text, type), expand: 'block' };
+};
+
+export const SolidDefaultButton = (text: string): ButtonMetadata => {
+  return SolidDefault(text, 'button');
+};
+
+export const SolidSmallButton = (text: string): ButtonMetadata => {
+  return { ...SolidDefault(text, 'button'), size: 'small' };
+};
+
+export const SolidLargeButton = (text: string): ButtonMetadata => {
+  return { ...SolidDefault(text, 'button'), size: 'large' };
+};
+
+export const SolidDefaultRoundButton = (text: string): ButtonMetadata => {
+  return SolidDefaultRound(text, 'button');
+};
+
+export const SolidSmallRoundButton = (text: string): ButtonMetadata => {
+  return { ...SolidDefaultRound(text, 'button'), size: 'small' };
+};
+
+export const SolidLargeRoundButton = (text: string): ButtonMetadata => {
+  return { ...SolidDefaultRound(text, 'button'), size: 'large' };
+};
+
+export const SolidFullButton = (text: string): ButtonMetadata => {
+  return SolidDefaultFull(text, 'button');
+};
+
+export const SolidBlockButton = (text: string): ButtonMetadata => {
+  return SolidDefaultBlock(text, 'button');
+};
+
+/** PRIMARY */
+
+export const PrimarySolidDefaultRoundButton = (text: string): ButtonMetadata => {
+  return { ...SolidDefaultRoundButton(text), color: 'primary' };
+};
+
+export const PrimarySolidDefaultRoundIconButton = (
+  text: string,
+  icon: IconMetada
+): ButtonMetadata => {
+  return { ...PrimarySolidDefaultRoundButton(text), icon };
+};
+
+export const PrimarySolidDefaultRoundHrefButton = (
+  text: string,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...PrimarySolidDefaultRoundButton(text), href, target };
+};
+
+export const PrimarySolidDefaultRoundIconHrefButton = (
+  text: string,
+  icon: IconMetada,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...PrimarySolidDefaultRoundIconButton(text, icon), href, target };
+};
+
+export const PrimarySolidSmallRoundButton = (text: string): ButtonMetadata => {
+  return { ...SolidSmallRoundButton(text), color: 'primary' };
+};
+
+export const PrimarySolidSmallRoundIconButton = (
+  text: string,
+  icon: IconMetada
+): ButtonMetadata => {
+  return { ...PrimarySolidSmallRoundButton(text), icon };
+};
+
+export const PrimarySolidSmallRoundHrefButton = (
+  text: string,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...PrimarySolidSmallRoundButton(text), href, target };
+};
+
+export const PrimarySolidSmallRoundIconHrefButton = (
+  text: string,
+  icon: IconMetada,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...PrimarySolidSmallRoundIconButton(text, icon), href, target };
+};
+
+export const PrimarySolidLargeRoundButton = (text: string): ButtonMetadata => {
+  return { ...SolidLargeRoundButton(text), color: 'primary' };
+};
+
+export const PrimarySolidLargeRoundIconButton = (
+  text: string,
+  icon: IconMetada
+): ButtonMetadata => {
+  return { ...PrimarySolidLargeRoundButton(text), icon };
+};
+
+export const PrimarySolidLargeRoundHrefButton = (
+  text: string,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...PrimarySolidLargeRoundButton(text), href, target };
+};
+
+export const PrimarySolidLargeRoundIconHrefButton = (
+  text: string,
+  icon: IconMetada,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...PrimarySolidLargeRoundIconButton(text, icon), href, target };
+};
+
+export const PrimarySolidBlockButton = (text: string): ButtonMetadata => {
+  return { ...SolidBlockButton(text), color: 'primary' };
+};
+
+export const PrimarySolidBlockIconButton = (text: string, icon: IconMetada): ButtonMetadata => {
+  return { ...PrimarySolidBlockButton(text), icon };
+};
+
+export const PrimarySolidBlockHrefButton = (
+  text: string,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...PrimarySolidBlockButton(text), href, target };
+};
+
+export const PrimarySolidBlockIconHrefButton = (
+  text: string,
+  icon: IconMetada,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...PrimarySolidBlockIconButton(text, icon), href, target };
+};
+
+export const PrimarySolidFullButton = (text: string): ButtonMetadata => {
+  return { ...SolidFullButton(text), color: 'primary' };
+};
+
+export const PrimarySolidFullIconButton = (text: string, icon: IconMetada): ButtonMetadata => {
+  return { ...PrimarySolidFullButton(text), icon };
+};
+
+export const PrimarySolidFullHrefButton = (
+  text: string,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...PrimarySolidFullButton(text), href, target };
+};
+
+export const PrimarySolidFullIconHrefButton = (
+  text: string,
+  icon: IconMetada,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...PrimarySolidFullIconButton(text, icon), href, target };
+};
+
+/** SECONDARY */
+
+export const SecondarySolidDefaultRoundButton = (text: string): ButtonMetadata => {
+  return { ...SolidDefaultRoundButton(text), color: 'secondary' };
+};
+
+export const SecondarySolidDefaultRoundIconButton = (
+  text: string,
+  icon: IconMetada
+): ButtonMetadata => {
+  return { ...SecondarySolidDefaultRoundButton(text), icon };
+};
+
+export const SecondarySolidDefaultRoundHrefButton = (
+  text: string,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...SecondarySolidDefaultRoundButton(text), href, target };
+};
+
+export const SecondarySolidDefaultRoundIconHrefButton = (
+  text: string,
+  icon: IconMetada,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...SecondarySolidDefaultRoundIconButton(text, icon), href, target };
+};
+
+export const SecondarySolidSmallRoundButton = (text: string): ButtonMetadata => {
+  return { ...SolidSmallRoundButton(text), color: 'secondary' };
+};
+
+export const SecondarySolidSmallRoundIconButton = (
+  text: string,
+  icon: IconMetada
+): ButtonMetadata => {
+  return { ...SecondarySolidSmallRoundButton(text), icon };
+};
+
+export const SecondarySolidSmallRoundHrefButton = (
+  text: string,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...SecondarySolidSmallRoundButton(text), href, target };
+};
+
+export const SecondarySolidSmallRoundIconHrefButton = (
+  text: string,
+  icon: IconMetada,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...SecondarySolidSmallRoundIconButton(text, icon), href, target };
+};
+
+export const SecondarySolidLargeRoundButton = (text: string): ButtonMetadata => {
+  return { ...SolidLargeRoundButton(text), color: 'secondary' };
+};
+
+export const SecondarySolidLargeRoundIconButton = (
+  text: string,
+  icon: IconMetada
+): ButtonMetadata => {
+  return { ...SecondarySolidLargeRoundButton(text), icon };
+};
+
+export const SecondarySolidLargeRoundHrefButton = (
+  text: string,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...SecondarySolidLargeRoundButton(text), href, target };
+};
+
+export const SecondarySolidLargeRoundIconHrefButton = (
+  text: string,
+  icon: IconMetada,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...SecondarySolidLargeRoundIconButton(text, icon), href, target };
+};
+
+export const SecondarySolidFullButton = (text: string): ButtonMetadata => {
+  return { ...SolidFullButton(text), color: 'secondary' };
+};
+
+export const SecondarySolidFullIconButton = (text: string, icon: IconMetada): ButtonMetadata => {
+  return { ...SecondarySolidFullButton(text), icon };
+};
+
+export const SecondarySolidFullHrefButton = (
+  text: string,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...SecondarySolidFullButton(text), href, target };
+};
+
+export const SecondarySolidFullIconHrefButton = (
+  text: string,
+  icon: IconMetada,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...SecondarySolidFullIconButton(text, icon), href, target };
+};
+
+export const SecondarySolidBlockButton = (text: string): ButtonMetadata => {
+  return { ...SolidBlockButton(text), color: 'secondary' };
+};
+
+export const SecondarySolidBlockIconButton = (text: string, icon: IconMetada): ButtonMetadata => {
+  return { ...SecondarySolidBlockButton(text), icon };
+};
+
+export const SecondarySolidBlockHrefButton = (
+  text: string,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...SecondarySolidBlockButton(text), href, target };
+};
+
+export const SecondarySolidBlockIconHrefButton = (
+  text: string,
+  icon: IconMetada,
+  href: string,
+  target: '_blank' | '_self' | '_parent' | '_top'
+): ButtonMetadata => {
+  return { ...SecondarySolidBlockIconButton(text, icon), href, target };
+};

package/src/lib/components/atoms/countdown/countdown.component.scss

@@ -0,0 +1,256 @@
+:host {
+  display: inline-block;
+}
+
+.countdown-container {
+  --countdown-color: var(--ion-color-primary);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.countdown-units {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.countdown-unit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.countdown-value {
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--countdown-color);
+}
+
+.countdown-label {
+  font-weight: 400;
+  color: var(--ion-color-medium);
+  text-transform: lowercase;
+}
+
+.countdown-separator {
+  font-weight: 700;
+  color: var(--countdown-color);
+  opacity: 0.6;
+}
+
+.expired-message {
+  font-weight: 600;
+  color: var(--ion-color-medium);
+}
+
+// === Size variants ===
+
+.size-small {
+  .countdown-value {
+    font-size: 18px;
+    line-height: 1.2;
+  }
+  .countdown-label {
+    font-size: 10px;
+  }
+  .countdown-separator {
+    font-size: 14px;
+    margin: 0 2px;
+  }
+  .expired-message {
+    font-size: 12px;
+  }
+}
+
+.size-medium {
+  .countdown-value {
+    font-size: 28px;
+    line-height: 1.2;
+  }
+  .countdown-label {
+    font-size: 12px;
+  }
+  .countdown-separator {
+    font-size: 20px;
+    margin: 0 4px;
+  }
+  .expired-message {
+    font-size: 14px;
+  }
+}
+
+.size-large {
+  .countdown-value {
+    font-size: 42px;
+    line-height: 1.2;
+  }
+  .countdown-label {
+    font-size: 14px;
+  }
+  .countdown-separator {
+    font-size: 28px;
+    margin: 0 6px;
+  }
+  .expired-message {
+    font-size: 18px;
+  }
+}
+
+// === Format variants ===
+
+.format-full {
+  .countdown-units {
+    gap: 16px;
+  }
+
+  .countdown-unit {
+    min-width: 60px;
+    padding: 8px 12px;
+    background: var(--ion-color-light);
+    border-radius: 8px;
+  }
+
+  .countdown-separator {
+    display: none;
+  }
+
+  &.size-small .countdown-unit {
+    min-width: 45px;
+    padding: 4px 8px;
+  }
+
+  &.size-large .countdown-unit {
+    min-width: 80px;
+    padding: 12px 16px;
+  }
+}
+
+.format-compact {
+  .countdown-units {
+    gap: 8px;
+  }
+
+  .countdown-unit {
+    flex-direction: row;
+    gap: 4px;
+  }
+
+  .countdown-label {
+    font-size: inherit;
+  }
+
+  .countdown-separator {
+    display: none;
+  }
+
+  &.size-small {
+    .countdown-value,
+    .countdown-label {
+      font-size: 14px;
+    }
+  }
+
+  &.size-medium {
+    .countdown-value,
+    .countdown-label {
+      font-size: 18px;
+    }
+  }
+
+  &.size-large {
+    .countdown-value,
+    .countdown-label {
+      font-size: 24px;
+    }
+  }
+}
+
+.format-minimal {
+  .countdown-units {
+    gap: 4px;
+  }
+
+  .countdown-label {
+    display: none;
+  }
+
+  .countdown-separator {
+    opacity: 0.4;
+  }
+}
+
+.format-digital {
+  .countdown-units {
+    gap: 0;
+    background: var(--ion-color-dark);
+    padding: 8px 16px;
+    border-radius: 8px;
+  }
+
+  .countdown-value {
+    color: #00ff00;
+    font-family: 'Courier New', monospace;
+  }
+
+  .countdown-label {
+    display: none;
+  }
+
+  .countdown-separator {
+    color: #00ff00;
+    opacity: 0.8;
+    margin: 0 2px;
+  }
+
+  &.size-small {
+    .countdown-units {
+      padding: 4px 8px;
+    }
+    .countdown-value,
+    .countdown-separator {
+      font-size: 16px;
+    }
+  }
+
+  &.size-large {
+    .countdown-units {
+      padding: 12px 24px;
+    }
+    .countdown-value,
+    .countdown-separator {
+      font-size: 48px;
+    }
+  }
+}
+
+// === Expired state ===
+
+.expired {
+  .expired-message {
+    padding: 8px 16px;
+    background: var(--ion-color-light);
+    border-radius: 8px;
+    color: var(--ion-color-danger);
+  }
+}
+
+// === Animation for urgency ===
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
+// Add pulse animation when less than 1 hour remaining
+:host-context(.urgent) {
+  .countdown-value {
+    animation: pulse 1s ease-in-out infinite;
+  }
+}