@star-ng/ui 0.0.0-placeholder.0 → 0.1.0

package/fesm2022/star-ng-ui-panel.mjs

@@ -0,0 +1,324 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, inject, input, model } from "@angular/core";
+import { STAR_UI_TEXT } from "@star-ng/ui/core";
+var StarPanel = class StarPanel {
+	text = inject(STAR_UI_TEXT);
+	ids = inject(_IdGenerator);
+	header = input("", ...ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []);
+	toggleable = input(false, {
+		...ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	collapsed = model(false, ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+	titleId = this.ids.getId("star-panel-title-");
+	contentId = this.ids.getId("star-panel-content-");
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarPanel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarPanel,
+		isStandalone: true,
+		selector: "star-panel",
+		inputs: {
+			header: {
+				classPropertyName: "header",
+				publicName: "header",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			toggleable: {
+				classPropertyName: "toggleable",
+				publicName: "toggleable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsed: {
+				classPropertyName: "collapsed",
+				publicName: "collapsed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { collapsed: "collapsedChange" },
+		host: {
+			properties: { "class.star-panel-box--collapsed": "collapsed()" },
+			classAttribute: "star-panel-box"
+		},
+		ngImport: i0,
+		template: `
+    <header class="star-panel-box__header">
+      <h3 class="star-panel-box__title" [id]="titleId">{{ header() }}</h3>
+      <div class="star-panel-box__actions">
+        <ng-content select="[starPanelActions]" />
+        @if (toggleable()) {
+          <button
+            type="button"
+            class="star-btn star-btn--ghost star-btn--icon star-panel-box__toggle"
+            [attr.aria-expanded]="!collapsed()"
+            [attr.aria-controls]="contentId"
+            [attr.aria-label]="
+              collapsed() ? text.expandItem(header()) : text.collapseItem(header())
+            "
+            (click)="collapsed.set(!collapsed())"
+          >
+            <i class="ph-bold ph-caret-down" aria-hidden="true"></i>
+          </button>
+        }
+      </div>
+    </header>
+    <div
+      class="star-accordion__region"
+      role="region"
+      [id]="contentId"
+      [attr.aria-labelledby]="titleId"
+      [attr.inert]="collapsed() ? '' : null"
+    >
+      <div class="star-accordion__inner">
+        <div class="star-panel-box__body"><ng-content /></div>
+      </div>
+    </div>
+    <ng-content select="[starPanelFooter]" />
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarPanel,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-panel",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-panel-box",
+				"[class.star-panel-box--collapsed]": "collapsed()"
+			},
+			template: `
+    <header class="star-panel-box__header">
+      <h3 class="star-panel-box__title" [id]="titleId">{{ header() }}</h3>
+      <div class="star-panel-box__actions">
+        <ng-content select="[starPanelActions]" />
+        @if (toggleable()) {
+          <button
+            type="button"
+            class="star-btn star-btn--ghost star-btn--icon star-panel-box__toggle"
+            [attr.aria-expanded]="!collapsed()"
+            [attr.aria-controls]="contentId"
+            [attr.aria-label]="
+              collapsed() ? text.expandItem(header()) : text.collapseItem(header())
+            "
+            (click)="collapsed.set(!collapsed())"
+          >
+            <i class="ph-bold ph-caret-down" aria-hidden="true"></i>
+          </button>
+        }
+      </div>
+    </header>
+    <div
+      class="star-accordion__region"
+      role="region"
+      [id]="contentId"
+      [attr.aria-labelledby]="titleId"
+      [attr.inert]="collapsed() ? '' : null"
+    >
+      <div class="star-accordion__inner">
+        <div class="star-panel-box__body"><ng-content /></div>
+      </div>
+    </div>
+    <ng-content select="[starPanelFooter]" />
+  `
+		}]
+	}],
+	propDecorators: {
+		header: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "header",
+				required: false
+			}]
+		}],
+		toggleable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toggleable",
+				required: false
+			}]
+		}],
+		collapsed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsed",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["collapsedChange"]
+		}]
+	}
+});
+var StarFieldset = class StarFieldset {
+	legend = input("", ...ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []);
+	toggleable = input(false, {
+		...ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	collapsed = model(false, ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+	contentId = inject(_IdGenerator).getId("star-fieldset-");
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarFieldset,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarFieldset,
+		isStandalone: true,
+		selector: "star-fieldset",
+		inputs: {
+			legend: {
+				classPropertyName: "legend",
+				publicName: "legend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			toggleable: {
+				classPropertyName: "toggleable",
+				publicName: "toggleable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsed: {
+				classPropertyName: "collapsed",
+				publicName: "collapsed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { collapsed: "collapsedChange" },
+		host: { classAttribute: "star-fieldset-host" },
+		ngImport: i0,
+		template: `
+    <fieldset class="star-fieldset" [class.star-fieldset--collapsed]="collapsed()">
+      <legend class="star-fieldset__legend">
+        @if (toggleable()) {
+          <button
+            type="button"
+            class="star-fieldset__toggle"
+            [attr.aria-expanded]="!collapsed()"
+            [attr.aria-controls]="contentId"
+            (click)="collapsed.set(!collapsed())"
+          >
+            <i class="ph-bold ph-caret-down star-accordion__caret" aria-hidden="true"></i>
+            {{ legend() }}
+          </button>
+        } @else {
+          {{ legend() }}
+        }
+      </legend>
+      <div class="star-accordion__region" [id]="contentId" [attr.inert]="collapsed() ? '' : null">
+        <div class="star-accordion__inner">
+          <div class="star-fieldset__body"><ng-content /></div>
+        </div>
+      </div>
+    </fieldset>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarFieldset,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-fieldset",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-fieldset-host" },
+			template: `
+    <fieldset class="star-fieldset" [class.star-fieldset--collapsed]="collapsed()">
+      <legend class="star-fieldset__legend">
+        @if (toggleable()) {
+          <button
+            type="button"
+            class="star-fieldset__toggle"
+            [attr.aria-expanded]="!collapsed()"
+            [attr.aria-controls]="contentId"
+            (click)="collapsed.set(!collapsed())"
+          >
+            <i class="ph-bold ph-caret-down star-accordion__caret" aria-hidden="true"></i>
+            {{ legend() }}
+          </button>
+        } @else {
+          {{ legend() }}
+        }
+      </legend>
+      <div class="star-accordion__region" [id]="contentId" [attr.inert]="collapsed() ? '' : null">
+        <div class="star-accordion__inner">
+          <div class="star-fieldset__body"><ng-content /></div>
+        </div>
+      </div>
+    </fieldset>
+  `
+		}]
+	}],
+	propDecorators: {
+		legend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "legend",
+				required: false
+			}]
+		}],
+		toggleable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toggleable",
+				required: false
+			}]
+		}],
+		collapsed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsed",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["collapsedChange"]
+		}]
+	}
+});
+export { StarFieldset, StarPanel };
+
+//# sourceMappingURL=star-ng-ui-panel.mjs.map

package/fesm2022/star-ng-ui-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"star-ng-ui-panel.mjs","names":[],"sources":["../../../projects/star-ng/panel/panel.ts"],"sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n  input,\n  model,\n} from '@angular/core';\nimport { STAR_UI_TEXT } from '@star-ng/ui/core';\n\n/**\n * Panel (PrimeNG `p-panel`): titled box with header actions and an optional collapse toggle.\n * `<star-panel header=\"Order notes\" toggleable [(collapsed)]=\"notesHidden\">…</star-panel>`\n */\n@Component({\n  selector: 'star-panel',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'star-panel-box',\n    '[class.star-panel-box--collapsed]': 'collapsed()',\n  },\n  template: `\n    <header class=\"star-panel-box__header\">\n      <h3 class=\"star-panel-box__title\" [id]=\"titleId\">{{ header() }}</h3>\n      <div class=\"star-panel-box__actions\">\n        <ng-content select=\"[starPanelActions]\" />\n        @if (toggleable()) {\n          <button\n            type=\"button\"\n            class=\"star-btn star-btn--ghost star-btn--icon star-panel-box__toggle\"\n            [attr.aria-expanded]=\"!collapsed()\"\n            [attr.aria-controls]=\"contentId\"\n            [attr.aria-label]=\"\n              collapsed() ? text.expandItem(header()) : text.collapseItem(header())\n            \"\n            (click)=\"collapsed.set(!collapsed())\"\n          >\n            <i class=\"ph-bold ph-caret-down\" aria-hidden=\"true\"></i>\n          </button>\n        }\n      </div>\n    </header>\n    <div\n      class=\"star-accordion__region\"\n      role=\"region\"\n      [id]=\"contentId\"\n      [attr.aria-labelledby]=\"titleId\"\n      [attr.inert]=\"collapsed() ? '' : null\"\n    >\n      <div class=\"star-accordion__inner\">\n        <div class=\"star-panel-box__body\"><ng-content /></div>\n      </div>\n    </div>\n    <ng-content select=\"[starPanelFooter]\" />\n  `,\n})\nexport class StarPanel {\n  protected readonly text = inject(STAR_UI_TEXT);\n  private readonly ids = inject(_IdGenerator);\n  readonly header = input('');\n  readonly toggleable = input(false, { transform: booleanAttribute });\n  readonly collapsed = model(false);\n\n  protected readonly titleId = this.ids.getId('star-panel-title-');\n  protected readonly contentId = this.ids.getId('star-panel-content-');\n}\n\n/**\n * Fieldset (PrimeNG `p-fieldset`) on the native `<fieldset>` / `<legend>`, so groups of form\n * controls keep their accessible name. Optional collapse toggle in the legend.\n * `<star-fieldset legend=\"Requester\" toggleable>…controls…</star-fieldset>`\n */\n@Component({\n  selector: 'star-fieldset',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'star-fieldset-host' },\n  template: `\n    <fieldset class=\"star-fieldset\" [class.star-fieldset--collapsed]=\"collapsed()\">\n      <legend class=\"star-fieldset__legend\">\n        @if (toggleable()) {\n          <button\n            type=\"button\"\n            class=\"star-fieldset__toggle\"\n            [attr.aria-expanded]=\"!collapsed()\"\n            [attr.aria-controls]=\"contentId\"\n            (click)=\"collapsed.set(!collapsed())\"\n          >\n            <i class=\"ph-bold ph-caret-down star-accordion__caret\" aria-hidden=\"true\"></i>\n            {{ legend() }}\n          </button>\n        } @else {\n          {{ legend() }}\n        }\n      </legend>\n      <div class=\"star-accordion__region\" [id]=\"contentId\" [attr.inert]=\"collapsed() ? '' : null\">\n        <div class=\"star-accordion__inner\">\n          <div class=\"star-fieldset__body\"><ng-content /></div>\n        </div>\n      </div>\n    </fieldset>\n  `,\n})\nexport class StarFieldset {\n  readonly legend = input('');\n  readonly toggleable = input(false, { transform: booleanAttribute });\n  readonly collapsed = model(false);\n  protected readonly contentId = inject(_IdGenerator).getId('star-fieldset-');\n}\n"],"mappings":";;;;AAyDA,IAAa,YAAb,MAAa,UAAS;CACD,OAAO,OAAO,YAAY;CAC5B,MAAM,OAAO,YAAY;CACjC,SAAS,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAClB,aAAa,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,aAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACvD,YAAY,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEd,UAAU,KAAK,IAAI,MAAM,mBAAmB;CAC5C,YAAY,KAAK,IAAI,MAAM,qBAAqB;CARxD,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAS,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAT,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAS,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,WAAA,kBAAA;EAAA,MAAA;GAAA,YAAA,EAAA,mCAAA,cAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UAnCV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCT,UAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAEU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAS,YAAA,CAAA;EA1CrB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,iBAAiB,wBAAwB;GACzC,MAAM;IACJ,OAAO;IACP,qCAAqC;GACtC;GACD,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCX,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CD,IAAa,eAAb,MAAa,aAAY;CACd,SAAS,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAClB,aAAa,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,aAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACvD,YAAY,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACd,YAAY,OAAO,YAAY,CAAC,CAAC,MAAM,gBAAgB;CAJ/D,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAY,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAZ,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAY,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,WAAA,kBAAA;EAAA,MAAA,EAAA,gBAAA,qBAAA;EAAA,UAAA;EAAA,UA1Bb;;;;;;;;;;;;;;;;;;;;;;;;;EAwBT,UAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAEU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAY,YAAA,CAAA;EA9BxB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,iBAAiB,wBAAwB;GACzC,MAAM,EAAE,OAAO,qBAAoB;GACnC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;EAyBX,CAAA"}