valtech-components 2.0.566 → 2.0.567

package/lib/components/molecules/stepper/stepper.component.d.ts

@@ -1,9 +1,25 @@
-import { EventEmitter } from '@angular/core';
+import { OnChanges, OnInit, EventEmitter, SimpleChanges } from '@angular/core';
 import { StepperMetadata, StepMetadata, StepChangeEvent, StepStatus } from './types';
 import * as i0 from "@angular/core";
-export declare class StepperComponent {
-    props: StepperMetadata;
+export declare class StepperComponent implements OnInit, OnChanges {
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable stepper configurations
+     * that can be registered at app level via provideValtechPresets().
+     */
+    preset?: string;
+    /**
+     * Stepper configuration object. Values here override preset values.
+     */
+    props: Partial<StepperMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: StepperMetadata;
     stepChange: EventEmitter<StepChangeEvent>;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private resolveProps;
     getCurrentIndex(): number;
     getStepStatus(step: StepMetadata, index: number): StepStatus;
     getStepColor(step: StepMetadata, index: number): string;
@@ -11,5 +27,5 @@ export declare class StepperComponent {
     onStepClick(step: StepMetadata, index: number): void;
     getStepLabel(step: StepMetadata): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<StepperComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<StepperComponent, "val-stepper", never, { "props": { "alias": "props"; "required": false; }; }, { "stepChange": "stepChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StepperComponent, "val-stepper", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "stepChange": "stepChange"; }, never, never, true, never>;
 }

package/lib/components/molecules/tabs/tabs.component.d.ts

@@ -1,11 +1,34 @@
-import { EventEmitter } from '@angular/core';
+import { OnChanges, OnInit, EventEmitter, SimpleChanges } from '@angular/core';
 import { TabsMetadata, TabMetadata } from './types';
 import * as i0 from "@angular/core";
-export declare class TabsComponent {
-    props: TabsMetadata;
+export declare class TabsComponent implements OnInit, OnChanges {
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable tabs configurations
+     * that can be registered at app level via provideValtechPresets().
+     *
+     * @example
+     * <val-tabs preset="main-nav" [props]="{ tabs: [...] }"></val-tabs>
+     */
+    preset?: string;
+    /**
+     * Tabs configuration object. Values here override preset values.
+     */
+    props: Partial<TabsMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: TabsMetadata;
     tabChange: EventEmitter<TabMetadata>;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    private resolveProps;
     onTabClick(tab: TabMetadata): void;
     getTabLabel(tab: TabMetadata): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "val-tabs", never, { "props": { "alias": "props"; "required": false; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "val-tabs", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
 }

package/lib/components/molecules/textarea-input/textarea-input.component.d.ts

@@ -1,8 +1,24 @@
-import { OnInit } from '@angular/core';
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { TextareaInputMetadata } from './types';
 import * as i0 from "@angular/core";
-export declare class TextareaInputComponent implements OnInit {
-    props: TextareaInputMetadata;
+export declare class TextareaInputComponent implements OnInit, OnChanges {
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable textarea configurations
+     * that can be registered at app level via provideValtechPresets().
+     *
+     * @example
+     * <val-textarea-input preset="form-field" [props]="{ control: ctrl }"></val-textarea-input>
+     */
+    preset?: string;
+    /**
+     * Textarea configuration object. Values here override preset values.
+     */
+    props: Partial<TextareaInputMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: TextareaInputMetadata;
     states: {
         ENABLED: "ENABLED";
         DISABLED: "DISABLED";
@@ -10,6 +26,13 @@ export declare class TextareaInputComponent implements OnInit {
         ERROR: "ERROR";
     };
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    private resolveProps;
+    private applyDefaultValue;
     getLabel(): string;
     getPlaceholder(): string;
     getHint(): string;
@@ -19,5 +42,5 @@ export declare class TextareaInputComponent implements OnInit {
     getRemainingLabel(): string;
     counterFormatter: (inputLength: number, maxLength: number) => string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextareaInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TextareaInputComponent, "val-textarea-input", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextareaInputComponent, "val-textarea-input", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/components/molecules/toggle-input/toggle-input.component.d.ts

@@ -1,18 +1,39 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { ToggleInputMetadata } from './types';
 import * as i0 from "@angular/core";
-export declare class ToggleInputComponent {
+export declare class ToggleInputComponent implements OnInit, OnChanges {
+    private presets;
     /**
-     * Input configuration object.
+     * Preset name to apply. Presets define reusable toggle input configurations
+     * that can be registered at app level via provideValtechPresets().
+     *
+     * @example
+     * <val-toggle-input preset="form-field" [props]="{ control: ctrl }"></val-toggle-input>
+     */
+    preset?: string;
+    /**
+     * Input configuration object. Values here override preset values.
      * @type {ToggleInputMetadata}
      */
-    props: ToggleInputMetadata;
+    props: Partial<ToggleInputMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: ToggleInputMetadata;
     states: {
         ENABLED: "ENABLED";
         DISABLED: "DISABLED";
         WORKING: "WORKING";
         ERROR: "ERROR";
     };
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    private resolveProps;
     getDisplayLabel(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToggleInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleInputComponent, "val-toggle-input", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleInputComponent, "val-toggle-input", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.566",
+  "version": "2.0.567",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/src/lib/components/styles/_docs-page.scss

@@ -0,0 +1,310 @@
+/**
+ * Shared styles for documentation pages.
+ * Import this file in your component and include the mixin.
+ *
+ * Usage in component:
+ * @use 'valtech-components/styles/docs-page' as docs;
+ *
+ * styles: [`@include docs.page();`]
+ */
+
+@mixin page() {
+  // Main layout
+  .docs-page {
+    display: grid;
+    grid-template-columns: 1fr 200px;
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+
+    @media (max-width: 1024px) {
+      grid-template-columns: 1fr;
+      padding: 1rem;
+    }
+  }
+
+  .docs-page__content {
+    min-width: 0;
+  }
+
+  .docs-page__toc {
+    position: sticky;
+    top: 2rem;
+    height: fit-content;
+
+    @media (max-width: 1024px) {
+      display: none;
+    }
+  }
+
+  // Header
+  .docs-page__header {
+    margin-bottom: 2rem;
+  }
+
+  .docs-page__badge {
+    display: inline-block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.06);
+    color: #555;
+    margin-bottom: 0.75rem;
+
+    @media (prefers-color-scheme: dark) {
+      background: rgba(255, 255, 255, 0.1);
+      color: #aaa;
+    }
+  }
+
+  .docs-page__header h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin: 0 0 0.75rem 0;
+    color: var(--ion-text-color, #1a1a1a);
+
+    @media (max-width: 768px) {
+      font-size: 2rem;
+    }
+  }
+
+  .docs-page__lead {
+    font-size: 1.125rem;
+    color: var(--ion-color-medium, #666);
+    margin: 0;
+    line-height: 1.6;
+
+    @media (max-width: 768px) {
+      font-size: 1rem;
+    }
+  }
+
+  // Sections
+  section {
+    margin-bottom: 2rem;
+  }
+
+  // Headings
+  h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0 0 1rem 0;
+    color: var(--ion-text-color, #1a1a1a);
+    scroll-margin-top: 2rem;
+  }
+
+  h3 {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin: 1.5rem 0 1rem 0;
+    color: var(--ion-text-color, #1a1a1a);
+  }
+
+  h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 1.25rem 0 0.75rem 0;
+    color: var(--ion-text-color, #1a1a1a);
+  }
+
+  // Text
+  p {
+    line-height: 1.7;
+    color: var(--ion-text-color, #1a1a1a);
+    margin: 0 0 1rem 0;
+  }
+
+  // Lists
+  ul,
+  ol {
+    padding-left: 1.5rem;
+    margin: 0 0 1rem 0;
+  }
+
+  li {
+    margin-bottom: 0.5rem;
+    line-height: 1.6;
+  }
+
+  // Links
+  a {
+    color: var(--ion-color-primary, #3880ff);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  // Code inline
+  code:not([class*='language-']) {
+    background: rgba(0, 0, 0, 0.06);
+    padding: 0.125rem 0.375rem;
+    border-radius: 4px;
+    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
+    font-size: 0.875em;
+
+    @media (prefers-color-scheme: dark) {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  // Pre blocks (without syntax highlighting)
+  pre:not([class*='language-']) {
+    background: rgba(0, 0, 0, 0.04);
+    padding: 1rem;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 0 0 1rem 0;
+
+    @media (prefers-color-scheme: dark) {
+      background: rgba(255, 255, 255, 0.06);
+    }
+
+    code {
+      background: none;
+      padding: 0;
+    }
+  }
+
+  // Tables
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0 0 1rem 0;
+    font-size: 0.875rem;
+  }
+
+  th,
+  td {
+    padding: 0.75rem;
+    text-align: left;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+    @media (prefers-color-scheme: dark) {
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  th {
+    font-weight: 600;
+    background: rgba(0, 0, 0, 0.02);
+
+    @media (prefers-color-scheme: dark) {
+      background: rgba(255, 255, 255, 0.04);
+    }
+  }
+
+  // Blockquote
+  blockquote {
+    margin: 0 0 1rem 0;
+    padding: 1rem 1.5rem;
+    border-left: 4px solid var(--ion-color-primary, #3880ff);
+    background: rgba(0, 0, 0, 0.02);
+    border-radius: 0 8px 8px 0;
+
+    @media (prefers-color-scheme: dark) {
+      background: rgba(255, 255, 255, 0.04);
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Image
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+  }
+
+  // Horizontal rule
+  hr {
+    border: none;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    margin: 2rem 0;
+
+    @media (prefers-color-scheme: dark) {
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  // Strong text
+  strong {
+    font-weight: 600;
+  }
+}
+
+/**
+ * Compact version without grid layout (for use inside other layouts)
+ */
+@mixin content() {
+  // Headings
+  h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0 0 1rem 0;
+    color: var(--ion-text-color, #1a1a1a);
+    scroll-margin-top: 2rem;
+  }
+
+  h3 {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin: 1.5rem 0 1rem 0;
+    color: var(--ion-text-color, #1a1a1a);
+  }
+
+  h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 1.25rem 0 0.75rem 0;
+    color: var(--ion-text-color, #1a1a1a);
+  }
+
+  p {
+    line-height: 1.7;
+    color: var(--ion-text-color, #1a1a1a);
+    margin: 0 0 1rem 0;
+  }
+
+  ul,
+  ol {
+    padding-left: 1.5rem;
+    margin: 0 0 1rem 0;
+  }
+
+  li {
+    margin-bottom: 0.5rem;
+    line-height: 1.6;
+  }
+
+  section {
+    margin-bottom: 2rem;
+  }
+
+  a {
+    color: var(--ion-color-primary, #3880ff);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  code:not([class*='language-']) {
+    background: rgba(0, 0, 0, 0.06);
+    padding: 0.125rem 0.375rem;
+    border-radius: 4px;
+    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
+    font-size: 0.875em;
+
+    @media (prefers-color-scheme: dark) {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+}