@sebgroup/green-angular 6.0.5 → 6.1.0-rc.20250730101610143

package/src/lib/accordion/documentation.mdx

@@ -0,0 +1,145 @@
+import { NggAccordionComponent } from './accordion.component'
+import { Canvas, Story, Markdown } from '@storybook/addon-docs'
+import { Meta } from '@storybook/blocks'
+import * as Stories from './accordion.stories.ts'
+
+<Meta of={Stories} />
+
+# Accordion
+
+Provides a way to embed content inside one or more expandable sections. Each section has a header and a subheader.
+
+## Usage
+
+Put html content within a Accordion List Item component in order to have an expandable section containing your content. Accordion List Item components can be stacked within an Accordion component with different headers and sub headers.
+It is possible to configure the Accordion component to close all other Accordion List Items when one of them is expanded.
+
+## Importing module
+
+If you're only using the Accordion component, you just need to import the `NggAccordionModule`.
+
+```typescript
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { NggAccordionModule } from '@sebgroup/green-angular/src/lib/accordion'
+
+import { AppComponent } from './app.component'
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, NggAccordionModule],
+  exports: [],
+})
+export class AppModule {}
+```
+
+## Accordion Options
+
+### Inputs
+
+<Markdown>{`
+| Input       | Type               | Description                                                                                             |
+| :---------- | :----------------- | :------------------------------------------------------------------------------------------------------ |
+| closeOthers | \`boolean\`          | Indicates if all other sections should be collapsed once one section is expanded                        |
+| expandAll   | \`Observable<void>\` | Setting this observable causes the component to collapse all sections unless closeOthers is set to true |
+`}</Markdown>
+
+## Accordion List item options
+
+### Inputs
+
+### Inputs
+
+<Markdown>{`
+| Input             | Type     | Description                                                                                                                                              |
+| :---------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| labelElementLevel | \`integer\` | What aria-level (heading level) the accordion has. Can have value 1-6. Default 2.                                                                       |
+| listItemHeader    | \`string\` | The header of the expandable section. Will always be displayed regardless if the content is collapsed or expanded                                        |
+| listItemSubHeader | \`string\` | The subheader of the expandable section. Will always be displayed with a smaller font than the header regardless if the content is collapsed or expanded |
+| expandAll         | \`string\` | The sub header of the expandable section. Will always be displayed regardless if the content is collapsed or expanded                                    |
+`}</Markdown>
+
+### Outputs
+
+<Markdown>{`
+| Event          | Description                                                                                                                     |
+| :------------- | :------------------------------------------------------------------------------------------------------------------------------ |
+| expandedChange | Event emitted when list item content is collapsed or expanded. The list item component itself is passed together with the event |
+`}</Markdown>
+
+## Examples
+
+### Simple
+
+Simple paragraph content in each section. All sections can be expanded at once since the _closeOthers_ input property is set to false.
+
+<Canvas of={Stories.Simple} />
+
+### No sub headers
+
+Simple paragraph content in each section with subheaders emitted.
+
+<Canvas of={Stories.Nosubheaders} />
+
+### Checkbox content
+
+Each section contains a set of options with checkboxes, just to illustrate that any content can be contained in each Accordion List Item. Also, expanding one section closes the others since _closeOthers_ input property is set to true.
+
+<Canvas of={Stories.Closeothers} />
+
+### Usage of expandAll input
+
+Use the expandAll observable input of the accordion component to exapand all items from code. In the example below we use a checkbox in html that triggers a function in typescript, which in turn triggers an observable that expands all sections.
+This is usefull if we want the sections to still be open even if the value of the checkbox is set back to false.
+One example of such a scenario could be if we have a "select all" checkbox outside the accordion which should check all options within each accordion list item and expand everything. Deselecting one of the options in an accordion list item should uncheck the select all checkbox but should not collapse all accordion list items.
+
+Html file:
+
+```html
+<div>
+  <input type="checkbox" (checkedChange)="selectAllAndExpandEverything()
+   label="Select all and expand everything." />
+  <ngg-accordion [expandAll]="expandAllObservable">
+    <ngg-accordion-list-item listItemHeader="First section" listItemSubHeader="The first section">
+       <div>
+          <label class="form-control">
+            <input type="checkbox" />
+            <span>Option one.</span>
+            <i></i>
+          </label>
+          <label class="form-control">
+            <input type="checkbox" />
+            <span>Option two.</span>
+            <i></i>
+          </label>
+       </div>
+    </ngg-accordion-list-item>
+    <ngg-accordion-list-item listItemHeader="Second section" listItemSubHeader="The second section">
+      <div>
+          <label class="form-control">
+            <input type="checkbox" />
+            <span>Option three.</span>
+            <i></i>
+          </label>
+       </div>
+    </ngg-accordion-list-item>
+  </ngg-accordion>
+</div>
+
+```
+
+Typescript file:
+
+```typescript
+
+public expandAllSubject: Subject<void> = new Subject<void>();
+public expandAllObservable: Observable<void> = this.expandAllSubject.asObservable();
+
+public selectAllAndExpandEverything: void {
+  // code for selecting all  options  ...
+  // ...
+
+  //expand all sections
+  this.expandAllSubject.next();
+}
+```

package/src/lib/accordion/index.ts

@@ -0,0 +1,3 @@
+export * from './accordion.component'
+export * from './accordion-list-item.component'
+export * from './accordion.module'

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

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

package/src/lib/badge/badge.component.ts

@@ -0,0 +1,66 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core'
+
+import { BadgeType } from '@sebgroup/extract'
+
+@Component({
+  // we need to disable this warning since we don't want the badge component to create a new element
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '[ngg-badge]',
+  template: `
+    <strong>
+      <ng-content></ng-content>
+    </strong>
+    <button *ngIf="isCloseable" class="close" (click)="close($event)">
+      {{ closeText }}
+      <i></i>
+    </button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NggBadgeComponent implements OnInit {
+  /** The color of the component */
+  @Input() badgeType?: BadgeType | '' = ''
+  /** Flag whether the component can be dismissed */
+  @Input() set isCloseable(value: boolean | '') {
+    this._isCloseable = value
+  }
+  get isCloseable(): boolean {
+    return this._isCloseable === '' || !!this._isCloseable
+  }
+  /** Close text */
+  @Input() closeText?: string
+  /** Custom text color */
+  @HostBinding('style.color') @Input() customColor?: string
+  /** Custom background color */
+  @HostBinding('style.background-color') @Input() customBackgroundColor?: string
+
+  @HostBinding('class') get class(): string {
+    return ['badge', this.badgeType].join(' ')
+  }
+
+  /** Callback when component is dismissed */
+  @Output() handleClose: EventEmitter<Event> = new EventEmitter()
+
+  private _isCloseable?: boolean | ''
+
+  //eslint-disable-next-line
+  constructor() {}
+
+  ngOnInit(): void {
+    if (!!this.customColor || !!this.customBackgroundColor) {
+      this.badgeType = ''
+    }
+  }
+
+  close(e: Event) {
+    this.handleClose.emit(e)
+  }
+}

package/src/lib/badge/badge.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+
+import { NggBadgeComponent } from './badge.component'
+
+@NgModule({
+  declarations: [NggBadgeComponent],
+  imports: [CommonModule],
+  exports: [NggBadgeComponent],
+})
+export class NggBadgeModule {}

package/src/lib/badge/badge.stories.ts

@@ -0,0 +1,59 @@
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'
+
+import { NggBadgeComponent } from './badge.component'
+import { NggBadgeModule } from './badge.module'
+
+export default {
+  title: 'Components/Badge',
+  component: NggBadgeComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [NggBadgeModule],
+    }),
+  ],
+  argTypes: {
+    badgeType: {
+      options: ['info', 'success', 'warning', 'danger', 'light', 'dark'],
+      control: 'radio',
+      name: 'Badge Type',
+      defaultValue: 'info',
+    },
+  },
+  parameters: {
+    componentIds: ['component-badge'],
+  },
+} as Meta<NggBadgeComponent>
+
+const Template: StoryFn<NggBadgeComponent> = (args) => ({
+  template: `
+    <span ngg-badge [badgeType]="badgeType" [customColor]="customColor" [customBackgroundColor]="customBackgroundColor">Badge</span>
+    `,
+  props: args,
+})
+
+const BadgesTemplate: StoryFn<NggBadgeComponent> = (args) => ({
+  template: `
+    <div class="d-flex flex-wrap" style="gap: 1rem;">
+      <span ngg-badge >Badge</span>
+      <span ngg-badge badgeType="info">Info</span>
+      <span ngg-badge badgeType="success">Success</span>
+      <span ngg-badge badgeType="warning">Warning</span>
+      <span ngg-badge badgeType="danger">Danger</span>
+      <span ngg-badge badgeType="light">Light</span>
+      <span ngg-badge badgeType="dark">Dark</span>
+    </div>
+    `,
+  props: args,
+})
+
+export const Multiple = BadgesTemplate.bind({})
+export const Default = Template.bind({})
+Default.args = {
+  badgeType: 'success',
+}
+
+export const Custom = Template.bind({})
+Custom.args = {
+  customColor: '#062BCC',
+  customBackgroundColor: '#E6F5FF',
+}

package/src/lib/badge/documentation.mdx

@@ -0,0 +1,79 @@
+import { NggBadgeComponent } from './badge.component'
+import { Canvas, Story, Meta, Markdown } from '@storybook/addon-docs'
+import * as Stories from './badge.stories.ts'
+
+<Meta of={Stories} />
+
+# Badge
+
+This component calls attention to a status/tag/category and highlights it from the surrounding content.
+
+## Description
+
+To display a status in an intuitive and easy way
+
+## Usage
+
+Use this component to display a status in a more prominent way than just typing out the status. Use the respective colour for alert messages.
+
+## Importing module
+
+```typescript
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { NggBadgeModule } from '@sebgroup/green-angular/src/lib/badge'
+
+import { AppComponent } from './app.component'
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, NggBadgeModule],
+  exports: [],
+})
+export class AppModule {}
+```
+
+## Badge Options
+
+<Markdown>{`
+| Input                 | Type        | Description                                                                                     |
+| :-------------------- | :---------- | :---------------------------------------------------------------------------------------------- |
+| badgeType             | \`BadgeType\` | The color of the component. Can be: \`info\`, \`success\`, \`warning\`, \`danger\`, \`light\`, and \`dark\` |
+| isCloseable           | \`boolean\`   | Flag whether the component can be dismissed                                                     |
+| closeText             | \`string\`    | Close text                                                                                      |
+| customColor           | \`string\`    | Custom text color                                                                               |
+| customBackgroundColor | \`string\`    | Custom background color                                                                         |
+`}</Markdown>
+
+### Outputs
+
+<Markdown>{`
+| Event       | Description                            |
+| :---------- | :------------------------------------- |
+| handleClose | Event emitted when badge is dismissed. |
+`}</Markdown>
+
+## Examples
+
+To use this component, simply add an `ngg-badge` directive to an HTML `span` element:
+
+```html
+<span ngg-badge badgeType="success" class="mr-2">Badge</span>
+<span ngg-badge badgeType="info" class="mr-2">Badge</span>
+<span ngg-badge badgeType="warning" class="mr-2">Badge</span>
+<span ngg-badge badgeType="danger" class="mr-2">Badge</span>
+<span ngg-badge badgeType="light" class="mr-2">Badge</span>
+<span ngg-badge badgeType="dark" class="mr-2">Badge</span>
+```
+
+### Simple Badge
+
+<Canvas of={Stories.Default} />
+
+### All badges
+
+<Canvas of={Stories.Multiple} />
+
+### Custom Badge
+
+<Canvas of={Stories.Custom} />

package/src/lib/badge/index.ts

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

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

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

package/src/lib/button/button.component.ts

@@ -0,0 +1,25 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+} from '@angular/core'
+
+import { ButtonSize, ButtonVariant } from '@sebgroup/extract'
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '[ngg-button]',
+  template: `<ng-content></ng-content>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NggButtonComponent {
+  @Input() variant?: ButtonVariant
+  @Input() size?: ButtonSize
+
+  @HostBinding('class') get classes(): string {
+    return [this.variant, this.size ? this.size : false]
+      .filter(Boolean)
+      .join(' ')
+  }
+}

package/src/lib/button/button.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+
+import { NggButtonComponent } from './button.component'
+
+@NgModule({
+  declarations: [NggButtonComponent],
+  imports: [CommonModule],
+  exports: [NggButtonComponent],
+})
+export class NggButtonModule {}

package/src/lib/button/button.stories.ts

@@ -0,0 +1,66 @@
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'
+
+import { NggButtonComponent } from './button.component'
+import { NggButtonModule } from './button.module'
+
+export default {
+  title: 'Components/Form/Button',
+  component: NggButtonComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [NggButtonModule],
+    }),
+  ],
+  parameters: {
+    componentIds: ['component-button'],
+  },
+} as Meta<NggButtonComponent>
+
+const Template: StoryFn = () => {
+  return {
+    template: `
+    <button ngg-button>Button</button>
+    `,
+  }
+}
+
+export const Default = Template.bind({})
+
+const TemplateTypes: StoryFn = () => {
+  return {
+    template: `
+    <div class="horizontal">
+      <button ngg-button type="button">Button</button>
+      <button ngg-button type="submit">Submit</button>
+      <button ngg-button type="reset">Reset</button>
+    </div>
+    `,
+  }
+}
+export const Types = TemplateTypes.bind({})
+
+const TemplateVariants: StoryFn = () => {
+  return {
+    template: `
+    <div class="horizontal">
+      <button ngg-button variant="primary">Primary</button>
+      <button ngg-button variant="secondary">Secondary</button>
+      <button ngg-button variant="ghost">Ghost</button>
+    </div>
+    `,
+  }
+}
+export const Variants = TemplateVariants.bind({})
+
+const TemplateSizes: StoryFn = () => {
+  return {
+    template: `
+    <div class="horizontal">
+      <button ngg-button>Default</button>
+      <button ngg-button size="small">Small</button>
+      <button ngg-button size="large">Large</button>
+    </div>
+    `,
+  }
+}
+export const Sizes = TemplateSizes.bind({})

package/src/lib/button/documentation.mdx

@@ -0,0 +1,31 @@
+import { NggButtonComponent } from './button.component'
+import { Canvas, Story, Meta } from '@storybook/addon-docs'
+import * as Stories from './button.stories.ts'
+
+<Meta of={Stories} />
+
+<style>{`
+    div[id^=story--] > div{
+        height: auto !important;
+    }
+`}</style>
+
+# Buttons
+
+Green buttons are native `<button>` elements enchanced with SEB Green styling. Apply the `ngg-button` attribute to greenify a button.
+
+{' '}
+
+<Story of={Stories.Default} />
+
+## Types
+
+<Canvas of={Stories.Types} />
+
+## Variants
+
+<Canvas of={Stories.Variants} />
+
+## Sizes
+
+<Canvas of={Stories.Sizes} />

package/src/lib/button/index.ts

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

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

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

package/src/lib/cell-table/cell-table-item.component.ts

@@ -0,0 +1,54 @@
+import { Component, Input } from '@angular/core'
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
+
+import { TableHeaderListValueType } from './cell-table.types'
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '[nggCellTableItem]',
+  template: `
+    <ng-container [ngSwitch]="valueType">
+      <span *ngSwitchCase="'string'">{{ row || '–' }}</span>
+      <span *ngSwitchCase="'number'">{{ (row | number) || '–' }}</span>
+      <span *ngSwitchCase="'datetime'">{{
+        (row | date: 'HH:mm:ss') || '–'
+      }}</span>
+      <span *ngSwitchCase="'date'">{{
+        (row | date: 'YYYY-MM-dd') || '–'
+      }}</span>
+      <span
+        *ngSwitchCase="'custom-html'"
+        [innerHtml]="transformHTML(row) || '–'"
+      ></span>
+      <span *ngSwitchCase="'sign'" [ngClass]="getSignColor(row)">{{
+        row || '–'
+      }}</span>
+      <span *ngSwitchCase="'pct'">{{ row || '–' }}</span>
+      <span *ngSwitchCase="'streamSign'" [nggSlidingUnderline]="row">{{
+        row || '–'
+      }}</span>
+      <span *ngSwitchDefault>–</span>
+    </ng-container>
+  `,
+})
+export class CellTableItemComponent {
+  @Input() row: any
+  @Input() valueType: TableHeaderListValueType = 'string'
+  @Input() id = ''
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  getSignColor = (value: string | number) => {
+    if (/[−-]/.test(String(value))) return 'text-danger'
+    else if (/[1-9]/.test(String(value))) return 'text-success'
+    return ''
+  }
+
+  transformHTML(value: string): SafeHtml {
+    if (value && value.length) {
+      return this.sanitizer.bypassSecurityTrustHtml(value)
+    } else {
+      return ''
+    }
+  }
+}

package/src/lib/cell-table/cell-table.component.html

@@ -0,0 +1,91 @@
+<div #targetElement role="table" [ngClass]="className">
+  <div class="cell-table-table d-flex flex-column">
+    <div
+      *ngFor="let row of rows; trackBy: trackByRowId"
+      (click)="handleClickRow(row)"
+      class="cell-table--row-wrapper"
+      role="rowgroup"
+      [class.is-clickable]="clickableRows"
+    >
+      <div>
+        <div #items [class.overflow-reverse]="overflowReverse">
+          <!-- Main header -->
+          <div role="row">
+            <div
+              nggCellTableItem
+              [row]="mainHeader(row).value"
+              [valueType]="getValueTypeFromMain()"
+              [attr.valueType]="getValueTypeFromMain()"
+              [attr.id]="getTableKeySelector(row)"
+              role="rowheader"
+              aria-rowspan="3"
+              aria-colspan="3"
+            ></div>
+          </div>
+          <div role="row">
+            <div class="d-flex">
+              <!-- Sub Header -->
+              <div
+                nggCellTableItem
+                class="sub-header py-0 fw-bold"
+                [row]="header.label"
+                [valueType]="getTableHeaderListValueFromNonMain(header)"
+                role="columnheader"
+                *ngFor="
+                  let header of headerNoneMain(headerList);
+                  trackBy: KeySelector
+                "
+              ></div>
+            </div>
+          </div>
+
+          <div role="row">
+            <!-- Sub Values -->
+            <div class="d-flex">
+              <div
+                nggCellTableItem
+                class="sub-value py-0"
+                [row]="row[header.tableKeySelector]"
+                [valueType]="getTableHeaderListValueFromNonMain(header)"
+                [attr.valueType]="header.valueType"
+                role="cell"
+                *ngFor="
+                  let header of headerNoneMain(headerList);
+                  trackBy: KeySelector
+                "
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        *ngIf="clickableRows"
+        role="row"
+        class="d-grid align-items-center ms-4 me-4 cell-table--arrow-container"
+      >
+        <div role="cell">
+          <div
+            role="button"
+            [attr.aria-label]="clickLabel"
+            tabindex="0"
+            [attr.aria-describedby]="getTableKeySelector(row)"
+            (keydown.enter)="handleClickRow(row)"
+          >
+            <svg
+              data-prefix="far"
+              data-icon="chevron-right"
+              class="svg-inline--fa fa-chevron-right fa-w-10"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 320 512"
+            >
+              <path
+                fill="currentColor"
+                d="M113.3 47.41l183.1 191.1c4.469 4.625 6.688 10.62 6.688 16.59s-2.219 11.97-6.688 16.59l-183.1 191.1c-9.152 9.594-24.34 9.906-33.9 .7187c-9.625-9.125-9.938-24.38-.7187-33.91l168-175.4L78.71 80.6c-9.219-9.5-8.906-24.78 .7187-33.91C88.99 37.5 104.2 37.82 113.3 47.41z"
+              ></path>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>