@doku-com/tala 1.0.0-alpha.2 → 1.0.0-alpha.3
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/fesm2022/doku-com-tala.mjs +319 -6
- package/fesm2022/doku-com-tala.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_color.scss +159 -112
- package/styles/_shadow.scss +5 -5
- package/types/doku-com-tala.d.ts +96 -2
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
+
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, forwardRef, inject, ElementRef, HostListener } from '@angular/core';
|
|
3
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
4
|
|
|
4
5
|
class TalaAvatar {
|
|
5
6
|
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
@@ -61,7 +62,7 @@ class TalaAvatar {
|
|
|
61
62
|
return (words[0][0] + words[words.length - 1][0]).toUpperCase();
|
|
62
63
|
}
|
|
63
64
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
64
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TalaAvatar, isStandalone: true, selector: "tala-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.background-color": "bgColor()", "attr.role": "\"img\"", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: "@if (src()) {\n <img class=\"tala-avatar__image\" [src]=\"src()\" [alt]=\"name()\" />\n} @else {\n <span class=\"tala-avatar__initials\">{{ initials() }}</span>\n}\n\n@if (hasStatus()) {\n <span [class]=\"'tala-avatar__status tala-avatar__status--' + status()\" role=\"presentation\"></span>\n}\n\n@if (hasBadge()) {\n <span class=\"tala-avatar__badge\" aria-hidden=\"true\">\n {{ displayBadge() }}\n </span>\n}\n", styles: ["tala-avatar{--tala-avatar-border-color: var(--color-
|
|
65
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TalaAvatar, isStandalone: true, selector: "tala-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.background-color": "bgColor()", "attr.role": "\"img\"", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: "@if (src()) {\n <img class=\"tala-avatar__image\" [src]=\"src()\" [alt]=\"name()\" />\n} @else {\n <span class=\"tala-avatar__initials\">{{ initials() }}</span>\n}\n\n@if (hasStatus()) {\n <span [class]=\"'tala-avatar__status tala-avatar__status--' + status()\" role=\"presentation\"></span>\n}\n\n@if (hasBadge()) {\n <span class=\"tala-avatar__badge\" aria-hidden=\"true\">\n {{ displayBadge() }}\n </span>\n}\n", styles: ["tala-avatar{--tala-avatar-border-color: var(--tala-sys-color-outline-default);--tala-avatar-initials-color: var(--tala-sys-color-text-inverse);--tala-avatar-status-ring-width: 2px;--tala-avatar-status-ring-color: var(--tala-sys-color-surface-default);--tala-avatar-status-online-color: var(--tala-ref-color-green-40);--tala-avatar-status-offline-color: var(--tala-ref-color-neutral-40);--tala-avatar-status-busy-color: var(--tala-ref-color-red-50);--tala-avatar-status-away-color: var(--tala-ref-color-amber-30);--tala-avatar-badge-bg: var(--tala-sys-color-brand);--tala-avatar-badge-color: var(--tala-sys-color-text-inverse);--tala-avatar-badge-ring-width: 2px;--tala-avatar-badge-ring-color: var(--tala-sys-color-surface-default);display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;border:1px solid var(--tala-avatar-border-color);overflow:visible;-webkit-user-select:none;user-select:none}.tala-avatar__initials{font-family:var(--font-body);font-weight:var(--font-weight-medium);color:var(--tala-avatar-initials-color);line-height:1;letter-spacing:var(--letter-spacing-normal)}tala-avatar.tala-avatar--image{overflow:hidden}.tala-avatar__image{width:100%;height:100%;object-fit:cover;display:block}tala-avatar.tala-avatar--xs{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:24px;height:24px}tala-avatar.tala-avatar--xs .tala-avatar__initials{font-size:9px}tala-avatar.tala-avatar--xs .tala-avatar__status{width:6px;height:6px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--xs .tala-avatar__badge{width:8px;height:8px;top:-5.4px;right:-3.4px;font-size:5px}tala-avatar.tala-avatar--sm{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:32px;height:32px}tala-avatar.tala-avatar--sm .tala-avatar__initials{font-size:var(--font-size-11);line-height:var(--line-height-14)}tala-avatar.tala-avatar--sm .tala-avatar__status{width:7px;height:7px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--sm .tala-avatar__badge{width:10px;height:10px;top:-6.5px;right:-4.5px;font-size:6px}tala-avatar.tala-avatar--md{width:40px;height:40px}tala-avatar.tala-avatar--md .tala-avatar__initials{font-size:var(--font-size-14);line-height:var(--line-height-20)}tala-avatar.tala-avatar--md .tala-avatar__status{width:8px;height:8px;bottom:-1.5px;right:-1.5px}tala-avatar.tala-avatar--md .tala-avatar__badge{min-width:12px;height:12px;top:-7.6px;right:-5.6px;font-size:7px}tala-avatar.tala-avatar--lg{width:48px;height:48px}tala-avatar.tala-avatar--lg .tala-avatar__initials{font-size:var(--font-size-16);line-height:var(--line-height-20)}tala-avatar.tala-avatar--lg .tala-avatar__status{width:10px;height:10px;bottom:-2px;right:-2px}tala-avatar.tala-avatar--lg .tala-avatar__badge{min-width:14px;height:14px;top:-8.7px;right:-6.7px;font-size:8px}tala-avatar.tala-avatar--xl{width:64px;height:64px}tala-avatar.tala-avatar--xl .tala-avatar__initials{font-size:22px;line-height:normal}tala-avatar.tala-avatar--xl .tala-avatar__status{width:12px;height:12px;bottom:-2.5px;right:-2.5px}tala-avatar.tala-avatar--xl .tala-avatar__badge{min-width:16px;height:16px;top:-9.8px;right:-7.8px;font-size:9px}tala-avatar.tala-avatar--circle{border-radius:var(--radius-full)}tala-avatar.tala-avatar--square.tala-avatar--xs{border-radius:var(--radius-sm)}tala-avatar.tala-avatar--square.tala-avatar--sm{border-radius:var(--radius-md)}tala-avatar.tala-avatar--square.tala-avatar--md,tala-avatar.tala-avatar--square.tala-avatar--lg{border-radius:var(--radius-lg)}tala-avatar.tala-avatar--square.tala-avatar--xl{border-radius:var(--radius-xl)}.tala-avatar__status{position:absolute;border-radius:var(--radius-full);box-shadow:0 0 0 var(--tala-avatar-status-ring-width) var(--tala-avatar-status-ring-color);pointer-events:none}.tala-avatar__status--online{background-color:var(--tala-avatar-status-online-color)}.tala-avatar__status--offline{background-color:var(--tala-avatar-status-offline-color)}.tala-avatar__status--busy{background-color:var(--tala-avatar-status-busy-color)}.tala-avatar__status--away{background-color:var(--tala-avatar-status-away-color)}.tala-avatar__badge{position:absolute;background-color:var(--tala-avatar-badge-bg);color:var(--tala-avatar-badge-color);border-radius:var(--radius-full);font-family:var(--font-body);font-weight:var(--font-weight-medium);box-shadow:0 0 0 var(--tala-avatar-badge-ring-width) var(--tala-avatar-badge-ring-color);display:flex;align-items:center;justify-content:center;padding:0 2px;pointer-events:none;white-space:nowrap;line-height:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
65
66
|
}
|
|
66
67
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaAvatar, decorators: [{
|
|
67
68
|
type: Component,
|
|
@@ -70,7 +71,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
70
71
|
'[style.background-color]': 'bgColor()',
|
|
71
72
|
'[attr.role]': '"img"',
|
|
72
73
|
'[attr.aria-label]': 'ariaLabel()',
|
|
73
|
-
}, template: "@if (src()) {\n <img class=\"tala-avatar__image\" [src]=\"src()\" [alt]=\"name()\" />\n} @else {\n <span class=\"tala-avatar__initials\">{{ initials() }}</span>\n}\n\n@if (hasStatus()) {\n <span [class]=\"'tala-avatar__status tala-avatar__status--' + status()\" role=\"presentation\"></span>\n}\n\n@if (hasBadge()) {\n <span class=\"tala-avatar__badge\" aria-hidden=\"true\">\n {{ displayBadge() }}\n </span>\n}\n", styles: ["tala-avatar{--tala-avatar-border-color: var(--color-
|
|
74
|
+
}, template: "@if (src()) {\n <img class=\"tala-avatar__image\" [src]=\"src()\" [alt]=\"name()\" />\n} @else {\n <span class=\"tala-avatar__initials\">{{ initials() }}</span>\n}\n\n@if (hasStatus()) {\n <span [class]=\"'tala-avatar__status tala-avatar__status--' + status()\" role=\"presentation\"></span>\n}\n\n@if (hasBadge()) {\n <span class=\"tala-avatar__badge\" aria-hidden=\"true\">\n {{ displayBadge() }}\n </span>\n}\n", styles: ["tala-avatar{--tala-avatar-border-color: var(--tala-sys-color-outline-default);--tala-avatar-initials-color: var(--tala-sys-color-text-inverse);--tala-avatar-status-ring-width: 2px;--tala-avatar-status-ring-color: var(--tala-sys-color-surface-default);--tala-avatar-status-online-color: var(--tala-ref-color-green-40);--tala-avatar-status-offline-color: var(--tala-ref-color-neutral-40);--tala-avatar-status-busy-color: var(--tala-ref-color-red-50);--tala-avatar-status-away-color: var(--tala-ref-color-amber-30);--tala-avatar-badge-bg: var(--tala-sys-color-brand);--tala-avatar-badge-color: var(--tala-sys-color-text-inverse);--tala-avatar-badge-ring-width: 2px;--tala-avatar-badge-ring-color: var(--tala-sys-color-surface-default);display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;border:1px solid var(--tala-avatar-border-color);overflow:visible;-webkit-user-select:none;user-select:none}.tala-avatar__initials{font-family:var(--font-body);font-weight:var(--font-weight-medium);color:var(--tala-avatar-initials-color);line-height:1;letter-spacing:var(--letter-spacing-normal)}tala-avatar.tala-avatar--image{overflow:hidden}.tala-avatar__image{width:100%;height:100%;object-fit:cover;display:block}tala-avatar.tala-avatar--xs{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:24px;height:24px}tala-avatar.tala-avatar--xs .tala-avatar__initials{font-size:9px}tala-avatar.tala-avatar--xs .tala-avatar__status{width:6px;height:6px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--xs .tala-avatar__badge{width:8px;height:8px;top:-5.4px;right:-3.4px;font-size:5px}tala-avatar.tala-avatar--sm{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:32px;height:32px}tala-avatar.tala-avatar--sm .tala-avatar__initials{font-size:var(--font-size-11);line-height:var(--line-height-14)}tala-avatar.tala-avatar--sm .tala-avatar__status{width:7px;height:7px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--sm .tala-avatar__badge{width:10px;height:10px;top:-6.5px;right:-4.5px;font-size:6px}tala-avatar.tala-avatar--md{width:40px;height:40px}tala-avatar.tala-avatar--md .tala-avatar__initials{font-size:var(--font-size-14);line-height:var(--line-height-20)}tala-avatar.tala-avatar--md .tala-avatar__status{width:8px;height:8px;bottom:-1.5px;right:-1.5px}tala-avatar.tala-avatar--md .tala-avatar__badge{min-width:12px;height:12px;top:-7.6px;right:-5.6px;font-size:7px}tala-avatar.tala-avatar--lg{width:48px;height:48px}tala-avatar.tala-avatar--lg .tala-avatar__initials{font-size:var(--font-size-16);line-height:var(--line-height-20)}tala-avatar.tala-avatar--lg .tala-avatar__status{width:10px;height:10px;bottom:-2px;right:-2px}tala-avatar.tala-avatar--lg .tala-avatar__badge{min-width:14px;height:14px;top:-8.7px;right:-6.7px;font-size:8px}tala-avatar.tala-avatar--xl{width:64px;height:64px}tala-avatar.tala-avatar--xl .tala-avatar__initials{font-size:22px;line-height:normal}tala-avatar.tala-avatar--xl .tala-avatar__status{width:12px;height:12px;bottom:-2.5px;right:-2.5px}tala-avatar.tala-avatar--xl .tala-avatar__badge{min-width:16px;height:16px;top:-9.8px;right:-7.8px;font-size:9px}tala-avatar.tala-avatar--circle{border-radius:var(--radius-full)}tala-avatar.tala-avatar--square.tala-avatar--xs{border-radius:var(--radius-sm)}tala-avatar.tala-avatar--square.tala-avatar--sm{border-radius:var(--radius-md)}tala-avatar.tala-avatar--square.tala-avatar--md,tala-avatar.tala-avatar--square.tala-avatar--lg{border-radius:var(--radius-lg)}tala-avatar.tala-avatar--square.tala-avatar--xl{border-radius:var(--radius-xl)}.tala-avatar__status{position:absolute;border-radius:var(--radius-full);box-shadow:0 0 0 var(--tala-avatar-status-ring-width) var(--tala-avatar-status-ring-color);pointer-events:none}.tala-avatar__status--online{background-color:var(--tala-avatar-status-online-color)}.tala-avatar__status--offline{background-color:var(--tala-avatar-status-offline-color)}.tala-avatar__status--busy{background-color:var(--tala-avatar-status-busy-color)}.tala-avatar__status--away{background-color:var(--tala-avatar-status-away-color)}.tala-avatar__badge{position:absolute;background-color:var(--tala-avatar-badge-bg);color:var(--tala-avatar-badge-color);border-radius:var(--radius-full);font-family:var(--font-body);font-weight:var(--font-weight-medium);box-shadow:0 0 0 var(--tala-avatar-badge-ring-width) var(--tala-avatar-badge-ring-color);display:flex;align-items:center;justify-content:center;padding:0 2px;pointer-events:none;white-space:nowrap;line-height:1}\n"] }]
|
|
74
75
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], badgeCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeCount", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }] } });
|
|
75
76
|
|
|
76
77
|
class TalaAvatarGroup {
|
|
@@ -114,7 +115,7 @@ class TalaButton {
|
|
|
114
115
|
event.currentTarget.click();
|
|
115
116
|
}
|
|
116
117
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
117
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TalaButton, isStandalone: true, selector: "tala-button", inputs: { 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_onClick($event)", "keydown.enter": "_onKeydown($event)", "keydown.space": "_onKeydown($event)" }, properties: { "class": "hostClasses()", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? \"-1\" : \"0\"", "attr.aria-disabled": "disabled() || null", "attr.aria-busy": "loading() || null" } }, ngImport: i0, template: "@if (loading()) {\n <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n}\n\n<ng-content select=\"[slot=prefix]\"></ng-content>\n<ng-content></ng-content>\n<ng-content select=\"[slot=suffix]\"></ng-content>\n", styles: ["tala-button{--tala-button-bg: transparent;--tala-button-color: var(--color-text-primary);--tala-button-border-color: transparent;--tala-button-hover-bg: var(--tala-button-bg);--tala-button-hover-color: var(--tala-button-color);--tala-button-focus-ring-color: var(--color-
|
|
118
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TalaButton, isStandalone: true, selector: "tala-button", inputs: { 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_onClick($event)", "keydown.enter": "_onKeydown($event)", "keydown.space": "_onKeydown($event)" }, properties: { "class": "hostClasses()", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? \"-1\" : \"0\"", "attr.aria-disabled": "disabled() || null", "attr.aria-busy": "loading() || null" } }, ngImport: i0, template: "@if (loading()) {\n <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n}\n\n<ng-content select=\"[slot=prefix]\"></ng-content>\n<ng-content></ng-content>\n<ng-content select=\"[slot=suffix]\"></ng-content>\n", styles: ["tala-button{--tala-button-bg: transparent;--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-border-color: transparent;--tala-button-hover-bg: var(--tala-button-bg);--tala-button-hover-color: var(--tala-button-color);--tala-button-focus-ring-color: var(--tala-sys-color-outline-focus);--tala-button-height: 40px;--tala-button-padding-x: var(--space-4);--tala-button-gap: var(--space-2);--tala-button-font-size: var(--text-label-default-size);--tala-button-line-height: var(--text-label-default-height);--tala-button-border-radius: var(--radius-md);--tala-button-spinner-size: 16px;display:inline-flex;align-items:center;justify-content:center;gap:var(--tala-button-gap);height:var(--tala-button-height);padding:0 var(--tala-button-padding-x);border:1px solid var(--tala-button-border-color);border-radius:var(--tala-button-border-radius);background-color:var(--tala-button-bg);color:var(--tala-button-color);font-family:var(--font-body);font-size:var(--tala-button-font-size);line-height:var(--tala-button-line-height);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-normal);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;transition:background-color .15s ease,border-color .15s ease,color .15s ease}tala-button:focus-visible{outline:2px solid var(--tala-button-focus-ring-color);outline-offset:2px}tala-button.tala-button--icon-only{width:var(--tala-button-height);padding:0}tala-button:hover:not(.tala-button--disabled,.tala-button--loading){background-color:var(--tala-button-hover-bg);color:var(--tala-button-hover-color)}tala-button.tala-button--primary{--tala-button-bg: var(--tala-sys-color-surface-inverse);--tala-button-color: var(--tala-sys-color-text-inverse);--tala-button-hover-bg: var(--tala-ref-color-neutral-90)}tala-button.tala-button--secondary{--tala-button-bg: var(--tala-sys-color-surface-default);--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-border-color: var(--tala-sys-color-outline-default);--tala-button-hover-bg: var(--tala-ref-color-neutral-10)}tala-button.tala-button--ghost{--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-hover-bg: var(--tala-ref-color-neutral-10)}tala-button.tala-button--accent{--tala-button-bg: var(--tala-sys-color-brand);--tala-button-color: var(--tala-sys-color-on-brand);--tala-button-hover-bg: var(--tala-sys-color-brand-hover)}tala-button.tala-button--danger{--tala-button-bg: var(--tala-sys-color-error);--tala-button-color: var(--tala-sys-color-on-error);--tala-button-hover-bg: var(--tala-sys-color-error-hover)}tala-button.tala-button--link{--tala-button-color: var(--tala-sys-color-text-link);--tala-button-hover-color: var(--tala-sys-color-brand-hover)}tala-button.tala-button--xs{--tala-button-height: 24px;--tala-button-padding-x: var(--space-2);--tala-button-gap: var(--space-1);--tala-button-font-size: var(--text-label-xsmall-size);--tala-button-line-height: var(--text-label-xsmall-height);--tala-button-border-radius: var(--radius-sm);--tala-button-spinner-size: 12px}tala-button.tala-button--sm{--tala-button-height: 32px;--tala-button-padding-x: var(--space-3);--tala-button-gap: var(--space-1);--tala-button-font-size: var(--text-label-small-size);--tala-button-line-height: var(--text-label-small-height);--tala-button-spinner-size: 14px}tala-button.tala-button--lg{--tala-button-height: 48px;--tala-button-padding-x: var(--space-5);--tala-button-font-size: var(--text-label-large-size);--tala-button-line-height: var(--text-label-large-height);--tala-button-border-radius: var(--radius-lg);--tala-button-spinner-size: 18px}tala-button.tala-button--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}tala-button.tala-button--loading{cursor:wait;pointer-events:none}.tala-button__spinner{display:block;width:var(--tala-button-spinner-size);height:var(--tala-button-spinner-size);border-radius:var(--radius-full);border:1.5px solid currentColor;border-top-color:transparent;flex-shrink:0;animation:tala-button-spin .65s linear infinite}@keyframes tala-button-spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
118
119
|
}
|
|
119
120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaButton, decorators: [{
|
|
120
121
|
type: Component,
|
|
@@ -127,9 +128,321 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
127
128
|
'(click)': '_onClick($event)',
|
|
128
129
|
'(keydown.enter)': '_onKeydown($event)',
|
|
129
130
|
'(keydown.space)': '_onKeydown($event)',
|
|
130
|
-
}, template: "@if (loading()) {\n <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n}\n\n<ng-content select=\"[slot=prefix]\"></ng-content>\n<ng-content></ng-content>\n<ng-content select=\"[slot=suffix]\"></ng-content>\n", styles: ["tala-button{--tala-button-bg: transparent;--tala-button-color: var(--color-text-primary);--tala-button-border-color: transparent;--tala-button-hover-bg: var(--tala-button-bg);--tala-button-hover-color: var(--tala-button-color);--tala-button-focus-ring-color: var(--color-
|
|
131
|
+
}, template: "@if (loading()) {\n <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n}\n\n<ng-content select=\"[slot=prefix]\"></ng-content>\n<ng-content></ng-content>\n<ng-content select=\"[slot=suffix]\"></ng-content>\n", styles: ["tala-button{--tala-button-bg: transparent;--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-border-color: transparent;--tala-button-hover-bg: var(--tala-button-bg);--tala-button-hover-color: var(--tala-button-color);--tala-button-focus-ring-color: var(--tala-sys-color-outline-focus);--tala-button-height: 40px;--tala-button-padding-x: var(--space-4);--tala-button-gap: var(--space-2);--tala-button-font-size: var(--text-label-default-size);--tala-button-line-height: var(--text-label-default-height);--tala-button-border-radius: var(--radius-md);--tala-button-spinner-size: 16px;display:inline-flex;align-items:center;justify-content:center;gap:var(--tala-button-gap);height:var(--tala-button-height);padding:0 var(--tala-button-padding-x);border:1px solid var(--tala-button-border-color);border-radius:var(--tala-button-border-radius);background-color:var(--tala-button-bg);color:var(--tala-button-color);font-family:var(--font-body);font-size:var(--tala-button-font-size);line-height:var(--tala-button-line-height);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-normal);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;transition:background-color .15s ease,border-color .15s ease,color .15s ease}tala-button:focus-visible{outline:2px solid var(--tala-button-focus-ring-color);outline-offset:2px}tala-button.tala-button--icon-only{width:var(--tala-button-height);padding:0}tala-button:hover:not(.tala-button--disabled,.tala-button--loading){background-color:var(--tala-button-hover-bg);color:var(--tala-button-hover-color)}tala-button.tala-button--primary{--tala-button-bg: var(--tala-sys-color-surface-inverse);--tala-button-color: var(--tala-sys-color-text-inverse);--tala-button-hover-bg: var(--tala-ref-color-neutral-90)}tala-button.tala-button--secondary{--tala-button-bg: var(--tala-sys-color-surface-default);--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-border-color: var(--tala-sys-color-outline-default);--tala-button-hover-bg: var(--tala-ref-color-neutral-10)}tala-button.tala-button--ghost{--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-hover-bg: var(--tala-ref-color-neutral-10)}tala-button.tala-button--accent{--tala-button-bg: var(--tala-sys-color-brand);--tala-button-color: var(--tala-sys-color-on-brand);--tala-button-hover-bg: var(--tala-sys-color-brand-hover)}tala-button.tala-button--danger{--tala-button-bg: var(--tala-sys-color-error);--tala-button-color: var(--tala-sys-color-on-error);--tala-button-hover-bg: var(--tala-sys-color-error-hover)}tala-button.tala-button--link{--tala-button-color: var(--tala-sys-color-text-link);--tala-button-hover-color: var(--tala-sys-color-brand-hover)}tala-button.tala-button--xs{--tala-button-height: 24px;--tala-button-padding-x: var(--space-2);--tala-button-gap: var(--space-1);--tala-button-font-size: var(--text-label-xsmall-size);--tala-button-line-height: var(--text-label-xsmall-height);--tala-button-border-radius: var(--radius-sm);--tala-button-spinner-size: 12px}tala-button.tala-button--sm{--tala-button-height: 32px;--tala-button-padding-x: var(--space-3);--tala-button-gap: var(--space-1);--tala-button-font-size: var(--text-label-small-size);--tala-button-line-height: var(--text-label-small-height);--tala-button-spinner-size: 14px}tala-button.tala-button--lg{--tala-button-height: 48px;--tala-button-padding-x: var(--space-5);--tala-button-font-size: var(--text-label-large-size);--tala-button-line-height: var(--text-label-large-height);--tala-button-border-radius: var(--radius-lg);--tala-button-spinner-size: 18px}tala-button.tala-button--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}tala-button.tala-button--loading{cursor:wait;pointer-events:none}.tala-button__spinner{display:block;width:var(--tala-button-spinner-size);height:var(--tala-button-spinner-size);border-radius:var(--radius-full);border:1.5px solid currentColor;border-top-color:transparent;flex-shrink:0;animation:tala-button-spin .65s linear infinite}@keyframes tala-button-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
131
132
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
|
|
132
133
|
|
|
134
|
+
class TalaInput {
|
|
135
|
+
static _nextId = 0;
|
|
136
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
137
|
+
status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
|
|
138
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
139
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
140
|
+
helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
141
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
142
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
143
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
144
|
+
prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
|
|
145
|
+
suffix = input('', ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
|
|
146
|
+
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
147
|
+
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
148
|
+
_id = `tala-input-${++TalaInput._nextId}`;
|
|
149
|
+
_helperId = `${this._id}-helper`;
|
|
150
|
+
_value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
|
|
151
|
+
_disabledByForm = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByForm" }] : /* istanbul ignore next */ []));
|
|
152
|
+
_isDisabled = computed(() => this.disabled() || this._disabledByForm(), ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
|
|
153
|
+
hostClasses = computed(() => [
|
|
154
|
+
'tala-input',
|
|
155
|
+
`tala-input--${this.size()}`,
|
|
156
|
+
`tala-input--${this.status()}`,
|
|
157
|
+
this._isDisabled() ? 'tala-input--disabled' : '',
|
|
158
|
+
this.readonly() ? 'tala-input--readonly' : '',
|
|
159
|
+
]
|
|
160
|
+
.filter(Boolean)
|
|
161
|
+
.join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
162
|
+
_onChange = () => { };
|
|
163
|
+
_onTouched = () => { };
|
|
164
|
+
writeValue(value) {
|
|
165
|
+
this._value.set(value ?? '');
|
|
166
|
+
}
|
|
167
|
+
registerOnChange(fn) {
|
|
168
|
+
this._onChange = fn;
|
|
169
|
+
}
|
|
170
|
+
registerOnTouched(fn) {
|
|
171
|
+
this._onTouched = fn;
|
|
172
|
+
}
|
|
173
|
+
setDisabledState(isDisabled) {
|
|
174
|
+
this._disabledByForm.set(isDisabled);
|
|
175
|
+
}
|
|
176
|
+
_onInput(event) {
|
|
177
|
+
const value = event.target.value;
|
|
178
|
+
this._value.set(value);
|
|
179
|
+
this._onChange(value);
|
|
180
|
+
}
|
|
181
|
+
_onBlur() {
|
|
182
|
+
this._onTouched();
|
|
183
|
+
}
|
|
184
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
185
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TalaInput, isStandalone: true, selector: "tala-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, providers: [
|
|
186
|
+
{
|
|
187
|
+
provide: NG_VALUE_ACCESSOR,
|
|
188
|
+
useExisting: forwardRef(() => TalaInput),
|
|
189
|
+
multi: true,
|
|
190
|
+
},
|
|
191
|
+
], ngImport: i0, template: "@if (label()) {\n <div class=\"tala-input__label-row\">\n <label class=\"tala-input__label\" [attr.for]=\"_id\">{{ label() }}</label>\n @if (required()) {\n <span class=\"tala-input__required\" aria-hidden=\"true\">*</span>\n }\n </div>\n}\n\n<div\n class=\"tala-input__container\"\n [class.tala-input__container--has-prefix]=\"prefix()\"\n [class.tala-input__container--has-suffix]=\"suffix()\"\n>\n @if (prefix()) {\n <div class=\"tala-input__prefix\">{{ prefix() }}</div>\n }\n <ng-content select=\"[slot=leading-icon]\"></ng-content>\n <input\n class=\"tala-input__field\"\n [id]=\"_id\"\n [type]=\"type()\"\n [name]=\"name()\"\n [placeholder]=\"placeholder()\"\n [value]=\"_value()\"\n [disabled]=\"_isDisabled()\"\n [attr.readonly]=\"readonly() || null\"\n [required]=\"required()\"\n [attr.aria-invalid]=\"status() === 'error' || null\"\n [attr.aria-describedby]=\"helperText() && !_isDisabled() ? _helperId : null\"\n (input)=\"_onInput($event)\"\n (blur)=\"_onBlur()\"\n />\n <ng-content select=\"[slot=trailing-icon]\"></ng-content>\n @if (suffix()) {\n <div class=\"tala-input__suffix\">{{ suffix() }}</div>\n }\n</div>\n\n@if (helperText() && !_isDisabled()) {\n <div class=\"tala-input__helper-row\" [id]=\"_helperId\">\n <span class=\"tala-input__helper\">{{ helperText() }}</span>\n </div>\n}\n", styles: ["tala-input{--tala-input-bg: var(--tala-sys-color-surface-default);--tala-input-border-color: var(--tala-sys-color-outline-default);--tala-input-color: var(--tala-sys-color-text-primary);--tala-input-placeholder-color: var(--tala-sys-color-text-placeholder);--tala-input-label-color: var(--tala-sys-color-text-secondary);--tala-input-helper-color: var(--tala-sys-color-text-secondary);--tala-input-prefix-bg: var(--tala-sys-color-surface-sunken);--tala-input-prefix-color: var(--tala-sys-color-text-secondary);--tala-input-required-color: var(--tala-sys-color-brand);--tala-input-focus-ring: 0 0 0 3px rgba(9, 9, 13, .1);--tala-input-height: 40px;--tala-input-padding-x: 12px;--tala-input-icon-size: 16px;--tala-input-border-radius: var(--radius-md);--tala-input-gap: var(--space-2);display:flex;flex-direction:column;gap:var(--space-1);box-sizing:border-box}.tala-input__label-row{display:flex;align-items:center;gap:var(--space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-input__label{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-input-label-color);cursor:pointer}.tala-input__required{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-input-required-color)}.tala-input__container{display:flex;align-items:center;gap:var(--tala-input-gap);height:var(--tala-input-height);padding:0 var(--tala-input-padding-x);border:1px solid var(--tala-input-border-color);border-radius:var(--tala-input-border-radius);background-color:var(--tala-input-bg);overflow:hidden;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}.tala-input__container--has-prefix{padding-left:0}.tala-input__container--has-suffix{padding-right:0}tala-input:not(.tala-input--disabled,.tala-input--readonly) .tala-input__container:hover{border-color:var(--tala-sys-color-outline-strong)}tala-input:not(.tala-input--disabled) .tala-input__container:focus-within{border-color:var(--tala-sys-color-outline-focus);box-shadow:var(--tala-input-focus-ring)}.tala-input__field{flex:1 0 0;min-width:0;height:100%;padding:0;border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-input-color);box-sizing:border-box}.tala-input__field::placeholder{color:var(--tala-input-placeholder-color)}.tala-input__field:disabled{cursor:not-allowed}.tala-input__prefix,.tala-input__suffix{display:flex;align-items:center;justify-content:center;align-self:stretch;padding:0 var(--tala-input-padding-x);background-color:var(--tala-input-prefix-bg);color:var(--tala-input-prefix-color);font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);white-space:nowrap;flex-shrink:0}.tala-input__prefix{border-right:1px solid var(--tala-input-border-color)}.tala-input__suffix{border-left:1px solid var(--tala-input-border-color)}tala-input [slot=leading-icon],tala-input [slot=trailing-icon]{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-input-icon-size);height:var(--tala-input-icon-size);color:var(--tala-sys-color-text-tertiary)}tala-input [slot=leading-icon] svg,tala-input [slot=trailing-icon] svg{width:100%;height:100%}.tala-input__helper-row{display:flex;align-items:flex-start;min-height:16px}.tala-input__helper{font-family:var(--font-body);font-size:var(--text-caption-large-size);line-height:var(--text-caption-large-height);font-weight:var(--font-weight-regular);color:var(--tala-input-helper-color)}tala-input.tala-input--sm{--tala-input-height: 32px;--tala-input-padding-x: 10px;--tala-input-icon-size: 14px}tala-input.tala-input--lg{--tala-input-height: 48px;--tala-input-padding-x: 14px;--tala-input-icon-size: 18px;--tala-input-border-radius: var(--radius-lg)}tala-input.tala-input--error{--tala-input-border-color: var(--tala-sys-color-error-outline);--tala-input-helper-color: var(--tala-sys-color-error-text)}tala-input.tala-input--success{--tala-input-border-color: var(--tala-sys-color-success-outline);--tala-input-helper-color: var(--tala-sys-color-success-text)}tala-input.tala-input--warning{--tala-input-border-color: var(--tala-sys-color-warning-outline);--tala-input-helper-color: var(--tala-sys-color-warning-text)}tala-input.tala-input--disabled{--tala-input-bg: var(--tala-sys-color-surface-sunken);--tala-input-color: var(--tala-sys-color-text-disabled);--tala-input-placeholder-color: var(--tala-sys-color-text-disabled);--tala-input-label-color: var(--tala-sys-color-text-disabled);--tala-input-prefix-color: var(--tala-sys-color-text-disabled);pointer-events:none}tala-input.tala-input--readonly{--tala-input-bg: var(--tala-sys-color-surface-sunken)}tala-input.tala-input--readonly .tala-input__field{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
192
|
+
}
|
|
193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaInput, decorators: [{
|
|
194
|
+
type: Component,
|
|
195
|
+
args: [{ selector: 'tala-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
196
|
+
'[class]': 'hostClasses()',
|
|
197
|
+
}, providers: [
|
|
198
|
+
{
|
|
199
|
+
provide: NG_VALUE_ACCESSOR,
|
|
200
|
+
useExisting: forwardRef(() => TalaInput),
|
|
201
|
+
multi: true,
|
|
202
|
+
},
|
|
203
|
+
], template: "@if (label()) {\n <div class=\"tala-input__label-row\">\n <label class=\"tala-input__label\" [attr.for]=\"_id\">{{ label() }}</label>\n @if (required()) {\n <span class=\"tala-input__required\" aria-hidden=\"true\">*</span>\n }\n </div>\n}\n\n<div\n class=\"tala-input__container\"\n [class.tala-input__container--has-prefix]=\"prefix()\"\n [class.tala-input__container--has-suffix]=\"suffix()\"\n>\n @if (prefix()) {\n <div class=\"tala-input__prefix\">{{ prefix() }}</div>\n }\n <ng-content select=\"[slot=leading-icon]\"></ng-content>\n <input\n class=\"tala-input__field\"\n [id]=\"_id\"\n [type]=\"type()\"\n [name]=\"name()\"\n [placeholder]=\"placeholder()\"\n [value]=\"_value()\"\n [disabled]=\"_isDisabled()\"\n [attr.readonly]=\"readonly() || null\"\n [required]=\"required()\"\n [attr.aria-invalid]=\"status() === 'error' || null\"\n [attr.aria-describedby]=\"helperText() && !_isDisabled() ? _helperId : null\"\n (input)=\"_onInput($event)\"\n (blur)=\"_onBlur()\"\n />\n <ng-content select=\"[slot=trailing-icon]\"></ng-content>\n @if (suffix()) {\n <div class=\"tala-input__suffix\">{{ suffix() }}</div>\n }\n</div>\n\n@if (helperText() && !_isDisabled()) {\n <div class=\"tala-input__helper-row\" [id]=\"_helperId\">\n <span class=\"tala-input__helper\">{{ helperText() }}</span>\n </div>\n}\n", styles: ["tala-input{--tala-input-bg: var(--tala-sys-color-surface-default);--tala-input-border-color: var(--tala-sys-color-outline-default);--tala-input-color: var(--tala-sys-color-text-primary);--tala-input-placeholder-color: var(--tala-sys-color-text-placeholder);--tala-input-label-color: var(--tala-sys-color-text-secondary);--tala-input-helper-color: var(--tala-sys-color-text-secondary);--tala-input-prefix-bg: var(--tala-sys-color-surface-sunken);--tala-input-prefix-color: var(--tala-sys-color-text-secondary);--tala-input-required-color: var(--tala-sys-color-brand);--tala-input-focus-ring: 0 0 0 3px rgba(9, 9, 13, .1);--tala-input-height: 40px;--tala-input-padding-x: 12px;--tala-input-icon-size: 16px;--tala-input-border-radius: var(--radius-md);--tala-input-gap: var(--space-2);display:flex;flex-direction:column;gap:var(--space-1);box-sizing:border-box}.tala-input__label-row{display:flex;align-items:center;gap:var(--space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-input__label{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-input-label-color);cursor:pointer}.tala-input__required{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-input-required-color)}.tala-input__container{display:flex;align-items:center;gap:var(--tala-input-gap);height:var(--tala-input-height);padding:0 var(--tala-input-padding-x);border:1px solid var(--tala-input-border-color);border-radius:var(--tala-input-border-radius);background-color:var(--tala-input-bg);overflow:hidden;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}.tala-input__container--has-prefix{padding-left:0}.tala-input__container--has-suffix{padding-right:0}tala-input:not(.tala-input--disabled,.tala-input--readonly) .tala-input__container:hover{border-color:var(--tala-sys-color-outline-strong)}tala-input:not(.tala-input--disabled) .tala-input__container:focus-within{border-color:var(--tala-sys-color-outline-focus);box-shadow:var(--tala-input-focus-ring)}.tala-input__field{flex:1 0 0;min-width:0;height:100%;padding:0;border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-input-color);box-sizing:border-box}.tala-input__field::placeholder{color:var(--tala-input-placeholder-color)}.tala-input__field:disabled{cursor:not-allowed}.tala-input__prefix,.tala-input__suffix{display:flex;align-items:center;justify-content:center;align-self:stretch;padding:0 var(--tala-input-padding-x);background-color:var(--tala-input-prefix-bg);color:var(--tala-input-prefix-color);font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);white-space:nowrap;flex-shrink:0}.tala-input__prefix{border-right:1px solid var(--tala-input-border-color)}.tala-input__suffix{border-left:1px solid var(--tala-input-border-color)}tala-input [slot=leading-icon],tala-input [slot=trailing-icon]{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-input-icon-size);height:var(--tala-input-icon-size);color:var(--tala-sys-color-text-tertiary)}tala-input [slot=leading-icon] svg,tala-input [slot=trailing-icon] svg{width:100%;height:100%}.tala-input__helper-row{display:flex;align-items:flex-start;min-height:16px}.tala-input__helper{font-family:var(--font-body);font-size:var(--text-caption-large-size);line-height:var(--text-caption-large-height);font-weight:var(--font-weight-regular);color:var(--tala-input-helper-color)}tala-input.tala-input--sm{--tala-input-height: 32px;--tala-input-padding-x: 10px;--tala-input-icon-size: 14px}tala-input.tala-input--lg{--tala-input-height: 48px;--tala-input-padding-x: 14px;--tala-input-icon-size: 18px;--tala-input-border-radius: var(--radius-lg)}tala-input.tala-input--error{--tala-input-border-color: var(--tala-sys-color-error-outline);--tala-input-helper-color: var(--tala-sys-color-error-text)}tala-input.tala-input--success{--tala-input-border-color: var(--tala-sys-color-success-outline);--tala-input-helper-color: var(--tala-sys-color-success-text)}tala-input.tala-input--warning{--tala-input-border-color: var(--tala-sys-color-warning-outline);--tala-input-helper-color: var(--tala-sys-color-warning-text)}tala-input.tala-input--disabled{--tala-input-bg: var(--tala-sys-color-surface-sunken);--tala-input-color: var(--tala-sys-color-text-disabled);--tala-input-placeholder-color: var(--tala-sys-color-text-disabled);--tala-input-label-color: var(--tala-sys-color-text-disabled);--tala-input-prefix-color: var(--tala-sys-color-text-disabled);pointer-events:none}tala-input.tala-input--readonly{--tala-input-bg: var(--tala-sys-color-surface-sunken)}tala-input.tala-input--readonly .tala-input__field{cursor:default}\n"] }]
|
|
204
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], 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 }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
|
|
205
|
+
|
|
206
|
+
class TalaSelect {
|
|
207
|
+
static _nextId = 0;
|
|
208
|
+
_elementRef = inject(ElementRef);
|
|
209
|
+
type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
210
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
211
|
+
status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
|
|
212
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
213
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
214
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
215
|
+
helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
216
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
217
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
218
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
219
|
+
width = input('full', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
220
|
+
_id = `tala-select-${++TalaSelect._nextId}`;
|
|
221
|
+
_helperId = `${this._id}-helper`;
|
|
222
|
+
_listboxId = `${this._id}-listbox`;
|
|
223
|
+
_isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
|
|
224
|
+
_value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
|
|
225
|
+
_searchQuery = signal('', ...(ngDevMode ? [{ debugName: "_searchQuery" }] : /* istanbul ignore next */ []));
|
|
226
|
+
_focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_focusedIndex" }] : /* istanbul ignore next */ []));
|
|
227
|
+
_disabledByForm = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByForm" }] : /* istanbul ignore next */ []));
|
|
228
|
+
_isDisabled = computed(() => this.disabled() || this._disabledByForm(), ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
|
|
229
|
+
_hostWidth = computed(() => {
|
|
230
|
+
const w = this.width();
|
|
231
|
+
if (w === 'full')
|
|
232
|
+
return '100%';
|
|
233
|
+
if (w === 'auto')
|
|
234
|
+
return 'fit-content';
|
|
235
|
+
return w;
|
|
236
|
+
}, ...(ngDevMode ? [{ debugName: "_hostWidth" }] : /* istanbul ignore next */ []));
|
|
237
|
+
_filteredOptions = computed(() => {
|
|
238
|
+
const opts = this.options();
|
|
239
|
+
if (this.type() !== 'searchable')
|
|
240
|
+
return opts;
|
|
241
|
+
const q = this._searchQuery().toLowerCase().trim();
|
|
242
|
+
if (!q)
|
|
243
|
+
return opts;
|
|
244
|
+
return opts.filter((o) => o.label.toLowerCase().includes(q));
|
|
245
|
+
}, ...(ngDevMode ? [{ debugName: "_filteredOptions" }] : /* istanbul ignore next */ []));
|
|
246
|
+
_hasValue = computed(() => {
|
|
247
|
+
const v = this._value();
|
|
248
|
+
return Array.isArray(v) ? v.length > 0 : v !== '';
|
|
249
|
+
}, ...(ngDevMode ? [{ debugName: "_hasValue" }] : /* istanbul ignore next */ []));
|
|
250
|
+
_displayValue = computed(() => {
|
|
251
|
+
const v = this._value();
|
|
252
|
+
const opts = this.options();
|
|
253
|
+
if (this.type() === 'multi') {
|
|
254
|
+
return v.map((val) => opts.find((o) => o.value === val)?.label ?? val).join(', ');
|
|
255
|
+
}
|
|
256
|
+
return opts.find((o) => o.value === v)?.label ?? '';
|
|
257
|
+
}, ...(ngDevMode ? [{ debugName: "_displayValue" }] : /* istanbul ignore next */ []));
|
|
258
|
+
_selectedLabels = computed(() => {
|
|
259
|
+
const v = this._value();
|
|
260
|
+
const opts = this.options();
|
|
261
|
+
if (!Array.isArray(v))
|
|
262
|
+
return [];
|
|
263
|
+
return v.map((val) => ({ value: val, label: opts.find((o) => o.value === val)?.label ?? val }));
|
|
264
|
+
}, ...(ngDevMode ? [{ debugName: "_selectedLabels" }] : /* istanbul ignore next */ []));
|
|
265
|
+
hostClasses = computed(() => [
|
|
266
|
+
'tala-select',
|
|
267
|
+
`tala-select--${this.size()}`,
|
|
268
|
+
`tala-select--${this.status()}`,
|
|
269
|
+
this._isOpen() ? 'tala-select--open' : '',
|
|
270
|
+
this._isDisabled() ? 'tala-select--disabled' : '',
|
|
271
|
+
this.loading() ? 'tala-select--loading' : '',
|
|
272
|
+
]
|
|
273
|
+
.filter(Boolean)
|
|
274
|
+
.join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
275
|
+
_onChange = () => { };
|
|
276
|
+
_onTouched = () => { };
|
|
277
|
+
_onDocumentClick(target) {
|
|
278
|
+
if (!this._elementRef.nativeElement.contains(target)) {
|
|
279
|
+
this._isOpen.set(false);
|
|
280
|
+
this._searchQuery.set('');
|
|
281
|
+
this._focusedIndex.set(-1);
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
writeValue(value) {
|
|
285
|
+
if (this.type() === 'multi') {
|
|
286
|
+
this._value.set(Array.isArray(value) ? value : value ? [value] : []);
|
|
287
|
+
}
|
|
288
|
+
else {
|
|
289
|
+
this._value.set(typeof value === 'string' ? value : '');
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
registerOnChange(fn) {
|
|
293
|
+
this._onChange = fn;
|
|
294
|
+
}
|
|
295
|
+
registerOnTouched(fn) {
|
|
296
|
+
this._onTouched = fn;
|
|
297
|
+
}
|
|
298
|
+
setDisabledState(isDisabled) {
|
|
299
|
+
this._disabledByForm.set(isDisabled);
|
|
300
|
+
}
|
|
301
|
+
_onTriggerClick(event) {
|
|
302
|
+
event.stopPropagation();
|
|
303
|
+
if (this._isDisabled() || this.loading())
|
|
304
|
+
return;
|
|
305
|
+
if (this._isOpen()) {
|
|
306
|
+
this._isOpen.set(false);
|
|
307
|
+
this._searchQuery.set('');
|
|
308
|
+
this._focusedIndex.set(-1);
|
|
309
|
+
}
|
|
310
|
+
else {
|
|
311
|
+
this._isOpen.set(true);
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
_onTriggerKeydown(event) {
|
|
315
|
+
if (this._isDisabled() || this.loading())
|
|
316
|
+
return;
|
|
317
|
+
switch (event.key) {
|
|
318
|
+
case ' ':
|
|
319
|
+
case 'Enter':
|
|
320
|
+
event.preventDefault();
|
|
321
|
+
if (!this._isOpen()) {
|
|
322
|
+
this._isOpen.set(true);
|
|
323
|
+
}
|
|
324
|
+
else if (this._focusedIndex() >= 0) {
|
|
325
|
+
const opt = this._filteredOptions()[this._focusedIndex()];
|
|
326
|
+
if (opt && !opt.disabled)
|
|
327
|
+
this._selectOption(opt, event);
|
|
328
|
+
}
|
|
329
|
+
break;
|
|
330
|
+
case 'Escape':
|
|
331
|
+
event.preventDefault();
|
|
332
|
+
this._isOpen.set(false);
|
|
333
|
+
this._searchQuery.set('');
|
|
334
|
+
this._focusedIndex.set(-1);
|
|
335
|
+
break;
|
|
336
|
+
case 'ArrowDown':
|
|
337
|
+
event.preventDefault();
|
|
338
|
+
if (!this._isOpen()) {
|
|
339
|
+
this._isOpen.set(true);
|
|
340
|
+
}
|
|
341
|
+
else {
|
|
342
|
+
const max = this._filteredOptions().length - 1;
|
|
343
|
+
this._focusedIndex.update((i) => Math.min(i + 1, max));
|
|
344
|
+
}
|
|
345
|
+
break;
|
|
346
|
+
case 'ArrowUp':
|
|
347
|
+
event.preventDefault();
|
|
348
|
+
if (this._isOpen()) {
|
|
349
|
+
this._focusedIndex.update((i) => Math.max(i - 1, 0));
|
|
350
|
+
}
|
|
351
|
+
break;
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
_selectOption(opt, event) {
|
|
355
|
+
event.stopPropagation();
|
|
356
|
+
if (opt.disabled)
|
|
357
|
+
return;
|
|
358
|
+
if (this.type() === 'multi') {
|
|
359
|
+
const current = this._value();
|
|
360
|
+
const idx = current.indexOf(opt.value);
|
|
361
|
+
const next = idx >= 0 ? current.filter((v) => v !== opt.value) : [...current, opt.value];
|
|
362
|
+
this._value.set(next);
|
|
363
|
+
this._onChange(next);
|
|
364
|
+
}
|
|
365
|
+
else {
|
|
366
|
+
this._value.set(opt.value);
|
|
367
|
+
this._onChange(opt.value);
|
|
368
|
+
this._isOpen.set(false);
|
|
369
|
+
this._searchQuery.set('');
|
|
370
|
+
this._focusedIndex.set(-1);
|
|
371
|
+
}
|
|
372
|
+
this._onTouched();
|
|
373
|
+
}
|
|
374
|
+
_removeChip(value, event) {
|
|
375
|
+
event.stopPropagation();
|
|
376
|
+
const current = this._value();
|
|
377
|
+
const next = current.filter((v) => v !== value);
|
|
378
|
+
this._value.set(next);
|
|
379
|
+
this._onChange(next);
|
|
380
|
+
this._onTouched();
|
|
381
|
+
}
|
|
382
|
+
_isSelected(value) {
|
|
383
|
+
const v = this._value();
|
|
384
|
+
return Array.isArray(v) ? v.includes(value) : v === value;
|
|
385
|
+
}
|
|
386
|
+
_onSearchInput(event) {
|
|
387
|
+
const input = event.target;
|
|
388
|
+
this._searchQuery.set(input.value);
|
|
389
|
+
this._focusedIndex.set(-1);
|
|
390
|
+
}
|
|
391
|
+
_onDropdownClick(event) {
|
|
392
|
+
event.stopPropagation();
|
|
393
|
+
}
|
|
394
|
+
_onSearchKeydown(event) {
|
|
395
|
+
switch (event.key) {
|
|
396
|
+
case 'ArrowDown':
|
|
397
|
+
event.preventDefault();
|
|
398
|
+
this._focusedIndex.update((i) => Math.min(i + 1, this._filteredOptions().length - 1));
|
|
399
|
+
break;
|
|
400
|
+
case 'ArrowUp':
|
|
401
|
+
event.preventDefault();
|
|
402
|
+
this._focusedIndex.update((i) => Math.max(i - 1, 0));
|
|
403
|
+
break;
|
|
404
|
+
case 'Enter':
|
|
405
|
+
event.preventDefault();
|
|
406
|
+
if (this._focusedIndex() >= 0) {
|
|
407
|
+
const opt = this._filteredOptions()[this._focusedIndex()];
|
|
408
|
+
if (opt && !opt.disabled)
|
|
409
|
+
this._selectOption(opt, event);
|
|
410
|
+
}
|
|
411
|
+
break;
|
|
412
|
+
case 'Escape':
|
|
413
|
+
event.preventDefault();
|
|
414
|
+
this._isOpen.set(false);
|
|
415
|
+
this._searchQuery.set('');
|
|
416
|
+
this._focusedIndex.set(-1);
|
|
417
|
+
break;
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
421
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TalaSelect, isStandalone: true, selector: "tala-select", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "_onDocumentClick($event.target)" }, properties: { "class": "hostClasses()", "style.width": "_hostWidth()" } }, providers: [
|
|
422
|
+
{
|
|
423
|
+
provide: NG_VALUE_ACCESSOR,
|
|
424
|
+
useExisting: forwardRef(() => TalaSelect),
|
|
425
|
+
multi: true,
|
|
426
|
+
},
|
|
427
|
+
], ngImport: i0, template: "@if (label()) {\n <div class=\"tala-select__label-row\">\n <label class=\"tala-select__label\" [attr.for]=\"_id\">{{ label() }}</label>\n @if (required()) {\n <span class=\"tala-select__required\" aria-hidden=\"true\">*</span>\n }\n </div>\n}\n\n<div\n class=\"tala-select__trigger\"\n [id]=\"_id\"\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"_isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"_listboxId\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-disabled]=\"_isDisabled() || null\"\n [attr.aria-invalid]=\"status() === 'error' || null\"\n [attr.aria-describedby]=\"helperText() && !_isDisabled() ? _helperId : null\"\n (click)=\"_onTriggerClick($event)\"\n (keydown)=\"_onTriggerKeydown($event)\"\n>\n <div class=\"tala-select__trigger-content\">\n @if (type() === 'multi' && _hasValue()) {\n <div class=\"tala-select__chips\">\n @for (chip of _selectedLabels(); track chip.value) {\n <span class=\"tala-select__chip\">\n {{ chip.label }}\n <button\n class=\"tala-select__chip-remove\"\n type=\"button\"\n aria-label=\"Remove {{ chip.label }}\"\n (click)=\"_removeChip(chip.value, $event)\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n >\n <line x1=\"4\" y1=\"4\" x2=\"12\" y2=\"12\" />\n <line x1=\"12\" y1=\"4\" x2=\"4\" y2=\"12\" />\n </svg>\n </button>\n </span>\n }\n </div>\n } @else if (type() === 'searchable' && _isOpen()) {\n <input\n class=\"tala-select__search\"\n type=\"text\"\n autocomplete=\"off\"\n [placeholder]=\"placeholder() || 'Search...'\"\n [value]=\"_searchQuery()\"\n (input)=\"_onSearchInput($event)\"\n (keydown)=\"_onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <span class=\"tala-select__value\" [class.tala-select__value--placeholder]=\"!_hasValue()\">\n {{ _hasValue() ? _displayValue() : placeholder() }}\n </span>\n }\n </div>\n\n <span class=\"tala-select__trailing\">\n @if (loading()) {\n <svg\n class=\"tala-select__spinner\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n </svg>\n } @else {\n <svg\n class=\"tala-select__chevron\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M4 6l4 4 4-4\" />\n </svg>\n }\n </span>\n</div>\n\n@if (_isOpen() && !_isDisabled() && !loading()) {\n <div\n class=\"tala-select__dropdown\"\n role=\"listbox\"\n [id]=\"_listboxId\"\n [attr.aria-multiselectable]=\"type() === 'multi' || null\"\n (click)=\"_onDropdownClick($event)\"\n >\n @for (opt of _filteredOptions(); track opt.value; let i = $index) {\n <div\n class=\"tala-select__option\"\n [class.tala-select__option--selected]=\"_isSelected(opt.value)\"\n [class.tala-select__option--disabled]=\"opt.disabled\"\n [class.tala-select__option--focused]=\"_focusedIndex() === i\"\n role=\"option\"\n [attr.aria-selected]=\"_isSelected(opt.value)\"\n [attr.aria-disabled]=\"opt.disabled || null\"\n (click)=\"_selectOption(opt, $event)\"\n >\n @if (type() === 'multi') {\n <span class=\"tala-select__checkbox\" aria-hidden=\"true\">\n @if (_isSelected(opt.value)) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M3 8.5L6.5 12 13 5\" />\n </svg>\n }\n </span>\n }\n <span class=\"tala-select__option-label\">{{ opt.label }}</span>\n @if (type() === 'single' && _isSelected(opt.value)) {\n <svg\n class=\"tala-select__option-check\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M3 8.5L6.5 12 13 5\" />\n </svg>\n }\n </div>\n } @empty {\n <div class=\"tala-select__empty\">No options found</div>\n }\n </div>\n}\n\n@if (helperText() && !_isDisabled()) {\n <div class=\"tala-select__helper-row\" [id]=\"_helperId\">\n <span class=\"tala-select__helper\">{{ helperText() }}</span>\n </div>\n}\n", styles: ["tala-select{--tala-select-bg: var(--tala-sys-color-surface-default);--tala-select-border-color: var(--tala-sys-color-outline-default);--tala-select-color: var(--tala-sys-color-text-primary);--tala-select-placeholder-color: var(--tala-sys-color-text-placeholder);--tala-select-label-color: var(--tala-sys-color-text-secondary);--tala-select-helper-color: var(--tala-sys-color-text-secondary);--tala-select-focus-ring: 0 0 0 3px rgba(9, 9, 13, .1);--tala-select-height: 40px;--tala-select-padding-x: 12px;--tala-select-gap: var(--space-2);--tala-select-icon-size: 16px;--tala-select-border-radius: var(--radius-md);position:relative;display:flex;flex-direction:column;gap:var(--space-1);box-sizing:border-box}.tala-select__label-row{display:flex;align-items:center;gap:var(--space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-select__label{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-select-label-color);cursor:pointer}.tala-select__required{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-sys-color-brand)}.tala-select__trigger{display:flex;align-items:center;gap:var(--tala-select-gap);min-height:var(--tala-select-height);padding:4px var(--tala-select-padding-x);border:1px solid var(--tala-select-border-color);border-radius:var(--tala-select-border-radius);background-color:var(--tala-select-bg);overflow:hidden;box-sizing:border-box;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.tala-select__trigger:focus-visible{border-color:var(--tala-sys-color-outline-focus);box-shadow:var(--tala-select-focus-ring)}tala-select:not(.tala-select--disabled,.tala-select--loading) .tala-select__trigger:hover{border-color:var(--tala-sys-color-outline-strong)}tala-select.tala-select--open .tala-select__trigger{border-color:var(--tala-sys-color-outline-focus);box-shadow:var(--tala-select-focus-ring)}.tala-select__trigger-content{flex:1 0 0;min-width:0;display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap;overflow:hidden}.tala-select__value{font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tala-select__value--placeholder{color:var(--tala-select-placeholder-color)}.tala-select__search{flex:1 0 0;min-width:0;border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);padding:0;box-sizing:border-box}.tala-select__search::placeholder{color:var(--tala-select-placeholder-color)}.tala-select__trailing{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-select-icon-size);height:var(--tala-select-icon-size);color:var(--tala-sys-color-text-tertiary)}.tala-select__chevron{width:100%;height:100%;transition:transform .15s ease}tala-select.tala-select--open .tala-select__chevron{transform:rotate(180deg)}@keyframes tala-spin{to{transform:rotate(360deg)}}.tala-select__spinner{width:100%;height:100%;animation:tala-spin .7s linear infinite;transform-origin:center}.tala-select__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background-color:var(--tala-sys-color-surface-raised);border:1px solid var(--tala-sys-color-outline-default);border-radius:var(--tala-select-border-radius);box-shadow:var(--shadow-md);max-height:240px;overflow-y:auto;z-index:1000;box-sizing:border-box;padding:var(--space-1) 0}.tala-select__option{display:flex;align-items:center;gap:var(--space-2);padding:8px var(--tala-select-padding-x);font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);cursor:pointer;transition:background-color .1s ease}.tala-select__option:hover,.tala-select__option--focused{background-color:var(--tala-sys-color-surface-sunken)}.tala-select__option--selected{color:var(--tala-sys-color-brand);font-weight:var(--font-weight-medium)}.tala-select__option--disabled{color:var(--tala-sys-color-text-disabled);cursor:not-allowed}.tala-select__option--disabled:hover{background-color:transparent}.tala-select__option-label{flex:1 0 0;min-width:0}.tala-select__option-check{flex-shrink:0;width:var(--tala-select-icon-size);height:var(--tala-select-icon-size);color:var(--tala-sys-color-brand)}.tala-select__checkbox{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1.5px solid var(--tala-sys-color-outline-default);border-radius:4px;color:var(--tala-sys-color-brand);box-sizing:border-box;transition:background-color .1s ease,border-color .1s ease}.tala-select__checkbox svg{width:10px;height:10px;display:none}.tala-select__option--selected .tala-select__checkbox{background-color:var(--tala-sys-color-brand);border-color:var(--tala-sys-color-brand)}.tala-select__option--selected .tala-select__checkbox svg{display:block;color:#fff;stroke:#fff;fill:none;stroke-width:2}.tala-select__empty{padding:8px var(--tala-select-padding-x);font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);color:var(--tala-sys-color-text-tertiary);text-align:center}.tala-select__chips{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0}.tala-select__chip{display:inline-flex;align-items:center;gap:4px;padding:0 6px;height:20px;background-color:var(--tala-sys-color-surface-sunken);border:1px solid var(--tala-sys-color-outline-default);border-radius:4px;font-family:var(--font-body);font-size:var(--text-caption-large-size);line-height:var(--text-caption-large-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);white-space:nowrap}.tala-select__chip-remove{display:flex;align-items:center;justify-content:center;width:12px;height:12px;padding:0;border:none;background:transparent;color:var(--tala-sys-color-text-tertiary);cursor:pointer;border-radius:2px;flex-shrink:0}.tala-select__chip-remove svg{width:8px;height:8px}.tala-select__chip-remove:hover{color:var(--tala-sys-color-text-primary)}.tala-select__helper-row{display:flex;align-items:flex-start;min-height:16px}.tala-select__helper{font-family:var(--font-body);font-size:var(--text-caption-large-size);line-height:var(--text-caption-large-height);font-weight:var(--font-weight-regular);color:var(--tala-select-helper-color)}tala-select.tala-select--sm{--tala-select-height: 32px;--tala-select-padding-x: 10px;--tala-select-gap: 6px;--tala-select-icon-size: 14px}tala-select.tala-select--lg{--tala-select-height: 48px;--tala-select-padding-x: 14px;--tala-select-icon-size: 18px;--tala-select-border-radius: var(--radius-lg)}tala-select.tala-select--error{--tala-select-bg: var(--tala-sys-color-error-surface);--tala-select-border-color: var(--tala-sys-color-error-outline);--tala-select-helper-color: var(--tala-sys-color-error-text)}tala-select.tala-select--success{--tala-select-bg: var(--tala-sys-color-success-surface);--tala-select-border-color: var(--tala-sys-color-success-outline);--tala-select-helper-color: var(--tala-sys-color-success-text)}tala-select.tala-select--disabled{--tala-select-bg: var(--tala-sys-color-surface-sunken);--tala-select-color: var(--tala-sys-color-text-disabled);--tala-select-placeholder-color: var(--tala-sys-color-text-disabled);--tala-select-label-color: var(--tala-sys-color-text-disabled);pointer-events:none}tala-select.tala-select--disabled .tala-select__trigger{cursor:not-allowed}tala-select.tala-select--loading .tala-select__trigger{cursor:wait;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
428
|
+
}
|
|
429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaSelect, decorators: [{
|
|
430
|
+
type: Component,
|
|
431
|
+
args: [{ selector: 'tala-select', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
432
|
+
'[class]': 'hostClasses()',
|
|
433
|
+
'[style.width]': '_hostWidth()',
|
|
434
|
+
}, providers: [
|
|
435
|
+
{
|
|
436
|
+
provide: NG_VALUE_ACCESSOR,
|
|
437
|
+
useExisting: forwardRef(() => TalaSelect),
|
|
438
|
+
multi: true,
|
|
439
|
+
},
|
|
440
|
+
], template: "@if (label()) {\n <div class=\"tala-select__label-row\">\n <label class=\"tala-select__label\" [attr.for]=\"_id\">{{ label() }}</label>\n @if (required()) {\n <span class=\"tala-select__required\" aria-hidden=\"true\">*</span>\n }\n </div>\n}\n\n<div\n class=\"tala-select__trigger\"\n [id]=\"_id\"\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"_isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"_listboxId\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-disabled]=\"_isDisabled() || null\"\n [attr.aria-invalid]=\"status() === 'error' || null\"\n [attr.aria-describedby]=\"helperText() && !_isDisabled() ? _helperId : null\"\n (click)=\"_onTriggerClick($event)\"\n (keydown)=\"_onTriggerKeydown($event)\"\n>\n <div class=\"tala-select__trigger-content\">\n @if (type() === 'multi' && _hasValue()) {\n <div class=\"tala-select__chips\">\n @for (chip of _selectedLabels(); track chip.value) {\n <span class=\"tala-select__chip\">\n {{ chip.label }}\n <button\n class=\"tala-select__chip-remove\"\n type=\"button\"\n aria-label=\"Remove {{ chip.label }}\"\n (click)=\"_removeChip(chip.value, $event)\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n >\n <line x1=\"4\" y1=\"4\" x2=\"12\" y2=\"12\" />\n <line x1=\"12\" y1=\"4\" x2=\"4\" y2=\"12\" />\n </svg>\n </button>\n </span>\n }\n </div>\n } @else if (type() === 'searchable' && _isOpen()) {\n <input\n class=\"tala-select__search\"\n type=\"text\"\n autocomplete=\"off\"\n [placeholder]=\"placeholder() || 'Search...'\"\n [value]=\"_searchQuery()\"\n (input)=\"_onSearchInput($event)\"\n (keydown)=\"_onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <span class=\"tala-select__value\" [class.tala-select__value--placeholder]=\"!_hasValue()\">\n {{ _hasValue() ? _displayValue() : placeholder() }}\n </span>\n }\n </div>\n\n <span class=\"tala-select__trailing\">\n @if (loading()) {\n <svg\n class=\"tala-select__spinner\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n </svg>\n } @else {\n <svg\n class=\"tala-select__chevron\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M4 6l4 4 4-4\" />\n </svg>\n }\n </span>\n</div>\n\n@if (_isOpen() && !_isDisabled() && !loading()) {\n <div\n class=\"tala-select__dropdown\"\n role=\"listbox\"\n [id]=\"_listboxId\"\n [attr.aria-multiselectable]=\"type() === 'multi' || null\"\n (click)=\"_onDropdownClick($event)\"\n >\n @for (opt of _filteredOptions(); track opt.value; let i = $index) {\n <div\n class=\"tala-select__option\"\n [class.tala-select__option--selected]=\"_isSelected(opt.value)\"\n [class.tala-select__option--disabled]=\"opt.disabled\"\n [class.tala-select__option--focused]=\"_focusedIndex() === i\"\n role=\"option\"\n [attr.aria-selected]=\"_isSelected(opt.value)\"\n [attr.aria-disabled]=\"opt.disabled || null\"\n (click)=\"_selectOption(opt, $event)\"\n >\n @if (type() === 'multi') {\n <span class=\"tala-select__checkbox\" aria-hidden=\"true\">\n @if (_isSelected(opt.value)) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M3 8.5L6.5 12 13 5\" />\n </svg>\n }\n </span>\n }\n <span class=\"tala-select__option-label\">{{ opt.label }}</span>\n @if (type() === 'single' && _isSelected(opt.value)) {\n <svg\n class=\"tala-select__option-check\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M3 8.5L6.5 12 13 5\" />\n </svg>\n }\n </div>\n } @empty {\n <div class=\"tala-select__empty\">No options found</div>\n }\n </div>\n}\n\n@if (helperText() && !_isDisabled()) {\n <div class=\"tala-select__helper-row\" [id]=\"_helperId\">\n <span class=\"tala-select__helper\">{{ helperText() }}</span>\n </div>\n}\n", styles: ["tala-select{--tala-select-bg: var(--tala-sys-color-surface-default);--tala-select-border-color: var(--tala-sys-color-outline-default);--tala-select-color: var(--tala-sys-color-text-primary);--tala-select-placeholder-color: var(--tala-sys-color-text-placeholder);--tala-select-label-color: var(--tala-sys-color-text-secondary);--tala-select-helper-color: var(--tala-sys-color-text-secondary);--tala-select-focus-ring: 0 0 0 3px rgba(9, 9, 13, .1);--tala-select-height: 40px;--tala-select-padding-x: 12px;--tala-select-gap: var(--space-2);--tala-select-icon-size: 16px;--tala-select-border-radius: var(--radius-md);position:relative;display:flex;flex-direction:column;gap:var(--space-1);box-sizing:border-box}.tala-select__label-row{display:flex;align-items:center;gap:var(--space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-select__label{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-select-label-color);cursor:pointer}.tala-select__required{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-sys-color-brand)}.tala-select__trigger{display:flex;align-items:center;gap:var(--tala-select-gap);min-height:var(--tala-select-height);padding:4px var(--tala-select-padding-x);border:1px solid var(--tala-select-border-color);border-radius:var(--tala-select-border-radius);background-color:var(--tala-select-bg);overflow:hidden;box-sizing:border-box;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.tala-select__trigger:focus-visible{border-color:var(--tala-sys-color-outline-focus);box-shadow:var(--tala-select-focus-ring)}tala-select:not(.tala-select--disabled,.tala-select--loading) .tala-select__trigger:hover{border-color:var(--tala-sys-color-outline-strong)}tala-select.tala-select--open .tala-select__trigger{border-color:var(--tala-sys-color-outline-focus);box-shadow:var(--tala-select-focus-ring)}.tala-select__trigger-content{flex:1 0 0;min-width:0;display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap;overflow:hidden}.tala-select__value{font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tala-select__value--placeholder{color:var(--tala-select-placeholder-color)}.tala-select__search{flex:1 0 0;min-width:0;border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);padding:0;box-sizing:border-box}.tala-select__search::placeholder{color:var(--tala-select-placeholder-color)}.tala-select__trailing{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-select-icon-size);height:var(--tala-select-icon-size);color:var(--tala-sys-color-text-tertiary)}.tala-select__chevron{width:100%;height:100%;transition:transform .15s ease}tala-select.tala-select--open .tala-select__chevron{transform:rotate(180deg)}@keyframes tala-spin{to{transform:rotate(360deg)}}.tala-select__spinner{width:100%;height:100%;animation:tala-spin .7s linear infinite;transform-origin:center}.tala-select__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background-color:var(--tala-sys-color-surface-raised);border:1px solid var(--tala-sys-color-outline-default);border-radius:var(--tala-select-border-radius);box-shadow:var(--shadow-md);max-height:240px;overflow-y:auto;z-index:1000;box-sizing:border-box;padding:var(--space-1) 0}.tala-select__option{display:flex;align-items:center;gap:var(--space-2);padding:8px var(--tala-select-padding-x);font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);cursor:pointer;transition:background-color .1s ease}.tala-select__option:hover,.tala-select__option--focused{background-color:var(--tala-sys-color-surface-sunken)}.tala-select__option--selected{color:var(--tala-sys-color-brand);font-weight:var(--font-weight-medium)}.tala-select__option--disabled{color:var(--tala-sys-color-text-disabled);cursor:not-allowed}.tala-select__option--disabled:hover{background-color:transparent}.tala-select__option-label{flex:1 0 0;min-width:0}.tala-select__option-check{flex-shrink:0;width:var(--tala-select-icon-size);height:var(--tala-select-icon-size);color:var(--tala-sys-color-brand)}.tala-select__checkbox{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1.5px solid var(--tala-sys-color-outline-default);border-radius:4px;color:var(--tala-sys-color-brand);box-sizing:border-box;transition:background-color .1s ease,border-color .1s ease}.tala-select__checkbox svg{width:10px;height:10px;display:none}.tala-select__option--selected .tala-select__checkbox{background-color:var(--tala-sys-color-brand);border-color:var(--tala-sys-color-brand)}.tala-select__option--selected .tala-select__checkbox svg{display:block;color:#fff;stroke:#fff;fill:none;stroke-width:2}.tala-select__empty{padding:8px var(--tala-select-padding-x);font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);color:var(--tala-sys-color-text-tertiary);text-align:center}.tala-select__chips{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0}.tala-select__chip{display:inline-flex;align-items:center;gap:4px;padding:0 6px;height:20px;background-color:var(--tala-sys-color-surface-sunken);border:1px solid var(--tala-sys-color-outline-default);border-radius:4px;font-family:var(--font-body);font-size:var(--text-caption-large-size);line-height:var(--text-caption-large-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);white-space:nowrap}.tala-select__chip-remove{display:flex;align-items:center;justify-content:center;width:12px;height:12px;padding:0;border:none;background:transparent;color:var(--tala-sys-color-text-tertiary);cursor:pointer;border-radius:2px;flex-shrink:0}.tala-select__chip-remove svg{width:8px;height:8px}.tala-select__chip-remove:hover{color:var(--tala-sys-color-text-primary)}.tala-select__helper-row{display:flex;align-items:flex-start;min-height:16px}.tala-select__helper{font-family:var(--font-body);font-size:var(--text-caption-large-size);line-height:var(--text-caption-large-height);font-weight:var(--font-weight-regular);color:var(--tala-select-helper-color)}tala-select.tala-select--sm{--tala-select-height: 32px;--tala-select-padding-x: 10px;--tala-select-gap: 6px;--tala-select-icon-size: 14px}tala-select.tala-select--lg{--tala-select-height: 48px;--tala-select-padding-x: 14px;--tala-select-icon-size: 18px;--tala-select-border-radius: var(--radius-lg)}tala-select.tala-select--error{--tala-select-bg: var(--tala-sys-color-error-surface);--tala-select-border-color: var(--tala-sys-color-error-outline);--tala-select-helper-color: var(--tala-sys-color-error-text)}tala-select.tala-select--success{--tala-select-bg: var(--tala-sys-color-success-surface);--tala-select-border-color: var(--tala-sys-color-success-outline);--tala-select-helper-color: var(--tala-sys-color-success-text)}tala-select.tala-select--disabled{--tala-select-bg: var(--tala-sys-color-surface-sunken);--tala-select-color: var(--tala-sys-color-text-disabled);--tala-select-placeholder-color: var(--tala-sys-color-text-disabled);--tala-select-label-color: var(--tala-sys-color-text-disabled);pointer-events:none}tala-select.tala-select--disabled .tala-select__trigger{cursor:not-allowed}tala-select.tala-select--loading .tala-select__trigger{cursor:wait;pointer-events:none}\n"] }]
|
|
441
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _onDocumentClick: [{
|
|
442
|
+
type: HostListener,
|
|
443
|
+
args: ['document:click', ['$event.target']]
|
|
444
|
+
}] } });
|
|
445
|
+
|
|
133
446
|
/*
|
|
134
447
|
* Public API Surface of doku-tala
|
|
135
448
|
*/
|
|
@@ -138,5 +451,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
138
451
|
* Generated bundle index. Do not edit.
|
|
139
452
|
*/
|
|
140
453
|
|
|
141
|
-
export { TalaAvatar, TalaAvatarGroup, TalaButton };
|
|
454
|
+
export { TalaAvatar, TalaAvatarGroup, TalaButton, TalaInput, TalaSelect };
|
|
142
455
|
//# sourceMappingURL=doku-com-tala.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"doku-com-tala.mjs","sources":["../../../projects/doku-tala/src/lib/components/avatar/avatar.ts","../../../projects/doku-tala/src/lib/components/avatar/avatar.html","../../../projects/doku-tala/src/lib/components/avatar/avatar-group.ts","../../../projects/doku-tala/src/lib/components/button/button.ts","../../../projects/doku-tala/src/lib/components/button/button.html","../../../projects/doku-tala/src/public-api.ts","../../../projects/doku-tala/src/doku-com-tala.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n} from '@angular/core';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type AvatarShape = 'circle' | 'square';\nexport type AvatarStatus = 'none' | 'online' | 'busy' | 'away' | 'offline';\n\n@Component({\n selector: 'tala-avatar',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n templateUrl: './avatar.html',\n styleUrl: './avatar.scss',\n host: {\n '[class]': 'hostClasses()',\n '[style.background-color]': 'bgColor()',\n '[attr.role]': '\"img\"',\n '[attr.aria-label]': 'ariaLabel()',\n },\n})\nexport class TalaAvatar {\n readonly name = input<string>('');\n readonly size = input<AvatarSize>('md');\n readonly shape = input<AvatarShape>('circle');\n readonly status = input<AvatarStatus>('none');\n readonly badgeCount = input<number>(0);\n readonly src = input<string>('');\n\n protected readonly initials = computed(() => this.getInitials(this.name()));\n\n protected readonly bgColor = computed(() =>\n this.src()\n ? 'transparent'\n : this.palette[this.hashName(this.name() || 'default') % this.palette.length],\n );\n\n protected readonly hasStatus = computed(() => this.status() !== 'none');\n protected readonly hasBadge = computed(() => !!this.badgeCount());\n\n protected readonly displayBadge = computed(() => {\n const count = this.badgeCount();\n return count > 99 ? '99+' : String(count);\n });\n\n protected readonly ariaLabel = computed(() => {\n const parts = [this.name() || 'Avatar'];\n if (this.hasStatus()) parts.push(`Status: ${this.status()}`);\n const count = this.badgeCount();\n if (count !== 0) parts.push(`${count} notification${count !== 1 ? 's' : ''}`);\n return parts.join(', ');\n });\n\n protected readonly hostClasses = computed(() =>\n [\n 'tala-avatar',\n `tala-avatar--${this.size()}`,\n `tala-avatar--${this.shape()}`,\n this.src() ? 'tala-avatar--image' : '',\n ]\n .filter(Boolean)\n .join(' '),\n );\n\n private readonly palette = [\n 'var(--color-blue-60)',\n 'var(--color-green-60)',\n 'var(--color-red-60)',\n 'var(--color-amber-60)',\n 'var(--color-blue-70)',\n 'var(--color-green-70)',\n 'var(--color-red-70)',\n 'var(--color-amber-70)',\n ];\n\n private hashName(name: string): number {\n let hash = 0;\n for (let i = 0; i < name.length; i++) {\n hash = (name.charCodeAt(i) + ((hash << 5) - hash)) | 0;\n }\n return Math.abs(hash);\n }\n\n private getInitials(name: string): string {\n const words = name.trim().split(/\\s+/).filter(Boolean);\n if (words.length === 0) return '?';\n if (words.length === 1) return words[0].slice(0, 2).toUpperCase();\n return (words[0][0] + words[words.length - 1][0]).toUpperCase();\n }\n}\n","@if (src()) {\n <img class=\"tala-avatar__image\" [src]=\"src()\" [alt]=\"name()\" />\n} @else {\n <span class=\"tala-avatar__initials\">{{ initials() }}</span>\n}\n\n@if (hasStatus()) {\n <span [class]=\"'tala-avatar__status tala-avatar__status--' + status()\" role=\"presentation\"></span>\n}\n\n@if (hasBadge()) {\n <span class=\"tala-avatar__badge\" aria-hidden=\"true\">\n {{ displayBadge() }}\n </span>\n}\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation, input } from '@angular/core';\nimport type { AvatarSize } from './avatar';\n\n@Component({\n selector: 'tala-avatar-group',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n template: `<ng-content />`,\n styleUrl: './avatar-group.scss',\n host: {\n '[class]': '\"tala-avatar-group--\" + size()',\n role: 'group',\n },\n})\nexport class TalaAvatarGroup {\n readonly size = input<AvatarSize>('md');\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n} from '@angular/core';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'link';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\n@Component({\n selector: 'tala-button',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n templateUrl: './button.html',\n styleUrl: './button.scss',\n host: {\n '[class]': 'hostClasses()',\n '[attr.role]': '\"button\"',\n '[attr.tabindex]': 'disabled() ? \"-1\" : \"0\"',\n '[attr.aria-disabled]': 'disabled() || null',\n '[attr.aria-busy]': 'loading() || null',\n '(click)': '_onClick($event)',\n '(keydown.enter)': '_onKeydown($event)',\n '(keydown.space)': '_onKeydown($event)',\n },\n})\nexport class TalaButton {\n readonly variant = input<ButtonVariant>('primary');\n readonly size = input<ButtonSize>('md');\n readonly disabled = input<boolean>(false);\n readonly loading = input<boolean>(false);\n readonly iconOnly = input<boolean>(false);\n\n protected readonly hostClasses = computed(() =>\n [\n 'tala-button',\n `tala-button--${this.variant()}`,\n `tala-button--${this.size()}`,\n this.disabled() ? 'tala-button--disabled' : '',\n this.loading() ? 'tala-button--loading' : '',\n this.iconOnly() ? 'tala-button--icon-only' : '',\n ]\n .filter(Boolean)\n .join(' '),\n );\n\n protected _onClick(event: MouseEvent): void {\n if (this.disabled() || this.loading()) {\n event.stopImmediatePropagation();\n }\n }\n\n protected _onKeydown(event: Event): void {\n if (this.disabled() || this.loading()) return;\n event.preventDefault();\n (event.currentTarget as HTMLElement).click();\n }\n}\n","@if (loading()) {\n <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n}\n\n<ng-content select=\"[slot=prefix]\"></ng-content>\n<ng-content></ng-content>\n<ng-content select=\"[slot=suffix]\"></ng-content>\n","/*\n * Public API Surface of doku-tala\n */\n\nexport * from './lib/components/avatar';\nexport * from './lib/components/button';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MA0Ba,UAAU,CAAA;AACZ,IAAA,IAAI,GAAG,KAAK,CAAS,EAAE,2EAAC;AACxB,IAAA,IAAI,GAAG,KAAK,CAAa,IAAI,2EAAC;AAC9B,IAAA,KAAK,GAAG,KAAK,CAAc,QAAQ,4EAAC;AACpC,IAAA,MAAM,GAAG,KAAK,CAAe,MAAM,6EAAC;AACpC,IAAA,UAAU,GAAG,KAAK,CAAS,CAAC,iFAAC;AAC7B,IAAA,GAAG,GAAG,KAAK,CAAS,EAAE,0EAAC;AAEb,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,+EAAC;IAExD,OAAO,GAAG,QAAQ,CAAC,MACpC,IAAI,CAAC,GAAG;AACN,UAAE;UACA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,SAAS,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAChF;AAEkB,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,KAAK,MAAM,gFAAC;AACpD,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,+EAAC;AAE9C,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AAC9C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;AAC/B,QAAA,OAAO,KAAK,GAAG,EAAE,GAAG,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;AAC3C,IAAA,CAAC,mFAAC;AAEiB,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAK;QAC3C,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,QAAQ,CAAC;QACvC,IAAI,IAAI,CAAC,SAAS,EAAE;YAAE,KAAK,CAAC,IAAI,CAAC,CAAA,QAAA,EAAW,IAAI,CAAC,MAAM,EAAE,CAAA,CAAE,CAAC;AAC5D,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;QAC/B,IAAI,KAAK,KAAK,CAAC;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAA,aAAA,EAAgB,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAA,CAAE,CAAC;AAC7E,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;AACzB,IAAA,CAAC,gFAAC;AAEiB,IAAA,WAAW,GAAG,QAAQ,CAAC,MACxC;QACE,aAAa;AACb,QAAA,CAAA,aAAA,EAAgB,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE;AAC7B,QAAA,CAAA,aAAA,EAAgB,IAAI,CAAC,KAAK,EAAE,CAAA,CAAE;QAC9B,IAAI,CAAC,GAAG,EAAE,GAAG,oBAAoB,GAAG,EAAE;AACvC;SACE,MAAM,CAAC,OAAO;AACd,SAAA,IAAI,CAAC,GAAG,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CACb;AAEgB,IAAA,OAAO,GAAG;QACzB,sBAAsB;QACtB,uBAAuB;QACvB,qBAAqB;QACrB,uBAAuB;QACvB,sBAAsB;QACtB,uBAAuB;QACvB,qBAAqB;QACrB,uBAAuB;KACxB;AAEO,IAAA,QAAQ,CAAC,IAAY,EAAA;QAC3B,IAAI,IAAI,GAAG,CAAC;AACZ,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACpC,IAAI,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC;QACxD;AACA,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;IACvB;AAEQ,IAAA,WAAW,CAAC,IAAY,EAAA;AAC9B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;AACtD,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;AAAE,YAAA,OAAO,GAAG;AAClC,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;AAAE,YAAA,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE;QACjE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE;IACjE;wGAnEW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,UAAU,87BC1BvB,uaAeA,EAAA,MAAA,EAAA,CAAA,g3IAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FDWa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAdtB,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAG/B;AACJ,wBAAA,SAAS,EAAE,eAAe;AAC1B,wBAAA,0BAA0B,EAAE,WAAW;AACvC,wBAAA,aAAa,EAAE,OAAO;AACtB,wBAAA,mBAAmB,EAAE,aAAa;AACnC,qBAAA,EAAA,QAAA,EAAA,uaAAA,EAAA,MAAA,EAAA,CAAA,g3IAAA,CAAA,EAAA;;;METU,eAAe,CAAA;AACjB,IAAA,IAAI,GAAG,KAAK,CAAa,IAAI,2EAAC;wGAD5B,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,sTAPhB,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,woBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FAOf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAZ3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,UAAA,EACjB,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAC3B,CAAA,cAAA,CAAgB,EAAA,IAAA,EAEpB;AACJ,wBAAA,SAAS,EAAE,gCAAgC;AAC3C,wBAAA,IAAI,EAAE,OAAO;AACd,qBAAA,EAAA,MAAA,EAAA,CAAA,woBAAA,CAAA,EAAA;;;MCgBU,UAAU,CAAA;AACZ,IAAA,OAAO,GAAG,KAAK,CAAgB,SAAS,8EAAC;AACzC,IAAA,IAAI,GAAG,KAAK,CAAa,IAAI,2EAAC;AAC9B,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAChC,IAAA,OAAO,GAAG,KAAK,CAAU,KAAK,8EAAC;AAC/B,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAEtB,IAAA,WAAW,GAAG,QAAQ,CAAC,MACxC;QACE,aAAa;AACb,QAAA,CAAA,aAAA,EAAgB,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE;AAChC,QAAA,CAAA,aAAA,EAAgB,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE;QAC7B,IAAI,CAAC,QAAQ,EAAE,GAAG,uBAAuB,GAAG,EAAE;QAC9C,IAAI,CAAC,OAAO,EAAE,GAAG,sBAAsB,GAAG,EAAE;QAC5C,IAAI,CAAC,QAAQ,EAAE,GAAG,wBAAwB,GAAG,EAAE;AAChD;SACE,MAAM,CAAC,OAAO;AACd,SAAA,IAAI,CAAC,GAAG,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CACb;AAES,IAAA,QAAQ,CAAC,KAAiB,EAAA;QAClC,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;YACrC,KAAK,CAAC,wBAAwB,EAAE;QAClC;IACF;AAEU,IAAA,UAAU,CAAC,KAAY,EAAA;QAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE;YAAE;QACvC,KAAK,CAAC,cAAc,EAAE;AACrB,QAAA,KAAK,CAAC,aAA6B,CAAC,KAAK,EAAE;IAC9C;wGA9BW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,UAAU,khCC7BvB,kOAOA,EAAA,MAAA,EAAA,CAAA,29HAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FDsBa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAlBtB,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAG/B;AACJ,wBAAA,SAAS,EAAE,eAAe;AAC1B,wBAAA,aAAa,EAAE,UAAU;AACzB,wBAAA,iBAAiB,EAAE,yBAAyB;AAC5C,wBAAA,sBAAsB,EAAE,oBAAoB;AAC5C,wBAAA,kBAAkB,EAAE,mBAAmB;AACvC,wBAAA,SAAS,EAAE,kBAAkB;AAC7B,wBAAA,iBAAiB,EAAE,oBAAoB;AACvC,wBAAA,iBAAiB,EAAE,oBAAoB;AACxC,qBAAA,EAAA,QAAA,EAAA,kOAAA,EAAA,MAAA,EAAA,CAAA,29HAAA,CAAA,EAAA;;;AE3BH;;AAEG;;ACFH;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"doku-com-tala.mjs","sources":["../../../projects/doku-tala/src/lib/components/avatar/avatar.ts","../../../projects/doku-tala/src/lib/components/avatar/avatar.html","../../../projects/doku-tala/src/lib/components/avatar/avatar-group.ts","../../../projects/doku-tala/src/lib/components/button/button.ts","../../../projects/doku-tala/src/lib/components/button/button.html","../../../projects/doku-tala/src/lib/components/input/input.ts","../../../projects/doku-tala/src/lib/components/input/input.html","../../../projects/doku-tala/src/lib/components/select/select.ts","../../../projects/doku-tala/src/lib/components/select/select.html","../../../projects/doku-tala/src/public-api.ts","../../../projects/doku-tala/src/doku-com-tala.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n} from '@angular/core';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type AvatarShape = 'circle' | 'square';\nexport type AvatarStatus = 'none' | 'online' | 'busy' | 'away' | 'offline';\n\n@Component({\n selector: 'tala-avatar',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n templateUrl: './avatar.html',\n styleUrl: './avatar.scss',\n host: {\n '[class]': 'hostClasses()',\n '[style.background-color]': 'bgColor()',\n '[attr.role]': '\"img\"',\n '[attr.aria-label]': 'ariaLabel()',\n },\n})\nexport class TalaAvatar {\n readonly name = input<string>('');\n readonly size = input<AvatarSize>('md');\n readonly shape = input<AvatarShape>('circle');\n readonly status = input<AvatarStatus>('none');\n readonly badgeCount = input<number>(0);\n readonly src = input<string>('');\n\n protected readonly initials = computed(() => this.getInitials(this.name()));\n\n protected readonly bgColor = computed(() =>\n this.src()\n ? 'transparent'\n : this.palette[this.hashName(this.name() || 'default') % this.palette.length],\n );\n\n protected readonly hasStatus = computed(() => this.status() !== 'none');\n protected readonly hasBadge = computed(() => !!this.badgeCount());\n\n protected readonly displayBadge = computed(() => {\n const count = this.badgeCount();\n return count > 99 ? '99+' : String(count);\n });\n\n protected readonly ariaLabel = computed(() => {\n const parts = [this.name() || 'Avatar'];\n if (this.hasStatus()) parts.push(`Status: ${this.status()}`);\n const count = this.badgeCount();\n if (count !== 0) parts.push(`${count} notification${count !== 1 ? 's' : ''}`);\n return parts.join(', ');\n });\n\n protected readonly hostClasses = computed(() =>\n [\n 'tala-avatar',\n `tala-avatar--${this.size()}`,\n `tala-avatar--${this.shape()}`,\n this.src() ? 'tala-avatar--image' : '',\n ]\n .filter(Boolean)\n .join(' '),\n );\n\n private readonly palette = [\n 'var(--color-blue-60)',\n 'var(--color-green-60)',\n 'var(--color-red-60)',\n 'var(--color-amber-60)',\n 'var(--color-blue-70)',\n 'var(--color-green-70)',\n 'var(--color-red-70)',\n 'var(--color-amber-70)',\n ];\n\n private hashName(name: string): number {\n let hash = 0;\n for (let i = 0; i < name.length; i++) {\n hash = (name.charCodeAt(i) + ((hash << 5) - hash)) | 0;\n }\n return Math.abs(hash);\n }\n\n private getInitials(name: string): string {\n const words = name.trim().split(/\\s+/).filter(Boolean);\n if (words.length === 0) return '?';\n if (words.length === 1) return words[0].slice(0, 2).toUpperCase();\n return (words[0][0] + words[words.length - 1][0]).toUpperCase();\n }\n}\n","@if (src()) {\n <img class=\"tala-avatar__image\" [src]=\"src()\" [alt]=\"name()\" />\n} @else {\n <span class=\"tala-avatar__initials\">{{ initials() }}</span>\n}\n\n@if (hasStatus()) {\n <span [class]=\"'tala-avatar__status tala-avatar__status--' + status()\" role=\"presentation\"></span>\n}\n\n@if (hasBadge()) {\n <span class=\"tala-avatar__badge\" aria-hidden=\"true\">\n {{ displayBadge() }}\n </span>\n}\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation, input } from '@angular/core';\nimport type { AvatarSize } from './avatar';\n\n@Component({\n selector: 'tala-avatar-group',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n template: `<ng-content />`,\n styleUrl: './avatar-group.scss',\n host: {\n '[class]': '\"tala-avatar-group--\" + size()',\n role: 'group',\n },\n})\nexport class TalaAvatarGroup {\n readonly size = input<AvatarSize>('md');\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n} from '@angular/core';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'link';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\n@Component({\n selector: 'tala-button',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n templateUrl: './button.html',\n styleUrl: './button.scss',\n host: {\n '[class]': 'hostClasses()',\n '[attr.role]': '\"button\"',\n '[attr.tabindex]': 'disabled() ? \"-1\" : \"0\"',\n '[attr.aria-disabled]': 'disabled() || null',\n '[attr.aria-busy]': 'loading() || null',\n '(click)': '_onClick($event)',\n '(keydown.enter)': '_onKeydown($event)',\n '(keydown.space)': '_onKeydown($event)',\n },\n})\nexport class TalaButton {\n readonly variant = input<ButtonVariant>('primary');\n readonly size = input<ButtonSize>('md');\n readonly disabled = input<boolean>(false);\n readonly loading = input<boolean>(false);\n readonly iconOnly = input<boolean>(false);\n\n protected readonly hostClasses = computed(() =>\n [\n 'tala-button',\n `tala-button--${this.variant()}`,\n `tala-button--${this.size()}`,\n this.disabled() ? 'tala-button--disabled' : '',\n this.loading() ? 'tala-button--loading' : '',\n this.iconOnly() ? 'tala-button--icon-only' : '',\n ]\n .filter(Boolean)\n .join(' '),\n );\n\n protected _onClick(event: MouseEvent): void {\n if (this.disabled() || this.loading()) {\n event.stopImmediatePropagation();\n }\n }\n\n protected _onKeydown(event: Event): void {\n if (this.disabled() || this.loading()) return;\n event.preventDefault();\n (event.currentTarget as HTMLElement).click();\n }\n}\n","@if (loading()) {\n <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n}\n\n<ng-content select=\"[slot=prefix]\"></ng-content>\n<ng-content></ng-content>\n<ng-content select=\"[slot=suffix]\"></ng-content>\n","import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n forwardRef,\n input,\n signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport type InputSize = 'sm' | 'md' | 'lg';\nexport type InputStatus = 'default' | 'error' | 'success' | 'warning';\n\n@Component({\n selector: 'tala-input',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n templateUrl: './input.html',\n styleUrl: './input.scss',\n host: {\n '[class]': 'hostClasses()',\n },\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => TalaInput),\n multi: true,\n },\n ],\n})\nexport class TalaInput implements ControlValueAccessor {\n private static _nextId = 0;\n\n readonly size = input<InputSize>('md');\n readonly status = input<InputStatus>('default');\n readonly label = input<string>('');\n readonly placeholder = input<string>('');\n readonly helperText = input<string>('');\n readonly required = input<boolean>(false);\n readonly disabled = input<boolean>(false);\n readonly readonly = input<boolean>(false);\n readonly prefix = input<string>('');\n readonly suffix = input<string>('');\n readonly type = input<string>('text');\n readonly name = input<string>('');\n\n protected readonly _id = `tala-input-${++TalaInput._nextId}`;\n protected readonly _helperId = `${this._id}-helper`;\n\n protected readonly _value = signal<string>('');\n protected readonly _disabledByForm = signal<boolean>(false);\n protected readonly _isDisabled = computed(() => this.disabled() || this._disabledByForm());\n\n protected readonly hostClasses = computed(() =>\n [\n 'tala-input',\n `tala-input--${this.size()}`,\n `tala-input--${this.status()}`,\n this._isDisabled() ? 'tala-input--disabled' : '',\n this.readonly() ? 'tala-input--readonly' : '',\n ]\n .filter(Boolean)\n .join(' '),\n );\n\n private _onChange: (value: string) => void = () => {};\n private _onTouched: () => void = () => {};\n\n writeValue(value: string): void {\n this._value.set(value ?? '');\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this._onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this._disabledByForm.set(isDisabled);\n }\n\n protected _onInput(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this._value.set(value);\n this._onChange(value);\n }\n\n protected _onBlur(): void {\n this._onTouched();\n }\n}\n","@if (label()) {\n <div class=\"tala-input__label-row\">\n <label class=\"tala-input__label\" [attr.for]=\"_id\">{{ label() }}</label>\n @if (required()) {\n <span class=\"tala-input__required\" aria-hidden=\"true\">*</span>\n }\n </div>\n}\n\n<div\n class=\"tala-input__container\"\n [class.tala-input__container--has-prefix]=\"prefix()\"\n [class.tala-input__container--has-suffix]=\"suffix()\"\n>\n @if (prefix()) {\n <div class=\"tala-input__prefix\">{{ prefix() }}</div>\n }\n <ng-content select=\"[slot=leading-icon]\"></ng-content>\n <input\n class=\"tala-input__field\"\n [id]=\"_id\"\n [type]=\"type()\"\n [name]=\"name()\"\n [placeholder]=\"placeholder()\"\n [value]=\"_value()\"\n [disabled]=\"_isDisabled()\"\n [attr.readonly]=\"readonly() || null\"\n [required]=\"required()\"\n [attr.aria-invalid]=\"status() === 'error' || null\"\n [attr.aria-describedby]=\"helperText() && !_isDisabled() ? _helperId : null\"\n (input)=\"_onInput($event)\"\n (blur)=\"_onBlur()\"\n />\n <ng-content select=\"[slot=trailing-icon]\"></ng-content>\n @if (suffix()) {\n <div class=\"tala-input__suffix\">{{ suffix() }}</div>\n }\n</div>\n\n@if (helperText() && !_isDisabled()) {\n <div class=\"tala-input__helper-row\" [id]=\"_helperId\">\n <span class=\"tala-input__helper\">{{ helperText() }}</span>\n </div>\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostListener,\n ViewEncapsulation,\n computed,\n forwardRef,\n inject,\n input,\n signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport type SelectType = 'single' | 'searchable' | 'multi';\nexport type SelectSize = 'sm' | 'md' | 'lg';\nexport type SelectStatus = 'default' | 'error' | 'success';\nexport interface SelectOption {\n value: string;\n label: string;\n disabled?: boolean;\n}\n\n@Component({\n selector: 'tala-select',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n templateUrl: './select.html',\n styleUrl: './select.scss',\n host: {\n '[class]': 'hostClasses()',\n '[style.width]': '_hostWidth()',\n },\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => TalaSelect),\n multi: true,\n },\n ],\n})\nexport class TalaSelect implements ControlValueAccessor {\n private static _nextId = 0;\n private readonly _elementRef = inject(ElementRef);\n\n readonly type = input<SelectType>('single');\n readonly size = input<SelectSize>('md');\n readonly status = input<SelectStatus>('default');\n readonly options = input<SelectOption[]>([]);\n readonly placeholder = input<string>('');\n readonly label = input<string>('');\n readonly helperText = input<string>('');\n readonly required = input<boolean>(false);\n readonly disabled = input<boolean>(false);\n readonly loading = input<boolean>(false);\n readonly width = input<'auto' | 'full' | string>('full');\n\n protected readonly _id = `tala-select-${++TalaSelect._nextId}`;\n protected readonly _helperId = `${this._id}-helper`;\n protected readonly _listboxId = `${this._id}-listbox`;\n\n protected readonly _isOpen = signal(false);\n protected readonly _value = signal<string | string[]>('');\n protected readonly _searchQuery = signal('');\n protected readonly _focusedIndex = signal(-1);\n protected readonly _disabledByForm = signal(false);\n\n protected readonly _isDisabled = computed(() => this.disabled() || this._disabledByForm());\n\n protected readonly _hostWidth = computed(() => {\n const w = this.width();\n if (w === 'full') return '100%';\n if (w === 'auto') return 'fit-content';\n return w;\n });\n\n protected readonly _filteredOptions = computed(() => {\n const opts = this.options();\n if (this.type() !== 'searchable') return opts;\n const q = this._searchQuery().toLowerCase().trim();\n if (!q) return opts;\n return opts.filter((o) => o.label.toLowerCase().includes(q));\n });\n\n protected readonly _hasValue = computed(() => {\n const v = this._value();\n return Array.isArray(v) ? v.length > 0 : v !== '';\n });\n\n protected readonly _displayValue = computed(() => {\n const v = this._value();\n const opts = this.options();\n if (this.type() === 'multi') {\n return (v as string[]).map((val) => opts.find((o) => o.value === val)?.label ?? val).join(', ');\n }\n return opts.find((o) => o.value === (v as string))?.label ?? '';\n });\n\n protected readonly _selectedLabels = computed(() => {\n const v = this._value();\n const opts = this.options();\n if (!Array.isArray(v)) return [];\n return v.map((val) => ({ value: val, label: opts.find((o) => o.value === val)?.label ?? val }));\n });\n\n protected readonly hostClasses = computed(() =>\n [\n 'tala-select',\n `tala-select--${this.size()}`,\n `tala-select--${this.status()}`,\n this._isOpen() ? 'tala-select--open' : '',\n this._isDisabled() ? 'tala-select--disabled' : '',\n this.loading() ? 'tala-select--loading' : '',\n ]\n .filter(Boolean)\n .join(' '),\n );\n\n private _onChange: (value: string | string[]) => void = () => {};\n private _onTouched: () => void = () => {};\n\n @HostListener('document:click', ['$event.target'])\n _onDocumentClick(target: EventTarget | null): void {\n if (!this._elementRef.nativeElement.contains(target)) {\n this._isOpen.set(false);\n this._searchQuery.set('');\n this._focusedIndex.set(-1);\n }\n }\n\n writeValue(value: string | string[]): void {\n if (this.type() === 'multi') {\n this._value.set(Array.isArray(value) ? value : value ? [value] : []);\n } else {\n this._value.set(typeof value === 'string' ? value : '');\n }\n }\n\n registerOnChange(fn: (value: string | string[]) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this._onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this._disabledByForm.set(isDisabled);\n }\n\n protected _onTriggerClick(event: MouseEvent): void {\n event.stopPropagation();\n if (this._isDisabled() || this.loading()) return;\n if (this._isOpen()) {\n this._isOpen.set(false);\n this._searchQuery.set('');\n this._focusedIndex.set(-1);\n } else {\n this._isOpen.set(true);\n }\n }\n\n protected _onTriggerKeydown(event: KeyboardEvent): void {\n if (this._isDisabled() || this.loading()) return;\n\n switch (event.key) {\n case ' ':\n case 'Enter':\n event.preventDefault();\n if (!this._isOpen()) {\n this._isOpen.set(true);\n } else if (this._focusedIndex() >= 0) {\n const opt = this._filteredOptions()[this._focusedIndex()];\n if (opt && !opt.disabled) this._selectOption(opt, event);\n }\n break;\n case 'Escape':\n event.preventDefault();\n this._isOpen.set(false);\n this._searchQuery.set('');\n this._focusedIndex.set(-1);\n break;\n case 'ArrowDown':\n event.preventDefault();\n if (!this._isOpen()) {\n this._isOpen.set(true);\n } else {\n const max = this._filteredOptions().length - 1;\n this._focusedIndex.update((i) => Math.min(i + 1, max));\n }\n break;\n case 'ArrowUp':\n event.preventDefault();\n if (this._isOpen()) {\n this._focusedIndex.update((i) => Math.max(i - 1, 0));\n }\n break;\n }\n }\n\n protected _selectOption(opt: SelectOption, event: Event): void {\n event.stopPropagation();\n if (opt.disabled) return;\n\n if (this.type() === 'multi') {\n const current = this._value() as string[];\n const idx = current.indexOf(opt.value);\n const next = idx >= 0 ? current.filter((v) => v !== opt.value) : [...current, opt.value];\n this._value.set(next);\n this._onChange(next);\n } else {\n this._value.set(opt.value);\n this._onChange(opt.value);\n this._isOpen.set(false);\n this._searchQuery.set('');\n this._focusedIndex.set(-1);\n }\n this._onTouched();\n }\n\n protected _removeChip(value: string, event: MouseEvent): void {\n event.stopPropagation();\n const current = this._value() as string[];\n const next = current.filter((v) => v !== value);\n this._value.set(next);\n this._onChange(next);\n this._onTouched();\n }\n\n protected _isSelected(value: string): boolean {\n const v = this._value();\n return Array.isArray(v) ? v.includes(value) : v === value;\n }\n\n protected _onSearchInput(event: Event): void {\n const input = event.target as HTMLInputElement;\n this._searchQuery.set(input.value);\n this._focusedIndex.set(-1);\n }\n\n protected _onDropdownClick(event: MouseEvent): void {\n event.stopPropagation();\n }\n\n protected _onSearchKeydown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this._focusedIndex.update((i) => Math.min(i + 1, this._filteredOptions().length - 1));\n break;\n case 'ArrowUp':\n event.preventDefault();\n this._focusedIndex.update((i) => Math.max(i - 1, 0));\n break;\n case 'Enter':\n event.preventDefault();\n if (this._focusedIndex() >= 0) {\n const opt = this._filteredOptions()[this._focusedIndex()];\n if (opt && !opt.disabled) this._selectOption(opt, event);\n }\n break;\n case 'Escape':\n event.preventDefault();\n this._isOpen.set(false);\n this._searchQuery.set('');\n this._focusedIndex.set(-1);\n break;\n }\n }\n}\n","@if (label()) {\n <div class=\"tala-select__label-row\">\n <label class=\"tala-select__label\" [attr.for]=\"_id\">{{ label() }}</label>\n @if (required()) {\n <span class=\"tala-select__required\" aria-hidden=\"true\">*</span>\n }\n </div>\n}\n\n<div\n class=\"tala-select__trigger\"\n [id]=\"_id\"\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"_isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"_listboxId\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-disabled]=\"_isDisabled() || null\"\n [attr.aria-invalid]=\"status() === 'error' || null\"\n [attr.aria-describedby]=\"helperText() && !_isDisabled() ? _helperId : null\"\n (click)=\"_onTriggerClick($event)\"\n (keydown)=\"_onTriggerKeydown($event)\"\n>\n <div class=\"tala-select__trigger-content\">\n @if (type() === 'multi' && _hasValue()) {\n <div class=\"tala-select__chips\">\n @for (chip of _selectedLabels(); track chip.value) {\n <span class=\"tala-select__chip\">\n {{ chip.label }}\n <button\n class=\"tala-select__chip-remove\"\n type=\"button\"\n aria-label=\"Remove {{ chip.label }}\"\n (click)=\"_removeChip(chip.value, $event)\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n >\n <line x1=\"4\" y1=\"4\" x2=\"12\" y2=\"12\" />\n <line x1=\"12\" y1=\"4\" x2=\"4\" y2=\"12\" />\n </svg>\n </button>\n </span>\n }\n </div>\n } @else if (type() === 'searchable' && _isOpen()) {\n <input\n class=\"tala-select__search\"\n type=\"text\"\n autocomplete=\"off\"\n [placeholder]=\"placeholder() || 'Search...'\"\n [value]=\"_searchQuery()\"\n (input)=\"_onSearchInput($event)\"\n (keydown)=\"_onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <span class=\"tala-select__value\" [class.tala-select__value--placeholder]=\"!_hasValue()\">\n {{ _hasValue() ? _displayValue() : placeholder() }}\n </span>\n }\n </div>\n\n <span class=\"tala-select__trailing\">\n @if (loading()) {\n <svg\n class=\"tala-select__spinner\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n </svg>\n } @else {\n <svg\n class=\"tala-select__chevron\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M4 6l4 4 4-4\" />\n </svg>\n }\n </span>\n</div>\n\n@if (_isOpen() && !_isDisabled() && !loading()) {\n <div\n class=\"tala-select__dropdown\"\n role=\"listbox\"\n [id]=\"_listboxId\"\n [attr.aria-multiselectable]=\"type() === 'multi' || null\"\n (click)=\"_onDropdownClick($event)\"\n >\n @for (opt of _filteredOptions(); track opt.value; let i = $index) {\n <div\n class=\"tala-select__option\"\n [class.tala-select__option--selected]=\"_isSelected(opt.value)\"\n [class.tala-select__option--disabled]=\"opt.disabled\"\n [class.tala-select__option--focused]=\"_focusedIndex() === i\"\n role=\"option\"\n [attr.aria-selected]=\"_isSelected(opt.value)\"\n [attr.aria-disabled]=\"opt.disabled || null\"\n (click)=\"_selectOption(opt, $event)\"\n >\n @if (type() === 'multi') {\n <span class=\"tala-select__checkbox\" aria-hidden=\"true\">\n @if (_isSelected(opt.value)) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M3 8.5L6.5 12 13 5\" />\n </svg>\n }\n </span>\n }\n <span class=\"tala-select__option-label\">{{ opt.label }}</span>\n @if (type() === 'single' && _isSelected(opt.value)) {\n <svg\n class=\"tala-select__option-check\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M3 8.5L6.5 12 13 5\" />\n </svg>\n }\n </div>\n } @empty {\n <div class=\"tala-select__empty\">No options found</div>\n }\n </div>\n}\n\n@if (helperText() && !_isDisabled()) {\n <div class=\"tala-select__helper-row\" [id]=\"_helperId\">\n <span class=\"tala-select__helper\">{{ helperText() }}</span>\n </div>\n}\n","/*\n * Public API Surface of doku-tala\n */\n\nexport * from './lib/components/avatar';\nexport * from './lib/components/button';\nexport * from './lib/components/input';\nexport * from './lib/components/select';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/styles/_color.scss
CHANGED
|
@@ -1,131 +1,178 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
/*
|
|
2
|
+
/* ═══════════════════════════════════════════════
|
|
3
|
+
REFERENCE
|
|
4
|
+
Raw palette values. Never use directly in
|
|
5
|
+
components — use system tokens instead.
|
|
6
|
+
═══════════════════════════════════════════════ */
|
|
3
7
|
|
|
4
8
|
/* Red */
|
|
5
|
-
--color-red-5: #fff0f0;
|
|
6
|
-
--color-red-10: #ffd6d5;
|
|
7
|
-
--color-red-20: #ff9b99;
|
|
8
|
-
--color-red-30: #f76b68;
|
|
9
|
-
--color-red-40: #ef4340;
|
|
10
|
-
--color-red-50: #e1251b;
|
|
11
|
-
--color-red-60: #c41e15;
|
|
12
|
-
--color-red-
|
|
13
|
-
--color-red-
|
|
14
|
-
--color-red-
|
|
15
|
-
--color-red-
|
|
9
|
+
--tala-ref-color-red-5: #fff0f0;
|
|
10
|
+
--tala-ref-color-red-10: #ffd6d5;
|
|
11
|
+
--tala-ref-color-red-20: #ff9b99;
|
|
12
|
+
--tala-ref-color-red-30: #f76b68;
|
|
13
|
+
--tala-ref-color-red-40: #ef4340;
|
|
14
|
+
--tala-ref-color-red-50: #e1251b;
|
|
15
|
+
--tala-ref-color-red-60: #c41e15;
|
|
16
|
+
--tala-ref-color-red-65: #b91c1c;
|
|
17
|
+
--tala-ref-color-red-70: #a0170f;
|
|
18
|
+
--tala-ref-color-red-80: #7d110a;
|
|
19
|
+
--tala-ref-color-red-90: #5c0b06;
|
|
20
|
+
--tala-ref-color-red-100: #3a0603;
|
|
16
21
|
|
|
17
22
|
/* Neutral */
|
|
18
|
-
--color-neutral-0: #ffffff;
|
|
19
|
-
--color-neutral-5: #f7f7f8;
|
|
20
|
-
--color-neutral-10: #f0f0f2;
|
|
21
|
-
--color-neutral-20: #e2e2e6;
|
|
22
|
-
--color-neutral-30: #c8c8cf;
|
|
23
|
-
--color-neutral-40: #ababb5;
|
|
24
|
-
--color-neutral-50: #8e8e9a;
|
|
25
|
-
--color-neutral-60: #6e6e7c;
|
|
26
|
-
--color-neutral-70: #52525e;
|
|
27
|
-
--color-neutral-80: #363640;
|
|
28
|
-
--color-neutral-90: #1e1e26;
|
|
29
|
-
--color-neutral-100: #09090d;
|
|
23
|
+
--tala-ref-color-neutral-0: #ffffff;
|
|
24
|
+
--tala-ref-color-neutral-5: #f7f7f8;
|
|
25
|
+
--tala-ref-color-neutral-10: #f0f0f2;
|
|
26
|
+
--tala-ref-color-neutral-20: #e2e2e6;
|
|
27
|
+
--tala-ref-color-neutral-30: #c8c8cf;
|
|
28
|
+
--tala-ref-color-neutral-40: #ababb5;
|
|
29
|
+
--tala-ref-color-neutral-50: #8e8e9a;
|
|
30
|
+
--tala-ref-color-neutral-60: #6e6e7c;
|
|
31
|
+
--tala-ref-color-neutral-70: #52525e;
|
|
32
|
+
--tala-ref-color-neutral-80: #363640;
|
|
33
|
+
--tala-ref-color-neutral-90: #1e1e26;
|
|
34
|
+
--tala-ref-color-neutral-100: #09090d;
|
|
30
35
|
|
|
31
36
|
/* Green */
|
|
32
|
-
--color-green-5: #f0fbf6;
|
|
33
|
-
--color-green-10: #d1f0e3;
|
|
34
|
-
--color-green-20: #a3dbca;
|
|
35
|
-
--color-green-30: #4ab98a;
|
|
36
|
-
--color-green-40: #22a470;
|
|
37
|
-
--color-green-50: #008856;
|
|
38
|
-
--color-green-60: #006b44;
|
|
39
|
-
--color-green-
|
|
40
|
-
--color-green-
|
|
41
|
-
--color-green-
|
|
42
|
-
--color-green-
|
|
37
|
+
--tala-ref-color-green-5: #f0fbf6;
|
|
38
|
+
--tala-ref-color-green-10: #d1f0e3;
|
|
39
|
+
--tala-ref-color-green-20: #a3dbca;
|
|
40
|
+
--tala-ref-color-green-30: #4ab98a;
|
|
41
|
+
--tala-ref-color-green-40: #22a470;
|
|
42
|
+
--tala-ref-color-green-50: #008856;
|
|
43
|
+
--tala-ref-color-green-60: #006b44;
|
|
44
|
+
--tala-ref-color-green-65: #005535;
|
|
45
|
+
--tala-ref-color-green-70: #005436;
|
|
46
|
+
--tala-ref-color-green-80: #003d28;
|
|
47
|
+
--tala-ref-color-green-90: #00261a;
|
|
48
|
+
--tala-ref-color-green-100: #00100c;
|
|
43
49
|
|
|
44
50
|
/* Amber */
|
|
45
|
-
--color-amber-5: #fffbf0;
|
|
46
|
-
--color-amber-10: #fef3c7;
|
|
47
|
-
--color-amber-20: #fde68a;
|
|
48
|
-
--color-amber-30: #ffd24a;
|
|
49
|
-
--color-amber-40: #d97706;
|
|
50
|
-
--color-amber-50: #b45309;
|
|
51
|
-
--color-amber-60: #92400e;
|
|
52
|
-
--color-amber-
|
|
53
|
-
--color-amber-
|
|
54
|
-
--color-amber-
|
|
55
|
-
--color-amber-
|
|
51
|
+
--tala-ref-color-amber-5: #fffbf0;
|
|
52
|
+
--tala-ref-color-amber-10: #fef3c7;
|
|
53
|
+
--tala-ref-color-amber-20: #fde68a;
|
|
54
|
+
--tala-ref-color-amber-30: #ffd24a;
|
|
55
|
+
--tala-ref-color-amber-40: #d97706;
|
|
56
|
+
--tala-ref-color-amber-50: #b45309;
|
|
57
|
+
--tala-ref-color-amber-60: #92400e;
|
|
58
|
+
--tala-ref-color-amber-65: #734a00;
|
|
59
|
+
--tala-ref-color-amber-70: #78350f;
|
|
60
|
+
--tala-ref-color-amber-80: #5e2a0c;
|
|
61
|
+
--tala-ref-color-amber-90: #451e08;
|
|
62
|
+
--tala-ref-color-amber-100: #2d1206;
|
|
56
63
|
|
|
57
64
|
/* Blue */
|
|
58
|
-
--color-blue-5: #f0f6ff;
|
|
59
|
-
--color-blue-10: #dbeafe;
|
|
60
|
-
--color-blue-20: #bfdbfe;
|
|
61
|
-
--color-blue-30: #6aabfd;
|
|
62
|
-
--color-blue-40: #3b82f6;
|
|
63
|
-
--color-blue-50: #1d4ed8;
|
|
64
|
-
--color-blue-60: #1e40af;
|
|
65
|
-
--color-blue-
|
|
66
|
-
--color-blue-
|
|
67
|
-
--color-blue-
|
|
68
|
-
--color-blue-
|
|
65
|
+
--tala-ref-color-blue-5: #f0f6ff;
|
|
66
|
+
--tala-ref-color-blue-10: #dbeafe;
|
|
67
|
+
--tala-ref-color-blue-20: #bfdbfe;
|
|
68
|
+
--tala-ref-color-blue-30: #6aabfd;
|
|
69
|
+
--tala-ref-color-blue-40: #3b82f6;
|
|
70
|
+
--tala-ref-color-blue-50: #1d4ed8;
|
|
71
|
+
--tala-ref-color-blue-60: #1e40af;
|
|
72
|
+
--tala-ref-color-blue-65: #07469e;
|
|
73
|
+
--tala-ref-color-blue-70: #1e3a8a;
|
|
74
|
+
--tala-ref-color-blue-80: #1a3070;
|
|
75
|
+
--tala-ref-color-blue-90: #142558;
|
|
76
|
+
--tala-ref-color-blue-100: #0c1840;
|
|
69
77
|
|
|
70
|
-
/*
|
|
78
|
+
/* ═══════════════════════════════════════════════
|
|
79
|
+
SYSTEM
|
|
80
|
+
Role-based tokens. Use these in components.
|
|
81
|
+
Never reference primitives directly.
|
|
82
|
+
═══════════════════════════════════════════════ */
|
|
71
83
|
|
|
72
|
-
/*
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
84
|
+
/* ── Surface ──────────────────────────────────────────────────────────────
|
|
85
|
+
Background layers that establish visual depth.
|
|
86
|
+
Use to differentiate page regions — not for interactive or status color.
|
|
87
|
+
sunken → recessed areas like inputs or code blocks
|
|
88
|
+
default → base page and standard cards
|
|
89
|
+
raised → cards or panels that sit above the page
|
|
90
|
+
overlay → modals, drawers, and popovers
|
|
91
|
+
inverse → dark/inverted sections
|
|
92
|
+
──────────────────────────────────────────────────────────────────────── */
|
|
93
|
+
--tala-sys-color-surface-sunken: var(--tala-ref-color-neutral-5);
|
|
94
|
+
--tala-sys-color-surface-default: var(--tala-ref-color-neutral-0);
|
|
95
|
+
--tala-sys-color-surface-raised: var(--tala-ref-color-neutral-0);
|
|
96
|
+
--tala-sys-color-surface-overlay: var(--tala-ref-color-neutral-0);
|
|
97
|
+
--tala-sys-color-surface-inverse: var(--tala-ref-color-neutral-100);
|
|
77
98
|
|
|
78
|
-
/*
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
99
|
+
/* ── Text ──────────────────────────────────────────────────────────────────
|
|
100
|
+
Controls text legibility and visual hierarchy.
|
|
101
|
+
Use the hierarchy variants (primary → tertiary) to guide reading order,
|
|
102
|
+
not to convey status or meaning.
|
|
103
|
+
primary → main body copy and headings
|
|
104
|
+
secondary → supporting labels, captions, and metadata
|
|
105
|
+
tertiary → de-emphasized hints or supplemental info
|
|
106
|
+
disabled → non-interactive / unavailable text
|
|
107
|
+
inverse → text on dark or inverse surfaces
|
|
108
|
+
placeholder → input placeholder copy
|
|
109
|
+
link → interactive inline links
|
|
110
|
+
──────────────────────────────────────────────────────────────────────── */
|
|
111
|
+
--tala-sys-color-text-primary: var(--tala-ref-color-neutral-100);
|
|
112
|
+
--tala-sys-color-text-secondary: var(--tala-ref-color-neutral-70);
|
|
113
|
+
--tala-sys-color-text-tertiary: var(--tala-ref-color-neutral-50);
|
|
114
|
+
--tala-sys-color-text-disabled: var(--tala-ref-color-neutral-30);
|
|
115
|
+
--tala-sys-color-text-inverse: var(--tala-ref-color-neutral-0);
|
|
116
|
+
--tala-sys-color-text-placeholder: var(--tala-ref-color-neutral-40);
|
|
117
|
+
--tala-sys-color-text-link: var(--tala-ref-color-red-50);
|
|
83
118
|
|
|
84
|
-
/*
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
119
|
+
/* ── Outline ───────────────────────────────────────────────────────────────
|
|
120
|
+
Borders and dividers that separate or define elements.
|
|
121
|
+
Do not use for status — use feedback tokens for that.
|
|
122
|
+
default → subtle dividers and input borders at rest
|
|
123
|
+
strong → more prominent borders needing higher contrast
|
|
124
|
+
focus → keyboard focus ring on interactive elements
|
|
125
|
+
──────────────────────────────────────────────────────────────────────── */
|
|
126
|
+
--tala-sys-color-outline-default: var(--tala-ref-color-neutral-20);
|
|
127
|
+
--tala-sys-color-outline-strong: var(--tala-ref-color-neutral-30);
|
|
128
|
+
--tala-sys-color-outline-focus: var(--tala-ref-color-neutral-100);
|
|
89
129
|
|
|
90
|
-
/*
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
--color-
|
|
98
|
-
--color-
|
|
130
|
+
/* ── Brand ─────────────────────────────────────────────────────────────────
|
|
131
|
+
Primary brand identity color for interactive elements.
|
|
132
|
+
Use for CTAs, primary buttons, and key accents.
|
|
133
|
+
on-brand → content (icon/text) placed on top of a brand-colored surface
|
|
134
|
+
hover → brand color on pointer hover
|
|
135
|
+
subtle → light tinted surface for brand-adjacent areas
|
|
136
|
+
──────────────────────────────────────────────────────────────────────── */
|
|
137
|
+
--tala-sys-color-brand: var(--tala-ref-color-red-50);
|
|
138
|
+
--tala-sys-color-on-brand: var(--tala-ref-color-neutral-0);
|
|
139
|
+
--tala-sys-color-brand-hover: var(--tala-ref-color-red-60);
|
|
140
|
+
--tala-sys-color-brand-subtle: var(--tala-ref-color-red-5);
|
|
99
141
|
|
|
100
|
-
/*
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
--
|
|
108
|
-
--color-
|
|
109
|
-
--color-
|
|
110
|
-
--color-action-danger-bg: var(--color-red-60);
|
|
111
|
-
--color-action-danger-text: var(--color-neutral-0);
|
|
112
|
-
--color-action-accent-bg: var(--color-red-50);
|
|
113
|
-
--color-action-accent-text: var(--color-neutral-0);
|
|
142
|
+
/* ── Error ─────────────────────────────────────────────────────────────────
|
|
143
|
+
Destructive interactive states for clickable elements.
|
|
144
|
+
Use on buttons, icons, or controls that perform a destructive action.
|
|
145
|
+
Do NOT use for read-only status — use error feedback tokens instead.
|
|
146
|
+
on-error → content (icon/text) placed on top of an error-colored surface
|
|
147
|
+
hover → error color on pointer hover
|
|
148
|
+
──────────────────────────────────────────────────────────────────────── */
|
|
149
|
+
--tala-sys-color-error: var(--tala-ref-color-red-65);
|
|
150
|
+
--tala-sys-color-on-error: var(--tala-ref-color-neutral-0);
|
|
151
|
+
--tala-sys-color-error-hover: var(--tala-ref-color-red-70);
|
|
114
152
|
|
|
115
|
-
/*
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
--color-
|
|
126
|
-
--color-
|
|
127
|
-
--color-
|
|
128
|
-
|
|
129
|
-
--color-
|
|
130
|
-
--color-
|
|
153
|
+
/* ── Feedback ──────────────────────────────────────────────────────────────
|
|
154
|
+
Read-only status communication for non-interactive display components
|
|
155
|
+
such as alerts, banners, badges, and toasts.
|
|
156
|
+
Each status provides a surface/text/outline triad for composing these
|
|
157
|
+
components — do NOT use for interactive or clickable elements.
|
|
158
|
+
success → positive outcome or completion
|
|
159
|
+
warning → potential issue requiring attention
|
|
160
|
+
error → failure or blocking problem
|
|
161
|
+
info → neutral informational message
|
|
162
|
+
──────────────────────────────────────────────────────────────────────── */
|
|
163
|
+
--tala-sys-color-success-surface: var(--tala-ref-color-green-5);
|
|
164
|
+
--tala-sys-color-success-text: var(--tala-ref-color-green-65);
|
|
165
|
+
--tala-sys-color-success-outline: var(--tala-ref-color-green-30);
|
|
166
|
+
|
|
167
|
+
--tala-sys-color-warning-surface: var(--tala-ref-color-amber-5);
|
|
168
|
+
--tala-sys-color-warning-text: var(--tala-ref-color-amber-65);
|
|
169
|
+
--tala-sys-color-warning-outline: var(--tala-ref-color-amber-30);
|
|
170
|
+
|
|
171
|
+
--tala-sys-color-error-surface: var(--tala-ref-color-red-5);
|
|
172
|
+
--tala-sys-color-error-text: var(--tala-ref-color-red-70);
|
|
173
|
+
--tala-sys-color-error-outline: var(--tala-ref-color-red-30);
|
|
174
|
+
|
|
175
|
+
--tala-sys-color-info-surface: var(--tala-ref-color-blue-5);
|
|
176
|
+
--tala-sys-color-info-text: var(--tala-ref-color-blue-65);
|
|
177
|
+
--tala-sys-color-info-outline: var(--tala-ref-color-blue-30);
|
|
131
178
|
}
|
package/styles/_shadow.scss
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--shadow-xs: 0 1px 2px color-mix(in srgb, var(--color-neutral-100) 5%, transparent);
|
|
3
|
-
--shadow-sm: 0 1px 3px color-mix(in srgb, var(--color-neutral-100) 8%, transparent);
|
|
4
|
-
--shadow-md: 0 4px 6px color-mix(in srgb, var(--color-neutral-100) 7%, transparent);
|
|
5
|
-
--shadow-lg: 0 10px 15px color-mix(in srgb, var(--color-neutral-100) 8%, transparent);
|
|
6
|
-
--shadow-xl: 0 20px 25px color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
|
|
2
|
+
--shadow-xs: 0 1px 2px color-mix(in srgb, var(--tala-ref-color-neutral-100) 5%, transparent);
|
|
3
|
+
--shadow-sm: 0 1px 3px color-mix(in srgb, var(--tala-ref-color-neutral-100) 8%, transparent);
|
|
4
|
+
--shadow-md: 0 4px 6px color-mix(in srgb, var(--tala-ref-color-neutral-100) 7%, transparent);
|
|
5
|
+
--shadow-lg: 0 10px 15px color-mix(in srgb, var(--tala-ref-color-neutral-100) 8%, transparent);
|
|
6
|
+
--shadow-xl: 0 20px 25px color-mix(in srgb, var(--tala-ref-color-neutral-100) 10%, transparent);
|
|
7
7
|
}
|
package/types/doku-com-tala.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
2
3
|
|
|
3
4
|
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
4
5
|
type AvatarShape = 'circle' | 'square';
|
|
@@ -45,5 +46,98 @@ declare class TalaButton {
|
|
|
45
46
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaButton, "tala-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=prefix]", "*", "[slot=suffix]"], true, never>;
|
|
46
47
|
}
|
|
47
48
|
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
type InputSize = 'sm' | 'md' | 'lg';
|
|
50
|
+
type InputStatus = 'default' | 'error' | 'success' | 'warning';
|
|
51
|
+
declare class TalaInput implements ControlValueAccessor {
|
|
52
|
+
private static _nextId;
|
|
53
|
+
readonly size: _angular_core.InputSignal<InputSize>;
|
|
54
|
+
readonly status: _angular_core.InputSignal<InputStatus>;
|
|
55
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
56
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
57
|
+
readonly helperText: _angular_core.InputSignal<string>;
|
|
58
|
+
readonly required: _angular_core.InputSignal<boolean>;
|
|
59
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
60
|
+
readonly readonly: _angular_core.InputSignal<boolean>;
|
|
61
|
+
readonly prefix: _angular_core.InputSignal<string>;
|
|
62
|
+
readonly suffix: _angular_core.InputSignal<string>;
|
|
63
|
+
readonly type: _angular_core.InputSignal<string>;
|
|
64
|
+
readonly name: _angular_core.InputSignal<string>;
|
|
65
|
+
protected readonly _id: string;
|
|
66
|
+
protected readonly _helperId: string;
|
|
67
|
+
protected readonly _value: _angular_core.WritableSignal<string>;
|
|
68
|
+
protected readonly _disabledByForm: _angular_core.WritableSignal<boolean>;
|
|
69
|
+
protected readonly _isDisabled: _angular_core.Signal<boolean>;
|
|
70
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
71
|
+
private _onChange;
|
|
72
|
+
private _onTouched;
|
|
73
|
+
writeValue(value: string): void;
|
|
74
|
+
registerOnChange(fn: (value: string) => void): void;
|
|
75
|
+
registerOnTouched(fn: () => void): void;
|
|
76
|
+
setDisabledState(isDisabled: boolean): void;
|
|
77
|
+
protected _onInput(event: Event): void;
|
|
78
|
+
protected _onBlur(): void;
|
|
79
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaInput, never>;
|
|
80
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaInput, "tala-input", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=leading-icon]", "[slot=trailing-icon]"], true, never>;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
type SelectType = 'single' | 'searchable' | 'multi';
|
|
84
|
+
type SelectSize = 'sm' | 'md' | 'lg';
|
|
85
|
+
type SelectStatus = 'default' | 'error' | 'success';
|
|
86
|
+
interface SelectOption {
|
|
87
|
+
value: string;
|
|
88
|
+
label: string;
|
|
89
|
+
disabled?: boolean;
|
|
90
|
+
}
|
|
91
|
+
declare class TalaSelect implements ControlValueAccessor {
|
|
92
|
+
private static _nextId;
|
|
93
|
+
private readonly _elementRef;
|
|
94
|
+
readonly type: _angular_core.InputSignal<SelectType>;
|
|
95
|
+
readonly size: _angular_core.InputSignal<SelectSize>;
|
|
96
|
+
readonly status: _angular_core.InputSignal<SelectStatus>;
|
|
97
|
+
readonly options: _angular_core.InputSignal<SelectOption[]>;
|
|
98
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
99
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
100
|
+
readonly helperText: _angular_core.InputSignal<string>;
|
|
101
|
+
readonly required: _angular_core.InputSignal<boolean>;
|
|
102
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
103
|
+
readonly loading: _angular_core.InputSignal<boolean>;
|
|
104
|
+
readonly width: _angular_core.InputSignal<string>;
|
|
105
|
+
protected readonly _id: string;
|
|
106
|
+
protected readonly _helperId: string;
|
|
107
|
+
protected readonly _listboxId: string;
|
|
108
|
+
protected readonly _isOpen: _angular_core.WritableSignal<boolean>;
|
|
109
|
+
protected readonly _value: _angular_core.WritableSignal<string | string[]>;
|
|
110
|
+
protected readonly _searchQuery: _angular_core.WritableSignal<string>;
|
|
111
|
+
protected readonly _focusedIndex: _angular_core.WritableSignal<number>;
|
|
112
|
+
protected readonly _disabledByForm: _angular_core.WritableSignal<boolean>;
|
|
113
|
+
protected readonly _isDisabled: _angular_core.Signal<boolean>;
|
|
114
|
+
protected readonly _hostWidth: _angular_core.Signal<string>;
|
|
115
|
+
protected readonly _filteredOptions: _angular_core.Signal<SelectOption[]>;
|
|
116
|
+
protected readonly _hasValue: _angular_core.Signal<boolean>;
|
|
117
|
+
protected readonly _displayValue: _angular_core.Signal<string>;
|
|
118
|
+
protected readonly _selectedLabels: _angular_core.Signal<{
|
|
119
|
+
value: string;
|
|
120
|
+
label: string;
|
|
121
|
+
}[]>;
|
|
122
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
123
|
+
private _onChange;
|
|
124
|
+
private _onTouched;
|
|
125
|
+
_onDocumentClick(target: EventTarget | null): void;
|
|
126
|
+
writeValue(value: string | string[]): void;
|
|
127
|
+
registerOnChange(fn: (value: string | string[]) => void): void;
|
|
128
|
+
registerOnTouched(fn: () => void): void;
|
|
129
|
+
setDisabledState(isDisabled: boolean): void;
|
|
130
|
+
protected _onTriggerClick(event: MouseEvent): void;
|
|
131
|
+
protected _onTriggerKeydown(event: KeyboardEvent): void;
|
|
132
|
+
protected _selectOption(opt: SelectOption, event: Event): void;
|
|
133
|
+
protected _removeChip(value: string, event: MouseEvent): void;
|
|
134
|
+
protected _isSelected(value: string): boolean;
|
|
135
|
+
protected _onSearchInput(event: Event): void;
|
|
136
|
+
protected _onDropdownClick(event: MouseEvent): void;
|
|
137
|
+
protected _onSearchKeydown(event: KeyboardEvent): void;
|
|
138
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaSelect, never>;
|
|
139
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaSelect, "tala-select", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
export { TalaAvatar, TalaAvatarGroup, TalaButton, TalaInput, TalaSelect };
|
|
143
|
+
export type { AvatarShape, AvatarSize, AvatarStatus, ButtonSize, ButtonVariant, InputSize, InputStatus, SelectOption, SelectSize, SelectStatus, SelectType };
|