@rblabs-dev/axiom 1.2.1 → 1.2.3

package/fesm2022/rblabs-dev-axiom-empty-state.mjs

@@ -0,0 +1,252 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, input, output } from "@angular/core";
+import { MatButton } from "@angular/material/button";
+import { MatIcon } from "@angular/material/icon";
+var RbEmptyStateComponent = class RbEmptyStateComponent {
+	title = input.required(...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	description = input("", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+	icon = input("inbox", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	headingLevel = input(3, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
+	layout = input("centered", ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	actionLabel = input("", ...ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []);
+	action = output();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: RbEmptyStateComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: RbEmptyStateComponent,
+		isStandalone: true,
+		selector: "rb-empty-state",
+		inputs: {
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			description: {
+				classPropertyName: "description",
+				publicName: "description",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			headingLevel: {
+				classPropertyName: "headingLevel",
+				publicName: "headingLevel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			layout: {
+				classPropertyName: "layout",
+				publicName: "layout",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			actionLabel: {
+				classPropertyName: "actionLabel",
+				publicName: "actionLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { action: "action" },
+		host: {
+			properties: {
+				"attr.title": "null",
+				"attr.data-layout": "layout()"
+			},
+			classAttribute: "rb-empty-state"
+		},
+		ngImport: i0,
+		template: `
+    <mat-icon class="rb-empty-state__icon" fontSet="material-symbols-outlined" aria-hidden="true">{{
+      icon()
+    }}</mat-icon>
+    <div class="rb-empty-state__copy">
+      @switch (headingLevel()) {
+        @case (2) {
+          <h2 class="rb-empty-state__title">{{ title() }}</h2>
+        }
+        @case (4) {
+          <h4 class="rb-empty-state__title">{{ title() }}</h4>
+        }
+        @case (5) {
+          <h5 class="rb-empty-state__title">{{ title() }}</h5>
+        }
+        @case (6) {
+          <h6 class="rb-empty-state__title">{{ title() }}</h6>
+        }
+        @default {
+          <h3 class="rb-empty-state__title">{{ title() }}</h3>
+        }
+      }
+      @if (description()) {
+        <p class="rb-empty-state__description">{{ description() }}</p>
+      }
+      <div class="rb-empty-state__actions">
+        @if (actionLabel()) {
+          <button matButton="outlined" type="button" (click)="action.emit()">
+            {{ actionLabel() }}
+          </button>
+        }
+        <ng-content select="[rbActions]" />
+      </div>
+    </div>
+  `,
+		isInline: true,
+		styles: ["rb-empty-state{display:flex;flex-direction:column;gap:var(--rb-space-3);align-items:center;min-width:0;padding:var(--rb-space-8) var(--rb-space-4);color:var(--rb-color-text-muted);text-align:center}rb-empty-state .rb-empty-state__icon{flex:none;width:var(--rb-space-10);height:var(--rb-space-10);color:var(--rb-color-primary);font-size:var(--rb-space-10)}rb-empty-state .rb-empty-state__copy{display:grid;gap:var(--rb-space-2);justify-items:center;min-width:0;max-width:30rem}rb-empty-state .rb-empty-state__title{margin:0;color:var(--rb-color-text-strong);font:var(--rb-type-title-medium);letter-spacing:var(--rb-type-title-medium-tracking);overflow-wrap:anywhere}rb-empty-state .rb-empty-state__description{margin:0;font:var(--rb-type-body-medium);overflow-wrap:anywhere}rb-empty-state .rb-empty-state__actions{display:flex;flex-wrap:wrap;gap:var(--rb-space-2);justify-content:center;margin-block-start:var(--rb-space-2)}rb-empty-state .rb-empty-state__actions:empty{display:none}rb-empty-state[data-layout=inline]{flex-direction:row;gap:var(--rb-space-3);align-items:flex-start;padding:var(--rb-space-4);border:1px dashed var(--rb-color-border-strong);border-radius:var(--rb-radius-md);background-color:var(--rb-color-surface-sunken);text-align:start}rb-empty-state[data-layout=inline] .rb-empty-state__icon{width:var(--rb-size-icon-lg);height:var(--rb-size-icon-lg);font-size:var(--rb-size-icon-lg)}rb-empty-state[data-layout=inline] .rb-empty-state__copy{gap:var(--rb-space-1);justify-items:start;max-width:none}rb-empty-state[data-layout=inline] .rb-empty-state__title{font:var(--rb-type-title-small);letter-spacing:var(--rb-type-title-small-tracking)}rb-empty-state[data-layout=inline] .rb-empty-state__actions{justify-content:flex-start}\n"],
+		dependencies: [{
+			kind: "component",
+			type: MatButton,
+			selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+			inputs: ["matButton"],
+			exportAs: ["matButton", "matAnchor"]
+		}, {
+			kind: "component",
+			type: MatIcon,
+			selector: "mat-icon",
+			inputs: [
+				"color",
+				"inline",
+				"svgIcon",
+				"fontSet",
+				"fontIcon"
+			],
+			exportAs: ["matIcon"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: RbEmptyStateComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rb-empty-state",
+			imports: [MatButton, MatIcon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				class: "rb-empty-state",
+				"[attr.title]": "null",
+				"[attr.data-layout]": "layout()"
+			},
+			template: `
+    <mat-icon class="rb-empty-state__icon" fontSet="material-symbols-outlined" aria-hidden="true">{{
+      icon()
+    }}</mat-icon>
+    <div class="rb-empty-state__copy">
+      @switch (headingLevel()) {
+        @case (2) {
+          <h2 class="rb-empty-state__title">{{ title() }}</h2>
+        }
+        @case (4) {
+          <h4 class="rb-empty-state__title">{{ title() }}</h4>
+        }
+        @case (5) {
+          <h5 class="rb-empty-state__title">{{ title() }}</h5>
+        }
+        @case (6) {
+          <h6 class="rb-empty-state__title">{{ title() }}</h6>
+        }
+        @default {
+          <h3 class="rb-empty-state__title">{{ title() }}</h3>
+        }
+      }
+      @if (description()) {
+        <p class="rb-empty-state__description">{{ description() }}</p>
+      }
+      <div class="rb-empty-state__actions">
+        @if (actionLabel()) {
+          <button matButton="outlined" type="button" (click)="action.emit()">
+            {{ actionLabel() }}
+          </button>
+        }
+        <ng-content select="[rbActions]" />
+      </div>
+    </div>
+  `,
+			styles: ["rb-empty-state{display:flex;flex-direction:column;gap:var(--rb-space-3);align-items:center;min-width:0;padding:var(--rb-space-8) var(--rb-space-4);color:var(--rb-color-text-muted);text-align:center}rb-empty-state .rb-empty-state__icon{flex:none;width:var(--rb-space-10);height:var(--rb-space-10);color:var(--rb-color-primary);font-size:var(--rb-space-10)}rb-empty-state .rb-empty-state__copy{display:grid;gap:var(--rb-space-2);justify-items:center;min-width:0;max-width:30rem}rb-empty-state .rb-empty-state__title{margin:0;color:var(--rb-color-text-strong);font:var(--rb-type-title-medium);letter-spacing:var(--rb-type-title-medium-tracking);overflow-wrap:anywhere}rb-empty-state .rb-empty-state__description{margin:0;font:var(--rb-type-body-medium);overflow-wrap:anywhere}rb-empty-state .rb-empty-state__actions{display:flex;flex-wrap:wrap;gap:var(--rb-space-2);justify-content:center;margin-block-start:var(--rb-space-2)}rb-empty-state .rb-empty-state__actions:empty{display:none}rb-empty-state[data-layout=inline]{flex-direction:row;gap:var(--rb-space-3);align-items:flex-start;padding:var(--rb-space-4);border:1px dashed var(--rb-color-border-strong);border-radius:var(--rb-radius-md);background-color:var(--rb-color-surface-sunken);text-align:start}rb-empty-state[data-layout=inline] .rb-empty-state__icon{width:var(--rb-size-icon-lg);height:var(--rb-size-icon-lg);font-size:var(--rb-size-icon-lg)}rb-empty-state[data-layout=inline] .rb-empty-state__copy{gap:var(--rb-space-1);justify-items:start;max-width:none}rb-empty-state[data-layout=inline] .rb-empty-state__title{font:var(--rb-type-title-small);letter-spacing:var(--rb-type-title-small-tracking)}rb-empty-state[data-layout=inline] .rb-empty-state__actions{justify-content:flex-start}\n"]
+		}]
+	}],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: true
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		headingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingLevel",
+				required: false
+			}]
+		}],
+		layout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "layout",
+				required: false
+			}]
+		}],
+		actionLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "actionLabel",
+				required: false
+			}]
+		}],
+		action: [{
+			type: i0.Output,
+			args: ["action"]
+		}]
+	}
+});
+export { RbEmptyStateComponent };
+
+//# sourceMappingURL=rblabs-dev-axiom-empty-state.mjs.map

package/fesm2022/rblabs-dev-axiom-empty-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rblabs-dev-axiom-empty-state.mjs","names":[],"sources":["../../../projects/axiom/empty-state/src/empty-state.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  input,\n  output,\n} from '@angular/core';\nimport { MatButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { RbHeadingLevel } from '@rblabs-dev/axiom/panel';\n\nexport type RbEmptyStateLayout = 'centered' | 'inline';\n\n/**\n * Explains why a region has no content and, when there is one, offers the next step\n * (docs/design-system.md, section 15.4). `actionLabel` renders an outlined button that emits\n * `action`; elements marked `rbActions` are projected next to it, for links or several actions.\n */\n@Component({\n  selector: 'rb-empty-state',\n  imports: [MatButton, MatIcon],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'rb-empty-state',\n    // `title` is an input; a static `title=\"…\"` would also leave a native tooltip on the host.\n    '[attr.title]': 'null',\n    '[attr.data-layout]': 'layout()',\n  },\n  template: `\n    <mat-icon class=\"rb-empty-state__icon\" fontSet=\"material-symbols-outlined\" aria-hidden=\"true\">{{\n      icon()\n    }}</mat-icon>\n    <div class=\"rb-empty-state__copy\">\n      @switch (headingLevel()) {\n        @case (2) {\n          <h2 class=\"rb-empty-state__title\">{{ title() }}</h2>\n        }\n        @case (4) {\n          <h4 class=\"rb-empty-state__title\">{{ title() }}</h4>\n        }\n        @case (5) {\n          <h5 class=\"rb-empty-state__title\">{{ title() }}</h5>\n        }\n        @case (6) {\n          <h6 class=\"rb-empty-state__title\">{{ title() }}</h6>\n        }\n        @default {\n          <h3 class=\"rb-empty-state__title\">{{ title() }}</h3>\n        }\n      }\n      @if (description()) {\n        <p class=\"rb-empty-state__description\">{{ description() }}</p>\n      }\n      <div class=\"rb-empty-state__actions\">\n        @if (actionLabel()) {\n          <button matButton=\"outlined\" type=\"button\" (click)=\"action.emit()\">\n            {{ actionLabel() }}\n          </button>\n        }\n        <ng-content select=\"[rbActions]\" />\n      </div>\n    </div>\n  `,\n  styleUrl: './empty-state.scss',\n})\nexport class RbEmptyStateComponent {\n  readonly title = input.required<string>();\n  readonly description = input<string>('');\n  readonly icon = input<string>('inbox');\n  /** Heading level of the title; follows the document outline, not the visual size. */\n  readonly headingLevel = input<RbHeadingLevel>(3);\n  /** `inline` is the compact variant for sidebars and narrow panels. */\n  readonly layout = input<RbEmptyStateLayout>('centered');\n  /** Label of the recovery button; leave empty for a purely informational state. */\n  readonly actionLabel = input<string>('');\n  readonly action = output<void>();\n}\n"],"mappings":";;;;AAkEA,IAAa,wBAAb,MAAa,sBAAqB;CACvB,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,cAAc,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,OAAO,MAAc,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAE7B,eAAe,MAAsB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEvC,SAAS,MAA0B,YAAW,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAE9C,cAAc,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,SAAS,OAAM;CAVb,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAqB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAArB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAqB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,QAAA,SAAA;EAAA,MAAA;GAAA,YAAA;IAAA,cAAA;IAAA,oBAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UArCtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCT,UAAA;EAAA,QAAA,CAAA,qtDAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MA3CS;GAAS,UAAA;GAAA,QAAA,CAAA,WAAA;GAAA,UAAA,CAAA,aAAA,WAAA;EAAA,GAAA;GAAA,MAAA;GAAA,MAAE;GAAO,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;GAAA,UAAA,CAAA,SAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AA8CjB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EAhDjC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAgB,SACjB,CAAC,WAAW,OAAO;GAAC,iBACZ,wBAAwB;GAAM,eAChC,kBAAkB;GAAI,MAC/B;IACJ,OAAO;IAEP,gBAAgB;IAChB,sBAAsB;GACvB;GAAA,UACS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCT,QAAA,CAAA,qtDAAA;EAAA,CAAA"}

package/fesm2022/rblabs-dev-axiom-message.mjs

@@ -0,0 +1,194 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from "@angular/core";
+import { MatIcon } from "@angular/material/icon";
+import { RB_MESSAGE_TONE_LABELS, RB_TONE_ICONS } from "@rblabs-dev/axiom/core";
+var RbMessageComponent = class RbMessageComponent {
+	tone = input("neutral", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	icon = input("", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	live = input("auto", ...ngDevMode ? [{ debugName: "live" }] : /* istanbul ignore next */ []);
+	resolvedIcon = computed(() => this.icon() || RB_TONE_ICONS[this.tone()] || "info", ...ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []);
+	toneLabel = computed(() => RB_MESSAGE_TONE_LABELS[this.tone()], ...ngDevMode ? [{ debugName: "toneLabel" }] : /* istanbul ignore next */ []);
+	politeness = computed(() => {
+		const live = this.live();
+		if (live !== "auto") return live;
+		return this.tone() === "danger" ? "assertive" : "polite";
+	}, ...ngDevMode ? [{ debugName: "politeness" }] : /* istanbul ignore next */ []);
+	role = computed(() => {
+		const politeness = this.politeness();
+		if (politeness === "off") return null;
+		return politeness === "assertive" ? "alert" : "status";
+	}, ...ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []);
+	ariaLive = computed(() => {
+		const politeness = this.politeness();
+		return politeness === "off" ? null : politeness;
+	}, ...ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: RbMessageComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: RbMessageComponent,
+		isStandalone: true,
+		selector: "rb-message",
+		inputs: {
+			tone: {
+				classPropertyName: "tone",
+				publicName: "tone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			live: {
+				classPropertyName: "live",
+				publicName: "live",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.title": "null",
+				"attr.data-tone": "tone()",
+				"attr.role": "role()",
+				"attr.aria-live": "ariaLive()"
+			},
+			classAttribute: "rb-message"
+		},
+		ngImport: i0,
+		template: `
+    <mat-icon class="rb-message__icon" fontSet="material-symbols-outlined" aria-hidden="true">{{
+      resolvedIcon()
+    }}</mat-icon>
+    <div class="rb-message__copy">
+      @if (title()) {
+        <p class="rb-message__title">
+          @if (toneLabel()) {
+            <span class="rb-visually-hidden">{{ toneLabel() }}: </span>
+          }
+          {{ title() }}
+        </p>
+      } @else if (toneLabel()) {
+        <span class="rb-visually-hidden">{{ toneLabel() }}: </span>
+      }
+      <div class="rb-message__body"><ng-content /></div>
+    </div>
+  `,
+		isInline: true,
+		styles: ["rb-message{display:flex;gap:var(--rb-space-3);align-items:flex-start;min-width:0;padding:var(--rb-space-3) var(--rb-space-4);border:1px solid var(--rb-color-border);border-radius:var(--rb-radius-md);background-color:var(--rb-color-surface-sunken);color:var(--rb-color-text);font:var(--rb-type-body-medium);letter-spacing:var(--rb-type-body-medium-tracking)}rb-message[data-tone=info]{border-color:var(--rb-color-info-border);background-color:var(--rb-color-info-soft);color:var(--rb-color-info)}rb-message[data-tone=success]{border-color:var(--rb-color-success-border);background-color:var(--rb-color-success-soft);color:var(--rb-color-success)}rb-message[data-tone=warning]{border-color:var(--rb-color-warning-border);background-color:var(--rb-color-warning-soft);color:var(--rb-color-warning)}rb-message[data-tone=danger]{border-color:var(--rb-color-danger-border);background-color:var(--rb-color-danger-soft);color:var(--rb-color-danger)}rb-message .rb-message__icon{flex:none;width:var(--rb-size-icon-md);height:var(--rb-size-icon-md);font-size:var(--rb-size-icon-md)}rb-message .rb-message__copy{display:grid;flex:1 1 auto;gap:var(--rb-space-1);min-width:0}rb-message .rb-message__title{margin:0;font-weight:var(--rb-font-weight-semibold)}rb-message .rb-message__body{min-width:0;overflow-wrap:anywhere}rb-message .rb-message__body:empty{display:none}rb-message .rb-message__body>:where(p,ul,ol){margin:0}rb-message .rb-message__body>*+*{margin-block-start:var(--rb-space-2)}rb-message .rb-message__body a{color:inherit;font-weight:var(--rb-font-weight-semibold)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: MatIcon,
+			selector: "mat-icon",
+			inputs: [
+				"color",
+				"inline",
+				"svgIcon",
+				"fontSet",
+				"fontIcon"
+			],
+			exportAs: ["matIcon"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: RbMessageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rb-message",
+			imports: [MatIcon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				class: "rb-message",
+				"[attr.title]": "null",
+				"[attr.data-tone]": "tone()",
+				"[attr.role]": "role()",
+				"[attr.aria-live]": "ariaLive()"
+			},
+			template: `
+    <mat-icon class="rb-message__icon" fontSet="material-symbols-outlined" aria-hidden="true">{{
+      resolvedIcon()
+    }}</mat-icon>
+    <div class="rb-message__copy">
+      @if (title()) {
+        <p class="rb-message__title">
+          @if (toneLabel()) {
+            <span class="rb-visually-hidden">{{ toneLabel() }}: </span>
+          }
+          {{ title() }}
+        </p>
+      } @else if (toneLabel()) {
+        <span class="rb-visually-hidden">{{ toneLabel() }}: </span>
+      }
+      <div class="rb-message__body"><ng-content /></div>
+    </div>
+  `,
+			styles: ["rb-message{display:flex;gap:var(--rb-space-3);align-items:flex-start;min-width:0;padding:var(--rb-space-3) var(--rb-space-4);border:1px solid var(--rb-color-border);border-radius:var(--rb-radius-md);background-color:var(--rb-color-surface-sunken);color:var(--rb-color-text);font:var(--rb-type-body-medium);letter-spacing:var(--rb-type-body-medium-tracking)}rb-message[data-tone=info]{border-color:var(--rb-color-info-border);background-color:var(--rb-color-info-soft);color:var(--rb-color-info)}rb-message[data-tone=success]{border-color:var(--rb-color-success-border);background-color:var(--rb-color-success-soft);color:var(--rb-color-success)}rb-message[data-tone=warning]{border-color:var(--rb-color-warning-border);background-color:var(--rb-color-warning-soft);color:var(--rb-color-warning)}rb-message[data-tone=danger]{border-color:var(--rb-color-danger-border);background-color:var(--rb-color-danger-soft);color:var(--rb-color-danger)}rb-message .rb-message__icon{flex:none;width:var(--rb-size-icon-md);height:var(--rb-size-icon-md);font-size:var(--rb-size-icon-md)}rb-message .rb-message__copy{display:grid;flex:1 1 auto;gap:var(--rb-space-1);min-width:0}rb-message .rb-message__title{margin:0;font-weight:var(--rb-font-weight-semibold)}rb-message .rb-message__body{min-width:0;overflow-wrap:anywhere}rb-message .rb-message__body:empty{display:none}rb-message .rb-message__body>:where(p,ul,ol){margin:0}rb-message .rb-message__body>*+*{margin-block-start:var(--rb-space-2)}rb-message .rb-message__body a{color:inherit;font-weight:var(--rb-font-weight-semibold)}\n"]
+		}]
+	}],
+	propDecorators: {
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		live: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "live",
+				required: false
+			}]
+		}]
+	}
+});
+export { RbMessageComponent };
+
+//# sourceMappingURL=rblabs-dev-axiom-message.mjs.map

package/fesm2022/rblabs-dev-axiom-message.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rblabs-dev-axiom-message.mjs","names":[],"sources":["../../../projects/axiom/message/src/message.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport { MatIcon } from '@angular/material/icon';\nimport { RB_MESSAGE_TONE_LABELS, RB_TONE_ICONS, RbMessageTone } from '@rblabs-dev/axiom/core';\n\n/**\n * How the message is announced. `auto` makes a danger message an assertive alert and every other\n * tone a polite status; `off` renders a static message with no live region.\n */\nexport type RbMessageLive = 'auto' | 'polite' | 'assertive' | 'off';\n\n/**\n * Inline status message (docs/design-system.md, section 15.3). The host is the live region, so keep\n * the component mounted and change its content: a region inserted together with its text is not\n * announced by most screen readers (section 9.5).\n */\n@Component({\n  selector: 'rb-message',\n  imports: [MatIcon],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'rb-message',\n    // `title` is an input; a static `title=\"…\"` would also leave a native tooltip on the host.\n    '[attr.title]': 'null',\n    '[attr.data-tone]': 'tone()',\n    '[attr.role]': 'role()',\n    '[attr.aria-live]': 'ariaLive()',\n  },\n  template: `\n    <mat-icon class=\"rb-message__icon\" fontSet=\"material-symbols-outlined\" aria-hidden=\"true\">{{\n      resolvedIcon()\n    }}</mat-icon>\n    <div class=\"rb-message__copy\">\n      @if (title()) {\n        <p class=\"rb-message__title\">\n          @if (toneLabel()) {\n            <span class=\"rb-visually-hidden\">{{ toneLabel() }}: </span>\n          }\n          {{ title() }}\n        </p>\n      } @else if (toneLabel()) {\n        <span class=\"rb-visually-hidden\">{{ toneLabel() }}: </span>\n      }\n      <div class=\"rb-message__body\"><ng-content /></div>\n    </div>\n  `,\n  styleUrl: './message.scss',\n})\nexport class RbMessageComponent {\n  readonly tone = input<RbMessageTone>('neutral');\n  /** Optional bold first line. */\n  readonly title = input<string>('');\n  /** Overrides the tone's default icon. */\n  readonly icon = input<string>('');\n  readonly live = input<RbMessageLive>('auto');\n\n  protected readonly resolvedIcon = computed(\n    () => this.icon() || RB_TONE_ICONS[this.tone()] || 'info',\n  );\n  protected readonly toneLabel = computed(() => RB_MESSAGE_TONE_LABELS[this.tone()]);\n\n  private readonly politeness = computed(() => {\n    const live = this.live();\n    if (live !== 'auto') return live;\n    return this.tone() === 'danger' ? 'assertive' : 'polite';\n  });\n\n  protected readonly role = computed(() => {\n    const politeness = this.politeness();\n    if (politeness === 'off') return null;\n    return politeness === 'assertive' ? 'alert' : 'status';\n  });\n\n  protected readonly ariaLive = computed(() => {\n    const politeness = this.politeness();\n    return politeness === 'off' ? null : politeness;\n  });\n}\n"],"mappings":"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"}

package/fesm2022/rblabs-dev-axiom-monogram.mjs

@@ -0,0 +1,102 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from "@angular/core";
+let nextId = 0;
+var RbMonogramComponent = class RbMonogramComponent {
+	gradientId = `rb-monogram-gradient-${nextId++}`;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: RbMonogramComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: RbMonogramComponent,
+		isStandalone: true,
+		selector: "rb-monogram",
+		host: {
+			attributes: { "aria-hidden": "true" },
+			classAttribute: "rb-monogram"
+		},
+		ngImport: i0,
+		template: `
+    <svg class="rb-monogram__svg" viewBox="0 0 64 64" focusable="false">
+      <defs>
+        <linearGradient
+          [attr.id]="gradientId"
+          x1="8"
+          y1="8"
+          x2="56"
+          y2="56"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop class="rb-monogram__gradient-start" />
+          <stop class="rb-monogram__gradient-end" offset="1" />
+        </linearGradient>
+      </defs>
+      <rect class="rb-monogram__frame" width="64" height="64" rx="16" />
+      <rect x="5" y="5" width="54" height="54" rx="14" [attr.fill]="'url(#' + gradientId + ')'" />
+      <g class="rb-monogram__letters">
+        <path d="M17 47V17h7.3c4.9 0 7.8 2.7 7.8 6.9s-2.9 6.8-7.8 6.8H17M24.3 30.7 34.5 47" />
+        <path
+          d="M40 17v30M40 17h6.8c4.4 0 7.1 2.6 7.1 6.2s-2.7 5.9-7.1 5.9H40M40 29.1h7.5c4.7 0 7.7 3.2 7.7 7.1s-3 7.8-7.7 7.8H40"
+        />
+      </g>
+    </svg>
+  `,
+		isInline: true,
+		styles: ["rb-monogram{display:inline-block;flex:none;inline-size:var(--rb-size-monogram);aspect-ratio:1;line-height:0}rb-monogram .rb-monogram__svg{display:block;inline-size:100%;block-size:100%}rb-monogram .rb-monogram__frame{fill:var(--rb-color-brand-navy)}rb-monogram .rb-monogram__gradient-start{stop-color:var(--rb-color-brand-start)}rb-monogram .rb-monogram__gradient-end{stop-color:var(--rb-color-brand-end)}rb-monogram .rb-monogram__letters{fill:none;stroke:var(--rb-color-brand-ink);stroke-linecap:round;stroke-linejoin:round;stroke-width:3.5}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: RbMonogramComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rb-monogram",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				class: "rb-monogram",
+				"aria-hidden": "true"
+			},
+			template: `
+    <svg class="rb-monogram__svg" viewBox="0 0 64 64" focusable="false">
+      <defs>
+        <linearGradient
+          [attr.id]="gradientId"
+          x1="8"
+          y1="8"
+          x2="56"
+          y2="56"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop class="rb-monogram__gradient-start" />
+          <stop class="rb-monogram__gradient-end" offset="1" />
+        </linearGradient>
+      </defs>
+      <rect class="rb-monogram__frame" width="64" height="64" rx="16" />
+      <rect x="5" y="5" width="54" height="54" rx="14" [attr.fill]="'url(#' + gradientId + ')'" />
+      <g class="rb-monogram__letters">
+        <path d="M17 47V17h7.3c4.9 0 7.8 2.7 7.8 6.9s-2.9 6.8-7.8 6.8H17M24.3 30.7 34.5 47" />
+        <path
+          d="M40 17v30M40 17h6.8c4.4 0 7.1 2.6 7.1 6.2s-2.7 5.9-7.1 5.9H40M40 29.1h7.5c4.7 0 7.7 3.2 7.7 7.1s-3 7.8-7.7 7.8H40"
+        />
+      </g>
+    </svg>
+  `,
+			styles: ["rb-monogram{display:inline-block;flex:none;inline-size:var(--rb-size-monogram);aspect-ratio:1;line-height:0}rb-monogram .rb-monogram__svg{display:block;inline-size:100%;block-size:100%}rb-monogram .rb-monogram__frame{fill:var(--rb-color-brand-navy)}rb-monogram .rb-monogram__gradient-start{stop-color:var(--rb-color-brand-start)}rb-monogram .rb-monogram__gradient-end{stop-color:var(--rb-color-brand-end)}rb-monogram .rb-monogram__letters{fill:none;stroke:var(--rb-color-brand-ink);stroke-linecap:round;stroke-linejoin:round;stroke-width:3.5}\n"]
+		}]
+	}]
+});
+export { RbMonogramComponent };
+
+//# sourceMappingURL=rblabs-dev-axiom-monogram.mjs.map

package/fesm2022/rblabs-dev-axiom-monogram.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rblabs-dev-axiom-monogram.mjs","names":[],"sources":["../../../projects/axiom/monogram/src/monogram.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\nlet nextId = 0;\n\n/**\n * The RB monogram (docs/design-system.md, section 12.1), drawn inline from the brand tokens so it\n * needs no request and is identical in both themes. Decorative: the element that contains it (the\n * brand lockup link) carries the accessible name. Size it with `inline-size` on the host.\n */\n@Component({\n  selector: 'rb-monogram',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'rb-monogram', 'aria-hidden': 'true' },\n  template: `\n    <svg class=\"rb-monogram__svg\" viewBox=\"0 0 64 64\" focusable=\"false\">\n      <defs>\n        <linearGradient\n          [attr.id]=\"gradientId\"\n          x1=\"8\"\n          y1=\"8\"\n          x2=\"56\"\n          y2=\"56\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop class=\"rb-monogram__gradient-start\" />\n          <stop class=\"rb-monogram__gradient-end\" offset=\"1\" />\n        </linearGradient>\n      </defs>\n      <rect class=\"rb-monogram__frame\" width=\"64\" height=\"64\" rx=\"16\" />\n      <rect x=\"5\" y=\"5\" width=\"54\" height=\"54\" rx=\"14\" [attr.fill]=\"'url(#' + gradientId + ')'\" />\n      <g class=\"rb-monogram__letters\">\n        <path d=\"M17 47V17h7.3c4.9 0 7.8 2.7 7.8 6.9s-2.9 6.8-7.8 6.8H17M24.3 30.7 34.5 47\" />\n        <path\n          d=\"M40 17v30M40 17h6.8c4.4 0 7.1 2.6 7.1 6.2s-2.7 5.9-7.1 5.9H40M40 29.1h7.5c4.7 0 7.7 3.2 7.7 7.1s-3 7.8-7.7 7.8H40\"\n        />\n      </g>\n    </svg>\n  `,\n  styleUrl: './monogram.scss',\n})\nexport class RbMonogramComponent {\n  /** Unique per instance: several monograms can share a page. */\n  protected readonly gradientId = `rb-monogram-gradient-${nextId++}`;\n}\n"],"mappings":";;AAEA,IAAI,SAAS;AAuCb,IAAa,sBAAb,MAAa,oBAAmB;CAEX,aAAa,wBAAwB;CAF7C,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAnB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAmB,cAAA;EAAA,UAAA;EAAA,MAAA;GAAA,YAAA,EAAA,eAAA,OAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UA3BpB;;;;;;;;;;;;;;;;;;;;;;;;;EAwBT,UAAA;EAAA,QAAA,CAAA,kiBAAA;EAAA,iBAAA,GAAA,wBAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AAGU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAhC/B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,iBACN,wBAAwB;GAAM,eAChC,kBAAkB;GAAI,MAC/B;IAAE,OAAO;IAAe,eAAe;GAAM;GAAE,UAC3C;;;;;;;;;;;;;;;;;;;;;;;;;GAwBT,QAAA,CAAA,kiBAAA;EAAA,CAAA"}