orbiq-neural-ui-kit 1.1.24 → 1.1.26

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.
Files changed (4) hide show
  1. package/fesm2022/orbiq-neural-ui-kit.mjs +123 -44
  2. package/fesm2022/orbiq-neural-ui-kit.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/orbiq-neural-ui-kit.d.ts +11 -2
package/fesm2022/orbiq-neural-ui-kit.mjs CHANGED
@@ -10550,6 +10550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
10550
10550
 
10551
10551
  class NeuralDialogComponent {
10552
10552
  dialog;
10553
+ viewContainerRef;
10553
10554
  openModel = model(false, /* @ts-ignore */
10554
10555
  ...(ngDevMode ? [{ debugName: "openModel" }] : /* istanbul ignore next */ []));
10555
10556
  title = input(/* @ts-ignore */
@@ -10581,8 +10582,9 @@ class NeuralDialogComponent {
10581
10582
  dialogTemplate;
10582
10583
  dialogRef = null;
10583
10584
  internalActionsState = {}; // track loading states
10584
- constructor(dialog) {
10585
+ constructor(dialog, viewContainerRef) {
10585
10586
  this.dialog = dialog;
10587
+ this.viewContainerRef = viewContainerRef;
10586
10588
  effect(() => {
10587
10589
  const isOpen = this.openModel();
10588
10590
  if (isOpen && !this.dialogRef && this.dialogTemplate) {
@@ -10600,6 +10602,7 @@ class NeuralDialogComponent {
10600
10602
  backdropClass: 'bg-black-overlay-200', // To match Frappe UI
10601
10603
  panelClass: ['w-full', 'h-full', 'bg-transparent', 'shadow-none'],
10602
10604
  hasBackdrop: true,
10605
+ viewContainerRef: this.viewContainerRef,
10603
10606
  });
10604
10607
  this.dialogRef.closed.subscribe(() => {
10605
10608
  this.dialogRef = null;
@@ -10729,7 +10732,7 @@ class NeuralDialogComponent {
10729
10732
  this.internalActionsState[action.label] = false;
10730
10733
  }
10731
10734
  }
10732
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, deps: [{ token: i1$3.Dialog }], target: i0.ɵɵFactoryTarget.Component });
10735
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, deps: [{ token: i1$3.Dialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
10733
10736
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDialogComponent, isStandalone: true, selector: "neural-dialog", inputs: { openModel: { classPropertyName: "openModel", publicName: "openModel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, paddingTop: { classPropertyName: "paddingTop", publicName: "paddingTop", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, bare: { classPropertyName: "bare", publicName: "bare", isSignal: true, isRequired: false, transformFunction: null }, hasTitleSlot: { classPropertyName: "hasTitleSlot", publicName: "hasTitleSlot", isSignal: true, isRequired: false, transformFunction: null }, hasActionsSlot: { classPropertyName: "hasActionsSlot", publicName: "hasActionsSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDefaultSlot: { classPropertyName: "hasDefaultSlot", publicName: "hasDefaultSlot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openModel: "openModelChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: `
10734
10737
  <ng-template #dialogTemplate>
10735
10738
  <div
@@ -10942,7 +10945,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
10942
10945
  </ng-template>
10943
10946
  `
10944
10947
  }]
10945
- }], ctorParameters: () => [{ type: i1$3.Dialog }], propDecorators: { openModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openModel", required: false }] }, { type: i0.Output, args: ["openModelChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], paddingTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingTop", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], bare: [{ type: i0.Input, args: [{ isSignal: true, alias: "bare", required: false }] }], hasTitleSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTitleSlot", required: false }] }], hasActionsSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActionsSlot", required: false }] }], hasDefaultSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultSlot", required: false }] }], dialogTemplate: [{
10948
+ }], ctorParameters: () => [{ type: i1$3.Dialog }, { type: i0.ViewContainerRef }], propDecorators: { openModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openModel", required: false }] }, { type: i0.Output, args: ["openModelChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], paddingTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingTop", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], bare: [{ type: i0.Input, args: [{ isSignal: true, alias: "bare", required: false }] }], hasTitleSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTitleSlot", required: false }] }], hasActionsSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActionsSlot", required: false }] }], hasDefaultSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultSlot", required: false }] }], dialogTemplate: [{
10946
10949
  type: ViewChild,
10947
10950
  args: ['dialogTemplate']
10948
10951
  }] } });
@@ -13828,6 +13831,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
13828
13831
  }] } });
13829
13832
 
13830
13833
  class NeuralSettingsDialogComponent {
13834
+ dialog;
13835
+ viewContainerRef;
13831
13836
  open = model(false, /* @ts-ignore */
13832
13837
  ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
13833
13838
  size = input('4xl', /* @ts-ignore */
@@ -13836,58 +13841,132 @@ class NeuralSettingsDialogComponent {
13836
13841
  ...(ngDevMode ? [{ debugName: "hasTitleSlot" }] : /* istanbul ignore next */ []));
13837
13842
  hasDescriptionSlot = input(false, /* @ts-ignore */
13838
13843
  ...(ngDevMode ? [{ debugName: "hasDescriptionSlot" }] : /* istanbul ignore next */ []));
13839
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
13840
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSettingsDialogComponent, isStandalone: true, selector: "neural-settings-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasTitleSlot: { classPropertyName: "hasTitleSlot", publicName: "hasTitleSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDescriptionSlot: { classPropertyName: "hasDescriptionSlot", publicName: "hasDescriptionSlot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: `
13841
- <neural-dialog [(openModel)]="open" [size]="size()" [bare]="true">
13842
- <div class="flex h-[100dvh] min-h-0 w-screen flex-col overflow-hidden sm:h-[min(860px,calc(100vh-8rem))] sm:min-h-[560px] sm:w-auto sm:flex-row">
13843
- <h1 class="sr-only">
13844
- @if (hasTitleSlot()) {
13845
- <ng-content select="[title]"></ng-content>
13846
- } @else {
13847
- Settings
13848
- }
13849
- </h1>
13850
- <p class="sr-only">
13851
- @if (hasDescriptionSlot()) {
13852
- <ng-content select="[description]"></ng-content>
13853
- } @else {
13854
- Manage your settings across the tabs in this dialog.
13855
- }
13856
- </p>
13857
- <ng-content></ng-content>
13844
+ dialogTemplate;
13845
+ dialogRef = null;
13846
+ constructor(dialog, viewContainerRef) {
13847
+ this.dialog = dialog;
13848
+ this.viewContainerRef = viewContainerRef;
13849
+ effect(() => {
13850
+ const isOpen = this.open();
13851
+ if (isOpen && !this.dialogRef && this.dialogTemplate) {
13852
+ this.openDialog();
13853
+ }
13854
+ else if (!isOpen && this.dialogRef) {
13855
+ this.dialogRef.close();
13856
+ this.dialogRef = null;
13857
+ }
13858
+ });
13859
+ }
13860
+ openDialog() {
13861
+ this.dialogRef = this.dialog.open(this.dialogTemplate, {
13862
+ disableClose: false,
13863
+ backdropClass: 'bg-black-overlay-200',
13864
+ panelClass: ['w-full', 'h-full', 'bg-transparent', 'shadow-none'],
13865
+ hasBackdrop: true,
13866
+ viewContainerRef: this.viewContainerRef,
13867
+ });
13868
+ this.dialogRef.closed.subscribe(() => {
13869
+ this.dialogRef = null;
13870
+ if (this.open()) {
13871
+ this.open.set(false);
13872
+ }
13873
+ });
13874
+ }
13875
+ ngOnDestroy() {
13876
+ if (this.dialogRef) {
13877
+ this.dialogRef.close();
13878
+ }
13879
+ }
13880
+ sizeClass = computed(() => {
13881
+ const map = {
13882
+ xs: 'max-w-xs',
13883
+ sm: 'max-w-sm',
13884
+ md: 'max-w-md',
13885
+ lg: 'max-w-lg',
13886
+ xl: 'max-w-xl',
13887
+ '2xl': 'max-w-2xl',
13888
+ '3xl': 'max-w-3xl',
13889
+ '4xl': 'max-w-4xl',
13890
+ '5xl': 'max-w-5xl',
13891
+ '6xl': 'max-w-6xl',
13892
+ '7xl': 'max-w-7xl',
13893
+ };
13894
+ return map[this.size()] || 'max-w-4xl';
13895
+ }, /* @ts-ignore */
13896
+ ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
13897
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSettingsDialogComponent, deps: [{ token: i1$3.Dialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
13898
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSettingsDialogComponent, isStandalone: true, selector: "neural-settings-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasTitleSlot: { classPropertyName: "hasTitleSlot", publicName: "hasTitleSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDescriptionSlot: { classPropertyName: "hasDescriptionSlot", publicName: "hasDescriptionSlot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: `
13899
+ <ng-template #dialogTemplate>
13900
+ <div class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container">
13901
+ <div class="flex min-h-screen flex-col items-center justify-center px-4 py-4 text-center">
13902
+ <div
13903
+ class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
13904
+ [class]="sizeClass()"
13905
+ >
13906
+ <div class="flex h-[100dvh] min-h-0 w-screen flex-col overflow-hidden sm:h-[min(860px,calc(100vh-8rem))] sm:min-h-[560px] sm:w-auto sm:flex-row">
13907
+ <h1 class="sr-only">
13908
+ @if (hasTitleSlot()) {
13909
+ <ng-content select="[title]"></ng-content>
13910
+ } @else {
13911
+ Settings
13912
+ }
13913
+ </h1>
13914
+ <p class="sr-only">
13915
+ @if (hasDescriptionSlot()) {
13916
+ <ng-content select="[description]"></ng-content>
13917
+ } @else {
13918
+ Manage your settings across the tabs in this dialog.
13919
+ }
13920
+ </p>
13921
+ <ng-content></ng-content>
13922
+ </div>
13923
+ </div>
13924
+ </div>
13858
13925
  </div>
13859
- </neural-dialog>
13860
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }] });
13926
+ </ng-template>
13927
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }] });
13861
13928
  }
13862
13929
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSettingsDialogComponent, decorators: [{
13863
13930
  type: Component,
13864
13931
  args: [{
13865
13932
  selector: 'neural-settings-dialog',
13866
13933
  standalone: true,
13867
- imports: [CommonModule, NeuralDialogComponent],
13934
+ imports: [CommonModule, DialogModule],
13868
13935
  template: `
13869
- <neural-dialog [(openModel)]="open" [size]="size()" [bare]="true">
13870
- <div class="flex h-[100dvh] min-h-0 w-screen flex-col overflow-hidden sm:h-[min(860px,calc(100vh-8rem))] sm:min-h-[560px] sm:w-auto sm:flex-row">
13871
- <h1 class="sr-only">
13872
- @if (hasTitleSlot()) {
13873
- <ng-content select="[title]"></ng-content>
13874
- } @else {
13875
- Settings
13876
- }
13877
- </h1>
13878
- <p class="sr-only">
13879
- @if (hasDescriptionSlot()) {
13880
- <ng-content select="[description]"></ng-content>
13881
- } @else {
13882
- Manage your settings across the tabs in this dialog.
13883
- }
13884
- </p>
13885
- <ng-content></ng-content>
13936
+ <ng-template #dialogTemplate>
13937
+ <div class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container">
13938
+ <div class="flex min-h-screen flex-col items-center justify-center px-4 py-4 text-center">
13939
+ <div
13940
+ class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
13941
+ [class]="sizeClass()"
13942
+ >
13943
+ <div class="flex h-[100dvh] min-h-0 w-screen flex-col overflow-hidden sm:h-[min(860px,calc(100vh-8rem))] sm:min-h-[560px] sm:w-auto sm:flex-row">
13944
+ <h1 class="sr-only">
13945
+ @if (hasTitleSlot()) {
13946
+ <ng-content select="[title]"></ng-content>
13947
+ } @else {
13948
+ Settings
13949
+ }
13950
+ </h1>
13951
+ <p class="sr-only">
13952
+ @if (hasDescriptionSlot()) {
13953
+ <ng-content select="[description]"></ng-content>
13954
+ } @else {
13955
+ Manage your settings across the tabs in this dialog.
13956
+ }
13957
+ </p>
13958
+ <ng-content></ng-content>
13959
+ </div>
13960
+ </div>
13961
+ </div>
13886
13962
  </div>
13887
- </neural-dialog>
13963
+ </ng-template>
13888
13964
  `
13889
13965
  }]
13890
- }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasTitleSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTitleSlot", required: false }] }], hasDescriptionSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDescriptionSlot", required: false }] }] } });
13966
+ }], ctorParameters: () => [{ type: i1$3.Dialog }, { type: i0.ViewContainerRef }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasTitleSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTitleSlot", required: false }] }], hasDescriptionSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDescriptionSlot", required: false }] }], dialogTemplate: [{
13967
+ type: ViewChild,
13968
+ args: ['dialogTemplate']
13969
+ }] } });
13891
13970
  class NeuralSettingsSidebarComponent {
13892
13971
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSettingsSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
13893
13972
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: NeuralSettingsSidebarComponent, isStandalone: true, selector: "neural-settings-sidebar", ngImport: i0, template: `