@conciso/design-system-angular 2.1.1 → 2.3.0

package/fesm2022/conciso-design-system-angular.mjs

@@ -138,9 +138,12 @@ class ButtonComponent {
      *  .btn-text; `filled-on-band` → .btn-filled + .btn-on-band (invertiert). */
     variant = input('filled', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    /** Markenbereich → .btn-co / .btn-ki / .btn-es / .btn-wo */
+    /** Markenbereich → .btn-co / .btn-ki / .btn-es / .btn-wo. Wirkungslos bei `tone="err"`. */
     area = input('co', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []));
+    /** Ton → `err` setzt .btn-err (destruktive Aktion) statt der Bereichsklasse. */
+    tone = input('def', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
     /** Größe → .btn-sm / (md = Default) / .btn-lg */
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -157,7 +160,10 @@ class ButtonComponent {
     classes = computed(() => {
         // filled-on-band = invertierter Filled-Button; rendert .btn-filled + .btn-on-band.
         const onBand = this.variant() === 'filled-on-band';
-        const cls = ['btn', `btn-${onBand ? 'filled' : this.variant()}`, `btn-${this.area()}`];
+        // Ton ersetzt den Bereich, statt ihn zu überlagern: so hängt das Ergebnis nicht an der
+        // Reihenfolge der Regeln in components.css und dark-mode.css.
+        const color = this.tone() === 'err' ? 'err' : this.area();
+        const cls = ['btn', `btn-${onBand ? 'filled' : this.variant()}`, `btn-${color}`];
         if (this.size() === 'sm')
             cls.push('btn-sm');
         if (this.size() === 'lg')
@@ -170,7 +176,7 @@ class ButtonComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: ButtonComponent, isStandalone: true, selector: "cds-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "style.display": "full() ? 'block' : null" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: ButtonComponent, isStandalone: true, selector: "cds-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "style.display": "full() ? 'block' : null" } }, ngImport: i0, template: `
     <button [class]="classes()" [disabled]="disabled()" [attr.type]="type()" (click)="clicked.emit($event)">
       {{ label() }}
     </button>
@@ -191,7 +197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     </button>
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
  * Zentrale Icon-Registry des Storybooks — die EINZIGE Import-Fläche für