@design-system-rte/angular 0.1.1-rc7 → 0.2.0-rc2

package/lib/components/radio-button-group/radio-button-group.component.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+export declare class RadioButtonGroupComponent {
+    groupName: import("@angular/core").InputSignal<string>;
+    items: import("@angular/core").InputSignal<string[]>;
+    direction: import("@angular/core").InputSignal<string>;
+    showItemsLabel: import("@angular/core").InputSignal<boolean>;
+    groupTitle: import("@angular/core").InputSignal<string>;
+    showGroupTitle: import("@angular/core").InputSignal<boolean>;
+    groupHelpText: import("@angular/core").InputSignal<string>;
+    showHelpText: import("@angular/core").InputSignal<boolean>;
+    errorMessage: import("@angular/core").InputSignal<string>;
+    error: import("@angular/core").InputSignal<boolean>;
+    disabled: import("@angular/core").InputSignal<boolean>;
+    readOnly: import("@angular/core").InputSignal<boolean>;
+    isDisplayed: import("@angular/core").Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonGroupComponent, "rte-radio-button-group", never, { "groupName": { "alias": "groupName"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "showItemsLabel": { "alias": "showItemsLabel"; "required": false; "isSignal": true; }; "groupTitle": { "alias": "groupTitle"; "required": false; "isSignal": true; }; "showGroupTitle": { "alias": "showGroupTitle"; "required": false; "isSignal": true; }; "groupHelpText": { "alias": "groupHelpText"; "required": false; "isSignal": true; }; "showHelpText": { "alias": "showHelpText"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=radio-button-group.component.d.ts.map

package/lib/components/radio-button-group/radio-button-group.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button-group.component.d.ts","sourceRoot":"","sources":["../../../../../projects/ds-rte-lib/src/lib/components/radio-button-group/radio-button-group.component.ts"],"names":[],"mappings":";AAIA,qBAQa,yBAAyB;IAClC,SAAS,8CAAa;IACtB,KAAK,gDAAuB;IAC5B,SAAS,8CAAuB;IAChC,cAAc,+CAAe;IAC7B,UAAU,8CAAa;IACvB,cAAc,+CAAgB;IAC9B,aAAa,8CAAa;IAC1B,YAAY,+CAAgB;IAC5B,YAAY,8CAAa;IACzB,KAAK,+CAAgB;IACrB,QAAQ,+CAAgB;IACxB,QAAQ,+CAAgB;IAExB,WAAW,0CAAsD;yCAdxD,yBAAyB;2CAAzB,yBAAyB;CAgBrC"}

package/package.json

@@ -1,21 +1,27 @@
 {
   "name": "@design-system-rte/angular",
-  "version": "0.1.1-rc7",
+  "version": "0.2.0-rc2",
+  "description": "Angular components for the Design System RTE",
   "peerDependencies": {
     "@angular/common": "^17.3.0",
-    "@angular/core": "^17.3.0",
-    "@angular/animations": "^17.3.0",
-    "@angular/compiler": "^17.3.0",
-    "@angular/forms": "^17.3.0",
-    "@angular/platform-browser": "^17.3.0",
-    "@angular/platform-browser-dynamic": "^17.3.0",
-    "@angular/router": "^17.3.0",
-    "rxjs": "~7.8.0",
-    "zone.js": "~0.14.3"
+    "@angular/core": "^17.3.0"
   },
   "dependencies": {
     "@design-system-rte/core": "^0.1.2-rc3",
     "tslib": "^2.3.0"
   },
-  "sideEffects": false
-}
+  "sideEffects": false,
+  "module": "fesm2022/design-system-rte-angular.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/design-system-rte-angular.mjs",
+      "esm": "./esm2022/design-system-rte-angular.mjs",
+      "default": "./fesm2022/design-system-rte-angular.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,9 @@
+export * from './lib/components/button/button.component';
+export * from './lib/components/grid/grid.directive';
+export * from './lib/components/grid/col/col.directive';
+export * from './lib/components/link/link.component';
+export * from './lib/components/radio-button/radio-button.component';
+export * from './lib/components/radio-button-group/radio-button-group.component';
+export * from './lib/components/checkbox/checkbox.component';
+export * from './lib/components/checkbox-group/checkbox-group.component';
+//# sourceMappingURL=public-api.d.ts.map

package/public-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../projects/ds-rte-lib/src/public-api.ts"],"names":[],"mappings":"AAIA,cAAc,0CAA0C,CAAC;AACzD,cAAc,sCAAsC,CAAC;AACrD,cAAc,yCAAyC,CAAC;AACxD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sDAAsD,CAAC;AACrE,cAAc,kEAAkE,CAAC;AACjF,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0DAA0D,CAAC"}

package/ng-package.json

@@ -1,10 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/lib",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  },
-  "allowedNonPeerDependencies": [
-    "@design-system-rte/core"
-  ]
-}

package/src/lib/components/button/button.component.html

@@ -1,7 +0,0 @@
-<button
-    class="rte-button {{ variant() }} size-{{ size() }}"
-    [disabled]="disabled()"
-    (click)="onClick($event)"
->
-    <span class="rte-button-label">{{ label() }}</span>
-</button>

package/src/lib/components/button/button.component.scss

@@ -1,156 +0,0 @@
-@use '@design-system-rte/core/tokens/main.scss' as *;
-
-.rte-button {
-    align-items: center;
-    cursor: pointer;
-    display: inline-flex;
-    flex-shrink: 0;
-    justify-content: center;
-
-    &:focus-visible {
-        outline: 1px solid var(--border-brand-focused);
-        outline-offset: 4px;
-    }
-
-    &.size-s {
-        @include typography-button-s;
-        height: 24px;
-        border-radius: $radius-s;
-        padding: $positive-spacing_050 $positive-spacing_100;
-
-        .rte-button-label {
-            margin: 0 $positive-spacing_050;
-        }
-    }
-
-    &.size-m {
-        @include typography-button-m;
-        height: 32px;
-        border-radius: $radius-s;
-        padding: $positive-spacing_050 $positive-spacing_150;
-
-        .rte-button-label {
-            margin: 0 $positive-spacing_075;
-        }
-    }
-
-    &.size-l {
-        @include typography-button-l;
-        height: 40px;
-        border-radius: $radius-m;
-        padding: $positive-spacing_050 $positive-spacing_200;
-
-        .rte-button-label {
-            margin: 0 $positive-spacing_100;
-        }
-    }
-
-    &.filled {
-        border: var(--border-brand-default);
-        color: var(--content-primary-inverse);
-        background: var(--background-brand-default);
-
-        &:hover {
-            background: var(--background-brand-hover);
-            border: var(--background-brand-hover);
-        }
-
-        &:active {
-            background: var(--background-brand-pressed);
-        }
-
-        &:disabled {
-            background: var(--background-disabled);
-            border: solid  1px var(--border-disabled);
-            color: var(--content-disabled);
-            box-shadow: none;
-            cursor: default;
-        }
-    };
-
-    &.outlined {
-        background: var(--background-default);
-        border: solid 1px var(--border-brand-default);
-        color: var(--content-brand-default);
-
-        &:hover {
-            background: var(--background-brand-inverse-hover);
-            border: solid 1px var(--border-brand-default);
-        }
-
-        &:active {
-            border: var(--background-brand-inverse);
-            background: var(--background-brand-inverse-pressed);
-        }
-
-        &:disabled {
-            background: var(--background-disabled);
-            border: solid 1px var(--border-disabled);
-            color: var(--content-disabled);
-            cursor: default;
-        }
-    };
-
-    &.text {
-        background: transparent;
-        border: none;
-        color: var(--content-brand-default);
-
-        &:hover {
-            background: var(--background-brand-inverse-hover);
-        }
-
-        &:active {
-            background: var(--background-brand-inverse-pressed);
-        }
-
-        &:disabled {
-            background: var(--background-disabled);
-            color: var(--content-disabled);
-            cursor: default;
-        }
-    };
-
-    &.transparent {
-        background: transparent;
-        border: none;
-        color: var(--content-brand-default);
-
-        &:hover {
-            color: var(--content-brand-hover);
-        }
-
-        &:active {
-            color: var(--content-brand-pressed);
-        }
-
-        &:disabled {
-            color: var(--content-disabled);
-            box-shadow: none;
-            cursor: default;
-        }
-    };
-    
-    &.danger {
-        background: var(--background-danger-default);
-        border: none;
-        color: var(--content-primary-inverse);
-        border-radius: $radius-m;
-
-        &:hover {
-            background: var(--background-danger-hover);
-        }
-
-        &:active {
-            background: var(--background-danger-pressed);
-        }
-        
-        &:disabled {
-            background: var(--background-disabled);
-            border: var(--border-disabled);
-            color: var(--content-disabled);
-            box-shadow: none;
-            cursor: default;
-        }
-    }
-}

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

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ButtonComponent } from './button.component';
-
-describe('ButtonComponent', () => {
-  let component: ButtonComponent;
-  let fixture: ComponentFixture<ButtonComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ButtonComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(ButtonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,102 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { fn, userEvent, within, expect } from '@storybook/test';
-import { ENTER_KEY, SPACE_KEY, TAB_KEY } from '@design-system-rte/core/constants/keyboard.constants'; 
-
-import { ButtonComponent } from './button.component';
-
-
-const meta: Meta<ButtonComponent>= {
-  title: 'Button',
-  component: ButtonComponent,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['filled', 'outlined', 'text', 'transparent', 'danger'],
-    },
-    size: {
-      control: 'select',
-      options: ['s', 'm', 'l'],
-    },
-    disabled: {
-      control: 'boolean',
-    },
-  },
-  args: { click: fn() },
-};
-
-export default meta;
-type Story = StoryObj<ButtonComponent>;
-
-const mockFn = fn();
-
-export const Default: Story = {
-
-  args: {
-    variant: 'filled',
-    label: 'Button',
-    click: mockFn,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-    await userEvent.click(button);
-    expect(mockFn).toHaveBeenCalled();
-    button.blur();
-  },
-};
-
-export const Sizing: Story = {
-
-  render: (args) => ({
-    props: args,
-    template: `
-    <div style="display: flex; gap: 8px;">
-        <rte-button
-          size="s"
-          label="Small"
-          variant="filled"
-          data-testid="small-button"
-          />
-        <rte-button
-          size="m"
-          label="Medium"
-          variant="filled"
-          data-testid="medium-button"
-          />
-          <rte-button
-          size="l"
-          label="Large"
-          variant="filled"
-          data-testid="large-button"
-          />
-    </div>
-    `,
-  }),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const smallButton = canvas.getByTestId('small-button').getElementsByTagName('button')[0];
-    const mediumButton = canvas.getByTestId('medium-button').getElementsByTagName('button')[0];
-    const largeButton = canvas.getByTestId('large-button').getElementsByTagName('button')[0];
-
-    expect(smallButton.clientHeight).toBe(24);
-    expect(mediumButton.clientHeight).toBe(32);
-    expect(largeButton.clientHeight).toBe(40);
-  },
-};
-
-export const KeyboardInteraction: Story = {
-  args: {
-    ...Default.args,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-    await userEvent.keyboard(`{Tab}`);
-    expect(button).toHaveFocus();
-    await userEvent.keyboard(`{Enter}}`);
-    await userEvent.keyboard(`{ }`);
-    expect(mockFn).toHaveBeenCalledTimes(2);
-    button.blur();
-  },
-};

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

@@ -1,25 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { ButtonSize, ButtonVariant } from '@design-system-rte/core/components/button/button.interface';
-
-@Component({
-  selector: 'rte-button',
-  standalone: true,
-  imports: [],
-  templateUrl: './button.component.html',
-  styleUrl: './button.component.scss'
-})
-export class ButtonComponent {
-
-  label = input('');
-  variant = input<ButtonVariant>('filled');
-  size = input<ButtonSize>('m');
-  disabled = input(false);
-
-  click = output<void>();
-
-  onClick(event: MouseEvent | KeyboardEvent): void {
-    event.stopPropagation();
-    this.click.emit();
-  }
-
-}

package/src/lib/components/grid/col/col.directive.ts

@@ -1,37 +0,0 @@
-import { Directive, HostBinding, input } from '@angular/core';
-
-@Directive({
-  selector: '[dsCol]',
-  standalone: true
-})
-export class ColDirective {
-
-    xxs = input<number>()
-    xs = input<number>()
-    s = input<number>()
-    m = input<number>()
-    l = input<number>()
-    xl = input<number>()  
-
-    @HostBinding ("class") 
-    get colClasses(): string {
-    return [
-      'col',
-      this.generateColumnClass('col-xxs', this.xxs()),
-      this.generateColumnClass('col-xs', this.xs()),
-      this.generateColumnClass('col-s', this.s()),
-      this.generateColumnClass('col-m', this.m()),
-      this.generateColumnClass('col-l', this.l()),
-      this.generateColumnClass('col-xl', this.xl()),
-    ]
-      .filter(Boolean)
-      .join(' ');
-  }
-
-  constructor() { }
-
-  private generateColumnClass(prefix: string, size?: number): string {
-    return size ? `${prefix}-${size}` : '';
-  }
-
-}

package/src/lib/components/grid/grid.directive.stories.ts

@@ -1,149 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { GridType } from '@design-system-rte/core/components/grid/grid.interface';
-import { componentWrapperDecorator, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { GridDirective } from './grid.directive';
-import { ColDirective } from './col/col.directive';
-
-type GridStoriesArgs = GridDirective;
-
-const COLUMN_NUMBER = 12;
-
-const meta: Meta<GridStoriesArgs>= {
-  title: 'Grid',
-  component: GridDirective,
-  tags: ['autodocs'],
-  argTypes: {
-    gridType: {
-      control: 'select',
-      defaultValue: (args: GridStoriesArgs) => args.gridType,
-      options: ['fluid', 'fixed-narrow', 'fixed-wide'],
-      description: 'The type of grid to use',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, ColDirective],
-    }),
-    componentWrapperDecorator((story) => `<div class="sb-css-grid-container">${story}</div>`)
-  ],
-};
-
-export default meta;
-type Story = StoryObj<GridStoriesArgs>;
-
-const defaultTemplate = (gridType: GridType) => {
-  return `
-        <div rte-grid 
-          [gridType]="'${gridType}'"
-          data-testid="grid"
-          >
-            <ng-container *ngFor="let item of items">
-              <div
-                dsCol
-                ></div>
-            </ng-container>
-          </div>
-    `;
-};
-
-export const Fluid: Story = {
-  args: {
-    gridType: 'fluid',
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      items: Array.from(Array(COLUMN_NUMBER)).map((_,i)=>i+1)
-    },
-    template: defaultTemplate(args.gridType),
-  }),
-};
-
-export const FixedWide: Story = {
-  args: {
-    gridType: 'fixed-wide',
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      items: Array.from(Array(COLUMN_NUMBER)).map((_,i)=>i+1)
-    },
-    template: defaultTemplate(args.gridType),
-  }),
-};
-
-export const FixedNarrow: Story = {
-  args: {
-      gridType: 'fixed-narrow',
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      items: Array.from(Array(COLUMN_NUMBER)).map((_,i)=>i+1)
-    },
-    template: defaultTemplate(args.gridType),
-  }),
-};
-
-export const ResponsiveColumns: Story = {
-  args: {
-    gridType: 'fluid',
-  },
-  render: (args) => ({
-    template:`
-        <div rte-grid 
-          [gridType]="'${args.gridType}'"
-          data-testid="grid"
-        >
-          <div dsCol [xxs]=1 [xs]=1 [s]=3 [m]=4 [l]=4 [xl]=12>
-            <div>
-              <p>xxs : Span 1 de 2</p>
-              <p>xs : Span 1 de 6</p>
-              <p>s : Span 3 de 6</p>
-            </div>
-            <div>
-              <p>m : Span 4 de 12</p>
-              <p>l : Span 4 de 12</p>
-              <p>xl : Span 12 de 12</p>
-            </div>
-          </div>
-          <div dsCol [xxs]=1 [xs]=3 [s]=3 [m]=4 [l]=8 [xl]=12>
-                  <div>
-            <p>xxs : Span 1 de 2</p>
-            <p>xs : Span 3 de 6</p>
-            <p>s : Span 3 de 6</p>
-          </div>
-          <div>
-            <p>m : Span 4 de 12</p>
-            <p>l : Span 8 de 12</p>
-            <p>xl : Span 12 de 12</p>
-          </div>
-          </div>
-          <div dsCol [xxs]=2 [xs]=2 [s]=3 [m]=4 [l]=10 [xl]=12>
-            <div>
-              <p>xxs : Span 2 de 2</p>
-              <p>xs : Span 2 de 6</p>
-              <p>s : Span 3 de 6</p>
-            </div>
-            <div>
-              <p>m : Span 4 de 12</p>
-              <p>l : Span 10 de 12</p>
-              <p>xl : Span 12 de 12</p>
-            </div>
-            </div>
-          <div dsCol [xxs]=2 [xs]=6 [s]=6 [m]=4 [l]=12 [xl]=12>
-            <div>
-              <p>xxs : Span 2 de 2</p>
-              <p>xs : Span 6 de 6</p>
-              <p>s : Span 6 de 6</p>
-            </div>
-            <div>
-              <p>m : Span 4 de 12</p>
-              <p>l : Span 12 de 12</p>
-              <p>xl : Span 12 de 12</p>
-            </div>
-          </div>
-        </div>
-    `
-  }),
-};

package/src/lib/components/grid/grid.directive.ts

@@ -1,24 +0,0 @@
-import { Directive, HostBinding, input } from '@angular/core';
-import { GridType } from '@design-system-rte/core/components/grid/grid.interface';
-
-@Directive({
-  selector: '[rte-grid]',
-  standalone: true
-})
-export class GridDirective {
-
-    gridType = input<GridType>('fluid');
-
-    @HostBinding("class")
-    get hostClasses(): string {
-      return 'grid'
-    }
-
-    @HostBinding("attr.data-gridtype")
-    get hostDataClasses(): string {
-      const variation = this.gridType();
-      return `${variation}`;
-    }
-  constructor() { }
-
-}

package/src/lib/components/link/link.component.html

@@ -1,5 +0,0 @@
-<a class="rte-link" [ngClass]="{'subtle': subtle()}" href="{{ href() }}" role="link">
-    <span class="rte-link-label">
-        {{ label() }}
-    </span>
-</a>