@memberjunction/ng-ui-components 0.0.1 → 5.24.0

package/dist/lib/accordion/accordion.component.d.ts

@@ -0,0 +1,58 @@
+import { EventEmitter, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Directive to mark a template as the accordion panel title.
+ * Supports rich HTML content (icons, badges, dynamic text).
+ *
+ * @example
+ * ```html
+ * <mj-accordion-panel [Expanded]="true">
+ *   <ng-template mjAccordionTitle>
+ *     <i class="fa-solid fa-code"></i> Template Editor
+ *     <span class="badge">3</span>
+ *   </ng-template>
+ *   <p>Panel content here</p>
+ * </mj-accordion-panel>
+ * ```
+ */
+export declare class MJAccordionTitleDirective {
+    templateRef: TemplateRef<unknown>;
+    constructor(templateRef: TemplateRef<unknown>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJAccordionTitleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MJAccordionTitleDirective, "[mjAccordionTitle]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * mj-accordion-panel — Collapsible panel. Replaces `<kendo-panelbar-item>` and `<kendo-expansionpanel>`.
+ *
+ * Supports two title modes:
+ * - Simple string: `[Title]="'Details'"` — plain text title
+ * - Rich template: `<ng-template mjAccordionTitle>` — HTML with icons, badges, etc.
+ *
+ * @example
+ * ```html
+ * <!-- Simple string title -->
+ * <mj-accordion-panel Title="Details" [Expanded]="true">
+ *   <p>Panel content here</p>
+ * </mj-accordion-panel>
+ *
+ * <!-- Rich HTML title -->
+ * <mj-accordion-panel [Expanded]="true">
+ *   <ng-template mjAccordionTitle>
+ *     <i class="fa-solid fa-code"></i> Template Editor
+ *   </ng-template>
+ *   <p>Panel content here</p>
+ * </mj-accordion-panel>
+ * ```
+ */
+export declare class MJAccordionPanelComponent {
+    Title: string;
+    Expanded: boolean;
+    Disabled: boolean;
+    ExpandedChange: EventEmitter<boolean>;
+    titleTemplate: MJAccordionTitleDirective | null;
+    readonly hostClass = true;
+    Toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJAccordionPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJAccordionPanelComponent, "mj-accordion-panel", never, { "Title": { "alias": "Title"; "required": false; }; "Expanded": { "alias": "Expanded"; "required": false; }; "Disabled": { "alias": "Disabled"; "required": false; }; }, { "ExpandedChange": "ExpandedChange"; }, ["titleTemplate"], ["*"], true, never>;
+}
+//# sourceMappingURL=accordion.component.d.ts.map

package/dist/lib/accordion/accordion.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAA6B,WAAW,EAAa,MAAM,eAAe,CAAC;;AAG1H;;;;;;;;;;;;;;GAcG;AACH,qBAIa,yBAAyB;IACjB,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;gBAAjC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;yCADzC,yBAAyB;2CAAzB,yBAAyB;CAErC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBA2Ba,yBAAyB;IAC3B,KAAK,SAAM;IACX,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAChB,cAAc,wBAA+B;IACd,aAAa,EAAE,yBAAyB,GAAG,IAAI,CAAQ;IAClD,QAAQ,CAAC,SAAS,QAAQ;IAExE,MAAM,IAAI,IAAI;yCARH,yBAAyB;2CAAzB,yBAAyB;CAarC"}

package/dist/lib/accordion/accordion.component.js

@@ -0,0 +1,163 @@
+import { Component, Input, Output, EventEmitter, HostBinding, ContentChild, Directive } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+function MJAccordionPanelComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 3);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.titleTemplate.templateRef);
+} }
+function MJAccordionPanelComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.Title, " ");
+} }
+function MJAccordionPanelComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵprojection(1);
+    i0.ɵɵelementEnd();
+} }
+/**
+ * Directive to mark a template as the accordion panel title.
+ * Supports rich HTML content (icons, badges, dynamic text).
+ *
+ * @example
+ * ```html
+ * <mj-accordion-panel [Expanded]="true">
+ *   <ng-template mjAccordionTitle>
+ *     <i class="fa-solid fa-code"></i> Template Editor
+ *     <span class="badge">3</span>
+ *   </ng-template>
+ *   <p>Panel content here</p>
+ * </mj-accordion-panel>
+ * ```
+ */
+export class MJAccordionTitleDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = function MJAccordionTitleDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJAccordionTitleDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef)); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MJAccordionTitleDirective, selectors: [["", "mjAccordionTitle", ""]] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAccordionTitleDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[mjAccordionTitle]',
+                standalone: true
+            }]
+    }], () => [{ type: i0.TemplateRef }], null); })();
+/**
+ * mj-accordion-panel — Collapsible panel. Replaces `<kendo-panelbar-item>` and `<kendo-expansionpanel>`.
+ *
+ * Supports two title modes:
+ * - Simple string: `[Title]="'Details'"` — plain text title
+ * - Rich template: `<ng-template mjAccordionTitle>` — HTML with icons, badges, etc.
+ *
+ * @example
+ * ```html
+ * <!-- Simple string title -->
+ * <mj-accordion-panel Title="Details" [Expanded]="true">
+ *   <p>Panel content here</p>
+ * </mj-accordion-panel>
+ *
+ * <!-- Rich HTML title -->
+ * <mj-accordion-panel [Expanded]="true">
+ *   <ng-template mjAccordionTitle>
+ *     <i class="fa-solid fa-code"></i> Template Editor
+ *   </ng-template>
+ *   <p>Panel content here</p>
+ * </mj-accordion-panel>
+ * ```
+ */
+export class MJAccordionPanelComponent {
+    Title = '';
+    Expanded = false;
+    Disabled = false;
+    ExpandedChange = new EventEmitter();
+    titleTemplate = null;
+    hostClass = true;
+    Toggle() {
+        if (this.Disabled)
+            return;
+        this.Expanded = !this.Expanded;
+        this.ExpandedChange.emit(this.Expanded);
+    }
+    static ɵfac = function MJAccordionPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJAccordionPanelComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJAccordionPanelComponent, selectors: [["mj-accordion-panel"]], contentQueries: function MJAccordionPanelComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuery(dirIndex, MJAccordionTitleDirective, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.titleTemplate = _t.first);
+        } }, hostVars: 2, hostBindings: function MJAccordionPanelComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassProp("mj-accordion-panel-host", ctx.hostClass);
+        } }, inputs: { Title: "Title", Expanded: "Expanded", Disabled: "Disabled" }, outputs: { ExpandedChange: "ExpandedChange" }, ngContentSelectors: _c0, decls: 7, vars: 8, consts: [[1, "mj-accordion-panel"], ["type", "button", 1, "mj-accordion-header", 3, "click", "disabled"], [1, "mj-accordion-title"], [3, "ngTemplateOutlet"], [1, "fa-solid", "fa-chevron-down", "mj-accordion-icon"], ["role", "region", 1, "mj-accordion-body"]], template: function MJAccordionPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
+            i0.ɵɵlistener("click", function MJAccordionPanelComponent_Template_button_click_1_listener() { return ctx.Toggle(); });
+            i0.ɵɵelementStart(2, "span", 2);
+            i0.ɵɵconditionalCreate(3, MJAccordionPanelComponent_Conditional_3_Template, 1, 1, "ng-container", 3)(4, MJAccordionPanelComponent_Conditional_4_Template, 1, 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(5, "i", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(6, MJAccordionPanelComponent_Conditional_6_Template, 2, 0, "div", 5);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("mj-accordion-panel--expanded", ctx.Expanded)("mj-accordion-panel--disabled", ctx.Disabled);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("disabled", ctx.Disabled);
+            i0.ɵɵattribute("aria-expanded", ctx.Expanded);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.titleTemplate ? 3 : 4);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.Expanded ? 6 : -1);
+        } }, dependencies: [NgTemplateOutlet], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAccordionPanelComponent, [{
+        type: Component,
+        args: [{
+                selector: 'mj-accordion-panel',
+                standalone: true,
+                imports: [NgTemplateOutlet],
+                template: `
+    <div class="mj-accordion-panel" [class.mj-accordion-panel--expanded]="Expanded" [class.mj-accordion-panel--disabled]="Disabled">
+      <button class="mj-accordion-header" type="button"
+        [attr.aria-expanded]="Expanded"
+        [disabled]="Disabled"
+        (click)="Toggle()">
+        <span class="mj-accordion-title">
+          @if (titleTemplate) {
+            <ng-container [ngTemplateOutlet]="titleTemplate.templateRef"></ng-container>
+          } @else {
+            {{ Title }}
+          }
+        </span>
+        <i class="fa-solid fa-chevron-down mj-accordion-icon"></i>
+      </button>
+      @if (Expanded) {
+        <div class="mj-accordion-body" role="region">
+          <ng-content></ng-content>
+        </div>
+      }
+    </div>
+  `
+            }]
+    }], null, { Title: [{
+            type: Input
+        }], Expanded: [{
+            type: Input
+        }], Disabled: [{
+            type: Input
+        }], ExpandedChange: [{
+            type: Output
+        }], titleTemplate: [{
+            type: ContentChild,
+            args: [MJAccordionTitleDirective]
+        }], hostClass: [{
+            type: HostBinding,
+            args: ['class.mj-accordion-panel-host']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJAccordionPanelComponent, { className: "MJAccordionPanelComponent", filePath: "lib/accordion/accordion.component.ts", lineNumber: 77 }); })();
+//# sourceMappingURL=accordion.component.js.map

package/dist/lib/accordion/accordion.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.component.js","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAe,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1H,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;;;;IA4DvC,2BAA4E;;;IAA9D,mEAA8C;;;IAE5D,YACF;;;IADE,6CACF;;;IAKF,8BAA6C;IAC3C,kBAAyB;IAC3B,iBAAM;;AApEd;;;;;;;;;;;;;;GAcG;AAKH,MAAM,OAAO,yBAAyB;IACjB;IAAnB,YAAmB,WAAiC;QAAjC,gBAAW,GAAX,WAAW,CAAsB;IAAG,CAAC;mHAD7C,yBAAyB;6DAAzB,yBAAyB;;iFAAzB,yBAAyB;cAJrC,SAAS;eAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,UAAU,EAAE,IAAI;aACjB;;AAKD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AA4BH,MAAM,OAAO,yBAAyB;IAC3B,KAAK,GAAG,EAAE,CAAC;IACX,QAAQ,GAAG,KAAK,CAAC;IACjB,QAAQ,GAAG,KAAK,CAAC;IAChB,cAAc,GAAG,IAAI,YAAY,EAAW,CAAC;IACd,aAAa,GAAqC,IAAI,CAAC;IACzC,SAAS,GAAG,IAAI,CAAC;IAExE,MAAM;QACJ,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC;mHAZU,yBAAyB;6DAAzB,yBAAyB;wCAKtB,yBAAyB;;;;;YAL5B,wDAAyB;;;YArBhC,AADF,8BAAgI,gBAIzG;YAAnB,sGAAS,YAAQ,IAAC;YAClB,+BAAiC;YAG7B,AAFF,oGAAqB,2DAEZ;YAGX,iBAAO;YACP,uBAA0D;YAC5D,iBAAS;YACT,2FAAgB;YAKlB,iBAAM;;YAnB0E,AAAhD,4DAA+C,8CAAgD;YAG3H,cAAqB;YAArB,uCAAqB;;YAGnB,eAIC;YAJD,2CAIC;YAIL,eAIC;YAJD,uCAIC;4BApBK,gBAAgB;;iFAwBf,yBAAyB;cA3BrC,SAAS;eAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,UAAU,EAAE,IAAI;gBAChB,OAAO,EAAE,CAAC,gBAAgB,CAAC;gBAC3B,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;GAqBT;aACF;;kBAEE,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,MAAM;;kBACN,YAAY;mBAAC,yBAAyB;;kBACtC,WAAW;mBAAC,+BAA+B;;kFANjC,yBAAyB","sourcesContent":["import { Component, Input, Output, EventEmitter, HostBinding, ContentChild, TemplateRef, Directive } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\n/**\n * Directive to mark a template as the accordion panel title.\n * Supports rich HTML content (icons, badges, dynamic text).\n *\n * @example\n * ```html\n * <mj-accordion-panel [Expanded]=\"true\">\n *   <ng-template mjAccordionTitle>\n *     <i class=\"fa-solid fa-code\"></i> Template Editor\n *     <span class=\"badge\">3</span>\n *   </ng-template>\n *   <p>Panel content here</p>\n * </mj-accordion-panel>\n * ```\n */\n@Directive({\n  selector: '[mjAccordionTitle]',\n  standalone: true\n})\nexport class MJAccordionTitleDirective {\n  constructor(public templateRef: TemplateRef<unknown>) {}\n}\n\n/**\n * mj-accordion-panel — Collapsible panel. Replaces `<kendo-panelbar-item>` and `<kendo-expansionpanel>`.\n *\n * Supports two title modes:\n * - Simple string: `[Title]=\"'Details'\"` — plain text title\n * - Rich template: `<ng-template mjAccordionTitle>` — HTML with icons, badges, etc.\n *\n * @example\n * ```html\n * <!-- Simple string title -->\n * <mj-accordion-panel Title=\"Details\" [Expanded]=\"true\">\n *   <p>Panel content here</p>\n * </mj-accordion-panel>\n *\n * <!-- Rich HTML title -->\n * <mj-accordion-panel [Expanded]=\"true\">\n *   <ng-template mjAccordionTitle>\n *     <i class=\"fa-solid fa-code\"></i> Template Editor\n *   </ng-template>\n *   <p>Panel content here</p>\n * </mj-accordion-panel>\n * ```\n */\n@Component({\n  selector: 'mj-accordion-panel',\n  standalone: true,\n  imports: [NgTemplateOutlet],\n  template: `\n    <div class=\"mj-accordion-panel\" [class.mj-accordion-panel--expanded]=\"Expanded\" [class.mj-accordion-panel--disabled]=\"Disabled\">\n      <button class=\"mj-accordion-header\" type=\"button\"\n        [attr.aria-expanded]=\"Expanded\"\n        [disabled]=\"Disabled\"\n        (click)=\"Toggle()\">\n        <span class=\"mj-accordion-title\">\n          @if (titleTemplate) {\n            <ng-container [ngTemplateOutlet]=\"titleTemplate.templateRef\"></ng-container>\n          } @else {\n            {{ Title }}\n          }\n        </span>\n        <i class=\"fa-solid fa-chevron-down mj-accordion-icon\"></i>\n      </button>\n      @if (Expanded) {\n        <div class=\"mj-accordion-body\" role=\"region\">\n          <ng-content></ng-content>\n        </div>\n      }\n    </div>\n  `\n})\nexport class MJAccordionPanelComponent {\n  @Input() Title = '';\n  @Input() Expanded = false;\n  @Input() Disabled = false;\n  @Output() ExpandedChange = new EventEmitter<boolean>();\n  @ContentChild(MJAccordionTitleDirective) titleTemplate: MJAccordionTitleDirective | null = null;\n  @HostBinding('class.mj-accordion-panel-host') readonly hostClass = true;\n\n  Toggle(): void {\n    if (this.Disabled) return;\n    this.Expanded = !this.Expanded;\n    this.ExpandedChange.emit(this.Expanded);\n  }\n}\n"]}

package/dist/lib/accordion/accordion.scss

@@ -0,0 +1,45 @@
+/**
+ * MJ Accordion Panel Styles
+ */
+
+.mj-accordion-panel {
+  border: 1px solid var(--mj-border-default);
+  border-radius: var(--mj-radius-sm);
+  margin-bottom: 4px;
+  overflow: hidden;
+}
+
+.mj-accordion-header {
+  display: flex; align-items: center; justify-content: space-between;
+  width: 100%; padding: 12px 16px;
+  background: var(--mj-bg-surface-sunken); border: none; cursor: pointer;
+  font-family: var(--mj-font-family); font-size: var(--mj-text-sm);
+  font-weight: var(--mj-font-semibold); color: var(--mj-text-primary);
+  text-align: left; transition: background var(--mj-transition-fast);
+  &:hover { background: var(--mj-bg-surface-hover); }
+  &:focus-visible { outline: none; box-shadow: var(--mj-focus-ring); }
+}
+
+.mj-accordion-icon {
+  font-size: 0.75rem; color: var(--mj-text-muted);
+  transition: transform var(--mj-transition-base);
+  .mj-accordion-panel--expanded & { transform: rotate(180deg); }
+}
+
+.mj-accordion-body {
+  padding: 16px;
+  border-top: 1px solid var(--mj-border-default);
+  background: var(--mj-bg-surface);
+}
+
+.mj-accordion-title { flex: 1; }
+
+.mj-accordion-panel--disabled .mj-accordion-header {
+  opacity: 0.5;
+  cursor: not-allowed;
+  &:hover { background: var(--mj-bg-surface-sunken); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mj-accordion-icon { transition: none; }
+}

package/dist/lib/button/button.directive.d.ts

@@ -0,0 +1,45 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export type MjButtonVariant = 'primary' | 'secondary' | 'outline' | 'flat' | 'danger' | 'icon' | 'success' | 'warning';
+export type MjButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * mjButton — Attribute directive that styles a native `<button>` or `<a>` element
+ * as an MJ-branded button.
+ *
+ * Uses `--mj-*` design tokens for all colors, ensuring dark-mode support
+ * with zero extra CSS.
+ *
+ * Inputs use lowercase (not PascalCase) per the Phase 2 plan exception for
+ * directives — matches HTML attribute convention.
+ *
+ * @example
+ * ```html
+ * <button mjButton variant="primary" (click)="save()">Save</button>
+ * <button mjButton variant="outline" size="sm">Cancel</button>
+ * <button mjButton variant="flat" [toggleable]="true" [(selected)]="isActive">Toggle</button>
+ * ```
+ */
+export declare class MJButtonDirective {
+    variant: MjButtonVariant;
+    size: MjButtonSize;
+    toggleable: boolean;
+    selected: boolean;
+    selectedChange: EventEmitter<boolean>;
+    readonly baseClass = true;
+    get isPrimary(): boolean;
+    get isSecondary(): boolean;
+    get isOutline(): boolean;
+    get isFlat(): boolean;
+    get isDanger(): boolean;
+    get isIcon(): boolean;
+    get isSuccess(): boolean;
+    get isWarning(): boolean;
+    get isSm(): boolean;
+    get isLg(): boolean;
+    get isSelected(): boolean;
+    get ariaPressed(): string | null;
+    OnClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJButtonDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MJButtonDirective, "button[mjButton], a[mjButton]", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectedChange": "selectedChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=button.directive.d.ts.map

package/dist/lib/button/button.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.directive.d.ts","sourceRoot":"","sources":["../../../src/lib/button/button.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EAGb,MAAM,eAAe,CAAC;;AAEvB,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,QAAQ,GACR,MAAM,GACN,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C;;;;;;;;;;;;;;;;GAgBG;AACH,qBAIa,iBAAiB;IACnB,OAAO,EAAE,eAAe,CAAe;IACvC,IAAI,EAAE,YAAY,CAAQ;IAC1B,UAAU,UAAS;IACnB,QAAQ,UAAS;IAChB,cAAc,wBAA+B;IAE1B,QAAQ,CAAC,SAAS,QAAQ;IAEvD,IAA0C,SAAS,YAAyC;IAC5F,IAA4C,WAAW,YAA2C;IAClG,IAA0C,SAAS,YAAyC;IAC5F,IAAuC,MAAM,YAAsC;IACnF,IAAyC,QAAQ,YAAwC;IACzF,IAAuC,MAAM,YAAsC;IACnF,IAA0C,SAAS,YAAyC;IAC5F,IAA0C,SAAS,YAAyC;IAE5F,IAAqC,IAAI,YAAiC;IAC1E,IAAqC,IAAI,YAAiC;IAE1E,IAA2C,UAAU,YAA+C;IACpG,IAAsC,WAAW,IAAI,MAAM,GAAG,IAAI,CAEjE;IAGD,OAAO,IAAI,IAAI;yCA3BJ,iBAAiB;2CAAjB,iBAAiB;CAiC7B"}

package/dist/lib/button/button.directive.js

@@ -0,0 +1,114 @@
+import { Directive, Input, Output, EventEmitter, HostBinding, HostListener } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * mjButton — Attribute directive that styles a native `<button>` or `<a>` element
+ * as an MJ-branded button.
+ *
+ * Uses `--mj-*` design tokens for all colors, ensuring dark-mode support
+ * with zero extra CSS.
+ *
+ * Inputs use lowercase (not PascalCase) per the Phase 2 plan exception for
+ * directives — matches HTML attribute convention.
+ *
+ * @example
+ * ```html
+ * <button mjButton variant="primary" (click)="save()">Save</button>
+ * <button mjButton variant="outline" size="sm">Cancel</button>
+ * <button mjButton variant="flat" [toggleable]="true" [(selected)]="isActive">Toggle</button>
+ * ```
+ */
+export class MJButtonDirective {
+    variant = 'secondary';
+    size = 'md';
+    toggleable = false;
+    selected = false;
+    selectedChange = new EventEmitter();
+    baseClass = true;
+    get isPrimary() { return this.variant === 'primary'; }
+    get isSecondary() { return this.variant === 'secondary'; }
+    get isOutline() { return this.variant === 'outline'; }
+    get isFlat() { return this.variant === 'flat'; }
+    get isDanger() { return this.variant === 'danger'; }
+    get isIcon() { return this.variant === 'icon'; }
+    get isSuccess() { return this.variant === 'success'; }
+    get isWarning() { return this.variant === 'warning'; }
+    get isSm() { return this.size === 'sm'; }
+    get isLg() { return this.size === 'lg'; }
+    get isSelected() { return this.toggleable && this.selected; }
+    get ariaPressed() {
+        return this.toggleable ? String(this.selected) : null;
+    }
+    OnClick() {
+        if (this.toggleable) {
+            this.selected = !this.selected;
+            this.selectedChange.emit(this.selected);
+        }
+    }
+    static ɵfac = function MJButtonDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJButtonDirective)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MJButtonDirective, selectors: [["button", "mjButton", ""], ["a", "mjButton", ""]], hostVars: 25, hostBindings: function MJButtonDirective_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function MJButtonDirective_click_HostBindingHandler() { return ctx.OnClick(); });
+        } if (rf & 2) {
+            i0.ɵɵattribute("aria-pressed", ctx.ariaPressed);
+            i0.ɵɵclassProp("mj-btn", ctx.baseClass)("mj-btn--primary", ctx.isPrimary)("mj-btn--secondary", ctx.isSecondary)("mj-btn--outline", ctx.isOutline)("mj-btn--flat", ctx.isFlat)("mj-btn--danger", ctx.isDanger)("mj-btn--icon", ctx.isIcon)("mj-btn--success", ctx.isSuccess)("mj-btn--warning", ctx.isWarning)("mj-btn--sm", ctx.isSm)("mj-btn--lg", ctx.isLg)("mj-btn--selected", ctx.isSelected);
+        } }, inputs: { variant: "variant", size: "size", toggleable: "toggleable", selected: "selected" }, outputs: { selectedChange: "selectedChange" } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJButtonDirective, [{
+        type: Directive,
+        args: [{
+                selector: 'button[mjButton], a[mjButton]',
+                standalone: true
+            }]
+    }], null, { variant: [{
+            type: Input
+        }], size: [{
+            type: Input
+        }], toggleable: [{
+            type: Input
+        }], selected: [{
+            type: Input
+        }], selectedChange: [{
+            type: Output
+        }], baseClass: [{
+            type: HostBinding,
+            args: ['class.mj-btn']
+        }], isPrimary: [{
+            type: HostBinding,
+            args: ['class.mj-btn--primary']
+        }], isSecondary: [{
+            type: HostBinding,
+            args: ['class.mj-btn--secondary']
+        }], isOutline: [{
+            type: HostBinding,
+            args: ['class.mj-btn--outline']
+        }], isFlat: [{
+            type: HostBinding,
+            args: ['class.mj-btn--flat']
+        }], isDanger: [{
+            type: HostBinding,
+            args: ['class.mj-btn--danger']
+        }], isIcon: [{
+            type: HostBinding,
+            args: ['class.mj-btn--icon']
+        }], isSuccess: [{
+            type: HostBinding,
+            args: ['class.mj-btn--success']
+        }], isWarning: [{
+            type: HostBinding,
+            args: ['class.mj-btn--warning']
+        }], isSm: [{
+            type: HostBinding,
+            args: ['class.mj-btn--sm']
+        }], isLg: [{
+            type: HostBinding,
+            args: ['class.mj-btn--lg']
+        }], isSelected: [{
+            type: HostBinding,
+            args: ['class.mj-btn--selected']
+        }], ariaPressed: [{
+            type: HostBinding,
+            args: ['attr.aria-pressed']
+        }], OnClick: [{
+            type: HostListener,
+            args: ['click']
+        }] }); })();
+//# sourceMappingURL=button.directive.js.map

package/dist/lib/button/button.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.directive.js","sourceRoot":"","sources":["../../../src/lib/button/button.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,YAAY,EACb,MAAM,eAAe,CAAC;;AAcvB;;;;;;;;;;;;;;;;GAgBG;AAKH,MAAM,OAAO,iBAAiB;IACnB,OAAO,GAAoB,WAAW,CAAC;IACvC,IAAI,GAAiB,IAAI,CAAC;IAC1B,UAAU,GAAG,KAAK,CAAC;IACnB,QAAQ,GAAG,KAAK,CAAC;IAChB,cAAc,GAAG,IAAI,YAAY,EAAW,CAAC;IAEjB,SAAS,GAAG,IAAI,CAAC;IAEvD,IAA0C,SAAS,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC;IAC5F,IAA4C,WAAW,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC;IAClG,IAA0C,SAAS,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC;IAC5F,IAAuC,MAAM,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC;IACnF,IAAyC,QAAQ,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC;IACzF,IAAuC,MAAM,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC;IACnF,IAA0C,SAAS,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC;IAC5F,IAA0C,SAAS,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC;IAE5F,IAAqC,IAAI,KAAK,OAAO,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC;IAC1E,IAAqC,IAAI,KAAK,OAAO,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC;IAE1E,IAA2C,UAAU,KAAK,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IACpG,IAAsC,WAAW;QAC/C,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACxD,CAAC;IAGD,OAAO;QACL,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;2GAhCU,iBAAiB;6DAAjB,iBAAiB;YAAjB,sFAAA,aAAS,IAAQ;;;YAAjB,uCAAiB,kCAAA,sCAAA,kCAAA,4BAAA,gCAAA,4BAAA,kCAAA,kCAAA,wBAAA,wBAAA,oCAAA;;;iFAAjB,iBAAiB;cAJ7B,SAAS;eAAC;gBACT,QAAQ,EAAE,+BAA+B;gBACzC,UAAU,EAAE,IAAI;aACjB;;kBAEE,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,MAAM;;kBAEN,WAAW;mBAAC,cAAc;;kBAE1B,WAAW;mBAAC,uBAAuB;;kBACnC,WAAW;mBAAC,yBAAyB;;kBACrC,WAAW;mBAAC,uBAAuB;;kBACnC,WAAW;mBAAC,oBAAoB;;kBAChC,WAAW;mBAAC,sBAAsB;;kBAClC,WAAW;mBAAC,oBAAoB;;kBAChC,WAAW;mBAAC,uBAAuB;;kBACnC,WAAW;mBAAC,uBAAuB;;kBAEnC,WAAW;mBAAC,kBAAkB;;kBAC9B,WAAW;mBAAC,kBAAkB;;kBAE9B,WAAW;mBAAC,wBAAwB;;kBACpC,WAAW;mBAAC,mBAAmB;;kBAI/B,YAAY;mBAAC,OAAO","sourcesContent":["import {\n  Directive,\n  Input,\n  Output,\n  EventEmitter,\n  HostBinding,\n  HostListener\n} from '@angular/core';\n\nexport type MjButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'outline'\n  | 'flat'\n  | 'danger'\n  | 'icon'\n  | 'success'\n  | 'warning';\n\nexport type MjButtonSize = 'sm' | 'md' | 'lg';\n\n/**\n * mjButton — Attribute directive that styles a native `<button>` or `<a>` element\n * as an MJ-branded button.\n *\n * Uses `--mj-*` design tokens for all colors, ensuring dark-mode support\n * with zero extra CSS.\n *\n * Inputs use lowercase (not PascalCase) per the Phase 2 plan exception for\n * directives — matches HTML attribute convention.\n *\n * @example\n * ```html\n * <button mjButton variant=\"primary\" (click)=\"save()\">Save</button>\n * <button mjButton variant=\"outline\" size=\"sm\">Cancel</button>\n * <button mjButton variant=\"flat\" [toggleable]=\"true\" [(selected)]=\"isActive\">Toggle</button>\n * ```\n */\n@Directive({\n  selector: 'button[mjButton], a[mjButton]',\n  standalone: true\n})\nexport class MJButtonDirective {\n  @Input() variant: MjButtonVariant = 'secondary';\n  @Input() size: MjButtonSize = 'md';\n  @Input() toggleable = false;\n  @Input() selected = false;\n  @Output() selectedChange = new EventEmitter<boolean>();\n\n  @HostBinding('class.mj-btn') readonly baseClass = true;\n\n  @HostBinding('class.mj-btn--primary') get isPrimary() { return this.variant === 'primary'; }\n  @HostBinding('class.mj-btn--secondary') get isSecondary() { return this.variant === 'secondary'; }\n  @HostBinding('class.mj-btn--outline') get isOutline() { return this.variant === 'outline'; }\n  @HostBinding('class.mj-btn--flat') get isFlat() { return this.variant === 'flat'; }\n  @HostBinding('class.mj-btn--danger') get isDanger() { return this.variant === 'danger'; }\n  @HostBinding('class.mj-btn--icon') get isIcon() { return this.variant === 'icon'; }\n  @HostBinding('class.mj-btn--success') get isSuccess() { return this.variant === 'success'; }\n  @HostBinding('class.mj-btn--warning') get isWarning() { return this.variant === 'warning'; }\n\n  @HostBinding('class.mj-btn--sm') get isSm() { return this.size === 'sm'; }\n  @HostBinding('class.mj-btn--lg') get isLg() { return this.size === 'lg'; }\n\n  @HostBinding('class.mj-btn--selected') get isSelected() { return this.toggleable && this.selected; }\n  @HostBinding('attr.aria-pressed') get ariaPressed(): string | null {\n    return this.toggleable ? String(this.selected) : null;\n  }\n\n  @HostListener('click')\n  OnClick(): void {\n    if (this.toggleable) {\n      this.selected = !this.selected;\n      this.selectedChange.emit(this.selected);\n    }\n  }\n}\n"]}