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

package/src/lib/datepicker/documentation.mdx

@@ -0,0 +1,188 @@
+import { Story, Meta, Canvas, Markdown } from '@storybook/addon-docs'
+import * as Stories from './datepicker.stories.ts'
+
+<Meta of={Stories} />
+
+# Datepicker
+
+## Importing module
+
+If you're only using the datepicker component, you just need to import the `NggDatepickerModule`. The example below uses reactive forms hence it needs the `ReactiveFormsModule` too.
+
+```typescript
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { AppComponent } from './app.component'
+import { ReactiveFormsModule } from '@angular/forms'
+import { NggDatepickerModule } from '@sebgroup/green-angular/src/lib/datepicker'
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, ReactiveFormsModule, NggDatepickerModule],
+  exports: [],
+})
+export class AppModule {}
+```
+
+## Datepicker
+
+NggDatepickerComponent is a form control for picking dates.
+
+It supports 2-way binding to the value property without the need for Angular forms,
+and supports all the form directives from the core FormsModule (NgModel) and ReactiveFormsModule (FormControl, FormGroup, etc.).
+
+<Story of={Stories.Simple} />
+
+## Reactive forms
+
+We recommend using <a href="https://angular.io/guide/reactive-forms" target="_blank">Reactive forms</a> in Angular together with the <a href="https://angular.io/api/forms/FormBuilder" target="_blank">From builder</a> especially
+if you're dealing with complex or dynamic forms.
+
+```html
+<form [formGroup]="reactiveForm">
+  <ngg-datepicker formControlName="date" label="Date"></ngg-datepicker>
+</form>
+```
+
+## Template-driven forms
+
+Another approach is to use <a href="https://angular.io/guide/forms" target="_blank">Template-driven forms</a> and bind value using `ngModel`.
+
+```html
+<form #dropdownForm="templateForm">
+  <ngg-datepicker [(ngModel)]="date" label="Date"></ngg-datepicker>
+</form>
+```
+
+## 2-way binding without forms
+
+If you just need a simple select without any form, validation etc. it's possible to bind the dropdown directly to a value.
+
+```html
+<ngg-datepicker [(value)]="date" label="Date"></ngg-datepicker>
+```
+
+## Inputs
+
+<Markdown>{`
+| Input (attribute) | Description                                                             | Default     |
+| :---------------- | :---------------------------------------------------------------------- | :---------- |
+| options           | \`DatepickerOptions\` for datepicker see more info below.                 | n/a         |
+| label             | Text to use as label for datepicker input.                              | n/a         |
+| id                | Id applied to datepicker elements.                                      | \`random id\` |
+| isValid           | Mark datepicker as invalid/valid.                                       | \`null\`      |
+| size              | Size of the datepicker input. Possible values are \`small\` and \`medium\`. | \`medium\`    |
+| hideLabel         | Hide the label for the datepicker input.                                | \`false\`     |
+| disabledDates     | Array of dates to disable                                               | \`[]\`        |
+| disabledWeekends  | Disable all weekends in the calendar view                               | \`false\`     |
+`}</Markdown>
+
+## DatepickerOptions
+
+<Markdown>{`
+| Option     | Description                                                                                                                                                   | Default                                |
+| :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------- |
+| showWeeks  | Show week numbers.                                                                                                                                            | \`false\`                                |
+| minDate    | Min date for datepicker, dates before this date are disabled.                                                                                                 | \`startOfYear(subYears(new Date(), 5))\` |
+| maxDate    | Max date for datepicker, dates after this date are disabled.                                                                                                  | \`endOfYear(addYears(new Date(), 5))\`   |
+| dateFormat | Date format for the input field. Use letters \`d\`, \`m\`, \`y\` to specify the order of day, month, year, separated by a delimiter. For example \`y-m-d\` or \`d/m/y\` | \`y-m-d\`                                |
+`}</Markdown>
+
+```html
+<ngg-datepicker
+  [(value)]="date"
+  label="Birthday"
+  [disabledWeekends]="true"
+  [disabledDates]="disabledDates"
+  [options]="options"
+></ngg-datepicker>
+```
+
+_Note:_ `disabledDates` and `options` in the example above are properties that you need to add in the component class.
+
+<Canvas of={Stories.CustomOptions} />
+
+## Example usage in reactive form
+
+Below is an example of how the component can be used with reactive forms and validations. The example uses a custom date validator provided by Angular Green called `validDate` which can be used like this:
+
+```ts
+validationForm = this._fb.group({
+  date: [
+    null,
+    [
+      Validators.required,
+      dateValidator({
+        min: this.options.minDate,
+        max: this.options.maxDate,
+      }),
+    ],
+  ],
+})
+```
+
+<Story of={Stories.Form} />
+
+### Markup
+
+```html
+<form [formGroup]="validationForm" #ngForm="ngForm" (submit)="save()">
+  <ng-container *ngIf="validationForm.get('date') as date">
+    <ngg-datepicker
+      formControlName="date"
+      label="Date"
+      [isValid]="ngForm.submitted ? date.valid : null"
+    >
+      <!-- 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>
+</form>
+```
+
+### Localization
+
+Localization is handled by Lit Localize in the underlying web component. You can set the locale like this:
+
+```ts
+// Import the gdsInitLocalization function from Green Core
+import { gdsInitLocalization } from '@sebgroup/green-core/localization'
+
+// Then initialize Lit Localize by calling the imported init function. This returns a `setLocale` function which you can use to set the locale.
+const { setLocale } = gdsInitLocalization()
+
+// Later in your code you can set the locale like this:
+setLocale('sv')
+```
+
+Currently, only translations for Swedish and English is built in.

package/src/lib/datepicker/index.ts

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

package/src/lib/datepicker/ng-package.json

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

package/src/lib/dropdown/documentation.mdx

@@ -0,0 +1,355 @@
+import { NggDropdownComponent } from './dropdown.component'
+import { Story, Meta, Markdown, Canvas } from '@storybook/addon-docs'
+import * as Stories from './dropdown.stories.ts'
+
+<Meta of={Stories} />
+
+# Dropdown
+
+## Importing module
+
+If you're only using the dropdown component, you just need to import the `NggDropdownModule`. The example below uses reactive forms hence it needs the `ReactiveFormsModule` too.
+
+```typescript
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { AppComponent } from './app.component'
+import { ReactiveFormsModule } from '@angular/forms'
+import { NggDropdownModule } from '@sebgroup/green-angular/src/lib/dropdown'
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, ReactiveFormsModule, NggDropdownModule],
+  exports: [],
+})
+export class AppModule {}
+```
+
+## Dropdown Select
+
+NggDropdownComponent is a form control for selecting a single or multiple values from a set of options.
+
+The dropdown supports 2-way binding to the value property without the need for Angular forms,
+and supports all the form directives from the core FormsModule (NgModel) and ReactiveFormsModule (FormControl, FormGroup, etc.).
+
+<Canvas of={Stories.Select} />
+
+## Option headings
+
+You can turn your options into option headings by adding the `heading` property to the option object.
+
+```typescript
+{
+  // ..other properties
+  options: [
+    { label: 'Lunch', heading: true },
+    { label: 'Tacos', value: 'tacos' },
+    { label: 'Pizza', value: 'pizza' },
+    { label: 'Sushi', value: 'sushi' },
+    { label: 'Dinner', heading: true },
+    { label: 'Ramen', value: 'ramen' },
+    { label: 'Tori Ramen', value: 'tori' },
+    { label: 'Tokyo Ramen', value: 'tokyo' },
+    { label: 'Kyoto Ramen', value: 'kyoto' },
+    { label: 'Sriracha Ramen', value: 'sriracha' },
+    { label: 'Kimchi Ramen', value: 'kimchi' },
+    { label: 'Hakodate Ramen', value: 'hakodate' },
+  ],
+}
+```
+
+<Canvas of={Stories.Test} />
+
+## Small dropdown
+
+You can set the size of the dropdown to small by setting the size input to `small`.
+
+<Canvas of={Stories.Small} />
+
+## Reactive forms
+
+We recommend using <a href="https://angular.io/guide/reactive-forms" target="_blank">Reactive forms</a> in Angular together with the <a href="https://angular.io/api/forms/FormBuilder" target="_blank">From builder</a> especially
+if you're dealing with complex or dynamic forms.
+
+```html
+<form [formGroup]="dropdownForm">
+  <ngg-dropdown
+    formControlName="dropdownSelect"
+    [options]="options"
+  ></ngg-dropdown>
+</form>
+```
+
+## Template-driven forms
+
+Another approach is to use <a href="https://angular.io/guide/forms" target="_blank">Template-driven forms</a>.
+
+```html
+<form #dropdownForm="ngForm">
+  <ngg-dropdown [(ngModel)]="selected" [options]="options"></ngg-dropdown>
+</form>
+```
+
+## 2-way binding without forms
+
+If you just need a simple select without any form, validation etc. it's possible to bind the dropdown directly to a value.
+
+```html
+<ngg-dropdown [(value)]="selected" [options]="options"></ngg-dropdown>
+```
+
+## Options
+
+The dropdown options should be provided as an array of objects with label and value. When a user chooses an option the value will be selected.
+
+<Canvas of={Stories.RenderWithSelectedOption} />
+
+```typescript
+const options = [
+  { label: 'Tacos', value: 'tacos' },
+  { label: 'Pizza', value: 'pizza' },
+  { label: 'Im selected', value: 'im-selected', selected: true },
+]
+```
+
+Set an initial value by assigning the `value` to the value input or form controller. Or simply make use of the optional `selected?: boolean` as in the example above.
+
+### Preselect with FormControl
+
+You can also progammatically select options by using Angular FormControls. Create a FormGroup what contains a FormControl for the dropdownStories.
+
+```typescript
+import { FormBuilder } from '@angular/forms'
+
+constructor(private _fb: FormBuilder) {}
+
+dropdownForm = this._fb.group({
+  myDropDownControlName: 'sushi',
+})
+```
+
+Then use the same control name on the dropdown component:
+
+```html
+<form [formGroup]="dropdownForm" class="horizontal">
+  <ngg-dropdown
+    [options]="options"
+    formControlName="myDropDownControlName"
+  ></ngg-dropdown>
+</form>
+```
+
+## Complex values and compare function
+
+By default, the dropdown will look for a label and value pair for the data. The following inputs can be set to alter the options if neccesary.
+
+The value does not have to be a primitive value, it can be assigned an object but it requires that a `compareWith` function is provided to uniquely identify each object. Eg:
+
+```typescript
+const options = [
+  {
+    label: 'Tacos',
+    value: {
+      id: 'tacos',
+      kitchen: 'mexican',
+    },
+  },
+  {
+    label: 'Pizza',
+    value: {
+      id: 'pizza',
+      kitchen: 'italian',
+    },
+  },
+  {
+    label: 'Sushi',
+    value: {
+      id: 'sushi',
+      kitchen: 'japanese',
+    },
+  },
+]
+
+const compareWith = (o1: any, o2: any): boolean => {
+  return o1.id === o2.id
+}
+```
+
+```html
+<ngg-dropdown
+  [(value)]="selected"
+  [options]="options"
+  [compareWith]="compareWith"
+></ngg-dropdown>
+```
+
+## Multi select
+
+Just add `multiSelect` to add support for multi select.
+
+```html
+<form [formGroup]="dropdownForm">
+  <ngg-dropdown
+    formControlName="dropdownSelect"
+    [options]="options"
+    multiSelect
+  ></ngg-dropdown>
+</form>
+```
+
+<Canvas of={Stories.MultiSelect} />
+
+## Searchable
+
+For search functionality add `searchable`. By default search will filter on 'display' provided to dropdown.
+
+```html
+<form [formGroup]="dropdownForm">
+  <ngg-dropdown
+    searchable
+    formControlName="dropdownSelect"
+    [options]="options"
+  ></ngg-dropdown>
+</form>
+```
+
+<Canvas of={Stories.Searchable} />
+
+## Custom option template
+
+Use an ng-template with the nggDropdownOption directive to provide the dropdown list with an alternative template for the list.
+
+```html
+<ngg-dropdown searchFilter="searchFilter" ...>
+  <ng-template nggDropdownOption let-option="option" let-index="index">
+    <div>
+      <div>{{ index }}. {{ option.name }}</div>
+      <div style="font-size: 0.8em">{{ option.kitchen }}</div>
+    </div>
+  </ng-template>
+</ngg-dropdown>
+```
+
+<Canvas of={Stories.CustomOption} />
+
+To be able to search in custom properties, you should provide an a search filter function.
+
+```typescript
+const searchFilter: (search, value) => ['kitchen', 'id'].some((key) => value[key].toLowerCase().includes(search.toLowerCase())),
+```
+
+## Example usage in reactive form
+
+Below is an example of how the component can be used with reactive forms and validations.
+
+<Canvas of={Stories.Form}/>
+
+### Markup
+
+```html
+<form [formGroup]="validationForm" #ngForm="ngForm" (submit)="save()">
+  <div class="form-group" *ngIf="validationForm.get('country') as dropdown">
+    <ngg-dropdown
+      label="Country"
+      [options]="(options$ | async)!"
+      formControlName="country"
+      [texts]="texts"
+      [valid]="dropdown.valid && ngForm.submitted"
+      [invalid]="dropdown.invalid && ngForm.submitted"
+    >
+      <!-- Hint text when not submitted -->
+      <ng-container data-form-info *ngIf="!ngForm['submitted']"
+        >Select country</ng-container
+      >
+      <ng-container data-form-info *ngIf="ngForm['submitted']">
+        <!-- Text when form control contains one or more errors -->
+        <ng-container *ngIf="dropdown.errors as errors">
+          <!-- Text for each error (only one will be displayed at a time) -->
+          <ng-container *ngIf="errors['required']">Select country</ng-container>
+        </ng-container>
+      </ng-container>
+    </ngg-dropdown>
+  </div>
+  <button type="submit" [disabled]="ngForm.submitted && validationForm.invalid">
+    Save
+  </button>
+</form>
+```
+
+## Example usage in reactive form with reset functionality
+
+Below is an example of reset functionality for dropdown
+
+<Canvas of={Stories.FormWithReset} />
+
+### Markup
+
+```html
+<form
+  [formGroup]="validationFormAdvance"
+  #ngForm="ngForm"
+  (submit)="save(validationFormAdvance.value)"
+>
+  <div
+    class="form-group"
+    *ngIf="validationFormAdvance.get('country') as dropdown"
+  >
+    <ngg-dropdown
+      label="Country"
+      [options]="options$ | async"
+      formControlName="country"
+      [valid]="dropdown.valid && ngForm.submitted"
+      [invalid]="dropdown.invalid && ngForm.submitted"
+    >
+      <!-- Hint text when not submitted -->
+      <ng-container data-form-info *ngIf="!ngForm['submitted']"
+        >Select country</ng-container
+      >
+      <ng-container data-form-info *ngIf="ngForm['submitted']">
+        <!-- Text when form control contains one or more errors -->
+        <ng-container *ngIf="dropdown.errors as errors">
+          <!-- Text for each error (only one will be displayed at a time) -->
+          <ng-container *ngIf="errors['required']">Select country</ng-container>
+        </ng-container>
+      </ng-container>
+    </ngg-dropdown>
+  </div>
+  <button
+    type="submit"
+    [disabled]="ngForm?.submitted && validationFormAdvance.invalid"
+  >
+    Save
+  </button>
+  <button (click)="validationFormAdvance.reset()">Reset</button>
+</form>
+```
+
+## Component API
+
+<Markdown>{`
+| Input (attribute) | Description                                                          | Default     |
+| :---------------- | :------------------------------------------------------------------- | :---------- |
+| useValue          | Which key to use as value.                                           | \`value\`     |
+| display           | Which key to use as display value when selected and in options list. | \`label\`     |
+| syncPopoverWidth? | Force the popover to have the same widtgh as the trigger             | \`undefined\` |
+| size              | Size of the dropdown.                                                | \`medium\`    |
+| hideLabel         | Hide the label.                                                      | \`false\`     |
+| maxHeight         | Max height of the dropdown.                                          | \`500\`       |
+| multiSelect       | Enable multi select.                                                 | \`false\`     |
+| searchable        | Enable search.                                                       | \`false\`     |
+| texts             | Custom texts, see table below                                        | \`Object\`    |
+`}</Markdown>
+
+### Texts input
+
+Custom texts can be set using the `texts` input which takes an object with the following keys.
+
+<Markdown>{`
+| Text               | Description                                            | Default    |
+| :----------------- | :----------------------------------------------------- | :--------- |
+| selected           | Used when multiple items are selected e.g. 5 selected. | \`selected\` |
+| placeholder        | Text to display when no option is selected.            | \`Select\`   |
+| searchPlaceholder  | Text to display in Search box.                         | \`Search\`   |
+| close              | Text for close button displayed on mobiles.            | \`Close\`    |
+| optionsDescription | Text to describe options.                              | \`Options\`  |
+`}</Markdown>

package/src/lib/dropdown/dropdown-button.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, TemplateRef } from '@angular/core'
+
+@Directive({
+  selector: '[nggDropdownButton]',
+})
+export class NggDropdownButtonDirective {
+  constructor(public templateRef: TemplateRef<unknown>) {}
+}

package/src/lib/dropdown/dropdown-option.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, TemplateRef } from '@angular/core'
+
+@Directive({
+  selector: '[nggDropdownOption]',
+})
+export class NggDropdownOptionDirective {
+  constructor(public templateRef: TemplateRef<unknown>) {}
+}

package/src/lib/dropdown/dropdown.component.html

@@ -0,0 +1,61 @@
+<div class="form-group">
+  <gds-dropdown
+    *nggCoreElement
+    #gdsDropdown
+    [value]="value"
+    [searchable]="searchable"
+    [label]="label"
+    (change)="onValueChange($event)"
+    [multiple]="multiSelect"
+    [invalid]="invalid"
+    [errorMessage]="errorMessage"
+    [compareWith]="compareWithAdapter"
+    [searchFilter]="searchFilterAdapter"
+    [syncPopoverWidth]="syncPopoverWidth"
+    [size]="size"
+    [hideLabel]="hideLabel"
+    [maxHeight]="maxHeight"
+    [disableMobileStyles]="disableMobileStyles"
+  >
+    <span slot="message" #formInfo
+      ><ng-content select="[data-form-info]"></ng-content
+    ></span>
+
+    <span slot="trigger" style="display: contents"
+      ><ng-container
+        *ngTemplateOutlet="
+          customButton?.templateRef && selectedOption
+            ? customButton!.templateRef
+            : defaultButton;
+          context: { option: selectedOption }
+        "
+      ></ng-container
+    ></span>
+
+    <ng-container *ngFor="let option of options; let index = index">
+      <ng-container *ngIf="!option.heading; else optionHeading">
+        <gds-option *nggCoreElement [value]="option[useValue]"
+          ><ng-container
+            *ngTemplateOutlet="
+              customOption?.templateRef
+                ? customOption!.templateRef
+                : defaultOption;
+              context: { option: option, index: index }
+            "
+          ></ng-container
+        ></gds-option>
+      </ng-container>
+      <ng-template #optionHeading>
+        <gds-menu-heading *nggCoreElement>{{ option.label }}</gds-menu-heading>
+      </ng-template>
+    </ng-container>
+  </gds-dropdown>
+</div>
+
+<ng-template #defaultButton let-selected="option">
+  <span class="ngg-dropdown-default-trigger">{{ texts?.select }}</span>
+</ng-template>
+
+<ng-template #defaultOption let-option="option">
+  {{ display ? option[display] : option.name }}
+</ng-template>

package/src/lib/dropdown/dropdown.component.scss

@@ -0,0 +1,6 @@
+.ngg-dropdown-default-trigger {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}