@3ddv/software-division-components 1.0.0-alpha.1

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@3ddv/software-division-components",
+  "version": "1.0.0-alpha.1",
+  "peerDependencies": {
+    "@angular/animations": "^16.2.12",
+    "@angular/common": "^16.2.12",
+    "@angular/compiler": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/forms": "^16.2.12",
+    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/router": "^16.2.12",
+    "primeng": "~16.9.1",
+    "rxjs": "~7.8.0",
+    "zone.js": "~0.14.10"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "devDependencies": {
+    "primeicons": "^7.0.0",
+    "storybook": "^8.4.7"
+  },
+  "gitHead": "52f79fb20f3efd417ddc5760635bf623e7da9d12"
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/backoffice/table/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/backoffice/table/package.json

@@ -0,0 +1,5 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  }
+}

package/src/lib/backoffice/table/public-api.ts

@@ -0,0 +1,2 @@
+export * from './table.component';
+export * from './table.service';

package/src/lib/backoffice/table/table.component.html

@@ -0,0 +1,37 @@
+<p-contextMenu #name [model]="items"></p-contextMenu>
+
+<p-table
+  #table
+  dataKey="id"
+  [columns]="items"
+  stripedRows
+  [frozenColumns]="['code', 'name', 'category', 'quantity']"
+  columnResizeMode="fit"
+  [contextMenu]="name"
+  [exportHeader]="'customExportHeader'"
+  [tableStyle]="{ 'max-width': '50rem' }"
+  [scrollable]
+  scrollHeight="'flex'">
+  <p-button icon="pi pi-external-link" label="Export" (onClick)="table.exportCSV()"></p-button>
+  <ng-template pTemplate="caption">
+    <div class="flex items-center justify-between">
+      <span class="text-xl font-bold">Products</span>
+    </div>
+  </ng-template>
+  <ng-template pTemplate="header" class="flex">
+    <tr>
+      <th>Code</th>
+      <th>Name</th>
+      <th>Category</th>
+      <th>Quantity</th>
+    </tr>
+  </ng-template>
+  <ng-template pTemplate="body" let-item>
+    <tr>
+      <td>{{ item.code }}</td>
+      <td>{{ item.name }}</td>
+      <td>{{ item.category }}</td>
+      <td>{{ item.quantity }}</td>
+    </tr>
+  </ng-template>
+</p-table>

package/src/lib/backoffice/table/table.component.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { ContextMenuModule } from 'primeng/contextmenu';
+import { TableModule } from 'primeng/table';
+import { ScrollDirection, TableSize } from './types';
+import { sizes } from './utils';
+
+@Component({
+  standalone: true,
+  selector: 'sdc-table',
+  templateUrl: './table.component.html',
+  imports: [TableModule, ContextMenuModule, ButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TableComponent {
+  @Input('paginator') paginator: boolean = false;
+  @Input('value') value: Record<string, string | number | boolean | Date>[] = [];
+  @Input('scrollDirection') scrollDirection: ScrollDirection = 'vertical';
+
+  @Input('size')
+  set size(value: TableSize) {
+    this._primeSize = sizes[value];
+  }
+  public _primeSize: string = '';
+
+  protected items = [
+    { label: 'View', icon: 'pi pi-fw pi-search' },
+    { label: 'Delete', icon: 'pi pi-fw pi-times' },
+  ];
+}

package/src/lib/backoffice/table/table.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TableService {
+
+constructor() { }
+
+}

package/src/lib/backoffice/table/table.stories.ts

@@ -0,0 +1,30 @@
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { TableModule } from 'primeng/table';
+import { TableComponent } from './table.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta: Meta<TableComponent> = {
+  title: 'Backoffice/Table',
+  decorators: [
+    moduleMetadata({
+      imports: [TableModule],
+    }),
+  ],
+  component: TableComponent,
+  id: 'Table',
+  argTypes: {},
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+};
+
+export default meta;
+type Story = StoryObj<TableComponent>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    value: [],
+    size: 'normal',
+    paginator: false,
+    scrollDirection: 'vertical',
+  },
+};

package/src/lib/backoffice/table/types.ts

@@ -0,0 +1,2 @@
+export type ScrollDirection = 'vertical' | 'horizontal' | 'both';
+export type TableSize = 'small' | 'large' | 'normal';

package/src/lib/backoffice/table/utils.ts

@@ -0,0 +1,7 @@
+import { TableSize } from './types';
+
+export const sizes: Record<TableSize, string> = {
+  small: 'p-datatable-sm',
+  large: 'p-datatable-lg',
+  normal: 'normal',
+};

package/src/lib/dvm/cart/cart.component.html

@@ -0,0 +1,24 @@
+<p-button
+  [label]="label"
+  [icon]="icon"
+  [type]="type"
+  [loading]="loading"
+  [iconPos]="iconPos"
+  [disabled]="disabled"
+  [severity]="severity"
+  [rounded]="rounded"
+  [raised]="raised"
+  [link]="link"
+  [size]="size"
+  [badge]="badge"
+  [plain]="plain"
+  [text]="text"
+  [style]="style"
+  [outlined]="outlined"
+  [ariaLabel]="ariaLabel"
+  [styleClass]="styleClass"
+  [badgeClass]="badgeClass"
+  [loadingIcon]="loadingIcon"
+  (onClick)="onClick.emit($event)"
+  (onFocus)="onFocus.emit($event)"
+  (onBlur)="onBlur.emit($event)" />

package/src/lib/dvm/cart/cart.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { Button, ButtonModule } from 'primeng/button';
+
+@Component({
+  selector: 'sdc-cart',
+  standalone: true,
+  imports: [ButtonModule],
+  templateUrl: './cart.component.html',
+})
+export class CartComponent extends Button {
+  constructor() {
+    super();
+  }
+}

package/src/lib/dvm/cart/cart.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CartService {
+  constructor() {}
+}

package/src/lib/dvm/cart/cart.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { CartComponent } from './cart.component';
+
+const meta: Meta<CartComponent> = {
+  title: 'Dvm/Cart',
+  component: CartComponent,
+  id: 'Cart',
+};
+
+export default meta;
+
+type Story = StoryObj<CartComponent>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Primary Button',
+    icon: 'pi pi-check',
+    type: 'button',
+    iconPos: 'left',
+    disabled: false,
+    loading: false,
+    severity: 'primary',
+    rounded: false,
+    raised: true,
+    outlined: false,
+    link: false,
+    size: undefined,
+    ariaLabel: 'Primary button',
+    style: { 'margin-right': '10px' },
+  },
+};

package/src/lib/dvm/cart/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/dvm/cart/package.json

@@ -0,0 +1,5 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  }
+}

package/src/lib/dvm/cart/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of software-division-components
+ */
+
+export * from './cart.component';
+export * from './cart.service';

package/src/lib/dvm/cart-item/cart-item.component.html

@@ -0,0 +1,24 @@
+<p-button
+  [label]="label"
+  [icon]="icon"
+  [type]="type"
+  [loading]="loading"
+  [iconPos]="iconPos"
+  [disabled]="disabled"
+  [severity]="severity"
+  [rounded]="rounded"
+  [raised]="raised"
+  [link]="link"
+  [size]="size"
+  [badge]="badge"
+  [plain]="plain"
+  [text]="text"
+  [style]="style"
+  [outlined]="outlined"
+  [ariaLabel]="ariaLabel"
+  [styleClass]="styleClass"
+  [badgeClass]="badgeClass"
+  [loadingIcon]="loadingIcon"
+  (onClick)="onClick.emit($event)"
+  (onFocus)="onFocus.emit($event)"
+  (onBlur)="onBlur.emit($event)" />

package/src/lib/dvm/cart-item/cart-item.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { Button, ButtonModule } from 'primeng/button';
+
+@Component({
+  selector: 'sdc-cart-item',
+  standalone: true,
+  imports: [ButtonModule],
+  templateUrl: './cart-item.component.html',
+})
+export class CartItemComponent extends Button {
+  constructor() {
+    super();
+  }
+}

package/src/lib/dvm/cart-item/cart-item.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CartItemService {
+  constructor() {}
+}

package/src/lib/dvm/cart-item/cart.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { CartItemComponent } from './cart-item.component';
+
+const meta: Meta<CartItemComponent> = {
+  title: 'Dvm/CartItem',
+  component: CartItemComponent,
+  id: 'CartItem',
+};
+
+export default meta;
+
+type Story = StoryObj<CartItemComponent>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Primary Button',
+    icon: 'pi pi-check',
+    type: 'button',
+    iconPos: 'left',
+    disabled: false,
+    loading: false,
+    severity: 'primary',
+    rounded: false,
+    raised: true,
+    outlined: false,
+    link: false,
+    size: undefined,
+    ariaLabel: 'Primary button',
+    style: { 'margin-right': '10px' },
+  },
+};

package/src/lib/dvm/cart-item/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/dvm/cart-item/package.json

@@ -0,0 +1,5 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  }
+}

package/src/lib/dvm/cart-item/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of software-division-components
+ */
+
+export * from './cart-item.component';
+export * from './cart-item.service';

package/src/lib/dvm/legend/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/dvm/legend/legend.component.html

@@ -0,0 +1,24 @@
+<p-button
+  [label]="label"
+  [icon]="icon"
+  [type]="type"
+  [loading]="loading"
+  [iconPos]="iconPos"
+  [disabled]="disabled"
+  [severity]="severity"
+  [rounded]="rounded"
+  [raised]="raised"
+  [link]="link"
+  [size]="size"
+  [badge]="badge"
+  [plain]="plain"
+  [text]="text"
+  [style]="style"
+  [outlined]="outlined"
+  [ariaLabel]="ariaLabel"
+  [styleClass]="styleClass"
+  [badgeClass]="badgeClass"
+  [loadingIcon]="loadingIcon"
+  (onClick)="onClick.emit($event)"
+  (onFocus)="onFocus.emit($event)"
+  (onBlur)="onBlur.emit($event)" />

package/src/lib/dvm/legend/legend.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { Button, ButtonModule } from 'primeng/button';
+
+@Component({
+  selector: 'sdc-legend',
+  standalone: true,
+  imports: [ButtonModule],
+  templateUrl: './legend.component.html',
+})
+export class LegendComponent extends Button {
+  constructor() {
+    super();
+  }
+}

package/src/lib/dvm/legend/legend.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LegendService {
+  constructor() {}
+}

package/src/lib/dvm/legend/legend.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { LegendComponent } from './legend.component';
+
+const meta: Meta<LegendComponent> = {
+  title: 'Dvm/Legend',
+  component: LegendComponent,
+  id: 'Legend',
+};
+
+export default meta;
+
+type Story = StoryObj<LegendComponent>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Primary Button',
+    icon: 'pi pi-check',
+    type: 'button',
+    iconPos: 'left',
+    disabled: false,
+    loading: false,
+    severity: 'primary',
+    rounded: false,
+    raised: true,
+    outlined: false,
+    link: false,
+    size: undefined,
+    ariaLabel: 'Primary button',
+    style: { 'margin-right': '10px' },
+  },
+};

package/src/lib/dvm/legend/package.json

@@ -0,0 +1,5 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  }
+}

package/src/lib/dvm/legend/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of software-division-components
+ */
+
+export * from './legend.component';
+export * from './legend.service';

package/src/lib/dvm/loader/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/dvm/loader/loader.component.html

@@ -0,0 +1,24 @@
+<p-button
+  [label]="label"
+  [icon]="icon"
+  [type]="type"
+  [loading]="loading"
+  [iconPos]="iconPos"
+  [disabled]="disabled"
+  [severity]="severity"
+  [rounded]="rounded"
+  [raised]="raised"
+  [link]="link"
+  [size]="size"
+  [badge]="badge"
+  [plain]="plain"
+  [text]="text"
+  [style]="style"
+  [outlined]="outlined"
+  [ariaLabel]="ariaLabel"
+  [styleClass]="styleClass"
+  [badgeClass]="badgeClass"
+  [loadingIcon]="loadingIcon"
+  (onClick)="onClick.emit($event)"
+  (onFocus)="onFocus.emit($event)"
+  (onBlur)="onBlur.emit($event)" />

package/src/lib/dvm/loader/loader.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { Button, ButtonModule } from 'primeng/button';
+
+@Component({
+  selector: 'sdc-loader',
+  standalone: true,
+  imports: [ButtonModule],
+  templateUrl: './loader.component.html',
+})
+export class LoaderComponent extends Button {
+  constructor() {
+    super();
+  }
+}

package/src/lib/dvm/loader/loader.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LoaderService {
+  constructor() {}
+}

package/src/lib/dvm/loader/loader.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { LoaderComponent } from './loader.component';
+
+const meta: Meta<LoaderComponent> = {
+  title: 'Dvm/Loader',
+  component: LoaderComponent,
+  id: 'Loader',
+};
+
+export default meta;
+
+type Story = StoryObj<LoaderComponent>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Primary Button',
+    icon: 'pi pi-check',
+    type: 'button',
+    iconPos: 'left',
+    disabled: false,
+    loading: false,
+    severity: 'primary',
+    rounded: false,
+    raised: true,
+    outlined: false,
+    link: false,
+    size: undefined,
+    ariaLabel: 'Primary button',
+    style: { 'margin-right': '10px' },
+  },
+};

package/src/lib/dvm/loader/package.json

@@ -0,0 +1,5 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  }
+}

package/src/lib/dvm/loader/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of software-division-components
+ */
+
+export * from './popover.component';
+export * from './popover.service';

package/src/lib/dvm/popover/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/dvm/popover/package.json

@@ -0,0 +1,5 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  }
+}

package/src/lib/dvm/popover/popover.component.html

@@ -0,0 +1,24 @@
+<p-button
+  [label]="label"
+  [icon]="icon"
+  [type]="type"
+  [loading]="loading"
+  [iconPos]="iconPos"
+  [disabled]="disabled"
+  [severity]="severity"
+  [rounded]="rounded"
+  [raised]="raised"
+  [link]="link"
+  [size]="size"
+  [badge]="badge"
+  [plain]="plain"
+  [text]="text"
+  [style]="style"
+  [outlined]="outlined"
+  [ariaLabel]="ariaLabel"
+  [styleClass]="styleClass"
+  [badgeClass]="badgeClass"
+  [loadingIcon]="loadingIcon"
+  (onClick)="onClick.emit($event)"
+  (onFocus)="onFocus.emit($event)"
+  (onBlur)="onBlur.emit($event)" />

package/src/lib/dvm/popover/popover.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { Button, ButtonModule } from 'primeng/button';
+
+@Component({
+  selector: 'sdc-popover',
+  standalone: true,
+  imports: [ButtonModule],
+  templateUrl: './popover.component.html',
+})
+export class PopoverComponent extends Button {
+  constructor() {
+    super();
+  }
+}

package/src/lib/dvm/popover/popover.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PopoverService {
+  constructor() {}
+}