bizz-components 0.1.0 → 0.2.0
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/README.md +165 -121
- package/package.json +20 -26
- package/web/index.d.mts +227 -0
- package/web/index.js +1868 -0
- package/fesm2022/bizz-components.mjs +0 -222
- package/fesm2022/bizz-components.mjs.map +0 -1
- package/index.d.ts +0 -100
- package/src/lib/themes/primitives.css +0 -78
- package/src/lib/themes/theme-dark.css +0 -117
- package/src/lib/themes/theme-light.css +0 -117
- package/src/lib/tokens/tokens.css +0 -85
- package/src/lib/tokens/typography.css +0 -105
|
@@ -1,222 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, output, computed, ChangeDetectionStrategy, Component, HostBinding, signal, forwardRef, viewChild } from '@angular/core';
|
|
3
|
-
import { CommonModule } from '@angular/common';
|
|
4
|
-
import { ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
5
|
-
|
|
6
|
-
class BizzButtonComponent {
|
|
7
|
-
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
8
|
-
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
9
|
-
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
10
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
11
|
-
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
12
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
13
|
-
clicked = output();
|
|
14
|
-
classes = computed(() => {
|
|
15
|
-
const parts = [
|
|
16
|
-
'bizz-button',
|
|
17
|
-
`bizz-button--${this.variant()}`,
|
|
18
|
-
`bizz-button--${this.size()}`,
|
|
19
|
-
];
|
|
20
|
-
if (this.fullWidth())
|
|
21
|
-
parts.push('bizz-button--full-width');
|
|
22
|
-
if (this.loading())
|
|
23
|
-
parts.push('bizz-button--loading');
|
|
24
|
-
return parts.join(' ');
|
|
25
|
-
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
26
|
-
isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
27
|
-
onClick(event) {
|
|
28
|
-
if (!this.isDisabled()) {
|
|
29
|
-
this.clicked.emit(event);
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
33
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BizzButtonComponent, isStandalone: true, selector: "bizz-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n [class]=\"classes()\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClick($event)\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n @if (loading()) {\n <span class=\"bizz-button__spinner\" aria-hidden=\"true\"></span>\n }\n <span class=\"bizz-button__content\" [class.bizz-button__content--hidden]=\"loading()\">\n <ng-content />\n </span>\n</button>\n", styles: [".bizz-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--bizz-spacing-03);position:relative;border:2px solid transparent;border-radius:var(--bizz-radius-md);font-family:var(--bizz-font-family-base);font-weight:var(--bizz-font-weight-semibold);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color var(--bizz-duration-base) var(--bizz-easing-default),border-color var(--bizz-duration-base) var(--bizz-easing-default),color var(--bizz-duration-base) var(--bizz-easing-default),box-shadow var(--bizz-duration-base) var(--bizz-easing-default),transform var(--bizz-duration-fast) var(--bizz-easing-default);-webkit-user-select:none;user-select:none;outline:none}.bizz-button:focus-visible{box-shadow:0 0 0 3px var(--bizz-focus)}.bizz-button:active:not(:disabled){transform:translateY(1px)}.bizz-button--sm{height:2rem;padding:0 var(--bizz-spacing-04);font-size:var(--bizz-font-size-sm);border-radius:var(--bizz-radius-sm)}.bizz-button--md{height:2.5rem;padding:0 var(--bizz-spacing-05);font-size:var(--bizz-font-size-md)}.bizz-button--lg{height:3rem;padding:0 var(--bizz-spacing-06);font-size:var(--bizz-font-size-lg);border-radius:var(--bizz-radius-lg)}.bizz-button--primary{background-color:var(--bizz-button-primary);border-color:var(--bizz-button-primary);color:var(--bizz-text-on-color)}.bizz-button--primary:hover:not(:disabled){background-color:var(--bizz-button-primary-hover);border-color:var(--bizz-button-primary-hover);box-shadow:var(--bizz-shadow-md)}.bizz-button--primary:active:not(:disabled){background-color:var(--bizz-button-primary-active);border-color:var(--bizz-button-primary-active)}.bizz-button--secondary{background-color:transparent;border-color:var(--bizz-button-secondary);color:var(--bizz-button-secondary)}.bizz-button--secondary:hover:not(:disabled){background-color:var(--bizz-background-hover);border-color:var(--bizz-button-secondary-hover);color:var(--bizz-button-secondary-hover);box-shadow:var(--bizz-shadow-sm)}.bizz-button--secondary:active:not(:disabled){background-color:var(--bizz-background-active);border-color:var(--bizz-button-secondary-active);color:var(--bizz-button-secondary-active)}.bizz-button--disabled{background-color:transparent;border-color:transparent;color:var(--bizz-text-secondary)}.bizz-button--disabled:hover:not(:disabled){background-color:var(--bizz-background-hover);color:var(--bizz-text-primary)}.bizz-button--disabled:active:not(:disabled){background-color:var(--bizz-background-active)}.bizz-button--danger{background-color:var(--bizz-button-danger);border-color:var(--bizz-button-danger);color:var(--bizz-text-on-color)}.bizz-button--danger:hover:not(:disabled){background-color:var(--bizz-button-danger-hover);border-color:var(--bizz-button-danger-hover);box-shadow:var(--bizz-shadow-md)}.bizz-button--danger:active:not(:disabled){background-color:var(--bizz-button-danger-active);border-color:var(--bizz-button-danger-active)}.bizz-button:disabled{background-color:var(--bizz-button-disabled);border-color:var(--bizz-button-disabled);color:var(--bizz-text-on-color-disabled);cursor:not-allowed;transform:none;box-shadow:none}.bizz-button--full-width{width:100%}.bizz-button--loading{cursor:wait}.bizz-button__content--hidden{opacity:0}.bizz-button__spinner{position:absolute;width:1em;height:1em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:bizz-spin .6s linear infinite}@keyframes bizz-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
34
|
-
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzButtonComponent, decorators: [{
|
|
36
|
-
type: Component,
|
|
37
|
-
args: [{ selector: 'bizz-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [class]=\"classes()\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClick($event)\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n @if (loading()) {\n <span class=\"bizz-button__spinner\" aria-hidden=\"true\"></span>\n }\n <span class=\"bizz-button__content\" [class.bizz-button__content--hidden]=\"loading()\">\n <ng-content />\n </span>\n</button>\n", styles: [".bizz-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--bizz-spacing-03);position:relative;border:2px solid transparent;border-radius:var(--bizz-radius-md);font-family:var(--bizz-font-family-base);font-weight:var(--bizz-font-weight-semibold);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color var(--bizz-duration-base) var(--bizz-easing-default),border-color var(--bizz-duration-base) var(--bizz-easing-default),color var(--bizz-duration-base) var(--bizz-easing-default),box-shadow var(--bizz-duration-base) var(--bizz-easing-default),transform var(--bizz-duration-fast) var(--bizz-easing-default);-webkit-user-select:none;user-select:none;outline:none}.bizz-button:focus-visible{box-shadow:0 0 0 3px var(--bizz-focus)}.bizz-button:active:not(:disabled){transform:translateY(1px)}.bizz-button--sm{height:2rem;padding:0 var(--bizz-spacing-04);font-size:var(--bizz-font-size-sm);border-radius:var(--bizz-radius-sm)}.bizz-button--md{height:2.5rem;padding:0 var(--bizz-spacing-05);font-size:var(--bizz-font-size-md)}.bizz-button--lg{height:3rem;padding:0 var(--bizz-spacing-06);font-size:var(--bizz-font-size-lg);border-radius:var(--bizz-radius-lg)}.bizz-button--primary{background-color:var(--bizz-button-primary);border-color:var(--bizz-button-primary);color:var(--bizz-text-on-color)}.bizz-button--primary:hover:not(:disabled){background-color:var(--bizz-button-primary-hover);border-color:var(--bizz-button-primary-hover);box-shadow:var(--bizz-shadow-md)}.bizz-button--primary:active:not(:disabled){background-color:var(--bizz-button-primary-active);border-color:var(--bizz-button-primary-active)}.bizz-button--secondary{background-color:transparent;border-color:var(--bizz-button-secondary);color:var(--bizz-button-secondary)}.bizz-button--secondary:hover:not(:disabled){background-color:var(--bizz-background-hover);border-color:var(--bizz-button-secondary-hover);color:var(--bizz-button-secondary-hover);box-shadow:var(--bizz-shadow-sm)}.bizz-button--secondary:active:not(:disabled){background-color:var(--bizz-background-active);border-color:var(--bizz-button-secondary-active);color:var(--bizz-button-secondary-active)}.bizz-button--disabled{background-color:transparent;border-color:transparent;color:var(--bizz-text-secondary)}.bizz-button--disabled:hover:not(:disabled){background-color:var(--bizz-background-hover);color:var(--bizz-text-primary)}.bizz-button--disabled:active:not(:disabled){background-color:var(--bizz-background-active)}.bizz-button--danger{background-color:var(--bizz-button-danger);border-color:var(--bizz-button-danger);color:var(--bizz-text-on-color)}.bizz-button--danger:hover:not(:disabled){background-color:var(--bizz-button-danger-hover);border-color:var(--bizz-button-danger-hover);box-shadow:var(--bizz-shadow-md)}.bizz-button--danger:active:not(:disabled){background-color:var(--bizz-button-danger-active);border-color:var(--bizz-button-danger-active)}.bizz-button:disabled{background-color:var(--bizz-button-disabled);border-color:var(--bizz-button-disabled);color:var(--bizz-text-on-color-disabled);cursor:not-allowed;transform:none;box-shadow:none}.bizz-button--full-width{width:100%}.bizz-button--loading{cursor:wait}.bizz-button__content--hidden{opacity:0}.bizz-button__spinner{position:absolute;width:1em;height:1em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:bizz-spin .6s linear infinite}@keyframes bizz-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
38
|
-
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
39
|
-
|
|
40
|
-
class BizzTagComponent {
|
|
41
|
-
color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
42
|
-
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
43
|
-
dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : []));
|
|
44
|
-
dismissed = output();
|
|
45
|
-
get hostClasses() {
|
|
46
|
-
return `bizz-tag bizz-tag--${this.color()} bizz-tag--${this.size()}`;
|
|
47
|
-
}
|
|
48
|
-
onDismiss(event) {
|
|
49
|
-
event.stopPropagation();
|
|
50
|
-
this.dismissed.emit();
|
|
51
|
-
}
|
|
52
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BizzTagComponent, isStandalone: true, selector: "bizz-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<span class=\"bizz-tag__label\"><ng-content /></span>\n@if (dismissible()) {\n <button\n class=\"bizz-tag__dismiss\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"onDismiss($event)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M9 3L3 9M3 3l6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--bizz-spacing-02);border-radius:var(--bizz-radius-full);font-family:var(--bizz-font-family-base);font-weight:var(--bizz-font-weight-medium);white-space:nowrap;width:fit-content}:host(.bizz-tag--sm){height:1.25rem;padding:0 var(--bizz-spacing-03);font-size:var(--bizz-font-size-xs)}:host(.bizz-tag--md){height:1.5rem;padding:0 var(--bizz-spacing-03);font-size:var(--bizz-font-size-sm)}:host(.bizz-tag--primary){background-color:var(--bizz-tag-primary-bg);color:var(--bizz-tag-primary-text)}:host(.bizz-tag--primary:hover){background-color:var(--bizz-tag-primary-hover)}:host(.bizz-tag--secondary){background-color:var(--bizz-tag-secondary-bg);color:var(--bizz-tag-secondary-text)}:host(.bizz-tag--secondary:hover){background-color:var(--bizz-tag-secondary-hover)}:host(.bizz-tag--success){background-color:var(--bizz-tag-success-bg);color:var(--bizz-tag-success-text)}:host(.bizz-tag--success:hover){background-color:var(--bizz-tag-success-hover)}:host(.bizz-tag--warning){background-color:var(--bizz-tag-warning-bg);color:var(--bizz-tag-warning-text)}:host(.bizz-tag--warning:hover){background-color:var(--bizz-tag-warning-hover)}:host(.bizz-tag--error){background-color:var(--bizz-tag-error-bg);color:var(--bizz-tag-error-text)}:host(.bizz-tag--error:hover){background-color:var(--bizz-tag-error-hover)}.bizz-tag__dismiss{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:inherit;opacity:.7;transition:opacity var(--bizz-duration-fast) var(--bizz-easing-default);line-height:1}.bizz-tag__dismiss:hover{opacity:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
54
|
-
}
|
|
55
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzTagComponent, decorators: [{
|
|
56
|
-
type: Component,
|
|
57
|
-
args: [{ selector: 'bizz-tag', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"bizz-tag__label\"><ng-content /></span>\n@if (dismissible()) {\n <button\n class=\"bizz-tag__dismiss\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"onDismiss($event)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M9 3L3 9M3 3l6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--bizz-spacing-02);border-radius:var(--bizz-radius-full);font-family:var(--bizz-font-family-base);font-weight:var(--bizz-font-weight-medium);white-space:nowrap;width:fit-content}:host(.bizz-tag--sm){height:1.25rem;padding:0 var(--bizz-spacing-03);font-size:var(--bizz-font-size-xs)}:host(.bizz-tag--md){height:1.5rem;padding:0 var(--bizz-spacing-03);font-size:var(--bizz-font-size-sm)}:host(.bizz-tag--primary){background-color:var(--bizz-tag-primary-bg);color:var(--bizz-tag-primary-text)}:host(.bizz-tag--primary:hover){background-color:var(--bizz-tag-primary-hover)}:host(.bizz-tag--secondary){background-color:var(--bizz-tag-secondary-bg);color:var(--bizz-tag-secondary-text)}:host(.bizz-tag--secondary:hover){background-color:var(--bizz-tag-secondary-hover)}:host(.bizz-tag--success){background-color:var(--bizz-tag-success-bg);color:var(--bizz-tag-success-text)}:host(.bizz-tag--success:hover){background-color:var(--bizz-tag-success-hover)}:host(.bizz-tag--warning){background-color:var(--bizz-tag-warning-bg);color:var(--bizz-tag-warning-text)}:host(.bizz-tag--warning:hover){background-color:var(--bizz-tag-warning-hover)}:host(.bizz-tag--error){background-color:var(--bizz-tag-error-bg);color:var(--bizz-tag-error-text)}:host(.bizz-tag--error:hover){background-color:var(--bizz-tag-error-hover)}.bizz-tag__dismiss{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:inherit;opacity:.7;transition:opacity var(--bizz-duration-fast) var(--bizz-easing-default);line-height:1}.bizz-tag__dismiss:hover{opacity:1}\n"] }]
|
|
58
|
-
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], hostClasses: [{
|
|
59
|
-
type: HostBinding,
|
|
60
|
-
args: ['class']
|
|
61
|
-
}] } });
|
|
62
|
-
|
|
63
|
-
class BizzCardComponent {
|
|
64
|
-
elevation = input('raised', ...(ngDevMode ? [{ debugName: "elevation" }] : []));
|
|
65
|
-
clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
|
|
66
|
-
padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : []));
|
|
67
|
-
get hostClasses() {
|
|
68
|
-
const classes = [
|
|
69
|
-
'bizz-card',
|
|
70
|
-
`bizz-card--${this.elevation()}`,
|
|
71
|
-
`bizz-card--padding-${this.padding()}`,
|
|
72
|
-
];
|
|
73
|
-
if (this.clickable())
|
|
74
|
-
classes.push('bizz-card--clickable');
|
|
75
|
-
return classes.join(' ');
|
|
76
|
-
}
|
|
77
|
-
get role() {
|
|
78
|
-
return this.clickable() ? 'button' : null;
|
|
79
|
-
}
|
|
80
|
-
get tabIndex() {
|
|
81
|
-
return this.clickable() ? 0 : null;
|
|
82
|
-
}
|
|
83
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
84
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: BizzCardComponent, isStandalone: true, selector: "bizz-card", inputs: { elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses", "attr.role": "this.role", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: "<ng-content select=\"[card-media]\" />\n\n<div class=\"bizz-card__body\">\n <ng-content select=\"[card-header]\" />\n <ng-content />\n <ng-content select=\"[card-footer]\" />\n</div>\n", styles: [":host{display:block;font-family:var(--bizz-font-family-base);background-color:var(--bizz-layer-02);border:1px solid var(--bizz-border-subtle-01);border-radius:var(--bizz-radius-lg);overflow:hidden;transition:box-shadow var(--bizz-duration-base) var(--bizz-easing-default),transform var(--bizz-duration-fast) var(--bizz-easing-default),border-color var(--bizz-duration-base) var(--bizz-easing-default)}:host(.bizz-card--flat){box-shadow:none}:host(.bizz-card--raised){box-shadow:var(--bizz-shadow-sm)}:host(.bizz-card--padding-none) .bizz-card__body{padding:0}:host(.bizz-card--padding-sm) .bizz-card__body{padding:var(--bizz-spacing-04)}:host(.bizz-card--padding-md) .bizz-card__body{padding:var(--bizz-spacing-06)}:host(.bizz-card--padding-lg) .bizz-card__body{padding:var(--bizz-spacing-08)}:host(.bizz-card--clickable){cursor:pointer;outline:none}:host(.bizz-card--clickable:hover){border-color:var(--bizz-border-interactive);box-shadow:var(--bizz-shadow-md);transform:translateY(-2px)}:host(.bizz-card--clickable:active){transform:translateY(0);box-shadow:var(--bizz-shadow-sm)}:host(.bizz-card--clickable:focus-visible){box-shadow:0 0 0 3px var(--bizz-focus)}::ng-deep [card-media]{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;overflow:hidden}::ng-deep [card-media] img{width:100%;height:100%;object-fit:cover;display:block}::ng-deep [card-header]{display:block;margin-bottom:var(--bizz-spacing-04)}::ng-deep [card-footer]{display:block;margin-top:var(--bizz-spacing-05);padding-top:var(--bizz-spacing-04);border-top:1px solid var(--bizz-border-subtle-00)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
85
|
-
}
|
|
86
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzCardComponent, decorators: [{
|
|
87
|
-
type: Component,
|
|
88
|
-
args: [{ selector: 'bizz-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[card-media]\" />\n\n<div class=\"bizz-card__body\">\n <ng-content select=\"[card-header]\" />\n <ng-content />\n <ng-content select=\"[card-footer]\" />\n</div>\n", styles: [":host{display:block;font-family:var(--bizz-font-family-base);background-color:var(--bizz-layer-02);border:1px solid var(--bizz-border-subtle-01);border-radius:var(--bizz-radius-lg);overflow:hidden;transition:box-shadow var(--bizz-duration-base) var(--bizz-easing-default),transform var(--bizz-duration-fast) var(--bizz-easing-default),border-color var(--bizz-duration-base) var(--bizz-easing-default)}:host(.bizz-card--flat){box-shadow:none}:host(.bizz-card--raised){box-shadow:var(--bizz-shadow-sm)}:host(.bizz-card--padding-none) .bizz-card__body{padding:0}:host(.bizz-card--padding-sm) .bizz-card__body{padding:var(--bizz-spacing-04)}:host(.bizz-card--padding-md) .bizz-card__body{padding:var(--bizz-spacing-06)}:host(.bizz-card--padding-lg) .bizz-card__body{padding:var(--bizz-spacing-08)}:host(.bizz-card--clickable){cursor:pointer;outline:none}:host(.bizz-card--clickable:hover){border-color:var(--bizz-border-interactive);box-shadow:var(--bizz-shadow-md);transform:translateY(-2px)}:host(.bizz-card--clickable:active){transform:translateY(0);box-shadow:var(--bizz-shadow-sm)}:host(.bizz-card--clickable:focus-visible){box-shadow:0 0 0 3px var(--bizz-focus)}::ng-deep [card-media]{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;overflow:hidden}::ng-deep [card-media] img{width:100%;height:100%;object-fit:cover;display:block}::ng-deep [card-header]{display:block;margin-bottom:var(--bizz-spacing-04)}::ng-deep [card-footer]{display:block;margin-top:var(--bizz-spacing-05);padding-top:var(--bizz-spacing-04);border-top:1px solid var(--bizz-border-subtle-00)}\n"] }]
|
|
89
|
-
}], propDecorators: { elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hostClasses: [{
|
|
90
|
-
type: HostBinding,
|
|
91
|
-
args: ['class']
|
|
92
|
-
}], role: [{
|
|
93
|
-
type: HostBinding,
|
|
94
|
-
args: ['attr.role']
|
|
95
|
-
}], tabIndex: [{
|
|
96
|
-
type: HostBinding,
|
|
97
|
-
args: ['attr.tabindex']
|
|
98
|
-
}] } });
|
|
99
|
-
|
|
100
|
-
class BizzInputComponent {
|
|
101
|
-
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
102
|
-
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
103
|
-
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
104
|
-
helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : []));
|
|
105
|
-
errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : []));
|
|
106
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
107
|
-
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
108
|
-
value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
109
|
-
touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
110
|
-
hasError = computed(() => this.touched() && (!!this.errorText() || (this.required() && !this.value().trim())), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
|
|
111
|
-
errorMessage = computed(() => this.errorText(), ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
|
|
112
|
-
onChange = (_) => { };
|
|
113
|
-
onTouched = () => { };
|
|
114
|
-
hostClass = 'bizz-input-wrapper';
|
|
115
|
-
onInput(event) {
|
|
116
|
-
const val = event.target.value;
|
|
117
|
-
this.value.set(val);
|
|
118
|
-
this.onChange(val);
|
|
119
|
-
}
|
|
120
|
-
onBlur() {
|
|
121
|
-
this.touched.set(true);
|
|
122
|
-
this.onTouched();
|
|
123
|
-
}
|
|
124
|
-
writeValue(val) {
|
|
125
|
-
this.value.set(val ?? '');
|
|
126
|
-
}
|
|
127
|
-
registerOnChange(fn) {
|
|
128
|
-
this.onChange = fn;
|
|
129
|
-
}
|
|
130
|
-
registerOnTouched(fn) {
|
|
131
|
-
this.onTouched = fn;
|
|
132
|
-
}
|
|
133
|
-
setDisabledState(disabled) {
|
|
134
|
-
// handled via input signal
|
|
135
|
-
}
|
|
136
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
137
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BizzInputComponent, isStandalone: true, selector: "bizz-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [{
|
|
138
|
-
provide: NG_VALUE_ACCESSOR,
|
|
139
|
-
useExisting: forwardRef(() => BizzInputComponent),
|
|
140
|
-
multi: true,
|
|
141
|
-
}], ngImport: i0, template: "@if (label()) {\n <label class=\"bizz-input__label\">{{ label() }}</label>\n}\n\n<div class=\"bizz-input__field-wrapper\" [class.bizz-input__field-wrapper--error]=\"hasError()\" [class.bizz-input__field-wrapper--disabled]=\"disabled()\">\n <ng-content select=\"[input-prefix]\" />\n <input\n class=\"bizz-input__field\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"hasError() ? 'error' : helperText() ? 'helper' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <ng-content select=\"[input-suffix]\" />\n</div>\n\n@if (hasError()) {\n <span class=\"bizz-input__error\" id=\"error\" role=\"alert\">{{ errorMessage() }}</span>\n} @else if (helperText()) {\n <span class=\"bizz-input__helper\" id=\"helper\">{{ helperText() }}</span>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--bizz-spacing-02);font-family:var(--bizz-font-family-base)}.bizz-input__label{font-size:var(--bizz-font-size-sm);font-weight:var(--bizz-font-weight-semibold);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-normal)}.bizz-input__field-wrapper{display:flex;align-items:center;gap:var(--bizz-spacing-03);border:1px solid var(--bizz-border-strong-01);border-radius:var(--bizz-radius-md);padding:0 var(--bizz-spacing-04);height:2.5rem;transition:border-color var(--bizz-duration-base) var(--bizz-easing-default),box-shadow var(--bizz-duration-base) var(--bizz-easing-default)}.bizz-input__field-wrapper:focus-within{border-color:var(--bizz-focus);box-shadow:0 0 0 2px var(--bizz-focus);outline:none}.bizz-input__field-wrapper--error{border-color:var(--bizz-support-error)}.bizz-input__field-wrapper--error:focus-within{box-shadow:0 0 0 2px var(--bizz-support-error)}.bizz-input__field-wrapper--disabled{opacity:.5;cursor:not-allowed;background-color:var(--bizz-field-hover-01)}.bizz-input__field{flex:1;border:none;outline:none;background:transparent;font-family:var(--bizz-font-family-base);font-size:var(--bizz-font-size-md);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-normal);min-width:0}.bizz-input__field::placeholder{color:var(--bizz-text-placeholder)}.bizz-input__field:disabled{cursor:not-allowed}.bizz-input__helper{font-size:var(--bizz-font-size-xs);color:var(--bizz-text-helper);line-height:var(--bizz-line-height-normal)}.bizz-input__error{font-size:var(--bizz-font-size-xs);color:var(--bizz-support-error);line-height:var(--bizz-line-height-normal)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
142
|
-
}
|
|
143
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzInputComponent, decorators: [{
|
|
144
|
-
type: Component,
|
|
145
|
-
args: [{ selector: 'bizz-input', standalone: true, imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
146
|
-
provide: NG_VALUE_ACCESSOR,
|
|
147
|
-
useExisting: forwardRef(() => BizzInputComponent),
|
|
148
|
-
multi: true,
|
|
149
|
-
}], template: "@if (label()) {\n <label class=\"bizz-input__label\">{{ label() }}</label>\n}\n\n<div class=\"bizz-input__field-wrapper\" [class.bizz-input__field-wrapper--error]=\"hasError()\" [class.bizz-input__field-wrapper--disabled]=\"disabled()\">\n <ng-content select=\"[input-prefix]\" />\n <input\n class=\"bizz-input__field\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"hasError() ? 'error' : helperText() ? 'helper' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <ng-content select=\"[input-suffix]\" />\n</div>\n\n@if (hasError()) {\n <span class=\"bizz-input__error\" id=\"error\" role=\"alert\">{{ errorMessage() }}</span>\n} @else if (helperText()) {\n <span class=\"bizz-input__helper\" id=\"helper\">{{ helperText() }}</span>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--bizz-spacing-02);font-family:var(--bizz-font-family-base)}.bizz-input__label{font-size:var(--bizz-font-size-sm);font-weight:var(--bizz-font-weight-semibold);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-normal)}.bizz-input__field-wrapper{display:flex;align-items:center;gap:var(--bizz-spacing-03);border:1px solid var(--bizz-border-strong-01);border-radius:var(--bizz-radius-md);padding:0 var(--bizz-spacing-04);height:2.5rem;transition:border-color var(--bizz-duration-base) var(--bizz-easing-default),box-shadow var(--bizz-duration-base) var(--bizz-easing-default)}.bizz-input__field-wrapper:focus-within{border-color:var(--bizz-focus);box-shadow:0 0 0 2px var(--bizz-focus);outline:none}.bizz-input__field-wrapper--error{border-color:var(--bizz-support-error)}.bizz-input__field-wrapper--error:focus-within{box-shadow:0 0 0 2px var(--bizz-support-error)}.bizz-input__field-wrapper--disabled{opacity:.5;cursor:not-allowed;background-color:var(--bizz-field-hover-01)}.bizz-input__field{flex:1;border:none;outline:none;background:transparent;font-family:var(--bizz-font-family-base);font-size:var(--bizz-font-size-md);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-normal);min-width:0}.bizz-input__field::placeholder{color:var(--bizz-text-placeholder)}.bizz-input__field:disabled{cursor:not-allowed}.bizz-input__helper{font-size:var(--bizz-font-size-xs);color:var(--bizz-text-helper);line-height:var(--bizz-line-height-normal)}.bizz-input__error{font-size:var(--bizz-font-size-xs);color:var(--bizz-support-error);line-height:var(--bizz-line-height-normal)}\n"] }]
|
|
150
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hostClass: [{
|
|
151
|
-
type: HostBinding,
|
|
152
|
-
args: ['class']
|
|
153
|
-
}] } });
|
|
154
|
-
|
|
155
|
-
class BizzTextareaComponent {
|
|
156
|
-
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
157
|
-
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
158
|
-
helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : []));
|
|
159
|
-
errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : []));
|
|
160
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
161
|
-
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
162
|
-
rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : []));
|
|
163
|
-
autoResize = input(false, ...(ngDevMode ? [{ debugName: "autoResize" }] : []));
|
|
164
|
-
value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
165
|
-
touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
166
|
-
hasError = computed(() => this.touched() && (!!this.errorText() || (this.required() && !this.value().trim())), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
|
|
167
|
-
errorMessage = computed(() => this.errorText(), ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
|
|
168
|
-
textareaRef = viewChild('textarea', ...(ngDevMode ? [{ debugName: "textareaRef" }] : []));
|
|
169
|
-
onChange = (_) => { };
|
|
170
|
-
onTouched = () => { };
|
|
171
|
-
hostClass = 'bizz-textarea-wrapper';
|
|
172
|
-
onInput(event) {
|
|
173
|
-
const el = event.target;
|
|
174
|
-
this.value.set(el.value);
|
|
175
|
-
this.onChange(el.value);
|
|
176
|
-
if (this.autoResize()) {
|
|
177
|
-
el.style.height = 'auto';
|
|
178
|
-
el.style.height = el.scrollHeight + 'px';
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
onBlur() {
|
|
182
|
-
this.touched.set(true);
|
|
183
|
-
this.onTouched();
|
|
184
|
-
}
|
|
185
|
-
writeValue(val) {
|
|
186
|
-
this.value.set(val ?? '');
|
|
187
|
-
}
|
|
188
|
-
registerOnChange(fn) {
|
|
189
|
-
this.onChange = fn;
|
|
190
|
-
}
|
|
191
|
-
registerOnTouched(fn) {
|
|
192
|
-
this.onTouched = fn;
|
|
193
|
-
}
|
|
194
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
195
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BizzTextareaComponent, isStandalone: true, selector: "bizz-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [{
|
|
196
|
-
provide: NG_VALUE_ACCESSOR,
|
|
197
|
-
useExisting: forwardRef(() => BizzTextareaComponent),
|
|
198
|
-
multi: true,
|
|
199
|
-
}], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <label class=\"bizz-textarea__label\">{{ label() }}</label>\n}\n\n<div class=\"bizz-textarea__field-wrapper\" [class.bizz-textarea__field-wrapper--error]=\"hasError()\" [class.bizz-textarea__field-wrapper--disabled]=\"disabled()\">\n <textarea\n #textarea\n class=\"bizz-textarea__field\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [rows]=\"rows()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"hasError() ? 'ta-error' : helperText() ? 'ta-helper' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n >{{ value() }}</textarea>\n</div>\n\n@if (hasError()) {\n <span class=\"bizz-textarea__error\" id=\"ta-error\" role=\"alert\">{{ errorMessage() }}</span>\n} @else if (helperText()) {\n <span class=\"bizz-textarea__helper\" id=\"ta-helper\">{{ helperText() }}</span>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--bizz-spacing-02);font-family:var(--bizz-font-family-base)}.bizz-textarea__label{font-size:var(--bizz-font-size-sm);font-weight:var(--bizz-font-weight-semibold);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-normal)}.bizz-textarea__field-wrapper{border:1px solid var(--bizz-border-strong-01);border-radius:var(--bizz-radius-md);padding:var(--bizz-spacing-03) var(--bizz-spacing-04);transition:border-color var(--bizz-duration-base) var(--bizz-easing-default),box-shadow var(--bizz-duration-base) var(--bizz-easing-default)}.bizz-textarea__field-wrapper:focus-within{border-color:var(--bizz-focus);box-shadow:0 0 0 2px var(--bizz-focus);outline:none}.bizz-textarea__field-wrapper--error{border-color:var(--bizz-support-error)}.bizz-textarea__field-wrapper--error:focus-within{box-shadow:0 0 0 2px var(--bizz-support-error)}.bizz-textarea__field-wrapper--disabled{opacity:.5;cursor:not-allowed;background-color:var(--bizz-field-hover-01)}.bizz-textarea__field{width:100%;border:none;outline:none;background:transparent;font-family:var(--bizz-font-family-base);font-size:var(--bizz-font-size-md);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-relaxed);resize:vertical;box-sizing:border-box}.bizz-textarea__field::placeholder{color:var(--bizz-text-placeholder)}.bizz-textarea__field:disabled{cursor:not-allowed;resize:none}.bizz-textarea__helper{font-size:var(--bizz-font-size-xs);color:var(--bizz-text-helper);line-height:var(--bizz-line-height-normal)}.bizz-textarea__error{font-size:var(--bizz-font-size-xs);color:var(--bizz-support-error);line-height:var(--bizz-line-height-normal)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
200
|
-
}
|
|
201
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzTextareaComponent, decorators: [{
|
|
202
|
-
type: Component,
|
|
203
|
-
args: [{ selector: 'bizz-textarea', standalone: true, imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
204
|
-
provide: NG_VALUE_ACCESSOR,
|
|
205
|
-
useExisting: forwardRef(() => BizzTextareaComponent),
|
|
206
|
-
multi: true,
|
|
207
|
-
}], template: "@if (label()) {\n <label class=\"bizz-textarea__label\">{{ label() }}</label>\n}\n\n<div class=\"bizz-textarea__field-wrapper\" [class.bizz-textarea__field-wrapper--error]=\"hasError()\" [class.bizz-textarea__field-wrapper--disabled]=\"disabled()\">\n <textarea\n #textarea\n class=\"bizz-textarea__field\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [rows]=\"rows()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"hasError() ? 'ta-error' : helperText() ? 'ta-helper' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n >{{ value() }}</textarea>\n</div>\n\n@if (hasError()) {\n <span class=\"bizz-textarea__error\" id=\"ta-error\" role=\"alert\">{{ errorMessage() }}</span>\n} @else if (helperText()) {\n <span class=\"bizz-textarea__helper\" id=\"ta-helper\">{{ helperText() }}</span>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--bizz-spacing-02);font-family:var(--bizz-font-family-base)}.bizz-textarea__label{font-size:var(--bizz-font-size-sm);font-weight:var(--bizz-font-weight-semibold);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-normal)}.bizz-textarea__field-wrapper{border:1px solid var(--bizz-border-strong-01);border-radius:var(--bizz-radius-md);padding:var(--bizz-spacing-03) var(--bizz-spacing-04);transition:border-color var(--bizz-duration-base) var(--bizz-easing-default),box-shadow var(--bizz-duration-base) var(--bizz-easing-default)}.bizz-textarea__field-wrapper:focus-within{border-color:var(--bizz-focus);box-shadow:0 0 0 2px var(--bizz-focus);outline:none}.bizz-textarea__field-wrapper--error{border-color:var(--bizz-support-error)}.bizz-textarea__field-wrapper--error:focus-within{box-shadow:0 0 0 2px var(--bizz-support-error)}.bizz-textarea__field-wrapper--disabled{opacity:.5;cursor:not-allowed;background-color:var(--bizz-field-hover-01)}.bizz-textarea__field{width:100%;border:none;outline:none;background:transparent;font-family:var(--bizz-font-family-base);font-size:var(--bizz-font-size-md);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-relaxed);resize:vertical;box-sizing:border-box}.bizz-textarea__field::placeholder{color:var(--bizz-text-placeholder)}.bizz-textarea__field:disabled{cursor:not-allowed;resize:none}.bizz-textarea__helper{font-size:var(--bizz-font-size-xs);color:var(--bizz-text-helper);line-height:var(--bizz-line-height-normal)}.bizz-textarea__error{font-size:var(--bizz-font-size-xs);color:var(--bizz-support-error);line-height:var(--bizz-line-height-normal)}\n"] }]
|
|
208
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], textareaRef: [{ type: i0.ViewChild, args: ['textarea', { isSignal: true }] }], hostClass: [{
|
|
209
|
-
type: HostBinding,
|
|
210
|
-
args: ['class']
|
|
211
|
-
}] } });
|
|
212
|
-
|
|
213
|
-
/*
|
|
214
|
-
* Public API Surface of bizz-components
|
|
215
|
-
*/
|
|
216
|
-
|
|
217
|
-
/**
|
|
218
|
-
* Generated bundle index. Do not edit.
|
|
219
|
-
*/
|
|
220
|
-
|
|
221
|
-
export { BizzButtonComponent, BizzCardComponent, BizzInputComponent, BizzTagComponent, BizzTextareaComponent };
|
|
222
|
-
//# sourceMappingURL=bizz-components.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"bizz-components.mjs","sources":["../../../projects/bizz-components/src/lib/button/button.component.ts","../../../projects/bizz-components/src/lib/button/button.component.html","../../../projects/bizz-components/src/lib/tag/tag.component.ts","../../../projects/bizz-components/src/lib/tag/tag.component.html","../../../projects/bizz-components/src/lib/card/card.component.ts","../../../projects/bizz-components/src/lib/card/card.component.html","../../../projects/bizz-components/src/lib/input/input.component.ts","../../../projects/bizz-components/src/lib/input/input.component.html","../../../projects/bizz-components/src/lib/textarea/textarea.component.ts","../../../projects/bizz-components/src/lib/textarea/textarea.component.html","../../../projects/bizz-components/src/public-api.ts","../../../projects/bizz-components/src/bizz-components.ts"],"sourcesContent":["import { Component, input, output, computed, ChangeDetectionStrategy } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'disabled' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonType = 'button' | 'submit' | 'reset';\n\n@Component({\n selector: 'bizz-button',\n standalone: true,\n imports: [CommonModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './button.component.html',\n styleUrl: './button.component.css',\n})\nexport class BizzButtonComponent {\n variant = input<ButtonVariant>('primary');\n size = input<ButtonSize>('md');\n type = input<ButtonType>('button');\n disabled = input<boolean>(false);\n loading = input<boolean>(false);\n fullWidth = input<boolean>(false);\n\n clicked = output<MouseEvent>();\n\n classes = computed(() => {\n const parts = [\n 'bizz-button',\n `bizz-button--${this.variant()}`,\n `bizz-button--${this.size()}`,\n ];\n if (this.fullWidth()) parts.push('bizz-button--full-width');\n if (this.loading()) parts.push('bizz-button--loading');\n return parts.join(' ');\n });\n\n isDisabled = computed(() => this.disabled() || this.loading());\n\n onClick(event: MouseEvent): void {\n if (!this.isDisabled()) {\n this.clicked.emit(event);\n }\n }\n}\n","<button\n [class]=\"classes()\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClick($event)\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n @if (loading()) {\n <span class=\"bizz-button__spinner\" aria-hidden=\"true\"></span>\n }\n <span class=\"bizz-button__content\" [class.bizz-button__content--hidden]=\"loading()\">\n <ng-content />\n </span>\n</button>\n","import { Component, input, output, computed, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n\nexport type TagColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success';\n\nexport type TagSize = 'sm' | 'md';\n\n@Component({\n selector: 'bizz-tag',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './tag.component.html',\n styleUrl: './tag.component.css',\n})\nexport class BizzTagComponent {\n color = input<TagColor>('primary');\n size = input<TagSize>('md');\n dismissible = input<boolean>(false);\n\n dismissed = output<void>();\n\n @HostBinding('class')\n get hostClasses(): string {\n return `bizz-tag bizz-tag--${this.color()} bizz-tag--${this.size()}`;\n }\n\n onDismiss(event: MouseEvent): void {\n event.stopPropagation();\n this.dismissed.emit();\n }\n}\n","<span class=\"bizz-tag__label\"><ng-content /></span>\n@if (dismissible()) {\n <button\n class=\"bizz-tag__dismiss\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"onDismiss($event)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M9 3L3 9M3 3l6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n}\n","import { Component, input, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n\nexport type CardElevation = 'flat' | 'raised';\n\n@Component({\n selector: 'bizz-card',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './card.component.html',\n styleUrl: './card.component.css',\n})\nexport class BizzCardComponent {\n elevation = input<CardElevation>('raised');\n clickable = input<boolean>(false);\n padding = input<'none' | 'sm' | 'md' | 'lg'>('md');\n\n @HostBinding('class')\n get hostClasses(): string {\n const classes = [\n 'bizz-card',\n `bizz-card--${this.elevation()}`,\n `bizz-card--padding-${this.padding()}`,\n ];\n if (this.clickable()) classes.push('bizz-card--clickable');\n return classes.join(' ');\n }\n\n @HostBinding('attr.role')\n get role(): string | null {\n return this.clickable() ? 'button' : null;\n }\n\n @HostBinding('attr.tabindex')\n get tabIndex(): number | null {\n return this.clickable() ? 0 : null;\n }\n}\n","<ng-content select=\"[card-media]\" />\n\n<div class=\"bizz-card__body\">\n <ng-content select=\"[card-header]\" />\n <ng-content />\n <ng-content select=\"[card-footer]\" />\n</div>\n","import {\n Component, input, signal, computed,\n ChangeDetectionStrategy, forwardRef, HostBinding\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\n\nexport type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';\n\n@Component({\n selector: 'bizz-input',\n standalone: true,\n imports: [ReactiveFormsModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './input.component.html',\n styleUrl: './input.component.css',\n providers: [{\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => BizzInputComponent),\n multi: true,\n }],\n})\nexport class BizzInputComponent implements ControlValueAccessor {\n label = input<string>('');\n placeholder = input<string>('');\n type = input<InputType>('text');\n helperText = input<string>('');\n errorText = input<string>('');\n disabled = input<boolean>(false);\n required = input<boolean>(false);\n\n value = signal<string>('');\n touched = signal<boolean>(false);\n\n hasError = computed(() =>\n this.touched() && (!!this.errorText() || (this.required() && !this.value().trim()))\n );\n\n errorMessage = computed(() => this.errorText());\n\n private onChange = (_: string) => {};\n private onTouched = () => {};\n\n @HostBinding('class') hostClass = 'bizz-input-wrapper';\n\n onInput(event: Event): void {\n const val = (event.target as HTMLInputElement).value;\n this.value.set(val);\n this.onChange(val);\n }\n\n onBlur(): void {\n this.touched.set(true);\n this.onTouched();\n }\n\n writeValue(val: string): void {\n this.value.set(val ?? '');\n }\n\n registerOnChange(fn: (_: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(disabled: boolean): void {\n // handled via input signal\n }\n}\n","@if (label()) {\n <label class=\"bizz-input__label\">{{ label() }}</label>\n}\n\n<div class=\"bizz-input__field-wrapper\" [class.bizz-input__field-wrapper--error]=\"hasError()\" [class.bizz-input__field-wrapper--disabled]=\"disabled()\">\n <ng-content select=\"[input-prefix]\" />\n <input\n class=\"bizz-input__field\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"hasError() ? 'error' : helperText() ? 'helper' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <ng-content select=\"[input-suffix]\" />\n</div>\n\n@if (hasError()) {\n <span class=\"bizz-input__error\" id=\"error\" role=\"alert\">{{ errorMessage() }}</span>\n} @else if (helperText()) {\n <span class=\"bizz-input__helper\" id=\"helper\">{{ helperText() }}</span>\n}\n","import {\n Component, input, signal, computed,\n ChangeDetectionStrategy, forwardRef, HostBinding, ElementRef, viewChild\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\n\n@Component({\n selector: 'bizz-textarea',\n standalone: true,\n imports: [ReactiveFormsModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './textarea.component.html',\n styleUrl: './textarea.component.css',\n providers: [{\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => BizzTextareaComponent),\n multi: true,\n }],\n})\nexport class BizzTextareaComponent implements ControlValueAccessor {\n label = input<string>('');\n placeholder = input<string>('');\n helperText = input<string>('');\n errorText = input<string>('');\n disabled = input<boolean>(false);\n required = input<boolean>(false);\n rows = input<number>(4);\n autoResize = input<boolean>(false);\n\n value = signal<string>('');\n touched = signal<boolean>(false);\n\n hasError = computed(() =>\n this.touched() && (!!this.errorText() || (this.required() && !this.value().trim()))\n );\n\n errorMessage = computed(() => this.errorText());\n\n private textareaRef = viewChild<ElementRef<HTMLTextAreaElement>>('textarea');\n private onChange = (_: string) => {};\n private onTouched = () => {};\n\n @HostBinding('class') hostClass = 'bizz-textarea-wrapper';\n\n onInput(event: Event): void {\n const el = event.target as HTMLTextAreaElement;\n this.value.set(el.value);\n this.onChange(el.value);\n if (this.autoResize()) {\n el.style.height = 'auto';\n el.style.height = el.scrollHeight + 'px';\n }\n }\n\n onBlur(): void {\n this.touched.set(true);\n this.onTouched();\n }\n\n writeValue(val: string): void {\n this.value.set(val ?? '');\n }\n\n registerOnChange(fn: (_: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n}\n","@if (label()) {\n <label class=\"bizz-textarea__label\">{{ label() }}</label>\n}\n\n<div class=\"bizz-textarea__field-wrapper\" [class.bizz-textarea__field-wrapper--error]=\"hasError()\" [class.bizz-textarea__field-wrapper--disabled]=\"disabled()\">\n <textarea\n #textarea\n class=\"bizz-textarea__field\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [rows]=\"rows()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"hasError() ? 'ta-error' : helperText() ? 'ta-helper' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n >{{ value() }}</textarea>\n</div>\n\n@if (hasError()) {\n <span class=\"bizz-textarea__error\" id=\"ta-error\" role=\"alert\">{{ errorMessage() }}</span>\n} @else if (helperText()) {\n <span class=\"bizz-textarea__helper\" id=\"ta-helper\">{{ helperText() }}</span>\n}\n","/*\n * Public API Surface of bizz-components\n */\n\nexport * from './lib/button/button.component';\nexport * from './lib/tag/tag.component';\nexport * from './lib/card/card.component';\nexport * from './lib/input/input.component';\nexport * from './lib/textarea/textarea.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/index.d.ts
DELETED
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { ControlValueAccessor } from '@angular/forms';
|
|
3
|
-
|
|
4
|
-
type ButtonVariant = 'primary' | 'secondary' | 'disabled' | 'danger';
|
|
5
|
-
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
6
|
-
type ButtonType = 'button' | 'submit' | 'reset';
|
|
7
|
-
declare class BizzButtonComponent {
|
|
8
|
-
variant: _angular_core.InputSignal<ButtonVariant>;
|
|
9
|
-
size: _angular_core.InputSignal<ButtonSize>;
|
|
10
|
-
type: _angular_core.InputSignal<ButtonType>;
|
|
11
|
-
disabled: _angular_core.InputSignal<boolean>;
|
|
12
|
-
loading: _angular_core.InputSignal<boolean>;
|
|
13
|
-
fullWidth: _angular_core.InputSignal<boolean>;
|
|
14
|
-
clicked: _angular_core.OutputEmitterRef<MouseEvent>;
|
|
15
|
-
classes: _angular_core.Signal<string>;
|
|
16
|
-
isDisabled: _angular_core.Signal<boolean>;
|
|
17
|
-
onClick(event: MouseEvent): void;
|
|
18
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BizzButtonComponent, never>;
|
|
19
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BizzButtonComponent, "bizz-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
type TagColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success';
|
|
23
|
-
type TagSize = 'sm' | 'md';
|
|
24
|
-
declare class BizzTagComponent {
|
|
25
|
-
color: _angular_core.InputSignal<TagColor>;
|
|
26
|
-
size: _angular_core.InputSignal<TagSize>;
|
|
27
|
-
dismissible: _angular_core.InputSignal<boolean>;
|
|
28
|
-
dismissed: _angular_core.OutputEmitterRef<void>;
|
|
29
|
-
get hostClasses(): string;
|
|
30
|
-
onDismiss(event: MouseEvent): void;
|
|
31
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BizzTagComponent, never>;
|
|
32
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BizzTagComponent, "bizz-tag", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, ["*"], true, never>;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
type CardElevation = 'flat' | 'raised';
|
|
36
|
-
declare class BizzCardComponent {
|
|
37
|
-
elevation: _angular_core.InputSignal<CardElevation>;
|
|
38
|
-
clickable: _angular_core.InputSignal<boolean>;
|
|
39
|
-
padding: _angular_core.InputSignal<"sm" | "md" | "lg" | "none">;
|
|
40
|
-
get hostClasses(): string;
|
|
41
|
-
get role(): string | null;
|
|
42
|
-
get tabIndex(): number | null;
|
|
43
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BizzCardComponent, never>;
|
|
44
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BizzCardComponent, "bizz-card", never, { "elevation": { "alias": "elevation"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, ["[card-media]", "[card-header]", "*", "[card-footer]"], true, never>;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
|
|
48
|
-
declare class BizzInputComponent implements ControlValueAccessor {
|
|
49
|
-
label: _angular_core.InputSignal<string>;
|
|
50
|
-
placeholder: _angular_core.InputSignal<string>;
|
|
51
|
-
type: _angular_core.InputSignal<InputType>;
|
|
52
|
-
helperText: _angular_core.InputSignal<string>;
|
|
53
|
-
errorText: _angular_core.InputSignal<string>;
|
|
54
|
-
disabled: _angular_core.InputSignal<boolean>;
|
|
55
|
-
required: _angular_core.InputSignal<boolean>;
|
|
56
|
-
value: _angular_core.WritableSignal<string>;
|
|
57
|
-
touched: _angular_core.WritableSignal<boolean>;
|
|
58
|
-
hasError: _angular_core.Signal<boolean>;
|
|
59
|
-
errorMessage: _angular_core.Signal<string>;
|
|
60
|
-
private onChange;
|
|
61
|
-
private onTouched;
|
|
62
|
-
hostClass: string;
|
|
63
|
-
onInput(event: Event): void;
|
|
64
|
-
onBlur(): void;
|
|
65
|
-
writeValue(val: string): void;
|
|
66
|
-
registerOnChange(fn: (_: string) => void): void;
|
|
67
|
-
registerOnTouched(fn: () => void): void;
|
|
68
|
-
setDisabledState(disabled: boolean): void;
|
|
69
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BizzInputComponent, never>;
|
|
70
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BizzInputComponent, "bizz-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, ["[input-prefix]", "[input-suffix]"], true, never>;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
declare class BizzTextareaComponent implements ControlValueAccessor {
|
|
74
|
-
label: _angular_core.InputSignal<string>;
|
|
75
|
-
placeholder: _angular_core.InputSignal<string>;
|
|
76
|
-
helperText: _angular_core.InputSignal<string>;
|
|
77
|
-
errorText: _angular_core.InputSignal<string>;
|
|
78
|
-
disabled: _angular_core.InputSignal<boolean>;
|
|
79
|
-
required: _angular_core.InputSignal<boolean>;
|
|
80
|
-
rows: _angular_core.InputSignal<number>;
|
|
81
|
-
autoResize: _angular_core.InputSignal<boolean>;
|
|
82
|
-
value: _angular_core.WritableSignal<string>;
|
|
83
|
-
touched: _angular_core.WritableSignal<boolean>;
|
|
84
|
-
hasError: _angular_core.Signal<boolean>;
|
|
85
|
-
errorMessage: _angular_core.Signal<string>;
|
|
86
|
-
private textareaRef;
|
|
87
|
-
private onChange;
|
|
88
|
-
private onTouched;
|
|
89
|
-
hostClass: string;
|
|
90
|
-
onInput(event: Event): void;
|
|
91
|
-
onBlur(): void;
|
|
92
|
-
writeValue(val: string): void;
|
|
93
|
-
registerOnChange(fn: (_: string) => void): void;
|
|
94
|
-
registerOnTouched(fn: () => void): void;
|
|
95
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BizzTextareaComponent, never>;
|
|
96
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BizzTextareaComponent, "bizz-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "autoResize": { "alias": "autoResize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
export { BizzButtonComponent, BizzCardComponent, BizzInputComponent, BizzTagComponent, BizzTextareaComponent };
|
|
100
|
-
export type { ButtonSize, ButtonType, ButtonVariant, CardElevation, InputType, TagColor, TagSize };
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
/* ============================================
|
|
2
|
-
BIZZ DESIGN SYSTEM — COLOR PRIMITIVES
|
|
3
|
-
Define your 5 base colors here.
|
|
4
|
-
All shades are derived automatically via color-mix().
|
|
5
|
-
============================================ */
|
|
6
|
-
|
|
7
|
-
:root {
|
|
8
|
-
/* ---- Base colors (customize these) ---- */
|
|
9
|
-
--bizz-primary: #0f62fe;
|
|
10
|
-
--bizz-secondary: #525252;
|
|
11
|
-
--bizz-success: #24a148;
|
|
12
|
-
--bizz-warning: #f59e0b;
|
|
13
|
-
--bizz-error: #da1e28;
|
|
14
|
-
|
|
15
|
-
/* Fixed */
|
|
16
|
-
--bizz-white: #ffffff;
|
|
17
|
-
--bizz-black: #000000;
|
|
18
|
-
|
|
19
|
-
/* ---- Primary shades ---- */
|
|
20
|
-
--bizz-primary-10: color-mix(in oklch, var(--bizz-primary) 8%, white);
|
|
21
|
-
--bizz-primary-20: color-mix(in oklch, var(--bizz-primary) 18%, white);
|
|
22
|
-
--bizz-primary-30: color-mix(in oklch, var(--bizz-primary) 35%, white);
|
|
23
|
-
--bizz-primary-40: color-mix(in oklch, var(--bizz-primary) 55%, white);
|
|
24
|
-
--bizz-primary-50: color-mix(in oklch, var(--bizz-primary) 75%, white);
|
|
25
|
-
--bizz-primary-60: var(--bizz-primary);
|
|
26
|
-
--bizz-primary-70: color-mix(in oklch, var(--bizz-primary) 85%, black);
|
|
27
|
-
--bizz-primary-80: color-mix(in oklch, var(--bizz-primary) 65%, black);
|
|
28
|
-
--bizz-primary-90: color-mix(in oklch, var(--bizz-primary) 45%, black);
|
|
29
|
-
--bizz-primary-100: color-mix(in oklch, var(--bizz-primary) 25%, black);
|
|
30
|
-
|
|
31
|
-
/* ---- Secondary shades ---- */
|
|
32
|
-
--bizz-secondary-10: color-mix(in oklch, var(--bizz-secondary) 8%, white);
|
|
33
|
-
--bizz-secondary-20: color-mix(in oklch, var(--bizz-secondary) 18%, white);
|
|
34
|
-
--bizz-secondary-30: color-mix(in oklch, var(--bizz-secondary) 35%, white);
|
|
35
|
-
--bizz-secondary-40: color-mix(in oklch, var(--bizz-secondary) 55%, white);
|
|
36
|
-
--bizz-secondary-50: color-mix(in oklch, var(--bizz-secondary) 75%, white);
|
|
37
|
-
--bizz-secondary-60: var(--bizz-secondary);
|
|
38
|
-
--bizz-secondary-70: color-mix(in oklch, var(--bizz-secondary) 85%, black);
|
|
39
|
-
--bizz-secondary-80: color-mix(in oklch, var(--bizz-secondary) 65%, black);
|
|
40
|
-
--bizz-secondary-90: color-mix(in oklch, var(--bizz-secondary) 45%, black);
|
|
41
|
-
--bizz-secondary-100: color-mix(in oklch, var(--bizz-secondary) 25%, black);
|
|
42
|
-
|
|
43
|
-
/* ---- Success shades ---- */
|
|
44
|
-
--bizz-success-10: color-mix(in oklch, var(--bizz-success) 8%, white);
|
|
45
|
-
--bizz-success-20: color-mix(in oklch, var(--bizz-success) 18%, white);
|
|
46
|
-
--bizz-success-30: color-mix(in oklch, var(--bizz-success) 35%, white);
|
|
47
|
-
--bizz-success-40: color-mix(in oklch, var(--bizz-success) 55%, white);
|
|
48
|
-
--bizz-success-50: color-mix(in oklch, var(--bizz-success) 75%, white);
|
|
49
|
-
--bizz-success-60: var(--bizz-success);
|
|
50
|
-
--bizz-success-70: color-mix(in oklch, var(--bizz-success) 85%, black);
|
|
51
|
-
--bizz-success-80: color-mix(in oklch, var(--bizz-success) 65%, black);
|
|
52
|
-
--bizz-success-90: color-mix(in oklch, var(--bizz-success) 45%, black);
|
|
53
|
-
--bizz-success-100: color-mix(in oklch, var(--bizz-success) 25%, black);
|
|
54
|
-
|
|
55
|
-
/* ---- Warning shades ---- */
|
|
56
|
-
--bizz-warning-10: color-mix(in oklch, var(--bizz-warning) 8%, white);
|
|
57
|
-
--bizz-warning-20: color-mix(in oklch, var(--bizz-warning) 18%, white);
|
|
58
|
-
--bizz-warning-30: color-mix(in oklch, var(--bizz-warning) 35%, white);
|
|
59
|
-
--bizz-warning-40: color-mix(in oklch, var(--bizz-warning) 55%, white);
|
|
60
|
-
--bizz-warning-50: color-mix(in oklch, var(--bizz-warning) 75%, white);
|
|
61
|
-
--bizz-warning-60: var(--bizz-warning);
|
|
62
|
-
--bizz-warning-70: color-mix(in oklch, var(--bizz-warning) 85%, black);
|
|
63
|
-
--bizz-warning-80: color-mix(in oklch, var(--bizz-warning) 65%, black);
|
|
64
|
-
--bizz-warning-90: color-mix(in oklch, var(--bizz-warning) 45%, black);
|
|
65
|
-
--bizz-warning-100: color-mix(in oklch, var(--bizz-warning) 25%, black);
|
|
66
|
-
|
|
67
|
-
/* ---- Error shades ---- */
|
|
68
|
-
--bizz-error-10: color-mix(in oklch, var(--bizz-error) 8%, white);
|
|
69
|
-
--bizz-error-20: color-mix(in oklch, var(--bizz-error) 18%, white);
|
|
70
|
-
--bizz-error-30: color-mix(in oklch, var(--bizz-error) 35%, white);
|
|
71
|
-
--bizz-error-40: color-mix(in oklch, var(--bizz-error) 55%, white);
|
|
72
|
-
--bizz-error-50: color-mix(in oklch, var(--bizz-error) 75%, white);
|
|
73
|
-
--bizz-error-60: var(--bizz-error);
|
|
74
|
-
--bizz-error-70: color-mix(in oklch, var(--bizz-error) 85%, black);
|
|
75
|
-
--bizz-error-80: color-mix(in oklch, var(--bizz-error) 65%, black);
|
|
76
|
-
--bizz-error-90: color-mix(in oklch, var(--bizz-error) 45%, black);
|
|
77
|
-
--bizz-error-100: color-mix(in oklch, var(--bizz-error) 25%, black);
|
|
78
|
-
}
|