gd-bs 6.6.64 → 6.6.66

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/dist/gd-bs.d.ts DELETED
@@ -1,3263 +0,0 @@
1
- // Generated by dts-bundle v0.7.3
2
-
3
- declare module 'gd-bs' {
4
- import * as Components from "gd-bs/components/components";
5
- var tippy: Function;
6
-
7
- export {
8
- Components, tippy
9
- }
10
- }
11
-
12
- declare module 'gd-bs/components/components' {
13
- export * from "gd-bs/components/accordion/types";
14
- export * from "gd-bs/components/alert/types";
15
- export * from "gd-bs/components/badge/types";
16
- export * from "gd-bs/components/breadcrumb/types";
17
- export * from "gd-bs/components/button/types";
18
- export * from "gd-bs/components/buttonGroup/types";
19
- export * from "gd-bs/components/card/types";
20
- export * from "gd-bs/components/cardGroup/types";
21
- export * from "gd-bs/components/carousel/types";
22
- export * from "gd-bs/components/checkboxGroup/types";
23
- export * from "gd-bs/components/collapse/types";
24
- export * from "gd-bs/components/dropdown/types";
25
- export * from "gd-bs/components/form/controlTypes";
26
- export * from "gd-bs/components/form/formTypes";
27
- export * from "gd-bs/components/inputGroup/types";
28
- export * from "gd-bs/components/jumbotron/types";
29
- export * from "gd-bs/components/listBox/types";
30
- export * from "gd-bs/components/listGroup/types";
31
- export * from "gd-bs/components/modal/types";
32
- export * from "gd-bs/components/nav/types";
33
- export * from "gd-bs/components/navbar/types";
34
- export * from "gd-bs/components/offcanvas/types";
35
- export * from "gd-bs/components/pagination/types";
36
- export * from "gd-bs/components/popover/types";
37
- export * from "gd-bs/components/progress/types";
38
- export * from "gd-bs/components/progressGroup/types";
39
- export * from "gd-bs/components/spinner/types";
40
- export * from "gd-bs/components/table/types";
41
- export * from "gd-bs/components/toast/types";
42
- export * from "gd-bs/components/toolbar/types";
43
- export * from "gd-bs/components/tooltip/types";
44
- export * from "gd-bs/components/tooltipGroup/types";
45
- }
46
-
47
- declare module 'gd-bs/components/accordion/types' {
48
-
49
- /**
50
- * ### Accordion
51
- *
52
- * ```ts
53
- * import { Components } from "gd-sprest-bs";
54
- *
55
- * // Create the accordion
56
- * let el = document.querySelector("#accordion");
57
- * let accordion = Components.Accordion({
58
- * autoCollapse: true,
59
- * el: el,
60
- * id: "demoAccordion",
61
- * items: [
62
- * {
63
- * header: "Item 1",
64
- * content: "This is the content for item 1.",
65
- * showFl: true
66
- * },
67
- * {
68
- * header: "Item 2",
69
- * content: "This is the content for item 2."
70
- * },
71
- * {
72
- * header: "Item 3",
73
- * content: "This is the content for item 3."
74
- * }
75
- * ]
76
- * });
77
- * ```
78
- */
79
- export const Accordion: (props: IAccordionProps, template?: string, itemTemplate?: string) => IAccordion;
80
-
81
- import { IBase, IBaseProps } from "gd-bs/components/types";
82
-
83
- /**
84
- * Accordion
85
- */
86
- export interface IAccordion extends IBase<IAccordionProps> { }
87
-
88
- /**
89
- * Accordion Item
90
- */
91
- export interface IAccordionItem<T = HTMLElement> {
92
- data?: any;
93
- className?: string;
94
- content?: string | T;
95
- header?: string;
96
- onClick?: (el?: HTMLElement, item?: IAccordionItem<T>) => void;
97
- onRender?: (el?: HTMLElement, item?: IAccordionItem<T>) => void;
98
- onRenderBody?: (el?: HTMLElement, item?: IAccordionItem<T>) => void;
99
- onRenderHeader?: (el?: HTMLElement, item?: IAccordionItem<T>) => void;
100
- showFl?: boolean;
101
- }
102
-
103
- /**
104
- * Accordion Properties
105
- */
106
- export interface IAccordionProps<T = HTMLElement> extends IBaseProps<IAccordion> {
107
- autoCollapse?: boolean;
108
- id?: string;
109
- items?: Array<IAccordionItem<T>>;
110
- }
111
- }
112
-
113
- declare module 'gd-bs/components/alert/types' {
114
-
115
- /**
116
- * ### Alert
117
- *
118
- * ```ts
119
- * import { Components } from "gd-sprest-bs";
120
- *
121
- * // Create the alert
122
- * let el = document.querySelector("#alert");
123
- * let alert = Components.Alert({
124
- * el: el,
125
- * header: "Demo",
126
- * content: "This is an alert.",
127
- * isDismissible: true,
128
- * type: Components.AlertTypes.Success
129
- * });
130
- * ```
131
- */
132
- export const Alert: (props: IAlertProps, template?: string) => IAlert;
133
-
134
- /**
135
- * Alert Types
136
- */
137
- export const AlertTypes: IAlertTypes;
138
-
139
- import { IBase, IBaseProps } from "gd-bs/components/types";
140
-
141
- /**
142
- * Alert
143
- */
144
- export interface IAlert extends IBase<IAlertProps> {
145
- /** Closes an alert by removing it from the DOM. */
146
- close: () => void;
147
-
148
- /** Updates the alert text. */
149
- setText: (alertText?: string) => void;
150
-
151
- /** Updates the alert type. */
152
- setType: (alertType: number) => void;
153
- }
154
-
155
- /**
156
- * Alert Properties
157
- */
158
- export interface IAlertProps<T = HTMLElement> extends IBaseProps<IAlert> {
159
- content?: string | T;
160
- data?: any;
161
- header?: string;
162
- isDismissible?: boolean;
163
- onClose?: (props?: IAlertProps) => void;
164
- type?: number;
165
- }
166
-
167
- /**
168
- * Alert Types
169
- */
170
- export type IAlertTypes = {
171
- Danger: number;
172
- Dark: number;
173
- Info: number;
174
- Light: number;
175
- Primary: number;
176
- Secondary: number;
177
- Success: number;
178
- Warning: number;
179
- }
180
- }
181
-
182
- declare module 'gd-bs/components/badge/types' {
183
-
184
- /**
185
- * ### Badge
186
- *
187
- * ```ts
188
- * import { Components } from "gd-sprest-bs";
189
- *
190
- * // Create the badge
191
- * let el = document.querySelector("#badge");
192
- * let badge = Components.Badge({
193
- * el: el,
194
- * content: "Badge",
195
- * isPill: true,
196
- * type: Components.BadgeTypes.Success
197
- * });
198
- * ```
199
- */
200
- export const Badge: (props: IBadgeProps, template?: string) => IBadge;
201
-
202
- /**
203
- * Badge Types
204
- */
205
- export const BadgeTypes: IBadgeTypes;
206
-
207
- import { IBase, IBaseProps } from 'gd-bs/components/types';
208
-
209
- /**
210
- * Badge
211
- */
212
- export interface IBadge extends IBase<IBadgeProps> {
213
- /** The element. */
214
- el: HTMLAnchorElement | HTMLSpanElement;
215
- }
216
-
217
- /**
218
- * Badge Properties
219
- */
220
- export interface IBadgeProps<T=Element> extends IBaseProps<IBadge> {
221
- content?: string | T;
222
- data?: any;
223
- href?: string;
224
- isPill?: boolean;
225
- onClick?: (badge?: IBadgeProps, ev?: Event) => void;
226
- type?: number;
227
- }
228
-
229
- /**
230
- * Badge Types
231
- */
232
- export type IBadgeTypes = {
233
- Danger: number;
234
- Dark: number;
235
- Info: number;
236
- Light: number;
237
- Primary: number;
238
- Secondary: number;
239
- Success: number;
240
- Warning: number;
241
- }
242
- }
243
-
244
- declare module 'gd-bs/components/breadcrumb/types' {
245
-
246
- /**
247
- * ### Breadcrumb
248
- *
249
- * ```ts
250
- * import { Components } from "gd-sprest-bs";
251
- *
252
- * // Create the breadcrumb
253
- * let el = document.querySelector("#breadcrumb");
254
- * let breadcrumb = Components.Breadcrumb({
255
- * el: el,
256
- * items: [
257
- * { text: "Root", href: "/" },
258
- * { text: "Web 1", href: "/web" },
259
- * { text: "Web 1-1", href: "/web/1", isActive: true }
260
- * ]
261
- * });
262
- * ```
263
- */
264
- export const Breadcrumb: (props: IBreadcrumbProps, template?: string) => IBreadcrumb;
265
-
266
- import { IBaseProps } from "gd-bs/components/types";
267
-
268
- /**
269
- * Breadcrumb
270
- */
271
- export interface IBreadcrumb {
272
- /** Adds a breadcrumb item. */
273
- add: (item: IBreadcrumbItem) => void;
274
-
275
- /** The element. */
276
- el: HTMLElement;
277
-
278
- /** Hides the breadcrumb. */
279
- hide: () => void;
280
-
281
- /** Removes the last breadcrumb item. */
282
- remove: () => void;
283
-
284
- /** Removes a breadcrumb item by it's name property. */
285
- removeByName: (name: string) => void;
286
-
287
- /** Sets the breadcrumb items. */
288
- setItems: (items: IBreadcrumbItem[]) => void;
289
-
290
- /** Shows the breadcrumb. */
291
- show: () => void;
292
- }
293
-
294
- /**
295
- * Breadcrumb Item
296
- */
297
- export interface IBreadcrumbItem {
298
- /** Custom class names. */
299
- className?: string;
300
-
301
- /** The breadcrumb link */
302
- href?: string;
303
-
304
- /** Internal flag set by the component */
305
- isActive?: boolean;
306
-
307
- /** A unique name of the */
308
- name?: string;
309
-
310
- /** Click event for the link */
311
- onClick?: (item?: IBreadcrumbItem, ev?: Event) => void;
312
-
313
- /** The link text */
314
- text?: string;
315
- }
316
-
317
- /**
318
- * Breadcrumb Properties
319
- */
320
- export interface IBreadcrumbProps extends IBaseProps {
321
- /** The breadcrumb items */
322
- items?: Array<IBreadcrumbItem>
323
-
324
- /** Click event for the link */
325
- onClick?: (item?: IBreadcrumbItem, ev?: Event) => void;
326
- }
327
- }
328
-
329
- declare module 'gd-bs/components/button/types' {
330
-
331
- /**
332
- * ### Button
333
- *
334
- * ```ts
335
- * import { Components } from "gd-sprest-bs";
336
- *
337
- * // Create the button
338
- * let el = document.querySelector("#btn");
339
- * let btn = Components.Button({
340
- * el: el,
341
- * type: Components.ButtonTypes.OutlineSuccess,
342
- * isLarge: true,
343
- * onClick: function(ev) {
344
- * alert("The button was clicked.");
345
- * }
346
- * });
347
- * ```
348
- */
349
- export const Button: (props: IButtonProps, template?: string) => IButton;
350
-
351
- /**
352
- * Button Types
353
- */
354
- export const ButtonTypes: IButtonTypes;
355
-
356
- import { IBaseProps } from "gd-bs/components/types";
357
- import { IBadgeProps } from "gd-bs/components/badge/types";
358
- import { ISpinnerProps } from "gd-bs/components/spinner/types";
359
-
360
- /**
361
- * Button
362
- */
363
- export interface IButton {
364
- /** The element. */
365
- el: HTMLAnchorElement | HTMLButtonElement;
366
-
367
- /** Disables the button. */
368
- disable: () => void;
369
-
370
- /** Enables the button. */
371
- enable: () => void;
372
-
373
- /** Hides the button. */
374
- hide: () => void;
375
-
376
- /** Updates the icon. */
377
- setIcon: (iconType: Function, iconSize: number, iconClassName?: string) => void;
378
-
379
- /** Updates the button text. */
380
- setText: (btnText?: string) => void;
381
-
382
- /** Updates the button type. */
383
- setType: (btnType: number) => void;
384
-
385
- /** Shows the button. */
386
- show: () => void;
387
-
388
- /** Toggles push state. Gives the button the appearance that it has been activated. */
389
- toggle: () => void;
390
- }
391
-
392
- /**
393
- * Button Properties
394
- */
395
- export interface IButtonProps extends IBaseProps<IButton> {
396
- badge?: IBadgeProps;
397
- controls?: string | Array<string>;
398
- data?: any;
399
- description?: string;
400
- dismiss?: string;
401
- href?: string;
402
- iconClassName?: string;
403
- iconSize?: number;
404
- iconType?: SVGImageElement | Function;
405
- id?: string;
406
- isBlock?: boolean;
407
- isDisabled?: boolean;
408
- isExpanded?: boolean;
409
- isLarge?: boolean;
410
- isLink?: boolean;
411
- isSmall?: boolean;
412
- label?: string;
413
- onClick?: (button?: IButtonProps, ev?: Event) => void;
414
- spinnerProps?: ISpinnerProps;
415
- tabIndex?: number;
416
- target?: string;
417
- text?: string;
418
- title?: string;
419
- toggle?: string;
420
- toggleObj?: any;
421
- trigger?: string;
422
- type?: number;
423
- }
424
-
425
- /**
426
- * Button Types
427
- */
428
- export type IButtonTypes = {
429
- Danger: number;
430
- Dark: number;
431
- Info: number;
432
- Light: number;
433
- Link: number;
434
- Primary: number;
435
- Secondary: number;
436
- Success: number;
437
- Warning: number;
438
- OutlineDanger: number;
439
- OutlineDark: number;
440
- OutlineInfo: number;
441
- OutlineLight: number;
442
- OutlineLink: number;
443
- OutlinePrimary: number;
444
- OutlineSecondary: number;
445
- OutlineSuccess: number;
446
- OutlineWarning: number;
447
- }
448
- }
449
-
450
- declare module 'gd-bs/components/buttonGroup/types' {
451
-
452
- /**
453
- * ### Button Group
454
- *
455
- * ```ts
456
- * import { Components } from "gd-sprest-bs";
457
- *
458
- * // Create the buttonGroup
459
- * let el = document.querySelector("#buttonGroup");
460
- * let buttonGroup = Components.ButtonGroup({
461
- * el: el,
462
- * buttonType: $REST.Components.ButtonTypes.Primary,
463
- * buttons: [
464
- * { text: "Left", onClick: function() { alert("Left button was clicked."); } },
465
- * { text: "Middle", onClick: function() { alert("Middle button was clicked."); } },
466
- * { text: "Right", onClick: function() { alert("Right button was clicked."); } }
467
- * ]
468
- * });
469
- * ```
470
- */
471
- export const ButtonGroup: (props: IButtonGroupProps, template?: string, btnTemplate?: string) => IButtonGroup;
472
-
473
- import { IBaseProps } from "gd-bs/components/types";
474
- import { IButton, IButtonProps } from "gd-bs/components/button/types";
475
-
476
- /**
477
- * Button Group
478
- */
479
- export interface IButtonGroup {
480
- /** The element. */
481
- el: HTMLElement;
482
-
483
- /** Adds a button to the group. */
484
- add: (props: IButtonProps, btnTemplate?: string) => void;
485
-
486
- /** The buttons. */
487
- buttons: Array<IButton>;
488
-
489
- /** Hides the button group. */
490
- hide: () => void;
491
-
492
- /** Shows the button group. */
493
- show: () => void;
494
- }
495
-
496
- /**
497
- * Button Group Properties
498
- */
499
- export interface IButtonGroupProps extends IBaseProps<IButtonGroup> {
500
- buttons?: Array<IButtonProps>;
501
- buttonType?: number;
502
- id?: string;
503
- isLarge?: boolean;
504
- isSmall?: boolean;
505
- isVertical?: boolean;
506
- label?: string;
507
- }
508
- }
509
-
510
- declare module 'gd-bs/components/card/types' {
511
-
512
- /**
513
- * ### Card
514
- *
515
- * ```ts
516
- * import { Components } from "gd-sprest-bs";
517
- *
518
- * // Create the card
519
- * let el = document.querySelector("#card");
520
- * let card = Components.Card({
521
- * el: el,
522
- * body: [
523
- * {
524
- * title: "Card Title",
525
- * text: "This is the card contents.",
526
- * actions: [
527
- * {
528
- * text: "Card Action",
529
- * buttonType: $REST.Components.ButtonTypes.Primary,
530
- * onClick: function(action, card) { alert(card.title + " was clicked."); }
531
- * }
532
- * ]
533
- * }
534
- * ]
535
- * });
536
- * ```
537
- */
538
- export const Card: (props: ICardProps, template?: string) => ICard;
539
-
540
- import { IBaseProps } from "gd-bs/components/types";
541
- import { INavProps } from "gd-bs/components/nav/types";
542
-
543
- /**
544
- * Card
545
- */
546
- export interface ICard {
547
- /** The element. */
548
- el: HTMLElement;
549
-
550
- /** Hides the card. */
551
- hide: () => void;
552
-
553
- /** Shows the card. */
554
- show: () => void;
555
- }
556
-
557
- /**
558
- * Card Action
559
- */
560
- export interface ICardAction {
561
- buttonType?: number;
562
- data?: any;
563
- onClick?: (action?: ICardAction, card?: ICardBody, ev?: Event) => void;
564
- href?: string;
565
- text?: string;
566
- }
567
-
568
- /**
569
- * Card Body
570
- */
571
- export interface ICardBody<T = Element> {
572
- actions?: Array<ICardAction>;
573
- className?: string;
574
- content?: string | T;
575
- data?: any;
576
- onClick?: (card?: ICardProps, ev?: Event) => void;
577
- onRender?: (el?: HTMLElement, card?: ICardBody) => void;
578
- onRenderTitle?: (el?: HTMLElement, card?: ICardBody) => void;
579
- subTitle?: string;
580
- text?: string;
581
- title?: string | T;
582
- }
583
-
584
- /**
585
- * Card Footer
586
- */
587
- export interface ICardFooter<T = Element> {
588
- className?: string;
589
- content?: string | T;
590
- data?: any;
591
- onRender?: (el?: HTMLElement, card?: ICardFooter) => void;
592
- }
593
-
594
- /**
595
- * Card Header
596
- */
597
- export interface ICardHeader<T = Element> {
598
- className?: string;
599
- content?: string | T;
600
- data?: any;
601
- onRender?: (el?: HTMLElement, card?: ICardHeader) => void;
602
- nav?: INavProps;
603
- }
604
-
605
- /**
606
- * Card Properties
607
- */
608
- export interface ICardProps<T = Element> extends IBaseProps<ICard> {
609
- body?: Array<ICardBody<T>>;
610
- footer?: ICardFooter<T>;
611
- header?: ICardHeader<T>;
612
- imgBottom?: {
613
- alt?: string;
614
- src?: string;
615
- }
616
- imgTop?: {
617
- alt?: string;
618
- src?: string;
619
- };
620
- onClick?: (card?: ICardBody, ev?: Event) => void;
621
- onRender?: (el?: HTMLElement, card?: ICardProps) => void;
622
- }
623
- }
624
-
625
- declare module 'gd-bs/components/cardGroup/types' {
626
-
627
- /**
628
- * ### Card Group
629
- *
630
- * ```ts
631
- * import { Components } from "gd-sprest-bs";
632
- *
633
- * // Create the cardGroup
634
- * let el = document.querySelector("#cardGroup");
635
- * let cardGroup = Components.CardGroup({
636
- * el: el,
637
- * cards: [
638
- * {
639
- * body: [
640
- * {
641
- * title: "Card 1",
642
- * subTitle: "SubTitle 1",
643
- * text: "This is the first card."
644
- * }
645
- * ]
646
- * },
647
- * {
648
- * body: [
649
- * {
650
- * title: "Card 2",
651
- * subTitle: "SubTitle 2",
652
- * text: "This is the second card."
653
- * }
654
- * ]
655
- * },
656
- * {
657
- * body: [
658
- * {
659
- * title: "Card 3",
660
- * subTitle: "SubTitle 3",
661
- * text: "This is the third card."
662
- * }
663
- * ]
664
- * }
665
- * ]
666
- * });
667
- * ```
668
- */
669
- export const CardGroup: (props: ICardGroupProps, template?: string, cardTemplate?: string) => ICardGroup;
670
-
671
- import { IBaseProps } from "gd-bs/components/types";
672
- import { ICardProps } from "gd-bs/components/card/types";
673
-
674
- /**
675
- * Card Group
676
- */
677
- export interface ICardGroup {
678
- /** The element. */
679
- el: HTMLElement;
680
-
681
- /** Hides the card group. */
682
- hide: () => void;
683
-
684
- /** Shows the card group. */
685
- show: () => void;
686
- }
687
-
688
- /**
689
- * Card Group Properties
690
- */
691
- export interface ICardGroupProps extends IBaseProps<ICardGroup> {
692
- cards?: Array<ICardProps>;
693
- colSize?: number | string;
694
- onCardRender?: (el?: HTMLElement, props?: ICardProps) => void;
695
- onColRender?: (el?: HTMLElement, props?: ICardProps) => void;
696
- onRender?: (el?: HTMLElement, props?: ICardGroupProps) => void;
697
- }
698
- }
699
-
700
- declare module 'gd-bs/components/carousel/types' {
701
-
702
- /**
703
- * ### Carousel
704
- *
705
- * ```ts
706
- * import { Components } from "gd-sprest-bs";
707
- *
708
- * // Create the carousel
709
- * let el = document.querySelector("#carousel");
710
- * let carousel = Components.Carousel({
711
- * el: el,
712
- * enableControls: true,
713
- * enableIndicators: true,
714
- * id: "carouselDemo",
715
- * items: [
716
- * {
717
- * captions: "<h5>First Slide</h5>",
718
- * imageUrl: "https://via.placeholder.com/400x200",
719
- * imageAlt: "First Slide",
720
- * isActive: true
721
- * },
722
- * {
723
- * captions: "<h5>Second Slide</h5>",
724
- * imageUrl: "https://via.placeholder.com/400x200",
725
- * imageAlt: "Second Slide"
726
- * },
727
- * {
728
- * captions: "<h5>Third Slide</h5>",
729
- * imageUrl: "https://via.placeholder.com/400x200",
730
- * imageAlt: "Third Slide"
731
- * }
732
- * ]
733
- * });
734
- * ```
735
- */
736
- export const Carousel: (props: ICarouselProps, template?: string, slideTemplate?: string) => ICarousel;
737
-
738
- import { IBaseProps } from "gd-bs/components/types";
739
-
740
- /**
741
- * Carousel
742
- */
743
- export interface ICarousel {
744
- /**
745
- * Cycles through the carousel items from left to right.
746
- */
747
- cycle: () => void;
748
-
749
- /** The element. */
750
- el: HTMLElement;
751
-
752
- /** Hides the carousel. */
753
- hide: () => void;
754
-
755
- /**
756
- * Cycles to the next item.
757
- */
758
- next: () => void;
759
-
760
- /**
761
- * Stops the carousel from cycling through items.
762
- */
763
- pause: () => void;
764
-
765
- /**
766
- * Cycles to the previous item.
767
- */
768
- previous: () => void;
769
-
770
- /** Enables/Disables the dark theme. */
771
- setTheme: (isDark: boolean) => void;
772
-
773
- /** Shows the carousel. */
774
- show: () => void;
775
-
776
- /** Unpauses the carousel. */
777
- unpause: () => void;
778
- }
779
-
780
- /**
781
- * Carousel Item
782
- */
783
- export interface ICarouselItem<T = HTMLElement> {
784
- captions?: string;
785
- className?: string;
786
- content?: string | T;
787
- imageAlt?: string;
788
- imageUrl?: string;
789
- isActive?: boolean;
790
- onRendered?: (el?: HTMLElement, props?: ICarouselItem) => void;
791
- }
792
-
793
- /**
794
- * Carousel Options
795
- */
796
- export interface ICarouselOptions {
797
- interval?: number;
798
- keyboard?: boolean;
799
- pause?: boolean;
800
- slide?: number;
801
- wrap?: boolean;
802
- }
803
-
804
- /**
805
- * Carousel Properties
806
- */
807
- export interface ICarouselProps<T = HTMLElement> extends IBaseProps<ICarousel> {
808
- enableControls?: boolean;
809
- enableCrossfade?: boolean;
810
- enableIndicators?: boolean;
811
- id?: string;
812
- isDark?: boolean;
813
- items?: Array<ICarouselItem<T>>;
814
- onRendered?: (el?: HTMLElement, props?: ICarouselProps) => void;
815
- onSlideRendered?: (el?: HTMLElement, props?: ICarouselItem) => void;
816
- options?: ICarouselOptions;
817
- }
818
- }
819
-
820
- declare module 'gd-bs/components/checkboxGroup/types' {
821
-
822
- /**
823
- * ### Checkbox Group
824
- *
825
- * ```ts
826
- * import { Components } from "gd-sprest-bs";
827
- *
828
- * // Create the buttonGroup
829
- * let el = document.querySelector("#cbGroup");
830
- * let cbGroup = Components.CheckboxGroup({
831
- * el: el,
832
- * multi: false,
833
- * type: Components.CheckboxGroupTypes.Switch,
834
- * items: [
835
- * { label: "Option 1" },
836
- * { label: "Option 2", isSelected: true },
837
- * { label: "Option 3" }
838
- * ]
839
- * });
840
- * ```
841
- */
842
- export const CheckboxGroup: (props: ICheckboxGroupProps, template?: string, cbTemplate?: string) => ICheckboxGroup;
843
-
844
- import { IBaseProps } from "gd-bs/components/types";
845
-
846
- /**
847
- * Checkbox Group Types
848
- */
849
- export const CheckboxGroupTypes: ICheckboxTypes;
850
-
851
- /**
852
- * Checkbox Group
853
- */
854
- export interface ICheckboxGroup {
855
- /** The checkbox element. */
856
- el: HTMLElement;
857
-
858
- /** Gets the values. */
859
- getValue: () => ICheckboxGroupItem | Array<ICheckboxGroupItem>;
860
-
861
- /** Hides the checkbox group. */
862
- hide: () => void;
863
-
864
- /** Sets the checkbox items. */
865
- setItems: (value: Array<ICheckboxGroupItem>) => void;
866
-
867
- /** Sets the checkbox value. */
868
- setValue: (value: string | Array<string>) => void;
869
-
870
- /** Shows the checkbox group. */
871
- show: () => void;
872
- }
873
-
874
- /**
875
- * Checkbox Group Item
876
- */
877
- export interface ICheckboxGroupItem {
878
- data?: any;
879
- isDisabled?: boolean;
880
- isSelected?: boolean;
881
- label?: string;
882
- name?: string;
883
- onChange?: (item: ICheckboxGroupItem, ev?: Event) => void;
884
- title?: string;
885
- type?: number;
886
- }
887
-
888
- /**
889
- * Checkbox Group Properties
890
- */
891
- export interface ICheckboxGroupProps extends IBaseProps<ICheckboxGroup> {
892
- colSize?: number;
893
- hideLabel?: boolean;
894
- isDisabled?: boolean;
895
- isInline?: boolean;
896
- isReadonly?: boolean;
897
- label?: string;
898
- items?: Array<ICheckboxGroupItem>;
899
- multi?: boolean;
900
- onRender?: (el?: HTMLElement, item?: ICheckboxGroupItem) => void;
901
- onChange?: (items: ICheckboxGroupItem | Array<ICheckboxGroupItem>, ev?: Event) => void;
902
- required?: boolean;
903
- title?: string;
904
- type?: number;
905
- value?: any;
906
- }
907
-
908
- /**
909
- * Checkbox Group Types
910
- */
911
- export type ICheckboxTypes = {
912
- Checkbox: number;
913
- Radio: number;
914
- Switch: number;
915
- }
916
- }
917
-
918
- declare module 'gd-bs/components/collapse/types' {
919
-
920
- /**
921
- * ### Collapse
922
- *
923
- * ```ts
924
- * import { Components } from "gd-sprest-bs";
925
- *
926
- * // Create the collapse
927
- * let el = document.querySelector("#collapse");
928
- * let collapse = Components.Collapse({
929
- * el: el,
930
- * id: "demoCollapse",
931
- * content: "This is the content to be collapsed.",
932
- * options: { toggle: true }
933
- * });
934
- *
935
- * // Create the button to toggle the collapse
936
- * let btn = Components.Button({
937
- * el: document.querySelector("#btnCollapse"),
938
- * toggleObj: collapse,
939
- * text: "Collapse Demo"
940
- * });
941
- * ```
942
- */
943
- export const Collapse: (props: ICollapseProps, template?: string) => ICollapse;
944
-
945
- import { IBaseProps } from "gd-bs/components/types";
946
-
947
- /**
948
- * Collapse
949
- */
950
- export interface ICollapse {
951
- /** The element. */
952
- el: HTMLElement;
953
-
954
- /** Hides a collapsible element. */
955
- hide: () => void;
956
-
957
- /** True if the collapse is visible. */
958
- isExpanded: boolean;
959
-
960
- /** Shows a collapsible element. */
961
- show: () => void;
962
-
963
- /** Toggles the collapsible element on invocation. */
964
- toggle: () => void;
965
- }
966
-
967
- /**
968
- * Collapse Options
969
- */
970
- export interface ICollapseOptions {
971
- toggle?: boolean;
972
- }
973
-
974
- /**
975
- * Collapse Properties
976
- */
977
- export interface ICollapseProps<T = HTMLElement> extends IBaseProps<ICollapse> {
978
- content?: string | T;
979
- data?: any;
980
- id?: string;
981
- isHorizontal?: boolean;
982
- isMulti?: boolean;
983
- onRender?: (el?: HTMLElement, props?: ICollapseProps) => void;
984
- options?: ICollapseOptions;
985
- }
986
- }
987
-
988
- declare module 'gd-bs/components/dropdown/types' {
989
-
990
- /**
991
- * ### Dropdown
992
- *
993
- * ```ts
994
- * import { Components } from "gd-sprest-bs";
995
- *
996
- * // Create the dropdown
997
- * let el = document.querySelector("#dropdown");
998
- * let dropdown = Components.Dropdown({
999
- * el: el,
1000
- * label: "Select a Choice",
1001
- * items: [
1002
- * { text: "Choice 1", value: "1" },
1003
- * { text: "Choice 2", value: "2" },
1004
- * { text: "Choice 3", value: "3" },
1005
- * { text: "Choice 4", value: "4" },
1006
- * { text: "Choice 5", value: "5" }
1007
- * ],
1008
- * onChange: (item, ev) => {
1009
- * console.log("The selected value is: " + item.text);
1010
- * }
1011
- * });
1012
- * ```
1013
- */
1014
- export const Dropdown: (props: IDropdownProps, template?: string) => IDropdown;
1015
-
1016
- import { IBaseProps } from "gd-bs/components/types";
1017
- import { IButtonTypes } from "gd-bs/components/button/types";
1018
- import { IPopover, IPopoverProps, IPopoverPlacements } from "gd-bs/components/popover/types";
1019
-
1020
- /**
1021
- * Dropdown Placements
1022
- */
1023
- export const DropdownPlacements: IPopoverPlacements;
1024
-
1025
- /**
1026
- * Dropdown Types
1027
- */
1028
- export const DropdownTypes: IButtonTypes;
1029
-
1030
- /**
1031
- * Dropdown
1032
- */
1033
- export interface IDropdown {
1034
- /** Disables the dropdown. */
1035
- disable: () => void;
1036
-
1037
- /** Enables the dropdown. */
1038
- enable: () => void;
1039
-
1040
- /** The element. */
1041
- el: HTMLElement;
1042
-
1043
- /** Gets the selected dropdown item(s). */
1044
- getValue: () => IDropdownItem | Array<IDropdownItem>;
1045
-
1046
- /** Hides the dropdown. */
1047
- hide: () => void;
1048
-
1049
- /** True if the dropdown is a multi-select. */
1050
- isMulti: boolean;
1051
-
1052
- /** The popover menu. */
1053
- popover: IPopover;
1054
-
1055
- /** Updates the dropdown items. */
1056
- setItems: (items: Array<IDropdownItem>) => void;
1057
-
1058
- /** Updates the label of the dropdown. */
1059
- setLabel: (value: string) => void;
1060
-
1061
- /** Enables/Disables the dark theme. */
1062
- setTheme: (isDark: boolean) => void;
1063
-
1064
- /** Updates the dropdown type. */
1065
- setType: (ddlType: number) => void;
1066
-
1067
- /** Sets the dropdown value. */
1068
- setValue: (value?: any | Array<any>) => void;
1069
-
1070
- /** Shows the dropdown. */
1071
- show: () => void;
1072
-
1073
- /** Toggles the dropdown menu of a given navbar or tabbed navigation. */
1074
- toggle: () => void;
1075
- }
1076
-
1077
- /**
1078
- * Dropdown Item
1079
- */
1080
- export interface IDropdownItem {
1081
- className?: string;
1082
- data?: any;
1083
- href?: string;
1084
- iconClassName?: string;
1085
- iconSize?: number;
1086
- iconType?: SVGImageElement | Function;
1087
- isDisabled?: boolean;
1088
- isDivider?: boolean;
1089
- isHeader?: boolean;
1090
- isSelected?: boolean;
1091
- onClick?: (item?: IDropdownItem, ev?: Event) => void;
1092
- onRender?: (el: HTMLElement, item?: IDropdownItem) => void;
1093
- target?: string;
1094
- text?: string;
1095
- title?: string;
1096
- toggle?: string;
1097
- value?: string;
1098
- }
1099
-
1100
- /**
1101
- * Dropdown Properties
1102
- */
1103
- export interface IDropdownProps extends IBaseProps<IDropdown> {
1104
- autoSelect?: boolean;
1105
- btnClassName?: string;
1106
- dropLeft?: boolean;
1107
- dropRight?: boolean;
1108
- dropUp?: boolean;
1109
- formFl?: boolean;
1110
- id?: string;
1111
- isCheckbox?: boolean;
1112
- isDark?: boolean;
1113
- isDatalist?: boolean;
1114
- isReadonly?: boolean;
1115
- isSplit?: boolean;
1116
- items?: Array<IDropdownItem>;
1117
- label?: string;
1118
- menuOnly?: boolean;
1119
- multi?: boolean;
1120
- navFl?: boolean;
1121
- onChange?: (item?: IDropdownItem | Array<IDropdownItem>, ev?: Event) => void;
1122
- onMenuRendering?: (props: IPopoverProps) => IPopoverProps;
1123
- placement?: number;
1124
- required?: boolean;
1125
- title?: string;
1126
- type?: number;
1127
- updateLabel?: boolean;
1128
- value?: any;
1129
- }
1130
- }
1131
-
1132
- declare module 'gd-bs/components/form/controlTypes' {
1133
-
1134
- /**
1135
- * ### Form Control
1136
- */
1137
- export const FormControl: (props: IFormControlProps) => IFormControl;
1138
-
1139
- import { IBaseProps } from "gd-bs/components/types";
1140
- import { ICheckboxGroup, ICheckboxGroupItem } from "gd-bs/components/checkboxGroup/types";
1141
- import { IDropdown, IDropdownItem } from "gd-bs/components/dropdown/types";
1142
- import { IInputGroup } from "gd-bs/components/inputGroup/types";
1143
- import { IListBox } from "gd-bs/components/listBox/types";
1144
- import { IPopoverProps } from "gd-bs/components/popover/types";
1145
-
1146
- /**
1147
- * Custom Controls
1148
- */
1149
- export const CustomControls: {
1150
- // Gets the event by type
1151
- getByType(key: number): (props?: IFormControlProps) => void;
1152
-
1153
- /** Registers a custom form control type. */
1154
- registerType: (key: number, onRender: (props?: IFormControlProps) => void) => void;
1155
- }
1156
-
1157
- /**
1158
- * Form Control Types
1159
- */
1160
- export const FormControlTypes: IFormControlTypes;
1161
-
1162
- /**
1163
- * Form Control
1164
- */
1165
- export interface IFormControl {
1166
- checkbox: ICheckboxGroup;
1167
- control: ICheckboxGroup | IDropdown | IInputGroup | IListBox;
1168
- dropdown: IDropdown;
1169
- el: HTMLElement;
1170
- getValue: () => any;
1171
- hide: () => void;
1172
- isLoaded: () => PromiseLike<void>;
1173
- isRendered: boolean;
1174
- isValid: boolean;
1175
- label?: HTMLElement;
1176
- props: IFormControlProps;
1177
- textbox: IInputGroup;
1178
- setLabel: (value: string) => void;
1179
- setControl: (control: any) => void;
1180
- setValue: (value: any) => void;
1181
- show: () => void;
1182
- updateValidation: (elControl: HTMLElement, validation: IFormControlValidationResult) => void;
1183
- }
1184
-
1185
- /**
1186
- * Form Control Properties
1187
- */
1188
- export interface IFormControlProps extends IBaseProps<IFormControl> {
1189
- controlClassName?: string;
1190
- data?: any;
1191
- description?: string;
1192
- errorMessage?: string;
1193
- id?: string;
1194
- isDisabled?: boolean;
1195
- isReadonly?: boolean;
1196
- isPlainText?: boolean;
1197
- label?: string;
1198
- loadingMessage?: string;
1199
- name?: string;
1200
- onControlRendering?: (control: IFormControlProps) => void | PromiseLike<IFormControlProps>;
1201
- onControlRendered?: (control: IFormControl) => void | PromiseLike<IFormControl>;
1202
- onGetValue?: (control: IFormControlProps) => any;
1203
- onValidate?: (control: IFormControlProps, value: IFormControlValidationResult) => boolean | IFormControlValidationResult;
1204
- required?: boolean;
1205
- title?: string;
1206
- type?: number;
1207
- validationType?: number;
1208
- value?: any;
1209
- }
1210
-
1211
- /**
1212
- * Form Control Properties - Checkbox
1213
- */
1214
- export interface IFormControlPropsCheckbox extends IFormControlProps {
1215
- colSize?: number;
1216
- el?: HTMLInputElement;
1217
- hideLabel?: boolean;
1218
- isInline?: boolean;
1219
- items?: Array<ICheckboxGroupItem>;
1220
- onChange?: (item: ICheckboxGroupItem, ev?: Event) => void;
1221
- onControlRendering?: (control: IFormControlPropsCheckbox) => void | PromiseLike<IFormControlPropsCheckbox>;
1222
- onGetValue?: (control: IFormControlPropsCheckbox) => any;
1223
- onValidate?: (control: IFormControlPropsCheckbox, value: IFormControlValidationResult) => boolean | IFormControlValidationResult;
1224
- }
1225
-
1226
- /**
1227
- * Form Control Properties - Dropdown
1228
- */
1229
- export interface IFormControlPropsDropdown extends IFormControlProps {
1230
- items?: Array<IDropdownItem>;
1231
- onChange?: (item: IDropdownItem, ev?: Event) => void;
1232
- onControlRendering?: (control: IFormControlPropsDropdown) => void | PromiseLike<IFormControlPropsDropdown>;
1233
- onGetValue?: (control: IFormControlPropsDropdown) => any;
1234
- onMenuRendering?: (props: IPopoverProps) => IPopoverProps;
1235
- onValidate?: (control: IFormControlPropsDropdown, value: IFormControlValidationResult) => boolean | IFormControlValidationResult;
1236
- }
1237
-
1238
- /**
1239
- * Form Control Properties - Dropdown Button
1240
- */
1241
- export interface IFormControlPropsDropdownButton extends IFormControlPropsDropdown {
1242
- placeholder?: string;
1243
- placement?: number;
1244
- }
1245
-
1246
- /**
1247
- * Form Control Properties - Dropdown Checkbox
1248
- */
1249
- export interface IFormControlPropsDropdownCheckbox extends IFormControlPropsDropdownButton { }
1250
-
1251
- /**
1252
- * Form Control Properties - List Box
1253
- */
1254
- export interface IFormControlPropsListBox extends IFormControlProps {
1255
- items?: Array<IDropdownItem>;
1256
- onChange?: (items: IDropdownItem, ev?: Event) => void;
1257
- onControlRendering?: (control: IFormControlPropsListBox) => void | PromiseLike<IFormControlPropsListBox>;
1258
- onGetValue?: (control: IFormControlPropsListBox) => any;
1259
- onValidate?: (control: IFormControlPropsListBox, value: IFormControlValidationResult) => boolean | IFormControlValidationResult;
1260
- placeholder?: string;
1261
- }
1262
-
1263
- /**
1264
- * Form Control Properties - Multiple Checkbox
1265
- */
1266
- export interface IFormControlPropsMultiCheckbox extends IFormControlProps {
1267
- colSize?: number;
1268
- el?: HTMLInputElement;
1269
- hideLabel?: boolean;
1270
- isInline?: boolean;
1271
- items?: Array<ICheckboxGroupItem>;
1272
- onChange?: (item: Array<ICheckboxGroupItem>, ev?: Event) => void;
1273
- onControlRendering?: (control: IFormControlPropsCheckbox) => void | PromiseLike<IFormControlPropsCheckbox>;
1274
- onGetValue?: (control: IFormControlPropsCheckbox) => any;
1275
- onValidate?: (control: IFormControlPropsCheckbox, value: IFormControlValidationResult) => boolean | IFormControlValidationResult;
1276
- renderRow?: boolean;
1277
- }
1278
-
1279
- /**
1280
- * Form Control Properties - Multiple Dropdown
1281
- */
1282
- export interface IFormControlPropsMultiDropdown extends IFormControlProps {
1283
- items?: Array<IDropdownItem>;
1284
- onChange?: (item: Array<IDropdownItem>, ev?: Event) => void;
1285
- onControlRendering?: (control: IFormControlPropsDropdown) => void | PromiseLike<IFormControlPropsDropdown>;
1286
- onGetValue?: (control: IFormControlPropsDropdown) => any;
1287
- onMenuRendering?: (props: IPopoverProps) => IPopoverProps;
1288
- onValidate?: (control: IFormControlPropsDropdown, value: IFormControlValidationResult) => boolean | IFormControlValidationResult;
1289
- }
1290
-
1291
- /**
1292
- * Form Control Properties - Multiple Dropdown Button
1293
- */
1294
- export interface IFormControlPropsMultiDropdownButton extends IFormControlPropsMultiDropdown {
1295
- placeholder?: string;
1296
- placement?: number;
1297
- }
1298
-
1299
- /**
1300
- * Form Control Properties - Multiple Dropdown Checkbox
1301
- */
1302
- export interface IFormControlPropsMultiDropdownCheckbox extends IFormControlPropsMultiDropdownButton { }
1303
-
1304
- /**
1305
- * Form Control Properties - Multiple List Box
1306
- */
1307
- export interface IFormControlPropsMultiListBox extends IFormControlProps {
1308
- items?: Array<IDropdownItem>;
1309
- onChange?: (items: Array<IDropdownItem>, ev?: Event) => void;
1310
- onControlRendering?: (control: IFormControlPropsListBox) => void | PromiseLike<IFormControlPropsListBox>;
1311
- onGetValue?: (control: IFormControlPropsListBox) => any;
1312
- onValidate?: (control: IFormControlPropsListBox, value: IFormControlValidationResult) => boolean | IFormControlValidationResult;
1313
- placeholder?: string;
1314
- }
1315
-
1316
- /**
1317
- * Form Control Properties - Multiple Switch
1318
- */
1319
- export interface IFormControlPropsMultiSwitch extends IFormControlPropsMultiCheckbox { }
1320
-
1321
- /**
1322
- * Form Control Properties - Number Field
1323
- */
1324
- export interface IFormControlPropsNumberField extends IFormControlPropsTextField {
1325
- max?: number;
1326
- min?: number;
1327
- onControlRendering?: (control: IFormControlPropsNumberField) => void | PromiseLike<IFormControlPropsNumberField>;
1328
- onGetValue?: (control: IFormControlPropsNumberField) => any;
1329
- onValidate?: (control: IFormControlPropsNumberField, value: IFormControlValidationResult) => boolean | IFormControlValidationResult;
1330
- step?: number;
1331
- }
1332
-
1333
- /**
1334
- * Form Control Properties - Range
1335
- */
1336
- export interface IFormControlPropsRange extends IFormControlPropsNumberField { }
1337
-
1338
- /**
1339
- * Form Control Properties - Switch
1340
- */
1341
- export interface IFormControlPropsSwitch extends IFormControlPropsCheckbox { }
1342
-
1343
- /**
1344
- * Form Control Properties - TextField
1345
- */
1346
- export interface IFormControlPropsTextField extends IFormControlProps {
1347
- appendedLabel?: string;
1348
- el?: HTMLInputElement;
1349
- onChange?: (value: string, ev?: Event) => void;
1350
- onControlRendering?: (control: IFormControlPropsTextField) => void | PromiseLike<IFormControlPropsTextField>;
1351
- onGetValue?: (control: IFormControlPropsTextField) => any;
1352
- onValidate?: (control: IFormControlPropsTextField, value: IFormControlValidationResult) => boolean | IFormControlValidationResult;
1353
- placeholder?: string;
1354
- prependedLabel?: string;
1355
- rows?: number;
1356
- }
1357
-
1358
- /**
1359
- * Form Control Types
1360
- */
1361
- export type IFormControlTypes = {
1362
- Checkbox: number;
1363
- ColorPicker: number;
1364
- Email: number;
1365
- Datalist: number;
1366
- Dropdown: number;
1367
- DropdownButton: number;
1368
- DropdownCheckbox: number;
1369
- File: number;
1370
- ListBox: number;
1371
- MultiCheckbox: number;
1372
- MultiDropdown: number;
1373
- MultiDropdownButton: number;
1374
- MultiDropdownCheckbox: number;
1375
- MultiListBox: number;
1376
- MultiRadio: number;
1377
- MultiSwitch: number;
1378
- Password: number;
1379
- Radio: number;
1380
- Range: number;
1381
- Readonly: number;
1382
- Switch: number;
1383
- TextArea: number;
1384
- TextField: number;
1385
- }
1386
-
1387
- /**
1388
- * Form Control Validation Result
1389
- */
1390
- export interface IFormControlValidationResult {
1391
- invalidMessage?: string;
1392
- isValid?: boolean;
1393
- validMessage?: string;
1394
- value?: any;
1395
- }
1396
- }
1397
-
1398
- declare module 'gd-bs/components/form/formTypes' {
1399
-
1400
- /**
1401
- * ### Form
1402
- *
1403
- * ```ts
1404
- * import { Components } from "gd-sprest-bs";
1405
- *
1406
- * // Create the form
1407
- * let el = document.querySelector("#myForm");
1408
- * let form = Components.Form({
1409
- * el: el,
1410
- * rows: [
1411
- * {
1412
- * control: {
1413
- * label: "First Name:",
1414
- * name: "FName",
1415
- * type: Components.FormControlTypes.TextField
1416
- * }
1417
- * },
1418
- * {
1419
- * control: {
1420
- * label: "Last Name:",
1421
- * name: "LName",
1422
- * type: Components.FormControlTypes.TextField
1423
- * }
1424
- * },
1425
- * {
1426
- * control: {
1427
- * label: "Choices:",
1428
- * name: "Choice",
1429
- * type: Components.FormControlTypes.Dropdown,
1430
- * items: [
1431
- * { text: "Choice 1", value: "1" },
1432
- * { text: "Choice 2", value: "2" },
1433
- * { text: "Choice 3", value: "3" },
1434
- * { text: "Choice 4", value: "4" },
1435
- * { text: "Choice 5", value: "5" }
1436
- * ]
1437
- * }
1438
- * }
1439
- * ],
1440
- * value: {
1441
- * FName: "Gunjan",
1442
- * LName: "Datta",
1443
- * Choice: "3"
1444
- * }
1445
- * });
1446
- * ```
1447
- */
1448
- export const Form: (props: IFormProps) => IForm;
1449
-
1450
- import { IBaseProps } from "gd-bs/components/types";
1451
- import { IFormControl, IFormControlProps } from "gd-bs/components/form/controlTypes";
1452
-
1453
- /**
1454
- * Form Validation Types
1455
- */
1456
- export const FormValidationTypes: IFormValidationTypes;
1457
-
1458
- /**
1459
- * Form
1460
- */
1461
- export interface IForm {
1462
- /** Appends controls to the form */
1463
- appendControls: (controls: Array<IFormControlProps>) => void;
1464
-
1465
- /** Appends rows to the form */
1466
- appendRows: (rows: Array<IFormRow>) => void;
1467
-
1468
- /** The form controls */
1469
- controls: Array<IFormControl>;
1470
-
1471
- /** The form element */
1472
- el: HTMLFormElement;
1473
-
1474
- /** Gets a control by its name */
1475
- getControl: (name: string) => IFormControl;
1476
-
1477
- /** Returns the form values */
1478
- getValues: () => { [key: string]: any };
1479
-
1480
- /** Hides the form. */
1481
- hide: () => void;
1482
-
1483
- /** Inserts a control into the form */
1484
- insertControl: (idx: number, control: IFormControlProps) => void;
1485
-
1486
- /** Validates the form */
1487
- isValid: () => boolean;
1488
-
1489
- /** Shows the form. */
1490
- show: () => void;
1491
- }
1492
-
1493
- /**
1494
- * Form Column
1495
- */
1496
- export interface IFormColumn {
1497
- className?: string;
1498
- control: IFormControlProps;
1499
- isAutoSized?: boolean;
1500
- size?: number;
1501
- }
1502
-
1503
- /**
1504
- * Form Properties
1505
- */
1506
- export interface IFormProps extends IBaseProps<IForm> {
1507
- controls?: Array<IFormControlProps>;
1508
- groupClassName?: string;
1509
- isFloating?: boolean;
1510
- rowClassName?: string;
1511
- rows?: Array<IFormRow>;
1512
- onControlRendering?: (control: IFormControlProps) => void | PromiseLike<IFormControlProps>;
1513
- onControlRendered?: (control: IFormControl) => void | PromiseLike<IFormControl>;
1514
- onRendered?: (controls: Array<IFormControl>) => void;
1515
- validationType?: number;
1516
- value?: any;
1517
- }
1518
-
1519
- /**
1520
- * Form Row
1521
- */
1522
- export interface IFormRow {
1523
- className?: string;
1524
- isAutoSized?: boolean;
1525
- isCentered?: boolean;
1526
- isDisabled?: boolean;
1527
- isReadOnly?: boolean;
1528
- columns?: Array<IFormColumn>;
1529
- }
1530
-
1531
- /**
1532
- * Form Validation Types
1533
- */
1534
- export type IFormValidationTypes = {
1535
- Default: number;
1536
- Tooltip: number;
1537
- }
1538
- }
1539
-
1540
- declare module 'gd-bs/components/inputGroup/types' {
1541
-
1542
- /**
1543
- * ### Input Group
1544
- *
1545
- * ```ts
1546
- * import { Components } from "gd-sprest-bs";
1547
- *
1548
- * // Create the inputGroup
1549
- * let el = document.querySelector("#inputGroup");
1550
- * let inputGroup = Components.InputGroup({
1551
- * el: el,
1552
- * label: "My Name:",
1553
- * value: "First Last"
1554
- * });
1555
- * ```
1556
- */
1557
- export const InputGroup: (props: IInputGroupProps, template?: string) => IInputGroup;
1558
-
1559
- /**
1560
- * Input Group Types
1561
- */
1562
- export const InputGroupTypes: IInputGroupTypes;
1563
-
1564
- import { IBaseProps } from "gd-bs/components/types";
1565
- import { IButtonProps } from "gd-bs/components/button/types";
1566
-
1567
- /** Input Group File Value */
1568
- export interface IInputGroupFileValue {
1569
- data: ArrayBuffer;
1570
- name: string;
1571
- }
1572
-
1573
- /**
1574
- * Input Group
1575
- */
1576
- export interface IInputGroup {
1577
- /** The input group element. */
1578
- el: HTMLElement;
1579
-
1580
- /** Reference to the textbox input/textarea element. */
1581
- elTextbox: HTMLInputElement | HTMLTextAreaElement;
1582
-
1583
- /** Method to get the file information. */
1584
- getFileInfo: () => IInputGroupFileValue;
1585
-
1586
- /** Method to get the value. */
1587
- getValue: () => string;
1588
-
1589
- /** Hides the input group. */
1590
- hide: () => void;
1591
-
1592
- /** Method to set the value. */
1593
- setValue: (value: string) => void;
1594
-
1595
- /** Shows the input group. */
1596
- show: () => void;
1597
- }
1598
-
1599
- /**
1600
- * Input Group Properties
1601
- */
1602
- export interface IInputGroupProps extends IBaseProps<IInputGroup> {
1603
- appendedButtons?: Array<IButtonProps>;
1604
- appendedLabel?: string;
1605
- formFl?: boolean;
1606
- id?: string;
1607
- isDisabled?: boolean;
1608
- isLarge?: boolean;
1609
- isReadonly?: boolean;
1610
- isSmall?: boolean;
1611
- label?: string;
1612
- max?: number;
1613
- min?: number;
1614
- onClear?: () => void;
1615
- onChange?: (value?: string, ev?: Event) => void;
1616
- placeholder?: string;
1617
- prependedButtons?: Array<IButtonProps>;
1618
- prependedLabel?: string;
1619
- required?: boolean;
1620
- rows?: number;
1621
- step?: number;
1622
- title?: string;
1623
- type?: number;
1624
- value?: string;
1625
- }
1626
-
1627
- /**
1628
- * Input Group Types
1629
- */
1630
- export type IInputGroupTypes = {
1631
- ColorPicker: number;
1632
- Email: number;
1633
- File: number;
1634
- Password: number;
1635
- Range: number;
1636
- Search: number;
1637
- TextArea: number;
1638
- TextField: number;
1639
- }
1640
- }
1641
-
1642
- declare module 'gd-bs/components/jumbotron/types' {
1643
-
1644
- /**
1645
- * ### Jumbotron
1646
- *
1647
- * ```ts
1648
- * import { Components } from "gd-sprest-bs";
1649
- *
1650
- * // Create the jumbotron
1651
- * let el = document.querySelector("#jumbotron");
1652
- * let jumbotron = Components.Jumbotron({
1653
- * el: el,
1654
- * title: "My Jumbotron",
1655
- * lead: "This is a jumbotron"
1656
- * });
1657
- * ```
1658
- */
1659
- export const Jumbotron: (props: IJumbotronProps, template?: string) => IJumbotron;
1660
- export const JumbotronSize: IJumbotronSize;
1661
- export const JumbotronTypes: IJumbotronTypes;
1662
-
1663
- import { IBaseProps } from "gd-bs/components/types";
1664
-
1665
- /**
1666
- * Jumbotron
1667
- */
1668
- export interface IJumbotron {
1669
- /** The element. */
1670
- el: HTMLElement;
1671
-
1672
- /** Hides the jumbotron. */
1673
- hide: () => void;
1674
-
1675
- /** Shows the jumbotron. */
1676
- show: () => void;
1677
- }
1678
-
1679
- /**
1680
- * Jumbotron Properties
1681
- */
1682
- export interface IJumbotronProps<T = Element> extends IBaseProps<IJumbotron> {
1683
- content?: string | T;
1684
- isFluid?: boolean;
1685
- lead?: string;
1686
- onRenderContent?: (el?: HTMLElement) => void;
1687
- size?: number;
1688
- title?: string;
1689
- type?: number;
1690
- }
1691
-
1692
- /**
1693
- * Jumbotron Size
1694
- */
1695
- export type IJumbotronSize = {
1696
- XSmall: number;
1697
- Small: number;
1698
- Medium: number;
1699
- Large: number;
1700
- XLarge: number;
1701
- }
1702
- /**
1703
- * Jumbotron Types
1704
- */
1705
- export type IJumbotronTypes = {
1706
- Danger: number;
1707
- Dark: number;
1708
- Info: number;
1709
- Light: number;
1710
- Primary: number;
1711
- Secondary: number;
1712
- Success: number;
1713
- Warning: number;
1714
- }
1715
- }
1716
-
1717
- declare module 'gd-bs/components/listBox/types' {
1718
-
1719
- /**
1720
- * List Box
1721
- *
1722
- * ```ts
1723
- * import { Components } from "gd-sprest-bs";
1724
- *
1725
- * // Create the list box
1726
- * let el = document.querySelector("#list-box");
1727
- * Components.Collapse({
1728
- * el: el,
1729
- * label: "Colors",
1730
- * placeholder: "Search Colors",
1731
- * items: [
1732
- * { text: "Red", value: "red" },
1733
- * { text: "Blue", value: "blue" },
1734
- * { text: "Green", value: "green" },
1735
- * { text: "Purple", value: "purple" },
1736
- * { text: "Brown", value: "brown" },
1737
- * { text: "Yellow", value: "yellow" },
1738
- * { text: "Orange", value: "orange" }
1739
- * ]
1740
- * });
1741
- * ```
1742
- */
1743
- export const ListBox: (props: IListBoxProps, template?: string) => IListBox;
1744
-
1745
- import { IBase, IBaseProps } from "gd-bs/components/types";
1746
- import { IDropdownItem } from "gd-bs/components/dropdown/types";
1747
-
1748
- /**
1749
- * List Box
1750
- */
1751
- export interface IListBox extends IBase<IListBoxProps> {
1752
- /** The element. */
1753
- el: HTMLElement;
1754
-
1755
- /** The selected listbox items. */
1756
- getValue: () => Array<IDropdownItem>;
1757
-
1758
- /** Sets the options */
1759
- setOptions: (items: Array<IDropdownItem>) => void;
1760
-
1761
- /** Sets the listbox value. */
1762
- setValue: (value?: string | Array<string> | Array<IDropdownItem>) => void;
1763
- }
1764
-
1765
- /**
1766
- * List Box Properties
1767
- */
1768
- export interface IListBoxProps extends IBaseProps<IListBox> {
1769
- label?: string;
1770
- id?: string;
1771
- isReadonly?: boolean;
1772
- items: Array<IDropdownItem>;
1773
- multi?: boolean;
1774
- onLoadData?: () => Array<IDropdownItem> | PromiseLike<Array<IDropdownItem>>;
1775
- onChange?: (items: IDropdownItem | Array<IDropdownItem>, ev?: Event) => void;
1776
- placeholder?: string;
1777
- required?: boolean;
1778
- value?: string | Array<string>;
1779
- }
1780
- }
1781
-
1782
- declare module 'gd-bs/components/listGroup/types' {
1783
-
1784
- /**
1785
- * ### List Group
1786
- *
1787
- * ```ts
1788
- * import { Components } from "gd-sprest-bs";
1789
- *
1790
- * // Create the listGroup
1791
- * let el = document.querySelector("#listGroup");
1792
- * let listGroup = Components.listGroup({
1793
- * el: el,
1794
- * colWidth: 4,
1795
- * isTabs: true,
1796
- * items: [
1797
- * { tabName: "Tab 1", content: "This is the content for tab 1.", isActive: true },
1798
- * { tabName: "Tab 2", content: "This is the content for tab 2.", badge: { content: "10", type: 4 } },
1799
- * { tabName: "Tab 3", content: "This is the content for tab 3." },
1800
- * { tabName: "Tab 4", content: "This is the content for tab 4." },
1801
- * { tabName: "Tab 5", content: "This is the content for tab 5." }
1802
- * ]
1803
- * });
1804
- * ```
1805
- */
1806
- export const ListGroup: (props: IListGroupProps, template?: string, itemTemplate?: string) => IListGroup;
1807
-
1808
- /**
1809
- * List Group Item Types
1810
- */
1811
- export const ListGroupItemTypes: IListGroupItemTypes;
1812
-
1813
- import { IBaseProps } from "gd-bs/components/types";
1814
- import { IBadgeProps } from "gd-bs/components/badge/types";
1815
-
1816
- /**
1817
- * List Group
1818
- */
1819
- export interface IListGroup {
1820
- /** The element. */
1821
- el: HTMLElement;
1822
-
1823
- /** Hides the list group. */
1824
- hide: () => void;
1825
-
1826
- /**
1827
- * Shows the list group, or specified tab content.
1828
- * @prop elId - The tab id.
1829
- */
1830
- show: (tabId?: string) => void;
1831
- }
1832
-
1833
- /**
1834
- * List Group Item
1835
- */
1836
- export interface IListGroupItem<T=Element> {
1837
- badge?: IBadgeProps;
1838
- className?: string;
1839
- content?: string | T;
1840
- data?: any;
1841
- href?: string;
1842
- isActive?: boolean;
1843
- isDisabled?: boolean;
1844
- onClick?: (el?: HTMLElement, item?: IListGroupItem) => void;
1845
- onRender?: (el?: HTMLElement, item?: IListGroupItem) => void;
1846
- onRenderTab?: (el?: HTMLElement, item?: IListGroupItem) => void;
1847
- tabName?: string;
1848
- type?: number;
1849
- }
1850
-
1851
- /**
1852
- * List Group Properties
1853
- */
1854
- export interface IListGroupProps<T=Element> extends IBaseProps<IListGroup> {
1855
- colWidth?: number;
1856
- fadeTabs?: boolean;
1857
- isFlush?: boolean;
1858
- isHorizontal?: boolean;
1859
- isNumbered?: boolean;
1860
- isTabs?: boolean;
1861
- items?: Array<IListGroupItem<T>>;
1862
- }
1863
-
1864
- /**
1865
- * List Group Item Types
1866
- */
1867
- export type IListGroupItemTypes = {
1868
- Danger: number;
1869
- Dark: number;
1870
- Info: number;
1871
- Light: number;
1872
- Primary: number;
1873
- Secondary: number;
1874
- Success: number;
1875
- Warning: number;
1876
- }
1877
- }
1878
-
1879
- declare module 'gd-bs/components/modal/types' {
1880
-
1881
- /**
1882
- * ### Modal
1883
- *
1884
- * ```ts
1885
- * import { Components } from "gd-sprest-bs";
1886
- *
1887
- * // Modal elements should be added to the body
1888
- * var elModal = document.querySelector("#modal-demo");
1889
- * if(elModal === null) {
1890
- * elModal = document.createElement("div");
1891
- * elModal.id = "modal-demo";
1892
- * document.body.appendChild(elModal);
1893
- * }
1894
- *
1895
- * // Create the modal
1896
- * let modal = Components.Modal({
1897
- * el: el,
1898
- * id: "modalDemo",
1899
- * title: "Modal Demo",
1900
- * type: Components.ModalTypes.Small,
1901
- * body: "This is the body of the modal."
1902
- * });
1903
- *
1904
- * // Create the button
1905
- * Components.Button({
1906
- * el: document.querySelector("#modalDemo"),
1907
- * text: "Show Modal",
1908
- * toggleObj: modal,
1909
- * type: Components.ButtonTypes.OutlinePrimary
1910
- * });
1911
- * ```
1912
- */
1913
- export const Modal: (props: IModalProps, template?: string) => IModal;
1914
-
1915
- /**
1916
- * Modal Types
1917
- */
1918
- export const ModalTypes: IModalTypes;
1919
-
1920
- import { IBaseProps } from "gd-bs/components/types";
1921
-
1922
- /**
1923
- * Modal
1924
- */
1925
- export interface IModal {
1926
- /** The element. */
1927
- el: HTMLElement;
1928
-
1929
- /** Manually hides a modal. */
1930
- hide: () => void;
1931
-
1932
- /** Returns true if the modal is visible. */
1933
- isVisible: boolean;
1934
-
1935
- /** Updates the auto close flag. */
1936
- setAutoClose: (value: boolean) => void;
1937
-
1938
- /** Updates the backdrop flag. */
1939
- setBackdrop: (value: boolean) => void;
1940
-
1941
- /** Updates the visibility of the close button. */
1942
- setCloseButtonVisibility: (showFl: boolean) => void;
1943
-
1944
- /** Updates the focus flag. */
1945
- setFocus: (value: boolean) => void;
1946
-
1947
- /** Updates the center option. */
1948
- setIsCentered: (value: boolean) => void;
1949
-
1950
- /** Updates the keyboard flag. */
1951
- setKeyboard: (value: boolean) => void;
1952
-
1953
- /** Updates the scrollable option. */
1954
- setScrollable: (value: boolean) => void;
1955
-
1956
- /** Updates the title. */
1957
- setTitle: (title: string) => void;
1958
-
1959
- /** Updates the type. */
1960
- setType: (modalType: number) => void;
1961
-
1962
- /** Manually opens a modal. */
1963
- show: () => void;
1964
-
1965
- /** Manually toggles a modal. */
1966
- toggle: () => void;
1967
- }
1968
-
1969
- /**
1970
- * Modal Options
1971
- */
1972
- export interface IModalOptions {
1973
- /** True to automatically close the modal when clicking outside of it. */
1974
- autoClose?: boolean;
1975
-
1976
- /** True to enable the backdrop when the modal is visible. */
1977
- backdrop?: boolean;
1978
-
1979
- /** Sets the centered option */
1980
- centered?: boolean;
1981
-
1982
- /** Puts the focus on the modal when initialized. */
1983
- focus?: boolean;
1984
-
1985
- /** Closes the modal when escape key is pressed. */
1986
- keyboard?: boolean;
1987
-
1988
- /** Makes the body scrollable */
1989
- scrollable?: boolean;
1990
-
1991
- /** True to toggle the modal on creation. */
1992
- visible?: boolean;
1993
- }
1994
-
1995
- /**
1996
- * Modal Properties
1997
- */
1998
- export interface IModalProps<T = HTMLElement> extends IBaseProps<IModal> {
1999
- body?: string | T;
2000
- disableFade?: boolean;
2001
- footer?: string | T;
2002
- hideCloseButton?: boolean;
2003
- id?: string;
2004
- onClose?: (el: HTMLDivElement) => void;
2005
- onRenderBody?: (el: HTMLDivElement) => void;
2006
- onRenderHeader?: (el: HTMLDivElement) => void;
2007
- onRenderFooter?: (el: HTMLDivElement) => void;
2008
- options?: IModalOptions;
2009
- title?: string;
2010
- type?: number;
2011
- }
2012
-
2013
- /**
2014
- * Checkbox Group Types
2015
- */
2016
- export type IModalTypes = {
2017
- Small: number;
2018
- Medium: number;
2019
- Large: number;
2020
- XLarge: number;
2021
- Full: number;
2022
- FullSmall: number;
2023
- FullMedium: number;
2024
- FullLarge: number;
2025
- FullXLarge: number;
2026
- }
2027
- }
2028
-
2029
- declare module 'gd-bs/components/nav/types' {
2030
-
2031
- /**
2032
- * ### Navigation
2033
- *
2034
- * ```ts
2035
- * import { Components } from "gd-sprest-bs";
2036
-
2037
- * // Create the navigation
2038
- * let el = document.querySelector("#navigation");
2039
- * let nav = Components.Nav({
2040
- * el: el,
2041
- * isJustified: true,
2042
- * isPills: true,
2043
- * isTabs: true,
2044
- * items: [
2045
- * { title: "Nav 1", tabContent: "This is the content for tab 1.", isActive: true },
2046
- * { title: "Nav 2", tabContent: "This is the content for tab 2." },
2047
- * { title: "Nav 3", tabContent: "This is the content for tab 3." },
2048
- * { title: "Nav 4", tabContent: "This is the content for tab 4." },
2049
- * { title: "Nav 5", onRenderTab: function(el) { el.innerHTML = "This is the content for tab 5."; } }
2050
- * ]
2051
- * });
2052
- * ```
2053
- */
2054
- export const Nav: (props: INavProps, template?: string, itemTemplate?: string) => INav;
2055
-
2056
- import { IBaseProps } from "gd-bs/components/types";
2057
-
2058
- /**
2059
- * Navigation
2060
- */
2061
- export interface INav {
2062
- /** The active tab. */
2063
- activeTab: INavLink;
2064
-
2065
- /** The element. */
2066
- el: HTMLUListElement;
2067
-
2068
- /** Hides the navigation. */
2069
- hide: () => void;
2070
-
2071
- /**
2072
- * Shows the navigation or selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden.
2073
- * @prop selector - The query selector.
2074
- */
2075
- show: (selector?: string) => void;
2076
-
2077
- /**
2078
- * Shows a tab by it's id or index.
2079
- */
2080
- showTab: (tabId?: string | number) => void;
2081
- }
2082
-
2083
- /**
2084
- * Navigation Properties
2085
- */
2086
- export interface INavProps<T = HTMLElement> extends IBaseProps<INav> {
2087
- data?: any;
2088
- enableFill?: boolean;
2089
- fadeTabs?: boolean;
2090
- id?: string;
2091
- items?: Array<INavLinkProps<T>>;
2092
- isJustified?: boolean;
2093
- isPills?: boolean;
2094
- isTabs?: boolean;
2095
- isUnderline?: boolean;
2096
- isVertical?: boolean;
2097
- onClick?: (newTab?: INavLink, prevTab?: INavLink) => void;
2098
- onLinkRendered?: (el?: HTMLElement, item?: INavLinkProps) => void;
2099
- onRendered?: (el?: HTMLElement) => void;
2100
- onTabRendered?: (el?: HTMLElement, item?: INavLinkProps) => void;
2101
- }
2102
-
2103
- /**
2104
- * Navigation Link
2105
- */
2106
- export interface INavLink {
2107
- elTab: HTMLAnchorElement;
2108
- elTabContent: HTMLDivElement;
2109
- isActive: boolean;
2110
- tabName: string;
2111
- toggle: (fadeTabs?: boolean) => void;
2112
- }
2113
-
2114
- /**
2115
- * Navigation Link Properties
2116
- */
2117
- export interface INavLinkProps<T = HTMLElement> extends IBaseProps<INavLink> {
2118
- isActive?: boolean;
2119
- isDisabled?: boolean;
2120
- className?: string;
2121
- data?: any;
2122
- href?: string;
2123
- onClick?: (item?: INavLinkProps, ev?: Event) => void;
2124
- onRender?: (el?: HTMLElement, item?: INavLinkProps) => void;
2125
- onRenderTab?: (el?: HTMLDivElement, item?: INavLinkProps) => void;
2126
- tabContent?: string | T;
2127
- title?: string;
2128
- }
2129
- }
2130
-
2131
- declare module 'gd-bs/components/navbar/types' {
2132
-
2133
- /**
2134
- * ### Navbar
2135
- *
2136
- * ```ts
2137
- * import { Components } from "gd-sprest-bs";
2138
- *
2139
- * // Create the navbar
2140
- * let el = document.querySelector("#navbar");
2141
- * let navbar = Components.Navbar({
2142
- * el: el,
2143
- * brand: "Navbar",
2144
- * searchBox: {
2145
- * onChange: (value) => {
2146
- * // Log the value
2147
- * console.log("The search value is: " + value);
2148
- * },
2149
- * onSearch: (value) => {
2150
- * // Log the value
2151
- * console.log("The search value is: " + value);
2152
- * }
2153
- * },
2154
- * items: [
2155
- * {
2156
- * text: "Home",
2157
- * isActive: true
2158
- * },
2159
- * {
2160
- * text: "Link"
2161
- * },
2162
- * {
2163
- * text: "Disabled Link",
2164
- * isDisabled: true
2165
- * },
2166
- * {
2167
- * text: "Dropdown Link",
2168
- * items: [
2169
- * { text: "Link 1" },
2170
- * { text: "Link 2" },
2171
- * { text: "Link 3" },
2172
- * { text: "Link 4" },
2173
- * { text: "Link 5" }
2174
- * ]
2175
- * }
2176
- * ]
2177
- * });
2178
- * ```
2179
- */
2180
- export const Navbar: (props: INavbarProps, template?: string, itemTemplate?: string) => INavbar;
2181
-
2182
- /**
2183
- * Navbar Types
2184
- */
2185
- export const NavbarTypes: INavbarTypes;
2186
-
2187
- import { IBaseProps } from "gd-bs/components/types";
2188
- import { IDropdownItem } from "gd-bs/components/dropdown/types";
2189
- import { IPopoverProps } from "gd-bs/components/popover/types";
2190
-
2191
- /**
2192
- * Navbar
2193
- */
2194
- export interface INavbar {
2195
- /** The element. */
2196
- el: HTMLBaseElement;
2197
-
2198
- /** Method to get the search box value. */
2199
- getSearchValue?: () => string;
2200
-
2201
- /** Hides the nav bar. */
2202
- hide: () => void;
2203
-
2204
- /** Updates the navbar type. */
2205
- setType: (navbarType: number) => void;
2206
-
2207
- /** Shows the nav bar. */
2208
- show: () => void;
2209
- }
2210
-
2211
- /**
2212
- * Navbar Item
2213
- */
2214
- export interface INavbarItem {
2215
- className?: string;
2216
- classNameItem?: string;
2217
- data?: any;
2218
- href?: string;
2219
- iconClassName?: string;
2220
- iconSize?: number;
2221
- iconType?: SVGImageElement | Function;
2222
- isActive?: boolean;
2223
- isButton?: boolean;
2224
- isDisabled?: boolean;
2225
- items?: Array<IDropdownItem>;
2226
- onClick?: (item?: INavbarItem, ev?: Event) => void;
2227
- onMenuRendering?: (props: IPopoverProps) => IPopoverProps;
2228
- onRender?: (el?: HTMLElement, item?: INavbarItem) => void;
2229
- target?: string;
2230
- text?: string;
2231
- toggle?: string;
2232
- toggleObj?: any;
2233
- }
2234
-
2235
- /**
2236
- * Navbar Properties
2237
- */
2238
- export interface INavbarProps<T = HTMLElement> extends IBaseProps<INavbar> {
2239
- brand?: string | T;
2240
- brandUrl?: string;
2241
- enableScrolling?: boolean;
2242
- enableSearch?: boolean;
2243
- id?: string;
2244
- items?: Array<INavbarItem>;
2245
- itemsEnd?: Array<INavbarItem>;
2246
- onClick?: (item?: INavbarItem, ev?: Event) => void;
2247
- onClickBrand?: (el?: HTMLElement, ev?: Event) => void;
2248
- onItemRendered?: (el?: HTMLElement, item?: INavbarItem) => void;
2249
- onRendered?: (el?: HTMLElement) => void;
2250
- searchBox?: INavbarSearchBox;
2251
- type?: number;
2252
- }
2253
-
2254
- /**
2255
- * Navbar Types
2256
- */
2257
- export type INavbarTypes = {
2258
- Dark: number;
2259
- Light: number;
2260
- Primary: number;
2261
- }
2262
-
2263
- /**
2264
- * Navbar Search Box
2265
- */
2266
- export interface INavbarSearchBox {
2267
- btnType?: number;
2268
- btnText?: string;
2269
- hideButton?: boolean;
2270
- onChange?: (value?: string, ev?: Event) => void;
2271
- onSearch?: (value?: string, ev?: Event) => void;
2272
- placeholder?: string;
2273
- value?: string;
2274
- }
2275
- }
2276
-
2277
- declare module 'gd-bs/components/offcanvas/types' {
2278
-
2279
- /**
2280
- * Offcanvas
2281
- *
2282
- * ```ts
2283
- * import { Components } from "gd-sprest-bs";
2284
- *
2285
- * // Offcanvas elements should be added to the body
2286
- * var elOffcanvas = document.querySelector("#offcanvas-demo");
2287
- * if(elOffcanvas === null) {
2288
- * elOffcanvas = document.createElement("div");
2289
- * elOffcanvas.id = "offcanvas-demo";
2290
- * document.body.appendChild(elOffcanvas);
2291
- * }
2292
- *
2293
- * // Create the offcanvas
2294
- * let el = document.querySelector("#offcanvasDemo");
2295
- * let offcanvas = Components.Offcanvas({
2296
- * el: el,
2297
- * id: "offcanvasDemo",
2298
- * title: "Offcanvas Demo",
2299
- * body: "This is the body of the offcanvas.",
2300
- * type: Components.OffcanvasTypes.End
2301
- * });
2302
- *
2303
- * // Create the button
2304
- * Components.Button({
2305
- * el: document.querySelector("#offcanvasDemo"),
2306
- * text: "Show Offcanvas",
2307
- * toggleObj: offcanvas
2308
- * });
2309
- * ```
2310
- */
2311
- export const Offcanvas: (props: IOffcanvasProps, template?: string) => IOffcanvas;
2312
-
2313
- /**
2314
- * Offcanvas Sizes
2315
- */
2316
- export const OffcanvasSize: IOffcanvasSize;
2317
-
2318
- /**
2319
- * Offcanvas Types
2320
- */
2321
- export const OffcanvasTypes: IOffcanvasTypes;
2322
-
2323
- import { IBaseProps } from "gd-bs/components/types";
2324
-
2325
- /**
2326
- * Offcanvas
2327
- */
2328
- export interface IOffcanvas {
2329
- /** The element. */
2330
- el: HTMLElement;
2331
-
2332
- /** Hides a collapsible element. */
2333
- hide: () => void;
2334
-
2335
- /** Returns true if the modal is visible. */
2336
- isVisible: boolean;
2337
-
2338
- /** Updates the auto close flag. */
2339
- setAutoClose: (value: boolean) => void;
2340
-
2341
- /** Updates the size. */
2342
- setSize: (canvasSize: number) => void;
2343
-
2344
- /** Updates the type. */
2345
- setType: (canvasType: number) => void;
2346
-
2347
- /** Shows a collapsible element. */
2348
- show: () => void;
2349
-
2350
- /** Toggles the collapsible element on invocation. */
2351
- toggle: () => void;
2352
- }
2353
-
2354
- /**
2355
- * Offcanvas Properties
2356
- */
2357
- export interface IOffcanvasProps<T = HTMLElement> extends IBaseProps<IOffcanvas> {
2358
- body?: string | T;
2359
- data?: any;
2360
- id?: string;
2361
- onClose?: (el: HTMLDivElement) => void;
2362
- onRenderBody?: (el?: HTMLDivElement, props?: IOffcanvasProps) => void;
2363
- onRenderHeader?: (el?: HTMLDivElement, props?: IOffcanvasProps) => void;
2364
- options?: IOffcanvasOptions;
2365
- size?: number;
2366
- title?: string | T;
2367
- type?: number;
2368
- }
2369
-
2370
- /**
2371
- * Offcanvas Options
2372
- */
2373
- export interface IOffcanvasOptions {
2374
- /** True to automatically close the offcanvas when clicking outside of it. */
2375
- autoClose?: boolean;
2376
-
2377
- /** True to enable the backdrop when the offcanvas is visible. */
2378
- backdrop?: boolean;
2379
-
2380
- /** Puts the focus on the offcanvas when initialized. */
2381
- focus?: boolean;
2382
-
2383
- /** Closes the offcanvas when escape key is pressed. */
2384
- keyboard?: boolean;
2385
-
2386
- /** True to enable scrolling of the background. */
2387
- scroll?: boolean;
2388
-
2389
- /** True to toggle the offcanvas on creation. */
2390
- visible?: boolean;
2391
- }
2392
-
2393
- /**
2394
- * Offcanvas Size
2395
- */
2396
- export type IOffcanvasSize = {
2397
- Small: number;
2398
- Small1: number;
2399
- Small2: number;
2400
- Small3: number;
2401
- Medium: number;
2402
- Medium1: number;
2403
- Medium2: number;
2404
- Medium3: number;
2405
- Large: number;
2406
- Large1: number;
2407
- Large2: number;
2408
- Large3: number;
2409
- XLarge: number;
2410
- XXLarge: number;
2411
- Full: number;
2412
- }
2413
-
2414
- /**
2415
- * Offcanvas Types
2416
- */
2417
- export type IOffcanvasTypes = {
2418
- Bottom: number;
2419
- End: number;
2420
- Start: number;
2421
- Top: number;
2422
- }
2423
- }
2424
-
2425
- declare module 'gd-bs/components/pagination/types' {
2426
-
2427
- /**
2428
- * ### Pagination
2429
- *
2430
- * ```ts
2431
- * import { Components } from "gd-sprest-bs";
2432
- *
2433
- * // Create the pagination
2434
- * let el = document.querySelector("#pagination");
2435
- * let pagination = Components.Pagination({
2436
- * el: el,
2437
- * numberOfPages: 5,
2438
- * onClick: (index, ev) => {
2439
- * // Log the index
2440
- * console.log("The page number selected is: " + index);
2441
- * }
2442
- * });
2443
- * ```
2444
- */
2445
- export const Pagination: (props: IPaginationProps, template?: string, itemTemplate?: string) => IPagination;
2446
-
2447
- import { IBaseProps } from "gd-bs/components/types";
2448
-
2449
- /**
2450
- * Pagination Alignment
2451
- */
2452
- export const PaginationAlignment: IPaginationAlignment;
2453
-
2454
- /**
2455
- * Pagination
2456
- */
2457
- export interface IPagination {
2458
- /** The element. */
2459
- el: HTMLBaseElement;
2460
-
2461
- /** Hides the pagination. */
2462
- hide: () => void;
2463
-
2464
- /** Shows the pagination. */
2465
- show: () => void;
2466
- }
2467
-
2468
- /**
2469
- * Pagination Properties
2470
- */
2471
- export interface IPaginationProps extends IBaseProps<IPagination> {
2472
- alignment?: number;
2473
- isLarge?: boolean;
2474
- isSmall?: boolean;
2475
- label?: string;
2476
- numberOfPages?: number;
2477
- onClick?: (pageNumber?: number, ev?: Event) => void;
2478
- }
2479
-
2480
- /**
2481
- * Pagination Alignment
2482
- */
2483
- export type IPaginationAlignment = {
2484
- Centered: number;
2485
- Left: number;
2486
- Right: number;
2487
- }
2488
- }
2489
-
2490
- declare module 'gd-bs/components/popover/types' {
2491
-
2492
- /**
2493
- * ### Popover
2494
- *
2495
- * ```ts
2496
- * import { Components } from "gd-sprest-bs";
2497
- *
2498
- * // Create the popover
2499
- * let el = document.querySelector("#popover");
2500
- * let popover = Components.Popover({
2501
- * el: el,
2502
- * className: "m-2",
2503
- * text: "My Popover",
2504
- * btnProps: {
2505
- * text: "Popover Demo",
2506
- * type: Components.ButtonTypes.OutlineDark
2507
- * },
2508
- * options: {
2509
- * content: elContent,
2510
- * trigger: "focus"
2511
- * }
2512
- * });
2513
- * ```
2514
- */
2515
- export const Popover: (props: IPopoverProps, template?: string) => IPopover;
2516
-
2517
- /**
2518
- * Popover Placements
2519
- */
2520
- export const PopoverPlacements: IPopoverPlacements;
2521
-
2522
- /**
2523
- * Popover Types
2524
- */
2525
- export const PopoverTypes: IPopoverTypes;
2526
-
2527
- import { IBaseProps, ITippyProps } from "gd-bs/components/types";
2528
- import { IButtonProps } from "gd-bs/components/button/types";
2529
-
2530
- /**
2531
- * Popover
2532
- */
2533
- export interface IPopover {
2534
- /** The element. */
2535
- el: HTMLElement;
2536
-
2537
- /** The tippy instance. */
2538
- tippy: any;
2539
-
2540
- /** Enables the popover. */
2541
- enable: () => void;
2542
-
2543
- /** Hides an element’s popover. */
2544
- hide: () => void;
2545
-
2546
- /** Toggles an element's popover. */
2547
- toggle: () => void;
2548
-
2549
- /** Sets the body element of the popover. */
2550
- setBody: (content: string | Element) => void;
2551
-
2552
- /** Sets the tippy content. */
2553
- setContent: (content: string | Element) => void;
2554
-
2555
- /** Sets the header element of the popover. */
2556
- setHeader: (content: string | Element) => void;
2557
-
2558
- /** Reveals an element’s popover. */
2559
- show: () => void;
2560
- }
2561
-
2562
- /**
2563
- * Popover Properties
2564
- */
2565
- export interface IPopoverProps extends IBaseProps<IPopover> {
2566
- btnProps?: IButtonProps;
2567
- classNameBody?: string;
2568
- classNameHeader?: string;
2569
- isDismissible?: boolean;
2570
- options?: ITippyProps;
2571
- placement?: number;
2572
- target?: HTMLElement,
2573
- title?: string;
2574
- type?: number;
2575
- }
2576
-
2577
- /**
2578
- * Popover Types
2579
- */
2580
- export type IPopoverTypes = {
2581
- Danger: number;
2582
- Dark: number;
2583
- Info: number;
2584
- Light: number;
2585
- LightBorder: number;
2586
- Material: number;
2587
- Primary: number;
2588
- Secondary: number;
2589
- Success: number;
2590
- Translucent: number;
2591
- Warning: number;
2592
- }
2593
-
2594
- /**
2595
- * Popover Placements
2596
- */
2597
- export type IPopoverPlacements = {
2598
- Auto: number;
2599
- AutoStart: number;
2600
- AutoEnd: number;
2601
- Bottom: number;
2602
- BottomStart: number;
2603
- BottomEnd: number;
2604
- Left: number;
2605
- LeftStart: number;
2606
- LeftEnd: number;
2607
- Right: number;
2608
- RightStart: number;
2609
- RightEnd: number;
2610
- Top: number;
2611
- TopStart: number;
2612
- TopEnd: number;
2613
- }
2614
- }
2615
-
2616
- declare module 'gd-bs/components/progress/types' {
2617
-
2618
- /**
2619
- * ### Progress
2620
- *
2621
- * ```ts
2622
- * import { Components } from "gd-sprest-bs";
2623
- *
2624
- * // Create the progress
2625
- * let el = document.querySelector("#progress");
2626
- * let progress = Components.Progress({
2627
- * el: el,
2628
- * size: 25,
2629
- * label: "25%"
2630
- * });
2631
- * ```
2632
- */
2633
- export const Progress: (props: IProgressProps, template?: string) => IProgress;
2634
-
2635
- import { IBaseProps } from "gd-bs/components/types";
2636
-
2637
- /**
2638
- * Progress
2639
- */
2640
- export interface IProgress {
2641
- /** The element. */
2642
- el: HTMLElement;
2643
-
2644
- /** Hides the progress. */
2645
- hide: () => void;
2646
-
2647
- /** The progress bar element */
2648
- progressBar: HTMLDivElement;
2649
-
2650
- /** Shows the progress. */
2651
- show: () => void;
2652
- }
2653
-
2654
- /**
2655
- * Progress Properties
2656
- */
2657
- export interface IProgressProps extends IBaseProps<IProgress> {
2658
- isAnimated?: boolean;
2659
- isStriped?: boolean;
2660
- label?: string;
2661
- max?: number;
2662
- min?: number;
2663
- size?: number;
2664
- type?: number;
2665
- }
2666
- }
2667
-
2668
- declare module 'gd-bs/components/progressGroup/types' {
2669
-
2670
- /**
2671
- * ### Progress Group
2672
- *
2673
- * ```ts
2674
- * import { Components } from "gd-sprest-bs";
2675
- *
2676
- * // Create the progress group
2677
- * let el = document.querySelector("#progressGroup");
2678
- * let progressGroup = Components.ProgressGroup({
2679
- * el: el,
2680
- * progressbars: [
2681
- * {
2682
- * size: 25,
2683
- * isStriped: true,
2684
- * label: "25%"
2685
- * },
2686
- * {
2687
- * size: 50,
2688
- * isAnimated: true,
2689
- * isStriped: true,
2690
- * label: "50%"
2691
- * }
2692
- * ]
2693
- * });
2694
- * ```
2695
- */
2696
- export const ProgressGroup: (props: IProgressGroupProps, template?: string, progressTemplate?: string) => IProgressGroup;
2697
-
2698
- import { IBaseProps } from "gd-bs/components/types";
2699
- import { IProgressProps } from "gd-bs/components/progress/types";
2700
-
2701
- /**
2702
- * Progress Group
2703
- */
2704
- export interface IProgressGroup {
2705
- /** The element. */
2706
- el: HTMLElement;
2707
-
2708
- /** Hides the progress group. */
2709
- hide: () => void;
2710
-
2711
- /** Shows the progress group. */
2712
- show: () => void;
2713
- }
2714
-
2715
- /**
2716
- * Progress Group Properties
2717
- */
2718
- export interface IProgressGroupProps extends IBaseProps<IProgressGroup> {
2719
- isMultiple?: boolean;
2720
- progressbars?: Array<IProgressProps>;
2721
- }
2722
- }
2723
-
2724
- declare module 'gd-bs/components/spinner/types' {
2725
-
2726
- /**
2727
- * ### Spinner
2728
- *
2729
- * ```ts
2730
- * import { Components } from "gd-sprest-bs";
2731
- *
2732
- * // Create a spinner
2733
- * let el = document.querySelector("#spinner");
2734
- * Components.Spinner({
2735
- * el,
2736
- * text: "Loading...",
2737
- * type: Components.SpinnerTypes.Danger
2738
- * });
2739
- * ```
2740
- */
2741
- export const Spinner: (props: ISpinnerProps, template?: string) => ISpinner;
2742
-
2743
- /**
2744
- * Spinner Types
2745
- */
2746
- export const SpinnerTypes: ISpinnerTypes;
2747
-
2748
- import { IBaseProps } from "gd-bs/components/types";
2749
-
2750
- /**
2751
- * Spinner
2752
- */
2753
- export interface ISpinner {
2754
- /** The element. */
2755
- el: HTMLElement;
2756
-
2757
- /** Hides the spinner. */
2758
- hide: () => void;
2759
-
2760
- /** Shows the spinner. */
2761
- show: () => void;
2762
- }
2763
-
2764
- /**
2765
- * Spinner Properties
2766
- */
2767
- export interface ISpinnerProps extends IBaseProps<ISpinner> {
2768
- isGrowing?: boolean;
2769
- isSmall?: boolean;
2770
- text?: string;
2771
- type?: number;
2772
- }
2773
-
2774
- /**
2775
- * Spinner Types
2776
- */
2777
- export type ISpinnerTypes = {
2778
- Danger: number;
2779
- Dark: number;
2780
- Info: number;
2781
- Light: number;
2782
- Primary: number;
2783
- Secondary: number;
2784
- Success: number;
2785
- Warning: number;
2786
- }
2787
- }
2788
-
2789
- declare module 'gd-bs/components/table/types' {
2790
-
2791
- /**
2792
- * ### Table
2793
- *
2794
- * ```ts
2795
- * import { Components } from "gd-sprest-bs";
2796
- *
2797
- * // Create the table
2798
- * let el = document.querySelector("#table");
2799
- * let table = Components.Table({
2800
- * el: el,
2801
- * className: "table-sm is-striped",
2802
- * columns: [
2803
- * { name: "a0", title: "Actions", isHidden: true },
2804
- * { name: "a1", title: "Col 1" },
2805
- * { name: "a2", title: "Col 2" },
2806
- * { name: "a3", title: "Col 3" }
2807
- * ],
2808
- * rows: [
2809
- * { a0: "1", a1: "1.1", a2: "1.2", a3: "1.3" },
2810
- * { a0: "2", a1: "2.1", a2: "2.2", a3: "2.3" },
2811
- * { a0: "3", a1: "3.1", a2: "3.2", a3: "3.3" },
2812
- * { a0: "4", a1: "4.1", a2: "4.2", a3: "4.3" },
2813
- * { a0: "5", a1: "5.1", a2: "5.2", a3: "5.3" },
2814
- * { a0: "6", a1: "6.1", a2: "6.2", a3: "6.3" },
2815
- * { a0: "7", a1: "7.1", a2: "7.2", a3: "7.3" },
2816
- * { a0: "8", a1: "8.1", a2: "8.2", a3: "8.3" },
2817
- * { a0: "9", a1: "9.1", a2: "9.2", a3: "9.3" }
2818
- * ]
2819
- * });
2820
- * ```
2821
- */
2822
- export const Table: (props: ITableProps, template?: string) => ITable
2823
-
2824
- import { IBaseProps } from "gd-bs/components/types";
2825
-
2826
- /**
2827
- * Table
2828
- */
2829
- export interface ITable {
2830
- addRows: (rows: Array<any>) => void;
2831
-
2832
- el: HTMLTableElement;
2833
-
2834
- /** Hides the table. */
2835
- hide: () => void;
2836
-
2837
- /** Shows the table. */
2838
- show: () => void;
2839
- }
2840
-
2841
- /**
2842
- * Table Properties
2843
- */
2844
- export interface ITableProps extends IBaseProps<ITable> {
2845
- columns?: Array<ITableColumn>;
2846
- onClickCell?: (el: HTMLTableDataCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
2847
- onClickHeader?: (el: HTMLTableHeaderCellElement, column?: ITableColumn) => void;
2848
- onRenderCell?: (el?: HTMLTableDataCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
2849
- onRenderHeaderCell?: (el?: HTMLTableDataCellElement, column?: ITableColumn) => void;
2850
- onRenderHeaderRow?: (el?: HTMLTableRowElement) => void;
2851
- onRenderRow?: (el?: HTMLTableRowElement, data?: any, rowIdx?: number) => void;
2852
- rows?: Array<any>;
2853
- }
2854
-
2855
- /**
2856
- * Table Column
2857
- */
2858
- export interface ITableColumn {
2859
- className?: string;
2860
- data?: any;
2861
- isHidden?: boolean;
2862
- name: string;
2863
- onClickCell?: (el: HTMLTableDataCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
2864
- onClickHeader?: (el: HTMLTableHeaderCellElement, column?: ITableColumn) => void;
2865
- onRenderCell?: (el: HTMLTableDataCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
2866
- onRenderHeader?: (el?: HTMLTableDataCellElement, column?: ITableColumn) => void;
2867
- scope?: string;
2868
- title?: string;
2869
- }
2870
- }
2871
-
2872
- declare module 'gd-bs/components/toast/types' {
2873
-
2874
- /**
2875
- * ### Toast
2876
- *
2877
- * ```ts
2878
- * import { Components } from "gd-sprest-bs";
2879
- *
2880
- * // Create a toast
2881
- * let el = document.querySelector("#toast");
2882
- * Components.Toast({
2883
- * el,
2884
- * headerText: "Header",
2885
- * body: "This is the body of the toast.",
2886
- * mutedText: "2 seconds ago",
2887
- * options: { autohide: false }
2888
- * });
2889
- * ```
2890
- */
2891
- export const Toast: (props: IToastProps, template?: string) => IToast;
2892
-
2893
- import { IBaseProps } from "gd-bs/components/types";
2894
-
2895
- /**
2896
- * Toast
2897
- */
2898
- export interface IToast {
2899
- /** The component element. */
2900
- el: HTMLElement;
2901
-
2902
- /** Hides the toast. */
2903
- hide: () => void;
2904
-
2905
- /** Shows the toast. */
2906
- show: () => void;
2907
- }
2908
-
2909
- /**
2910
- * Toast Properties
2911
- */
2912
- export interface IToastProps<T = HTMLElement> extends IBaseProps<IToast> {
2913
- body?: string | T;
2914
- data?: any;
2915
- headerImgClass?: string;
2916
- headerImgSrc?: string;
2917
- headerText?: string;
2918
- mutedText?: string;
2919
- options?: IToastOptions;
2920
- onClick?: (el?: HTMLElement, data?: any) => void;
2921
- onRenderBody?: (el?: HTMLElement, data?: any) => void;
2922
- onRenderHeader?: (el?: HTMLElement, data?: any) => void;
2923
- }
2924
-
2925
- /**
2926
- * Toast Options
2927
- */
2928
- export interface IToastOptions {
2929
- animation?: boolean;
2930
- autohide?: boolean;
2931
- delay?: number;
2932
- }
2933
- }
2934
-
2935
- declare module 'gd-bs/components/toolbar/types' {
2936
-
2937
- /**
2938
- * ### Toolbar
2939
- *
2940
- * ```ts
2941
- * import { Components } from "gd-sprest-bs";
2942
- *
2943
- * // Create a toolbar
2944
- * let el = document.querySelector("#toolbar");
2945
- * Components.Toolbar({
2946
- * el,
2947
- * spacing: 3,
2948
- * items: [
2949
- * { buttons: [{ text: "Button 1" }] },
2950
- * { buttons: [{ text: "Button 2" }] },
2951
- * { buttons: [{ text: "Button 3" }] },
2952
- * { buttons: [{ text: "Button 4" }] },
2953
- * { buttons: [{ text: "Button 5" }] }
2954
- * ]
2955
- * });
2956
- * ```
2957
- */
2958
- export const Toolbar: (props: IToolbarProps, template?: string) => IToolbar;
2959
-
2960
- /**
2961
- * Toolbar
2962
- */
2963
- export interface IToolbar {
2964
- /** The element. */
2965
- el: HTMLElement;
2966
-
2967
- /** Hides the toolbar. */
2968
- hide: () => void;
2969
-
2970
- /** Shows the toolbar. */
2971
- show: () => void;
2972
- }
2973
-
2974
- import { IBaseProps } from "gd-bs/components/types";
2975
- import { IButtonProps } from "gd-bs/components/button/types";
2976
- import { IInputGroupProps } from "gd-bs/components/inputGroup/types";
2977
-
2978
- /**
2979
- * Toolbar Item
2980
- */
2981
- export interface IToolbarItem {
2982
- buttons?: Array<IButtonProps>;
2983
- buttonType?: number;
2984
- inputGroup?: IInputGroupProps;
2985
- }
2986
-
2987
- /**
2988
- * Toolbar Properties
2989
- */
2990
- export interface IToolbarProps extends IBaseProps<IToolbar> {
2991
- items?: Array<IToolbarItem>;
2992
- spacing?: number;
2993
- }
2994
- }
2995
-
2996
- declare module 'gd-bs/components/tooltip/types' {
2997
-
2998
- /**
2999
- * ### Tooltip
3000
- *
3001
- * ```ts
3002
- import { Components } from "gd-sprest-bs";
3003
-
3004
- // Create the tooltip
3005
- let el = document.querySelector("#tooltip");
3006
- let tooltip = Components.Tooltip({
3007
- el: el,
3008
- content: "This is the tooltip content.",
3009
- placement: Components.TooltipPlacements.Top,
3010
- theme: Components.TooltipTypes.LightBorder,
3011
- btnProps: {
3012
- text: "Tooltip",
3013
- type: Components.ButtonTypes.OutlineDark
3014
- }
3015
- });
3016
- ```
3017
- */
3018
- export const Tooltip: (props: ITooltipProps, template?: string) => ITooltip;
3019
-
3020
- /**
3021
- * Tooltip Placements
3022
- */
3023
- export const TooltipPlacements: ITooltipPlacements;
3024
-
3025
- /**
3026
- * Tooltip Types
3027
- */
3028
- export const TooltipTypes: ITooltipTypes;
3029
-
3030
- import { IBaseProps, ITippyProps } from "gd-bs/components/types";
3031
- import { IButtonProps, IButton } from "gd-bs/components/button/types";
3032
- import { IDropdownProps, IDropdown } from "gd-bs/components/dropdown/types";
3033
-
3034
- /**
3035
- * Tooltip
3036
- */
3037
- export interface ITooltip {
3038
- /** Reference to the button. */
3039
- button?: IButton;
3040
-
3041
- /** The element. */
3042
- el: HTMLButtonElement;
3043
-
3044
- /** Gives an element’s tooltip the ability to be shown. */
3045
- enable: () => void;
3046
-
3047
- /** Hides an element’s tooltip. */
3048
- hide: () => void;
3049
-
3050
- /** Reference to the dropdown. */
3051
- ddl?: IDropdown;
3052
-
3053
- /** The tippy instance. */
3054
- tippy: any;
3055
-
3056
- /** Toggles an element's tooltip. */
3057
- toggle: () => void;
3058
-
3059
- /** Sets the tippy content. */
3060
- setContent: (content: string | Element) => void;
3061
-
3062
- /** Reveals an element’s tooltip. */
3063
- show: () => void;
3064
- }
3065
-
3066
- /**
3067
- * Tooltip Properties
3068
- */
3069
- export interface ITooltipProps extends IBaseProps<ITooltip> {
3070
- btnProps?: IButtonProps;
3071
- ddlProps?: IDropdownProps;
3072
- content?: string | Element;
3073
- options?: ITippyProps;
3074
- placement?: number;
3075
- target?: HTMLElement;
3076
- type?: number;
3077
- }
3078
-
3079
- /**
3080
- * Tooltip Types
3081
- */
3082
- export type ITooltipTypes = {
3083
- Danger: number;
3084
- Dark: number;
3085
- Info: number;
3086
- Light: number;
3087
- LightBorder: number;
3088
- Material: number;
3089
- Primary: number;
3090
- Secondary: number;
3091
- Success: number;
3092
- Translucent: number;
3093
- Warning: number;
3094
- }
3095
-
3096
- /**
3097
- * Tooltip Placements
3098
- */
3099
- export type ITooltipPlacements = {
3100
- Auto: number;
3101
- AutoStart: number;
3102
- AutoEnd: number;
3103
- Bottom: number;
3104
- BottomStart: number;
3105
- BottomEnd: number;
3106
- Left: number;
3107
- LeftStart: number;
3108
- LeftEnd: number;
3109
- Right: number;
3110
- RightStart: number;
3111
- RightEnd: number;
3112
- Top: number;
3113
- TopStart: number;
3114
- TopEnd: number;
3115
- }
3116
- }
3117
-
3118
- declare module 'gd-bs/components/tooltipGroup/types' {
3119
-
3120
- /**
3121
- * ### Tooltip Group
3122
- *
3123
- * ```ts
3124
- * import { Components } from "gd-sprest-bs";
3125
- *
3126
- * // Create the group
3127
- * let el = document.querySelector("#buttonGroup");
3128
- * let tooltipGroup = Components.TooltipGroup({
3129
- * el: el,
3130
- * buttonType: $REST.Components.ButtonTypes.Primary,
3131
- * buttons: [
3132
- * { text: "Left", onClick: function() { alert("Left button was clicked."); } },
3133
- * { text: "Middle", onClick: function() { alert("Middle button was clicked."); } },
3134
- * { text: "Right", onClick: function() { alert("Right button was clicked."); } }
3135
- * ]
3136
- * });
3137
- * ```
3138
- */
3139
- export const TooltipGroup: (props: ITooltipGroupProps, template?: string, btnTemplate?: string) => ITooltipGroup;
3140
-
3141
- import { IBaseProps, ITippyProps } from "gd-bs/components/types";
3142
- import { ITooltip, ITooltipProps } from "gd-bs/components/tooltip/types";
3143
-
3144
- /**
3145
- * Tooltip Group
3146
- */
3147
- export interface ITooltipGroup {
3148
- /** Adds a button to the group. */
3149
- add: (props: ITooltipProps, btnTemplate?: string) => void;
3150
-
3151
- /** The element. */
3152
- el: HTMLElement;
3153
-
3154
- /** The tooltips. */
3155
- tooltips: Array<ITooltip>;
3156
-
3157
- /** Hides the button group. */
3158
- hide: () => void;
3159
-
3160
- /** Shows the button group. */
3161
- show: () => void;
3162
- }
3163
-
3164
- /**
3165
- * Tooltip Group Properties
3166
- */
3167
- export interface ITooltipGroupProps extends IBaseProps<ITooltipGroup> {
3168
- tooltips?: Array<ITooltipProps>;
3169
- buttonType?: number;
3170
- id?: string;
3171
- isLarge?: boolean;
3172
- isSmall?: boolean;
3173
- isVertical?: boolean;
3174
- label?: string;
3175
- tooltipOptions?: ITippyProps;
3176
- tooltipPlacement?: number;
3177
- tooltipType?: number;
3178
- }
3179
- }
3180
-
3181
- declare module 'gd-bs/components/types' {
3182
- /**
3183
- * Base
3184
- */
3185
- export interface IBase<IProps = IBaseProps> {
3186
- /** Internal method to configure the parent element. */
3187
- configureParent(): HTMLElement;
3188
-
3189
- /** The component HTML element */
3190
- el: HTMLElement;
3191
-
3192
- /** Hides the component. */
3193
- hide(): void;
3194
-
3195
- /** The component properties */
3196
- props: IProps;
3197
-
3198
- /** Shows the component. */
3199
- show(): void;
3200
- }
3201
-
3202
- /**
3203
- * Base Properties
3204
- */
3205
- export interface IBaseProps<IBaseObj = any> {
3206
- /** Assigns the object to the input parameter. */
3207
- assignTo?: (obj: IBaseObj) => void;
3208
-
3209
- /** Custom class names. */
3210
- className?: string;
3211
-
3212
- /** The element to render the component to. */
3213
- el?: HTMLElement;
3214
- }
3215
-
3216
- /** Tippy Options */
3217
- export interface ITippyProps {
3218
- allowHTML?: boolean;
3219
- animateFill?: boolean;
3220
- animation?: string | boolean;
3221
- appendTo?: HTMLElement;
3222
- aria?: object;
3223
- arrow?: boolean | string | SVGElement | DocumentFragment;
3224
- content?: string | Element;
3225
- delay?: number | [number | null, number | null];
3226
- duration?: number | [number | null, number | null];
3227
- followCursor?: boolean | 'horizontal' | 'vertical' | 'initial';
3228
- hideOnClick?: boolean | 'toggle';
3229
- ignoreAttributes?: boolean;
3230
- inertia?: boolean;
3231
- inlinePositioning?: boolean;
3232
- interactive?: boolean;
3233
- interactiveBorder?: number;
3234
- interactiveDebounce?: number;
3235
- maxWidth?: number | string;
3236
- moveTransition?: string;
3237
- offset?: number[];
3238
- onAfterUpdate?: (tippyObj?, props?) => void;
3239
- onBeforeUpdate?: (tippyObj?, props?) => void;
3240
- onClickOutside?: (tippyObj?, ev?) => void;
3241
- onCreate?: (tippyObj?) => void;
3242
- onDestroy?: (tippyObj?) => void;
3243
- onHidden?: (tippyObj?) => void;
3244
- onHide?: (tippyObj?) => void;
3245
- onMount?: (tippyObj?) => void;
3246
- onShow?: (tippyObj?) => void;
3247
- onShown?: (tippyObj?) => void;
3248
- onTrigger?: (tippyObj?, ev?) => void;
3249
- onUntrigger?: (tippyObj?, ev?) => void;
3250
- placement?: string;
3251
- plugins?: any[];
3252
- popperOptions?: object;
3253
- role?: string;
3254
- showOnCreate?: boolean;
3255
- sticky?: boolean | 'reference' | 'popper';
3256
- theme?: string;
3257
- touch?: boolean | 'hold' | ['hold', number];
3258
- trigger?: string;
3259
- triggerTarget?: HTMLElement | HTMLElement[] | null;
3260
- zIndex?: number;
3261
- }
3262
- }
3263
-