@edsis/ui 0.0.2
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 +40 -0
- package/accordion/README.md +195 -0
- package/alert/README.md +177 -0
- package/alert-dialog/README.md +239 -0
- package/aspect-ratio/README.md +112 -0
- package/avatar/README.md +176 -0
- package/badge/README.md +133 -0
- package/breadcrumb/README.md +216 -0
- package/button/README.md +139 -0
- package/button-group/README.md +204 -0
- package/calendar/README.md +132 -0
- package/card/README.md +220 -0
- package/carousel/README.md +276 -0
- package/chart/README.md +249 -0
- package/checkbox/README.md +149 -0
- package/collapsible/README.md +191 -0
- package/combobox/README.md +198 -0
- package/command/README.md +275 -0
- package/composer/README.md +235 -0
- package/context-menu/README.md +267 -0
- package/date-picker/README.md +177 -0
- package/dialog/README.md +237 -0
- package/drawer/README.md +145 -0
- package/dropdown-menu/README.md +311 -0
- package/editor/README.md +136 -0
- package/empty/README.md +183 -0
- package/fesm2022/edsis-ui-accordion.mjs +174 -0
- package/fesm2022/edsis-ui-accordion.mjs.map +1 -0
- package/fesm2022/edsis-ui-alert-dialog.mjs +242 -0
- package/fesm2022/edsis-ui-alert-dialog.mjs.map +1 -0
- package/fesm2022/edsis-ui-alert.mjs +90 -0
- package/fesm2022/edsis-ui-alert.mjs.map +1 -0
- package/fesm2022/edsis-ui-aspect-ratio.mjs +33 -0
- package/fesm2022/edsis-ui-aspect-ratio.mjs.map +1 -0
- package/fesm2022/edsis-ui-avatar.mjs +123 -0
- package/fesm2022/edsis-ui-avatar.mjs.map +1 -0
- package/fesm2022/edsis-ui-badge.mjs +47 -0
- package/fesm2022/edsis-ui-badge.mjs.map +1 -0
- package/fesm2022/edsis-ui-breadcrumb.mjs +186 -0
- package/fesm2022/edsis-ui-breadcrumb.mjs.map +1 -0
- package/fesm2022/edsis-ui-button-group.mjs +95 -0
- package/fesm2022/edsis-ui-button-group.mjs.map +1 -0
- package/fesm2022/edsis-ui-button.mjs +64 -0
- package/fesm2022/edsis-ui-button.mjs.map +1 -0
- package/fesm2022/edsis-ui-calendar.mjs +78 -0
- package/fesm2022/edsis-ui-calendar.mjs.map +1 -0
- package/fesm2022/edsis-ui-card.mjs +137 -0
- package/fesm2022/edsis-ui-card.mjs.map +1 -0
- package/fesm2022/edsis-ui-carousel.mjs +310 -0
- package/fesm2022/edsis-ui-carousel.mjs.map +1 -0
- package/fesm2022/edsis-ui-chart-area.mjs +6 -0
- package/fesm2022/edsis-ui-chart-area.mjs.map +1 -0
- package/fesm2022/edsis-ui-chart-bar.mjs +6 -0
- package/fesm2022/edsis-ui-chart-bar.mjs.map +1 -0
- package/fesm2022/edsis-ui-chart-line.mjs +6 -0
- package/fesm2022/edsis-ui-chart-line.mjs.map +1 -0
- package/fesm2022/edsis-ui-chart-pie.mjs +6 -0
- package/fesm2022/edsis-ui-chart-pie.mjs.map +1 -0
- package/fesm2022/edsis-ui-chart-radar.mjs +6 -0
- package/fesm2022/edsis-ui-chart-radar.mjs.map +1 -0
- package/fesm2022/edsis-ui-chart-radial.mjs +6 -0
- package/fesm2022/edsis-ui-chart-radial.mjs.map +1 -0
- package/fesm2022/edsis-ui-chart-scatter.mjs +6 -0
- package/fesm2022/edsis-ui-chart-scatter.mjs.map +1 -0
- package/fesm2022/edsis-ui-chart.mjs +3714 -0
- package/fesm2022/edsis-ui-chart.mjs.map +1 -0
- package/fesm2022/edsis-ui-checkbox.mjs +104 -0
- package/fesm2022/edsis-ui-checkbox.mjs.map +1 -0
- package/fesm2022/edsis-ui-collapsible.mjs +116 -0
- package/fesm2022/edsis-ui-collapsible.mjs.map +1 -0
- package/fesm2022/edsis-ui-combobox.mjs +263 -0
- package/fesm2022/edsis-ui-combobox.mjs.map +1 -0
- package/fesm2022/edsis-ui-command.mjs +268 -0
- package/fesm2022/edsis-ui-command.mjs.map +1 -0
- package/fesm2022/edsis-ui-composer.mjs +329 -0
- package/fesm2022/edsis-ui-composer.mjs.map +1 -0
- package/fesm2022/edsis-ui-context-menu.mjs +100 -0
- package/fesm2022/edsis-ui-context-menu.mjs.map +1 -0
- package/fesm2022/edsis-ui-date-picker.mjs +155 -0
- package/fesm2022/edsis-ui-date-picker.mjs.map +1 -0
- package/fesm2022/edsis-ui-dialog.mjs +262 -0
- package/fesm2022/edsis-ui-dialog.mjs.map +1 -0
- package/fesm2022/edsis-ui-drawer.mjs +6 -0
- package/fesm2022/edsis-ui-drawer.mjs.map +1 -0
- package/fesm2022/edsis-ui-dropdown-menu.mjs +466 -0
- package/fesm2022/edsis-ui-dropdown-menu.mjs.map +1 -0
- package/fesm2022/edsis-ui-editor.mjs +692 -0
- package/fesm2022/edsis-ui-editor.mjs.map +1 -0
- package/fesm2022/edsis-ui-empty.mjs +132 -0
- package/fesm2022/edsis-ui-empty.mjs.map +1 -0
- package/fesm2022/edsis-ui-form.mjs +334 -0
- package/fesm2022/edsis-ui-form.mjs.map +1 -0
- package/fesm2022/edsis-ui-hover-card.mjs +284 -0
- package/fesm2022/edsis-ui-hover-card.mjs.map +1 -0
- package/fesm2022/edsis-ui-input-group.mjs +164 -0
- package/fesm2022/edsis-ui-input-group.mjs.map +1 -0
- package/fesm2022/edsis-ui-input-otp.mjs +485 -0
- package/fesm2022/edsis-ui-input-otp.mjs.map +1 -0
- package/fesm2022/edsis-ui-input.mjs +43 -0
- package/fesm2022/edsis-ui-input.mjs.map +1 -0
- package/fesm2022/edsis-ui-item.mjs +241 -0
- package/fesm2022/edsis-ui-item.mjs.map +1 -0
- package/fesm2022/edsis-ui-kanban.mjs +289 -0
- package/fesm2022/edsis-ui-kanban.mjs.map +1 -0
- package/fesm2022/edsis-ui-kbd.mjs +51 -0
- package/fesm2022/edsis-ui-kbd.mjs.map +1 -0
- package/fesm2022/edsis-ui-label.mjs +30 -0
- package/fesm2022/edsis-ui-label.mjs.map +1 -0
- package/fesm2022/edsis-ui-menubar.mjs +302 -0
- package/fesm2022/edsis-ui-menubar.mjs.map +1 -0
- package/fesm2022/edsis-ui-native-select.mjs +61 -0
- package/fesm2022/edsis-ui-native-select.mjs.map +1 -0
- package/fesm2022/edsis-ui-navigation-menu.mjs +399 -0
- package/fesm2022/edsis-ui-navigation-menu.mjs.map +1 -0
- package/fesm2022/edsis-ui-pagination.mjs +216 -0
- package/fesm2022/edsis-ui-pagination.mjs.map +1 -0
- package/fesm2022/edsis-ui-pillbox.mjs +777 -0
- package/fesm2022/edsis-ui-pillbox.mjs.map +1 -0
- package/fesm2022/edsis-ui-popover.mjs +163 -0
- package/fesm2022/edsis-ui-popover.mjs.map +1 -0
- package/fesm2022/edsis-ui-progress.mjs +53 -0
- package/fesm2022/edsis-ui-progress.mjs.map +1 -0
- package/fesm2022/edsis-ui-radio.mjs +111 -0
- package/fesm2022/edsis-ui-radio.mjs.map +1 -0
- package/fesm2022/edsis-ui-resizable.mjs +454 -0
- package/fesm2022/edsis-ui-resizable.mjs.map +1 -0
- package/fesm2022/edsis-ui-scroll-area.mjs +48 -0
- package/fesm2022/edsis-ui-scroll-area.mjs.map +1 -0
- package/fesm2022/edsis-ui-select.mjs +164 -0
- package/fesm2022/edsis-ui-select.mjs.map +1 -0
- package/fesm2022/edsis-ui-separator.mjs +33 -0
- package/fesm2022/edsis-ui-separator.mjs.map +1 -0
- package/fesm2022/edsis-ui-sheet.mjs +264 -0
- package/fesm2022/edsis-ui-sheet.mjs.map +1 -0
- package/fesm2022/edsis-ui-skeleton.mjs +29 -0
- package/fesm2022/edsis-ui-skeleton.mjs.map +1 -0
- package/fesm2022/edsis-ui-slider.mjs +405 -0
- package/fesm2022/edsis-ui-slider.mjs.map +1 -0
- package/fesm2022/edsis-ui-spinner.mjs +58 -0
- package/fesm2022/edsis-ui-spinner.mjs.map +1 -0
- package/fesm2022/edsis-ui-switch.mjs +107 -0
- package/fesm2022/edsis-ui-switch.mjs.map +1 -0
- package/fesm2022/edsis-ui-table.mjs +139 -0
- package/fesm2022/edsis-ui-table.mjs.map +1 -0
- package/fesm2022/edsis-ui-tabs.mjs +252 -0
- package/fesm2022/edsis-ui-tabs.mjs.map +1 -0
- package/fesm2022/edsis-ui-textarea.mjs +37 -0
- package/fesm2022/edsis-ui-textarea.mjs.map +1 -0
- package/fesm2022/edsis-ui-timeline.mjs +213 -0
- package/fesm2022/edsis-ui-timeline.mjs.map +1 -0
- package/fesm2022/edsis-ui-toast.mjs +71 -0
- package/fesm2022/edsis-ui-toast.mjs.map +1 -0
- package/fesm2022/edsis-ui-toggle-group.mjs +269 -0
- package/fesm2022/edsis-ui-toggle-group.mjs.map +1 -0
- package/fesm2022/edsis-ui-toggle.mjs +76 -0
- package/fesm2022/edsis-ui-toggle.mjs.map +1 -0
- package/fesm2022/edsis-ui-tooltip.mjs +339 -0
- package/fesm2022/edsis-ui-tooltip.mjs.map +1 -0
- package/fesm2022/edsis-ui-utils.mjs +13 -0
- package/fesm2022/edsis-ui-utils.mjs.map +1 -0
- package/fesm2022/edsis-ui.mjs +11 -0
- package/fesm2022/edsis-ui.mjs.map +1 -0
- package/form/README.md +210 -0
- package/hover-card/README.md +146 -0
- package/input/README.md +159 -0
- package/input-group/README.md +234 -0
- package/input-otp/README.md +273 -0
- package/item/README.md +247 -0
- package/kanban/README.md +81 -0
- package/kbd/README.md +139 -0
- package/label/README.md +136 -0
- package/menubar/README.md +269 -0
- package/native-select/README.md +176 -0
- package/navigation-menu/README.md +160 -0
- package/package.json +310 -0
- package/pagination/README.md +144 -0
- package/pillbox/README.md +67 -0
- package/popover/README.md +43 -0
- package/progress/README.md +160 -0
- package/radio/README.md +209 -0
- package/resizable/README.md +164 -0
- package/scroll-area/README.md +143 -0
- package/select/README.md +174 -0
- package/separator/README.md +170 -0
- package/sheet/README.md +183 -0
- package/skeleton/README.md +158 -0
- package/slider/README.md +207 -0
- package/spinner/README.md +160 -0
- package/switch/README.md +166 -0
- package/table/README.md +291 -0
- package/tabs/README.md +214 -0
- package/textarea/README.md +154 -0
- package/timeline/README.md +94 -0
- package/toast/README.md +321 -0
- package/toggle/README.md +131 -0
- package/toggle-group/README.md +206 -0
- package/tooltip/README.md +211 -0
- package/types/edsis-ui-accordion.d.ts +51 -0
- package/types/edsis-ui-alert-dialog.d.ts +93 -0
- package/types/edsis-ui-alert.d.ts +37 -0
- package/types/edsis-ui-aspect-ratio.d.ts +12 -0
- package/types/edsis-ui-avatar.d.ts +51 -0
- package/types/edsis-ui-badge.d.ts +19 -0
- package/types/edsis-ui-breadcrumb.d.ts +46 -0
- package/types/edsis-ui-button-group.d.ts +26 -0
- package/types/edsis-ui-button.d.ts +22 -0
- package/types/edsis-ui-calendar.d.ts +33 -0
- package/types/edsis-ui-card.d.ts +60 -0
- package/types/edsis-ui-carousel.d.ts +86 -0
- package/types/edsis-ui-chart-area.d.ts +1 -0
- package/types/edsis-ui-chart-bar.d.ts +1 -0
- package/types/edsis-ui-chart-line.d.ts +1 -0
- package/types/edsis-ui-chart-pie.d.ts +1 -0
- package/types/edsis-ui-chart-radar.d.ts +1 -0
- package/types/edsis-ui-chart-radial.d.ts +1 -0
- package/types/edsis-ui-chart-scatter.d.ts +1 -0
- package/types/edsis-ui-chart.d.ts +1094 -0
- package/types/edsis-ui-checkbox.d.ts +35 -0
- package/types/edsis-ui-collapsible.d.ts +42 -0
- package/types/edsis-ui-combobox.d.ts +51 -0
- package/types/edsis-ui-command.d.ts +99 -0
- package/types/edsis-ui-composer.d.ts +90 -0
- package/types/edsis-ui-context-menu.d.ts +35 -0
- package/types/edsis-ui-date-picker.d.ts +41 -0
- package/types/edsis-ui-dialog.d.ts +87 -0
- package/types/edsis-ui-drawer.d.ts +1 -0
- package/types/edsis-ui-dropdown-menu.d.ts +136 -0
- package/types/edsis-ui-editor.d.ts +123 -0
- package/types/edsis-ui-empty.d.ts +50 -0
- package/types/edsis-ui-form.d.ts +141 -0
- package/types/edsis-ui-hover-card.d.ts +74 -0
- package/types/edsis-ui-input-group.d.ts +51 -0
- package/types/edsis-ui-input-otp.d.ts +136 -0
- package/types/edsis-ui-input.d.ts +16 -0
- package/types/edsis-ui-item.d.ts +88 -0
- package/types/edsis-ui-kanban.d.ts +70 -0
- package/types/edsis-ui-kbd.d.ts +16 -0
- package/types/edsis-ui-label.d.ts +11 -0
- package/types/edsis-ui-menubar.d.ts +67 -0
- package/types/edsis-ui-native-select.d.ts +26 -0
- package/types/edsis-ui-navigation-menu.d.ts +96 -0
- package/types/edsis-ui-pagination.d.ts +34 -0
- package/types/edsis-ui-pillbox.d.ts +157 -0
- package/types/edsis-ui-popover.d.ts +43 -0
- package/types/edsis-ui-progress.d.ts +17 -0
- package/types/edsis-ui-radio.d.ts +40 -0
- package/types/edsis-ui-resizable.d.ts +99 -0
- package/types/edsis-ui-scroll-area.d.ts +19 -0
- package/types/edsis-ui-select.d.ts +57 -0
- package/types/edsis-ui-separator.d.ts +14 -0
- package/types/edsis-ui-sheet.d.ts +76 -0
- package/types/edsis-ui-skeleton.d.ts +10 -0
- package/types/edsis-ui-slider.d.ts +74 -0
- package/types/edsis-ui-spinner.d.ts +13 -0
- package/types/edsis-ui-switch.d.ts +40 -0
- package/types/edsis-ui-table.d.ts +52 -0
- package/types/edsis-ui-tabs.d.ts +92 -0
- package/types/edsis-ui-textarea.d.ts +12 -0
- package/types/edsis-ui-timeline.d.ts +63 -0
- package/types/edsis-ui-toast.d.ts +38 -0
- package/types/edsis-ui-toggle-group.d.ts +89 -0
- package/types/edsis-ui-toggle.d.ts +25 -0
- package/types/edsis-ui-tooltip.d.ts +89 -0
- package/types/edsis-ui-utils.d.ts +5 -0
- package/types/edsis-ui.d.ts +2 -0
|
@@ -0,0 +1,329 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { numberAttribute, input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, inject, ElementRef, signal, forwardRef } from '@angular/core';
|
|
3
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
|
+
import { cn } from '@edsis/ui/utils';
|
|
5
|
+
|
|
6
|
+
const COMPOSER_BASE = 'block w-full min-w-0 text-sm text-foreground';
|
|
7
|
+
const COMPOSER_SHELL_BASE = [
|
|
8
|
+
'relative min-w-0 border border-input bg-background shadow-sm',
|
|
9
|
+
'transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
|
|
10
|
+
'aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive',
|
|
11
|
+
'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
|
|
12
|
+
'[&>[data-slot=composer-input]]:min-w-0 [&>[data-slot=composer-input]]:flex-1',
|
|
13
|
+
].join(' ');
|
|
14
|
+
const composerShellVariantClasses = {
|
|
15
|
+
default: 'rounded-xl',
|
|
16
|
+
input: 'rounded-md',
|
|
17
|
+
};
|
|
18
|
+
const COMPOSER_BODY_BASE = '[&>[data-slot=composer-input]]:min-w-0 [&>[data-slot=composer-input]]:flex-1';
|
|
19
|
+
const nullableNumberAttribute = (value) => {
|
|
20
|
+
if (value === null || value === undefined || value === '') {
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
return numberAttribute(value);
|
|
24
|
+
};
|
|
25
|
+
class ComposerComponent {
|
|
26
|
+
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
27
|
+
inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
28
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
29
|
+
invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
30
|
+
submit = input('cmd-enter', ...(ngDevMode ? [{ debugName: "submit" }] : /* istanbul ignore next */ []));
|
|
31
|
+
submitForm = input(true, { ...(ngDevMode ? { debugName: "submitForm" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
32
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
33
|
+
submitRequested = output();
|
|
34
|
+
classes = computed(() => cn(COMPOSER_BASE, this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
35
|
+
shellClasses = computed(() => cn(COMPOSER_SHELL_BASE, composerShellVariantClasses[this.variant()]), ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
|
|
36
|
+
bodyClasses = computed(() => cn(COMPOSER_BODY_BASE, this.inline()
|
|
37
|
+
? [
|
|
38
|
+
'flex items-end gap-1 px-1 py-1',
|
|
39
|
+
'[&>[data-slot=composer-actions-leading]]:order-10',
|
|
40
|
+
'[&>[data-slot=composer-input]]:order-20',
|
|
41
|
+
'[&>[data-slot=composer-actions-trailing]]:order-30',
|
|
42
|
+
].join(' ')
|
|
43
|
+
: [
|
|
44
|
+
'flex flex-wrap items-end gap-1.5 px-2 py-1.5',
|
|
45
|
+
'[&>[data-slot=composer-input]]:order-10 [&>[data-slot=composer-input]]:basis-full',
|
|
46
|
+
'[&>[data-slot=composer-actions-leading]]:order-20',
|
|
47
|
+
'[&>[data-slot=composer-actions-trailing]]:order-30 [&>[data-slot=composer-actions-trailing]]:ml-auto',
|
|
48
|
+
].join(' ')), ...(ngDevMode ? [{ debugName: "bodyClasses" }] : /* istanbul ignore next */ []));
|
|
49
|
+
handleInputKeydown(event) {
|
|
50
|
+
if (this.disabled() || event.key !== 'Enter' || event.defaultPrevented) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
const shouldSubmit = this.submit() === 'enter' ? !event.shiftKey && !event.isComposing : event.metaKey || event.ctrlKey;
|
|
54
|
+
if (!shouldSubmit) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
event.preventDefault();
|
|
58
|
+
this.submitRequested.emit(event);
|
|
59
|
+
if (this.submitForm()) {
|
|
60
|
+
this.requestNearestFormSubmit(event.target);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
requestNearestFormSubmit(target) {
|
|
64
|
+
if (!(target instanceof Element)) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
const form = target.closest('form');
|
|
68
|
+
if (form && typeof form.requestSubmit === 'function') {
|
|
69
|
+
form.requestSubmit();
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComposerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
73
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: ComposerComponent, isStandalone: true, selector: "ui-composer", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, submit: { classPropertyName: "submit", publicName: "submit", isSignal: true, isRequired: false, transformFunction: null }, submitForm: { classPropertyName: "submitForm", publicName: "submitForm", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitRequested: "submitRequested" }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer\"", "attr.data-variant": "variant()", "attr.data-inline": "inline() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null", "attr.inert": "disabled() ? \"\" : null" } }, ngImport: i0, template: `
|
|
74
|
+
<div
|
|
75
|
+
data-slot="composer-shell"
|
|
76
|
+
[class]="shellClasses()"
|
|
77
|
+
[attr.data-disabled]="disabled() ? 'true' : null"
|
|
78
|
+
[attr.aria-invalid]="invalid() ? 'true' : null">
|
|
79
|
+
<ng-content select="ui-composer-header" />
|
|
80
|
+
<div data-slot="composer-body" [class]="bodyClasses()">
|
|
81
|
+
<ng-content select="ui-composer-actions-leading" />
|
|
82
|
+
<ng-content select="textarea[ui-composer-input], ui-composer-input" />
|
|
83
|
+
<ng-content select="ui-composer-actions-trailing" />
|
|
84
|
+
</div>
|
|
85
|
+
<ng-content select="ui-composer-footer" />
|
|
86
|
+
</div>
|
|
87
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
88
|
+
}
|
|
89
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComposerComponent, decorators: [{
|
|
90
|
+
type: Component,
|
|
91
|
+
args: [{
|
|
92
|
+
selector: 'ui-composer',
|
|
93
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
94
|
+
host: {
|
|
95
|
+
'[class]': 'classes()',
|
|
96
|
+
'[attr.data-slot]': '"composer"',
|
|
97
|
+
'[attr.data-variant]': 'variant()',
|
|
98
|
+
'[attr.data-inline]': 'inline() ? "true" : null',
|
|
99
|
+
'[attr.data-disabled]': 'disabled() ? "true" : null',
|
|
100
|
+
'[attr.aria-disabled]': 'disabled() ? "true" : null',
|
|
101
|
+
'[attr.aria-invalid]': 'invalid() ? "true" : null',
|
|
102
|
+
'[attr.inert]': 'disabled() ? "" : null',
|
|
103
|
+
},
|
|
104
|
+
template: `
|
|
105
|
+
<div
|
|
106
|
+
data-slot="composer-shell"
|
|
107
|
+
[class]="shellClasses()"
|
|
108
|
+
[attr.data-disabled]="disabled() ? 'true' : null"
|
|
109
|
+
[attr.aria-invalid]="invalid() ? 'true' : null">
|
|
110
|
+
<ng-content select="ui-composer-header" />
|
|
111
|
+
<div data-slot="composer-body" [class]="bodyClasses()">
|
|
112
|
+
<ng-content select="ui-composer-actions-leading" />
|
|
113
|
+
<ng-content select="textarea[ui-composer-input], ui-composer-input" />
|
|
114
|
+
<ng-content select="ui-composer-actions-trailing" />
|
|
115
|
+
</div>
|
|
116
|
+
<ng-content select="ui-composer-footer" />
|
|
117
|
+
</div>
|
|
118
|
+
`,
|
|
119
|
+
}]
|
|
120
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], submit: [{ type: i0.Input, args: [{ isSignal: true, alias: "submit", required: false }] }], submitForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitForm", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], submitRequested: [{ type: i0.Output, args: ["submitRequested"] }] } });
|
|
121
|
+
class ComposerHeaderComponent {
|
|
122
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
123
|
+
classes = computed(() => cn('flex min-w-0 flex-wrap gap-2 border-b border-border/70 px-2.5 py-2', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
124
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComposerHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
125
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: ComposerHeaderComponent, isStandalone: true, selector: "ui-composer-header", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-header\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
126
|
+
}
|
|
127
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComposerHeaderComponent, decorators: [{
|
|
128
|
+
type: Component,
|
|
129
|
+
args: [{
|
|
130
|
+
selector: 'ui-composer-header',
|
|
131
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
132
|
+
host: {
|
|
133
|
+
'[class]': 'classes()',
|
|
134
|
+
'[attr.data-slot]': '"composer-header"',
|
|
135
|
+
},
|
|
136
|
+
template: `<ng-content />`,
|
|
137
|
+
}]
|
|
138
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
139
|
+
class ComposerFooterComponent {
|
|
140
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
141
|
+
classes = computed(() => cn('border-t border-border/70 px-2.5 py-1.5 text-xs leading-5 text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
142
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComposerFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
143
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: ComposerFooterComponent, isStandalone: true, selector: "ui-composer-footer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-footer\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
144
|
+
}
|
|
145
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComposerFooterComponent, decorators: [{
|
|
146
|
+
type: Component,
|
|
147
|
+
args: [{
|
|
148
|
+
selector: 'ui-composer-footer',
|
|
149
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
150
|
+
host: {
|
|
151
|
+
'[class]': 'classes()',
|
|
152
|
+
'[attr.data-slot]': '"composer-footer"',
|
|
153
|
+
},
|
|
154
|
+
template: `<ng-content />`,
|
|
155
|
+
}]
|
|
156
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
157
|
+
class ComposerActionsLeadingComponent {
|
|
158
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
159
|
+
classes = computed(() => cn('flex min-h-8 shrink-0 items-center gap-1', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
160
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComposerActionsLeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
161
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: ComposerActionsLeadingComponent, isStandalone: true, selector: "ui-composer-actions-leading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-actions-leading\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
162
|
+
}
|
|
163
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComposerActionsLeadingComponent, decorators: [{
|
|
164
|
+
type: Component,
|
|
165
|
+
args: [{
|
|
166
|
+
selector: 'ui-composer-actions-leading',
|
|
167
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
168
|
+
host: {
|
|
169
|
+
'[class]': 'classes()',
|
|
170
|
+
'[attr.data-slot]': '"composer-actions-leading"',
|
|
171
|
+
},
|
|
172
|
+
template: `<ng-content />`,
|
|
173
|
+
}]
|
|
174
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
175
|
+
class ComposerActionsTrailingComponent {
|
|
176
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
177
|
+
classes = computed(() => cn('flex min-h-8 shrink-0 items-center justify-end gap-1', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
178
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComposerActionsTrailingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
179
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: ComposerActionsTrailingComponent, isStandalone: true, selector: "ui-composer-actions-trailing", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-actions-trailing\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
180
|
+
}
|
|
181
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComposerActionsTrailingComponent, decorators: [{
|
|
182
|
+
type: Component,
|
|
183
|
+
args: [{
|
|
184
|
+
selector: 'ui-composer-actions-trailing',
|
|
185
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
186
|
+
host: {
|
|
187
|
+
'[class]': 'classes()',
|
|
188
|
+
'[attr.data-slot]': '"composer-actions-trailing"',
|
|
189
|
+
},
|
|
190
|
+
template: `<ng-content />`,
|
|
191
|
+
}]
|
|
192
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
193
|
+
class ComposerInputComponent {
|
|
194
|
+
composer = inject(ComposerComponent, { optional: true });
|
|
195
|
+
disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
|
|
196
|
+
invalidInput = input(false, { ...(ngDevMode ? { debugName: "invalidInput" } : /* istanbul ignore next */ {}), alias: 'aria-invalid', transform: booleanAttribute });
|
|
197
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
198
|
+
disabled = computed(() => this.disabledInput() || this.composer?.disabled() === true, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
199
|
+
invalid = computed(() => this.invalidInput() || this.composer?.invalid() === true, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
200
|
+
classes = computed(() => cn('min-h-10 w-full rounded-sm bg-transparent px-2 py-2 text-sm leading-6 outline-none', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
201
|
+
handleKeydown(event) {
|
|
202
|
+
this.composer?.handleInputKeydown(event);
|
|
203
|
+
}
|
|
204
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComposerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
205
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: ComposerInputComponent, isStandalone: true, selector: "ui-composer-input", inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"composer-input\"", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
206
|
+
}
|
|
207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComposerInputComponent, decorators: [{
|
|
208
|
+
type: Component,
|
|
209
|
+
args: [{
|
|
210
|
+
selector: 'ui-composer-input',
|
|
211
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
212
|
+
host: {
|
|
213
|
+
'[class]': 'classes()',
|
|
214
|
+
'[attr.data-slot]': '"composer-input"',
|
|
215
|
+
'[attr.data-disabled]': 'disabled() ? "true" : null',
|
|
216
|
+
'[attr.aria-disabled]': 'disabled() ? "true" : null',
|
|
217
|
+
'[attr.aria-invalid]': 'invalid() ? "true" : null',
|
|
218
|
+
'(keydown)': 'handleKeydown($event)',
|
|
219
|
+
},
|
|
220
|
+
template: `<ng-content />`,
|
|
221
|
+
}]
|
|
222
|
+
}], propDecorators: { disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
223
|
+
class ComposerTextareaComponent {
|
|
224
|
+
el = inject(ElementRef);
|
|
225
|
+
composer = inject(ComposerComponent, { optional: true });
|
|
226
|
+
rows = input(2, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
227
|
+
maxRows = input(null, { ...(ngDevMode ? { debugName: "maxRows" } : /* istanbul ignore next */ {}), transform: nullableNumberAttribute });
|
|
228
|
+
disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
|
|
229
|
+
invalidInput = input(false, { ...(ngDevMode ? { debugName: "invalidInput" } : /* istanbul ignore next */ {}), alias: 'aria-invalid', transform: booleanAttribute });
|
|
230
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
231
|
+
disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
232
|
+
disabled = computed(() => this.disabledInput() || this.disabledState() || this.composer?.disabled() === true, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
233
|
+
invalid = computed(() => this.invalidInput() || this.composer?.invalid() === true, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
234
|
+
classes = computed(() => cn([
|
|
235
|
+
'max-h-none min-h-10 w-full resize-none bg-transparent px-2 py-2 text-sm leading-6 text-foreground shadow-none outline-none',
|
|
236
|
+
'placeholder:text-muted-foreground',
|
|
237
|
+
'disabled:cursor-not-allowed disabled:opacity-50',
|
|
238
|
+
].join(' '), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
239
|
+
onChange = () => { };
|
|
240
|
+
onTouched = () => { };
|
|
241
|
+
ngAfterViewInit() {
|
|
242
|
+
queueMicrotask(() => this.resizeToContent());
|
|
243
|
+
}
|
|
244
|
+
writeValue(value) {
|
|
245
|
+
this.el.nativeElement.value = value ?? '';
|
|
246
|
+
queueMicrotask(() => this.resizeToContent());
|
|
247
|
+
}
|
|
248
|
+
registerOnChange(fn) {
|
|
249
|
+
this.onChange = fn;
|
|
250
|
+
}
|
|
251
|
+
registerOnTouched(fn) {
|
|
252
|
+
this.onTouched = fn;
|
|
253
|
+
}
|
|
254
|
+
setDisabledState(isDisabled) {
|
|
255
|
+
this.disabledState.set(isDisabled);
|
|
256
|
+
}
|
|
257
|
+
resizeToContent() {
|
|
258
|
+
const textarea = this.el.nativeElement;
|
|
259
|
+
textarea.style.height = 'auto';
|
|
260
|
+
const maxRows = this.maxRows();
|
|
261
|
+
if (!maxRows) {
|
|
262
|
+
textarea.style.height = `${textarea.scrollHeight}px`;
|
|
263
|
+
textarea.style.overflowY = 'hidden';
|
|
264
|
+
return;
|
|
265
|
+
}
|
|
266
|
+
const lineHeight = this.getLineHeight(textarea);
|
|
267
|
+
const maxHeight = lineHeight * Math.max(maxRows, this.rows());
|
|
268
|
+
const nextHeight = Math.min(textarea.scrollHeight, maxHeight);
|
|
269
|
+
textarea.style.height = `${nextHeight}px`;
|
|
270
|
+
textarea.style.overflowY = textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';
|
|
271
|
+
}
|
|
272
|
+
focus() {
|
|
273
|
+
this.el.nativeElement.focus();
|
|
274
|
+
}
|
|
275
|
+
handleInput() {
|
|
276
|
+
this.resizeToContent();
|
|
277
|
+
this.onChange(this.el.nativeElement.value);
|
|
278
|
+
}
|
|
279
|
+
handleBlur() {
|
|
280
|
+
this.onTouched();
|
|
281
|
+
}
|
|
282
|
+
handleKeydown(event) {
|
|
283
|
+
this.composer?.handleInputKeydown(event);
|
|
284
|
+
}
|
|
285
|
+
getLineHeight(textarea) {
|
|
286
|
+
const lineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight);
|
|
287
|
+
return Number.isFinite(lineHeight) ? lineHeight : 24;
|
|
288
|
+
}
|
|
289
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComposerTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
290
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: ComposerTextareaComponent, isStandalone: true, selector: "textarea[ui-composer-input]", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "handleInput()", "blur": "handleBlur()", "keydown": "handleKeydown($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"composer-input\"", "attr.rows": "rows()", "attr.disabled": "disabled() ? \"\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null" } }, providers: [
|
|
291
|
+
{
|
|
292
|
+
provide: NG_VALUE_ACCESSOR,
|
|
293
|
+
useExisting: forwardRef(() => ComposerTextareaComponent),
|
|
294
|
+
multi: true,
|
|
295
|
+
},
|
|
296
|
+
], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
297
|
+
}
|
|
298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComposerTextareaComponent, decorators: [{
|
|
299
|
+
type: Component,
|
|
300
|
+
args: [{
|
|
301
|
+
selector: 'textarea[ui-composer-input]',
|
|
302
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
303
|
+
providers: [
|
|
304
|
+
{
|
|
305
|
+
provide: NG_VALUE_ACCESSOR,
|
|
306
|
+
useExisting: forwardRef(() => ComposerTextareaComponent),
|
|
307
|
+
multi: true,
|
|
308
|
+
},
|
|
309
|
+
],
|
|
310
|
+
host: {
|
|
311
|
+
'[class]': 'classes()',
|
|
312
|
+
'[attr.data-slot]': '"composer-input"',
|
|
313
|
+
'[attr.rows]': 'rows()',
|
|
314
|
+
'[attr.disabled]': 'disabled() ? "" : null',
|
|
315
|
+
'[attr.aria-invalid]': 'invalid() ? "true" : null',
|
|
316
|
+
'(input)': 'handleInput()',
|
|
317
|
+
'(blur)': 'handleBlur()',
|
|
318
|
+
'(keydown)': 'handleKeydown($event)',
|
|
319
|
+
},
|
|
320
|
+
template: '',
|
|
321
|
+
}]
|
|
322
|
+
}], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
323
|
+
|
|
324
|
+
/**
|
|
325
|
+
* Generated bundle index. Do not edit.
|
|
326
|
+
*/
|
|
327
|
+
|
|
328
|
+
export { ComposerActionsLeadingComponent, ComposerActionsTrailingComponent, ComposerComponent, ComposerFooterComponent, ComposerHeaderComponent, ComposerInputComponent, ComposerTextareaComponent };
|
|
329
|
+
//# sourceMappingURL=edsis-ui-composer.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"edsis-ui-composer.mjs","sources":["../../../library/ui/composer/composer.component.ts","../../../library/ui/composer/edsis-ui-composer.ts"],"sourcesContent":["import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n forwardRef,\n ElementRef,\n booleanAttribute,\n computed,\n inject,\n input,\n numberAttribute,\n output,\n signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { cn } from '@edsis/ui/utils';\n\nexport type ComposerVariant = 'default' | 'input';\nexport type ComposerSubmitBehavior = 'cmd-enter' | 'enter';\n\nconst COMPOSER_BASE = 'block w-full min-w-0 text-sm text-foreground';\n\nconst COMPOSER_SHELL_BASE = [\n 'relative min-w-0 border border-input bg-background shadow-sm',\n 'transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',\n 'aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive',\n 'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',\n '[&>[data-slot=composer-input]]:min-w-0 [&>[data-slot=composer-input]]:flex-1',\n].join(' ');\n\nconst composerShellVariantClasses: Record<ComposerVariant, string> = {\n default: 'rounded-xl',\n input: 'rounded-md',\n};\n\nconst COMPOSER_BODY_BASE = '[&>[data-slot=composer-input]]:min-w-0 [&>[data-slot=composer-input]]:flex-1';\n\nconst nullableNumberAttribute = (value: unknown): number | null => {\n if (value === null || value === undefined || value === '') {\n return null;\n }\n\n return numberAttribute(value);\n};\n\n@Component({\n selector: 'ui-composer',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'classes()',\n '[attr.data-slot]': '\"composer\"',\n '[attr.data-variant]': 'variant()',\n '[attr.data-inline]': 'inline() ? \"true\" : null',\n '[attr.data-disabled]': 'disabled() ? \"true\" : null',\n '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n '[attr.aria-invalid]': 'invalid() ? \"true\" : null',\n '[attr.inert]': 'disabled() ? \"\" : null',\n },\n template: `\n <div\n data-slot=\"composer-shell\"\n [class]=\"shellClasses()\"\n [attr.data-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\">\n <ng-content select=\"ui-composer-header\" />\n <div data-slot=\"composer-body\" [class]=\"bodyClasses()\">\n <ng-content select=\"ui-composer-actions-leading\" />\n <ng-content select=\"textarea[ui-composer-input], ui-composer-input\" />\n <ng-content select=\"ui-composer-actions-trailing\" />\n </div>\n <ng-content select=\"ui-composer-footer\" />\n </div>\n `,\n})\nexport class ComposerComponent {\n readonly variant = input<ComposerVariant>('default');\n readonly inline = input(false, { transform: booleanAttribute });\n readonly disabled = input(false, { transform: booleanAttribute });\n readonly invalid = input(false, { transform: booleanAttribute });\n readonly submit = input<ComposerSubmitBehavior>('cmd-enter');\n readonly submitForm = input(true, { transform: booleanAttribute });\n readonly class = input<string>('');\n\n readonly submitRequested = output<KeyboardEvent>();\n\n protected readonly classes = computed(() => cn(COMPOSER_BASE, this.class()));\n protected readonly shellClasses = computed(() =>\n cn(COMPOSER_SHELL_BASE, composerShellVariantClasses[this.variant()]),\n );\n protected readonly bodyClasses = computed(() =>\n cn(\n COMPOSER_BODY_BASE,\n this.inline()\n ? [\n 'flex items-end gap-1 px-1 py-1',\n '[&>[data-slot=composer-actions-leading]]:order-10',\n '[&>[data-slot=composer-input]]:order-20',\n '[&>[data-slot=composer-actions-trailing]]:order-30',\n ].join(' ')\n : [\n 'flex flex-wrap items-end gap-1.5 px-2 py-1.5',\n '[&>[data-slot=composer-input]]:order-10 [&>[data-slot=composer-input]]:basis-full',\n '[&>[data-slot=composer-actions-leading]]:order-20',\n '[&>[data-slot=composer-actions-trailing]]:order-30 [&>[data-slot=composer-actions-trailing]]:ml-auto',\n ].join(' '),\n ),\n );\n\n handleInputKeydown(event: KeyboardEvent): void {\n if (this.disabled() || event.key !== 'Enter' || event.defaultPrevented) {\n return;\n }\n\n const shouldSubmit =\n this.submit() === 'enter' ? !event.shiftKey && !event.isComposing : event.metaKey || event.ctrlKey;\n\n if (!shouldSubmit) {\n return;\n }\n\n event.preventDefault();\n this.submitRequested.emit(event);\n\n if (this.submitForm()) {\n this.requestNearestFormSubmit(event.target);\n }\n }\n\n private requestNearestFormSubmit(target: EventTarget | null): void {\n if (!(target instanceof Element)) {\n return;\n }\n\n const form = target.closest('form');\n if (form && typeof form.requestSubmit === 'function') {\n form.requestSubmit();\n }\n }\n}\n\n@Component({\n selector: 'ui-composer-header',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'classes()',\n '[attr.data-slot]': '\"composer-header\"',\n },\n template: `<ng-content />`,\n})\nexport class ComposerHeaderComponent {\n readonly class = input<string>('');\n\n protected readonly classes = computed(() =>\n cn('flex min-w-0 flex-wrap gap-2 border-b border-border/70 px-2.5 py-2', this.class()),\n );\n}\n\n@Component({\n selector: 'ui-composer-footer',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'classes()',\n '[attr.data-slot]': '\"composer-footer\"',\n },\n template: `<ng-content />`,\n})\nexport class ComposerFooterComponent {\n readonly class = input<string>('');\n\n protected readonly classes = computed(() =>\n cn('border-t border-border/70 px-2.5 py-1.5 text-xs leading-5 text-muted-foreground', this.class()),\n );\n}\n\n@Component({\n selector: 'ui-composer-actions-leading',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'classes()',\n '[attr.data-slot]': '\"composer-actions-leading\"',\n },\n template: `<ng-content />`,\n})\nexport class ComposerActionsLeadingComponent {\n readonly class = input<string>('');\n\n protected readonly classes = computed(() => cn('flex min-h-8 shrink-0 items-center gap-1', this.class()));\n}\n\n@Component({\n selector: 'ui-composer-actions-trailing',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'classes()',\n '[attr.data-slot]': '\"composer-actions-trailing\"',\n },\n template: `<ng-content />`,\n})\nexport class ComposerActionsTrailingComponent {\n readonly class = input<string>('');\n\n protected readonly classes = computed(() => cn('flex min-h-8 shrink-0 items-center justify-end gap-1', this.class()));\n}\n\n@Component({\n selector: 'ui-composer-input',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'classes()',\n '[attr.data-slot]': '\"composer-input\"',\n '[attr.data-disabled]': 'disabled() ? \"true\" : null',\n '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n '[attr.aria-invalid]': 'invalid() ? \"true\" : null',\n '(keydown)': 'handleKeydown($event)',\n },\n template: `<ng-content />`,\n})\nexport class ComposerInputComponent {\n private readonly composer = inject(ComposerComponent, { optional: true });\n\n readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n readonly invalidInput = input(false, { alias: 'aria-invalid', transform: booleanAttribute });\n readonly class = input<string>('');\n\n protected readonly disabled = computed(() => this.disabledInput() || this.composer?.disabled() === true);\n protected readonly invalid = computed(() => this.invalidInput() || this.composer?.invalid() === true);\n protected readonly classes = computed(() =>\n cn(\n 'min-h-10 w-full rounded-sm bg-transparent px-2 py-2 text-sm leading-6 outline-none',\n 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n this.class(),\n ),\n );\n\n protected handleKeydown(event: KeyboardEvent): void {\n this.composer?.handleInputKeydown(event);\n }\n}\n\n@Component({\n selector: 'textarea[ui-composer-input]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ComposerTextareaComponent),\n multi: true,\n },\n ],\n host: {\n '[class]': 'classes()',\n '[attr.data-slot]': '\"composer-input\"',\n '[attr.rows]': 'rows()',\n '[attr.disabled]': 'disabled() ? \"\" : null',\n '[attr.aria-invalid]': 'invalid() ? \"true\" : null',\n '(input)': 'handleInput()',\n '(blur)': 'handleBlur()',\n '(keydown)': 'handleKeydown($event)',\n },\n template: '',\n})\nexport class ComposerTextareaComponent implements AfterViewInit, ControlValueAccessor {\n private readonly el = inject<ElementRef<HTMLTextAreaElement>>(ElementRef);\n private readonly composer = inject(ComposerComponent, { optional: true });\n\n readonly rows = input(2, { transform: numberAttribute });\n readonly maxRows = input<number | null>(null, { transform: nullableNumberAttribute });\n readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n readonly invalidInput = input(false, { alias: 'aria-invalid', transform: booleanAttribute });\n readonly class = input<string>('');\n\n private readonly disabledState = signal(false);\n protected readonly disabled = computed(\n () => this.disabledInput() || this.disabledState() || this.composer?.disabled() === true,\n );\n protected readonly invalid = computed(() => this.invalidInput() || this.composer?.invalid() === true);\n protected readonly classes = computed(() =>\n cn(\n [\n 'max-h-none min-h-10 w-full resize-none bg-transparent px-2 py-2 text-sm leading-6 text-foreground shadow-none outline-none',\n 'placeholder:text-muted-foreground',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n ].join(' '),\n this.class(),\n ),\n );\n\n private onChange: (value: string) => void = () => {};\n private onTouched: () => void = () => {};\n\n ngAfterViewInit(): void {\n queueMicrotask(() => this.resizeToContent());\n }\n\n writeValue(value: string | null): void {\n this.el.nativeElement.value = value ?? '';\n queueMicrotask(() => this.resizeToContent());\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabledState.set(isDisabled);\n }\n\n resizeToContent(): void {\n const textarea = this.el.nativeElement;\n textarea.style.height = 'auto';\n\n const maxRows = this.maxRows();\n if (!maxRows) {\n textarea.style.height = `${textarea.scrollHeight}px`;\n textarea.style.overflowY = 'hidden';\n return;\n }\n\n const lineHeight = this.getLineHeight(textarea);\n const maxHeight = lineHeight * Math.max(maxRows, this.rows());\n const nextHeight = Math.min(textarea.scrollHeight, maxHeight);\n\n textarea.style.height = `${nextHeight}px`;\n textarea.style.overflowY = textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';\n }\n\n focus(): void {\n this.el.nativeElement.focus();\n }\n\n protected handleInput(): void {\n this.resizeToContent();\n this.onChange(this.el.nativeElement.value);\n }\n\n protected handleBlur(): void {\n this.onTouched();\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n this.composer?.handleInputKeydown(event);\n }\n\n private getLineHeight(textarea: HTMLTextAreaElement): number {\n const lineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight);\n return Number.isFinite(lineHeight) ? lineHeight : 24;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { Overlay } from '@angular/cdk/overlay';
|
|
2
|
+
import { TemplatePortal } from '@angular/cdk/portal';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { inject, ViewContainerRef, ElementRef, DestroyRef, input, output, signal, Directive } from '@angular/core';
|
|
5
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
6
|
+
import { merge } from 'rxjs';
|
|
7
|
+
import { filter } from 'rxjs/operators';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Opens a menu anchored to the cursor when the host fires `contextmenu`.
|
|
11
|
+
* Reuses `<ng-template uiMenuContent>` from the dropdown-menu entry.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* <div [uiContextMenuTrigger]="menu" class="p-12 border">Right-click me</div>
|
|
15
|
+
* <ng-template uiMenuContent #menu>
|
|
16
|
+
* <ui-menu-surface>
|
|
17
|
+
* <button ui-menu-item>Copy</button>
|
|
18
|
+
* <button ui-menu-item>Paste</button>
|
|
19
|
+
* </ui-menu-surface>
|
|
20
|
+
* </ng-template>
|
|
21
|
+
*/
|
|
22
|
+
class ContextMenuTriggerDirective {
|
|
23
|
+
overlay = inject(Overlay);
|
|
24
|
+
vcr = inject(ViewContainerRef);
|
|
25
|
+
el = inject(ElementRef);
|
|
26
|
+
destroyRef = inject(DestroyRef);
|
|
27
|
+
uiContextMenuTrigger = input.required(...(ngDevMode ? [{ debugName: "uiContextMenuTrigger" }] : /* istanbul ignore next */ []));
|
|
28
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
29
|
+
openedChange = output();
|
|
30
|
+
overlayRef = null;
|
|
31
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
32
|
+
onContextMenu(event) {
|
|
33
|
+
if (this.disabled())
|
|
34
|
+
return;
|
|
35
|
+
event.preventDefault();
|
|
36
|
+
this.close();
|
|
37
|
+
this.openAt(event.clientX, event.clientY);
|
|
38
|
+
}
|
|
39
|
+
onKeyDown(event) {
|
|
40
|
+
const isContextMenuKey = event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10');
|
|
41
|
+
if (!isContextMenuKey || this.disabled()) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
event.preventDefault();
|
|
45
|
+
const rect = this.el.nativeElement.getBoundingClientRect();
|
|
46
|
+
this.close();
|
|
47
|
+
this.openAt(rect.left + rect.width / 2, rect.top + rect.height / 2);
|
|
48
|
+
}
|
|
49
|
+
openAt(x, y) {
|
|
50
|
+
this.overlayRef = this.overlay.create({
|
|
51
|
+
positionStrategy: this.overlay
|
|
52
|
+
.position()
|
|
53
|
+
.flexibleConnectedTo({ x, y })
|
|
54
|
+
.withPositions([
|
|
55
|
+
{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
|
|
56
|
+
{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
|
|
57
|
+
{ originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
|
|
58
|
+
{ originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
|
|
59
|
+
]),
|
|
60
|
+
scrollStrategy: this.overlay.scrollStrategies.close(),
|
|
61
|
+
hasBackdrop: false,
|
|
62
|
+
panelClass: 'ui-menu-panel',
|
|
63
|
+
});
|
|
64
|
+
const portal = new TemplatePortal(this.uiContextMenuTrigger().template, this.vcr);
|
|
65
|
+
this.overlayRef.attach(portal);
|
|
66
|
+
merge(this.overlayRef.outsidePointerEvents(), this.overlayRef.keydownEvents().pipe(filter((e) => e.key === 'Escape')), this.overlayRef.detachments())
|
|
67
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
68
|
+
.subscribe(() => this.close());
|
|
69
|
+
this.isOpen.set(true);
|
|
70
|
+
this.openedChange.emit(true);
|
|
71
|
+
}
|
|
72
|
+
close() {
|
|
73
|
+
if (!this.overlayRef)
|
|
74
|
+
return;
|
|
75
|
+
this.overlayRef.dispose();
|
|
76
|
+
this.overlayRef = null;
|
|
77
|
+
this.isOpen.set(false);
|
|
78
|
+
this.openedChange.emit(false);
|
|
79
|
+
}
|
|
80
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ContextMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
81
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: ContextMenuTriggerDirective, isStandalone: true, selector: "[uiContextMenuTrigger]", inputs: { uiContextMenuTrigger: { classPropertyName: "uiContextMenuTrigger", publicName: "uiContextMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "contextmenu": "onContextMenu($event)", "keydown": "onKeyDown($event)" } }, exportAs: ["uiContextMenuTrigger"], ngImport: i0 });
|
|
82
|
+
}
|
|
83
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ContextMenuTriggerDirective, decorators: [{
|
|
84
|
+
type: Directive,
|
|
85
|
+
args: [{
|
|
86
|
+
selector: '[uiContextMenuTrigger]',
|
|
87
|
+
exportAs: 'uiContextMenuTrigger',
|
|
88
|
+
host: {
|
|
89
|
+
'(contextmenu)': 'onContextMenu($event)',
|
|
90
|
+
'(keydown)': 'onKeyDown($event)',
|
|
91
|
+
},
|
|
92
|
+
}]
|
|
93
|
+
}], propDecorators: { uiContextMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiContextMenuTrigger", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Generated bundle index. Do not edit.
|
|
97
|
+
*/
|
|
98
|
+
|
|
99
|
+
export { ContextMenuTriggerDirective };
|
|
100
|
+
//# sourceMappingURL=edsis-ui-context-menu.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"edsis-ui-context-menu.mjs","sources":["../../../library/ui/context-menu/context-menu-trigger.directive.ts","../../../library/ui/context-menu/edsis-ui-context-menu.ts"],"sourcesContent":["import { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { DestroyRef, Directive, ElementRef, ViewContainerRef, inject, input, output, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { merge } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport type { MenuContentDirective } from '@edsis/ui/dropdown-menu';\n\n/**\n * Opens a menu anchored to the cursor when the host fires `contextmenu`.\n * Reuses `<ng-template uiMenuContent>` from the dropdown-menu entry.\n *\n * @example\n * <div [uiContextMenuTrigger]=\"menu\" class=\"p-12 border\">Right-click me</div>\n * <ng-template uiMenuContent #menu>\n * <ui-menu-surface>\n * <button ui-menu-item>Copy</button>\n * <button ui-menu-item>Paste</button>\n * </ui-menu-surface>\n * </ng-template>\n */\n@Directive({\n selector: '[uiContextMenuTrigger]',\n exportAs: 'uiContextMenuTrigger',\n host: {\n '(contextmenu)': 'onContextMenu($event)',\n '(keydown)': 'onKeyDown($event)',\n },\n})\nexport class ContextMenuTriggerDirective {\n private readonly overlay = inject(Overlay);\n private readonly vcr = inject(ViewContainerRef);\n private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly destroyRef = inject(DestroyRef);\n\n readonly uiContextMenuTrigger = input.required<MenuContentDirective>();\n readonly disabled = input<boolean>(false);\n\n readonly openedChange = output<boolean>();\n\n private overlayRef: OverlayRef | null = null;\n readonly isOpen = signal(false);\n\n protected onContextMenu(event: MouseEvent): void {\n if (this.disabled()) return;\n event.preventDefault();\n this.close();\n this.openAt(event.clientX, event.clientY);\n }\n\n protected onKeyDown(event: KeyboardEvent): void {\n const isContextMenuKey = event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10');\n\n if (!isContextMenuKey || this.disabled()) {\n return;\n }\n\n event.preventDefault();\n\n const rect = this.el.nativeElement.getBoundingClientRect();\n this.close();\n this.openAt(rect.left + rect.width / 2, rect.top + rect.height / 2);\n }\n\n openAt(x: number, y: number): void {\n this.overlayRef = this.overlay.create({\n positionStrategy: this.overlay\n .position()\n .flexibleConnectedTo({ x, y })\n .withPositions([\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },\n ]),\n scrollStrategy: this.overlay.scrollStrategies.close(),\n hasBackdrop: false,\n panelClass: 'ui-menu-panel',\n });\n\n const portal = new TemplatePortal(this.uiContextMenuTrigger().template, this.vcr);\n this.overlayRef.attach(portal);\n\n merge(\n this.overlayRef.outsidePointerEvents(),\n this.overlayRef.keydownEvents().pipe(filter((e) => e.key === 'Escape')),\n this.overlayRef.detachments(),\n )\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => this.close());\n\n this.isOpen.set(true);\n this.openedChange.emit(true);\n }\n\n close(): void {\n if (!this.overlayRef) return;\n this.overlayRef.dispose();\n this.overlayRef = null;\n this.isOpen.set(false);\n this.openedChange.emit(false);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|