tango-app-ui-store-builder 1.0.1-beta-1 → 1.0.1-beta-2

package/.eslintrc.json

@@ -0,0 +1,37 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "lib",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

package/ng-package.json

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

package/package.json

@@ -1,25 +1,12 @@
-{
-  "name": "tango-app-ui-store-builder",
-  "version": "1.0.1-beta-1",
-  "peerDependencies": {
-    "@angular/common": "^17.3.0",
-    "@angular/core": "^17.3.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/tango-app-ui-store-builder.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/tango-app-ui-store-builder.mjs",
-      "esm": "./esm2022/tango-app-ui-store-builder.mjs",
-      "default": "./fesm2022/tango-app-ui-store-builder.mjs"
-    }
-  }
-}
+{
+  "name": "tango-app-ui-store-builder",
+  "version": "1.0.1-beta-2",
+  "peerDependencies": {
+    "@angular/common": "^17.3.0",
+    "@angular/core": "^17.3.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/components/counter-input/counter-input.component.html

@@ -0,0 +1,42 @@
+<div class="counter-container" [class.disable-counter]="disabled">
+  <svg
+    role="button"
+    width="15"
+    height="14"
+    viewBox="0 0 15 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    (click)="decrement()"
+  >
+    <path d="M3.76294 7H11.9296" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+
+  <input
+    type="number"
+    class="center"
+    [value]="value"
+    [min]="step"
+    [placeholder]="placeholder"
+    [disabled]="disabled"
+    (input)="onInput($event)"
+    (blur)="onTouched()"
+  />
+
+  <svg
+    role="button"
+    width="15"
+    height="14"
+    viewBox="0 0 15 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    (click)="increment()"
+  >
+    <path
+      d="M7.15389 2.9165V11.0832M3.07056 6.99984H11.2372"
+      stroke="#667085"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</div>

package/src/lib/components/counter-input/counter-input.component.scss

@@ -0,0 +1,49 @@
+$text-color: #667085;
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.counter-container {
+  @include flex-center;
+  border-radius: 8px;
+  background-color: white;
+  border: 0.49px solid #d0d5dd;
+  padding: 10px;
+  justify-content: space-between;
+
+  input {
+    border: none;
+    text-align: center;
+    vertical-align: middle;
+    background-color: transparent;
+    min-width: 20px;
+    width: 100%;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
+  input:focus {
+    outline: 0;
+    box-shadow: none;
+  }
+}
+
+.disable-counter {
+  color: var(--bs-gray-500) !important;
+  background-color: var(--bs-gray-200) !important;
+  border-color: var(--bs-gray-300) !important;
+  pointer-events: none;
+  opacity: 1;
+}

package/src/lib/components/counter-input/counter-input.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CounterInputComponent } from './counter-input.component';
+
+describe('CounterInputComponent', () => {
+  let component: CounterInputComponent;
+  let fixture: ComponentFixture<CounterInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CounterInputComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CounterInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/counter-input/counter-input.component.ts

@@ -0,0 +1,68 @@
+import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'counter-input',
+  templateUrl: './counter-input.component.html',
+  styleUrl: './counter-input.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CounterInputComponent),
+      multi: true
+    }
+  ]
+})
+export class CounterInputComponent implements ControlValueAccessor {
+  @Input() step: number = 1;
+  @Input() placeholder: string = '0';
+
+  @Output() onIncrement = new EventEmitter<any>();
+  @Output() onDecrement = new EventEmitter<any>();
+
+  value: number = 0;
+  disabled = false;
+
+  onChange = (value: number) => { };
+  onTouched = () => { };
+
+  increment() {
+    if (!this.disabled) {
+      this.value += this.step;
+      this.onChange(this.value);
+      this.onIncrement.emit(this.value);
+    }
+  }
+
+  decrement() {
+    if (!this.disabled) {
+      if (this.value <= this.step) return;
+      this.value -= this.step;
+      this.onChange(this.value);
+      this.onDecrement.emit(this.value);
+    }
+  }
+
+  onInput(event: Event) {
+    const val = (event.target as HTMLInputElement).valueAsNumber;
+    this.value = isNaN(val) ? 0 : val;
+    this.onChange(this.value);
+  }
+
+  // ControlValueAccessor interface methods
+  writeValue(value: number): void {
+    this.value = value || 0;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}