@ascentgl/ads-ui 0.0.38 → 0.0.39
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.
|
@@ -15,9 +15,15 @@ export class AdsButtonComponent {
|
|
|
15
15
|
/** Sets the "type" attribute on the button */
|
|
16
16
|
this.type = input('button');
|
|
17
17
|
/** @ignore */
|
|
18
|
-
this.calcVariant = computed(() =>
|
|
18
|
+
this.calcVariant = computed(() => {
|
|
19
|
+
if (this.variant() === 'secondary')
|
|
20
|
+
return 'primary';
|
|
21
|
+
if (this.variant() === 'error-reverse')
|
|
22
|
+
return 'error';
|
|
23
|
+
return this.variant();
|
|
24
|
+
});
|
|
19
25
|
/** @ignore */
|
|
20
|
-
this.calcReverse = computed(() => this.variant() === 'secondary');
|
|
26
|
+
this.calcReverse = computed(() => this.variant() === 'secondary' || this.variant() === 'error-reverse');
|
|
21
27
|
}
|
|
22
28
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
29
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.1", type: AdsButtonComponent, selector: "ads-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n mat-flat-button\n [id]=\"id()\"\n [class.reverse]=\"calcReverse()\"\n [ngClass]=\"[calcVariant(), size()]\"\n [disabled]=\"disabled()\"\n [disableRipple]=\"true\"\n>\n <ng-content></ng-content>\n</button>\n", styles: ["button{--mdc-filled-button-container-color: var(--color-primary);--mdc-filled-button-label-text-color: var(--color-white);--mdc-filled-button-label-text-weight: 600;--mdc-filled-button-container-height: var(--mat-form-field-container-height);--mdc-filled-button-label-text-tracking: \"1.5px\";--mdc-filled-button-label-text-size: 16px;--mat-filled-button-horizontal-padding: 24px;--mdc-filled-button-disabled-container-color: var(--color-dark-10);--mdc-filled-button-disabled-label-text-color: var(--color-white);--mat-filled-button-hover-state-layer-opacity: 0;border:1.5px solid}button:disabled{border-color:var(--color-dark-10)}.primary:not(:disabled){border-color:var(--color-primary)}.primary:not(:disabled):hover{border-color:var(--color-primary-hover);--mdc-filled-button-container-color: var(--color-primary-hover);--mdc-filled-button-label-text-color: var(--color-white)}.primary:not(:disabled).reverse{--mdc-filled-button-container-color: var(--color-white);--mdc-filled-button-label-text-color: var(--color-primary)}.primary:not(:disabled).reverse:hover{border-color:var(--color-primary-hover);--mdc-filled-button-container-color: var(--color-primary-hover);--mdc-filled-button-label-text-color: var(--color-white)}.primary:not(:disabled):active:focus{border-color:var(--color-primary-pressed);--mdc-filled-button-container-color: var(--color-primary-pressed);--mdc-filled-button-label-text-color: var(--color-white)}.primary:disabled.reverse{--mdc-filled-button-disabled-container-color: var(--color-muted-50);--mdc-filled-button-disabled-label-text-color: var(--color-dark-10)}.error:not(:disabled){border-color:var(--color-error);--mdc-filled-button-container-color: var(--color-white);--mdc-filled-button-label-text-color: var(--color-error)}.error:not(:disabled):hover{border-color:var(--color-error-hover);--mdc-filled-button-container-color: var(--color-error-hover);--mdc-filled-button-label-text-color: var(--color-white)}.error:not(:disabled).reverse{--mdc-filled-button-container-color: var(--color-error);--mdc-filled-button-label-text-color: var(--color-white)}.error:not(:disabled).reverse:hover{border-color:var(--color-error-hover);--mdc-filled-button-container-color: var(--color-error-hover)}.error:not(:disabled):active:focus{border-color:var(--color-error-pressed);--mdc-filled-button-label-text-color: var(--color-white);--mdc-filled-button-container-color: var(--color-error-pressed)}.error:disabled:not(.reverse){--mdc-filled-button-disabled-container-color: var(--color-white);--mdc-filled-button-disabled-label-text-color: var(--color-dark-10)}.sm{--mdc-filled-button-container-height: 32px;--mat-filled-button-horizontal-padding: 8px;--mdc-filled-button-label-text-size: 14px}.xs{--mdc-filled-button-container-height: 24px;--mat-filled-button-horizontal-padding: 8px;--mdc-filled-button-label-text-size: 12px}:host::ng-deep .mdc-button__label{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
@@ -26,4 +32,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
|
|
|
26
32
|
type: Component,
|
|
27
33
|
args: [{ selector: 'ads-button', template: "<button\n mat-flat-button\n [id]=\"id()\"\n [class.reverse]=\"calcReverse()\"\n [ngClass]=\"[calcVariant(), size()]\"\n [disabled]=\"disabled()\"\n [disableRipple]=\"true\"\n>\n <ng-content></ng-content>\n</button>\n", styles: ["button{--mdc-filled-button-container-color: var(--color-primary);--mdc-filled-button-label-text-color: var(--color-white);--mdc-filled-button-label-text-weight: 600;--mdc-filled-button-container-height: var(--mat-form-field-container-height);--mdc-filled-button-label-text-tracking: \"1.5px\";--mdc-filled-button-label-text-size: 16px;--mat-filled-button-horizontal-padding: 24px;--mdc-filled-button-disabled-container-color: var(--color-dark-10);--mdc-filled-button-disabled-label-text-color: var(--color-white);--mat-filled-button-hover-state-layer-opacity: 0;border:1.5px solid}button:disabled{border-color:var(--color-dark-10)}.primary:not(:disabled){border-color:var(--color-primary)}.primary:not(:disabled):hover{border-color:var(--color-primary-hover);--mdc-filled-button-container-color: var(--color-primary-hover);--mdc-filled-button-label-text-color: var(--color-white)}.primary:not(:disabled).reverse{--mdc-filled-button-container-color: var(--color-white);--mdc-filled-button-label-text-color: var(--color-primary)}.primary:not(:disabled).reverse:hover{border-color:var(--color-primary-hover);--mdc-filled-button-container-color: var(--color-primary-hover);--mdc-filled-button-label-text-color: var(--color-white)}.primary:not(:disabled):active:focus{border-color:var(--color-primary-pressed);--mdc-filled-button-container-color: var(--color-primary-pressed);--mdc-filled-button-label-text-color: var(--color-white)}.primary:disabled.reverse{--mdc-filled-button-disabled-container-color: var(--color-muted-50);--mdc-filled-button-disabled-label-text-color: var(--color-dark-10)}.error:not(:disabled){border-color:var(--color-error);--mdc-filled-button-container-color: var(--color-white);--mdc-filled-button-label-text-color: var(--color-error)}.error:not(:disabled):hover{border-color:var(--color-error-hover);--mdc-filled-button-container-color: var(--color-error-hover);--mdc-filled-button-label-text-color: var(--color-white)}.error:not(:disabled).reverse{--mdc-filled-button-container-color: var(--color-error);--mdc-filled-button-label-text-color: var(--color-white)}.error:not(:disabled).reverse:hover{border-color:var(--color-error-hover);--mdc-filled-button-container-color: var(--color-error-hover)}.error:not(:disabled):active:focus{border-color:var(--color-error-pressed);--mdc-filled-button-label-text-color: var(--color-white);--mdc-filled-button-container-color: var(--color-error-pressed)}.error:disabled:not(.reverse){--mdc-filled-button-disabled-container-color: var(--color-white);--mdc-filled-button-disabled-label-text-color: var(--color-dark-10)}.sm{--mdc-filled-button-container-height: 32px;--mat-filled-button-horizontal-padding: 8px;--mdc-filled-button-label-text-size: 14px}.xs{--mdc-filled-button-container-height: 24px;--mat-filled-button-horizontal-padding: 8px;--mdc-filled-button-label-text-size: 12px}:host::ng-deep .mdc-button__label{white-space:nowrap}\n"] }]
|
|
28
34
|
}] });
|
|
29
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
35
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYWRzLXVpL3NyYy9saWIvY29tcG9uZW50cy9idXR0b25zL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hZHMtdWkvc3JjL2xpYi9jb21wb25lbnRzL2J1dHRvbnMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7Ozs7QUFVbkUsTUFBTSxPQUFPLGtCQUFrQjtJQUwvQjtRQU1FLG1DQUFtQztRQUNuQyxPQUFFLEdBQUcsS0FBSyxDQUFTLEVBQUUsQ0FBQyxDQUFDO1FBRXZCLGtDQUFrQztRQUNsQyxZQUFPLEdBQUcsS0FBSyxDQUFVLFNBQVMsQ0FBQyxDQUFDO1FBRXBDLHFDQUFxQztRQUNyQyxhQUFRLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBRWpDLDhDQUE4QztRQUM5QyxTQUFJLEdBQUcsS0FBSyxDQUFPLE1BQU0sQ0FBQyxDQUFDO1FBRTNCLDhDQUE4QztRQUM5QyxTQUFJLEdBQUcsS0FBSyxDQUFnQyxRQUFRLENBQUMsQ0FBQztRQUV0RCxjQUFjO1FBQ2QsZ0JBQVcsR0FBb0IsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUMzQyxJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUUsS0FBSyxXQUFXO2dCQUFFLE9BQU8sU0FBUyxDQUFDO1lBQ3JELElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxLQUFLLGVBQWU7Z0JBQUUsT0FBTyxPQUFPLENBQUM7WUFDdkQsT0FBTyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDeEIsQ0FBQyxDQUFDLENBQUM7UUFFSCxjQUFjO1FBQ2QsZ0JBQVcsR0FBb0IsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsS0FBSyxXQUFXLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxLQUFLLGVBQWUsQ0FBQyxDQUFDO0tBQ3JIOzhHQXpCWSxrQkFBa0I7a0dBQWxCLGtCQUFrQixzcEJDVi9CLGlPQVVBOzsyRkRBYSxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgY29tcHV0ZWQsIGlucHV0LCBTaWduYWwgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IHR5cGUgVmFyaWFudCA9ICdwcmltYXJ5JyB8ICdlcnJvcicgfCAnc2Vjb25kYXJ5JyB8ICdlcnJvci1yZXZlcnNlJztcbmV4cG9ydCB0eXBlIFNpemUgPSAnYmFzZScgfCAnc20nIHwgJ3hzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYWRzLWJ1dHRvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9idXR0b24uY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgQWRzQnV0dG9uQ29tcG9uZW50IHtcbiAgLyoqIFRoZSB1bmlxdWUgSUQgZm9yIHRoZSBidXR0b24gKi9cbiAgaWQgPSBpbnB1dDxzdHJpbmc+KCcnKTtcblxuICAvKiogVGhlIGJ1dHRvbiBhcHBlYXJhbmNlIHN0eWxlICovXG4gIHZhcmlhbnQgPSBpbnB1dDxWYXJpYW50PigncHJpbWFyeScpO1xuXG4gIC8qKiBXaGV0aGVyIHRoZSBidXR0b24gaXMgZGlzYWJsZWQgKi9cbiAgZGlzYWJsZWQgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG5cbiAgLyoqIFdoZXRoZXIgdGhlIGJ1dHRvbiBpcyBhIHNtYWxsZXIgdmVyc2lvbiAqL1xuICBzaXplID0gaW5wdXQ8U2l6ZT4oJ2Jhc2UnKTtcblxuICAvKiogU2V0cyB0aGUgXCJ0eXBlXCIgYXR0cmlidXRlIG9uIHRoZSBidXR0b24gKi9cbiAgdHlwZSA9IGlucHV0PCdidXR0b24nIHwgJ3N1Ym1pdCcgfCAncmVzZXQnPignYnV0dG9uJyk7XG5cbiAgLyoqIEBpZ25vcmUgKi9cbiAgY2FsY1ZhcmlhbnQ6IFNpZ25hbDxWYXJpYW50PiA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICBpZiAodGhpcy52YXJpYW50KCkgPT09ICdzZWNvbmRhcnknKSByZXR1cm4gJ3ByaW1hcnknO1xuICAgIGlmICh0aGlzLnZhcmlhbnQoKSA9PT0gJ2Vycm9yLXJldmVyc2UnKSByZXR1cm4gJ2Vycm9yJztcbiAgICByZXR1cm4gdGhpcy52YXJpYW50KCk7XG4gIH0pO1xuXG4gIC8qKiBAaWdub3JlICovXG4gIGNhbGNSZXZlcnNlOiBTaWduYWw8Ym9vbGVhbj4gPSBjb21wdXRlZCgoKSA9PiB0aGlzLnZhcmlhbnQoKSA9PT0gJ3NlY29uZGFyeScgfHwgdGhpcy52YXJpYW50KCkgPT09ICdlcnJvci1yZXZlcnNlJyk7XG59XG4iLCI8YnV0dG9uXG4gIG1hdC1mbGF0LWJ1dHRvblxuICBbaWRdPVwiaWQoKVwiXG4gIFtjbGFzcy5yZXZlcnNlXT1cImNhbGNSZXZlcnNlKClcIlxuICBbbmdDbGFzc109XCJbY2FsY1ZhcmlhbnQoKSwgc2l6ZSgpXVwiXG4gIFtkaXNhYmxlZF09XCJkaXNhYmxlZCgpXCJcbiAgW2Rpc2FibGVSaXBwbGVdPVwidHJ1ZVwiXG4+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvYnV0dG9uPlxuIl19
|
|
@@ -480,9 +480,15 @@ class AdsButtonComponent {
|
|
|
480
480
|
/** Sets the "type" attribute on the button */
|
|
481
481
|
this.type = input('button');
|
|
482
482
|
/** @ignore */
|
|
483
|
-
this.calcVariant = computed(() =>
|
|
483
|
+
this.calcVariant = computed(() => {
|
|
484
|
+
if (this.variant() === 'secondary')
|
|
485
|
+
return 'primary';
|
|
486
|
+
if (this.variant() === 'error-reverse')
|
|
487
|
+
return 'error';
|
|
488
|
+
return this.variant();
|
|
489
|
+
});
|
|
484
490
|
/** @ignore */
|
|
485
|
-
this.calcReverse = computed(() => this.variant() === 'secondary');
|
|
491
|
+
this.calcReverse = computed(() => this.variant() === 'secondary' || this.variant() === 'error-reverse');
|
|
486
492
|
}
|
|
487
493
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
488
494
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.1", type: AdsButtonComponent, selector: "ads-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n mat-flat-button\n [id]=\"id()\"\n [class.reverse]=\"calcReverse()\"\n [ngClass]=\"[calcVariant(), size()]\"\n [disabled]=\"disabled()\"\n [disableRipple]=\"true\"\n>\n <ng-content></ng-content>\n</button>\n", styles: ["button{--mdc-filled-button-container-color: var(--color-primary);--mdc-filled-button-label-text-color: var(--color-white);--mdc-filled-button-label-text-weight: 600;--mdc-filled-button-container-height: var(--mat-form-field-container-height);--mdc-filled-button-label-text-tracking: \"1.5px\";--mdc-filled-button-label-text-size: 16px;--mat-filled-button-horizontal-padding: 24px;--mdc-filled-button-disabled-container-color: var(--color-dark-10);--mdc-filled-button-disabled-label-text-color: var(--color-white);--mat-filled-button-hover-state-layer-opacity: 0;border:1.5px solid}button:disabled{border-color:var(--color-dark-10)}.primary:not(:disabled){border-color:var(--color-primary)}.primary:not(:disabled):hover{border-color:var(--color-primary-hover);--mdc-filled-button-container-color: var(--color-primary-hover);--mdc-filled-button-label-text-color: var(--color-white)}.primary:not(:disabled).reverse{--mdc-filled-button-container-color: var(--color-white);--mdc-filled-button-label-text-color: var(--color-primary)}.primary:not(:disabled).reverse:hover{border-color:var(--color-primary-hover);--mdc-filled-button-container-color: var(--color-primary-hover);--mdc-filled-button-label-text-color: var(--color-white)}.primary:not(:disabled):active:focus{border-color:var(--color-primary-pressed);--mdc-filled-button-container-color: var(--color-primary-pressed);--mdc-filled-button-label-text-color: var(--color-white)}.primary:disabled.reverse{--mdc-filled-button-disabled-container-color: var(--color-muted-50);--mdc-filled-button-disabled-label-text-color: var(--color-dark-10)}.error:not(:disabled){border-color:var(--color-error);--mdc-filled-button-container-color: var(--color-white);--mdc-filled-button-label-text-color: var(--color-error)}.error:not(:disabled):hover{border-color:var(--color-error-hover);--mdc-filled-button-container-color: var(--color-error-hover);--mdc-filled-button-label-text-color: var(--color-white)}.error:not(:disabled).reverse{--mdc-filled-button-container-color: var(--color-error);--mdc-filled-button-label-text-color: var(--color-white)}.error:not(:disabled).reverse:hover{border-color:var(--color-error-hover);--mdc-filled-button-container-color: var(--color-error-hover)}.error:not(:disabled):active:focus{border-color:var(--color-error-pressed);--mdc-filled-button-label-text-color: var(--color-white);--mdc-filled-button-container-color: var(--color-error-pressed)}.error:disabled:not(.reverse){--mdc-filled-button-disabled-container-color: var(--color-white);--mdc-filled-button-disabled-label-text-color: var(--color-dark-10)}.sm{--mdc-filled-button-container-height: 32px;--mat-filled-button-horizontal-padding: 8px;--mdc-filled-button-label-text-size: 14px}.xs{--mdc-filled-button-container-height: 24px;--mat-filled-button-horizontal-padding: 8px;--mdc-filled-button-label-text-size: 12px}:host::ng-deep .mdc-button__label{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i8.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|