@ks-digital/designsystem-angular 0.0.1-alpha.8 → 0.0.1-alpha.80

package/fesm2022/ks-digital-designsystem-angular-spinner.mjs

@@ -0,0 +1,183 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, effect, input } from "@angular/core";
+import * as i1 from "@ks-digital/designsystem-angular/__internals";
+import { HostColor, logIfDevMode } from "@ks-digital/designsystem-angular/__internals";
+var Spinner = class Spinner {
+	ariaLabel = input(void 0, {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	ariaHidden = input(void 0, {
+		...ngDevMode ? { debugName: "ariaHidden" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute,
+		alias: "aria-hidden"
+	});
+	constructor() {
+		effect(() => {
+			if (this.ariaLabel() === void 0 && !this.ariaHidden()) logIfDevMode({
+				component: "ksd-spinner",
+				message: "Either `aria-label` or `aria-hidden` must be provided."
+			});
+		});
+	}
+	dataSize = input(void 0, {
+		...ngDevMode ? { debugName: "dataSize" } : /* istanbul ignore next */ {},
+		alias: "data-size"
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: Spinner,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: Spinner,
+		isStandalone: true,
+		selector: "ksd-spinner",
+		inputs: {
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaHidden: {
+				classPropertyName: "ariaHidden",
+				publicName: "aria-hidden",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dataSize: {
+				classPropertyName: "dataSize",
+				publicName: "data-size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"attr.aria-label": "null",
+			"attr.aria-hidden": "null"
+		} },
+		hostDirectives: [{
+			directive: i1.HostColor,
+			inputs: ["data-color", "data-color"]
+		}],
+		ngImport: i0,
+		template: `
+    <svg
+      class="ds-spinner"
+      role="img"
+      viewBox="0 0 50 50"
+      [attr.data-size]="dataSize()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-hidden]="ariaHidden() || undefined"
+    >
+      <circle
+        class="ds-spinner__background"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke-width="5"
+      />
+      <circle
+        class="ds-spinner__circle"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke-width="5"
+      />
+    </svg>
+  `,
+		isInline: true,
+		styles: [":host{display:contents}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: Spinner,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ksd-spinner",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    <svg
+      class="ds-spinner"
+      role="img"
+      viewBox="0 0 50 50"
+      [attr.data-size]="dataSize()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-hidden]="ariaHidden() || undefined"
+    >
+      <circle
+        class="ds-spinner__background"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke-width="5"
+      />
+      <circle
+        class="ds-spinner__circle"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke-width="5"
+      />
+    </svg>
+  `,
+			host: {
+				"[attr.aria-label]": "null",
+				"[attr.aria-hidden]": "null"
+			},
+			hostDirectives: [{
+				directive: HostColor,
+				inputs: ["data-color"]
+			}],
+			styles: [":host{display:contents}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		ariaHidden: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-hidden",
+				required: false
+			}]
+		}],
+		dataSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data-size",
+				required: false
+			}]
+		}]
+	}
+});
+export { Spinner };
+
+//# sourceMappingURL=ks-digital-designsystem-angular-spinner.mjs.map

package/fesm2022/ks-digital-designsystem-angular-spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-spinner.mjs","names":[],"sources":["../../../../packages/angular/spinner/src/spinner.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  input,\n} from '@angular/core'\nimport {\n  HostColor,\n  logIfDevMode,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { SpinnerSize } from './spinner-sizes'\n\n@Component({\n  selector: 'ksd-spinner',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styles: `\n    :host {\n      display: contents;\n    }\n  `,\n  template: `\n    <svg\n      class=\"ds-spinner\"\n      role=\"img\"\n      viewBox=\"0 0 50 50\"\n      [attr.data-size]=\"dataSize()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-hidden]=\"ariaHidden() || undefined\"\n    >\n      <circle\n        class=\"ds-spinner__background\"\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"5\"\n      />\n      <circle\n        class=\"ds-spinner__circle\"\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"5\"\n      />\n    </svg>\n  `,\n  host: {\n    '[attr.aria-label]': 'null',\n    '[attr.aria-hidden]': 'null',\n  },\n  hostDirectives: [\n    {\n      directive: HostColor,\n      inputs: ['data-color'],\n    },\n  ],\n})\nexport class Spinner {\n  /**\n   * Aria-label for the spinner\n   */\n  readonly ariaLabel = input<string>(undefined, { alias: 'aria-label' })\n\n  /**\n   * Aria-hidden for the spinner\n   */\n  readonly ariaHidden = input(undefined, {\n    transform: booleanAttribute,\n    alias: 'aria-hidden',\n  })\n\n  constructor() {\n    effect(() => {\n      if (this.ariaLabel() === undefined && !this.ariaHidden()) {\n        logIfDevMode({\n          component: 'ksd-spinner',\n          message: 'Either `aria-label` or `aria-hidden` must be provided.',\n        })\n      }\n    })\n  }\n\n  /**\n   * Changes size for descendant Designsystemet components. Select from predefined sizes.\n   * @attribute data-size\n   */\n  readonly dataSize = input<SpinnerSize>(undefined, {\n    alias: 'data-size',\n  })\n}\n"],"mappings":";;;;AA2DA,IAAa,UAAb,MAAa,QAAO;CAIT,YAAY,MAAc,QAAS;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAY,CAAA;CAK1D,aAAa,MAAM,QAAS;EAAA,GAAA,YAAA,EAAA,WAAA,aAAA,+BAAA,CAAA;EACnC,WAAW;EACX,OAAO;CAAa,CAAA;CAGtB,cAAA;EACE,aAAY;GACV,IAAI,KAAK,UAAS,MAAO,UAAa,CAAC,KAAK,WAAU,GACpD,aAAa;IACX,WAAW;IACX,SAAS;GACV,CAAA;EAEL,CAAC;CACH;CAMS,WAAW,MAAmB,QAAS;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAC9C,OAAO;CAAW,CAAA;CA9BT,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAO,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAP,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAO,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,WAAA;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,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,mBAAA;GAAA,oBAAA;EAAA,EAAA;EAAA,gBAAA,CAAA;GAAA,WAAA,GAAA;GAAA,QAAA,CAAA,cAAA,YAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UAtCR;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BT,UAAA;EAAA,QAAA,CAAA,2BAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAYU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EA9CnB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,iBACN,wBAAwB;GAAM,UAMrC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BT,MACK;IACJ,qBAAqB;IACrB,sBAAsB;GACvB;GAAA,gBACe,CACd;IACE,WAAW;IACX,QAAQ,CAAC,YAAY;GACtB,CACF;GAAA,QAAA,CAAA,2BAAA;EAAA,CAAA"}