@xui/status 2.0.0-alpha.0

package/README.md

@@ -0,0 +1,7 @@
+# status
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test status` to execute the unit tests.

package/fesm2022/xui-status.mjs

@@ -0,0 +1,113 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component, NgModule } from '@angular/core';
+import { xui } from '@xui/core';
+import { cva } from 'class-variance-authority';
+
+const statusVariants = cva(['inline-flex aspect-square rounded-[50%]'], {
+    variants: {
+        variant: {
+            online: 'bg-success',
+            idle: 'bg-warning',
+            dnd: 'bg-error',
+            offline: 'bg-gray-600'
+        },
+        size: {
+            sm: 'w-3',
+            md: 'w-4',
+            lg: 'w-6'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+class XuiStatusComponent {
+    /** The user defined classes */
+    class = input('');
+    variant = input.required();
+    size = input('md');
+    /** The classes to apply to the component merged with the user defined classes */
+    computedClass = computed(() => xui(statusVariants({ variant: this.variant(), size: this.size() }), this.class()));
+    computedStyle = computed(() => {
+        switch (this.variant()) {
+            case 'idle':
+                return 'url(#x-status-idle-clip-path)';
+            case 'dnd':
+                return 'url(#x-status-dnd-clip-path)';
+            case 'offline':
+                return 'url(#x-status-offline-clip-path)';
+        }
+        return null;
+    });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: XuiStatusComponent, isStandalone: true, selector: "xui-status", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()", "style.clip-path": "computedStyle()" } }, ngImport: i0, template: `<svg>
+      <clipPath id="x-status-idle-clip-path" clipPathUnits="objectBoundingBox">
+        <path d="M0.564,0 A0.399,0.399,0,1,1,0,0.564 A0.502,0.502,0,1,0,0.564,0" />
+      </clipPath>
+    </svg>
+    <svg>
+      <clipPath id="x-status-dnd-clip-path" clipPathUnits="objectBoundingBox">
+        <path
+          d="M0.5,0 a0.5,0.5,0,1,0,0.5,0.5 A0.5,0.5,0,0,0,0.5,0 M0.78,0.603 H0.22 a0.103,0.103,0,0,1,0,-0.205 H0.78 a0.103,0.103,0,1,1,0,0.205"
+        />
+      </clipPath>
+    </svg>
+    <svg>
+      <clipPath id="x-status-offline-clip-path" clipPathUnits="objectBoundingBox">
+        <path
+          d="M0.5,0 a0.5,0.5,0,1,0,0.5,0.5 A0.5,0.5,0,0,0,0.5,0 m0,0.76 A0.26,0.26,0,1,1,0.76,0.5 A0.26,0.26,0,0,1,0.5,0.76"
+        />
+      </clipPath>
+    </svg>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiStatusComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'xui-status',
+                    imports: [],
+                    template: `<svg>
+      <clipPath id="x-status-idle-clip-path" clipPathUnits="objectBoundingBox">
+        <path d="M0.564,0 A0.399,0.399,0,1,1,0,0.564 A0.502,0.502,0,1,0,0.564,0" />
+      </clipPath>
+    </svg>
+    <svg>
+      <clipPath id="x-status-dnd-clip-path" clipPathUnits="objectBoundingBox">
+        <path
+          d="M0.5,0 a0.5,0.5,0,1,0,0.5,0.5 A0.5,0.5,0,0,0,0.5,0 M0.78,0.603 H0.22 a0.103,0.103,0,0,1,0,-0.205 H0.78 a0.103,0.103,0,1,1,0,0.205"
+        />
+      </clipPath>
+    </svg>
+    <svg>
+      <clipPath id="x-status-offline-clip-path" clipPathUnits="objectBoundingBox">
+        <path
+          d="M0.5,0 a0.5,0.5,0,1,0,0.5,0.5 A0.5,0.5,0,0,0,0.5,0 m0,0.76 A0.26,0.26,0,1,1,0.76,0.5 A0.26,0.26,0,0,1,0.5,0.76"
+        />
+      </clipPath>
+    </svg>`,
+                    host: {
+                        '[class]': 'computedClass()',
+                        '[style.clip-path]': 'computedStyle()'
+                    }
+                }]
+        }] });
+
+const XuiStatusImports = [XuiStatusComponent];
+class XuiStatusModule {
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiStatusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.3", ngImport: i0, type: XuiStatusModule, imports: [XuiStatusComponent], exports: [XuiStatusComponent] });
+    /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiStatusModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiStatusModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...XuiStatusImports],
+                    exports: [...XuiStatusImports]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XuiStatusComponent, XuiStatusImports, XuiStatusModule };
+//# sourceMappingURL=xui-status.mjs.map

package/fesm2022/xui-status.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xui-status.mjs","sources":["../../../../../../libs/ui/status/xui/src/lib/status.component.ts","../../../../../../libs/ui/status/xui/src/index.ts","../../../../../../libs/ui/status/xui/src/xui-status.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\nimport { xui } from '@xui/core';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport type { ClassValue } from 'clsx';\n\nconst statusVariants = cva(['inline-flex aspect-square rounded-[50%]'], {\n  variants: {\n    variant: {\n      online: 'bg-success',\n      idle: 'bg-warning',\n      dnd: 'bg-error',\n      offline: 'bg-gray-600'\n    },\n    size: {\n      sm: 'w-3',\n      md: 'w-4',\n      lg: 'w-6'\n    }\n  },\n  defaultVariants: {\n    size: 'md'\n  }\n});\n\nexport type StatusVariants = VariantProps<typeof statusVariants>;\n\n@Component({\n  selector: 'xui-status',\n  imports: [],\n  template: `<svg>\n      <clipPath id=\"x-status-idle-clip-path\" clipPathUnits=\"objectBoundingBox\">\n        <path d=\"M0.564,0 A0.399,0.399,0,1,1,0,0.564 A0.502,0.502,0,1,0,0.564,0\" />\n      </clipPath>\n    </svg>\n    <svg>\n      <clipPath id=\"x-status-dnd-clip-path\" clipPathUnits=\"objectBoundingBox\">\n        <path\n          d=\"M0.5,0 a0.5,0.5,0,1,0,0.5,0.5 A0.5,0.5,0,0,0,0.5,0 M0.78,0.603 H0.22 a0.103,0.103,0,0,1,0,-0.205 H0.78 a0.103,0.103,0,1,1,0,0.205\"\n        />\n      </clipPath>\n    </svg>\n    <svg>\n      <clipPath id=\"x-status-offline-clip-path\" clipPathUnits=\"objectBoundingBox\">\n        <path\n          d=\"M0.5,0 a0.5,0.5,0,1,0,0.5,0.5 A0.5,0.5,0,0,0,0.5,0 m0,0.76 A0.26,0.26,0,1,1,0.76,0.5 A0.26,0.26,0,0,1,0.5,0.76\"\n        />\n      </clipPath>\n    </svg>`,\n  host: {\n    '[class]': 'computedClass()',\n    '[style.clip-path]': 'computedStyle()'\n  }\n})\nexport class XuiStatusComponent {\n  /** The user defined classes */\n  readonly class = input<ClassValue>('');\n  readonly variant = input.required<StatusVariants['variant']>();\n  readonly size = input<StatusVariants['size']>('md');\n\n  /** The classes to apply to the component merged with the user defined classes */\n  protected readonly computedClass = computed(() =>\n    xui(statusVariants({ variant: this.variant(), size: this.size() }), this.class())\n  );\n\n  protected readonly computedStyle = computed(() => {\n    switch (this.variant()) {\n      case 'idle':\n        return 'url(#x-status-idle-clip-path)';\n      case 'dnd':\n        return 'url(#x-status-dnd-clip-path)';\n      case 'offline':\n        return 'url(#x-status-offline-clip-path)';\n    }\n\n    return null;\n  });\n}\n","import { NgModule } from '@angular/core';\nimport { XuiStatusComponent } from './lib/status.component';\nexport * from './lib/status.component';\n\nexport const XuiStatusImports = [XuiStatusComponent] as const;\n\n@NgModule({\n  imports: [...XuiStatusImports],\n  exports: [...XuiStatusImports]\n})\nexport class XuiStatusModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAKA,MAAM,cAAc,GAAG,GAAG,CAAC,CAAC,yCAAyC,CAAC,EAAE;AACtE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,MAAM,EAAE,YAAY;AACpB,YAAA,IAAI,EAAE,YAAY;AAClB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE;AACV,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,KAAK;AACT,YAAA,EAAE,EAAE,KAAK;AACT,YAAA,EAAE,EAAE;AACL;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE;AACP;AACF,CAAA,CAAC;MA+BW,kBAAkB,CAAA;;AAEpB,IAAA,KAAK,GAAG,KAAK,CAAa,EAAE,CAAC;AAC7B,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,EAA6B;AACrD,IAAA,IAAI,GAAG,KAAK,CAAyB,IAAI,CAAC;;AAGhC,IAAA,aAAa,GAAG,QAAQ,CAAC,MAC1C,GAAG,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAClF;AAEkB,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,QAAA,QAAQ,IAAI,CAAC,OAAO,EAAE;AACpB,YAAA,KAAK,MAAM;AACT,gBAAA,OAAO,+BAA+B;AACxC,YAAA,KAAK,KAAK;AACR,gBAAA,OAAO,8BAA8B;AACvC,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,kCAAkC;;AAG7C,QAAA,OAAO,IAAI;AACb,KAAC,CAAC;0HAtBS,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,uBAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAxBnB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;AAkBD,UAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAME,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBA3B9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,OAAO,EAAE,EAAE;AACX,oBAAA,QAAQ,EAAE,CAAA;;;;;;;;;;;;;;;;;;AAkBD,UAAA,CAAA;AACT,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,iBAAiB;AAC5B,wBAAA,mBAAmB,EAAE;AACtB;AACF,iBAAA;;;AChDY,MAAA,gBAAgB,GAAG,CAAC,kBAAkB;MAMtC,eAAe,CAAA;0HAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;2HAAf,eAAe,EAAA,OAAA,EAAA,CANK,kBAAkB,CAAA,EAAA,OAAA,EAAA,CAAlB,kBAAkB,CAAA,EAAA,CAAA;2HAMtC,eAAe,EAAA,CAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,GAAG,gBAAgB,CAAC;AAC9B,oBAAA,OAAO,EAAE,CAAC,GAAG,gBAAgB;AAC9B,iBAAA;;;ACTD;;AAEG;;;;"}

package/index.d.ts

@@ -0,0 +1,10 @@
+import { XuiStatusComponent } from './lib/status.component';
+import * as i0 from "@angular/core";
+import * as i1 from "./lib/status.component";
+export * from './lib/status.component';
+export declare const XuiStatusImports: readonly [typeof XuiStatusComponent];
+export declare class XuiStatusModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<XuiStatusModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<XuiStatusModule, never, [typeof i1.XuiStatusComponent], [typeof i1.XuiStatusComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<XuiStatusModule>;
+}

package/lib/status.component.d.ts

@@ -0,0 +1,20 @@
+import { VariantProps } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+import * as i0 from "@angular/core";
+declare const statusVariants: (props?: ({
+    variant?: "online" | "idle" | "dnd" | "offline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export type StatusVariants = VariantProps<typeof statusVariants>;
+export declare class XuiStatusComponent {
+    /** The user defined classes */
+    readonly class: import("@angular/core").InputSignal<ClassValue>;
+    readonly variant: import("@angular/core").InputSignal<"online" | "idle" | "dnd" | "offline" | null | undefined>;
+    readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | null | undefined>;
+    /** The classes to apply to the component merged with the user defined classes */
+    protected readonly computedClass: import("@angular/core").Signal<string>;
+    protected readonly computedStyle: import("@angular/core").Signal<"url(#x-status-idle-clip-path)" | "url(#x-status-dnd-clip-path)" | "url(#x-status-offline-clip-path)" | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XuiStatusComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XuiStatusComponent, "xui-status", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@xui/status",
+  "version": "2.0.0-alpha.0",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/core": "19",
+    "@xui/core": "2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1"
+  },
+  "module": "fesm2022/xui-status.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/xui-status.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}