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

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20240507-200005",
+  "version": "4.0.1-CI-20240507-201707",
   "workspaces": [
     "code"
   ],

package/src/qbo/qbo-popover.d.ts

@@ -1,6 +1,17 @@
 import { LitElement, PropertyValues } from 'lit';
 export declare class QboPopover extends LitElement {
+    contentAtt: string;
+    contentStyle: string;
+    containerAtt: string;
+    containerValue: string;
+    defaultContent: string;
+    htmlAtt: string;
+    htmlValue: string;
+    placementAtt: string;
+    placementValue: string;
     selector: string;
+    toggleAtt: string;
+    toggleValue: string;
     renderInHost: boolean;
     createRenderRoot(): HTMLElement | DocumentFragment;
     connectedCallback(): void;

package/src/qbo/qbo-popover.js

@@ -13,7 +13,18 @@ import { Popover } from 'bootstrap';
 let QboPopover = class QboPopover extends LitElement {
     constructor() {
         super(...arguments);
-        this.selector = `[data-bs-toggle="popover"]`;
+        this.contentAtt = 'data-bs-content';
+        this.contentStyle = 'none';
+        this.containerAtt = 'data-bs-container';
+        this.containerValue = 'body';
+        this.defaultContent = 'No content provided';
+        this.htmlAtt = 'data-bs-html';
+        this.htmlValue = 'true';
+        this.placementAtt = 'data-bs-placement';
+        this.placementValue = 'left';
+        this.selector = '*[slot=content]';
+        this.toggleAtt = 'data-bs-toggle';
+        this.toggleValue = 'popover';
         this.renderInHost = true;
     }
     createRenderRoot() {
@@ -21,27 +32,71 @@ let QboPopover = class QboPopover extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.setAttribute('data-bs-toggle', 'popover');
-        this.setAttribute('data-bs-placement', 'left');
-        this.setAttribute('data-bs-container', 'body');
-        this.setAttribute('data-bs-html', 'true');
+        this.setAttribute(this.toggleAtt, this.toggleValue);
+        this.setAttribute(this.placementAtt, this.placementValue);
+        this.setAttribute(this.containerAtt, this.containerValue);
+        this.setAttribute(this.htmlAtt, this.htmlValue);
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        const content = this.querySelector('*[slot=content]');
+        const content = this.querySelector(this.selector);
         if (content instanceof HTMLElement)
-            content.style.display = 'none';
-        this.setAttribute('data-bs-content', content?.innerHTML ?? 'no content provided');
+            content.style.display = this.contentStyle;
+        this.setAttribute(this.contentAtt, content?.innerHTML ?? this.defaultContent);
         new Popover(this);
     }
     render() {
         return html `<slot></slot>`;
     }
 };
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "contentAtt", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "contentStyle", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "containerAtt", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "containerValue", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "defaultContent", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "htmlAtt", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "htmlValue", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "placementAtt", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "placementValue", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], QboPopover.prototype, "selector", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "toggleAtt", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "toggleValue", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)

package/src/qbo/qbo-popover.ts

@@ -6,7 +6,40 @@ import { Popover } from 'bootstrap';
 export class QboPopover extends LitElement {
 
     @property({ type: String })
-    selector = `[data-bs-toggle="popover"]`;
+    contentAtt = 'data-bs-content';
+
+    @property({ type: String })
+    contentStyle = 'none';
+
+    @property({ type: String })
+    containerAtt = 'data-bs-container';
+
+    @property({ type: String })
+    containerValue = 'body';
+
+    @property({ type: String })
+    defaultContent = 'No content provided';
+
+    @property({ type: String })
+    htmlAtt = 'data-bs-html';
+
+    @property({ type: String })
+    htmlValue = 'true';
+
+    @property({ type: String })
+    placementAtt = 'data-bs-placement';
+
+    @property({ type: String })
+    placementValue = 'left';
+
+    @property({ type: String })
+    selector = '*[slot=content]';
+
+    @property({ type: String })
+    toggleAtt = 'data-bs-toggle';
+
+    @property({ type: String })
+    toggleValue = 'popover';
 
     @property({ type: Boolean })
     renderInHost = true;
@@ -18,18 +51,18 @@ export class QboPopover extends LitElement {
     connectedCallback() {
         super.connectedCallback();
 
-        this.setAttribute('data-bs-toggle', 'popover');
-        this.setAttribute('data-bs-placement', 'left');
-        this.setAttribute('data-bs-container', 'body');
-        this.setAttribute('data-bs-html', 'true');
+        this.setAttribute(this.toggleAtt, this.toggleValue);
+        this.setAttribute(this.placementAtt, this.placementValue);
+        this.setAttribute(this.containerAtt, this.containerValue);
+        this.setAttribute(this.htmlAtt, this.htmlValue);
     }
 
     firstUpdated(changedProperties: PropertyValues) {
         super.firstUpdated(changedProperties);
 
-        const content = this.querySelector('*[slot=content]');
-        if (content instanceof HTMLElement) content.style.display = 'none';
-        this.setAttribute('data-bs-content', content?.innerHTML ?? 'no content provided');
+        const content = this.querySelector(this.selector);
+        if (content instanceof HTMLElement) content.style.display = this.contentStyle;
+        this.setAttribute(this.contentAtt, content?.innerHTML ?? this.defaultContent);
 
         new Popover(this);
     }