@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.
Files changed (36) hide show
  1. package/design-system-rte-angular.d.ts.map +1 -0
  2. package/esm2022/design-system-rte-angular.mjs +5 -0
  3. package/esm2022/lib/components/button/button.component.mjs +22 -0
  4. package/esm2022/public-api.mjs +5 -0
  5. package/fesm2022/design-system-rte-angular.mjs +33 -0
  6. package/fesm2022/design-system-rte-angular.mjs.map +1 -0
  7. package/index.d.ts +6 -0
  8. package/lib/components/button/button.component.d.ts +13 -0
  9. package/lib/components/button/button.component.d.ts.map +1 -0
  10. package/package.json +16 -3
  11. package/{src/public-api.ts → public-api.d.ts} +1 -4
  12. package/public-api.d.ts.map +1 -0
  13. package/ng-package.json +0 -10
  14. package/src/lib/components/button/button.component.html +0 -7
  15. package/src/lib/components/button/button.component.scss +0 -156
  16. package/src/lib/components/button/button.component.spec.ts +0 -23
  17. package/src/lib/components/button/button.component.stories.ts +0 -102
  18. package/src/lib/components/button/button.component.ts +0 -25
  19. package/src/lib/components/grid/col/col.directive.ts +0 -37
  20. package/src/lib/components/grid/grid.directive.stories.ts +0 -149
  21. package/src/lib/components/grid/grid.directive.ts +0 -24
  22. package/src/lib/components/link/link.component.html +0 -5
  23. package/src/lib/components/link/link.component.scss +0 -108
  24. package/src/lib/components/link/link.component.stories.ts +0 -61
  25. package/src/lib/components/link/link.component.ts +0 -19
  26. package/src/lib/components/radio-button/radio-button.component.html +0 -24
  27. package/src/lib/components/radio-button/radio-button.component.scss +0 -140
  28. package/src/lib/components/radio-button/radio-button.component.stories.ts +0 -75
  29. package/src/lib/components/radio-button/radio-button.component.ts +0 -23
  30. package/src/lib/components/radio-button-group/radio-button-group.component.html +0 -45
  31. package/src/lib/components/radio-button-group/radio-button-group.component.scss +0 -82
  32. package/src/lib/components/radio-button-group/radio-button-group.component.stories.ts +0 -124
  33. package/src/lib/components/radio-button-group/radio-button-group.component.ts +0 -30
  34. package/tsconfig.lib.json +0 -14
  35. package/tsconfig.lib.prod.json +0 -10
  36. 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,6 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ /// <amd-module name="@design-system-rte/angular" />
5
+ export * from './public-api';
6
+ //# sourceMappingURL=design-system-rte-angular.d.ts.map
@@ -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-rc7",
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
+ }
@@ -1,5 +1,2 @@
1
- /*
2
- * Public API Surface of lib
3
- */
4
-
5
1
  export * from './lib/components/button/button.component';
2
+ //# sourceMappingURL=public-api.d.ts.map
@@ -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,10 +0,0 @@
1
- {
2
- "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3
- "dest": "../../dist/lib",
4
- "lib": {
5
- "entryFile": "src/public-api.ts"
6
- },
7
- "allowedNonPeerDependencies": [
8
- "@design-system-rte/core"
9
- ]
10
- }
@@ -1,7 +0,0 @@
1
- <button
2
- class="rte-button {{ variant() }} size-{{ size() }}"
3
- [disabled]="disabled()"
4
- (click)="onClick($event)"
5
- >
6
- <span class="rte-button-label">{{ label() }}</span>
7
- </button>
@@ -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
- }