feat: develop pin-input

docs/dev/components/[component].md

@@ -44,6 +44,8 @@ import '../../../src/toast';
 import '../../../src/tooltip';
 import '../../../src/empty-state';
 import '../../../src/button';
+import '../../../src/pin-input';
+import '../../../src/pin-input-cell';
 import '../../../styles/theme.css';
 import '@tapsioss/icons/dist/icons';
 import "cemnama"

docs/dev/components/elements-config.json

@@ -34,6 +34,14 @@
     },
     "slotKnobs": {}
   },
+  "tap-pin-input": {
+    "propertyDefaultValues": {
+      "title": "عنوان",
+      "description": "توضیحات",
+      "count": 5
+    },
+    "slotKnobs": {}
+  },
   "tap-toast": {
     "propertyDefaultValues": {
       "show-dismiss-button": false,

src/pin-input-cell/constants.ts

@@ -0,0 +1,5 @@
+export const PIN_INPUT_CELL_FILLED_TYPE = 'cell-filled';
+export const PIN_INPUT_CELL_CLEARED_TYPE = 'cell-cleared';
+export const PIN_INPUT_CELL_CLEARED_ALL_TYPE = 'cell-cleared-all-with-meta-key';
+export const PIN_INPUT_CELL_ARROW_KEY_PRESSED_TYPE = 'arrow-key-pressed';
+export const PIN_INPUT_CELL_OVERFLOW_VALUE_TYPE = 'overflow-value';

src/pin-input-cell/events.ts

@@ -0,0 +1,53 @@
+import { BaseEvent } from '../utils';
+import {
+  PIN_INPUT_CELL_ARROW_KEY_PRESSED_TYPE,
+  PIN_INPUT_CELL_CLEARED_ALL_TYPE,
+  PIN_INPUT_CELL_CLEARED_TYPE,
+  PIN_INPUT_CELL_FILLED_TYPE,
+  PIN_INPUT_CELL_OVERFLOW_VALUE_TYPE,
+} from './constants';
+import { ValueChangedEventParams } from './types';
+
+export class CellFilled extends BaseEvent<ValueChangedEventParams> {
+  static type = PIN_INPUT_CELL_FILLED_TYPE;
+  constructor(details: ValueChangedEventParams){
+    super(CellFilled.type, {details})
+  }
+}
+
+export class CellCleared extends BaseEvent<ValueChangedEventParams> {
+  static type = PIN_INPUT_CELL_CLEARED_TYPE;
+  constructor(
+    details: ValueChangedEventParams,
+  ) {
+    super(CellCleared.type, {details});
+  }
+}
+
+export class CellClearedAll extends BaseEvent<ValueChangedEventParams> {
+  static type = PIN_INPUT_CELL_CLEARED_ALL_TYPE;
+  constructor(
+    details: ValueChangedEventParams,
+  ) {
+
+    super(CellClearedAll.type, {details});
+  }
+}
+
+export class CellArrowKeyPressed<T = 'left' | 'right'> extends BaseEvent<ValueChangedEventParams<T>> {
+  static type = PIN_INPUT_CELL_ARROW_KEY_PRESSED_TYPE;
+  constructor(
+    details: ValueChangedEventParams<T>,
+  ) {
+    super(CellArrowKeyPressed.type, {details});
+  }
+}
+
+export class CellOverflowValue extends BaseEvent<ValueChangedEventParams> {
+  static type = PIN_INPUT_CELL_OVERFLOW_VALUE_TYPE;
+  constructor(
+    details: ValueChangedEventParams,
+  ) {
+    super(CellOverflowValue.type, {details});
+  }
+}

src/pin-input-cell/index.ts

@@ -0,0 +1,16 @@
+import { customElement } from 'lit/decorators.js';
+import { PinInputCell } from './pin-input-cell.js';
+import styles from './pin-input-cell.style.js';
+export * from './events.js';
+export * from './constants.js';
+
+@customElement('tap-pin-input-cell')
+export class TapPinInputCell extends PinInputCell {
+  static override readonly styles = [styles];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'tap-pin-input-cell': TapPinInputCell;
+  }
+}

src/pin-input-cell/pin-input-cell.stories.ts

@@ -0,0 +1,24 @@
+import { html, TemplateResult } from 'lit';
+import './index.js';
+
+export default {
+  title: 'PinInput',
+  component: 'tap-pin-input-cell',
+  argTypes: {},
+};
+
+interface Story<T> {
+  (args: T): TemplateResult;
+  args?: Partial<T>;
+  argTypes?: Record<string, unknown>;
+}
+
+interface ArgTypes {}
+
+const Template: Story<ArgTypes> = (/*{}: ArgTypes*/) => html`
+  <tap-pin-input-cell value="4"> </tap-pin-input-cell>
+`;
+
+export const PinInputCell = Template.bind({});
+
+PinInputCell.args = {};

src/pin-input-cell/pin-input-cell.style.ts

@@ -0,0 +1,138 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --tap-pin-input-cell-box-sizing: border-box;
+    --tap-pin-input-cell-height: 52px;
+    --tap-pin-input-cell-max-cell-width-ratio: 1.25;
+
+    --tap-pin-input-cell-font-family: var(--tap-sys-font-family);
+    --tap-pin-input-cell-font-size-small: var(
+      --tap-sys-typography-headline-xs-size,
+      16px
+    );
+    --tap-pin-input-cell-font-size-medium: var(
+      --tap-sys-typography-headline-sm-size,
+      20px
+    );
+    --tap-pin-input-cell-font-size-large: var(
+      --tap-sys-typography-headline-md-size,
+      24px
+    );
+
+    --tap-pin-input-cell-font-weight-small: var(
+      --tap-sys-typography-headline-xs-weight,
+      600
+    );
+    --tap-pin-input-cell-font-weight-medium: var(
+      --tap-sys-typography-headline-sm-weight,
+      600
+    );
+    --tap-pin-input-cell-font-weight-large: var(
+      --tap-sys-typography-headline-md-weight,
+      600
+    );
+
+    --tap-pin-input-cell-line-height-small: var(
+      --tap-sys-typography-headline-xs-height,
+      26px
+    );
+    --tap-pin-input-cell-line-height-medium: var(
+      --tap-sys-typography-headline-sm-height,
+      32px
+    );
+    --tap-pin-input-cell-line-height-large: var(
+      --tap-sys-typography-headline-md-height,
+      36px
+    );
+
+    --tap-pin-input-cell-padding-small: var(--tap-sys-spacing-3, 6px);
+    --tap-pin-input-cell-padding-medium: var(--tap-sys-spacing-4, 8px);
+    --tap-pin-input-cell-padding-large: var(--tap-sys-spacing-5, 12px);
+
+    --tap-pin-input-cell-bg-color: var(--tap-palette-gray-100);
+    --tap-pin-input-cell-error-bg-color: var(--tap-palette-red-50);
+    --tap-pin-input-cell-disabled-bg-color: var(
+      --tap-sys-color-surface-disabled
+    );
+    --tap-pin-input-cell-color: var(--tap-palette-black);
+    --tap-pin-input-cell-disabled-color: var(--tap-sys-color-content-disabled);
+
+    --tap-pin-input-cell-border-focus-color: var(--tap-sys-color-border-focus);
+    --tap-pin-input-cell-border-error-color: var(
+      --tap-sys-color-border-negative
+    );
+    --tap-pin-input-cell-border-disabled-color: transparent;
+    --tap-pin-input-cell-border-radius: var(--tap-sys-radius-3);
+    --tap-pin-input-cell-border-width: var(--tap-sys-stroke-4);
+    --tap-pin-input-cell-border-default-color: transparent;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: var(--tap-pin-input-cell-box-sizing, inherit);
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  .cell {
+    border: none;
+    padding: 0;
+    margin: 0;
+    background-color: var(--tap-pin-input-cell-bg-color);
+    color: var(--tap-pin-input-cell-color);
+    border: var(--tap-pin-input-cell-border-width) solid
+      var(--tap-pin-input-cell-border-default-color);
+    border-radius: var(--tap-pin-input-cell-border-radius);
+    outline: none;
+    min-width: 0;
+    text-align: center;
+    font-family: var(--tap-pin-input-cell-font-family);
+    min-width: var(--tap-pin-input-cell-height);
+    max-width: calc(
+      var(--tap-pin-input-cell-height) *
+        var(--tap-pin-input-cell-max-cell-width-ratio)
+    );
+  }
+
+  .cell[disabled] {
+    border-color: var(--tap-pin-input-cell-border-disabled-color);
+    background-color: var(--tap-pin-input-cell-disabled-bg-color);
+    color: var(--tap-pin-input-cell-border-disabled-color);
+    user-select: none;
+    pointer-events: none;
+  }
+
+  .cell:focus {
+    border-color: var(--tap-pin-input-cell-border-focus-color);
+  }
+
+  .cell.cell-sm {
+    padding: var(--tap-pin-input-cell-padding-small);
+    font-size: var(--tap-pin-input-cell-font-size-small);
+    font-weight: var(--tap-pin-input-cell-font-weight-small);
+    line-height: var(--tap-pin-input-cell-line-height-small);
+  }
+
+  .cell.cell-md {
+    padding: var(--tap-pin-input-cell-padding-medium);
+    font-size: var(--tap-pin-input-cell-font-size-medium);
+    font-weight: var(--tap-pin-input-cell-font-weight-medium);
+    line-height: var(--tap-pin-input-cell-line-height-medium);
+  }
+
+  .cell.cell-lg {
+    padding: var(--tap-pin-input-cell-padding-large);
+    font-size: var(--tap-pin-input-cell-font-size-large);
+    font-weight: var(--tap-pin-input-cell-font-weight-large);
+    line-height: var(--tap-pin-input-cell-line-height-large);
+  }
+
+  .cell.has-error {
+    background-color: var(--tap-pin-input-cell-error-bg-color);
+    border-color: var(--tap-pin-input-cell-error-bg-color);
+  }
+`;