@design-system-rte/angular 0.1.1-rc7 → 0.1.1-rc8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/design-system-rte-angular.d.ts.map +1 -0
- package/esm2022/design-system-rte-angular.mjs +5 -0
- package/esm2022/lib/components/button/button.component.mjs +22 -0
- package/esm2022/public-api.mjs +5 -0
- package/fesm2022/design-system-rte-angular.mjs +33 -0
- package/fesm2022/design-system-rte-angular.mjs.map +1 -0
- package/index.d.ts +6 -0
- package/lib/components/button/button.component.d.ts +13 -0
- package/lib/components/button/button.component.d.ts.map +1 -0
- package/package.json +16 -3
- package/{src/public-api.ts → public-api.d.ts} +1 -4
- package/public-api.d.ts.map +1 -0
- package/ng-package.json +0 -10
- package/src/lib/components/button/button.component.html +0 -7
- package/src/lib/components/button/button.component.scss +0 -156
- package/src/lib/components/button/button.component.spec.ts +0 -23
- package/src/lib/components/button/button.component.stories.ts +0 -102
- package/src/lib/components/button/button.component.ts +0 -25
- package/src/lib/components/grid/col/col.directive.ts +0 -37
- package/src/lib/components/grid/grid.directive.stories.ts +0 -149
- package/src/lib/components/grid/grid.directive.ts +0 -24
- package/src/lib/components/link/link.component.html +0 -5
- package/src/lib/components/link/link.component.scss +0 -108
- package/src/lib/components/link/link.component.stories.ts +0 -61
- package/src/lib/components/link/link.component.ts +0 -19
- package/src/lib/components/radio-button/radio-button.component.html +0 -24
- package/src/lib/components/radio-button/radio-button.component.scss +0 -140
- package/src/lib/components/radio-button/radio-button.component.stories.ts +0 -75
- package/src/lib/components/radio-button/radio-button.component.ts +0 -23
- package/src/lib/components/radio-button-group/radio-button-group.component.html +0 -45
- package/src/lib/components/radio-button-group/radio-button-group.component.scss +0 -82
- package/src/lib/components/radio-button-group/radio-button-group.component.stories.ts +0 -124
- package/src/lib/components/radio-button-group/radio-button-group.component.ts +0 -30
- package/tsconfig.lib.json +0 -14
- package/tsconfig.lib.prod.json +0 -10
- package/tsconfig.spec.json +0 -14
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"design-system-rte-angular.d.ts","sourceRoot":"","sources":["../../projects/ds-rte-lib/src/design-system-rte-angular.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generated bundle index. Do not edit.
|
|
3
|
+
*/
|
|
4
|
+
export * from './public-api';
|
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVzaWduLXN5c3RlbS1ydGUtYW5ndWxhci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2RzLXJ0ZS1saWIvc3JjL2Rlc2lnbi1zeXN0ZW0tcnRlLWFuZ3VsYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Component, input, output } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export class ButtonComponent {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.label = input('');
|
|
6
|
+
this.variant = input('filled');
|
|
7
|
+
this.size = input('m');
|
|
8
|
+
this.disabled = input(false);
|
|
9
|
+
this.click = output();
|
|
10
|
+
}
|
|
11
|
+
onClick(event) {
|
|
12
|
+
event.stopPropagation();
|
|
13
|
+
this.click.emit();
|
|
14
|
+
}
|
|
15
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "rte-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<button\n class=\"rte-button {{ variant() }} size-{{ size() }}\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-button{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.filled{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.filled:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.filled:active{background:var(--background-brand-pressed)}.rte-button.filled:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.outlined{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.outlined:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-button.outlined:active{border:var(--background-brand-inverse);background:var(--background-brand-inverse-pressed)}.rte-button.outlined:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-pressed)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}\n"] }); }
|
|
17
|
+
}
|
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
19
|
+
type: Component,
|
|
20
|
+
args: [{ selector: 'rte-button', standalone: true, imports: [], template: "<button\n class=\"rte-button {{ variant() }} size-{{ size() }}\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-button{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.filled{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.filled:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.filled:active{background:var(--background-brand-pressed)}.rte-button.filled:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.outlined{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.outlined:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-button.outlined:active{border:var(--background-brand-inverse);background:var(--background-brand-inverse-pressed)}.rte-button.outlined:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-pressed)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}\n"] }]
|
|
21
|
+
}] });
|
|
22
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RzLXJ0ZS1saWIvc3JjL2xpYi9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBVXpELE1BQU0sT0FBTyxlQUFlO0lBUDVCO1FBU0UsVUFBSyxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUNsQixZQUFPLEdBQUcsS0FBSyxDQUFnQixRQUFRLENBQUMsQ0FBQztRQUN6QyxTQUFJLEdBQUcsS0FBSyxDQUFhLEdBQUcsQ0FBQyxDQUFDO1FBQzlCLGFBQVEsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFeEIsVUFBSyxHQUFHLE1BQU0sRUFBUSxDQUFDO0tBT3hCO0lBTEMsT0FBTyxDQUFDLEtBQWlDO1FBQ3ZDLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3BCLENBQUM7K0dBWlUsZUFBZTttR0FBZixlQUFlLDJsQkNWNUIsOE1BTVM7OzRGRElJLGVBQWU7a0JBUDNCLFNBQVM7K0JBQ0UsWUFBWSxjQUNWLElBQUksV0FDUCxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCwgb3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCdXR0b25TaXplLCBCdXR0b25WYXJpYW50IH0gZnJvbSAnQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3J0ZS1idXR0b24nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9idXR0b24uY29tcG9uZW50LnNjc3MnXG59KVxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCB7XG5cbiAgbGFiZWwgPSBpbnB1dCgnJyk7XG4gIHZhcmlhbnQgPSBpbnB1dDxCdXR0b25WYXJpYW50PignZmlsbGVkJyk7XG4gIHNpemUgPSBpbnB1dDxCdXR0b25TaXplPignbScpO1xuICBkaXNhYmxlZCA9IGlucHV0KGZhbHNlKTtcblxuICBjbGljayA9IG91dHB1dDx2b2lkPigpO1xuXG4gIG9uQ2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQgfCBLZXlib2FyZEV2ZW50KTogdm9pZCB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgdGhpcy5jbGljay5lbWl0KCk7XG4gIH1cblxufVxuIiwiPGJ1dHRvblxuICAgIGNsYXNzPVwicnRlLWJ1dHRvbiB7eyB2YXJpYW50KCkgfX0gc2l6ZS17eyBzaXplKCkgfX1cIlxuICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZCgpXCJcbiAgICAoY2xpY2spPVwib25DbGljaygkZXZlbnQpXCJcbj5cbiAgICA8c3BhbiBjbGFzcz1cInJ0ZS1idXR0b24tbGFiZWxcIj57eyBsYWJlbCgpIH19PC9zcGFuPlxuPC9idXR0b24+Il19
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Public API Surface of lib
|
|
3
|
+
*/
|
|
4
|
+
export * from './lib/components/button/button.component';
|
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2RzLXJ0ZS1saWIvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLDBDQUEwQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBsaWJcbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50JztcbiJdfQ==
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, output, Component } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
class ButtonComponent {
|
|
5
|
+
constructor() {
|
|
6
|
+
this.label = input('');
|
|
7
|
+
this.variant = input('filled');
|
|
8
|
+
this.size = input('m');
|
|
9
|
+
this.disabled = input(false);
|
|
10
|
+
this.click = output();
|
|
11
|
+
}
|
|
12
|
+
onClick(event) {
|
|
13
|
+
event.stopPropagation();
|
|
14
|
+
this.click.emit();
|
|
15
|
+
}
|
|
16
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "rte-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<button\n class=\"rte-button {{ variant() }} size-{{ size() }}\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-button{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.filled{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.filled:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.filled:active{background:var(--background-brand-pressed)}.rte-button.filled:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.outlined{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.outlined:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-button.outlined:active{border:var(--background-brand-inverse);background:var(--background-brand-inverse-pressed)}.rte-button.outlined:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-pressed)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}\n"] }); }
|
|
18
|
+
}
|
|
19
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
20
|
+
type: Component,
|
|
21
|
+
args: [{ selector: 'rte-button', standalone: true, imports: [], template: "<button\n class=\"rte-button {{ variant() }} size-{{ size() }}\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-button{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.filled{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.filled:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.filled:active{background:var(--background-brand-pressed)}.rte-button.filled:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.outlined{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.outlined:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-button.outlined:active{border:var(--background-brand-inverse);background:var(--background-brand-inverse-pressed)}.rte-button.outlined:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-pressed)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}\n"] }]
|
|
22
|
+
}] });
|
|
23
|
+
|
|
24
|
+
/*
|
|
25
|
+
* Public API Surface of lib
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Generated bundle index. Do not edit.
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
export { ButtonComponent };
|
|
33
|
+
//# sourceMappingURL=design-system-rte-angular.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"design-system-rte-angular.mjs","sources":["../../../projects/ds-rte-lib/src/lib/components/button/button.component.ts","../../../projects/ds-rte-lib/src/lib/components/button/button.component.html","../../../projects/ds-rte-lib/src/public-api.ts","../../../projects/ds-rte-lib/src/design-system-rte-angular.ts"],"sourcesContent":["import { Component, input, output } from '@angular/core';\nimport { ButtonSize, ButtonVariant } from '@design-system-rte/core/components/button/button.interface';\n\n@Component({\n selector: 'rte-button',\n standalone: true,\n imports: [],\n templateUrl: './button.component.html',\n styleUrl: './button.component.scss'\n})\nexport class ButtonComponent {\n\n label = input('');\n variant = input<ButtonVariant>('filled');\n size = input<ButtonSize>('m');\n disabled = input(false);\n\n click = output<void>();\n\n onClick(event: MouseEvent | KeyboardEvent): void {\n event.stopPropagation();\n this.click.emit();\n }\n\n}\n","<button\n class=\"rte-button {{ variant() }} size-{{ size() }}\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"rte-button-label\">{{ label() }}</span>\n</button>","/*\n * Public API Surface of lib\n */\n\nexport * from './lib/components/button/button.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAUa,eAAe,CAAA;AAP5B,IAAA,WAAA,GAAA;AASE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC;AACjB,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAgB,QAAQ,CAAC;AACxC,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAa,GAAG,CAAC;AAC7B,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;QAEvB,IAAK,CAAA,KAAA,GAAG,MAAM,EAAQ;AAOvB;AALC,IAAA,OAAO,CAAC,KAAiC,EAAA;QACvC,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;;+GAXR,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,2lBCV5B,8MAMS,EAAA,MAAA,EAAA,CAAA,ivGAAA,CAAA,EAAA,CAAA,CAAA;;4FDII,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;+BACE,YAAY,EAAA,UAAA,EACV,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,QAAA,EAAA,8MAAA,EAAA,MAAA,EAAA,CAAA,ivGAAA,CAAA,EAAA;;;AENb;;AAEG;;ACFH;;AAEG;;;;"}
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ButtonSize, ButtonVariant } from '@design-system-rte/core/components/button/button.interface';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare class ButtonComponent {
|
|
4
|
+
label: import("@angular/core").InputSignal<string>;
|
|
5
|
+
variant: import("@angular/core").InputSignal<ButtonVariant>;
|
|
6
|
+
size: import("@angular/core").InputSignal<ButtonSize>;
|
|
7
|
+
disabled: import("@angular/core").InputSignal<boolean>;
|
|
8
|
+
click: import("@angular/core").OutputEmitterRef<void>;
|
|
9
|
+
onClick(event: MouseEvent | KeyboardEvent): void;
|
|
10
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
|
|
11
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "rte-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "click": "click"; }, never, never, true, never>;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=button.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../../../projects/ds-rte-lib/src/lib/components/button/button.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,4DAA4D,CAAC;;AAEvG,qBAOa,eAAe;IAE1B,KAAK,8CAAa;IAClB,OAAO,qDAAkC;IACzC,IAAI,kDAA0B;IAC9B,QAAQ,+CAAgB;IAExB,KAAK,iDAAkB;IAEvB,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,GAAG,IAAI;yCATrC,eAAe;2CAAf,eAAe;CAc3B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@design-system-rte/angular",
|
|
3
|
-
"version": "0.1.1-
|
|
3
|
+
"version": "0.1.1-rc8",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": "^17.3.0",
|
|
6
6
|
"@angular/core": "^17.3.0",
|
|
@@ -17,5 +17,18 @@
|
|
|
17
17
|
"@design-system-rte/core": "^0.1.2-rc3",
|
|
18
18
|
"tslib": "^2.3.0"
|
|
19
19
|
},
|
|
20
|
-
"sideEffects": false
|
|
21
|
-
|
|
20
|
+
"sideEffects": false,
|
|
21
|
+
"module": "fesm2022/design-system-rte-angular.mjs",
|
|
22
|
+
"typings": "index.d.ts",
|
|
23
|
+
"exports": {
|
|
24
|
+
"./package.json": {
|
|
25
|
+
"default": "./package.json"
|
|
26
|
+
},
|
|
27
|
+
".": {
|
|
28
|
+
"types": "./index.d.ts",
|
|
29
|
+
"esm2022": "./esm2022/design-system-rte-angular.mjs",
|
|
30
|
+
"esm": "./esm2022/design-system-rte-angular.mjs",
|
|
31
|
+
"default": "./fesm2022/design-system-rte-angular.mjs"
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../projects/ds-rte-lib/src/public-api.ts"],"names":[],"mappings":"AAIA,cAAc,0CAA0C,CAAC"}
|
package/ng-package.json
DELETED
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
@use '@design-system-rte/core/tokens/main.scss' as *;
|
|
2
|
-
|
|
3
|
-
.rte-button {
|
|
4
|
-
align-items: center;
|
|
5
|
-
cursor: pointer;
|
|
6
|
-
display: inline-flex;
|
|
7
|
-
flex-shrink: 0;
|
|
8
|
-
justify-content: center;
|
|
9
|
-
|
|
10
|
-
&:focus-visible {
|
|
11
|
-
outline: 1px solid var(--border-brand-focused);
|
|
12
|
-
outline-offset: 4px;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
&.size-s {
|
|
16
|
-
@include typography-button-s;
|
|
17
|
-
height: 24px;
|
|
18
|
-
border-radius: $radius-s;
|
|
19
|
-
padding: $positive-spacing_050 $positive-spacing_100;
|
|
20
|
-
|
|
21
|
-
.rte-button-label {
|
|
22
|
-
margin: 0 $positive-spacing_050;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
&.size-m {
|
|
27
|
-
@include typography-button-m;
|
|
28
|
-
height: 32px;
|
|
29
|
-
border-radius: $radius-s;
|
|
30
|
-
padding: $positive-spacing_050 $positive-spacing_150;
|
|
31
|
-
|
|
32
|
-
.rte-button-label {
|
|
33
|
-
margin: 0 $positive-spacing_075;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&.size-l {
|
|
38
|
-
@include typography-button-l;
|
|
39
|
-
height: 40px;
|
|
40
|
-
border-radius: $radius-m;
|
|
41
|
-
padding: $positive-spacing_050 $positive-spacing_200;
|
|
42
|
-
|
|
43
|
-
.rte-button-label {
|
|
44
|
-
margin: 0 $positive-spacing_100;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
&.filled {
|
|
49
|
-
border: var(--border-brand-default);
|
|
50
|
-
color: var(--content-primary-inverse);
|
|
51
|
-
background: var(--background-brand-default);
|
|
52
|
-
|
|
53
|
-
&:hover {
|
|
54
|
-
background: var(--background-brand-hover);
|
|
55
|
-
border: var(--background-brand-hover);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
&:active {
|
|
59
|
-
background: var(--background-brand-pressed);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
&:disabled {
|
|
63
|
-
background: var(--background-disabled);
|
|
64
|
-
border: solid 1px var(--border-disabled);
|
|
65
|
-
color: var(--content-disabled);
|
|
66
|
-
box-shadow: none;
|
|
67
|
-
cursor: default;
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
&.outlined {
|
|
72
|
-
background: var(--background-default);
|
|
73
|
-
border: solid 1px var(--border-brand-default);
|
|
74
|
-
color: var(--content-brand-default);
|
|
75
|
-
|
|
76
|
-
&:hover {
|
|
77
|
-
background: var(--background-brand-inverse-hover);
|
|
78
|
-
border: solid 1px var(--border-brand-default);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
&:active {
|
|
82
|
-
border: var(--background-brand-inverse);
|
|
83
|
-
background: var(--background-brand-inverse-pressed);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
&:disabled {
|
|
87
|
-
background: var(--background-disabled);
|
|
88
|
-
border: solid 1px var(--border-disabled);
|
|
89
|
-
color: var(--content-disabled);
|
|
90
|
-
cursor: default;
|
|
91
|
-
}
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
&.text {
|
|
95
|
-
background: transparent;
|
|
96
|
-
border: none;
|
|
97
|
-
color: var(--content-brand-default);
|
|
98
|
-
|
|
99
|
-
&:hover {
|
|
100
|
-
background: var(--background-brand-inverse-hover);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
&:active {
|
|
104
|
-
background: var(--background-brand-inverse-pressed);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
&:disabled {
|
|
108
|
-
background: var(--background-disabled);
|
|
109
|
-
color: var(--content-disabled);
|
|
110
|
-
cursor: default;
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
&.transparent {
|
|
115
|
-
background: transparent;
|
|
116
|
-
border: none;
|
|
117
|
-
color: var(--content-brand-default);
|
|
118
|
-
|
|
119
|
-
&:hover {
|
|
120
|
-
color: var(--content-brand-hover);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
&:active {
|
|
124
|
-
color: var(--content-brand-pressed);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
&:disabled {
|
|
128
|
-
color: var(--content-disabled);
|
|
129
|
-
box-shadow: none;
|
|
130
|
-
cursor: default;
|
|
131
|
-
}
|
|
132
|
-
};
|
|
133
|
-
|
|
134
|
-
&.danger {
|
|
135
|
-
background: var(--background-danger-default);
|
|
136
|
-
border: none;
|
|
137
|
-
color: var(--content-primary-inverse);
|
|
138
|
-
border-radius: $radius-m;
|
|
139
|
-
|
|
140
|
-
&:hover {
|
|
141
|
-
background: var(--background-danger-hover);
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
&:active {
|
|
145
|
-
background: var(--background-danger-pressed);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
&:disabled {
|
|
149
|
-
background: var(--background-disabled);
|
|
150
|
-
border: var(--border-disabled);
|
|
151
|
-
color: var(--content-disabled);
|
|
152
|
-
box-shadow: none;
|
|
153
|
-
cursor: default;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
2
|
-
|
|
3
|
-
import { ButtonComponent } from './button.component';
|
|
4
|
-
|
|
5
|
-
describe('ButtonComponent', () => {
|
|
6
|
-
let component: ButtonComponent;
|
|
7
|
-
let fixture: ComponentFixture<ButtonComponent>;
|
|
8
|
-
|
|
9
|
-
beforeEach(async () => {
|
|
10
|
-
await TestBed.configureTestingModule({
|
|
11
|
-
imports: [ButtonComponent]
|
|
12
|
-
})
|
|
13
|
-
.compileComponents();
|
|
14
|
-
|
|
15
|
-
fixture = TestBed.createComponent(ButtonComponent);
|
|
16
|
-
component = fixture.componentInstance;
|
|
17
|
-
fixture.detectChanges();
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
it('should create', () => {
|
|
21
|
-
expect(component).toBeTruthy();
|
|
22
|
-
});
|
|
23
|
-
});
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/angular';
|
|
2
|
-
import { fn, userEvent, within, expect } from '@storybook/test';
|
|
3
|
-
import { ENTER_KEY, SPACE_KEY, TAB_KEY } from '@design-system-rte/core/constants/keyboard.constants';
|
|
4
|
-
|
|
5
|
-
import { ButtonComponent } from './button.component';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const meta: Meta<ButtonComponent>= {
|
|
9
|
-
title: 'Button',
|
|
10
|
-
component: ButtonComponent,
|
|
11
|
-
tags: ['autodocs'],
|
|
12
|
-
argTypes: {
|
|
13
|
-
variant: {
|
|
14
|
-
control: 'select',
|
|
15
|
-
options: ['filled', 'outlined', 'text', 'transparent', 'danger'],
|
|
16
|
-
},
|
|
17
|
-
size: {
|
|
18
|
-
control: 'select',
|
|
19
|
-
options: ['s', 'm', 'l'],
|
|
20
|
-
},
|
|
21
|
-
disabled: {
|
|
22
|
-
control: 'boolean',
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
args: { click: fn() },
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
export default meta;
|
|
29
|
-
type Story = StoryObj<ButtonComponent>;
|
|
30
|
-
|
|
31
|
-
const mockFn = fn();
|
|
32
|
-
|
|
33
|
-
export const Default: Story = {
|
|
34
|
-
|
|
35
|
-
args: {
|
|
36
|
-
variant: 'filled',
|
|
37
|
-
label: 'Button',
|
|
38
|
-
click: mockFn,
|
|
39
|
-
},
|
|
40
|
-
play: async ({ canvasElement }) => {
|
|
41
|
-
const canvas = within(canvasElement);
|
|
42
|
-
const button = canvas.getByRole('button');
|
|
43
|
-
await userEvent.click(button);
|
|
44
|
-
expect(mockFn).toHaveBeenCalled();
|
|
45
|
-
button.blur();
|
|
46
|
-
},
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export const Sizing: Story = {
|
|
50
|
-
|
|
51
|
-
render: (args) => ({
|
|
52
|
-
props: args,
|
|
53
|
-
template: `
|
|
54
|
-
<div style="display: flex; gap: 8px;">
|
|
55
|
-
<rte-button
|
|
56
|
-
size="s"
|
|
57
|
-
label="Small"
|
|
58
|
-
variant="filled"
|
|
59
|
-
data-testid="small-button"
|
|
60
|
-
/>
|
|
61
|
-
<rte-button
|
|
62
|
-
size="m"
|
|
63
|
-
label="Medium"
|
|
64
|
-
variant="filled"
|
|
65
|
-
data-testid="medium-button"
|
|
66
|
-
/>
|
|
67
|
-
<rte-button
|
|
68
|
-
size="l"
|
|
69
|
-
label="Large"
|
|
70
|
-
variant="filled"
|
|
71
|
-
data-testid="large-button"
|
|
72
|
-
/>
|
|
73
|
-
</div>
|
|
74
|
-
`,
|
|
75
|
-
}),
|
|
76
|
-
play: async ({ canvasElement }) => {
|
|
77
|
-
const canvas = within(canvasElement);
|
|
78
|
-
const smallButton = canvas.getByTestId('small-button').getElementsByTagName('button')[0];
|
|
79
|
-
const mediumButton = canvas.getByTestId('medium-button').getElementsByTagName('button')[0];
|
|
80
|
-
const largeButton = canvas.getByTestId('large-button').getElementsByTagName('button')[0];
|
|
81
|
-
|
|
82
|
-
expect(smallButton.clientHeight).toBe(24);
|
|
83
|
-
expect(mediumButton.clientHeight).toBe(32);
|
|
84
|
-
expect(largeButton.clientHeight).toBe(40);
|
|
85
|
-
},
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
export const KeyboardInteraction: Story = {
|
|
89
|
-
args: {
|
|
90
|
-
...Default.args,
|
|
91
|
-
},
|
|
92
|
-
play: async ({ canvasElement }) => {
|
|
93
|
-
const canvas = within(canvasElement);
|
|
94
|
-
const button = canvas.getByRole('button');
|
|
95
|
-
await userEvent.keyboard(`{Tab}`);
|
|
96
|
-
expect(button).toHaveFocus();
|
|
97
|
-
await userEvent.keyboard(`{Enter}}`);
|
|
98
|
-
await userEvent.keyboard(`{ }`);
|
|
99
|
-
expect(mockFn).toHaveBeenCalledTimes(2);
|
|
100
|
-
button.blur();
|
|
101
|
-
},
|
|
102
|
-
};
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { Component, input, output } from '@angular/core';
|
|
2
|
-
import { ButtonSize, ButtonVariant } from '@design-system-rte/core/components/button/button.interface';
|
|
3
|
-
|
|
4
|
-
@Component({
|
|
5
|
-
selector: 'rte-button',
|
|
6
|
-
standalone: true,
|
|
7
|
-
imports: [],
|
|
8
|
-
templateUrl: './button.component.html',
|
|
9
|
-
styleUrl: './button.component.scss'
|
|
10
|
-
})
|
|
11
|
-
export class ButtonComponent {
|
|
12
|
-
|
|
13
|
-
label = input('');
|
|
14
|
-
variant = input<ButtonVariant>('filled');
|
|
15
|
-
size = input<ButtonSize>('m');
|
|
16
|
-
disabled = input(false);
|
|
17
|
-
|
|
18
|
-
click = output<void>();
|
|
19
|
-
|
|
20
|
-
onClick(event: MouseEvent | KeyboardEvent): void {
|
|
21
|
-
event.stopPropagation();
|
|
22
|
-
this.click.emit();
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { Directive, HostBinding, input } from '@angular/core';
|
|
2
|
-
|
|
3
|
-
@Directive({
|
|
4
|
-
selector: '[dsCol]',
|
|
5
|
-
standalone: true
|
|
6
|
-
})
|
|
7
|
-
export class ColDirective {
|
|
8
|
-
|
|
9
|
-
xxs = input<number>()
|
|
10
|
-
xs = input<number>()
|
|
11
|
-
s = input<number>()
|
|
12
|
-
m = input<number>()
|
|
13
|
-
l = input<number>()
|
|
14
|
-
xl = input<number>()
|
|
15
|
-
|
|
16
|
-
@HostBinding ("class")
|
|
17
|
-
get colClasses(): string {
|
|
18
|
-
return [
|
|
19
|
-
'col',
|
|
20
|
-
this.generateColumnClass('col-xxs', this.xxs()),
|
|
21
|
-
this.generateColumnClass('col-xs', this.xs()),
|
|
22
|
-
this.generateColumnClass('col-s', this.s()),
|
|
23
|
-
this.generateColumnClass('col-m', this.m()),
|
|
24
|
-
this.generateColumnClass('col-l', this.l()),
|
|
25
|
-
this.generateColumnClass('col-xl', this.xl()),
|
|
26
|
-
]
|
|
27
|
-
.filter(Boolean)
|
|
28
|
-
.join(' ');
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
constructor() { }
|
|
32
|
-
|
|
33
|
-
private generateColumnClass(prefix: string, size?: number): string {
|
|
34
|
-
return size ? `${prefix}-${size}` : '';
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
}
|