@masmarino/gabarit 2.0.0 → 2.1.1

package/fesm2022/masmarino-gabarit-skeleton-list.mjs

@@ -0,0 +1,189 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, input } from "@angular/core";
+import { Skeleton } from "@masmarino/gabarit/skeleton";
+const TITLE_WIDTHS = [
+	"62%",
+	"48%",
+	"70%",
+	"55%",
+	"66%",
+	"44%"
+];
+const DETAIL_WIDTHS = ["36%", "24%"];
+var SkeletonList = class SkeletonList {
+	rows = input(4, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	leading = input("circle", ...ngDevMode ? [{ debugName: "leading" }] : /* istanbul ignore next */ []);
+	leadingSize = input("1rem", ...ngDevMode ? [{ debugName: "leadingSize" }] : /* istanbul ignore next */ []);
+	lines = input(2, ...ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []);
+	loadingLabel = input("Loading…", ...ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []);
+	divided = input(true, {
+		...ngDevMode ? { debugName: "divided" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	padded = input(true, {
+		...ngDevMode ? { debugName: "padded" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	items = computed(() => Array.from({ length: Math.max(0, Math.round(this.rows())) }, (_, row) => ({
+		row,
+		widths: Array.from({ length: this.lines() }, (_, line) => line === 0 ? TITLE_WIDTHS[row % TITLE_WIDTHS.length] : DETAIL_WIDTHS[Math.min(line - 1, DETAIL_WIDTHS.length - 1)])
+	})), ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SkeletonList,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SkeletonList,
+		isStandalone: true,
+		selector: "gbt-skeleton-list",
+		inputs: {
+			rows: {
+				classPropertyName: "rows",
+				publicName: "rows",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			leading: {
+				classPropertyName: "leading",
+				publicName: "leading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			leadingSize: {
+				classPropertyName: "leadingSize",
+				publicName: "leadingSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			lines: {
+				classPropertyName: "lines",
+				publicName: "lines",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loadingLabel: {
+				classPropertyName: "loadingLabel",
+				publicName: "loadingLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			divided: {
+				classPropertyName: "divided",
+				publicName: "divided",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			padded: {
+				classPropertyName: "padded",
+				publicName: "padded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div\n  class=\"gbt-skeleton-list\"\n  [attr.data-divided]=\"divided() ? '' : null\"\n  [attr.data-padded]=\"padded() ? '' : null\"\n>\n  <span class=\"sr-only\" role=\"status\">{{ loadingLabel() }}</span>\n  <div aria-hidden=\"true\">\n    @for (item of items(); track item.row) {\n      <div class=\"gbt-skeleton-list__row\">\n        @if (leading() !== 'none') {\n          <gbt-skeleton\n            class=\"gbt-skeleton-list__leading\"\n            [variant]=\"leading() === 'circle' ? 'circle' : 'rect'\"\n            [attr.data-leading]=\"leading()\"\n            [width]=\"leadingSize()\"\n            [height]=\"leadingSize()\"\n          />\n        }\n        <div class=\"gbt-skeleton-list__lines\">\n          @for (width of item.widths; track $index) {\n            <gbt-skeleton [width]=\"width\" [height]=\"$index === 0 ? '0.875rem' : '0.625rem'\" />\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n",
+		styles: [":host{display:block}.gbt-skeleton-list__row{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 0}.gbt-skeleton-list[data-padded] .gbt-skeleton-list__row{padding-inline:1rem}.gbt-skeleton-list[data-divided] .gbt-skeleton-list__row+.gbt-skeleton-list__row{border-top:1px solid var(--gbt-hairline)}.gbt-skeleton-list__leading{flex:none;margin-top:.125rem}.gbt-skeleton-list__leading[data-leading=square]{border-radius:.25rem}.gbt-skeleton-list__lines{display:flex;flex:1;flex-direction:column;gap:.5rem;min-width:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Skeleton,
+			selector: "gbt-skeleton",
+			inputs: [
+				"variant",
+				"width",
+				"height"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SkeletonList,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-skeleton-list",
+			standalone: true,
+			imports: [Skeleton],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div\n  class=\"gbt-skeleton-list\"\n  [attr.data-divided]=\"divided() ? '' : null\"\n  [attr.data-padded]=\"padded() ? '' : null\"\n>\n  <span class=\"sr-only\" role=\"status\">{{ loadingLabel() }}</span>\n  <div aria-hidden=\"true\">\n    @for (item of items(); track item.row) {\n      <div class=\"gbt-skeleton-list__row\">\n        @if (leading() !== 'none') {\n          <gbt-skeleton\n            class=\"gbt-skeleton-list__leading\"\n            [variant]=\"leading() === 'circle' ? 'circle' : 'rect'\"\n            [attr.data-leading]=\"leading()\"\n            [width]=\"leadingSize()\"\n            [height]=\"leadingSize()\"\n          />\n        }\n        <div class=\"gbt-skeleton-list__lines\">\n          @for (width of item.widths; track $index) {\n            <gbt-skeleton [width]=\"width\" [height]=\"$index === 0 ? '0.875rem' : '0.625rem'\" />\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n",
+			styles: [":host{display:block}.gbt-skeleton-list__row{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 0}.gbt-skeleton-list[data-padded] .gbt-skeleton-list__row{padding-inline:1rem}.gbt-skeleton-list[data-divided] .gbt-skeleton-list__row+.gbt-skeleton-list__row{border-top:1px solid var(--gbt-hairline)}.gbt-skeleton-list__leading{flex:none;margin-top:.125rem}.gbt-skeleton-list__leading[data-leading=square]{border-radius:.25rem}.gbt-skeleton-list__lines{display:flex;flex:1;flex-direction:column;gap:.5rem;min-width:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"]
+		}]
+	}],
+	propDecorators: {
+		rows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rows",
+				required: false
+			}]
+		}],
+		leading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "leading",
+				required: false
+			}]
+		}],
+		leadingSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "leadingSize",
+				required: false
+			}]
+		}],
+		lines: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "lines",
+				required: false
+			}]
+		}],
+		loadingLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingLabel",
+				required: false
+			}]
+		}],
+		divided: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "divided",
+				required: false
+			}]
+		}],
+		padded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "padded",
+				required: false
+			}]
+		}]
+	}
+});
+export { SkeletonList };
+
+//# sourceMappingURL=masmarino-gabarit-skeleton-list.mjs.map

package/fesm2022/masmarino-gabarit-skeleton-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-skeleton-list.mjs","names":[],"sources":["../../../projects/gabarit/skeleton-list/skeleton-list.ts","../../../projects/gabarit/skeleton-list/skeleton-list.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  computed,\n  input,\n} from '@angular/core'\nimport { Skeleton } from '@masmarino/gabarit/skeleton'\n\nexport type SkeletonListLeading = 'circle' | 'square' | 'none'\n\nconst TITLE_WIDTHS = ['62%', '48%', '70%', '55%', '66%', '44%']\nconst DETAIL_WIDTHS = ['36%', '24%']\n\n@Component({\n  selector: 'gbt-skeleton-list',\n  standalone: true,\n  imports: [Skeleton],\n  templateUrl: './skeleton-list.html',\n  styleUrl: './skeleton-list.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkeletonList {\n  rows = input(4)\n  leading = input<SkeletonListLeading>('circle')\n  leadingSize = input('1rem')\n  lines = input<1 | 2 | 3>(2)\n  loadingLabel = input('Loading…')\n  divided = input(true, { transform: booleanAttribute })\n  padded = input(true, { transform: booleanAttribute })\n\n  protected readonly items = computed(() =>\n    Array.from({ length: Math.max(0, Math.round(this.rows())) }, (_, row) => ({\n      row,\n      widths: Array.from({ length: this.lines() }, (_, line) =>\n        line === 0\n          ? TITLE_WIDTHS[row % TITLE_WIDTHS.length]\n          : DETAIL_WIDTHS[Math.min(line - 1, DETAIL_WIDTHS.length - 1)],\n      ),\n    })),\n  )\n}\n","<div\n  class=\"gbt-skeleton-list\"\n  [attr.data-divided]=\"divided() ? '' : null\"\n  [attr.data-padded]=\"padded() ? '' : null\"\n>\n  <span class=\"sr-only\" role=\"status\">{{ loadingLabel() }}</span>\n  <div aria-hidden=\"true\">\n    @for (item of items(); track item.row) {\n      <div class=\"gbt-skeleton-list__row\">\n        @if (leading() !== 'none') {\n          <gbt-skeleton\n            class=\"gbt-skeleton-list__leading\"\n            [variant]=\"leading() === 'circle' ? 'circle' : 'rect'\"\n            [attr.data-leading]=\"leading()\"\n            [width]=\"leadingSize()\"\n            [height]=\"leadingSize()\"\n          />\n        }\n        <div class=\"gbt-skeleton-list__lines\">\n          @for (width of item.widths; track $index) {\n            <gbt-skeleton [width]=\"width\" [height]=\"$index === 0 ? '0.875rem' : '0.625rem'\" />\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n"],"mappings":";;;AAWA,MAAM,eAAe;CAAC;CAAO;CAAO;CAAO;CAAO;CAAO;AAAK;AAC9D,MAAM,gBAAgB,CAAC,OAAO,KAAK;AAUnC,IAAa,eAAb,MAAa,aAAY;CACvB,OAAO,MAAM,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACf,UAAU,MAA2B,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC9C,cAAc,MAAM,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAC3B,QAAQ,MAAiB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAC3B,eAAe,MAAM,YAAW,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,UAAU,MAAM,MAAI;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACnD,SAAS,MAAM,MAAI;EAAA,GAAA,YAAA,EAAA,WAAA,SAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAE/B,QAAQ,eACzB,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,KAAI,CAAE,CAAC,EAAC,IAAK,GAAG,SAAS;EACxE;EACA,QAAQ,MAAM,KAAK,EAAE,QAAQ,KAAK,MAAK,EAAE,IAAK,GAAG,SAC/C,SAAS,IACL,aAAa,MAAM,aAAa,UAChC,cAAc,KAAK,IAAI,OAAO,GAAG,cAAc,SAAS,CAAC,EAAE;CAElE,EAAC,GACH,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAlBU,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,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;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,OAAA;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,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UCtBzB;EA2BA,QAAA,CAAA,upBAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDVY;GAAQ,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAKP,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAY,YAAA,CAAA;EARxB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAmB,YACjB;GAAI,SACP,CAAC,QAAQ;GAAC,iBAGF,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,upBAAA;EAAA,CAAA"}

package/fesm2022/masmarino-gabarit-skeleton.mjs

@@ -0,0 +1,109 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+var Skeleton = class Skeleton {
+	variant = input("text", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	width = input("100%", ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	height = input(null, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Skeleton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: Skeleton,
+		isStandalone: true,
+		selector: "gbt-skeleton",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "aria-hidden": "true" },
+			properties: {
+				"attr.data-variant": "variant()",
+				"style.width": "width()",
+				"style.height": "height()"
+			}
+		},
+		ngImport: i0,
+		template: "",
+		isInline: true,
+		styles: [":host{display:block;position:relative;overflow:hidden;background:var(--border-color);opacity:.35}:host[data-variant=text]{height:1em;border-radius:4px}:host[data-variant=circle]{aspect-ratio:1;border-radius:50%}:host[data-variant=rect]{height:100px;border-radius:var(--site-border-radius-sm)}:host:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:gbt-skeleton-sweep 1.6s ease-in-out infinite}@keyframes gbt-skeleton-sweep{to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){:host:after{animation:none}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Skeleton,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-skeleton",
+			standalone: true,
+			template: "",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[attr.data-variant]": "variant()",
+				"[style.width]": "width()",
+				"[style.height]": "height()",
+				"aria-hidden": "true"
+			},
+			styles: [":host{display:block;position:relative;overflow:hidden;background:var(--border-color);opacity:.35}:host[data-variant=text]{height:1em;border-radius:4px}:host[data-variant=circle]{aspect-ratio:1;border-radius:50%}:host[data-variant=rect]{height:100px;border-radius:var(--site-border-radius-sm)}:host:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:gbt-skeleton-sweep 1.6s ease-in-out infinite}@keyframes gbt-skeleton-sweep{to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){:host:after{animation:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}]
+	}
+});
+export { Skeleton };
+
+//# sourceMappingURL=masmarino-gabarit-skeleton.mjs.map

package/fesm2022/masmarino-gabarit-skeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-skeleton.mjs","names":[],"sources":["../../../projects/gabarit/skeleton/skeleton.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core'\n\nexport type SkeletonVariant = 'text' | 'circle' | 'rect'\n\n@Component({\n  selector: 'gbt-skeleton',\n  standalone: true,\n  template: '',\n  styleUrl: './skeleton.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-variant]': 'variant()',\n    '[style.width]': 'width()',\n    '[style.height]': 'height()',\n    'aria-hidden': 'true',\n  },\n})\nexport class Skeleton {\n  variant = input<SkeletonVariant>('text')\n  width = input<string>('100%')\n  height = input<string | null>(null)\n}\n"],"mappings":";;AAiBA,IAAa,WAAb,MAAa,SAAQ;CACnB,UAAU,MAAuB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACxC,QAAQ,MAAc,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAC7B,SAAS,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAHxB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAQ,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAR,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAQ,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,eAAA,OAAA;GAAA,YAAA;IAAA,qBAAA;IAAA,eAAA;IAAA,gBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UAVT;EAAE,UAAA;EAAA,QAAA,CAAA,0nBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAUD,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAQ,YAAA,CAAA;EAbpB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAc,YACZ;GAAI,UACN;GAAE,iBAEK,wBAAwB;GAAM,MACzC;IACJ,uBAAuB;IACvB,iBAAiB;IACjB,kBAAkB;IAClB,eAAe;GAChB;GAAA,QAAA,CAAA,0nBAAA;EAAA,CAAA"}

package/fesm2022/masmarino-gabarit-slider.mjs

@@ -0,0 +1,239 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, forwardRef, input, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+let nextId = 0;
+var Slider = class Slider {
+	id = input(`gbt-slider-${++nextId}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	min = input(0, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
+	max = input(100, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	step = input(1, ...ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	errorMessage = input(null, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	showValue = input(true, {
+		...ngDevMode ? { debugName: "showValue" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	formatValue = input((value) => `${value}`, ...ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []);
+	value = signal(0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	fillPercent = computed(() => {
+		const range = this.max() - this.min();
+		if (range <= 0) return 0;
+		return (this.value() - this.min()) / range * 100;
+	}, ...ngDevMode ? [{ debugName: "fillPercent" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	writeValue(value) {
+		this.value.set(value ?? 0);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	onInput(event) {
+		const value = Number(event.target.value);
+		this.value.set(value);
+		this.onChange(value);
+	}
+	onBlur() {
+		this.onTouched();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Slider,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Slider,
+		isStandalone: true,
+		selector: "gbt-slider",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			min: {
+				classPropertyName: "min",
+				publicName: "min",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			step: {
+				classPropertyName: "step",
+				publicName: "step",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorMessage: {
+				classPropertyName: "errorMessage",
+				publicName: "errorMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showValue: {
+				classPropertyName: "showValue",
+				publicName: "showValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			formatValue: {
+				classPropertyName: "formatValue",
+				publicName: "formatValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => Slider),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"gbt-slider\">\n  <div class=\"gbt-slider__header\">\n    <label [for]=\"id()\">{{ label() }}</label>\n    @if (showValue()) {\n      <span class=\"gbt-slider__value\">{{ formatValue()(value()) }}</span>\n    }\n  </div>\n  <input\n    type=\"range\"\n    [id]=\"id()\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    [step]=\"step()\"\n    [value]=\"value()\"\n    [disabled]=\"isDisabled()\"\n    [style.--gbt-slider-fill.%]=\"fillPercent()\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-slider__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
+		styles: [".gbt-slider{display:flex;flex-direction:column;gap:.375rem}.gbt-slider label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-slider__header{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}.gbt-slider__value{font-size:.8125rem;font-weight:600;color:var(--text-primary)}.gbt-slider__error{margin:0;font-size:.75rem;color:var(--color-error-text)}input[type=range]{--gbt-slider-fill: 0;box-sizing:border-box;width:100%;height:20px;padding:0;background:transparent;appearance:none;cursor:pointer}input[type=range]:disabled{cursor:not-allowed;opacity:.5}input[type=range]:focus-visible{outline:none}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(to right,var(--primary) 0%,var(--primary) var(--gbt-slider-fill),var(--border-color) var(--gbt-slider-fill),var(--border-color) 100%)}input[type=range]::-webkit-slider-thumb{box-sizing:border-box;width:18px;height:18px;margin-top:-7px;background:var(--bg-principal);border:2px solid var(--primary);border-radius:50%;appearance:none;cursor:pointer}input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:var(--border-color)}input[type=range]::-moz-range-progress{height:4px;border-radius:999px;background:var(--primary)}input[type=range]::-moz-range-thumb{box-sizing:border-box;width:18px;height:18px;background:var(--bg-principal);border:2px solid var(--primary);border-radius:50%;cursor:pointer}input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Slider,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-slider",
+			standalone: true,
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => Slider),
+				multi: true
+			}],
+			template: "<div class=\"gbt-slider\">\n  <div class=\"gbt-slider__header\">\n    <label [for]=\"id()\">{{ label() }}</label>\n    @if (showValue()) {\n      <span class=\"gbt-slider__value\">{{ formatValue()(value()) }}</span>\n    }\n  </div>\n  <input\n    type=\"range\"\n    [id]=\"id()\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    [step]=\"step()\"\n    [value]=\"value()\"\n    [disabled]=\"isDisabled()\"\n    [style.--gbt-slider-fill.%]=\"fillPercent()\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-slider__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
+			styles: [".gbt-slider{display:flex;flex-direction:column;gap:.375rem}.gbt-slider label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-slider__header{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}.gbt-slider__value{font-size:.8125rem;font-weight:600;color:var(--text-primary)}.gbt-slider__error{margin:0;font-size:.75rem;color:var(--color-error-text)}input[type=range]{--gbt-slider-fill: 0;box-sizing:border-box;width:100%;height:20px;padding:0;background:transparent;appearance:none;cursor:pointer}input[type=range]:disabled{cursor:not-allowed;opacity:.5}input[type=range]:focus-visible{outline:none}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(to right,var(--primary) 0%,var(--primary) var(--gbt-slider-fill),var(--border-color) var(--gbt-slider-fill),var(--border-color) 100%)}input[type=range]::-webkit-slider-thumb{box-sizing:border-box;width:18px;height:18px;margin-top:-7px;background:var(--bg-principal);border:2px solid var(--primary);border-radius:50%;appearance:none;cursor:pointer}input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:var(--border-color)}input[type=range]::-moz-range-progress{height:4px;border-radius:999px;background:var(--primary)}input[type=range]::-moz-range-thumb{box-sizing:border-box;width:18px;height:18px;background:var(--bg-principal);border:2px solid var(--primary);border-radius:50%;cursor:pointer}input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}\n"]
+		}]
+	}],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		step: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "step",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		errorMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorMessage",
+				required: false
+			}]
+		}],
+		showValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValue",
+				required: false
+			}]
+		}],
+		formatValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "formatValue",
+				required: false
+			}]
+		}]
+	}
+});
+export { Slider };
+
+//# sourceMappingURL=masmarino-gabarit-slider.mjs.map

package/fesm2022/masmarino-gabarit-slider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-slider.mjs","names":[],"sources":["../../../projects/gabarit/slider/slider.ts","../../../projects/gabarit/slider/slider.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  input,\n  signal,\n} from '@angular/core'\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'\n\nlet nextId = 0\n\n@Component({\n  selector: 'gbt-slider',\n  standalone: true,\n  imports: [],\n  templateUrl: './slider.html',\n  styleUrl: './slider.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => Slider),\n      multi: true,\n    },\n  ],\n})\nexport class Slider implements ControlValueAccessor {\n  id = input<string>(`gbt-slider-${++nextId}`)\n  label = input.required<string>()\n  min = input(0)\n  max = input(100)\n  step = input(1)\n  disabled = input(false, { transform: booleanAttribute })\n  errorMessage = input<string | null>(null)\n  showValue = input(true, { transform: booleanAttribute })\n  formatValue = input<(value: number) => string>((value) => `${value}`)\n\n  protected readonly value = signal(0)\n\n  private readonly formDisabled = signal(false)\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled())\n\n  protected readonly fillPercent = computed(() => {\n    const range = this.max() - this.min()\n    if (range <= 0) {\n      return 0\n    }\n    return ((this.value() - this.min()) / range) * 100\n  })\n\n  private onChange: (value: number) => void = () => {}\n  private onTouched: () => void = () => {}\n\n  writeValue(value: number): void {\n    this.value.set(value ?? 0)\n  }\n\n  registerOnChange(fn: (value: number) => void): void {\n    this.onChange = fn\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled)\n  }\n\n  protected onInput(event: Event): void {\n    const value = Number((event.target as HTMLInputElement).value)\n    this.value.set(value)\n    this.onChange(value)\n  }\n\n  protected onBlur(): void {\n    this.onTouched()\n  }\n}\n","<div class=\"gbt-slider\">\n  <div class=\"gbt-slider__header\">\n    <label [for]=\"id()\">{{ label() }}</label>\n    @if (showValue()) {\n      <span class=\"gbt-slider__value\">{{ formatValue()(value()) }}</span>\n    }\n  </div>\n  <input\n    type=\"range\"\n    [id]=\"id()\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    [step]=\"step()\"\n    [value]=\"value()\"\n    [disabled]=\"isDisabled()\"\n    [style.--gbt-slider-fill.%]=\"fillPercent()\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-slider__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n"],"mappings":"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"}