@ks-digital/designsystem-angular 0.0.1-alpha.67 → 0.0.1-alpha.68

package/README.md

@@ -56,5 +56,5 @@ A complete example setup is available in the `angular-demo` located under the `a
 
 ## Update snapshots
 
-From this folder:
+In folder `apps/angular-demo-e2e`:
 `docker compose run --rm update-snapshots`

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

@@ -0,0 +1,35 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * Skeleton is used to represent a draft of a page while the content loads.
+ */
+class Skeleton {
+    /**
+     * Specify which variant to use
+     * @default 'rectangle'
+     */
+    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: "21.2.8", ngImport: i0, type: Skeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", 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: "21.2.8", 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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+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","sources":["../../../../packages/angular/skeleton/src/skeleton.ts","../../../../packages/angular/skeleton/src/ks-digital-designsystem-angular-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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAOA;;AAEG;MAiBU,QAAQ,CAAA;AACnB;;;AAGG;IACM,OAAO,GAAG,KAAK,CAAkC,WAAW,+EACnE,KAAK,EAAE,cAAc,EAAA,CACrB;AAEO,IAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,KAAK,MAAM,6EAAC;AAElD,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAChC,QAAA,OAAO,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,GAAG,IAAI;AACnC,IAAA,CAAC,+EAAC;uGAbS,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,yXAbT,CAAA,eAAA,CAAiB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAahB,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAhBpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,mBACP,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,iBAAiB,EAAA,IAAA,EACrB;AACJ,wBAAA,KAAK,EAAE,aAAa;AACpB,wBAAA,qBAAqB,EAAE,WAAW;AAClC,wBAAA,kBAAkB,EAAE,YAAY;AAChC,wBAAA,aAAa,EAAE,MAAM;AACtB,qBAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;;ACnBH;;AAEG;;;;"}

package/package.json

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

package/skeleton/README.md

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

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

@@ -0,0 +1,18 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Skeleton is used to represent a draft of a page while the content loads.
+ */
+declare class Skeleton {
+    /**
+     * Specify which variant to use
+     * @default 'rectangle'
+     */
+    readonly variant: _angular_core.InputSignal<"rectangle" | "circle" | "text">;
+    readonly isText: _angular_core.Signal<boolean>;
+    readonly dataText: _angular_core.Signal<"-" | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Skeleton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Skeleton, "ksd-skeleton", never, { "variant": { "alias": "data-variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { Skeleton };