@conciso/design-system-mcp 0.0.0-bootstrap.0

package/snapshot/services/core/docgen/komponenten-inputs-forms-slider.json

@@ -0,0 +1,259 @@
+{
+  "components": {
+    "komponenten-inputs-forms-slider": {
+      "id": "komponenten-inputs-forms-slider",
+      "name": "SliderComponent",
+      "path": "./src/lib/slider/slider.stories.ts",
+      "description": "Slider — Wrapper um `.field-slider` / `.slider` aus css/components.css → „Slider“.\n\nRange-Eingabe mit Label + Live-Ausgabe, bereichsgefärbtem Thumb/Output\n(.slider-<area> setzt --sl-color), automatisch berechneten Ticks und Helper-Text.\n\nTicks: Es wird nur eine gewünschte ANZAHL (`tickCount`) angegeben; die Positionen/\nLabels werden gleichmäßig aus [min, max] berechnet (space-between wie das CSS-\nLayout). Wird der Slider zu schmal, reduziert die Komponente die Tick-Zahl reaktiv\n(ResizeObserver), sodass die Labels nicht überlappen — Endpunkte bleiben erhalten.\n\nAls `ControlValueAccessor` direkt an Angular-Formulare anbindbar (`[(ngModel)]`,\n`formControlName`); ohne Formular geht `[(value)]` (valueChange via model()).",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Markenbereich → .slider-<area> (Thumb- + Output-Farbe).",
+          "type": {
+            "name": "enum",
+            "value": [
+              "co",
+              "ki",
+              "es",
+              "wo"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArea"
+            },
+            "defaultValue": {
+              "summary": "co"
+            }
+          }
+        },
+        "disabled": {
+          "name": "disabled",
+          "description": "Deaktiviert; auch über Angular-Forms (setDisabledState) steuerbar.",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": false
+            }
+          }
+        },
+        "helper": {
+          "name": "helper",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": "Schritte: 5.000 €"
+            }
+          }
+        },
+        "label": {
+          "name": "label",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": "Budget-Rahmen"
+            }
+          }
+        },
+        "max": {
+          "name": "max",
+          "type": {
+            "name": "number"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "number"
+            },
+            "defaultValue": {
+              "summary": 100000
+            }
+          }
+        },
+        "min": {
+          "name": "min",
+          "type": {
+            "name": "number"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "number"
+            },
+            "defaultValue": {
+              "summary": 10000
+            }
+          }
+        },
+        "minTickSpacing": {
+          "name": "minTickSpacing",
+          "description": "Mindestbreite (px) pro Tick-Label, ab der reduziert wird.",
+          "type": {
+            "name": "number"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "number"
+            },
+            "defaultValue": {
+              "summary": 56
+            }
+          }
+        },
+        "sliderId": {
+          "name": "sliderId",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "step": {
+          "name": "step",
+          "type": {
+            "name": "number"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "number"
+            },
+            "defaultValue": {
+              "summary": 5000
+            }
+          }
+        },
+        "tickCount": {
+          "name": "tickCount",
+          "description": "Gewünschte Anzahl Ticks (inkl. Endpunkte). 0 = keine. Wird bei zu schmalem\n Slider automatisch reduziert.",
+          "type": {
+            "name": "number"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "number"
+            },
+            "defaultValue": {
+              "summary": 3
+            }
+          }
+        },
+        "unit": {
+          "name": "unit",
+          "description": "Einheit, an den formatierten Wert angehängt (z. B. ' €').",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": " €"
+            }
+          }
+        },
+        "value": {
+          "name": "value",
+          "description": "Aktueller Wert. Two-Way (`[(value)]`) UND Angular-Forms.",
+          "type": {
+            "name": "number"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "number"
+            },
+            "defaultValue": {
+              "summary": 50000
+            }
+          }
+        },
+        "disabledChange": {
+          "name": "disabledChange",
+          "description": "Deaktiviert; auch über Angular-Forms (setDisabledState) steuerbar.",
+          "type": {
+            "name": "other",
+            "value": "void"
+          },
+          "action": "disabledChange",
+          "table": {
+            "category": "outputs",
+            "type": {
+              "summary": "(e: boolean) => void"
+            }
+          }
+        },
+        "valueChange": {
+          "name": "valueChange",
+          "description": "Aktueller Wert. Two-Way (`[(value)]`) UND Angular-Forms.",
+          "type": {
+            "name": "other",
+            "value": "void"
+          },
+          "action": "valueChange",
+          "table": {
+            "category": "outputs",
+            "type": {
+              "summary": "(e: number) => void"
+            }
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type SliderComponentInputs = {\n  /**\n   * Markenbereich → .slider-<area> (Thumb- + Output-Farbe).\n   *\n   * @default co\n   */\n  area?: CdsArea;\n  /**\n   * Deaktiviert; auch über Angular-Forms (setDisabledState) steuerbar.\n   *\n   * @default false\n   */\n  disabled?: boolean; // two-way: [(disabled)]\n  /** @default Schritte: 5.000 € */\n  helper?: string;\n  /** @default Budget-Rahmen */\n  label?: string;\n  /** @default 100000 */\n  max?: number;\n  /** @default 10000 */\n  min?: number;\n  /**\n   * Mindestbreite (px) pro Tick-Label, ab der reduziert wird.\n   *\n   * @default 56\n   */\n  minTickSpacing?: number;\n  sliderId?: string;\n  /** @default 5000 */\n  step?: number;\n  /**\n   * Gewünschte Anzahl Ticks (inkl. Endpunkte). 0 = keine. Wird bei zu schmalem\n   *  Slider automatisch reduziert.\n   *\n   * @default 3\n   */\n  tickCount?: number;\n  /**\n   * Einheit, an den formatierten Wert angehängt (z. B. ' €').\n   *\n   * @default  €\n   */\n  unit?: string;\n  /**\n   * Aktueller Wert. Two-Way (`[(value)]`) UND Angular-Forms.\n   *\n   * @default 50000\n   */\n  value?: number; // two-way: [(value)]\n}\n```\n\n## Outputs\n\n```\nexport type SliderComponentOutputs = {\n  /** Deaktiviert; auch über Angular-Forms (setDisabledState) steuerbar. */\n  disabledChange: (e: boolean) => void;\n  /** Aktueller Wert. Two-Way (`[(value)]`) UND Angular-Forms. */\n  valueChange: (e: number) => void;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "SliderComponent",
+        "selector": "cds-slider",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "disabled",
+          "helper",
+          "label",
+          "max",
+          "min",
+          "minTickSpacing",
+          "sliderId",
+          "step",
+          "tickCount",
+          "unit",
+          "value"
+        ],
+        "outputs": [
+          "disabledChange",
+          "valueChange"
+        ],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/komponenten-inputs-forms-textbereich.json

@@ -0,0 +1,190 @@
+{
+  "components": {
+    "komponenten-inputs-forms-textbereich": {
+      "id": "komponenten-inputs-forms-textbereich",
+      "name": "TextareaFieldComponent",
+      "path": "./src/lib/field/textarea-field.stories.ts",
+      "description": "Textbereich — mehrzeiliges `<textarea>` im `.field`-Gerüst. Gleiche a11y-\nVerdrahtung wie das Textfeld (aria-required/-invalid/-describedby).\n\nAls `ControlValueAccessor` (siehe FieldBase) direkt an Angular-Formulare\nanbindbar (`[(ngModel)]`, `formControlName`) bzw. ohne Formular per `[(value)]`.",
+      "jsDocTags": {},
+      "argTypes": {
+        "disabled": {
+          "name": "disabled",
+          "description": "Deaktiviert; auch über Angular-Forms (setDisabledState) steuerbar.",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": false
+            }
+          }
+        },
+        "error": {
+          "name": "error",
+          "description": "Gesetzt = Fehlerzustand (.has-error + .error-msg).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "fieldId": {
+          "name": "fieldId",
+          "description": "id für die label/for- und aria-describedby-Verknüpfung. Default eindeutig.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "helper": {
+          "name": "helper",
+          "description": "Optionaler Hilfetext unter dem Feld.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "label": {
+          "name": "label",
+          "description": "Sichtbares Label.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "placeholder": {
+          "name": "placeholder",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "required": {
+          "name": "required",
+          "description": "Pflichtfeld → .req-Asterisk + aria-required.",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": false
+            }
+          }
+        },
+        "value": {
+          "name": "value",
+          "description": "Feldwert — Two-Way (`[(value)]`) UND Angular-Forms (ngModel/formControlName).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "disabledChange": {
+          "name": "disabledChange",
+          "description": "Deaktiviert; auch über Angular-Forms (setDisabledState) steuerbar.",
+          "type": {
+            "name": "other",
+            "value": "void"
+          },
+          "action": "disabledChange",
+          "table": {
+            "category": "outputs",
+            "type": {
+              "summary": "(e: boolean) => void"
+            }
+          }
+        },
+        "valueChange": {
+          "name": "valueChange",
+          "description": "Feldwert — Two-Way (`[(value)]`) UND Angular-Forms (ngModel/formControlName).",
+          "type": {
+            "name": "other",
+            "value": "void"
+          },
+          "action": "valueChange",
+          "table": {
+            "category": "outputs",
+            "type": {
+              "summary": "(e: string) => void"
+            }
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type TextareaFieldComponentInputs = {\n  /**\n   * Deaktiviert; auch über Angular-Forms (setDisabledState) steuerbar.\n   *\n   * @default false\n   */\n  disabled?: boolean; // two-way: [(disabled)]\n  /**\n   * Gesetzt = Fehlerzustand (.has-error + .error-msg).\n   *\n   * @default ''\n   */\n  error?: string;\n  /** id für die label/for- und aria-describedby-Verknüpfung. Default eindeutig. */\n  fieldId?: string;\n  /**\n   * Optionaler Hilfetext unter dem Feld.\n   *\n   * @default ''\n   */\n  helper?: string;\n  /**\n   * Sichtbares Label.\n   *\n   * @default ''\n   */\n  label?: string;\n  /** @default '' */\n  placeholder?: string;\n  /**\n   * Pflichtfeld → .req-Asterisk + aria-required.\n   *\n   * @default false\n   */\n  required?: boolean;\n  /**\n   * Feldwert — Two-Way (`[(value)]`) UND Angular-Forms (ngModel/formControlName).\n   *\n   * @default ''\n   */\n  value?: string; // two-way: [(value)]\n}\n```\n\n## Outputs\n\n```\nexport type TextareaFieldComponentOutputs = {\n  /** Deaktiviert; auch über Angular-Forms (setDisabledState) steuerbar. */\n  disabledChange: (e: boolean) => void;\n  /** Feldwert — Two-Way (`[(value)]`) UND Angular-Forms (ngModel/formControlName). */\n  valueChange: (e: string) => void;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "TextareaFieldComponent",
+        "selector": "cds-textarea-field",
+        "standalone": true,
+        "inputs": [
+          "disabled",
+          "error",
+          "fieldId",
+          "helper",
+          "label",
+          "placeholder",
+          "required",
+          "value"
+        ],
+        "outputs": [
+          "disabledChange",
+          "valueChange"
+        ],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/komponenten-inputs-forms-textfeld.json

@@ -0,0 +1,207 @@
+{
+  "components": {
+    "komponenten-inputs-forms-textfeld": {
+      "id": "komponenten-inputs-forms-textfeld",
+      "name": "TextFieldComponent",
+      "path": "./src/lib/field/text-field.stories.ts",
+      "description": "Textfeld — einzeiliges `<input>` im `.field`-Gerüst (E-Mail, Text, Tel, … über\n`type`). Pflichtfelder tragen aria-required; im Fehlerzustand wird die Meldung\nüber aria-describedby/aria-invalid verknüpft — wie docs/index.html.\n\nAls `ControlValueAccessor` (siehe FieldBase) direkt an Angular-Formulare\nanbindbar (`[(ngModel)]`, `formControlName`) bzw. ohne Formular per `[(value)]`.",
+      "jsDocTags": {},
+      "argTypes": {
+        "disabled": {
+          "name": "disabled",
+          "description": "Deaktiviert; auch über Angular-Forms (setDisabledState) steuerbar.",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": false
+            }
+          }
+        },
+        "error": {
+          "name": "error",
+          "description": "Gesetzt = Fehlerzustand (.has-error + .error-msg).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "fieldId": {
+          "name": "fieldId",
+          "description": "id für die label/for- und aria-describedby-Verknüpfung. Default eindeutig.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "helper": {
+          "name": "helper",
+          "description": "Optionaler Hilfetext unter dem Feld.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "label": {
+          "name": "label",
+          "description": "Sichtbares Label.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "placeholder": {
+          "name": "placeholder",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "required": {
+          "name": "required",
+          "description": "Pflichtfeld → .req-Asterisk + aria-required.",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": false
+            }
+          }
+        },
+        "type": {
+          "name": "type",
+          "description": "input[type] (text, email, tel, …).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": "text"
+            }
+          }
+        },
+        "value": {
+          "name": "value",
+          "description": "Feldwert — Two-Way (`[(value)]`) UND Angular-Forms (ngModel/formControlName).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "disabledChange": {
+          "name": "disabledChange",
+          "description": "Deaktiviert; auch über Angular-Forms (setDisabledState) steuerbar.",
+          "type": {
+            "name": "other",
+            "value": "void"
+          },
+          "action": "disabledChange",
+          "table": {
+            "category": "outputs",
+            "type": {
+              "summary": "(e: boolean) => void"
+            }
+          }
+        },
+        "valueChange": {
+          "name": "valueChange",
+          "description": "Feldwert — Two-Way (`[(value)]`) UND Angular-Forms (ngModel/formControlName).",
+          "type": {
+            "name": "other",
+            "value": "void"
+          },
+          "action": "valueChange",
+          "table": {
+            "category": "outputs",
+            "type": {
+              "summary": "(e: string) => void"
+            }
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type TextFieldComponentInputs = {\n  /**\n   * Deaktiviert; auch über Angular-Forms (setDisabledState) steuerbar.\n   *\n   * @default false\n   */\n  disabled?: boolean; // two-way: [(disabled)]\n  /**\n   * Gesetzt = Fehlerzustand (.has-error + .error-msg).\n   *\n   * @default ''\n   */\n  error?: string;\n  /** id für die label/for- und aria-describedby-Verknüpfung. Default eindeutig. */\n  fieldId?: string;\n  /**\n   * Optionaler Hilfetext unter dem Feld.\n   *\n   * @default ''\n   */\n  helper?: string;\n  /**\n   * Sichtbares Label.\n   *\n   * @default ''\n   */\n  label?: string;\n  /** @default '' */\n  placeholder?: string;\n  /**\n   * Pflichtfeld → .req-Asterisk + aria-required.\n   *\n   * @default false\n   */\n  required?: boolean;\n  /**\n   * input[type] (text, email, tel, …).\n   *\n   * @default text\n   */\n  type?: string;\n  /**\n   * Feldwert — Two-Way (`[(value)]`) UND Angular-Forms (ngModel/formControlName).\n   *\n   * @default ''\n   */\n  value?: string; // two-way: [(value)]\n}\n```\n\n## Outputs\n\n```\nexport type TextFieldComponentOutputs = {\n  /** Deaktiviert; auch über Angular-Forms (setDisabledState) steuerbar. */\n  disabledChange: (e: boolean) => void;\n  /** Feldwert — Two-Way (`[(value)]`) UND Angular-Forms (ngModel/formControlName). */\n  valueChange: (e: string) => void;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "TextFieldComponent",
+        "selector": "cds-text-field",
+        "standalone": true,
+        "inputs": [
+          "disabled",
+          "error",
+          "fieldId",
+          "helper",
+          "label",
+          "placeholder",
+          "required",
+          "type",
+          "value"
+        ],
+        "outputs": [
+          "disabledChange",
+          "valueChange"
+        ],
+        "enums": []
+      }
+    }
+  }
+}