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

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

@@ -0,0 +1,148 @@
+import * as i0 from "@angular/core";
+import { Directive, booleanAttribute, input } from "@angular/core";
+import "@digdir/designsystemet-web/popover";
+import * as i1 from "@ks-digital/designsystem-angular/__internals";
+import { HostColor, HostSize } from "@ks-digital/designsystem-angular/__internals";
+var Popover = class Popover {
+	autoPlacement = input(true, {
+		...ngDevMode ? { debugName: "autoPlacement" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	variant = input("default", {
+		...ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {},
+		alias: "data-variant"
+	});
+	placement = input("top", {
+		...ngDevMode ? { debugName: "placement" } : /* istanbul ignore next */ {},
+		alias: "data-placement"
+	});
+	popover = input("auto", {
+		...ngDevMode ? { debugName: "popover" } : /* istanbul ignore next */ {},
+		alias: "popover"
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: Popover,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: Popover,
+		isStandalone: true,
+		selector: "[ksd-popover]",
+		inputs: {
+			autoPlacement: {
+				classPropertyName: "autoPlacement",
+				publicName: "autoPlacement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "data-variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placement: {
+				classPropertyName: "placement",
+				publicName: "data-placement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			popover: {
+				classPropertyName: "popover",
+				publicName: "popover",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.data-variant": "variant()",
+				"attr.data-placement": "placement()",
+				"attr.data-autoplacement": "autoPlacement()",
+				"attr.popover": "popover()"
+			},
+			classAttribute: "ds-popover"
+		},
+		hostDirectives: [{
+			directive: i1.HostSize,
+			inputs: ["data-size", "data-size"]
+		}, {
+			directive: i1.HostColor,
+			inputs: ["data-color", "data-color"]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: Popover,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[ksd-popover]",
+			hostDirectives: [{
+				directive: HostSize,
+				inputs: ["data-size"]
+			}, {
+				directive: HostColor,
+				inputs: ["data-color"]
+			}],
+			host: {
+				class: "ds-popover",
+				"[attr.data-variant]": "variant()",
+				"[attr.data-placement]": "placement()",
+				"[attr.data-autoplacement]": "autoPlacement()",
+				"[attr.popover]": "popover()"
+			}
+		}]
+	}],
+	propDecorators: {
+		autoPlacement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoPlacement",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data-variant",
+				required: false
+			}]
+		}],
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data-placement",
+				required: false
+			}]
+		}],
+		popover: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popover",
+				required: false
+			}]
+		}]
+	}
+});
+export { Popover };
+
+//# sourceMappingURL=ks-digital-designsystem-angular-popover.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-popover.mjs","names":[],"sources":["../../../../packages/angular/popover/src/popover.ts"],"sourcesContent":["import { booleanAttribute, Directive, input } from '@angular/core'\nimport '@digdir/designsystemet-web/popover'\nimport {\n  HostColor,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: '[ksd-popover]',\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostColor,\n      inputs: ['data-color'],\n    },\n  ],\n  host: {\n    class: 'ds-popover',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-placement]': 'placement()',\n    '[attr.data-autoplacement]': 'autoPlacement()',\n    '[attr.popover]': 'popover()',\n  },\n})\nexport class Popover {\n  readonly autoPlacement = input(true, { transform: booleanAttribute })\n  readonly variant = input<'tinted' | 'default'>('default', {\n    alias: 'data-variant',\n  })\n\n  // Todo: replace with centralized types\n  readonly placement = input<\n    | 'bottom'\n    | 'bottom-end'\n    | 'bottom-start'\n    | 'left'\n    | 'left-end'\n    | 'left-start'\n    | 'right'\n    | 'right-end'\n    | 'right-start'\n    | 'top'\n    | 'top-end'\n    | 'top-start'\n  >('top', { alias: 'data-placement' })\n\n  readonly popover = input<'auto' | 'manual'>('auto', { alias: 'popover' })\n}\n"],"mappings":";;;;;AA4BA,IAAa,UAAb,MAAa,QAAO;CACT,gBAAgB,MAAM,MAAI;EAAA,GAAA,YAAA,EAAA,WAAA,gBAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACzD,UAAU,MAA4B,WAAS;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EACtD,OAAO;CAAc,CAAA;CAId,YAAY,MAanB,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAgB,CAAA;CAEzB,UAAU,MAAyB,QAAM;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAAI,OAAO;CAAS,CAAA;CAtB3D,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,eAAA;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,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,qBAAA;IAAA,uBAAA;IAAA,2BAAA;IAAA,gBAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,gBAAA,CAAA;GAAA,WAAA,GAAA;GAAA,QAAA,CAAA,aAAA,WAAA;EAAA,GAAA;GAAA,WAAA,GAAA;GAAA,QAAA,CAAA,cAAA,YAAA;EAAA,CAAA;EAAA,UAAA;CAAA,CAAA;;AAAP,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EArBnB,MAAA;EAAU,MAAA,CAAA;GAET,UAAU;GACV,gBAAgB,CACd;IACE,WAAW;IACX,QAAQ,CAAC,WAAW;GACrB,GACD;IACE,WAAW;IACX,QAAQ,CAAC,YAAY;GACtB,CACF;GACD,MAAM;IACJ,OAAO;IACP,uBAAuB;IACvB,yBAAyB;IACzB,6BAA6B;IAC7B,kBAAkB;GACnB;EACF,CAAA"}

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

@@ -0,0 +1,281 @@
+import * as i0 from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, Directive, afterNextRender, contentChild, input } from "@angular/core";
+import "@digdir/designsystemet-web";
+import * as i1 from "@ks-digital/designsystem-angular/__internals";
+import { HostColor, HostSize, logIfDevMode } from "@ks-digital/designsystem-angular/__internals";
+var SearchInput = class SearchInput {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SearchInput,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: SearchInput,
+		isStandalone: true,
+		selector: "input[ksd-search-input]",
+		host: {
+			attributes: { "type": "search" },
+			classAttribute: "ds-input"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SearchInput,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "input[ksd-search-input]",
+			host: {
+				class: "ds-input",
+				type: "search"
+			}
+		}]
+	}]
+});
+var Search = class Search {
+	input = contentChild(SearchInput, ...ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => {
+			if (!this.input()) logIfDevMode({
+				component: "Search",
+				message: "Missing required elements: ksd-search-input must be provided as child. Check imports and markup."
+			});
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: Search,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: Search,
+		isStandalone: true,
+		selector: "ksd-search",
+		queries: [{
+			propertyName: "input",
+			first: true,
+			predicate: SearchInput,
+			descendants: true,
+			isSignal: true
+		}],
+		hostDirectives: [{
+			directive: i1.HostSize,
+			inputs: ["data-size", "data-size"]
+		}, {
+			directive: i1.HostColor,
+			inputs: ["data-color", "data-color"]
+		}],
+		ngImport: i0,
+		template: `
+    @if (true) {
+      <ds-suggestion class="ds-search">
+        <ng-content select="[ksd-search-input]" />
+        <ng-content select="[ksd-search-clear]" />
+        <ng-content select="[ksd-search-button]" />
+      </ds-suggestion>
+    }
+  `,
+		isInline: true,
+		styles: [":host{display:block}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: Search,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ksd-search",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			template: `
+    @if (true) {
+      <ds-suggestion class="ds-search">
+        <ng-content select="[ksd-search-input]" />
+        <ng-content select="[ksd-search-clear]" />
+        <ng-content select="[ksd-search-button]" />
+      </ds-suggestion>
+    }
+  `,
+			hostDirectives: [{
+				directive: HostSize,
+				inputs: ["data-size"]
+			}, {
+				directive: HostColor,
+				inputs: ["data-color"]
+			}],
+			styles: [":host{display:block}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { input: [{
+		type: i0.ContentChild,
+		args: [i0.forwardRef(() => SearchInput), { isSignal: true }]
+	}] }
+});
+var SearchButton = class SearchButton {
+	variant = input("primary", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SearchButton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: SearchButton,
+		isStandalone: true,
+		selector: "button[ksd-search-button]",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "type": "submit" },
+			properties: {
+				"attr.aria-label": "this.ariaLabel() || null",
+				"attr.data-variant": "this.variant()"
+			},
+			classAttribute: "ds-button"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SearchButton,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[ksd-search-button]",
+			host: {
+				class: "ds-button",
+				type: "submit",
+				"[attr.aria-label]": "this.ariaLabel() || null",
+				"[attr.data-variant]": "this.variant()"
+			}
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}]
+	}
+});
+var SearchClear = class SearchClear {
+	ariaLabel = input("Tøm", {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SearchClear,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: SearchClear,
+		isStandalone: true,
+		selector: "button[ksd-search-clear]",
+		inputs: { ariaLabel: {
+			classPropertyName: "ariaLabel",
+			publicName: "aria-label",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "type": "reset" },
+			properties: {
+				"attr.data-variant": "'tertiary'",
+				"attr.aria-label": "this.ariaLabel()"
+			},
+			classAttribute: "ds-button"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SearchClear,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[ksd-search-clear]",
+			host: {
+				class: "ds-button",
+				type: "reset",
+				"[attr.data-variant]": "'tertiary'",
+				"[attr.aria-label]": "this.ariaLabel()"
+			}
+		}]
+	}],
+	propDecorators: { ariaLabel: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "aria-label",
+			required: false
+		}]
+	}] }
+});
+export { Search, SearchButton, SearchClear, SearchInput };
+
+//# sourceMappingURL=ks-digital-designsystem-angular-search.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-search.mjs","names":[],"sources":["../../../../packages/angular/search/src/search-input.ts","../../../../packages/angular/search/src/search.ts","../../../../packages/angular/search/src/search-button.ts","../../../../packages/angular/search/src/search-clear.ts"],"sourcesContent":["import { Directive } from '@angular/core'\n\n/**\n * Search input\n *\n * Used within Search to provide a search input.\n */\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'input[ksd-search-input]',\n  host: {\n    class: 'ds-input',\n    type: 'search',\n  },\n})\nexport class SearchInput {}\n","import {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  CUSTOM_ELEMENTS_SCHEMA,\n} from '@angular/core'\n// Main entrypoint on purpose: u-datalist, which ds-suggestion filtering needs, has no subpath export\nimport '@digdir/designsystemet-web'\nimport {\n  HostColor,\n  HostSize,\n  logIfDevMode,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { SearchInput } from './search-input'\n\n/**\n * Search Component\n *\n * Use to contain the search input and buttons.\n * Only `SearchInput` is required, while `SearchClear` and `SearchButton` are optional.\n *\n * @example\n * <div ksd-search>\n *   <input ksd-search-input />\n *   <button ksd-search-clear></button>\n *   <button ksd-search-button></button>\n * </div>\n */\n@Component({\n  selector: 'ksd-search',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  styles: `\n    :host {\n      display: block;\n    }\n  `,\n  // ds-suggestion hides the clear button while the input is empty, but only reads its\n  // children on connect. The @if builds this as an embedded view, so it is inserted\n  // with the projected content already in place - do not inline it.\n  template: `\n    @if (true) {\n      <ds-suggestion class=\"ds-search\">\n        <ng-content select=\"[ksd-search-input]\" />\n        <ng-content select=\"[ksd-search-clear]\" />\n        <ng-content select=\"[ksd-search-button]\" />\n      </ds-suggestion>\n    }\n  `,\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostColor,\n      inputs: ['data-color'],\n    },\n  ],\n})\nexport class Search {\n  private readonly input = contentChild(SearchInput)\n\n  constructor() {\n    afterNextRender(() => {\n      if (!this.input()) {\n        logIfDevMode({\n          component: 'Search',\n          message:\n            'Missing required elements: ksd-search-input must be provided as child. Check imports and markup.',\n        })\n      }\n    })\n  }\n}\n","import { Directive, input } from '@angular/core'\n\n/**\n * Search button\n *\n * Used within Search to provide a submit button.\n *\n * @param {('primary' | 'secondary')} [variant] - Specify which button variant to use\n * @param {string} [aria-label] - Aria label for the button\n *\n */\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'button[ksd-search-button]',\n  host: {\n    class: 'ds-button',\n    type: 'submit',\n    '[attr.aria-label]': 'this.ariaLabel() || null',\n    '[attr.data-variant]': 'this.variant()',\n  },\n})\nexport class SearchButton {\n  /**\n   * Specify which button variant to use\n   *\n   * @default 'primary'\n   */\n  readonly variant = input<'primary' | 'secondary'>('primary')\n\n  /**\n   * Aria label for the button\n   */\n  readonly ariaLabel = input('', { alias: 'aria-label' })\n}\n","import { Directive, input } from '@angular/core'\n\n/**\n * Search clear button\n *\n * Used within Search to provide a clear button.\n * ds-suggestion clears and refocuses the input, and fires an `input` event on it.\n *\n * @param {string} [aria-label] - Aria label for the button.\n */\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'button[ksd-search-clear]',\n  host: {\n    class: 'ds-button',\n    type: 'reset',\n    '[attr.data-variant]': \"'tertiary'\",\n    '[attr.aria-label]': 'this.ariaLabel()',\n  },\n})\nexport class SearchClear {\n  /**\n   * Aria label for the button\n   * @default 'Tøm'\n   */\n  readonly ariaLabel = input('Tøm', { alias: 'aria-label' })\n}\n"],"mappings":";;;;;AAeA,IAAa,cAAb,MAAa,YAAW;CAAX,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAW,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAX,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAW,cAAA;EAAA,UAAA;EAAA,MAAA;GAAA,YAAA,EAAA,QAAA,SAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;CAAA,CAAA;;AAAX,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAW,YAAA,CAAA;EARvB,MAAA;EAAU,MAAA,CAAA;GAET,UAAU;GACV,MAAM;IACJ,OAAO;IACP,MAAM;GACP;EACF,CAAA;;;AC+CD,IAAa,SAAb,MAAa,OAAM;CACA,QAAQ,aAAa,aAAY,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAElD,cAAA;EACE,sBAAqB;GACnB,IAAI,CAAC,KAAK,MAAK,GACb,aAAa;IACX,WAAW;IACX,SACE;GACH,CAAA;EAEL,CAAC;CACH;CAbW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAM,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAN,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAM,cAAA;EAAA,UAAA;EAAA,SAAA,CAAA;GAAA,cAAA;GAAA,OAAA;GAAA,WACqB;GAAW,aAAA;GAAA,UAAA;EAAA,CAAA;EAAA,gBAAA,CAAA;GAAA,WAAA,GAAA;GAAA,QAAA,CAAA,aAAA,WAAA;EAAA,GAAA;GAAA,WAAA,GAAA;GAAA,QAAA,CAAA,cAAA,YAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UArBvC;;;;;;;;;EAQT,UAAA;EAAA,QAAA,CAAA,wBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAYU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAM,YAAA,CAAA;EAhClB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAY,iBACL,wBAAwB;GAAM,SACtC,CAAC,sBAAsB;GAAC,UASvB;;;;;;;;;GAQT,gBACe,CACd;IACE,WAAW;IACX,QAAQ,CAAC,WAAW;GACrB,GACD;IACE,WAAW;IACX,QAAQ,CAAC,YAAY;GACtB,CACF;GAAA,QAAA,CAAA,wBAAA;EAAA,CAAA;CAGqC,CAAA;CAAA,sBAAA,CAAA;CAAA,gBAAA,EAAA,OAAA,CAAA;EAAA,MAAA,GAAA;EAAA,MAAA,CAAA,GAAA,iBAAA,WAAW,GAAA,EAAA,UAAA,KAAA,CAAA;CAAA,CAAA,EAAA;AAAA,CAAA;ACzCnD,IAAa,eAAb,MAAa,aAAY;CAMd,UAAU,MAA+B,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAKnD,YAAY,MAAM,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAY,CAAA;CAXzC,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,SAAA;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,MAAA;GAAA,YAAA,EAAA,QAAA,SAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,qBAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;CAAA,CAAA;;AAAZ,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAY,YAAA,CAAA;EAVxB,MAAA;EAAU,MAAA,CAAA;GAET,UAAU;GACV,MAAM;IACJ,OAAO;IACP,MAAM;IACN,qBAAqB;IACrB,uBAAuB;GACxB;EACF,CAAA;;;;;;;;;;;;;;;;;;;;;ACAD,IAAa,cAAb,MAAa,YAAW;CAKb,YAAY,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAY,CAAA;CAL5C,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAW,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAX,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAW,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,WAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,QAAA,QAAA;GAAA,YAAA;IAAA,qBAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;CAAA,CAAA;;AAAX,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAW,YAAA,CAAA;EAVvB,MAAA;EAAU,MAAA,CAAA;GAET,UAAU;GACV,MAAM;IACJ,OAAO;IACP,MAAM;IACN,uBAAuB;IACvB,qBAAqB;GACtB;EACF,CAAA"}

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

@@ -0,0 +1,79 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+var Skeleton = class Skeleton {
+	variant = input("rectangle", {
+		...ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {},
+		alias: "data-variant"
+	});
+	isText = computed(() => this.variant() === "text", ...ngDevMode ? [{ debugName: "isText" }] : /* istanbul ignore next */ []);
+	dataText = computed(() => {
+		return this.isText() ? "-" : null;
+	}, ...ngDevMode ? [{ debugName: "dataText" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: Skeleton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: Skeleton,
+		isStandalone: true,
+		selector: "ksd-skeleton",
+		inputs: { variant: {
+			classPropertyName: "variant",
+			publicName: "data-variant",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "aria-hidden": "true" },
+			properties: {
+				"attr.data-variant": "variant()",
+				"attr.data-text": "dataText()"
+			},
+			classAttribute: "ds-skeleton"
+		},
+		ngImport: i0,
+		template: ` <ng-content />`,
+		isInline: true,
+		styles: [":host{display:block}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: Skeleton,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ksd-skeleton",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: ` <ng-content />`,
+			host: {
+				class: "ds-skeleton",
+				"[attr.data-variant]": "variant()",
+				"[attr.data-text]": "dataText()",
+				"aria-hidden": "true"
+			},
+			styles: [":host{display:block}\n"]
+		}]
+	}],
+	propDecorators: { variant: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "data-variant",
+			required: false
+		}]
+	}] }
+});
+export { Skeleton };
+
+//# sourceMappingURL=ks-digital-designsystem-angular-skeleton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-skeleton.mjs","names":[],"sources":["../../../../packages/angular/skeleton/src/skeleton.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n} from '@angular/core'\n\n/**\n * Skeleton is used to represent a draft of a page while the content loads.\n */\n@Component({\n  selector: 'ksd-skeleton',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: ` <ng-content />`,\n  host: {\n    class: 'ds-skeleton',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-text]': 'dataText()',\n    'aria-hidden': 'true',\n  },\n  styles: `\n    :host {\n      display: block;\n    }\n  `,\n})\nexport class Skeleton {\n  /**\n   * Specify which variant to use\n   * @default 'rectangle'\n   */\n  readonly variant = input<'rectangle' | 'circle' | 'text'>('rectangle', {\n    alias: 'data-variant',\n  })\n\n  readonly isText = computed(() => this.variant() === 'text')\n\n  readonly dataText = computed(() => {\n    return this.isText() ? '-' : null\n  })\n}\n"],"mappings":";;AA0BA,IAAa,WAAb,MAAa,SAAQ;CAKV,UAAU,MAAuC,aAAW;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EACnE,OAAO;CAAc,CAAA;CAGd,SAAS,eAAe,KAAK,QAAO,MAAO,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAElD,WAAW,eAAc;EAChC,OAAO,KAAK,OAAM,IAAK,MAAM;CAC/B,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAbS,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,EAAA,SAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,eAAA,OAAA;GAAA,YAAA;IAAA,qBAAA;IAAA,kBAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UAbT;EAAiB,UAAA;EAAA,QAAA,CAAA,wBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAahB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAQ,YAAA,CAAA;EAhBpB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAc,iBACP,wBAAwB;GAAM,UACrC;GAAiB,MACrB;IACJ,OAAO;IACP,uBAAuB;IACvB,oBAAoB;IACpB,eAAe;GAChB;GAAA,QAAA,CAAA,wBAAA;EAAA,CAAA"}