gd-bs 5.5.8 → 5.6.1

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 (16) hide show
  1. package/build/bs.js +1 -1
  2. package/build/components/checkboxGroup/item.js +1 -1
  3. package/build/components/form/index.js +15 -0
  4. package/build/components/inputGroup/index.js +2 -4
  5. package/dist/gd-bs-icons.js +4 -4
  6. package/dist/gd-bs-icons.min.js +1 -1
  7. package/dist/gd-bs.d.ts +3 -0
  8. package/dist/gd-bs.js +4 -4
  9. package/dist/gd-bs.min.js +1 -1
  10. package/index.html +15 -10
  11. package/package.json +1 -1
  12. package/src/bs.scss +17 -0
  13. package/src/components/checkboxGroup/item.ts +1 -1
  14. package/src/components/form/formTypes.d.ts +3 -0
  15. package/src/components/form/index.ts +16 -0
  16. package/src/components/inputGroup/index.ts +2 -4
package/index.html CHANGED
@@ -14,9 +14,7 @@
14
14
  <body>
15
15
  <h1>Library</h1>
16
16
  <form>
17
- <div id="dev">
18
- <input id="dev-tooltip" type="search" placeholder="Search the page..." class="bg-dark text-white" />
19
- </div>
17
+ <div id="dev"></div>
20
18
  <div id="alert"></div>
21
19
  <div id="btn-loading"></div>
22
20
  <div id="spinner"></div>
@@ -56,11 +54,18 @@
56
54
  <script type="text/javascript">
57
55
  window.addEventListener("load", function() {
58
56
  // Dev
59
- GD.Components.Tooltip({
60
- target: document.querySelector("#dev-tooltip"),
61
- placement: GD.Components.TooltipPlacements.Right,
62
- type: GD.Components.TooltipTypes.LightBorder,
63
- content: "This is a tooltip on a custom element"
57
+ let items = [];
58
+ for(var i=0; i<10; i++) {
59
+ items.push({ label: "Item " + i, data: i, isSelected: true });
60
+ }
61
+ window["form"] = GD.Components.Form({
62
+ el: document.getElementById("dev"),
63
+ controls: [{
64
+ name: "cb",
65
+ label: "My CB",
66
+ items,
67
+ type: 8
68
+ }]
64
69
  });
65
70
 
66
71
  // Components
@@ -536,7 +541,7 @@
536
541
  id: "my-panel",
537
542
  title: "Panel Example",
538
543
  hideCloseButton: true,
539
- type: 12,
544
+ type: 8,
540
545
  options: {
541
546
  keyboard: false
542
547
  },
@@ -756,7 +761,7 @@
756
761
  el: document.querySelector("#modal"),
757
762
  id: "my-modal",
758
763
  title: "My Modal",
759
- type: 4,
764
+ type: 9,
760
765
  options: {
761
766
  keyboard: true,
762
767
  autoClose: false
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gd-bs",
3
- "version": "5.5.8",
3
+ "version": "5.6.1",
4
4
  "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
5
5
  "main": "build/index.js",
6
6
  "typings": "src/index.d.ts",
package/src/bs.scss CHANGED
@@ -262,6 +262,11 @@
262
262
  .form-switch .form-check-input:checked {
263
263
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
264
264
  }
265
+ /* Color match the active list group item */
266
+ .list-group-item.active {
267
+ background-color: #0078d4;
268
+ border-color: #0078d4;
269
+ }
265
270
  /* Increase modal border size */
266
271
  .modal-footer {
267
272
  border-top: 2px solid #dee2e6;
@@ -421,6 +426,18 @@
421
426
  }
422
427
  }
423
428
 
429
+ /* Color match the selected flatpickr calendar control */
430
+ .flatpickr-day.selected {
431
+ background-color: #0078d4;
432
+ border-color: #0078d4;
433
+ }
434
+
435
+ /* Fix styling for the flatpickr calendar control */
436
+ .flatpickr-input[readonly] {
437
+ color: #212529 !important;
438
+ background-color: #fff !important;
439
+ border-color: #6c757d !important;
440
+ }
424
441
 
425
442
  /** Modal background - Shouldn't be under the .bs class */
426
443
 
package/src/components/checkboxGroup/item.ts CHANGED
@@ -35,7 +35,7 @@ export class CheckboxItem {
35
35
  // Set the attributes
36
36
  this._elCheckbox = this._el.querySelector("input");
37
37
  if (this._elCheckbox) {
38
- this._elCheckbox.disabled = this._parent.isReadonly || this._props.isDisabled ? true : false;
38
+ this._elCheckbox.readOnly = this._parent.isReadonly || this._props.isDisabled ? true : false;
39
39
 
40
40
  // Default the title property for the checkbox
41
41
  this._elCheckbox.title = this.props.label || this._parent.title || "";
package/src/components/form/formTypes.d.ts CHANGED
@@ -134,6 +134,9 @@ export interface IForm {
134
134
  /** Hides the form. */
135
135
  hide: () => void;
136
136
 
137
+ /** Inserts a control into the form */
138
+ insertControl: (idx: number, control: IFormControlProps) => void;
139
+
137
140
  /** Validates the form */
138
141
  isValid: () => boolean;
139
142
 
package/src/components/form/index.ts CHANGED
@@ -166,6 +166,22 @@ class _Form extends Base<IFormProps> implements IForm {
166
166
  return values;
167
167
  }
168
168
 
169
+ // Inserts a control into the form
170
+ insertControl(idx: number, control: IFormControlProps) {
171
+ // Create the group
172
+ let group = new FormGroup(control, this.props);
173
+ this._groups.push(group);
174
+
175
+ // Validate the index
176
+ if (idx < this.el.childElementCount) {
177
+ // Insert the control
178
+ this.el.insertBefore(group.el, this.el.childNodes[idx]);
179
+ } else {
180
+ // Append the control
181
+ this.el.appendChild(group.el);
182
+ }
183
+ }
184
+
169
185
  // Validates the form
170
186
  isValid() {
171
187
  let isValid = true;
package/src/components/inputGroup/index.ts CHANGED
@@ -205,8 +205,7 @@ class _InputGroup extends Base<IInputGroupProps> implements IInputGroup {
205
205
  // Update the textbox
206
206
  this.props.id ? textarea.id = this.props.id : null;
207
207
  this.props.placeholder ? textarea.placeholder = this.props.placeholder : null;
208
- textarea.disabled = this.props.isReadonly ? true : false;
209
- textarea.readOnly = textarea.disabled;
208
+ textarea.readOnly = this.props.isReadonly ? true : false;
210
209
  textarea.rows = this.props.rows;
211
210
  this.props.title ? textarea.title = this.props.title : null;
212
211
  }
@@ -219,8 +218,7 @@ class _InputGroup extends Base<IInputGroupProps> implements IInputGroup {
219
218
  // Update the textbox
220
219
  this.props.id ? input.id = this.props.id : null;
221
220
  this.props.placeholder ? input.placeholder = this.props.placeholder : null;
222
- input.disabled = this.props.isReadonly ? true : false;
223
- input.readOnly = input.disabled;
221
+ input.readOnly = this.props.isReadonly ? true : false;
224
222
  this.props.title ? input.title = this.props.title : null;
225
223
  typeof (this.props.min) === "number" ? input.min = this.props.min + "" : null;
226
224
  typeof (this.props.max) === "number" ? input.max = this.props.max + "" : null;