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

package/README.md

@@ -1,10 +1,10 @@
-# 🚧 KS Digital Designsystem for Angular
+# KS Digital Designsystem for Angular
 
-> This is an experimental POC as for now
+> ⚠ This library is currently experimental. However, we actively use and test it in internal applications, and we strive to keep it stable at all times.
 
 This library provides Angular components for KS Digital, designed to align closely with the components from [Designsystemet.no](https://www.designsystemet.no/komponenter).
 
-## Installation (WIP)
+## Installation
 
 Install the required packages using your preferred package manager:
 
@@ -16,28 +16,45 @@ pnpm add @ks-digital/designsystem-angular @ks-digital/designsystem-themes
 
 ### 1. Include the Inter Font
 
-Add the Inter font to your `index.html`. This API supports the same parameters as the Google Fonts API, allowing you to customize the font weights as needed:
+Add the Inter font to your `index.html`:
 
 ```html
-<link
-  href="https://static.fiks.ks.no/googlefonts/googleapis/css2?family=Inter&display=swap"
-  rel="stylesheet"
-/>
+<link rel="stylesheet" href="https://static.fiks.ks.no/fonts/inter/4.1/inter.css" integrity="sha384-OcHzc/By/OPw9uJREawUCjP2inbOGKtKb4A/I2iXxmknUfog2H8Adx71tWVZRscD" crossorigin="anonymous" />
 ```
 
 ### 2. Import Base Styles and Themes
 
 Import the base styles and the theme you want to use in your application:
 
-```javascript
-import '@ks-digital/designsystem-themes/base.css'
-import '@ks-digital/designsystem-themes/ledsagerbevis.css'
+```css
+@import url('@ks-digital/designsystem-themes/base.css');
+@import url('@ks-digital/designsystem-themes/ksdigital.css');
 ```
 
 ### 3. Use Components
 
-To be written.
+```ts
+import { Button } from '@ks-digital/designsystem-angular'
+
+@Component({
+  imports: [Button],
+  template: `
+  <button ksd-button>
+    Click me
+  </button>
+  `,
+})
+```
 
 ## Example
 
 A complete example setup is available in the `angular-demo` located under the `apps` folder.
+
+## Development
+
+`pnpm nx run @ks-digital/designsystem-angular:storybook`
+
+## Update snapshots
+
+In folder `apps/angular-demo-e2e`:
+`docker compose run --rm update-snapshots`

package/__internals/README.md

@@ -0,0 +1,3 @@
+# Internals
+
+This entry point is intended only for internal use and may change without notice. Avoid depending on it directly in applications.

package/alert/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/alert
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/alert`.

package/breadcrumbs/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/breadcrumbs
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/breadcrumbs`.

package/button/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/button
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/button`.

package/card/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/card
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/card`.

package/details/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/details
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/details`.

package/dialog/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/dialog
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/dialog`.

package/dropdown/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/dropdown
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/dropdown`.

package/error-summary/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/errorsummary
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/errorsummary`.

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

@@ -0,0 +1,152 @@
+import * as i0 from "@angular/core";
+import { Directive, input, isDevMode } from "@angular/core";
+var HostSize = class HostSize {
+	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: HostSize,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: HostSize,
+		isStandalone: true,
+		inputs: { dataSize: {
+			classPropertyName: "dataSize",
+			publicName: "data-size",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "attr.data-size": "dataSize() || null" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: HostSize,
+	decorators: [{
+		type: Directive,
+		args: [{ host: { "[attr.data-size]": "dataSize() || null" } }]
+	}],
+	propDecorators: { dataSize: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "data-size",
+			required: false
+		}]
+	}] }
+});
+var HostColor = class HostColor {
+	dataColor = input(void 0, {
+		...ngDevMode ? { debugName: "dataColor" } : /* istanbul ignore next */ {},
+		alias: "data-color"
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: HostColor,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: HostColor,
+		isStandalone: true,
+		inputs: { dataColor: {
+			classPropertyName: "dataColor",
+			publicName: "data-color",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "attr.data-color": "dataColor() || null" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: HostColor,
+	decorators: [{
+		type: Directive,
+		args: [{ host: { "[attr.data-color]": "dataColor() || null" } }]
+	}],
+	propDecorators: { dataColor: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "data-color",
+			required: false
+		}]
+	}] }
+});
+var HostSeverityColors = class HostSeverityColors {
+	dataColor = input(void 0, {
+		...ngDevMode ? { debugName: "dataColor" } : /* istanbul ignore next */ {},
+		alias: "data-color"
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: HostSeverityColors,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: HostSeverityColors,
+		isStandalone: true,
+		inputs: { dataColor: {
+			classPropertyName: "dataColor",
+			publicName: "data-color",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "attr.data-color": "dataColor() || null" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: HostSeverityColors,
+	decorators: [{
+		type: Directive,
+		args: [{ host: { "[attr.data-color]": "dataColor() || null" } }]
+	}],
+	propDecorators: { dataColor: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "data-color",
+			required: false
+		}]
+	}] }
+});
+const logIfDevMode = ({ component, message }) => {
+	if (isDevMode()) console.log(`[${component}] ${message}`);
+};
+const randomId = () => {
+	return `${Math.random().toString(36).slice(2, 7)}`;
+};
+export { HostColor, HostSeverityColors, HostSize, logIfDevMode, randomId };
+
+//# sourceMappingURL=ks-digital-designsystem-angular-__internals.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-__internals.mjs","names":[],"sources":["../../../../packages/angular/__internals/src/host-directives.ts","../../../../packages/angular/__internals/src/log-if-devmode.ts","../../../../packages/angular/__internals/src/random-id.ts"],"sourcesContent":["import { Directive, input } from '@angular/core'\nimport {\n  ColorDefinitions,\n  SeverityColorDefinitions,\n  Size,\n} from '@ks-digital/designsystem-themes/types'\n\n/**\n * Applies data-size attribute to host-element.\n */\n@Directive({\n  host: {\n    '[attr.data-size]': 'dataSize() || null',\n  },\n})\nexport class HostSize {\n  /**\n   * Changes size for descendant Designsystemet components. Select from predefined sizes.\n   * @attribute data-size\n   */\n  readonly dataSize = input<Size>(undefined, {\n    alias: 'data-size',\n  })\n}\n\n/**\n * Applies data-color attribute to host-element for all colors, including severity colors.\n */\n@Directive({\n  host: {\n    '[attr.data-color]': 'dataColor() || null',\n  },\n})\nexport class HostColor {\n  /**\n   * Changes color for descendant Designsystemet components.\n   * Select from predefined colors and colors defined in theme.\n   * @attribute data-color\n   */\n  readonly dataColor = input<\n    keyof ColorDefinitions | keyof SeverityColorDefinitions\n  >(undefined, { alias: 'data-color' })\n}\n\n/**\n * Applies data-color attribute to host-element for severity colors.\n */\n@Directive({\n  host: {\n    '[attr.data-color]': 'dataColor() || null',\n  },\n})\nexport class HostSeverityColors {\n  /**\n   * Changes color for descendant Designsystemet components.\n   * Select from predefined colors and colors defined in theme.\n   * @attribute data-color\n   */\n  readonly dataColor = input<keyof SeverityColorDefinitions>(undefined, {\n    alias: 'data-color',\n  })\n}\n","import { isDevMode } from '@angular/core'\n\nexport const logIfDevMode = ({\n  component,\n  message,\n}: {\n  component: string\n  message: string\n}) => {\n  if (isDevMode()) {\n    console.log(`[${component}] ${message}`)\n  }\n}\n","export const randomId = () => {\n  return `${Math.random().toString(36).slice(2, 7)}`\n}\n"],"mappings":";;AAeA,IAAa,WAAb,MAAa,SAAQ;CAKV,WAAW,MAAY,QAAS;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EACvC,OAAO;CAAW,CAAA;CANT,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,QAAA,EAAA,UAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,qBAAA,EAAA;EAAA,UAAA;CAAA,CAAA;;AAAR,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAQ,YAAA,CAAA;EALpB,MAAA;EAAU,MAAA,CAAA,EACT,MAAM,EACJ,oBAAoB,qBACrB,EACF,CAAA;;;;;;;;;;;AAmBD,IAAa,YAAb,MAAa,UAAS;CAMX,YAAY,MAEnB,QAAS;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAY,CAAA;CARvB,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,QAAA,EAAA,WAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,mBAAA,sBAAA,EAAA;EAAA,UAAA;CAAA,CAAA;;AAAT,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAS,YAAA,CAAA;EALrB,MAAA;EAAU,MAAA,CAAA,EACT,MAAM,EACJ,qBAAqB,sBACtB,EACF,CAAA;;;;;;;;;;;AAoBD,IAAa,qBAAb,MAAa,mBAAkB;CAMpB,YAAY,MAAsC,QAAS;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAClE,OAAO;CAAY,CAAA;CAPV,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,QAAA,EAAA,WAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,mBAAA,sBAAA,EAAA;EAAA,UAAA;CAAA,CAAA;;AAAlB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAL9B,MAAA;EAAU,MAAA,CAAA,EACT,MAAM,EACJ,qBAAqB,sBACtB,EACF,CAAA;;;;;;;;;;;ACjDD,MAAa,gBAAgB,EAC3B,WACA,cAIG;CACH,IAAI,UAAS,GACX,QAAQ,IAAI,IAAI,UAAS,IAAK,SAAS;AAE3C;ACZA,MAAa,iBAAgB;CAC3B,OAAO,GAAG,KAAK,OAAM,CAAE,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC;AACjD"}

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

@@ -0,0 +1,60 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+import * as i1 from "@ks-digital/designsystem-angular/__internals";
+import { HostSeverityColors, HostSize } from "@ks-digital/designsystem-angular/__internals";
+var Alert = class Alert {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: Alert,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: Alert,
+		isStandalone: true,
+		selector: "ksd-alert",
+		host: { classAttribute: "ds-alert" },
+		hostDirectives: [{
+			directive: i1.HostSize,
+			inputs: ["data-size", "data-size"]
+		}, {
+			directive: i1.HostSeverityColors,
+			inputs: ["data-color", "data-color"]
+		}],
+		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: Alert,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ksd-alert",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: ` <ng-content />`,
+			host: { class: "ds-alert" },
+			hostDirectives: [{
+				directive: HostSize,
+				inputs: ["data-size"]
+			}, {
+				directive: HostSeverityColors,
+				inputs: ["data-color"]
+			}],
+			styles: [":host{display:block}\n"]
+		}]
+	}]
+});
+export { Alert };
+
+//# sourceMappingURL=ks-digital-designsystem-angular-alert.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-alert.mjs","names":[],"sources":["../../../../packages/angular/alert/src/alert.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core'\nimport {\n  HostSeverityColors,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n/**\n * Alerts are used to inform users about important information, warnings, errors, or success.\n */\n@Component({\n  selector: 'ksd-alert',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: ` <ng-content />`,\n  host: {\n    class: 'ds-alert',\n  },\n  styles: `\n    :host {\n      display: block;\n    }\n  `,\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostSeverityColors,\n      inputs: ['data-color'],\n    },\n  ],\n})\nexport class Alert {}\n"],"mappings":";;;;AAgCA,IAAa,QAAb,MAAa,MAAK;CAAL,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAK,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAL,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAK,cAAA;EAAA,UAAA;EAAA,MAAA,EAAA,gBAAA,WAAA;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,UApBN;EAAiB,UAAA;EAAA,QAAA,CAAA,wBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAoBhB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAK,YAAA,CAAA;EAvBjB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAW,iBACJ,wBAAwB;GAAM,UACrC;GAAiB,MACrB,EACJ,OAAO,WACR;GAAA,gBAMe,CACd;IACE,WAAW;IACX,QAAQ,CAAC,WAAW;GACrB,GACD;IACE,WAAW;IACX,QAAQ,CAAC,YAAY;GACtB,CACF;GAAA,QAAA,CAAA,wBAAA;EAAA,CAAA"}

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

@@ -0,0 +1,87 @@
+import * as i0 from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, input } from "@angular/core";
+import "@digdir/designsystemet-web/ds-breadcrumbs";
+import * as i1 from "@ks-digital/designsystem-angular/__internals";
+import { HostColor, HostSize } from "@ks-digital/designsystem-angular/__internals";
+var Breadcrumbs = class Breadcrumbs {
+	ariaLabel = input("Du er her:", {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: Breadcrumbs,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: Breadcrumbs,
+		isStandalone: true,
+		selector: "ksd-breadcrumbs",
+		inputs: { ariaLabel: {
+			classPropertyName: "ariaLabel",
+			publicName: "aria-label",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "attr.aria-label": "null" } },
+		hostDirectives: [{
+			directive: i1.HostSize,
+			inputs: ["data-size", "data-size"]
+		}, {
+			directive: i1.HostColor,
+			inputs: ["data-color", "data-color"]
+		}],
+		ngImport: i0,
+		template: `
+    <ds-breadcrumbs class="ds-breadcrumbs" [attr.aria-label]="ariaLabel()">
+      <ng-content />
+    </ds-breadcrumbs>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: Breadcrumbs,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ksd-breadcrumbs",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			template: `
+    <ds-breadcrumbs class="ds-breadcrumbs" [attr.aria-label]="ariaLabel()">
+      <ng-content />
+    </ds-breadcrumbs>
+  `,
+			host: { "[attr.aria-label]": "null" },
+			hostDirectives: [{
+				directive: HostSize,
+				inputs: ["data-size"]
+			}, {
+				directive: HostColor,
+				inputs: ["data-color"]
+			}]
+		}]
+	}],
+	propDecorators: { ariaLabel: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "aria-label",
+			required: false
+		}]
+	}] }
+});
+export { Breadcrumbs };
+
+//# sourceMappingURL=ks-digital-designsystem-angular-breadcrumbs.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-breadcrumbs.mjs","names":[],"sources":["../../../../packages/angular/breadcrumbs/src/breadcrumbs.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  CUSTOM_ELEMENTS_SCHEMA,\n  input,\n} from '@angular/core'\nimport '@digdir/designsystemet-web/ds-breadcrumbs'\nimport {\n  HostColor,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\n  selector: 'ksd-breadcrumbs',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  template: `\n    <ds-breadcrumbs class=\"ds-breadcrumbs\" [attr.aria-label]=\"ariaLabel()\">\n      <ng-content />\n    </ds-breadcrumbs>\n  `,\n  host: {\n    '[attr.aria-label]': 'null',\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 Breadcrumbs {\n  /**\n   * Sets the screen reader label for the pagination\n   */\n  readonly ariaLabel = input<string>('Du er her:', { alias: 'aria-label' })\n}\n"],"mappings":";;;;;AAmCA,IAAa,cAAb,MAAa,YAAW;CAIb,YAAY,MAAc,cAAY;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAY,CAAA;CAJ3D,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,EAAA,YAAA,EAAA,mBAAA,OAAA,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;EAAA,UAnBZ;;;;;EAIT,UAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAeU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAW,YAAA,CAAA;EAvBvB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,iBAAiB,wBAAwB;GACzC,SAAS,CAAC,sBAAsB;GAChC,UAAU;;;;;GAKV,MAAM,EACJ,qBAAqB,OACtB;GACD,gBAAgB,CACd;IACE,WAAW;IACX,QAAQ,CAAC,WAAW;GACrB,GACD;IACE,WAAW;IACX,QAAQ,CAAC,YAAY;GACtB,CACF;EACF,CAAA"}

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

@@ -0,0 +1,200 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, input } from "@angular/core";
+import * as i1 from "@ks-digital/designsystem-angular/__internals";
+import { HostColor, HostSize } from "@ks-digital/designsystem-angular/__internals";
+import { Spinner } from "@ks-digital/designsystem-angular/spinner";
+var Button = class Button {
+	variant = input("primary", {
+		...ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {},
+		alias: "data-variant"
+	});
+	loading = input(false, {
+		...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	icon = input(false, {
+		...ngDevMode ? { debugName: "icon" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	dataIcon = input(false, {
+		...ngDevMode ? { debugName: "dataIcon" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute,
+		alias: "data-icon"
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: Button,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: Button,
+		isStandalone: true,
+		selector: "button[ksd-button], a[ksd-button]",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "data-variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dataIcon: {
+				classPropertyName: "dataIcon",
+				publicName: "data-icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.data-variant": "variant()",
+				"attr.data-icon": "icon() || dataIcon() || null",
+				"attr.disabled": "disabled() ? true : null",
+				"attr.aria-busy": "loading() ? true : null"
+			},
+			classAttribute: "ds-button"
+		},
+		hostDirectives: [{
+			directive: i1.HostSize,
+			inputs: ["data-size", "data-size"]
+		}, {
+			directive: i1.HostColor,
+			inputs: ["data-color", "data-color"]
+		}],
+		ngImport: i0,
+		template: `
+    @if (loading()) {
+      <ksd-spinner aria-hidden="true" />
+    }
+    @if (!(loading() && (icon() || dataIcon()))) {
+      <ng-content />
+    }
+  `,
+		isInline: true,
+		styles: [":host ::ng-deep>*{display:inline-flex}:host ::ng-deep ng-icon{font-size:var(--ng-glyph__size, 1.3em)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Spinner,
+			selector: "ksd-spinner",
+			inputs: [
+				"aria-label",
+				"aria-hidden",
+				"data-size"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: Button,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[ksd-button], a[ksd-button]",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			hostDirectives: [{
+				directive: HostSize,
+				inputs: ["data-size"]
+			}, {
+				directive: HostColor,
+				inputs: ["data-color"]
+			}],
+			imports: [Spinner],
+			host: {
+				class: "ds-button",
+				"[attr.data-variant]": "variant()",
+				"[attr.data-icon]": "icon() || dataIcon() || null",
+				"[attr.disabled]": "disabled() ? true : null",
+				"[attr.aria-busy]": "loading() ? true : null"
+			},
+			template: `
+    @if (loading()) {
+      <ksd-spinner aria-hidden="true" />
+    }
+    @if (!(loading() && (icon() || dataIcon()))) {
+      <ng-content />
+    }
+  `,
+			styles: [":host ::ng-deep>*{display:inline-flex}:host ::ng-deep ng-icon{font-size:var(--ng-glyph__size, 1.3em)}\n"]
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data-variant",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		dataIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data-icon",
+				required: false
+			}]
+		}]
+	}
+});
+export { Button };
+
+//# sourceMappingURL=ks-digital-designsystem-angular-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-button.mjs","names":[],"sources":["../../../../packages/angular/button/src/button.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  input,\n} from '@angular/core'\nimport {\n  HostColor,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { Spinner } from '@ks-digital/designsystem-angular/spinner'\n\n@Component({\n  selector: 'button[ksd-button], a[ksd-button]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostColor,\n      inputs: ['data-color'],\n    },\n  ],\n  imports: [Spinner],\n  host: {\n    class: 'ds-button',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-icon]': 'icon() || dataIcon() || null',\n    '[attr.disabled]': 'disabled() ? true : null',\n    '[attr.aria-busy]': 'loading() ? true : null',\n  },\n  styles: `\n    /* Ensure transcluded icons are aligned properly */\n    :host ::ng-deep > * {\n      display: inline-flex;\n    }\n\n    :host ::ng-deep ng-icon {\n      font-size: var(--ng-glyph__size, 1.3em);\n    }\n  `,\n\n  template: `\n    @if (loading()) {\n      <ksd-spinner aria-hidden=\"true\" />\n    }\n    @if (!(loading() && (icon() || dataIcon()))) {\n      <ng-content />\n    }\n  `,\n})\nexport class Button {\n  /**\n   * Specify which variant to use\n   * @default 'primary'\n   */\n  readonly variant = input<'primary' | 'secondary' | 'tertiary'>('primary', {\n    alias: 'data-variant',\n  })\n\n  /**\n   * Toggle loading state.\n   * Pass an element if you want to display a custom loader.\n   *\n   * @default false\n   */\n  readonly loading = input(false, { transform: booleanAttribute })\n\n  /**\n   * Disables element\n   */\n  readonly disabled = input(false, { transform: booleanAttribute })\n\n  /**\n   * If this is a button with only an icon. When combined with loading, a spinner will be shown instead of the icon.\n   * @deprecated Use `data-icon` instead.\n   */\n  readonly icon = input(false, { transform: booleanAttribute })\n\n  /** If this is a button with only an icon. When combined with loading, a spinner will be shown instead of the icon. */\n  readonly dataIcon = input(false, {\n    transform: booleanAttribute,\n    alias: 'data-icon',\n  })\n}\n"],"mappings":";;;;;AAqDA,IAAa,SAAb,MAAa,OAAM;CAKR,UAAU,MAA4C,WAAS;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EACtE,OAAO;CAAc,CAAA;CASd,UAAU,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAKpD,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAMrD,OAAO,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAGjD,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAC7B,WAAW;EACX,OAAO;CAAW,CAAA;CA/BT,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,QAAA;GAAA,SAAA;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,UAAA;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,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,qBAAA;IAAA,kBAAA;IAAA,iBAAA;IAAA,kBAAA;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;EAAA,UATP;;;;;;;;EAOT,UAAA;EAAA,QAAA,CAAA,yGAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MA1BS;GAAO,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AA4BN,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAM,YAAA,CAAA;EAzClB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAmC,iBAC5B,wBAAwB;GAAM,gBAC/B,CACd;IACE,WAAW;IACX,QAAQ,CAAC,WAAW;GACrB,GACD;IACE,WAAW;IACX,QAAQ,CAAC,YAAY;GACtB,CACF;GAAA,SACQ,CAAC,OAAO;GAAC,MACZ;IACJ,OAAO;IACP,uBAAuB;IACvB,oBAAoB;IACpB,mBAAmB;IACnB,oBAAoB;GACrB;GAAA,UAYS;;;;;;;;GAOT,QAAA,CAAA,yGAAA;EAAA,CAAA"}