@quandis/qbo4.ui 4.0.1-CI-20240507-200005 → 4.0.1-CI-20240507-231949

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 (10) hide show
  1. package/package.json +1 -1
  2. package/src/qbo/qbo-form-edit.d.ts +9 -0
  3. package/src/qbo/qbo-form-edit.js +55 -10
  4. package/src/qbo/qbo-form-edit.ts +37 -10
  5. package/src/qbo/qbo-popover.d.ts +11 -0
  6. package/src/qbo/qbo-popover.js +63 -8
  7. package/src/qbo/qbo-popover.ts +41 -8
  8. package/wwwroot/js/qbo4.ui.js +119 -19
  9. package/wwwroot/js/qbo4.ui.min.js +21 -21
  10. package/wwwroot/js/qbo4.ui.min.js.map +1 -1
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "author": "Quandis, Inc.",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
- "version": "4.0.1-CI-20240507-200005",
6
+ "version": "4.0.1-CI-20240507-231949",
7
7
  "workspaces": [
8
8
  "code"
9
9
  ],
package/src/qbo/qbo-form-edit.d.ts CHANGED
@@ -1,16 +1,25 @@
1
1
  import { LitElement, TemplateResult } from 'lit';
2
2
  export declare class QboFormEdit extends LitElement {
3
+ aDropdownClass: String | null;
3
4
  buttonPrimaryClass: String | null;
5
+ buttonPrimaryDropdownClass: String | null;
6
+ buttonType: String | null;
4
7
  data: Object;
5
8
  divButtonGroupClass: String | null;
6
9
  divFormActionClass: String | null;
7
10
  divSectionHeaderClass: String | null;
11
+ dropdownToggle: String | null;
8
12
  editLabel: String | null;
13
+ helpIcon: String | null;
14
+ helpText: String | null;
15
+ historyIcon: String | null;
16
+ historyText: String | null;
9
17
  infoButtonClass: String | null;
10
18
  infoIconClass: String | null;
11
19
  infoTitle: String | null;
12
20
  popoverClass: String | null;
13
21
  spanEditClass: String | null;
22
+ ulDropdownClass: String | null;
14
23
  type: string | null;
15
24
  renderInHost: boolean;
16
25
  createRenderRoot(): HTMLElement | DocumentFragment;
package/src/qbo/qbo-form-edit.js CHANGED
@@ -48,17 +48,26 @@ formEditMap.set('updatedLayout', (component) => {
48
48
  let QboFormEdit = class QboFormEdit extends LitElement {
49
49
  constructor() {
50
50
  super(...arguments);
51
+ this.aDropdownClass = 'dropdown-item';
51
52
  this.buttonPrimaryClass = 'qbo-primary';
53
+ this.buttonPrimaryDropdownClass = 'qbo-primary-dropdown';
54
+ this.buttonType = 'button';
52
55
  this.data = {};
53
56
  this.divButtonGroupClass = 'qbo-btn-group';
54
57
  this.divFormActionClass = 'qbo-form-actions';
55
58
  this.divSectionHeaderClass = 'qbo-header';
59
+ this.dropdownToggle = 'dropdown';
56
60
  this.editLabel = 'Edit';
61
+ this.helpIcon = 'qbo-icon-question';
62
+ this.helpText = 'Help';
63
+ this.historyIcon = 'qbo-icon-clock-history';
64
+ this.historyText = 'History';
57
65
  this.infoButtonClass = 'qbo-btn-light';
58
66
  this.infoIconClass = 'qbo-icon-info';
59
67
  this.infoTitle = 'Last Updated';
60
68
  this.popoverClass = 'qbo-float-end';
61
69
  this.spanEditClass = 'qbo-icon-edit';
70
+ this.ulDropdownClass = 'dropdown-menu';
62
71
  this.type = 'defaultLayout';
63
72
  this.renderInHost = true;
64
73
  }
@@ -76,27 +85,27 @@ let QboFormEdit = class QboFormEdit extends LitElement {
76
85
  </div>
77
86
  <div class="${this.divFormActionClass}">
78
87
  <div class="${this.divButtonGroupClass}">
79
- <button type="button" class="${this.buttonPrimaryClass}">
88
+ <button type="${this.buttonType}" class="${this.buttonPrimaryClass}">
80
89
  <span class="${this.spanEditClass}"> ${this.editLabel}</span>
81
90
  </button>
82
- <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
83
- <ul class="dropdown-menu">
91
+ <button type="${this.buttonType}" class="${this.buttonPrimaryDropdownClass}" data-bs-toggle="${this.dropdownToggle}"></button>
92
+ <ul class="${this.ulDropdownClass}">
84
93
  <li>
85
- <a class="dropdown-item" href="#">
86
- <i class="bi-clock-history"></i>
87
- <span>History</span>
94
+ <a class="${this.aDropdownClass}" style="cursor:pointer;" onclick="alert('Show History');">
95
+ <i class="${this.historyIcon}"></i>
96
+ <span>${this.historyText}</span>
88
97
  </a>
89
98
  </li>
90
99
  <li>
91
- <a class="dropdown-item" href="#">
92
- <i class="bi-question"></i>
93
- <span>Help</span>
100
+ <a class="${this.aDropdownClass}" style="cursor:pointer;" onclick="alert('Show Help');">
101
+ <i class="${this.helpIcon}"></i>
102
+ <span>${this.helpText}</span>
94
103
  </a>
95
104
  </li>
96
105
  </ul>
97
106
  </div>
98
107
  <qbo-popover class="${this.popoverClass}">
99
- <button type="button" class="${this.infoButtonClass}" title="${this.infoTitle}">
108
+ <button type="${this.buttonType}" class="${this.infoButtonClass}" title="${this.infoTitle}">
100
109
  <i class="${this.infoIconClass}"></i>
101
110
  </button>
102
111
  ${popover}
@@ -105,10 +114,22 @@ let QboFormEdit = class QboFormEdit extends LitElement {
105
114
  </slot>`;
106
115
  }
107
116
  };
117
+ __decorate([
118
+ property({ type: String }),
119
+ __metadata("design:type", Object)
120
+ ], QboFormEdit.prototype, "aDropdownClass", void 0);
108
121
  __decorate([
109
122
  property({ type: String }),
110
123
  __metadata("design:type", Object)
111
124
  ], QboFormEdit.prototype, "buttonPrimaryClass", void 0);
125
+ __decorate([
126
+ property({ type: String }),
127
+ __metadata("design:type", Object)
128
+ ], QboFormEdit.prototype, "buttonPrimaryDropdownClass", void 0);
129
+ __decorate([
130
+ property({ type: String }),
131
+ __metadata("design:type", Object)
132
+ ], QboFormEdit.prototype, "buttonType", void 0);
112
133
  __decorate([
113
134
  property({ type: Object, attribute: false }),
114
135
  __metadata("design:type", Object)
@@ -125,10 +146,30 @@ __decorate([
125
146
  property({ type: String }),
126
147
  __metadata("design:type", Object)
127
148
  ], QboFormEdit.prototype, "divSectionHeaderClass", void 0);
149
+ __decorate([
150
+ property({ type: String }),
151
+ __metadata("design:type", Object)
152
+ ], QboFormEdit.prototype, "dropdownToggle", void 0);
128
153
  __decorate([
129
154
  property({ type: String }),
130
155
  __metadata("design:type", Object)
131
156
  ], QboFormEdit.prototype, "editLabel", void 0);
157
+ __decorate([
158
+ property({ type: String }),
159
+ __metadata("design:type", Object)
160
+ ], QboFormEdit.prototype, "helpIcon", void 0);
161
+ __decorate([
162
+ property({ type: String }),
163
+ __metadata("design:type", Object)
164
+ ], QboFormEdit.prototype, "helpText", void 0);
165
+ __decorate([
166
+ property({ type: String }),
167
+ __metadata("design:type", Object)
168
+ ], QboFormEdit.prototype, "historyIcon", void 0);
169
+ __decorate([
170
+ property({ type: String }),
171
+ __metadata("design:type", Object)
172
+ ], QboFormEdit.prototype, "historyText", void 0);
132
173
  __decorate([
133
174
  property({ type: String }),
134
175
  __metadata("design:type", Object)
@@ -149,6 +190,10 @@ __decorate([
149
190
  property({ type: String }),
150
191
  __metadata("design:type", Object)
151
192
  ], QboFormEdit.prototype, "spanEditClass", void 0);
193
+ __decorate([
194
+ property({ type: String }),
195
+ __metadata("design:type", Object)
196
+ ], QboFormEdit.prototype, "ulDropdownClass", void 0);
152
197
  __decorate([
153
198
  property(),
154
199
  __metadata("design:type", Object)
package/src/qbo/qbo-form-edit.ts CHANGED
@@ -42,9 +42,18 @@ formEditMap.set('updatedLayout', (component: any) => {
42
42
  @customElement('qbo-form-edit')
43
43
  export class QboFormEdit extends LitElement {
44
44
 
45
+ @property({ type: String })
46
+ aDropdownClass: String | null = 'dropdown-item';
47
+
45
48
  @property({ type: String })
46
49
  buttonPrimaryClass: String | null = 'qbo-primary';
47
50
 
51
+ @property({ type: String })
52
+ buttonPrimaryDropdownClass: String | null = 'qbo-primary-dropdown';
53
+
54
+ @property({ type: String })
55
+ buttonType: String | null = 'button';
56
+
48
57
  @property({ type: Object, attribute: false })
49
58
  data: Object = { };
50
59
 
@@ -57,9 +66,24 @@ export class QboFormEdit extends LitElement {
57
66
  @property({ type: String })
58
67
  divSectionHeaderClass: String | null = 'qbo-header';
59
68
 
69
+ @property({ type: String })
70
+ dropdownToggle: String | null = 'dropdown';
71
+
60
72
  @property({ type: String })
61
73
  editLabel: String | null = 'Edit';
62
74
 
75
+ @property({ type: String })
76
+ helpIcon: String | null = 'qbo-icon-question';
77
+
78
+ @property({ type: String })
79
+ helpText: String | null = 'Help';
80
+
81
+ @property({ type: String })
82
+ historyIcon: String | null = 'qbo-icon-clock-history';
83
+
84
+ @property({ type: String })
85
+ historyText: String | null = 'History';
86
+
63
87
  @property({ type: String })
64
88
  infoButtonClass: String | null = 'qbo-btn-light';
65
89
 
@@ -75,6 +99,9 @@ export class QboFormEdit extends LitElement {
75
99
  @property({ type: String })
76
100
  spanEditClass: String | null = 'qbo-icon-edit';
77
101
 
102
+ @property({ type: String })
103
+ ulDropdownClass: String | null = 'dropdown-menu';
104
+
78
105
  @property()
79
106
  type: string | null = 'defaultLayout';
80
107
 
@@ -96,27 +123,27 @@ export class QboFormEdit extends LitElement {
96
123
  </div>
97
124
  <div class="${this.divFormActionClass}">
98
125
  <div class="${this.divButtonGroupClass}">
99
- <button type="button" class="${this.buttonPrimaryClass}">
126
+ <button type="${this.buttonType}" class="${this.buttonPrimaryClass}">
100
127
  <span class="${this.spanEditClass}"> ${this.editLabel}</span>
101
128
  </button>
102
- <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
103
- <ul class="dropdown-menu">
129
+ <button type="${this.buttonType}" class="${this.buttonPrimaryDropdownClass}" data-bs-toggle="${this.dropdownToggle}"></button>
130
+ <ul class="${this.ulDropdownClass}">
104
131
  <li>
105
- <a class="dropdown-item" href="#">
106
- <i class="bi-clock-history"></i>
107
- <span>History</span>
132
+ <a class="${this.aDropdownClass}" style="cursor:pointer;" onclick="alert('Show History');">
133
+ <i class="${this.historyIcon}"></i>
134
+ <span>${this.historyText}</span>
108
135
  </a>
109
136
  </li>
110
137
  <li>
111
- <a class="dropdown-item" href="#">
112
- <i class="bi-question"></i>
113
- <span>Help</span>
138
+ <a class="${this.aDropdownClass}" style="cursor:pointer;" onclick="alert('Show Help');">
139
+ <i class="${this.helpIcon}"></i>
140
+ <span>${this.helpText}</span>
114
141
  </a>
115
142
  </li>
116
143
  </ul>
117
144
  </div>
118
145
  <qbo-popover class="${this.popoverClass}">
119
- <button type="button" class="${this.infoButtonClass}" title="${this.infoTitle}">
146
+ <button type="${this.buttonType}" class="${this.infoButtonClass}" title="${this.infoTitle}">
120
147
  <i class="${this.infoIconClass}"></i>
121
148
  </button>
122
149
  ${popover}
package/src/qbo/qbo-popover.d.ts CHANGED
@@ -1,6 +1,17 @@
1
1
  import { LitElement, PropertyValues } from 'lit';
2
2
  export declare class QboPopover extends LitElement {
3
+ contentAtt: string;
4
+ contentStyle: string;
5
+ containerAtt: string;
6
+ containerValue: string;
7
+ defaultContent: string;
8
+ htmlAtt: string;
9
+ htmlValue: string;
10
+ placementAtt: string;
11
+ placementValue: string;
3
12
  selector: string;
13
+ toggleAtt: string;
14
+ toggleValue: string;
4
15
  renderInHost: boolean;
5
16
  createRenderRoot(): HTMLElement | DocumentFragment;
6
17
  connectedCallback(): void;
package/src/qbo/qbo-popover.js CHANGED
@@ -13,7 +13,18 @@ import { Popover } from 'bootstrap';
13
13
  let QboPopover = class QboPopover extends LitElement {
14
14
  constructor() {
15
15
  super(...arguments);
16
- this.selector = `[data-bs-toggle="popover"]`;
16
+ this.contentAtt = 'data-bs-content';
17
+ this.contentStyle = 'none';
18
+ this.containerAtt = 'data-bs-container';
19
+ this.containerValue = 'body';
20
+ this.defaultContent = 'No content provided';
21
+ this.htmlAtt = 'data-bs-html';
22
+ this.htmlValue = 'true';
23
+ this.placementAtt = 'data-bs-placement';
24
+ this.placementValue = 'left';
25
+ this.selector = '*[slot=content]';
26
+ this.toggleAtt = 'data-bs-toggle';
27
+ this.toggleValue = 'popover';
17
28
  this.renderInHost = true;
18
29
  }
19
30
  createRenderRoot() {
@@ -21,27 +32,71 @@ let QboPopover = class QboPopover extends LitElement {
21
32
  }
22
33
  connectedCallback() {
23
34
  super.connectedCallback();
24
- this.setAttribute('data-bs-toggle', 'popover');
25
- this.setAttribute('data-bs-placement', 'left');
26
- this.setAttribute('data-bs-container', 'body');
27
- this.setAttribute('data-bs-html', 'true');
35
+ this.setAttribute(this.toggleAtt, this.toggleValue);
36
+ this.setAttribute(this.placementAtt, this.placementValue);
37
+ this.setAttribute(this.containerAtt, this.containerValue);
38
+ this.setAttribute(this.htmlAtt, this.htmlValue);
28
39
  }
29
40
  firstUpdated(changedProperties) {
30
41
  super.firstUpdated(changedProperties);
31
- const content = this.querySelector('*[slot=content]');
42
+ const content = this.querySelector(this.selector);
32
43
  if (content instanceof HTMLElement)
33
- content.style.display = 'none';
34
- this.setAttribute('data-bs-content', content?.innerHTML ?? 'no content provided');
44
+ content.style.display = this.contentStyle;
45
+ this.setAttribute(this.contentAtt, content?.innerHTML ?? this.defaultContent);
35
46
  new Popover(this);
36
47
  }
37
48
  render() {
38
49
  return html `<slot></slot>`;
39
50
  }
40
51
  };
52
+ __decorate([
53
+ property({ type: String }),
54
+ __metadata("design:type", Object)
55
+ ], QboPopover.prototype, "contentAtt", void 0);
56
+ __decorate([
57
+ property({ type: String }),
58
+ __metadata("design:type", Object)
59
+ ], QboPopover.prototype, "contentStyle", void 0);
60
+ __decorate([
61
+ property({ type: String }),
62
+ __metadata("design:type", Object)
63
+ ], QboPopover.prototype, "containerAtt", void 0);
64
+ __decorate([
65
+ property({ type: String }),
66
+ __metadata("design:type", Object)
67
+ ], QboPopover.prototype, "containerValue", void 0);
68
+ __decorate([
69
+ property({ type: String }),
70
+ __metadata("design:type", Object)
71
+ ], QboPopover.prototype, "defaultContent", void 0);
72
+ __decorate([
73
+ property({ type: String }),
74
+ __metadata("design:type", Object)
75
+ ], QboPopover.prototype, "htmlAtt", void 0);
76
+ __decorate([
77
+ property({ type: String }),
78
+ __metadata("design:type", Object)
79
+ ], QboPopover.prototype, "htmlValue", void 0);
80
+ __decorate([
81
+ property({ type: String }),
82
+ __metadata("design:type", Object)
83
+ ], QboPopover.prototype, "placementAtt", void 0);
84
+ __decorate([
85
+ property({ type: String }),
86
+ __metadata("design:type", Object)
87
+ ], QboPopover.prototype, "placementValue", void 0);
41
88
  __decorate([
42
89
  property({ type: String }),
43
90
  __metadata("design:type", Object)
44
91
  ], QboPopover.prototype, "selector", void 0);
92
+ __decorate([
93
+ property({ type: String }),
94
+ __metadata("design:type", Object)
95
+ ], QboPopover.prototype, "toggleAtt", void 0);
96
+ __decorate([
97
+ property({ type: String }),
98
+ __metadata("design:type", Object)
99
+ ], QboPopover.prototype, "toggleValue", void 0);
45
100
  __decorate([
46
101
  property({ type: Boolean }),
47
102
  __metadata("design:type", Object)
package/src/qbo/qbo-popover.ts CHANGED
@@ -6,7 +6,40 @@ import { Popover } from 'bootstrap';
6
6
  export class QboPopover extends LitElement {
7
7
 
8
8
  @property({ type: String })
9
- selector = `[data-bs-toggle="popover"]`;
9
+ contentAtt = 'data-bs-content';
10
+
11
+ @property({ type: String })
12
+ contentStyle = 'none';
13
+
14
+ @property({ type: String })
15
+ containerAtt = 'data-bs-container';
16
+
17
+ @property({ type: String })
18
+ containerValue = 'body';
19
+
20
+ @property({ type: String })
21
+ defaultContent = 'No content provided';
22
+
23
+ @property({ type: String })
24
+ htmlAtt = 'data-bs-html';
25
+
26
+ @property({ type: String })
27
+ htmlValue = 'true';
28
+
29
+ @property({ type: String })
30
+ placementAtt = 'data-bs-placement';
31
+
32
+ @property({ type: String })
33
+ placementValue = 'left';
34
+
35
+ @property({ type: String })
36
+ selector = '*[slot=content]';
37
+
38
+ @property({ type: String })
39
+ toggleAtt = 'data-bs-toggle';
40
+
41
+ @property({ type: String })
42
+ toggleValue = 'popover';
10
43
 
11
44
  @property({ type: Boolean })
12
45
  renderInHost = true;
@@ -18,18 +51,18 @@ export class QboPopover extends LitElement {
18
51
  connectedCallback() {
19
52
  super.connectedCallback();
20
53
 
21
- this.setAttribute('data-bs-toggle', 'popover');
22
- this.setAttribute('data-bs-placement', 'left');
23
- this.setAttribute('data-bs-container', 'body');
24
- this.setAttribute('data-bs-html', 'true');
54
+ this.setAttribute(this.toggleAtt, this.toggleValue);
55
+ this.setAttribute(this.placementAtt, this.placementValue);
56
+ this.setAttribute(this.containerAtt, this.containerValue);
57
+ this.setAttribute(this.htmlAtt, this.htmlValue);
25
58
  }
26
59
 
27
60
  firstUpdated(changedProperties: PropertyValues) {
28
61
  super.firstUpdated(changedProperties);
29
62
 
30
- const content = this.querySelector('*[slot=content]');
31
- if (content instanceof HTMLElement) content.style.display = 'none';
32
- this.setAttribute('data-bs-content', content?.innerHTML ?? 'no content provided');
63
+ const content = this.querySelector(this.selector);
64
+ if (content instanceof HTMLElement) content.style.display = this.contentStyle;
65
+ this.setAttribute(this.contentAtt, content?.innerHTML ?? this.defaultContent);
33
66
 
34
67
  new Popover(this);
35
68
  }