@design-system-rte/angular 0.4.4 → 0.5.0

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

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+export declare class RadioButtonComponent {
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly groupName: import("@angular/core").InputSignal<string>;
+    readonly showLabel: import("@angular/core").InputSignal<boolean>;
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    readonly error: import("@angular/core").InputSignal<boolean>;
+    readonly readOnly: import("@angular/core").InputSignal<boolean>;
+    labelSize: number;
+    readonly isDisplayed: import("@angular/core").Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "rte-radio-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "groupName": { "alias": "groupName"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,18 @@
+import * as i0 from "@angular/core";
+export declare class RadioButtonGroupComponent {
+    readonly groupName: import("@angular/core").InputSignal<string>;
+    readonly items: import("@angular/core").InputSignal<string[]>;
+    readonly direction: import("@angular/core").InputSignal<string>;
+    readonly showItemsLabel: import("@angular/core").InputSignal<boolean>;
+    readonly groupTitle: import("@angular/core").InputSignal<string>;
+    readonly showGroupTitle: import("@angular/core").InputSignal<boolean>;
+    readonly groupHelpText: import("@angular/core").InputSignal<string>;
+    readonly showHelpText: import("@angular/core").InputSignal<boolean>;
+    readonly errorMessage: import("@angular/core").InputSignal<string>;
+    readonly error: import("@angular/core").InputSignal<boolean>;
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    readonly readOnly: import("@angular/core").InputSignal<boolean>;
+    readonly 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>;
+}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@design-system-rte/angular",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "Angular components for the Design System RTE",
+  "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -14,8 +15,18 @@
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
-  "scripts": {
-    "prepack": "ng build ds-rte-lib",
-    "pack": "npm publish ../dist"
+  "private": 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/CHANGELOG.md

@@ -1,25 +0,0 @@
-# @design-system-rte/angular
-
-## 0.4.4
-
-### Patch Changes
-
-- Bump to test changeset
-
-## 0.4.3
-
-### Patch Changes
-
-- Bump version to test changeset
-
-## 0.4.2
-
-### Patch Changes
-
-- Test of patch bump
-
-## 0.4.1
-
-### Patch Changes
-
-- d6dd2fb: test changesets for Angular

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,10 +0,0 @@
-<button
-    class="rte-button {{ variant() }} size-{{ size() }}"
-    [attr.aria-label]="ariaLabel()"
-    [attr.aria-labelledby]="ariaLabelledBy()"
-    [attr.type]="buttonType()"
-    [disabled]="disabled()"
-    (click)="onClick($event)"
->
-    <span class="rte-button-label">{{ label() }}</span>
-</button>

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

@@ -1,154 +0,0 @@
-@use '@design-system-rte/core/design-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;
-        }
-    }
-
-    &.primary {
-        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 $width-xs var(--border-disabled);
-            color: var(--content-disabled);
-            box-shadow: none;
-            cursor: default;
-        }
-    }
-
-    &.secondary {
-        background: var(--background-default);
-        border: solid $width-xs var(--border-brand-default);
-        color: var(--content-brand-default);
-
-        &:hover {
-            background: var(--background-brand-inverse-hover);
-        }
-
-        &:active {
-            background: var(--background-brand-inverse-pressed);
-        }
-
-        &:disabled {
-            background: var(--background-disabled);
-            border: solid $width-xs 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-press);
-        }
-
-        &: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,22 +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,99 +0,0 @@
-import { ENTER_KEY, TAB_KEY, SPACE_KEY } from "@design-system-rte/core/constants/keyboard.constants";
-import type { Meta, StoryObj } from "@storybook/angular";
-import { fn, userEvent, within, expect } from "@storybook/test";
-
-import { ButtonComponent } from "./button.component";
-
-const meta: Meta<ButtonComponent> = {
-  title: "Button",
-  component: ButtonComponent,
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["primary", "secondary", "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: "primary",
-    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="primary"
-          data-testid="small-button"
-          />
-        <rte-button
-          size="m"
-          label="Medium"
-          variant="primary"
-          data-testid="medium-button"
-          />
-          <rte-button
-          size="l"
-          label="Large"
-          variant="primary"
-          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_KEY);
-    expect(button).toHaveFocus();
-    await userEvent.keyboard(ENTER_KEY);
-    await userEvent.keyboard(SPACE_KEY);
-    expect(mockFn).toHaveBeenCalledTimes(2);
-    button.blur();
-  },
-};

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

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

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

@@ -1,31 +0,0 @@
-    <div class="rte-checkbox-container">
-        <input
-            type="checkbox"
-            class="rte-checkbox"
-            [id]="id()"
-            [value]="value()"
-            [ngClass]="{'error': error(), 'read-only': readOnly()}"
-            [disabled]="disabled()"
-            [indeterminate]="indeterminate()"
-            [checked]="checked()"
-            (keydown)="onKeydown($event)"
-        />
-            <rte-icon class="rte-checkbox-icons rte-checkbox-icon-selected" name="check-small" [size]="16"/> 
-            <rte-icon class="rte-checkbox-icons rte-checkbox-icon-indeterminated" name="check-indeterminate" [size]="16" /> 
-        <div class="rte-checkbox-text-container">
-            <label 
-            *ngIf="showLabel()" 
-            class="rte-checkbox-label" 
-            [for]="id()"
-            [ngClass]="{
-                'error': error(),
-                'read-only': readOnly(),
-                'disabled': disabled()
-            }"
-            >
-                {{ label() }}
-            </label>
-            <p class="rte-checkbox-description">{{ description() }}</p>
-            <p *ngIf="error() && errorMessage()" class="rte-checkbox-error">{{ errorMessage() }}</p>
-        </div>
-    </div>

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

@@ -1,176 +0,0 @@
-@use '@design-system-rte/core/design-tokens/main.scss' as *;
-
-@mixin checked-indeterminate-style {
-  border: 1px solid var(--content-brand-default);
-  background: var(--background-brand-default);
-
-  &:hover {
-    &:not(:disabled):not(:active)::before {
-      opacity: $opacity-20;
-      background: var(--background-brand-default);
-    }
-  }
-
-  &:disabled {
-    border: 1px solid var(--content-disabled);
-    background: var(--background-disabled);
-
-    ~.rte-checkbox-icons {
-      color: var(--content-disabled);
-    }
-  }
-
-  &.error {
-    background: var(--background-danger-default);
-  }
-}
-
-.rte-checkbox-container {
-  display: flex;
-  gap: $positive-spacing-150;
-
-  .rte-checkbox {
-    appearance: none;
-    display: flex;
-    width: 16px;
-    height: 16px;
-    border-radius: $radius-xs;
-    border: 1px solid var(--content-tertiary);
-    opacity: $opacity-100;
-    background: var(--background-default);
-    align-items: center;
-    justify-content: center;
-    margin: $positive-spacing_050 0;
-
-    &::before {
-      content: '';
-      display: none;
-      position: absolute;
-      border-radius: $radius-pill;
-      background: var(--background-hover);
-      width: 32px;
-      height: 32px;
-      z-index: -1;
-    }
-
-    &:active::before {
-      opacity: $opacity-100;
-      transform: scale(0);
-      transition: transform 0s, opacity 0s;
-    }
-
-    &:focus-visible {
-      outline: 1px solid var(--border-brand-focused);
-      outline-offset: 4px;
-    }
-
-    &:hover {
-      cursor: pointer;
-
-      &:not(:disabled)::before {
-        display: inline-block;
-      }
-
-      &:not(:disabled):not(:active)::before {
-        opacity: $opacity-50;
-        transition: transform 0.15s ease, opacity 0.3s ease;
-      }
-    }
-
-    &:disabled {
-      cursor: default;
-      border: 1px solid var(--content-disabled);
-      background: var(--background-disabled);
-
-      ~.rte-checkbox-text-container {
-
-        label,
-        .rte-checkbox-description {
-          color: var(--content-disabled);
-        }
-      }
-    }
-
-    &:checked {
-      @include checked-indeterminate-style;
-
-      &:not(:indeterminate) {
-        ~.rte-checkbox-icon-selected {
-          display: block;
-        }
-      }
-    }
-
-    &:indeterminate {
-      @include checked-indeterminate-style;
-
-      ~.rte-checkbox-icon-indeterminated {
-        display: block;
-      }
-    }
-
-    &.read-only {
-      pointer-events: none;
-      cursor: default;
-      border: 1px solid var(--content-tertiary);
-      opacity: $opacity-100;
-      background: var(--background-disabled);
-
-      ~.rte-checkbox-text-container {
-
-        label,
-        .checkbox-description {
-          color: var(--content-tertiary);
-        }
-      }
-
-      ~.rte-checkbox-icons {
-        color: var(--content-tertiary);
-      }
-
-      &.error {
-        border: 1px solid var(--content-danger);
-        background: var(--background-disabled);
-      }
-    }
-
-    &.error {
-      border: 1px solid var(--content-danger);
-      background: var(--background-default);
-
-      &:hover {
-        &:not(:disabled):not(:active)::before {
-          opacity: $opacity-20;
-          background: var(--background-danger-hover);
-        }
-      }
-    }
-  }
-
-  .rte-checkbox-text-container {
-    label {
-      @include typography-text-l;
-    }
-
-    .rte-checkbox-description {
-      @include typography-text-s;
-      margin: 0;
-      color: var(--content-tertiary);
-    }
-
-    .rte-checkbox-error {
-      @include typography-checkbox-error;
-      margin: 0;
-      color: var(--content-danger);
-    }
-  }
-
-  .rte-checkbox-icons {
-    display: none;
-    z-index: 1;
-    pointer-events: none;
-    transform: translateY(4px);
-    position: absolute;
-    color: white;
-  }
-}