@unipin/angular-applet 18.9.3 → 18.9.4

package/projects/unipin-angular/src/lib/components/forms/date/form-date.stories.ts

@@ -0,0 +1,201 @@
+import { importProvidersFrom } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { FormDateComponent } from './form-date.component';
+
+const meta: Meta<FormDateComponent> = {
+  title: 'Form/Date',
+  tags: [ 'autodocs' ],
+  component: FormDateComponent,
+  decorators: [
+    applicationConfig({
+      providers: [ 
+        importProvidersFrom([ IonicModule.forRoot() ])
+      ],
+    }),
+    moduleMetadata({
+      imports: [ IonicModule, FormDateComponent ],
+    })
+  ],
+  argTypes: {
+    disabled: {
+      defaultValue: false,
+      description: 'If `true`, the user cannot interact with the date.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'boolean'
+      },
+    },
+    presentation: {
+      defaultValue: 'date',
+      description: 'If the value `date` will only show the date picker else `date-time` will show the time picker also.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      }
+    },
+    label: {
+      defaultValue: undefined,
+      description: 'The visible label associated with the date.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      }
+    },
+    name: {
+      defaultValue: undefined,
+      description: 'Used as the modal id name for displaying the date input modal; by default, it will have `-date`.',
+      table: {
+        category: 'Input',
+        subcategory: 'Attribute'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      },
+    },
+    placeholder: {
+      defaultValue: undefined,
+      description: 'Instructional text that shows before the date has a value.',
+      table: {
+        category: 'Input',
+        subcategory: 'Attribute'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      },
+    },
+    required: {
+      defaultValue: false,
+      description: 'If `true`, the user must fill in a value before submitting a form.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'boolean'
+      },
+    },
+    changeDate: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    errorMsg: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    isTouched: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    registerOnChange: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    registerOnTouched: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    setDisabledState: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    validate: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    value: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    localValue: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    dateFormat: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    writeValue: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+  }
+};
+
+export default meta;
+type Story = StoryObj<FormDateComponent>;
+
+export const Default: Story = {
+  args: {
+    label: 'Date',
+    name: 'birthdate' 
+  },
+};
+
+export const WithIcon: Story = {
+  name: 'With Icon',
+  render: (props) => ({
+    props,
+    template: `
+      <up-date label="Date" name="birthdate">
+        <ion-icon name="calendar" class="me-1" icon />
+      </up-date>
+    `
+  })
+};
+
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    required: true,
+    name: 'birthdate' 
+  },
+};
+
+export const WithTimePicker: Story = {
+  args: {
+    ...Default.args,
+    required: true,
+    name: 'birthdate',
+    presentation: 'date-time'
+  },
+};
+
+export const WithMinimumMaximum: Story = {
+  args: {
+    ...Default.args,
+    required: true,
+    name: 'min-max',
+    presentation: 'date',
+    value: '2024-01-01T00:00:00',
+    minDate: '2024-01-01T00:00:00',
+    maxDate: '2024-03-01T00:00:00'
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+    name: 'birthdate-disabled'
+  },
+};
+
+export const Error: Story = {
+  args: {
+    ...Required.args,
+    errorMsg: 'Field is required',
+    name: 'birthdate-error'
+  },
+};

package/projects/unipin-angular/src/lib/components/forms/image-picker/directives/drag-n-drop.directive.ts

@@ -0,0 +1,40 @@
+import { Directive, Output, EventEmitter, HostListener } from '@angular/core';
+
+@Directive({
+  standalone: true,
+  selector: '[upDragNDrop]'
+})
+export class DragNDropDirective {
+
+  @Output() public fileDropped = new EventEmitter<any>();
+
+  @HostListener('dragover', [ '$event' ]) 
+  public onDragOver(evt: any): void{
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    const target = evt.target as HTMLImageElement;
+    target.classList.add('dragging');
+  }
+
+  @HostListener('dragleave', [ '$event' ]) 
+  public onDragLeave(evt: any): void{
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    const target = evt.target as HTMLImageElement;
+    target.classList.remove('dragging');
+  }
+
+  @HostListener('drop', [ '$event' ]) 
+  public onDrop(evt: any): void{
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    const target = evt.target as HTMLImageElement;
+    target.classList.remove('dragging');
+
+    const files = evt.dataTransfer.files;
+    if (files.length > 0) this.fileDropped.emit(files);
+  }
+}

package/projects/unipin-angular/src/lib/components/forms/image-picker/form-image-picker.component.html

@@ -0,0 +1,29 @@
+<div class="flex-shrink-0 mb-4">
+    <label class="mb-2 d-flex align-items-center form-label">
+        @if (required) {
+            <span class="text-danger me-2">&ast;</span>
+        }
+        
+        <ng-content select="[icon]"/>
+        <span>{{ label }}</span>
+    </label>
+    
+    <div class="img-container position-relative border rounded" [ngStyle]="{ 'aspect-ratio': ratio }" upDragNDrop (fileDropped)="selectPhoto($event)"> 
+        @if (imgSrc) {
+            <img alt="{{ label }}" class="rounded" width="100%" height="100%" src="{{ imgSrc }}" />
+        }
+    
+        <div class="upload-icon rounded position-absolute text-white align-items-center justify-content-center px-3 py-2 w-100" [ngStyle]="{ 'aspect-ratio': ratio }" (click)="file.click();">
+            @if (!imgSrc) {
+                <ion-icon class="upload-icon" name="cloud-upload" title="Drop file or click to browse" />
+            } 
+            @else {
+                <div class="position-absolute display-flex justify-content-center rounded p-1 d-btn">
+                    <ion-icon name="trash" class="text-red-600" title="Clear Image" (click)="clear($event)" />
+                </div>
+            }
+        </div>
+    
+        <input type="file" hidden accept="image/png, image/jpeg, image/jpg" multiple="false" (change)="selectPhoto($event)" #file />
+    </div>
+</div>

package/projects/unipin-angular/src/lib/components/forms/image-picker/form-image-picker.component.scss

@@ -0,0 +1,40 @@
+ion-icon { font-size: 24px; }
+.img-container {
+    width: 250px;
+    border-style: dashed !important;
+    &:hover .upload-icon { display: flex; }
+    &:not(:has(img))::before {
+        content: 'Choose file or Drag here.';
+        top: 50%;
+        left: 50%;
+        font-size: 12px;
+        position: absolute;
+        color: grey;
+        text-align: center;
+        transform: translate(-50%, -50%);
+    }
+}
+.upload-icon:not(ion-icon) { background: #00000050; }
+.upload-icon {
+    top: 0;
+    left: 0;
+    display: none;
+    cursor: pointer;
+}
+.d-btn {
+    right: 10px;
+    bottom: 10px;
+    width: 32px;
+    height: 32px;
+    background-color: rgb(254 226 226);
+    ion-icon {
+        color: rgb(220 38 38);
+    }
+}
+.dragging {
+    border: 2px dashed #ED6B26 !important;
+    &:not(:has(img))::before {
+        content: 'Drop';
+        font-size: 32px;
+    }
+}

package/projects/unipin-angular/src/lib/components/forms/image-picker/form-image-picker.component.ts

@@ -0,0 +1,109 @@
+import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { NgStyle } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { DragNDropDirective } from './directives/drag-n-drop.directive';
+
+@Component({
+  standalone: true,
+  selector: 'up-image-picker',
+  templateUrl: './form-image-picker.component.html',
+  styleUrls: ['./form-image-picker.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'd-block'
+  },
+  imports: [
+    IonicModule,
+    NgStyle,
+    DragNDropDirective
+  ],
+  providers: [
+    {
+      multi: true,
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: FormImagePickerComponent
+    },
+  ]
+})
+export class FormImagePickerComponent implements ControlValueAccessor {
+
+  /**
+   * A public input variable to adjust image container aspect ratio by css, to keep the image width and height proportional.
+   * The common aspect ratio namely 1/1, 4/3, 16/9 etc.
+   * @type {string}
+   * @default `16/9`
+   */
+  @Input() public ratio: string = '16/9';
+  /**
+   * A public input variable to set the form label.
+   * @type {string}
+   * @default undefined
+   */
+  @Input() public label?: string;
+  /**
+   * A public input variable to show or hide astr (*) sign.
+   * It will show if the value is true mean the field is can not be empty and hide if the value is false.
+   * @type {boolean}
+   * @default false
+   */
+  @Input() public required: boolean = false;
+   /**
+   * A public output variable to emit the File to the parent component.
+   * @type {EventEmitter<File>}
+   */
+  @Output() public onChange: EventEmitter<File> = new EventEmitter<File>();
+   /**
+   * A public variable contain temporary image url shown on the preview.
+   * @type {string}
+   * @default undefined
+   */
+  public imgSrc!: string;
+   /**
+   * Both two methods are mandatory as implementation of ControlValueAccessor.
+   */
+  protected onChanged: (_val: any) => void = (_val: any) => {};
+  protected onTouched: () => void = () => {};
+
+  constructor(
+    protected readonly ch: ChangeDetectorRef
+  ) { }
+
+  /**
+   * Both two methods are mandatory as implementation of ControlValueAccessor.
+   */
+  public registerOnChange(fn: any): void{ this.onChanged = fn; }
+  
+  public registerOnTouched(fn: any): void{ this.onTouched = fn; }
+
+  /**
+   * A procedure called to clear the image preview.
+   */
+  public clear(ev?: Event): void{
+    this.writeValue('');
+    ev?.stopPropagation();
+  }
+
+  /**
+   * A procedure called when the image was set previously in the parent formControlName component and the user want to change with another one.
+   * It is mandatory as an implementation of ControlValueAccessor.
+   * @param {any} val - contain image url.
+   */
+  public writeValue(val: any): void{
+    this.imgSrc = val;
+    this.ch.markForCheck();
+  }
+
+  /**
+   * A procedure called when user pick or drag and drop image.
+   * @param {any} files - files?.target?.files to check if image come from drag and drop and files[0] from normal pick image.
+   */
+  public selectPhoto(files: any): void{
+    if (files?.target?.files) files = files.target.files;
+
+    if (files && files[0]) {
+      this.imgSrc = URL.createObjectURL((files[0]));
+      this.onChange.emit(files[0]);
+    }
+  }
+}

package/projects/unipin-angular/src/lib/components/forms/image-picker/form-image-picker.stories.ts

@@ -0,0 +1,133 @@
+import { Meta, StoryObj, argsToTemplate } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { userEvent, within } from '@storybook/testing-library';
+import { FormImagePickerComponent } from './form-image-picker.component';
+
+const meta: Meta<FormImagePickerComponent> = {
+  title: 'Form/Image Picker',
+  tags: ['autodocs'],
+  component: FormImagePickerComponent,
+  argTypes: {
+    ratio: {
+      defaultValue: '16/9',
+      description: 'To set aspect ratio of image, make sure width and height of image is proportional',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      }
+    },
+    label: {
+      defaultValue: undefined,
+      description: 'The visible label associated with the input.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      },
+    },
+    required: {
+      defaultValue: false,
+      description: 'If `true`, the user must fill in a value before submitting a form.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'boolean'
+      },
+    },
+    clear: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    imgSrc: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    selectPhoto: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    registerOnChange: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    registerOnTouched: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    writeValue: {
+      table: { disable: true },
+      control: { disable: true }
+    }
+  },
+  render: (props) => ({
+    props,
+    template: `<up-image-picker ${ argsToTemplate(props) } />`,
+  })
+};
+
+export default meta;
+type Story = StoryObj<FormImagePickerComponent>;
+
+export const Default: Story = {
+  args: {
+    label: 'Image',
+    ratio: '16/9',
+    required: false
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const container = canvas.getByTestId('img-container');
+    const iconContainer = canvas.getByTestId('icon-container');
+    
+    await userEvent.hover(container);
+    expect(container).toBeInTheDocument();
+
+    iconContainer.style.display = 'flex';
+
+    const iconUpload = canvas.getByTitle('Drop file or click to browse');
+    await userEvent.click(iconUpload);
+    action('Pick image icon clicked')();
+    
+    await userEvent.hover(container);
+    expect(container).toBeInTheDocument();
+    iconContainer.style.display = 'flex';
+
+    const iconDelete = canvas.getByTitle('Clear Image');
+    await userEvent.click(iconDelete);
+    action('Clear image icon clicked')();
+  }
+};
+
+export const WithIcon: Story = {
+  name: 'With Icon',
+  render: (props) => ({
+    props,
+    template: `
+      <up-image-picker label="Background" name="background">
+        <ion-icon name="image" class="me-1" icon />
+      </up-image-picker>
+    `
+  })
+};
+
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    required: true
+  }
+};
+
+export const Filled: Story = {
+  args: {
+    ...Default.args,
+    required: true,
+    imgSrc: 'https://cdn.unipin.com/images/navigation/notification-bonus/uc-1.png'
+  }
+}

package/projects/unipin-angular/src/lib/components/forms/input/form-input.component.html

@@ -0,0 +1,22 @@
+<label class="form-label d-flex align-items-center">
+    <ng-content select="[icon]" />
+    <span>{{ label }}</span>
+</label>
+
+<input 
+    class="form-control" 
+    min="{{ min }}" 
+    max="{{ max }}"
+    type="{{ type }}" 
+    placeholder="{{ placeholder }}" 
+    autocomplete="{{ autocomplete }}" 
+    [value]="value" 
+    [required]="required" 
+    [disabled]="disabled" 
+    (input)="input($event)" 
+    (change)="change($event.target)" 
+/>
+
+@if (errorMsg) {
+    <label class="is-invalid">{{ errorMsg }}</label>
+}