feat(numeric-stepper): first commit

.github/workflows/ci_test_numeric-stepper.yml

@@ -0,0 +1,24 @@
+name: Test numeric-stepper
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - '**'
+    tags-ignore:
+      - '**'
+    paths:
+      - '.github/workflows/ci_test_numeric-stepper.yml'
+      - 'projects/numeric-stepper/**'
+
+concurrency:
+  group: ci-test-numeric-stepper-group-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  ci_test_numeric-stepper:
+    uses: dsi-hug/action/.github/workflows/action.yml@v1
+    with:
+      working-directory: projects/numeric-stepper
+      runs-on: '["ubuntu-latest", "macos-latest", "windows-latest"]'
+      node-versions: '[18, 20]'

projects/numeric-stepper/ng-package.json

@@ -1,7 +1,14 @@
 {
     "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
     "dest": "../../dist/numeric-stepper",
+    "assets": [
+        {
+            "input": "src/",
+            "glob": "_numeric-stepper-theme.scss",
+            "output": "."
+        }
+    ],
     "lib": {
         "entryFile": "src/index.ts"
     }
-}
+}

projects/numeric-stepper/package.json

@@ -1,36 +1,47 @@
 {
-    "name": "@hug/ngx-numeric-stepper",
-    "version": "1.0.0",
-    "description": "",
-    "homepage": "https://github.com/dsi-hug/ngx-components",
-    "license": "GPL-3.0-only",
-    "author": "HUG - Hôpitaux Universitaires Genève",
-    "contributors": [
-        "badisi (https://github.com/badisi)",
-        "vapkse (https://github.com/vapkse)"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/dsi-hug/ngx-components.git"
-    },
-    "keywords": [
-        "angular",
-        "material",
-        "material design",
-        "components"
-    ],
-    "sideEffects": false,
-    "scripts": {
-        "lint": "eslint . --fix",
-        "test": "ng test numeric-stepper",
-        "test:ci": "ng test numeric-stepper --watch=false --browsers=ChromeHeadless",
-        "build": "ng build numeric-stepper -c production"
-    },
-    "peerDependencies": {
-        "@angular/common": "^14.3.0",
-        "@angular/core": "^14.3.0"
-    },
-    "dependencies": {
-        "tslib": "^2.6.2"
+  "name": "@hug/ngx-numeric-stepper",
+  "version": "1.0.0",
+  "description": "",
+  "homepage": "https://github.com/dsi-hug/ngx-components",
+  "license": "GPL-3.0-only",
+  "author": "HUG - Hôpitaux Universitaires Genève",
+  "contributors": [
+    "badisi (https://github.com/badisi)",
+    "vapkse (https://github.com/vapkse)"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dsi-hug/ngx-components.git"
+  },
+  "keywords": [
+    "angular",
+    "material",
+    "material design",
+    "components"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "sass": "./_numeric-stepper-theme.scss"
     }
+  },
+  "scripts": {
+    "lint": "eslint . --fix",
+    "test": "ng test numeric-stepper",
+    "test:ci": "ng test numeric-stepper --watch=false --browsers=ChromeHeadless",
+    "build": "ng build numeric-stepper -c=production",
+    "release": "nx release -p=@hug/ngx-numeric-stepper",
+    "release:dry-run": "nx release -p=@hug/ngx-numeric-stepper --dry-run"
+  },
+  "peerDependencies": {
+    "@angular/common": ">= 14",
+    "@angular/core": ">= 14",
+    "@angular/cdk": ">= 14",
+    "@angular/material": ">= 14",
+    "rxjs": ">= 7.0.0",
+    "@hug/ngx-core": "1.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.6.2"
+  }
 }

projects/numeric-stepper/src/_numeric-stepper-theme.scss

@@ -0,0 +1,55 @@
+@use "@angular/material" as mat;
+
+@mixin theme($theme) {
+    $primary: map-get($theme, primary);
+    $warn: map-get($theme, warn);
+    $background: map-get($theme, background);
+
+    [numeric-stepper-form-field] {
+        numeric-stepper {
+            .arrow {
+                color: mat.get-color-from-palette($primary);
+
+                &[disabled] {
+                    color: rgba(#000, 0.3);
+                }
+            }
+
+            .shadow {
+                background-color: mat.get-color-from-palette($background, card);
+            }
+        }
+
+        &:not(.disabled) {
+            &.mat-form-field-invalid {
+                numeric-stepper {
+                    .arrow:not([disabled]) {
+                        color: mat.get-color-from-palette($warn);
+                    }
+
+                    .shadow {
+                        box-shadow: 0px 2px 4px rgba(mat.get-color-from-palette($warn), 0.3);
+                    }
+                }
+
+                .mat-form-field-flex {
+                    background-color: mat.get-color-from-palette($background);
+                }
+            }
+
+            &:hover {
+                .mat-form-field-flex {
+                    background-color: transparent;
+                }
+            }
+        }
+
+        &.mat-form-field-appearance-fill {
+            numeric-stepper {
+                .shadow::after {
+                    background-color: rgba(0, 0, 0, 0.04);
+                }
+            }
+        }
+    }
+}

projects/numeric-stepper/src/index.ts

@@ -1,6 +1 @@
-/*
- * Public API Surface of lib
- */
-
-export * from './example/example.service';
-export * from './example/example.component';
+export * from './numeric-stepper.component';

projects/numeric-stepper/src/numeric-stepper.component.html

@@ -0,0 +1,3 @@
+<mat-icon *ngIf="leftUp !== null" class="arrow noselect increment" [attr.disabled]="disableUp || null" [style.left.px]="leftUp" [style.top.px]="topUp" (click)="clickArrow$.next(true)">{{ (!arrowIcons && "add") || (layout==="vertical" && "keyboard_arrow_up") || "keyboard_arrow_right" }}</mat-icon>
+<mat-icon *ngIf="leftDown !== null" class="arrow noselect decrement" [attr.disabled]="disableDown || null" [style.left.px]="leftDown" [style.top.px]="topDown" (click)="clickArrow$.next(false)">{{ (!arrowIcons && "remove") || (layout==="vertical" && "keyboard_arrow_down") || "keyboard_arrow_left" }}</mat-icon>
+<div *ngIf="widthShadow !== null" class="shadow" [style.left.px]="leftShadow" [style.width.px]="widthShadow" [style.top.px]="topShadow" [style.height.px]="heightShadow"></div>