@eduboxpro/studio 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/eduboxpro-studio.mjs +235 -4
- package/fesm2022/eduboxpro-studio.mjs.map +1 -1
- package/index.d.ts +102 -2
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, forwardRef, viewChild, model } from '@angular/core';
|
|
2
|
+
import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, forwardRef, viewChild, model } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1 from 'lucide-angular';
|
|
6
|
-
import { icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS, Moon, Sun, ShoppingCart, Loader2, Loader, RotateCw, RefreshCw, Printer, Save, Image, Folder, FileText, File, HelpCircle, XCircle, CheckCircle, Info, AlertTriangle, AlertCircle, LogOut, LogIn, Unlock, Lock, EyeOff, Eye, Clock, Calendar, Bell, MoreHorizontal, MoreVertical, Menu, Home, Share2, Copy, Link, ExternalLink, Filter, Search, X, Check, Minus, Plus, Edit, Trash2, User, Settings, Star, Heart, Phone, Mail, Upload, Download, ChevronRight, ChevronLeft, ChevronUp, ChevronDown, ArrowLeft, ArrowRight } from 'lucide-angular';
|
|
6
|
+
import { icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS, Laptop, MessageSquare, List, Grid3x3, Strikethrough, Underline, Italic, Bold, AlignJustify, AlignRight, AlignCenter, AlignLeft, Moon, Sun, ShoppingCart, Loader2, Loader, RotateCw, RefreshCw, Printer, Save, Image, Folder, FileText, File, HelpCircle, XCircle, CheckCircle, Info, AlertTriangle, AlertCircle, LogOut, LogIn, Unlock, Lock, EyeOff, Eye, Clock, Calendar, Bell, MoreHorizontal, MoreVertical, Menu, Home, Share2, Copy, Link, ExternalLink, Filter, Search, X, Check, Minus, Plus, Edit, Trash2, User, Settings, Star, Heart, Phone, Mail, Upload, Download, ChevronRight, ChevronLeft, ChevronUp, ChevronDown, ArrowLeft, ArrowRight } from 'lucide-angular';
|
|
7
7
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
8
8
|
|
|
9
9
|
/**
|
|
@@ -443,7 +443,19 @@ function provideStudioIcons() {
|
|
|
443
443
|
Loader2,
|
|
444
444
|
ShoppingCart,
|
|
445
445
|
Sun,
|
|
446
|
-
Moon
|
|
446
|
+
Moon,
|
|
447
|
+
AlignLeft,
|
|
448
|
+
AlignCenter,
|
|
449
|
+
AlignRight,
|
|
450
|
+
AlignJustify,
|
|
451
|
+
Bold,
|
|
452
|
+
Italic,
|
|
453
|
+
Underline,
|
|
454
|
+
Strikethrough,
|
|
455
|
+
Grid3x3,
|
|
456
|
+
List,
|
|
457
|
+
MessageSquare,
|
|
458
|
+
Laptop
|
|
447
459
|
})
|
|
448
460
|
}
|
|
449
461
|
]);
|
|
@@ -869,6 +881,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
869
881
|
* Button component
|
|
870
882
|
*/
|
|
871
883
|
|
|
884
|
+
class ButtonGroupComponent {
|
|
885
|
+
elementRef = inject(ElementRef);
|
|
886
|
+
configService = inject(StudioConfigService);
|
|
887
|
+
groupDefaults = computed(() => this.configService.config().components?.buttonGroup, ...(ngDevMode ? [{ debugName: "groupDefaults" }] : []));
|
|
888
|
+
orientationInput = input(undefined, ...(ngDevMode ? [{ debugName: "orientationInput", alias: 'orientation' }] : [{ alias: 'orientation' }]));
|
|
889
|
+
sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
|
|
890
|
+
variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
|
|
891
|
+
colorInput = input(undefined, ...(ngDevMode ? [{ debugName: "colorInput", alias: 'color' }] : [{ alias: 'color' }]));
|
|
892
|
+
radiusInput = input(undefined, ...(ngDevMode ? [{ debugName: "radiusInput", alias: 'radius' }] : [{ alias: 'radius' }]));
|
|
893
|
+
orientation = withConfigDefault(this.orientationInput, computed(() => this.groupDefaults()?.orientation), 'horizontal');
|
|
894
|
+
size = withConfigDefault(this.sizeInput, computed(() => this.groupDefaults()?.size), undefined);
|
|
895
|
+
variant = withConfigDefault(this.variantInput, computed(() => this.groupDefaults()?.variant), undefined);
|
|
896
|
+
color = withConfigDefault(this.colorInput, computed(() => this.groupDefaults()?.color), undefined);
|
|
897
|
+
radius = withConfigDefault(this.radiusInput, computed(() => this.groupDefaults()?.radius), undefined);
|
|
898
|
+
attached = input(false, ...(ngDevMode ? [{ debugName: "attached" }] : []));
|
|
899
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
900
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
901
|
+
spacing = input('sm', ...(ngDevMode ? [{ debugName: "spacing" }] : []));
|
|
902
|
+
align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : []));
|
|
903
|
+
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
904
|
+
role = input('group', ...(ngDevMode ? [{ debugName: "role" }] : []));
|
|
905
|
+
hostClasses = computed(() => classNames('studio-button-group', `studio-button-group--${this.orientation()}`, `studio-button-group--spacing-${this.spacing()}`, `studio-button-group--align-${this.align()}`, this.attached() && 'studio-button-group--attached', this.fullWidth() && 'studio-button-group--full', this.disabled() && 'studio-button-group--disabled'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
906
|
+
constructor() {
|
|
907
|
+
effect(() => {
|
|
908
|
+
const isAttached = this.attached();
|
|
909
|
+
const hostElement = this.elementRef.nativeElement;
|
|
910
|
+
const buttonElements = hostElement.querySelectorAll('studio-button');
|
|
911
|
+
buttonElements.forEach((buttonEl, index) => {
|
|
912
|
+
const isFirst = index === 0;
|
|
913
|
+
const isLast = index === buttonElements.length - 1;
|
|
914
|
+
const isMiddle = !isFirst && !isLast;
|
|
915
|
+
if (isAttached) {
|
|
916
|
+
buttonEl.classList.add('studio-button-group__item--attached');
|
|
917
|
+
if (isFirst)
|
|
918
|
+
buttonEl.classList.add('studio-button-group__item--first');
|
|
919
|
+
if (isLast)
|
|
920
|
+
buttonEl.classList.add('studio-button-group__item--last');
|
|
921
|
+
if (isMiddle)
|
|
922
|
+
buttonEl.classList.add('studio-button-group__item--middle');
|
|
923
|
+
}
|
|
924
|
+
else {
|
|
925
|
+
buttonEl.classList.remove('studio-button-group__item--attached');
|
|
926
|
+
buttonEl.classList.remove('studio-button-group__item--first');
|
|
927
|
+
buttonEl.classList.remove('studio-button-group__item--last');
|
|
928
|
+
buttonEl.classList.remove('studio-button-group__item--middle');
|
|
929
|
+
}
|
|
930
|
+
});
|
|
931
|
+
});
|
|
932
|
+
}
|
|
933
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
934
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: ButtonGroupComponent, isStandalone: true, selector: "studio-button-group", inputs: { orientationInput: { classPropertyName: "orientationInput", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variantInput: { classPropertyName: "variantInput", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, colorInput: { classPropertyName: "colorInput", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radiusInput: { classPropertyName: "radiusInput", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, attached: { classPropertyName: "attached", publicName: "attached", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "role()", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: `<ng-content select="studio-button" />`, isInline: true, styles: [":host{display:inline-flex;align-items:center;position:relative}:host(.studio-button-group--horizontal){flex-direction:row}:host(.studio-button-group--vertical){flex-direction:column}:host(.studio-button-group--spacing-none){gap:0}:host(.studio-button-group--spacing-xs){gap:var(--studio-spacing-xs)}:host(.studio-button-group--spacing-sm){gap:var(--studio-spacing-sm)}:host(.studio-button-group--spacing-md){gap:var(--studio-spacing-md)}:host(.studio-button-group--spacing-lg){gap:var(--studio-spacing-lg)}:host(.studio-button-group--align-start){justify-content:flex-start}:host(.studio-button-group--align-center){justify-content:center}:host(.studio-button-group--align-end){justify-content:flex-end}:host(.studio-button-group--align-stretch){align-items:stretch}:host(.studio-button-group--align-stretch) ::ng-deep studio-button{flex:1}:host(.studio-button-group--full){width:100%}:host(.studio-button-group--full) ::ng-deep studio-button{flex:1}:host(.studio-button-group--attached){gap:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--attached{margin:0;position:relative}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--middle{border-radius:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--first:not(.studio-button-group__item--last){border-top-right-radius:0;border-bottom-right-radius:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--last:not(.studio-button-group__item--first){border-top-left-radius:0;border-bottom-left-radius:0}:host(.studio-button-group--attached).studio-button-group--horizontal ::ng-deep studio-button.studio-button-group__item--attached:not(:last-child){border-right:1px solid rgba(0,0,0,.1)}:host(.studio-button-group--attached).studio-button-group--horizontal ::ng-deep studio-button.studio-button-group__item--attached.studio-button--outline:not(:last-child){margin-right:-1px}:host(.studio-button-group--vertical){align-items:stretch}:host(.studio-button-group--vertical) ::ng-deep studio-button{width:100%;justify-content:flex-start}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--first:not(.studio-button-group__item--last){border-top-right-radius:var(--studio-radius-sm);border-bottom-right-radius:0;border-top-left-radius:var(--studio-radius-sm);border-bottom-left-radius:0}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--last:not(.studio-button-group__item--first){border-top-left-radius:0;border-bottom-left-radius:var(--studio-radius-sm);border-top-right-radius:0;border-bottom-right-radius:var(--studio-radius-sm)}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--attached:not(:last-child){border-right:none;border-bottom:1px solid rgba(255,255,255,.2)}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--middle{border-radius:0}:host(.studio-button-group--vertical.studio-button-group--full) ::ng-deep studio-button{width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
935
|
+
}
|
|
936
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ButtonGroupComponent, decorators: [{
|
|
937
|
+
type: Component,
|
|
938
|
+
args: [{ selector: 'studio-button-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
939
|
+
'[class]': 'hostClasses()',
|
|
940
|
+
'[attr.role]': 'role()',
|
|
941
|
+
'[attr.aria-label]': 'ariaLabel()'
|
|
942
|
+
}, template: `<ng-content select="studio-button" />`, styles: [":host{display:inline-flex;align-items:center;position:relative}:host(.studio-button-group--horizontal){flex-direction:row}:host(.studio-button-group--vertical){flex-direction:column}:host(.studio-button-group--spacing-none){gap:0}:host(.studio-button-group--spacing-xs){gap:var(--studio-spacing-xs)}:host(.studio-button-group--spacing-sm){gap:var(--studio-spacing-sm)}:host(.studio-button-group--spacing-md){gap:var(--studio-spacing-md)}:host(.studio-button-group--spacing-lg){gap:var(--studio-spacing-lg)}:host(.studio-button-group--align-start){justify-content:flex-start}:host(.studio-button-group--align-center){justify-content:center}:host(.studio-button-group--align-end){justify-content:flex-end}:host(.studio-button-group--align-stretch){align-items:stretch}:host(.studio-button-group--align-stretch) ::ng-deep studio-button{flex:1}:host(.studio-button-group--full){width:100%}:host(.studio-button-group--full) ::ng-deep studio-button{flex:1}:host(.studio-button-group--attached){gap:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--attached{margin:0;position:relative}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--middle{border-radius:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--first:not(.studio-button-group__item--last){border-top-right-radius:0;border-bottom-right-radius:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--last:not(.studio-button-group__item--first){border-top-left-radius:0;border-bottom-left-radius:0}:host(.studio-button-group--attached).studio-button-group--horizontal ::ng-deep studio-button.studio-button-group__item--attached:not(:last-child){border-right:1px solid rgba(0,0,0,.1)}:host(.studio-button-group--attached).studio-button-group--horizontal ::ng-deep studio-button.studio-button-group__item--attached.studio-button--outline:not(:last-child){margin-right:-1px}:host(.studio-button-group--vertical){align-items:stretch}:host(.studio-button-group--vertical) ::ng-deep studio-button{width:100%;justify-content:flex-start}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--first:not(.studio-button-group__item--last){border-top-right-radius:var(--studio-radius-sm);border-bottom-right-radius:0;border-top-left-radius:var(--studio-radius-sm);border-bottom-left-radius:0}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--last:not(.studio-button-group__item--first){border-top-left-radius:0;border-bottom-left-radius:var(--studio-radius-sm);border-top-right-radius:0;border-bottom-right-radius:var(--studio-radius-sm)}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--attached:not(:last-child){border-right:none;border-bottom:1px solid rgba(255,255,255,.2)}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--middle{border-radius:0}:host(.studio-button-group--vertical.studio-button-group--full) ::ng-deep studio-button{width:100%}\n"] }]
|
|
943
|
+
}], ctorParameters: () => [], propDecorators: { orientationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], colorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], attached: [{ type: i0.Input, args: [{ isSignal: true, alias: "attached", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }] } });
|
|
944
|
+
|
|
872
945
|
/**
|
|
873
946
|
* Checkbox component for selecting boolean values
|
|
874
947
|
*
|
|
@@ -1728,6 +1801,164 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
1728
1801
|
* Basic building blocks
|
|
1729
1802
|
*/
|
|
1730
1803
|
|
|
1804
|
+
class ButtonToggleGroupComponent {
|
|
1805
|
+
configService = inject(StudioConfigService);
|
|
1806
|
+
toggleGroupDefaults = computed(() => this.configService.config().components?.buttonToggleGroup, ...(ngDevMode ? [{ debugName: "toggleGroupDefaults" }] : []));
|
|
1807
|
+
onChange = () => { };
|
|
1808
|
+
onTouched = () => { };
|
|
1809
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
1810
|
+
options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
1811
|
+
multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
|
|
1812
|
+
allowEmpty = input(true, ...(ngDevMode ? [{ debugName: "allowEmpty" }] : []));
|
|
1813
|
+
orientationInput = input(undefined, ...(ngDevMode ? [{ debugName: "orientationInput", alias: 'orientation' }] : [{ alias: 'orientation' }]));
|
|
1814
|
+
sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
|
|
1815
|
+
variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
|
|
1816
|
+
colorInput = input(undefined, ...(ngDevMode ? [{ debugName: "colorInput", alias: 'color' }] : [{ alias: 'color' }]));
|
|
1817
|
+
radiusInput = input(undefined, ...(ngDevMode ? [{ debugName: "radiusInput", alias: 'radius' }] : [{ alias: 'radius' }]));
|
|
1818
|
+
shadowInput = input(undefined, ...(ngDevMode ? [{ debugName: "shadowInput", alias: 'shadow' }] : [{ alias: 'shadow' }]));
|
|
1819
|
+
orientation = withConfigDefault(this.orientationInput, computed(() => this.toggleGroupDefaults()?.orientation), 'horizontal');
|
|
1820
|
+
size = withConfigDefault(this.sizeInput, computed(() => this.toggleGroupDefaults()?.size), 'md');
|
|
1821
|
+
variant = withConfigDefault(this.variantInput, computed(() => this.toggleGroupDefaults()?.variant), 'outline');
|
|
1822
|
+
color = withConfigDefault(this.colorInput, computed(() => this.toggleGroupDefaults()?.color), 'primary');
|
|
1823
|
+
radius = withConfigDefault(this.radiusInput, computed(() => this.toggleGroupDefaults()?.radius), 'sm');
|
|
1824
|
+
shadow = withConfigDefault(this.shadowInput, computed(() => this.toggleGroupDefaults()?.shadow), 'none');
|
|
1825
|
+
attached = input(true, ...(ngDevMode ? [{ debugName: "attached" }] : []));
|
|
1826
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
1827
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1828
|
+
spacing = input('sm', ...(ngDevMode ? [{ debugName: "spacing" }] : []));
|
|
1829
|
+
align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : []));
|
|
1830
|
+
showIcons = input(true, ...(ngDevMode ? [{ debugName: "showIcons" }] : []));
|
|
1831
|
+
iconPosition = input('left', ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
|
|
1832
|
+
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
1833
|
+
valueChange = output();
|
|
1834
|
+
hostClasses = computed(() => classNames('studio-button-toggle-group', this.disabled() && 'studio-button-toggle-group--disabled'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
1835
|
+
isSelected(optionValue) {
|
|
1836
|
+
const currentValue = this.value();
|
|
1837
|
+
if (this.multiple()) {
|
|
1838
|
+
return Array.isArray(currentValue) && currentValue.includes(optionValue);
|
|
1839
|
+
}
|
|
1840
|
+
return currentValue === optionValue;
|
|
1841
|
+
}
|
|
1842
|
+
handleToggle(optionValue) {
|
|
1843
|
+
if (this.disabled())
|
|
1844
|
+
return;
|
|
1845
|
+
let newValue;
|
|
1846
|
+
if (this.multiple()) {
|
|
1847
|
+
const currentArray = Array.isArray(this.value()) ? this.value() : [];
|
|
1848
|
+
const index = currentArray.indexOf(optionValue);
|
|
1849
|
+
if (index > -1) {
|
|
1850
|
+
if (!this.allowEmpty() && currentArray.length === 1) {
|
|
1851
|
+
return;
|
|
1852
|
+
}
|
|
1853
|
+
newValue = currentArray.filter(v => v !== optionValue);
|
|
1854
|
+
}
|
|
1855
|
+
else {
|
|
1856
|
+
newValue = [...currentArray, optionValue];
|
|
1857
|
+
}
|
|
1858
|
+
}
|
|
1859
|
+
else {
|
|
1860
|
+
const currentValue = this.value();
|
|
1861
|
+
if (currentValue === optionValue && !this.allowEmpty()) {
|
|
1862
|
+
return;
|
|
1863
|
+
}
|
|
1864
|
+
newValue = currentValue === optionValue ? (this.allowEmpty() ? '' : optionValue) : optionValue;
|
|
1865
|
+
}
|
|
1866
|
+
this.value.set(newValue);
|
|
1867
|
+
this.onChange(newValue);
|
|
1868
|
+
this.onTouched();
|
|
1869
|
+
this.valueChange.emit(newValue);
|
|
1870
|
+
}
|
|
1871
|
+
writeValue(val) {
|
|
1872
|
+
if (val !== undefined && val !== null) {
|
|
1873
|
+
this.value.set(val);
|
|
1874
|
+
}
|
|
1875
|
+
else {
|
|
1876
|
+
this.value.set(this.multiple() ? [] : '');
|
|
1877
|
+
}
|
|
1878
|
+
}
|
|
1879
|
+
registerOnChange(fn) {
|
|
1880
|
+
this.onChange = fn;
|
|
1881
|
+
}
|
|
1882
|
+
registerOnTouched(fn) {
|
|
1883
|
+
this.onTouched = fn;
|
|
1884
|
+
}
|
|
1885
|
+
setDisabledState(isDisabled) {
|
|
1886
|
+
// disabled handled via input signal
|
|
1887
|
+
}
|
|
1888
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ButtonToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1889
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: ButtonToggleGroupComponent, isStandalone: true, selector: "studio-button-toggle-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, orientationInput: { classPropertyName: "orientationInput", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variantInput: { classPropertyName: "variantInput", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, colorInput: { classPropertyName: "colorInput", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radiusInput: { classPropertyName: "radiusInput", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, shadowInput: { classPropertyName: "shadowInput", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, attached: { classPropertyName: "attached", publicName: "attached", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [
|
|
1890
|
+
{
|
|
1891
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1892
|
+
useExisting: forwardRef(() => ButtonToggleGroupComponent),
|
|
1893
|
+
multi: true
|
|
1894
|
+
}
|
|
1895
|
+
], ngImport: i0, template: `
|
|
1896
|
+
<studio-button-group
|
|
1897
|
+
[orientation]="orientation()"
|
|
1898
|
+
[attached]="attached()"
|
|
1899
|
+
[fullWidth]="fullWidth()"
|
|
1900
|
+
[spacing]="spacing()"
|
|
1901
|
+
[align]="align()"
|
|
1902
|
+
[ariaLabel]="ariaLabel()">
|
|
1903
|
+
@for (option of options(); track option.value) {
|
|
1904
|
+
<studio-button
|
|
1905
|
+
[variant]="isSelected(option.value) ? 'solid' : variant()"
|
|
1906
|
+
[size]="size()"
|
|
1907
|
+
[color]="isSelected(option.value) ? color() : 'secondary'"
|
|
1908
|
+
[radius]="radius()"
|
|
1909
|
+
[shadow]="shadow()"
|
|
1910
|
+
[disabled]="disabled() || option.disabled || false"
|
|
1911
|
+
[icon]="showIcons() ? option.icon : undefined"
|
|
1912
|
+
[iconPosition]="iconPosition()"
|
|
1913
|
+
[ariaLabel]="option.ariaLabel"
|
|
1914
|
+
(clicked)="handleToggle(option.value)">
|
|
1915
|
+
@if (iconPosition() !== 'only') {
|
|
1916
|
+
{{ option.label }}
|
|
1917
|
+
}
|
|
1918
|
+
</studio-button>
|
|
1919
|
+
}
|
|
1920
|
+
</studio-button-group>
|
|
1921
|
+
`, isInline: true, styles: [":host{display:inline-block}:host(.studio-button-toggle-group--disabled){opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "studio-button", inputs: ["variant", "size", "color", "radius", "shadow", "compact", "disabled", "loading", "loadingText", "fullWidth", "type", "icon", "iconPosition", "href", "target", "badge", "badgeColor", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: ButtonGroupComponent, selector: "studio-button-group", inputs: ["orientation", "size", "variant", "color", "radius", "attached", "fullWidth", "disabled", "spacing", "align", "ariaLabel", "role"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1922
|
+
}
|
|
1923
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ButtonToggleGroupComponent, decorators: [{
|
|
1924
|
+
type: Component,
|
|
1925
|
+
args: [{ selector: 'studio-button-toggle-group', standalone: true, imports: [ButtonComponent, ButtonGroupComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1926
|
+
{
|
|
1927
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1928
|
+
useExisting: forwardRef(() => ButtonToggleGroupComponent),
|
|
1929
|
+
multi: true
|
|
1930
|
+
}
|
|
1931
|
+
], host: {
|
|
1932
|
+
'[class]': 'hostClasses()'
|
|
1933
|
+
}, template: `
|
|
1934
|
+
<studio-button-group
|
|
1935
|
+
[orientation]="orientation()"
|
|
1936
|
+
[attached]="attached()"
|
|
1937
|
+
[fullWidth]="fullWidth()"
|
|
1938
|
+
[spacing]="spacing()"
|
|
1939
|
+
[align]="align()"
|
|
1940
|
+
[ariaLabel]="ariaLabel()">
|
|
1941
|
+
@for (option of options(); track option.value) {
|
|
1942
|
+
<studio-button
|
|
1943
|
+
[variant]="isSelected(option.value) ? 'solid' : variant()"
|
|
1944
|
+
[size]="size()"
|
|
1945
|
+
[color]="isSelected(option.value) ? color() : 'secondary'"
|
|
1946
|
+
[radius]="radius()"
|
|
1947
|
+
[shadow]="shadow()"
|
|
1948
|
+
[disabled]="disabled() || option.disabled || false"
|
|
1949
|
+
[icon]="showIcons() ? option.icon : undefined"
|
|
1950
|
+
[iconPosition]="iconPosition()"
|
|
1951
|
+
[ariaLabel]="option.ariaLabel"
|
|
1952
|
+
(clicked)="handleToggle(option.value)">
|
|
1953
|
+
@if (iconPosition() !== 'only') {
|
|
1954
|
+
{{ option.label }}
|
|
1955
|
+
}
|
|
1956
|
+
</studio-button>
|
|
1957
|
+
}
|
|
1958
|
+
</studio-button-group>
|
|
1959
|
+
`, styles: [":host{display:inline-block}:host(.studio-button-toggle-group--disabled){opacity:.6;pointer-events:none}\n"] }]
|
|
1960
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], orientationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], colorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], shadowInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], attached: [{ type: i0.Input, args: [{ isSignal: true, alias: "attached", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
1961
|
+
|
|
1731
1962
|
/**
|
|
1732
1963
|
* Theme toggle switch with sun/moon icons
|
|
1733
1964
|
*
|
|
@@ -1829,5 +2060,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
1829
2060
|
* Generated bundle index. Do not edit.
|
|
1830
2061
|
*/
|
|
1831
2062
|
|
|
1832
|
-
export { BadgeComponent, ButtonComponent, CheckboxComponent, IconComponent, InputComponent, STUDIO_CONFIG, StudioConfigService, SwitchComponent, TextareaComponent, ThemeSwitchComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
|
|
2063
|
+
export { BadgeComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, CheckboxComponent, IconComponent, InputComponent, STUDIO_CONFIG, StudioConfigService, SwitchComponent, TextareaComponent, ThemeSwitchComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
|
|
1833
2064
|
//# sourceMappingURL=eduboxpro-studio.mjs.map
|