@doku-com/tala 1.0.0-alpha.5 → 1.0.0-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/fesm2022/doku-com-tala.mjs +44 -10
- package/fesm2022/doku-com-tala.mjs.map +1 -1
- package/package.json +4 -4
- package/styles/_typography.scss +145 -279
- package/styles/index.scss +26 -4
- package/styles/tokens/_typography.scss +6 -0
- package/styles/tokens/_utility.scss +35 -0
- package/styles/tokens/index.scss +3 -0
- package/types/doku-com-tala.d.ts +16 -2
- package/styles/_radius.scss +0 -10
- package/styles/_shadow.scss +0 -7
- package/styles/_spacing.scss +0 -12
- /package/styles/{_color.scss → tokens/_color.scss} +0 -0
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, forwardRef, inject, ElementRef, HostListener } from '@angular/core';
|
|
2
|
+
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, forwardRef, inject, ElementRef, HostListener, Directive } from '@angular/core';
|
|
3
3
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
4
|
|
|
5
5
|
class TalaAvatar {
|
|
@@ -62,7 +62,7 @@ class TalaAvatar {
|
|
|
62
62
|
return (words[0][0] + words[words.length - 1][0]).toUpperCase();
|
|
63
63
|
}
|
|
64
64
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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(--
|
|
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(--tala-ref-type-family-inter);font-weight:500;color:var(--tala-avatar-initials-color);line-height:1;letter-spacing:0px}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:11px;line-height:14px}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:14px;line-height:20px}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:16px;line-height:20px}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(--tala-ref-radius-full)}tala-avatar.tala-avatar--square.tala-avatar--xs{border-radius:var(--tala-ref-radius-sm)}tala-avatar.tala-avatar--square.tala-avatar--sm{border-radius:var(--tala-ref-radius-md)}tala-avatar.tala-avatar--square.tala-avatar--md,tala-avatar.tala-avatar--square.tala-avatar--lg{border-radius:var(--tala-ref-radius-lg)}tala-avatar.tala-avatar--square.tala-avatar--xl{border-radius:var(--tala-ref-radius-xl)}.tala-avatar__status{position:absolute;border-radius:var(--tala-ref-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(--tala-ref-radius-full);font-family:var(--tala-ref-type-family-inter);font-weight:500;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 });
|
|
66
66
|
}
|
|
67
67
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaAvatar, decorators: [{
|
|
68
68
|
type: Component,
|
|
@@ -71,7 +71,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
71
71
|
'[style.background-color]': 'bgColor()',
|
|
72
72
|
'[attr.role]': '"img"',
|
|
73
73
|
'[attr.aria-label]': 'ariaLabel()',
|
|
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(--
|
|
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(--tala-ref-type-family-inter);font-weight:500;color:var(--tala-avatar-initials-color);line-height:1;letter-spacing:0px}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:11px;line-height:14px}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:14px;line-height:20px}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:16px;line-height:20px}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(--tala-ref-radius-full)}tala-avatar.tala-avatar--square.tala-avatar--xs{border-radius:var(--tala-ref-radius-sm)}tala-avatar.tala-avatar--square.tala-avatar--sm{border-radius:var(--tala-ref-radius-md)}tala-avatar.tala-avatar--square.tala-avatar--md,tala-avatar.tala-avatar--square.tala-avatar--lg{border-radius:var(--tala-ref-radius-lg)}tala-avatar.tala-avatar--square.tala-avatar--xl{border-radius:var(--tala-ref-radius-xl)}.tala-avatar__status{position:absolute;border-radius:var(--tala-ref-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(--tala-ref-radius-full);font-family:var(--tala-ref-type-family-inter);font-weight:500;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"] }]
|
|
75
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 }] }] } });
|
|
76
76
|
|
|
77
77
|
class TalaAvatarGroup {
|
|
@@ -103,13 +103,13 @@ class TalaButton {
|
|
|
103
103
|
.filter(Boolean)
|
|
104
104
|
.join(' '), ...(ngDevMode ? [{ debugName: "innerClasses" }] : /* istanbul ignore next */ []));
|
|
105
105
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
106
|
-
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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<button\n [class]=\"innerClasses()\"\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [attr.aria-busy]=\"loading() || null\"\n>\n @if (loading()) {\n <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n }\n <ng-content select=\"[slot=prefix]\"></ng-content>\n <ng-content></ng-content>\n <ng-content select=\"[slot=suffix]\"></ng-content>\n</button>\n", styles: ["tala-button{display:contents;--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:
|
|
106
|
+
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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<button\n [class]=\"innerClasses()\"\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [attr.aria-busy]=\"loading() || null\"\n>\n @if (loading()) {\n <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n }\n <ng-content select=\"[slot=prefix]\"></ng-content>\n <ng-content></ng-content>\n <ng-content select=\"[slot=suffix]\"></ng-content>\n</button>\n", styles: ["tala-button{display:contents;--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(--tala-ref-space-4);--tala-button-gap: var(--tala-ref-space-2);--tala-button-font-size: 13px;--tala-button-line-height: 18px;--tala-button-border-radius: var(--tala-ref-radius-md);--tala-button-spinner-size: 16px}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(--tala-ref-space-2);--tala-button-gap: var(--tala-ref-space-1);--tala-button-font-size: 11px;--tala-button-line-height: 14px;--tala-button-border-radius: var(--tala-ref-radius-sm);--tala-button-spinner-size: 12px}tala-button.tala-button--sm{--tala-button-height: 32px;--tala-button-padding-x: var(--tala-ref-space-3);--tala-button-gap: var(--tala-ref-space-1);--tala-button-font-size: 12px;--tala-button-line-height: 16px;--tala-button-spinner-size: 14px}tala-button.tala-button--lg{--tala-button-height: 48px;--tala-button-padding-x: var(--tala-ref-space-5);--tala-button-font-size: 14px;--tala-button-line-height: 20px;--tala-button-border-radius: var(--tala-ref-radius-lg);--tala-button-spinner-size: 18px}.tala-button{appearance:none;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(--tala-ref-type-family-inter);font-size:var(--tala-button-font-size);line-height:var(--tala-button-line-height);font-weight:500;letter-spacing:0px;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(:disabled,.tala-button--loading){background-color:var(--tala-button-hover-bg);color:var(--tala-button-hover-color)}.tala-button:disabled:not(.tala-button--loading){opacity:.4;cursor:not-allowed;pointer-events:none}.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(--tala-ref-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 });
|
|
107
107
|
}
|
|
108
108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaButton, decorators: [{
|
|
109
109
|
type: Component,
|
|
110
110
|
args: [{ selector: 'tala-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
111
111
|
'[class]': 'hostClasses()',
|
|
112
|
-
}, template: "<button\n [class]=\"innerClasses()\"\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [attr.aria-busy]=\"loading() || null\"\n>\n @if (loading()) {\n <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n }\n <ng-content select=\"[slot=prefix]\"></ng-content>\n <ng-content></ng-content>\n <ng-content select=\"[slot=suffix]\"></ng-content>\n</button>\n", styles: ["tala-button{display:contents;--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:
|
|
112
|
+
}, template: "<button\n [class]=\"innerClasses()\"\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [attr.aria-busy]=\"loading() || null\"\n>\n @if (loading()) {\n <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n }\n <ng-content select=\"[slot=prefix]\"></ng-content>\n <ng-content></ng-content>\n <ng-content select=\"[slot=suffix]\"></ng-content>\n</button>\n", styles: ["tala-button{display:contents;--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(--tala-ref-space-4);--tala-button-gap: var(--tala-ref-space-2);--tala-button-font-size: 13px;--tala-button-line-height: 18px;--tala-button-border-radius: var(--tala-ref-radius-md);--tala-button-spinner-size: 16px}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(--tala-ref-space-2);--tala-button-gap: var(--tala-ref-space-1);--tala-button-font-size: 11px;--tala-button-line-height: 14px;--tala-button-border-radius: var(--tala-ref-radius-sm);--tala-button-spinner-size: 12px}tala-button.tala-button--sm{--tala-button-height: 32px;--tala-button-padding-x: var(--tala-ref-space-3);--tala-button-gap: var(--tala-ref-space-1);--tala-button-font-size: 12px;--tala-button-line-height: 16px;--tala-button-spinner-size: 14px}tala-button.tala-button--lg{--tala-button-height: 48px;--tala-button-padding-x: var(--tala-ref-space-5);--tala-button-font-size: 14px;--tala-button-line-height: 20px;--tala-button-border-radius: var(--tala-ref-radius-lg);--tala-button-spinner-size: 18px}.tala-button{appearance:none;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(--tala-ref-type-family-inter);font-size:var(--tala-button-font-size);line-height:var(--tala-button-line-height);font-weight:500;letter-spacing:0px;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(:disabled,.tala-button--loading){background-color:var(--tala-button-hover-bg);color:var(--tala-button-hover-color)}.tala-button:disabled:not(.tala-button--loading){opacity:.4;cursor:not-allowed;pointer-events:none}.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(--tala-ref-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"] }]
|
|
113
113
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
|
|
114
114
|
|
|
115
115
|
class TalaInput {
|
|
@@ -169,7 +169,7 @@ class TalaInput {
|
|
|
169
169
|
useExisting: forwardRef(() => TalaInput),
|
|
170
170
|
multi: true,
|
|
171
171
|
},
|
|
172
|
-
], 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(--
|
|
172
|
+
], 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(--tala-ref-radius-md);--tala-input-gap: var(--tala-ref-space-2);display:flex;flex-direction:column;gap:var(--tala-ref-space-1);box-sizing:border-box}.tala-input__label-row{display:flex;align-items:center;gap:var(--tala-ref-space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-input__label{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;color:var(--tala-input-label-color);cursor:pointer}.tala-input__required{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;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(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;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(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;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(--tala-ref-type-family-inter);font-size:12px;line-height:16px;font-weight:400;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(--tala-ref-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 });
|
|
173
173
|
}
|
|
174
174
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaInput, decorators: [{
|
|
175
175
|
type: Component,
|
|
@@ -181,7 +181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
181
181
|
useExisting: forwardRef(() => TalaInput),
|
|
182
182
|
multi: true,
|
|
183
183
|
},
|
|
184
|
-
], 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(--
|
|
184
|
+
], 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(--tala-ref-radius-md);--tala-input-gap: var(--tala-ref-space-2);display:flex;flex-direction:column;gap:var(--tala-ref-space-1);box-sizing:border-box}.tala-input__label-row{display:flex;align-items:center;gap:var(--tala-ref-space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-input__label{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;color:var(--tala-input-label-color);cursor:pointer}.tala-input__required{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;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(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;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(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;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(--tala-ref-type-family-inter);font-size:12px;line-height:16px;font-weight:400;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(--tala-ref-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"] }]
|
|
185
185
|
}], 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 }] }] } });
|
|
186
186
|
|
|
187
187
|
class TalaSelect {
|
|
@@ -405,7 +405,7 @@ class TalaSelect {
|
|
|
405
405
|
useExisting: forwardRef(() => TalaSelect),
|
|
406
406
|
multi: true,
|
|
407
407
|
},
|
|
408
|
-
], 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 });
|
|
408
|
+
], 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(--tala-ref-space-2);--tala-select-icon-size: 16px;--tala-select-border-radius: var(--tala-ref-radius-md);position:relative;display:flex;flex-direction:column;gap:var(--tala-ref-space-1);box-sizing:border-box}.tala-select__label-row{display:flex;align-items:center;gap:var(--tala-ref-space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-select__label{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;color:var(--tala-select-label-color);cursor:pointer}.tala-select__required{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;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(--tala-ref-space-1);flex-wrap:wrap;overflow:hidden}.tala-select__value{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;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(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;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(--tala-ref-shadow-md);max-height:240px;overflow-y:auto;z-index:1000;box-sizing:border-box;padding:var(--tala-ref-space-1) 0}.tala-select__option{display:flex;align-items:center;gap:var(--tala-ref-space-2);padding:8px var(--tala-select-padding-x);font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;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:500}.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(--tala-ref-type-family-inter);font-size:14px;line-height:20px;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(--tala-ref-type-family-inter);font-size:12px;line-height:16px;font-weight:400;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(--tala-ref-type-family-inter);font-size:12px;line-height:16px;font-weight:400;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(--tala-ref-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 });
|
|
409
409
|
}
|
|
410
410
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaSelect, decorators: [{
|
|
411
411
|
type: Component,
|
|
@@ -418,12 +418,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
418
418
|
useExisting: forwardRef(() => TalaSelect),
|
|
419
419
|
multi: true,
|
|
420
420
|
},
|
|
421
|
-
], 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"] }]
|
|
421
|
+
], 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(--tala-ref-space-2);--tala-select-icon-size: 16px;--tala-select-border-radius: var(--tala-ref-radius-md);position:relative;display:flex;flex-direction:column;gap:var(--tala-ref-space-1);box-sizing:border-box}.tala-select__label-row{display:flex;align-items:center;gap:var(--tala-ref-space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-select__label{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;color:var(--tala-select-label-color);cursor:pointer}.tala-select__required{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;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(--tala-ref-space-1);flex-wrap:wrap;overflow:hidden}.tala-select__value{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;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(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;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(--tala-ref-shadow-md);max-height:240px;overflow-y:auto;z-index:1000;box-sizing:border-box;padding:var(--tala-ref-space-1) 0}.tala-select__option{display:flex;align-items:center;gap:var(--tala-ref-space-2);padding:8px var(--tala-select-padding-x);font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;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:500}.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(--tala-ref-type-family-inter);font-size:14px;line-height:20px;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(--tala-ref-type-family-inter);font-size:12px;line-height:16px;font-weight:400;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(--tala-ref-type-family-inter);font-size:12px;line-height:16px;font-weight:400;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(--tala-ref-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"] }]
|
|
422
422
|
}], 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: [{
|
|
423
423
|
type: HostListener,
|
|
424
424
|
args: ['document:click', ['$event.target']]
|
|
425
425
|
}] } });
|
|
426
426
|
|
|
427
|
+
class TalaText {
|
|
428
|
+
talaText = input.required(...(ngDevMode ? [{ debugName: "talaText" }] : /* istanbul ignore next */ []));
|
|
429
|
+
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
430
|
+
weight = input(...(ngDevMode ? [undefined, { debugName: "weight" }] : /* istanbul ignore next */ []));
|
|
431
|
+
classes = computed(() => [this.variantClass(), this.weightClass()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
432
|
+
variantClass = computed(() => {
|
|
433
|
+
const v = this.talaText();
|
|
434
|
+
if (/^h[1-6]$/.test(v))
|
|
435
|
+
return `tala-${v}`;
|
|
436
|
+
if (v === 'code')
|
|
437
|
+
return 'tala-code';
|
|
438
|
+
// body / label / caption: 'medium' maps to the 'default' SCSS class
|
|
439
|
+
const sizeKey = this.size() === 'medium' ? 'default' : this.size();
|
|
440
|
+
return `tala-${v}-${sizeKey}`;
|
|
441
|
+
}, ...(ngDevMode ? [{ debugName: "variantClass" }] : /* istanbul ignore next */ []));
|
|
442
|
+
weightClass = computed(() => {
|
|
443
|
+
const w = this.weight();
|
|
444
|
+
const v = this.talaText();
|
|
445
|
+
if (!w || /^h[1-6]$/.test(v) || v === 'code' || v === 'caption')
|
|
446
|
+
return '';
|
|
447
|
+
return `${this.variantClass()}--${w}`;
|
|
448
|
+
}, ...(ngDevMode ? [{ debugName: "weightClass" }] : /* istanbul ignore next */ []));
|
|
449
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaText, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
450
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: TalaText, isStandalone: true, selector: "[talaText]", inputs: { talaText: { classPropertyName: "talaText", publicName: "talaText", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
|
|
451
|
+
}
|
|
452
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaText, decorators: [{
|
|
453
|
+
type: Directive,
|
|
454
|
+
args: [{
|
|
455
|
+
selector: '[talaText]',
|
|
456
|
+
standalone: true,
|
|
457
|
+
host: { '[class]': 'classes()' },
|
|
458
|
+
}]
|
|
459
|
+
}], propDecorators: { talaText: [{ type: i0.Input, args: [{ isSignal: true, alias: "talaText", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }] } });
|
|
460
|
+
|
|
427
461
|
/*
|
|
428
462
|
* Public API Surface of doku-tala
|
|
429
463
|
*/
|
|
@@ -432,5 +466,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
432
466
|
* Generated bundle index. Do not edit.
|
|
433
467
|
*/
|
|
434
468
|
|
|
435
|
-
export { TalaAvatar, TalaAvatarGroup, TalaButton, TalaInput, TalaSelect };
|
|
469
|
+
export { TalaAvatar, TalaAvatarGroup, TalaButton, TalaInput, TalaSelect, TalaText };
|
|
436
470
|
//# sourceMappingURL=doku-com-tala.mjs.map
|