@sebgroup/green-angular 6.0.4 → 6.1.0-rc.20250730100346703

package/src/lib/context-menu/context-menu.stories.ts

@@ -0,0 +1,142 @@
+import { CommonModule } from '@angular/common'
+import { BrowserModule } from '@angular/platform-browser'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'
+
+import { NggContextMenuComponent } from './context-menu.component'
+import { NggContextMenuModule } from './context-menu.module'
+
+export default {
+  title: 'Components/Context Menu',
+  component: NggContextMenuComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        BrowserModule,
+        BrowserAnimationsModule,
+        NggContextMenuModule,
+      ],
+    }),
+  ],
+  parameters: {
+    componentIds: ['component-context-menu'],
+  },
+} as Meta<NggContextMenuComponent>
+
+const Template: StoryFn<NggContextMenuComponent> = (args) => ({
+  component: NggContextMenuComponent,
+  props: args,
+  template: `
+  <div style="display:flex;justify-content:space-between">
+    <ngg-context-menu #ctx [direction]="direction" [menuItems]="menuItems"></ngg-context-menu>
+    <ngg-context-menu #ctx [direction]="direction" [menuItems]="menuItems"></ngg-context-menu>
+    <ngg-context-menu #ctx [direction]="direction" [menuItems]="menuItems"></ngg-context-menu>
+  </div>
+  `,
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  direction: 'ltr',
+  menuItems: [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+  ],
+}
+
+const WithLabelTemplate: StoryFn<NggContextMenuComponent> = (args) => ({
+  component: NggContextMenuComponent,
+  props: args,
+  template: `
+    <ngg-context-menu #ctx [direction]="direction" [menuItems]="menuItems" [menuAnchorTemplate]="menuAnchorTemplate">
+    </ngg-context-menu>
+
+    <ng-template #menuAnchorTemplate>
+        Menu
+        <i class="sg-icon sg-icon-ellipsis"></i>
+    </ng-template>
+    `,
+})
+
+export const WithLabel = WithLabelTemplate.bind({})
+WithLabel.args = {
+  direction: 'rtl',
+  menuItems: [
+    { label: 'Key 1', value: 'option1' },
+    { label: 'Key 2', value: 'option2' },
+    { label: 'Key 3', value: 'option3' },
+  ],
+}
+
+export const RightToLeft = Template.bind({})
+RightToLeft.args = {
+  direction: 'rtl',
+  menuItems: [
+    { label: 'Key 1', value: 'option1' },
+    { label: 'Key 2', value: 'option2' },
+    { label: 'Key 3', value: 'option3' },
+  ],
+}
+
+const CustomTemplate: StoryFn<NggContextMenuComponent> = (args) => ({
+  component: NggContextMenuComponent,
+  props: args,
+  template: `
+    <ngg-context-menu #ctx [direction]="direction" [menuItems]="menuItems" [menuItemTemplate]="menuItemTemplate" [menuAnchorTemplate]="menuAnchorTemplate">
+    </ngg-context-menu>
+
+    <ng-template #menuAnchorTemplate>
+      <div>
+        <span>Click me!</span>
+      </div>
+    </ng-template>
+
+    <ng-template #menuItemTemplate let-menuItem>
+      <div
+        style="display: flex; justify-content: space-between; align-items: center; min-width: 7rem;"
+        [style.color]="(menuItem.value === 'delete') ? '#9F000A' : 'inherit'"
+      >
+        {{ menuItem.label }}
+        <svg *ngIf="menuItem.value === 'delete'" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M13.375 17.5H14.125C14.2245 17.5 14.3198 17.4605 14.3902 17.3902C14.4605 17.3198 14.5 17.2245 14.5 17.125V10.375C14.5 10.2755 14.4605 10.1802 14.3902 10.1098C14.3198 10.0395 14.2245 10 14.125 10H13.375C13.2755 10 13.1802 10.0395 13.1098 10.1098C13.0395 10.1802 13 10.2755 13 10.375V17.125C13 17.2245 13.0395 17.3198 13.1098 17.3902C13.1802 17.4605 13.2755 17.5 13.375 17.5ZM18.5 7H15.9247L14.8622 5.22813C14.7288 5.00594 14.5402 4.82209 14.3147 4.69449C14.0892 4.56688 13.8344 4.49988 13.5753 4.5H10.4247C10.1657 4.49998 9.91106 4.56704 9.68566 4.69464C9.46025 4.82224 9.27172 5.00603 9.13844 5.22813L8.07531 7H5.5C5.36739 7 5.24021 7.05268 5.14645 7.14645C5.05268 7.24022 5 7.36739 5 7.5V8C5 8.13261 5.05268 8.25979 5.14645 8.35355C5.24021 8.44732 5.36739 8.5 5.5 8.5H6V19C6 19.3978 6.15804 19.7794 6.43934 20.0607C6.72064 20.342 7.10218 20.5 7.5 20.5H16.5C16.8978 20.5 17.2794 20.342 17.5607 20.0607C17.842 19.7794 18 19.3978 18 19V8.5H18.5C18.6326 8.5 18.7598 8.44732 18.8536 8.35355C18.9473 8.25979 19 8.13261 19 8V7.5C19 7.36739 18.9473 7.24022 18.8536 7.14645C18.7598 7.05268 18.6326 7 18.5 7ZM10.37 6.09094C10.3867 6.06312 10.4104 6.04012 10.4386 6.02418C10.4669 6.00824 10.4988 5.99991 10.5312 6H13.4688C13.5011 5.99996 13.533 6.00832 13.5612 6.02426C13.5894 6.04019 13.613 6.06317 13.6297 6.09094L14.1753 7H9.82469L10.37 6.09094ZM16.5 19H7.5V8.5H16.5V19ZM9.875 17.5H10.625C10.7245 17.5 10.8198 17.4605 10.8902 17.3902C10.9605 17.3198 11 17.2245 11 17.125V10.375C11 10.2755 10.9605 10.1802 10.8902 10.1098C10.8198 10.0395 10.7245 10 10.625 10H9.875C9.77554 10 9.68016 10.0395 9.60984 10.1098C9.53951 10.1802 9.5 10.2755 9.5 10.375V17.125C9.5 17.2245 9.53951 17.3198 9.60984 17.3902C9.68016 17.4605 9.77554 17.5 9.875 17.5Z" fill="#9F000A"/>
+        </svg>
+      </div>
+    </ng-template>
+    `,
+})
+
+export const CustomTemplateDefault = CustomTemplate.bind({})
+CustomTemplateDefault.args = {
+  direction: 'rtl',
+  menuItems: [
+    { label: 'Key 1', value: 'option1' },
+    { label: 'Key 2', value: 'option2' },
+    { label: 'Delete', value: 'delete' },
+  ],
+}
+
+const TemplatePositionRelative: StoryFn<NggContextMenuComponent> = (args) => ({
+  component: NggContextMenuComponent,
+  props: args,
+  template: `
+  <div style="position: relative; width: 50%; margin: 20px auto;">
+    <div style="display:flex;justify-content:space-between;">
+      <ngg-context-menu #ctx [direction]="direction" [menuItems]="menuItems"></ngg-context-menu>
+      <ngg-context-menu #ctx [direction]="direction" [menuItems]="menuItems"></ngg-context-menu>
+      <ngg-context-menu #ctx [direction]="direction" [menuItems]="menuItems"></ngg-context-menu>
+    </div>
+  </div>
+  `,
+})
+
+export const PositionRelative = TemplatePositionRelative.bind({})
+PositionRelative.args = {
+  direction: 'ltr',
+  menuItems: [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+  ],
+}

package/src/lib/context-menu/documentation.mdx

@@ -0,0 +1,96 @@
+import { Canvas, Story, ArgsTable, Meta, Markdown } from '@storybook/addon-docs'
+import { NggContextMenuComponent } from './context-menu.component'
+import * as Stories from './context-menu.stories.ts'
+
+<Meta of={Stories} />
+
+# Context Menu
+
+[Source code](https://github.com/seb-oss/green/tree/main/libs/angular/src/lib/context-menu)
+&nbsp;|&nbsp;
+[Usage guidelines](https://designlibrary.sebgroup.com/components/component-moremenu)
+
+## Overview
+
+The context menu is a clickable button that opens a menu where you can find the action connected to an area or item. This component uses the [Green Core Context Menu](https://github.com/seb-oss/green/tree/main/libs/core/src/components/context-menu) component under the hood.
+
+## Importing module
+
+If you're only using the NggContextMenuComponent component, you just need to import the `NggContextMenuModule`.
+
+```typescript
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { NggContextMenuModule } from '@sebgroup/green-angular/src/lib/context-menu'
+
+import { AppComponent } from './app.component'
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, NggContextMenuModule],
+  exports: [],
+})
+export class AppModule {}
+```
+
+Then use the following in your templates to use the component:
+
+```html
+<ngg-context-menu
+  [direction]="rtl"
+  [menuItems]="menuItems"
+  (contextMenuItemClicked)="onItemClick($event)"
+></ngg-context-menu>
+```
+
+## Examples
+
+### Default
+
+<Canvas of={Stories.Default} />
+
+### With label
+
+<Canvas of={Stories.WithLabel} />
+
+### Right to left
+
+<Canvas of={Stories.RightToLeft} />
+
+### Custom template
+
+You can alter the look of a menu item by providing a custom template to the `menuItemTemplate`input. The template will be provided with the `item` object as context. You can also alter what's should be rendered in the button by providing a custom template to the `menuAnchorTemplate` input.
+
+<Canvas of={Stories.CustomTemplateDefault} />
+
+### Relative position
+
+<Canvas of={Stories.PositionRelative} />
+
+## Component API
+
+### Inputs
+
+<Markdown>{`
+| Input (attribute)  | Description                                    | Default |
+| :----------------- | :--------------------------------------------- | :------ |
+| direction          | Which side to open the menu to 'ltr' or 'rtl'. | ltr     |
+| menuItemTemplate   | Template to user for context menu item.        | default |
+| menuAnchorTemplate | Template to user for context menu button.      | default |
+| menuItems          | Uses DropdownOption interface                  | default |
+`}</Markdown>
+
+<Markdown>{`
+| Input (attribute) | Description                                                          | Default |
+| :---------------- | :------------------------------------------------------------------- | :------ |
+| label             | Which key to use as value.                                           | \`value\` |
+| value             | Which key to use as display value when selected and in options list. | \`label\` |
+`}</Markdown>
+
+### Outputs
+
+<Markdown>{`
+| Event                  | Description                                                                                 |
+| :--------------------- | :------------------------------------------------------------------------------------------ |
+| contextMenuItemClicked | Event emitted when one of the items are click. The clicked item is supplied to the handler. |
+`}</Markdown>

package/src/lib/context-menu/index.ts

@@ -0,0 +1,2 @@
+export * from './context-menu.component'
+export * from './context-menu.module'

package/src/lib/context-menu/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

package/src/lib/datepicker/datepicker.component.html

@@ -0,0 +1,22 @@
+<div class="form-group">
+  <gds-datepicker
+    *nggCoreElement
+    [attr.id]="id"
+    [label]="label"
+    [value]="value"
+    (change)="onDateChange($event)"
+    [invalid]="isValid === false"
+    [min]="min"
+    [max]="max"
+    [showWeekNumbers]="showWeekNumbers"
+    [dateformat]="dateFormat"
+    [size]="size === 'small' ? 'small' : 'large'"
+    [hideLabel]="hideLabel"
+    [disabledWeekends]="disabledWeekends"
+    [disabledDates]="disabledDates"
+  >
+    <span slot="message">
+      <ng-content select="[data-form-info]"></ng-content>
+    </span>
+  </gds-datepicker>
+</div>

package/src/lib/datepicker/datepicker.component.ts

@@ -0,0 +1,182 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR,
+  ValidationErrors,
+  ValidatorFn,
+} from '@angular/forms'
+import { endOfDay, startOfDay } from 'date-fns'
+
+import { randomId } from '@sebgroup/extract'
+import { GdsDatepicker } from '@sebgroup/green-core/components/datepicker/datepicker.component.js'
+import * as DatepickerTransStyles from '@sebgroup/green-core/components/datepicker/datepicker.trans.styles.js'
+
+export interface Attributes {
+  id?: string
+  role?: string
+  style?: CSSStyleDeclaration
+  tabIndex?: number
+}
+
+export interface ElementProps {
+  attributes: Attributes
+  classes: string[]
+}
+
+export interface DatepickerOptions {
+  label?: string
+  currentDate?: Date | string
+  selectedDate?: Date | string
+  showWeeks?: boolean
+  minDate?: Date
+  maxDate?: Date
+  dateFormat?: string
+  onChange?: (selectedDate: Date) => void
+}
+
+@Component({
+  selector: 'ngg-datepicker',
+  templateUrl: 'datepicker.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: NggDatepickerComponent,
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NggDatepickerComponent
+  implements ControlValueAccessor, AfterViewInit
+{
+  @Input() size?: 'small' | 'medium'
+  @Input() hideLabel?: boolean
+  @Input() disabledWeekends?: boolean
+  @Input() disabledDates?: Date[]
+
+  @Input()
+  get options(): DatepickerOptions {
+    return <DatepickerOptions>this._options
+  }
+  set options(value: DatepickerOptions) {
+    this._options = value
+  }
+
+  get showWeekNumbers(): boolean {
+    return this.options?.showWeeks ?? false
+  }
+
+  get dateFormat(): string {
+    return this.options?.dateFormat ?? 'y-m-d'
+  }
+
+  @Input()
+  get value(): string | Date | undefined {
+    return this._value
+  }
+  set value(newValue: string | Date | undefined) {
+    if (typeof newValue === 'string') {
+      newValue = new Date(newValue)
+    }
+    if (newValue !== this._value) {
+      this._value = newValue || undefined
+    }
+  }
+
+  @Input() id?: string = randomId()
+  @Input() label?: string
+  @Input() isValid: boolean | null = null
+  @Output() readonly valueChange: EventEmitter<any> = new EventEmitter<any>()
+
+  onChangeFn?: (value: any) => void
+  onTouchedFn?: any
+
+  _value: Date | undefined
+  private _options?: DatepickerOptions
+
+  get min(): Date | undefined {
+    const minDate = this.options?.minDate
+    return minDate ? minDate : new Date(new Date().getFullYear() - 10, 0, 1)
+  }
+
+  get max(): Date | undefined {
+    const maxDate = this.options?.maxDate
+    return maxDate ? maxDate : new Date(new Date().getFullYear() + 10, 0, 1)
+  }
+
+  constructor(private _cdr: ChangeDetectorRef) {
+    GdsDatepicker.define()
+    DatepickerTransStyles.register()
+  }
+
+  writeValue(value: any): void {
+    this.value = value
+    this._cdr.detectChanges()
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChangeFn = fn
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouchedFn = fn
+  }
+
+  onDateChange(evt: Event) {
+    const target = evt.target as GdsDatepicker
+
+    this.value = target.value
+
+    this.valueChange.emit(target.value)
+    this.onChangeFn && this.onChangeFn(target.value)
+  }
+
+  ngAfterViewInit(): void {
+    this._cdr.detectChanges()
+  }
+}
+
+export function dateValidator(dates?: { min?: Date; max?: Date }): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value
+    if (!value) {
+      return null
+    }
+    const newDate = new Date(value)
+    const isValidDate = !isNaN(newDate.getTime())
+    if (!isValidDate) {
+      return { validDate: true }
+    }
+
+    const validMinDate = dates?.min ? newDate >= startOfDay(dates.min) : true
+    const validMaxDate = dates?.max ? newDate <= endOfDay(dates.max) : true
+
+    if (!validMinDate && dates?.min) {
+      return {
+        validDate: {
+          minDate: startOfDay(dates.min),
+          actualDate: newDate,
+        },
+      }
+    }
+    if (!validMaxDate && dates?.max) {
+      return {
+        validDate: {
+          maxDate: endOfDay(dates.max),
+          actualDate: newDate,
+        },
+      }
+    }
+
+    return null
+  }
+}

package/src/lib/datepicker/datepicker.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common'
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'
+
+import { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'
+import { NggDatepickerComponent } from './datepicker.component'
+
+@NgModule({
+  declarations: [NggDatepickerComponent],
+  imports: [CommonModule, NggCoreWrapperModule],
+  exports: [NggDatepickerComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NggDatepickerModule {}

package/src/lib/datepicker/datepicker.stories.ts

@@ -0,0 +1,147 @@
+/* eslint no-console: "off" */
+// Datepicker.stories.ts
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms'
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'
+import { startOfYear, subYears } from 'date-fns'
+
+import { dateValidator, NggDatepickerComponent } from './datepicker.component'
+import { NggDatepickerModule } from './datepicker.module'
+
+export default {
+  title: 'Components/Datepicker',
+  component: NggDatepickerComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [FormsModule, ReactiveFormsModule, NggDatepickerModule],
+    }),
+  ],
+  parameters: {
+    componentIds: ['component-datepicker'],
+  },
+  // More on argTypes: https://storybook.js.org/docs/angular/api/argtypes
+  argTypes: {
+    value: {
+      control: 'date',
+    },
+    options: {
+      control: {
+        type: 'object',
+      },
+    },
+  },
+} as Meta<NggDatepickerComponent>
+
+const Template: StoryFn<NggDatepickerComponent> = (args) => ({
+  props: args,
+})
+
+export const Simple = Template.bind({})
+Simple.args = {
+  value: '10/10/2021',
+  label: 'Date',
+}
+
+export const CustomOptions = Template.bind({})
+CustomOptions.args = {
+  label: 'Birthday',
+  disabledWeekends: true,
+  disabledDates: [new Date(2024, 1, 6), new Date(2023, 12, 4)],
+  options: {
+    minDate: startOfYear(subYears(new Date(), 100)),
+    maxDate: new Date(),
+    showWeeks: true,
+    dateFormat: 'd/m/y',
+  },
+}
+
+const FormControlTemplate: StoryFn<NggDatepickerComponent> = (args) => {
+  const validationForm = new FormGroup({
+    date: new FormControl(undefined, [
+      Validators.required,
+      dateValidator({
+        min: args.options?.minDate,
+        max: args.options?.maxDate,
+      }),
+    ]),
+  })
+
+  const save = (form: any) => {
+    console.log('Saved!', form)
+  }
+
+  return {
+    component: NggDatepickerComponent,
+    template: `
+<form [formGroup]="validationForm" #ngForm="ngForm" (submit)="save(validationForm.value)">
+  <ng-container *ngIf="validationForm.get('date') as date">
+    <ngg-datepicker
+      formControlName="date"
+      label="Date"
+      [isValid]="ngForm.submitted ? date.valid : null"
+      [options]="options"
+    >
+      <!-- Hint text when not submitted -->
+      <ng-container data-form-info *ngIf="!ngForm['submitted']"
+        >Select date</ng-container
+      >
+      <ng-container data-form-info *ngIf="ngForm['submitted']">
+        <!-- Text when form control contains one or more errors -->
+        <ng-container *ngIf="date.errors as errors">
+          <!-- Text for each error (only one will be displayed at a time) -->
+          <ng-container *ngIf="errors['required']">Select a date</ng-container>
+          <ng-container *ngIf="errors['validDate'] === true"
+            >Enter valid date</ng-container
+          >
+          <ng-container
+            *ngIf="errors['validDate'] && errors['validDate']['minDate']"
+            >Enter date after
+            {{
+              errors['validDate']['minDate'] | date: 'shortDate'
+            }}</ng-container>
+          <ng-container
+            *ngIf="errors['validDate'] && errors['validDate']['maxDate']"
+            >Enter date before
+            {{
+              errors['validDate']['maxDate'] | date: 'shortDate'
+            }}</ng-container>
+        </ng-container>
+      </ng-container>
+    </ngg-datepicker>
+  </ng-container>
+  <button type="reset" (click)="ngForm.reset()">Reset</button>
+  <button class="ms-3" type="submit" [disabled]="ngForm.submitted && validationForm.invalid">
+    Save
+  </button>
+  <br/>
+  <code>{{validationForm.value | json}}</code>
+  <h5 class="mb-0">Errors</h5>
+  <code>
+    <div *ngFor="let f of validationForm?.controls | keyvalue">
+      {{ f.key }}:{{ f.value.errors | json }}
+    </div>
+  </code>
+</form>
+    `,
+    props: {
+      ...args,
+      validationForm,
+      save,
+    },
+  }
+}
+
+export const Form = FormControlTemplate.bind({})
+Form.args = {
+  label: 'Birthday',
+  options: {
+    minDate: startOfYear(subYears(new Date(), 100)),
+    maxDate: new Date(),
+    showWeeks: true,
+  },
+}