@unipin/angular-applet 18.9.5 → 18.9.6

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

@@ -1,201 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,29 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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

@@ -1,22 +0,0 @@
-<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>
-}