@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,107 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, booleanAttribute, output, viewChild, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
|
+
import { MatSlideToggle } from '@angular/material/slide-toggle';
|
|
5
|
+
import { cn } from '@edsis/ui/utils';
|
|
6
|
+
|
|
7
|
+
let nextSwitchId = 0;
|
|
8
|
+
/**
|
|
9
|
+
* Switch — shadcn-styled wrapper around `mat-slide-toggle`.
|
|
10
|
+
*/
|
|
11
|
+
class SwitchComponent {
|
|
12
|
+
id = input(`ui-switch-${nextSwitchId++}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
13
|
+
name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
14
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
15
|
+
required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
16
|
+
ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
|
|
17
|
+
ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
|
|
18
|
+
ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
|
|
19
|
+
ariaInvalid = input(null, { ...(ngDevMode ? { debugName: "ariaInvalid" } : /* istanbul ignore next */ {}), alias: 'aria-invalid' });
|
|
20
|
+
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
21
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
22
|
+
checkedChange = output();
|
|
23
|
+
ref = viewChild.required('ref');
|
|
24
|
+
checked = signal(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
25
|
+
disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
26
|
+
ariaInvalidAttr = computed(() => {
|
|
27
|
+
const value = this.ariaInvalid();
|
|
28
|
+
if (value === false || value === 'false' || value == null) {
|
|
29
|
+
return null;
|
|
30
|
+
}
|
|
31
|
+
return value === true || value === '' ? 'true' : `${value}`;
|
|
32
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalidAttr" }] : /* istanbul ignore next */ []));
|
|
33
|
+
isDisabled = computed(() => this.disabled() || this.disabledState(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
34
|
+
classes = computed(() => cn('ui-switch', this.size() === 'sm' ? 'ui-switch-sm' : 'ui-switch-default', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
35
|
+
onChange = () => { };
|
|
36
|
+
onTouched = () => { };
|
|
37
|
+
handleChange(e) {
|
|
38
|
+
this.checked.set(e.checked);
|
|
39
|
+
this.onChange(e.checked);
|
|
40
|
+
this.onTouched();
|
|
41
|
+
this.checkedChange.emit(e.checked);
|
|
42
|
+
}
|
|
43
|
+
focus() {
|
|
44
|
+
this.ref().focus();
|
|
45
|
+
}
|
|
46
|
+
writeValue(v) {
|
|
47
|
+
this.checked.set(!!v);
|
|
48
|
+
}
|
|
49
|
+
registerOnChange(fn) {
|
|
50
|
+
this.onChange = fn;
|
|
51
|
+
}
|
|
52
|
+
registerOnTouched(fn) {
|
|
53
|
+
this.onTouched = fn;
|
|
54
|
+
}
|
|
55
|
+
setDisabledState(d) {
|
|
56
|
+
this.disabledState.set(d);
|
|
57
|
+
}
|
|
58
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
59
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: SwitchComponent, isStandalone: true, selector: "ui-switch", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
60
|
+
<mat-slide-toggle
|
|
61
|
+
#ref
|
|
62
|
+
hideIcon
|
|
63
|
+
disableRipple
|
|
64
|
+
[id]="id()"
|
|
65
|
+
[name]="name()"
|
|
66
|
+
[class]="classes()"
|
|
67
|
+
[checked]="checked()"
|
|
68
|
+
[disabled]="isDisabled()"
|
|
69
|
+
[required]="required()"
|
|
70
|
+
[attr.aria-label]="ariaLabel()"
|
|
71
|
+
[attr.aria-describedby]="ariaDescribedby()"
|
|
72
|
+
[attr.aria-labelledby]="ariaLabelledby()"
|
|
73
|
+
[attr.aria-invalid]="ariaInvalidAttr()"
|
|
74
|
+
(change)="handleChange($event)">
|
|
75
|
+
<ng-content />
|
|
76
|
+
</mat-slide-toggle>
|
|
77
|
+
`, isInline: true, styles: [":host{display:inline-flex}:host ::ng-deep .mat-mdc-slide-toggle.ui-switch{--mdc-switch-track-width: 2rem;--mdc-switch-track-height: 1.15rem;--mdc-switch-track-shape: 9999px;--mdc-switch-handle-shape: 9999px;--mdc-switch-handle-width: .875rem;--mdc-switch-handle-height: .875rem;--mdc-switch-state-layer-size: 0;--mdc-switch-selected-track-color: hsl(var(--primary));--mdc-switch-selected-focus-track-color: hsl(var(--primary));--mdc-switch-selected-hover-track-color: hsl(var(--primary));--mdc-switch-selected-pressed-track-color: hsl(var(--primary));--mdc-switch-unselected-track-color: hsl(var(--input));--mdc-switch-unselected-focus-track-color: hsl(var(--input));--mdc-switch-unselected-hover-track-color: hsl(var(--input));--mdc-switch-unselected-pressed-track-color: hsl(var(--input));--mdc-switch-selected-handle-color: hsl(var(--primary-foreground));--mdc-switch-selected-focus-handle-color: hsl(var(--primary-foreground));--mdc-switch-selected-hover-handle-color: hsl(var(--primary-foreground));--mdc-switch-selected-pressed-handle-color: hsl(var(--primary-foreground));--mdc-switch-unselected-handle-color: hsl(var(--background));--mdc-switch-unselected-focus-handle-color: hsl(var(--background));--mdc-switch-unselected-hover-handle-color: hsl(var(--background));--mdc-switch-unselected-pressed-handle-color: hsl(var(--background));--mdc-switch-selected-icon-color: transparent;--mdc-switch-unselected-icon-color: transparent}:host ::ng-deep .mat-mdc-slide-toggle.ui-switch.ui-switch-sm{--mdc-switch-track-width: 1.75rem;--mdc-switch-track-height: 1rem;--mdc-switch-handle-width: .75rem;--mdc-switch-handle-height: .75rem}:host ::ng-deep .mat-mdc-slide-toggle.ui-switch[aria-invalid=true]{--mdc-switch-selected-track-color: hsl(var(--destructive));--mdc-switch-selected-focus-track-color: hsl(var(--destructive));--mdc-switch-selected-hover-track-color: hsl(var(--destructive));--mdc-switch-selected-pressed-track-color: hsl(var(--destructive));--mdc-switch-unselected-track-color: hsl(var(--destructive) / .25);--mdc-switch-unselected-focus-track-color: hsl(var(--destructive) / .25);--mdc-switch-unselected-hover-track-color: hsl(var(--destructive) / .25);--mdc-switch-unselected-pressed-track-color: hsl(var(--destructive) / .25);--mdc-switch-selected-handle-color: hsl(var(--destructive-foreground));--mdc-switch-selected-focus-handle-color: hsl(var(--destructive-foreground));--mdc-switch-selected-hover-handle-color: hsl(var(--destructive-foreground));--mdc-switch-selected-pressed-handle-color: hsl(var(--destructive-foreground));--mdc-switch-unselected-handle-color: hsl(var(--destructive));--mdc-switch-unselected-focus-handle-color: hsl(var(--destructive));--mdc-switch-unselected-hover-handle-color: hsl(var(--destructive));--mdc-switch-unselected-pressed-handle-color: hsl(var(--destructive))}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch__ripple,:host ::ng-deep .mat-mdc-slide-toggle .mat-mdc-slide-toggle-ripple,:host ::ng-deep .mat-mdc-slide-toggle .mat-mdc-focus-indicator{display:none}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch__icons{display:none}:host ::ng-deep .mat-mdc-slide-toggle .mdc-form-field{gap:.5rem;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-slide-toggle .mdc-label{padding:0;cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
78
|
+
}
|
|
79
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
80
|
+
type: Component,
|
|
81
|
+
args: [{ selector: 'ui-switch', imports: [MatSlideToggle], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true }], template: `
|
|
82
|
+
<mat-slide-toggle
|
|
83
|
+
#ref
|
|
84
|
+
hideIcon
|
|
85
|
+
disableRipple
|
|
86
|
+
[id]="id()"
|
|
87
|
+
[name]="name()"
|
|
88
|
+
[class]="classes()"
|
|
89
|
+
[checked]="checked()"
|
|
90
|
+
[disabled]="isDisabled()"
|
|
91
|
+
[required]="required()"
|
|
92
|
+
[attr.aria-label]="ariaLabel()"
|
|
93
|
+
[attr.aria-describedby]="ariaDescribedby()"
|
|
94
|
+
[attr.aria-labelledby]="ariaLabelledby()"
|
|
95
|
+
[attr.aria-invalid]="ariaInvalidAttr()"
|
|
96
|
+
(change)="handleChange($event)">
|
|
97
|
+
<ng-content />
|
|
98
|
+
</mat-slide-toggle>
|
|
99
|
+
`, styles: [":host{display:inline-flex}:host ::ng-deep .mat-mdc-slide-toggle.ui-switch{--mdc-switch-track-width: 2rem;--mdc-switch-track-height: 1.15rem;--mdc-switch-track-shape: 9999px;--mdc-switch-handle-shape: 9999px;--mdc-switch-handle-width: .875rem;--mdc-switch-handle-height: .875rem;--mdc-switch-state-layer-size: 0;--mdc-switch-selected-track-color: hsl(var(--primary));--mdc-switch-selected-focus-track-color: hsl(var(--primary));--mdc-switch-selected-hover-track-color: hsl(var(--primary));--mdc-switch-selected-pressed-track-color: hsl(var(--primary));--mdc-switch-unselected-track-color: hsl(var(--input));--mdc-switch-unselected-focus-track-color: hsl(var(--input));--mdc-switch-unselected-hover-track-color: hsl(var(--input));--mdc-switch-unselected-pressed-track-color: hsl(var(--input));--mdc-switch-selected-handle-color: hsl(var(--primary-foreground));--mdc-switch-selected-focus-handle-color: hsl(var(--primary-foreground));--mdc-switch-selected-hover-handle-color: hsl(var(--primary-foreground));--mdc-switch-selected-pressed-handle-color: hsl(var(--primary-foreground));--mdc-switch-unselected-handle-color: hsl(var(--background));--mdc-switch-unselected-focus-handle-color: hsl(var(--background));--mdc-switch-unselected-hover-handle-color: hsl(var(--background));--mdc-switch-unselected-pressed-handle-color: hsl(var(--background));--mdc-switch-selected-icon-color: transparent;--mdc-switch-unselected-icon-color: transparent}:host ::ng-deep .mat-mdc-slide-toggle.ui-switch.ui-switch-sm{--mdc-switch-track-width: 1.75rem;--mdc-switch-track-height: 1rem;--mdc-switch-handle-width: .75rem;--mdc-switch-handle-height: .75rem}:host ::ng-deep .mat-mdc-slide-toggle.ui-switch[aria-invalid=true]{--mdc-switch-selected-track-color: hsl(var(--destructive));--mdc-switch-selected-focus-track-color: hsl(var(--destructive));--mdc-switch-selected-hover-track-color: hsl(var(--destructive));--mdc-switch-selected-pressed-track-color: hsl(var(--destructive));--mdc-switch-unselected-track-color: hsl(var(--destructive) / .25);--mdc-switch-unselected-focus-track-color: hsl(var(--destructive) / .25);--mdc-switch-unselected-hover-track-color: hsl(var(--destructive) / .25);--mdc-switch-unselected-pressed-track-color: hsl(var(--destructive) / .25);--mdc-switch-selected-handle-color: hsl(var(--destructive-foreground));--mdc-switch-selected-focus-handle-color: hsl(var(--destructive-foreground));--mdc-switch-selected-hover-handle-color: hsl(var(--destructive-foreground));--mdc-switch-selected-pressed-handle-color: hsl(var(--destructive-foreground));--mdc-switch-unselected-handle-color: hsl(var(--destructive));--mdc-switch-unselected-focus-handle-color: hsl(var(--destructive));--mdc-switch-unselected-hover-handle-color: hsl(var(--destructive));--mdc-switch-unselected-pressed-handle-color: hsl(var(--destructive))}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch__ripple,:host ::ng-deep .mat-mdc-slide-toggle .mat-mdc-slide-toggle-ripple,:host ::ng-deep .mat-mdc-slide-toggle .mat-mdc-focus-indicator{display:none}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch__icons{display:none}:host ::ng-deep .mat-mdc-slide-toggle .mdc-form-field{gap:.5rem;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-slide-toggle .mdc-label{padding:0;cursor:pointer}\n"] }]
|
|
100
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* Generated bundle index. Do not edit.
|
|
104
|
+
*/
|
|
105
|
+
|
|
106
|
+
export { SwitchComponent };
|
|
107
|
+
//# sourceMappingURL=edsis-ui-switch.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"edsis-ui-switch.mjs","sources":["../../../library/ui/switch/switch.component.ts","../../../library/ui/switch/edsis-ui-switch.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n forwardRef,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatSlideToggle, MatSlideToggleChange } from '@angular/material/slide-toggle';\nimport { cn } from '@edsis/ui/utils';\n\nlet nextSwitchId = 0;\n\nexport type SwitchSize = 'default' | 'sm';\n\n/**\n * Switch — shadcn-styled wrapper around `mat-slide-toggle`.\n */\n@Component({\n selector: 'ui-switch',\n imports: [MatSlideToggle],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true }],\n template: `\n <mat-slide-toggle\n #ref\n hideIcon\n disableRipple\n [id]=\"id()\"\n [name]=\"name()\"\n [class]=\"classes()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedby()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-invalid]=\"ariaInvalidAttr()\"\n (change)=\"handleChange($event)\">\n <ng-content />\n </mat-slide-toggle>\n `,\n styleUrl: './switch.component.css',\n})\nexport class SwitchComponent implements ControlValueAccessor {\n readonly id = input<string>(`ui-switch-${nextSwitchId++}`);\n readonly name = input<string | null>(null);\n readonly disabled = input(false, { transform: booleanAttribute });\n readonly required = input(false, { transform: booleanAttribute });\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });\n readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });\n readonly ariaInvalid = input<boolean | string | null>(null, { alias: 'aria-invalid' });\n readonly size = input<SwitchSize>('default');\n readonly class = input<string>('');\n\n readonly checkedChange = output<boolean>();\n\n private readonly ref = viewChild.required<MatSlideToggle>('ref');\n\n protected readonly checked = signal<boolean>(false);\n protected readonly disabledState = signal(false);\n protected readonly ariaInvalidAttr = computed(() => {\n const value = this.ariaInvalid();\n\n if (value === false || value === 'false' || value == null) {\n return null;\n }\n\n return value === true || value === '' ? 'true' : `${value}`;\n });\n protected readonly isDisabled = computed(() => this.disabled() || this.disabledState());\n protected readonly classes = computed(() =>\n cn('ui-switch', this.size() === 'sm' ? 'ui-switch-sm' : 'ui-switch-default', this.class()),\n );\n\n private onChange: (v: boolean) => void = () => {};\n private onTouched: () => void = () => {};\n\n protected handleChange(e: MatSlideToggleChange): void {\n this.checked.set(e.checked);\n this.onChange(e.checked);\n this.onTouched();\n this.checkedChange.emit(e.checked);\n }\n\n focus(): void {\n this.ref().focus();\n }\n\n writeValue(v: boolean): void {\n this.checked.set(!!v);\n }\n registerOnChange(fn: (v: boolean) => void): void {\n this.onChange = fn;\n }\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n setDisabledState(d: boolean): void {\n this.disabledState.set(d);\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,139 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { cn } from '@edsis/ui/utils';
|
|
4
|
+
|
|
5
|
+
class TableComponent {
|
|
6
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
7
|
+
classes = computed(() => cn('w-full caption-bottom text-sm', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
8
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: TableComponent, isStandalone: true, selector: "ui-table", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "relative block w-full overflow-x-auto" }, ngImport: i0, template: `
|
|
10
|
+
<table [class]="classes()">
|
|
11
|
+
<ng-content />
|
|
12
|
+
</table>
|
|
13
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14
|
+
}
|
|
15
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableComponent, decorators: [{
|
|
16
|
+
type: Component,
|
|
17
|
+
args: [{
|
|
18
|
+
selector: 'ui-table',
|
|
19
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
20
|
+
host: { class: 'relative block w-full overflow-x-auto' },
|
|
21
|
+
template: `
|
|
22
|
+
<table [class]="classes()">
|
|
23
|
+
<ng-content />
|
|
24
|
+
</table>
|
|
25
|
+
`,
|
|
26
|
+
}]
|
|
27
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
28
|
+
class TableHeaderComponent {
|
|
29
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
30
|
+
classes = computed(() => cn('[&_tr]:border-b [&_tr]:border-border', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
31
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: TableHeaderComponent, isStandalone: true, selector: "thead[ui-table-header]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
33
|
+
}
|
|
34
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableHeaderComponent, decorators: [{
|
|
35
|
+
type: Component,
|
|
36
|
+
args: [{
|
|
37
|
+
selector: 'thead[ui-table-header]',
|
|
38
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
39
|
+
host: { '[class]': 'classes()' },
|
|
40
|
+
template: `<ng-content />`,
|
|
41
|
+
}]
|
|
42
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
43
|
+
class TableBodyComponent {
|
|
44
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
45
|
+
classes = computed(() => cn('[&_tr:last-child]:border-0', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
46
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
47
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: TableBodyComponent, isStandalone: true, selector: "tbody[ui-table-body]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
48
|
+
}
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableBodyComponent, decorators: [{
|
|
50
|
+
type: Component,
|
|
51
|
+
args: [{
|
|
52
|
+
selector: 'tbody[ui-table-body]',
|
|
53
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
54
|
+
host: { '[class]': 'classes()' },
|
|
55
|
+
template: `<ng-content />`,
|
|
56
|
+
}]
|
|
57
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
58
|
+
class TableFooterComponent {
|
|
59
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
60
|
+
classes = computed(() => cn('border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
61
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
62
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: TableFooterComponent, isStandalone: true, selector: "tfoot[ui-table-footer]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
63
|
+
}
|
|
64
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableFooterComponent, decorators: [{
|
|
65
|
+
type: Component,
|
|
66
|
+
args: [{
|
|
67
|
+
selector: 'tfoot[ui-table-footer]',
|
|
68
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
69
|
+
host: { '[class]': 'classes()' },
|
|
70
|
+
template: `<ng-content />`,
|
|
71
|
+
}]
|
|
72
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
73
|
+
class TableRowComponent {
|
|
74
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
75
|
+
classes = computed(() => cn('border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
76
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
77
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: TableRowComponent, isStandalone: true, selector: "tr[ui-table-row]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
78
|
+
}
|
|
79
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableRowComponent, decorators: [{
|
|
80
|
+
type: Component,
|
|
81
|
+
args: [{
|
|
82
|
+
selector: 'tr[ui-table-row]',
|
|
83
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
84
|
+
host: { '[class]': 'classes()' },
|
|
85
|
+
template: `<ng-content />`,
|
|
86
|
+
}]
|
|
87
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
88
|
+
class TableHeadComponent {
|
|
89
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
90
|
+
classes = computed(() => cn('h-10 whitespace-nowrap px-2 text-left align-middle font-medium text-muted-foreground', '[&:has([role=checkbox])]:pr-0', '[&>[role=checkbox]]:translate-y-[2px]', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
91
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
92
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: TableHeadComponent, isStandalone: true, selector: "th[ui-table-head]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
93
|
+
}
|
|
94
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableHeadComponent, decorators: [{
|
|
95
|
+
type: Component,
|
|
96
|
+
args: [{
|
|
97
|
+
selector: 'th[ui-table-head]',
|
|
98
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
99
|
+
host: { '[class]': 'classes()' },
|
|
100
|
+
template: `<ng-content />`,
|
|
101
|
+
}]
|
|
102
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
103
|
+
class TableCellComponent {
|
|
104
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
105
|
+
classes = computed(() => cn('whitespace-nowrap p-2 align-middle', '[&:has([role=checkbox])]:pr-0', '[&>[role=checkbox]]:translate-y-[2px]', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
106
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: TableCellComponent, isStandalone: true, selector: "td[ui-table-cell]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
108
|
+
}
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableCellComponent, decorators: [{
|
|
110
|
+
type: Component,
|
|
111
|
+
args: [{
|
|
112
|
+
selector: 'td[ui-table-cell]',
|
|
113
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
114
|
+
host: { '[class]': 'classes()' },
|
|
115
|
+
template: `<ng-content />`,
|
|
116
|
+
}]
|
|
117
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
118
|
+
class TableCaptionComponent {
|
|
119
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
120
|
+
classes = computed(() => cn('mt-4 text-sm text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
121
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
122
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: TableCaptionComponent, isStandalone: true, selector: "caption[ui-table-caption]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
123
|
+
}
|
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableCaptionComponent, decorators: [{
|
|
125
|
+
type: Component,
|
|
126
|
+
args: [{
|
|
127
|
+
selector: 'caption[ui-table-caption]',
|
|
128
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
129
|
+
host: { '[class]': 'classes()' },
|
|
130
|
+
template: `<ng-content />`,
|
|
131
|
+
}]
|
|
132
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
133
|
+
|
|
134
|
+
/**
|
|
135
|
+
* Generated bundle index. Do not edit.
|
|
136
|
+
*/
|
|
137
|
+
|
|
138
|
+
export { TableBodyComponent, TableCaptionComponent, TableCellComponent, TableComponent, TableFooterComponent, TableHeadComponent, TableHeaderComponent, TableRowComponent };
|
|
139
|
+
//# sourceMappingURL=edsis-ui-table.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"edsis-ui-table.mjs","sources":["../../../library/ui/table/table.component.ts","../../../library/ui/table/edsis-ui-table.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { cn } from '@edsis/ui/utils';\n\n@Component({\n selector: 'ui-table',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { class: 'relative block w-full overflow-x-auto' },\n template: `\n <table [class]=\"classes()\">\n <ng-content />\n </table>\n `,\n})\nexport class TableComponent {\n readonly class = input<string>('');\n protected readonly classes = computed(() => cn('w-full caption-bottom text-sm', this.class()));\n}\n\n@Component({\n selector: 'thead[ui-table-header]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'classes()' },\n template: `<ng-content />`,\n})\nexport class TableHeaderComponent {\n readonly class = input<string>('');\n protected readonly classes = computed(() => cn('[&_tr]:border-b [&_tr]:border-border', this.class()));\n}\n\n@Component({\n selector: 'tbody[ui-table-body]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'classes()' },\n template: `<ng-content />`,\n})\nexport class TableBodyComponent {\n readonly class = input<string>('');\n protected readonly classes = computed(() => cn('[&_tr:last-child]:border-0', this.class()));\n}\n\n@Component({\n selector: 'tfoot[ui-table-footer]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'classes()' },\n template: `<ng-content />`,\n})\nexport class TableFooterComponent {\n readonly class = input<string>('');\n protected readonly classes = computed(() =>\n cn('border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0', this.class()),\n );\n}\n\n@Component({\n selector: 'tr[ui-table-row]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'classes()' },\n template: `<ng-content />`,\n})\nexport class TableRowComponent {\n readonly class = input<string>('');\n protected readonly classes = computed(() =>\n cn('border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', this.class()),\n );\n}\n\n@Component({\n selector: 'th[ui-table-head]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'classes()' },\n template: `<ng-content />`,\n})\nexport class TableHeadComponent {\n readonly class = input<string>('');\n protected readonly classes = computed(() =>\n cn(\n 'h-10 whitespace-nowrap px-2 text-left align-middle font-medium text-muted-foreground',\n '[&:has([role=checkbox])]:pr-0',\n '[&>[role=checkbox]]:translate-y-[2px]',\n this.class(),\n ),\n );\n}\n\n@Component({\n selector: 'td[ui-table-cell]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'classes()' },\n template: `<ng-content />`,\n})\nexport class TableCellComponent {\n readonly class = input<string>('');\n protected readonly classes = computed(() =>\n cn(\n 'whitespace-nowrap p-2 align-middle',\n '[&:has([role=checkbox])]:pr-0',\n '[&>[role=checkbox]]:translate-y-[2px]',\n this.class(),\n ),\n );\n}\n\n@Component({\n selector: 'caption[ui-table-caption]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'classes()' },\n template: `<ng-content />`,\n})\nexport class TableCaptionComponent {\n readonly class = input<string>('');\n protected readonly classes = computed(() => cn('mt-4 text-sm text-muted-foreground', this.class()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { Directive, model, input, computed, forwardRef, ChangeDetectionStrategy, Component, inject, ElementRef } from '@angular/core';
|
|
3
|
+
import { cn } from '@edsis/ui/utils';
|
|
4
|
+
|
|
5
|
+
let nextTabsId = 0;
|
|
6
|
+
/**
|
|
7
|
+
* Shared state for a tabs group. Children read the active value and register
|
|
8
|
+
* themselves so the group can drive roving-tabindex keyboard navigation.
|
|
9
|
+
*/
|
|
10
|
+
class TabsContextBase {
|
|
11
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
12
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: TabsContextBase, isStandalone: true, ngImport: i0 });
|
|
13
|
+
}
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsContextBase, decorators: [{
|
|
15
|
+
type: Directive
|
|
16
|
+
}] });
|
|
17
|
+
class TabsListContextBase {
|
|
18
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsListContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
19
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: TabsListContextBase, isStandalone: true, ngImport: i0 });
|
|
20
|
+
}
|
|
21
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsListContextBase, decorators: [{
|
|
22
|
+
type: Directive
|
|
23
|
+
}] });
|
|
24
|
+
class TabsComponent extends TabsContextBase {
|
|
25
|
+
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
26
|
+
orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
27
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
28
|
+
idPrefix = `ui-tabs-${nextTabsId++}`;
|
|
29
|
+
triggers = new Map();
|
|
30
|
+
classes = computed(() => cn(this.orientation() === 'vertical' ? 'flex items-start gap-4' : 'block', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
31
|
+
register(element, value, disabled) {
|
|
32
|
+
this.triggers.set(element, { element, value, disabled });
|
|
33
|
+
if (this.value() == null && !disabled()) {
|
|
34
|
+
this.value.set(value());
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
unregister(element) {
|
|
38
|
+
this.triggers.delete(element);
|
|
39
|
+
}
|
|
40
|
+
activate(value, focus = false) {
|
|
41
|
+
const trigger = this.triggerForValue(value);
|
|
42
|
+
if (!trigger || trigger.disabled())
|
|
43
|
+
return;
|
|
44
|
+
this.value.set(value);
|
|
45
|
+
if (focus) {
|
|
46
|
+
trigger.element.focus();
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
focusNext(from, offset) {
|
|
50
|
+
const enabledTriggers = this.enabledTriggers();
|
|
51
|
+
const currentIndex = enabledTriggers.findIndex((trigger) => trigger.element === from);
|
|
52
|
+
if (currentIndex < 0 || enabledTriggers.length === 0)
|
|
53
|
+
return;
|
|
54
|
+
const nextTrigger = enabledTriggers[(currentIndex + offset + enabledTriggers.length) % enabledTriggers.length];
|
|
55
|
+
this.activate(nextTrigger.value(), true);
|
|
56
|
+
}
|
|
57
|
+
focusFirst() {
|
|
58
|
+
const firstTrigger = this.enabledTriggers()[0];
|
|
59
|
+
if (firstTrigger)
|
|
60
|
+
this.activate(firstTrigger.value(), true);
|
|
61
|
+
}
|
|
62
|
+
focusLast() {
|
|
63
|
+
const enabledTriggers = this.enabledTriggers();
|
|
64
|
+
const lastTrigger = enabledTriggers[enabledTriggers.length - 1];
|
|
65
|
+
if (lastTrigger)
|
|
66
|
+
this.activate(lastTrigger.value(), true);
|
|
67
|
+
}
|
|
68
|
+
triggerId(value) {
|
|
69
|
+
return `${this.idPrefix}-trigger-${this.normalizeValue(value)}`;
|
|
70
|
+
}
|
|
71
|
+
contentId(value) {
|
|
72
|
+
return `${this.idPrefix}-content-${this.normalizeValue(value)}`;
|
|
73
|
+
}
|
|
74
|
+
enabledTriggers() {
|
|
75
|
+
return [...this.triggers.values()].filter((trigger) => !trigger.disabled());
|
|
76
|
+
}
|
|
77
|
+
triggerForValue(value) {
|
|
78
|
+
return [...this.triggers.values()].find((trigger) => trigger.value() === value);
|
|
79
|
+
}
|
|
80
|
+
normalizeValue(value) {
|
|
81
|
+
const normalized = value
|
|
82
|
+
.toLowerCase()
|
|
83
|
+
.replace(/[^a-z0-9_-]+/g, '-')
|
|
84
|
+
.replace(/^-+|-+$/g, '');
|
|
85
|
+
return normalized || 'tab';
|
|
86
|
+
}
|
|
87
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
88
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: TabsComponent, isStandalone: true, selector: "ui-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()", "attr.data-orientation": "orientation()" } }, providers: [{ provide: TabsContextBase, useExisting: forwardRef(() => TabsComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
89
|
+
}
|
|
90
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsComponent, decorators: [{
|
|
91
|
+
type: Component,
|
|
92
|
+
args: [{
|
|
93
|
+
selector: 'ui-tabs',
|
|
94
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
95
|
+
providers: [{ provide: TabsContextBase, useExisting: forwardRef(() => TabsComponent) }],
|
|
96
|
+
host: {
|
|
97
|
+
'[class]': 'classes()',
|
|
98
|
+
'[attr.data-orientation]': 'orientation()',
|
|
99
|
+
},
|
|
100
|
+
template: `<ng-content />`,
|
|
101
|
+
}]
|
|
102
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
103
|
+
class TabsListComponent extends TabsListContextBase {
|
|
104
|
+
ctx = inject(TabsComponent);
|
|
105
|
+
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
106
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
107
|
+
classes = computed(() => cn(this.variantClasses(), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
108
|
+
listVariant() {
|
|
109
|
+
return this.variant();
|
|
110
|
+
}
|
|
111
|
+
variantClasses() {
|
|
112
|
+
if (this.variant() === 'line') {
|
|
113
|
+
return this.ctx.orientation() === 'vertical'
|
|
114
|
+
? 'inline-flex flex-col items-stretch justify-start gap-1 border-e border-border bg-transparent p-0 pe-3 text-muted-foreground'
|
|
115
|
+
: 'inline-flex h-9 items-center justify-start gap-4 border-b border-border bg-transparent p-0 text-muted-foreground';
|
|
116
|
+
}
|
|
117
|
+
return this.ctx.orientation() === 'vertical'
|
|
118
|
+
? 'inline-flex flex-col items-stretch justify-start rounded-md bg-muted p-1 text-muted-foreground'
|
|
119
|
+
: 'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground';
|
|
120
|
+
}
|
|
121
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
122
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: TabsListComponent, isStandalone: true, selector: "ui-tabs-list", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"tablist\"", "attr.aria-orientation": "ctx.orientation()", "attr.data-variant": "variant()" } }, providers: [{ provide: TabsListContextBase, useExisting: forwardRef(() => TabsListComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
123
|
+
}
|
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsListComponent, decorators: [{
|
|
125
|
+
type: Component,
|
|
126
|
+
args: [{
|
|
127
|
+
selector: 'ui-tabs-list',
|
|
128
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
129
|
+
providers: [{ provide: TabsListContextBase, useExisting: forwardRef(() => TabsListComponent) }],
|
|
130
|
+
host: {
|
|
131
|
+
'[class]': 'classes()',
|
|
132
|
+
'[attr.role]': '"tablist"',
|
|
133
|
+
'[attr.aria-orientation]': 'ctx.orientation()',
|
|
134
|
+
'[attr.data-variant]': 'variant()',
|
|
135
|
+
},
|
|
136
|
+
template: `<ng-content />`,
|
|
137
|
+
}]
|
|
138
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
139
|
+
class TabsTriggerComponent {
|
|
140
|
+
ctx = inject(TabsComponent);
|
|
141
|
+
list = inject(TabsListContextBase, { optional: true });
|
|
142
|
+
el = inject(ElementRef);
|
|
143
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
144
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
145
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
146
|
+
selected = computed(() => this.ctx.value() === this.value(), ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
147
|
+
triggerId = computed(() => this.ctx.triggerId(this.value()), ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
|
|
148
|
+
contentId = computed(() => this.ctx.contentId(this.value()), ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
|
|
149
|
+
classes = computed(() => cn('inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium', 'ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', this.variantClasses(), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
150
|
+
ngOnInit() {
|
|
151
|
+
this.ctx.register(this.el.nativeElement, this.value, this.disabled);
|
|
152
|
+
}
|
|
153
|
+
ngOnDestroy() {
|
|
154
|
+
this.ctx.unregister(this.el.nativeElement);
|
|
155
|
+
}
|
|
156
|
+
onClick() {
|
|
157
|
+
if (this.disabled())
|
|
158
|
+
return;
|
|
159
|
+
this.ctx.activate(this.value());
|
|
160
|
+
}
|
|
161
|
+
onArrow(e, delta, axis) {
|
|
162
|
+
if (this.ctx.orientation() !== axis)
|
|
163
|
+
return;
|
|
164
|
+
e.preventDefault();
|
|
165
|
+
this.ctx.focusNext(this.el.nativeElement, delta);
|
|
166
|
+
}
|
|
167
|
+
onHome(e) {
|
|
168
|
+
e.preventDefault();
|
|
169
|
+
this.ctx.focusFirst();
|
|
170
|
+
}
|
|
171
|
+
onEnd(e) {
|
|
172
|
+
e.preventDefault();
|
|
173
|
+
this.ctx.focusLast();
|
|
174
|
+
}
|
|
175
|
+
variantClasses() {
|
|
176
|
+
const variant = this.list?.listVariant() ?? 'default';
|
|
177
|
+
if (variant === 'line') {
|
|
178
|
+
return this.ctx.orientation() === 'vertical'
|
|
179
|
+
? 'w-full justify-start rounded-none border-e-2 border-transparent px-3 py-2 data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none'
|
|
180
|
+
: 'rounded-none border-b-2 border-transparent px-2 py-2 data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none';
|
|
181
|
+
}
|
|
182
|
+
return cn('rounded-sm px-3 py-1.5 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm', this.ctx.orientation() === 'vertical' && 'w-full justify-start');
|
|
183
|
+
}
|
|
184
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
185
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: TabsTriggerComponent, isStandalone: true, selector: "button[ui-tabs-trigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()", "keydown.arrowRight": "onArrow($any($event), 1, \"horizontal\")", "keydown.arrowLeft": "onArrow($any($event), -1, \"horizontal\")", "keydown.arrowDown": "onArrow($any($event), 1, \"vertical\")", "keydown.arrowUp": "onArrow($any($event), -1, \"vertical\")", "keydown.home": "onHome($any($event))", "keydown.end": "onEnd($any($event))" }, properties: { "class": "classes()", "id": "triggerId()", "attr.role": "\"tab\"", "attr.aria-selected": "selected()", "attr.aria-controls": "contentId()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "selected() ? 0 : -1", "attr.data-state": "selected() ? \"active\" : \"inactive\"", "disabled": "disabled() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
186
|
+
}
|
|
187
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsTriggerComponent, decorators: [{
|
|
188
|
+
type: Component,
|
|
189
|
+
args: [{
|
|
190
|
+
selector: 'button[ui-tabs-trigger]',
|
|
191
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
192
|
+
host: {
|
|
193
|
+
'[class]': 'classes()',
|
|
194
|
+
'[id]': 'triggerId()',
|
|
195
|
+
type: 'button',
|
|
196
|
+
'[attr.role]': '"tab"',
|
|
197
|
+
'[attr.aria-selected]': 'selected()',
|
|
198
|
+
'[attr.aria-controls]': 'contentId()',
|
|
199
|
+
'[attr.aria-disabled]': 'disabled() ? "true" : null',
|
|
200
|
+
'[attr.tabindex]': 'selected() ? 0 : -1',
|
|
201
|
+
'[attr.data-state]': 'selected() ? "active" : "inactive"',
|
|
202
|
+
'[disabled]': 'disabled() || null',
|
|
203
|
+
'(click)': 'onClick()',
|
|
204
|
+
'(keydown.arrowRight)': 'onArrow($any($event), 1, "horizontal")',
|
|
205
|
+
'(keydown.arrowLeft)': 'onArrow($any($event), -1, "horizontal")',
|
|
206
|
+
'(keydown.arrowDown)': 'onArrow($any($event), 1, "vertical")',
|
|
207
|
+
'(keydown.arrowUp)': 'onArrow($any($event), -1, "vertical")',
|
|
208
|
+
'(keydown.home)': 'onHome($any($event))',
|
|
209
|
+
'(keydown.end)': 'onEnd($any($event))',
|
|
210
|
+
},
|
|
211
|
+
template: `<ng-content />`,
|
|
212
|
+
}]
|
|
213
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
214
|
+
class TabsContentComponent {
|
|
215
|
+
ctx = inject(TabsComponent);
|
|
216
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
217
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
218
|
+
active = computed(() => this.ctx.value() === this.value(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
219
|
+
triggerId = computed(() => this.ctx.triggerId(this.value()), ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
|
|
220
|
+
contentId = computed(() => this.ctx.contentId(this.value()), ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
|
|
221
|
+
classes = computed(() => cn('mt-2 block ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
222
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
223
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TabsContentComponent, isStandalone: true, selector: "ui-tabs-content", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, properties: { "class": "classes()", "id": "contentId()", "attr.role": "\"tabpanel\"", "attr.aria-labelledby": "triggerId()", "attr.data-state": "active() ? \"active\" : \"inactive\"", "hidden": "!active()" } }, ngImport: i0, template: `@if (active()) {
|
|
224
|
+
<ng-content />
|
|
225
|
+
}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
226
|
+
}
|
|
227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsContentComponent, decorators: [{
|
|
228
|
+
type: Component,
|
|
229
|
+
args: [{
|
|
230
|
+
selector: 'ui-tabs-content',
|
|
231
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
232
|
+
host: {
|
|
233
|
+
'[class]': 'classes()',
|
|
234
|
+
'[id]': 'contentId()',
|
|
235
|
+
'[attr.role]': '"tabpanel"',
|
|
236
|
+
'[attr.aria-labelledby]': 'triggerId()',
|
|
237
|
+
'[attr.data-state]': 'active() ? "active" : "inactive"',
|
|
238
|
+
'[hidden]': '!active()',
|
|
239
|
+
tabindex: '0',
|
|
240
|
+
},
|
|
241
|
+
template: `@if (active()) {
|
|
242
|
+
<ng-content />
|
|
243
|
+
}`,
|
|
244
|
+
}]
|
|
245
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
246
|
+
|
|
247
|
+
/**
|
|
248
|
+
* Generated bundle index. Do not edit.
|
|
249
|
+
*/
|
|
250
|
+
|
|
251
|
+
export { TabsComponent, TabsContentComponent, TabsContextBase, TabsListComponent, TabsListContextBase, TabsTriggerComponent };
|
|
252
|
+
//# sourceMappingURL=edsis-ui-tabs.mjs.map
|