@ks-digital/designsystem-angular 0.0.1-alpha.46 → 0.0.1-alpha.48

package/README.md

@@ -28,7 +28,7 @@ Import the base styles and the theme you want to use in your application:
 
 ```css
 @import url('@ks-digital/designsystem-themes/base.css');
-@import url('@ks-digital/designsystem-themes/forvaltning.css');
+@import url('@ks-digital/designsystem-themes/ksdigital.css');
 ```
 
 ### 3. Use Components

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

@@ -0,0 +1,105 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, ChangeDetectionStrategy, Component, output } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+class Table {
+    /**
+     * Will give the table a hover effect on rows
+     * @default false
+     */
+    hover = input(false, { ...(ngDevMode ? { debugName: "hover" } : {}), alias: 'data-hover',
+        transform: booleanAttribute });
+    /**
+     * Will give the table a rounded border
+     * @default false
+     */
+    border = input(false, { ...(ngDevMode ? { debugName: "border" } : {}), alias: 'data-border',
+        transform: booleanAttribute });
+    /**
+     * Will make the table header sticky
+     * @default false
+     */
+    stickyHeader = input(false, { ...(ngDevMode ? { debugName: "stickyHeader" } : {}), alias: 'data-sticky-header',
+        transform: booleanAttribute });
+    /**
+     * Will give the table zebra striping
+     * @default false
+     */
+    zebra = input(false, { ...(ngDevMode ? { debugName: "zebra" } : {}), alias: 'data-zebra',
+        transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: Table, isStandalone: true, selector: "table[ksd-table]", inputs: { hover: { classPropertyName: "hover", publicName: "data-hover", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "data-border", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "data-sticky-header", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "data-zebra", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-hover": "hover() || undefined", "attr.data-border": "border() || undefined", "attr.data-sticky-header": "stickyHeader() || undefined", "attr.data-zebra": "zebra() || undefined" }, classAttribute: "ds-table" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Table, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'table[ksd-table]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<ng-content />`,
+                    host: {
+                        class: 'ds-table',
+                        '[attr.data-hover]': 'hover() || undefined',
+                        '[attr.data-border]': 'border() || undefined',
+                        '[attr.data-sticky-header]': 'stickyHeader() || undefined',
+                        '[attr.data-zebra]': 'zebra() || undefined',
+                    },
+                }]
+        }], propDecorators: { hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-hover", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-border", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-sticky-header", required: false }] }], zebra: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-zebra", required: false }] }] } });
+
+class TableHeaderCell {
+    /**
+     * If 'none' | 'ascending' | 'descending' will add a button to the header cell and change aria-sort and icon
+     * @default undefined
+     */
+    sort = input(undefined, { ...(ngDevMode ? { debugName: "sort" } : {}), alias: 'aria-sort' });
+    /**
+     * Emitted when the sort button is clicked
+     * @emits void
+     */
+    sortChange = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableHeaderCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TableHeaderCell, isStandalone: true, selector: "th[ksd-header-cell]", inputs: { sort: { classPropertyName: "sort", publicName: "aria-sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange" }, host: { properties: { "attr.aria-sort": "sort()" } }, ngImport: i0, template: `
+    @if (sort()) {
+      <button
+        type="button"
+        (click)="sortChange.emit(); $event.stopPropagation()"
+      >
+        <ng-container *ngTemplateOutlet="headerTitle"></ng-container>
+      </button>
+    } @else {
+      <ng-container *ngTemplateOutlet="headerTitle"></ng-container>
+    }
+
+    <ng-template #headerTitle>
+      <ng-content />
+    </ng-template>
+  `, isInline: true, styles: ["button{padding:var(--dsc-table-padding)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableHeaderCell, decorators: [{
+            type: Component,
+            args: [{ selector: 'th[ksd-header-cell]', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (sort()) {
+      <button
+        type="button"
+        (click)="sortChange.emit(); $event.stopPropagation()"
+      >
+        <ng-container *ngTemplateOutlet="headerTitle"></ng-container>
+      </button>
+    } @else {
+      <ng-container *ngTemplateOutlet="headerTitle"></ng-container>
+    }
+
+    <ng-template #headerTitle>
+      <ng-content />
+    </ng-template>
+  `, imports: [NgTemplateOutlet], host: {
+                        '[attr.aria-sort]': 'sort()',
+                    }, styles: ["button{padding:var(--dsc-table-padding)}\n"] }]
+        }], propDecorators: { sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-sort", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Table, TableHeaderCell };
+//# sourceMappingURL=ks-digital-designsystem-angular-table.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-table.mjs","sources":["../../../../packages/angular/table/src/table.ts","../../../../packages/angular/table/src/table-header-cell.ts","../../../../packages/angular/table/src/ks-digital-designsystem-angular-table.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  input,\n} from '@angular/core'\n\n@Component({\n  selector: 'table[ksd-table]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `<ng-content />`,\n  host: {\n    class: 'ds-table',\n    '[attr.data-hover]': 'hover() || undefined',\n    '[attr.data-border]': 'border() || undefined',\n    '[attr.data-sticky-header]': 'stickyHeader() || undefined',\n    '[attr.data-zebra]': 'zebra() || undefined',\n  },\n})\nexport class Table {\n  /**\n   * Will give the table a hover effect on rows\n   * @default false\n   */\n  readonly hover = input(false, {\n    alias: 'data-hover',\n    transform: booleanAttribute,\n  })\n  /**\n   * Will give the table a rounded border\n   * @default false\n   */\n  readonly border = input(false, {\n    alias: 'data-border',\n    transform: booleanAttribute,\n  })\n  /**\n   * Will make the table header sticky\n   * @default false\n   */\n  readonly stickyHeader = input(false, {\n    alias: 'data-sticky-header',\n    transform: booleanAttribute,\n  })\n  /**\n   * Will give the table zebra striping\n   * @default false\n   */\n  readonly zebra = input(false, {\n    alias: 'data-zebra',\n    transform: booleanAttribute,\n  })\n}\n","import { NgTemplateOutlet } from '@angular/common'\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  output,\n} from '@angular/core'\n@Component({\n  selector: 'th[ksd-header-cell]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    @if (sort()) {\n      <button\n        type=\"button\"\n        (click)=\"sortChange.emit(); $event.stopPropagation()\"\n      >\n        <ng-container *ngTemplateOutlet=\"headerTitle\"></ng-container>\n      </button>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"headerTitle\"></ng-container>\n    }\n\n    <ng-template #headerTitle>\n      <ng-content />\n    </ng-template>\n  `,\n  imports: [NgTemplateOutlet],\n  host: {\n    '[attr.aria-sort]': 'sort()',\n  },\n  styles: `\n    button {\n      padding: var(--dsc-table-padding);\n    }\n  `,\n})\nexport class TableHeaderCell {\n  /**\n   * If 'none' | 'ascending' | 'descending' will add a button to the header cell and change aria-sort and icon\n   * @default undefined\n   */\n  readonly sort = input<'none' | 'ascending' | 'descending'>(undefined, {\n    alias: 'aria-sort',\n  })\n  /**\n   * Emitted when the sort button is clicked\n   * @emits void\n   */\n  readonly sortChange = output()\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -5,7 +5,7 @@
     "url": "https://github.com/ks-no/designsystem.git",
     "directory": "packages/angular"
   },
-  "version": "0.0.1-alpha.46",
+  "version": "0.0.1-alpha.48",
   "license": "MIT",
   "private": false,
   "publishConfig": {
@@ -97,6 +97,10 @@
       "types": "./types/ks-digital-designsystem-angular-suggestion.d.ts",
       "default": "./fesm2022/ks-digital-designsystem-angular-suggestion.mjs"
     },
+    "./table": {
+      "types": "./types/ks-digital-designsystem-angular-table.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-table.mjs"
+    },
     "./tabs": {
       "types": "./types/ks-digital-designsystem-angular-tabs.d.ts",
       "default": "./fesm2022/ks-digital-designsystem-angular-tabs.mjs"

package/table/README.md

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

package/types/ks-digital-designsystem-angular-table.d.ts

@@ -0,0 +1,43 @@
+import * as _angular_core from '@angular/core';
+
+declare class Table {
+    /**
+     * Will give the table a hover effect on rows
+     * @default false
+     */
+    readonly hover: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Will give the table a rounded border
+     * @default false
+     */
+    readonly border: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Will make the table header sticky
+     * @default false
+     */
+    readonly stickyHeader: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Will give the table zebra striping
+     * @default false
+     */
+    readonly zebra: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Table, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Table, "table[ksd-table]", never, { "hover": { "alias": "data-hover"; "required": false; "isSignal": true; }; "border": { "alias": "data-border"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "data-sticky-header"; "required": false; "isSignal": true; }; "zebra": { "alias": "data-zebra"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class TableHeaderCell {
+    /**
+     * If 'none' | 'ascending' | 'descending' will add a button to the header cell and change aria-sort and icon
+     * @default undefined
+     */
+    readonly sort: _angular_core.InputSignal<"none" | "ascending" | "descending" | undefined>;
+    /**
+     * Emitted when the sort button is clicked
+     * @emits void
+     */
+    readonly sortChange: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableHeaderCell, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableHeaderCell, "th[ksd-header-cell]", never, { "sort": { "alias": "aria-sort"; "required": false; "isSignal": true; }; }, { "sortChange": "sortChange"; }, never, ["*"], true, never>;
+}
+
+export { Table, TableHeaderCell };