@aj-shadow/z-abs-complayer-bootstrap-client 0.0.0-aj-beta.227 → 0.0.0-aj-beta.236

package/npm-shrinkwrap.json

@@ -1,13 +1,13 @@
 {
   "name": "@aj-shadow/z-abs-complayer-bootstrap-client",
-  "version": "0.0.0-aj-beta.227",
+  "version": "0.0.0-aj-beta.236",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@aj-shadow/z-abs-complayer-bootstrap-client",
-      "version": "0.0.0-aj-beta.227",
-      "license": "SEE LICENSE IN LICENSE.txt"
+      "version": "0.0.0-aj-beta.236",
+      "license": "MIT"
     }
   }
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@aj-shadow/z-abs-complayer-bootstrap-client",
-  "version": "0.0.0-aj-beta.227",
+  "version": "0.0.0-aj-beta.236",
   "release-step": "delivery",
   "description": "Library used by @actorjs/actorjs",
   "author": "ActorJs",
-  "license": "SEE LICENSE IN LICENSE.txt",
+  "license": "MIT",
   "repository": "https://gitlab.com/actorjs-shadow-delivery-public/z-abs-complayer-bootstrap-client.git",
   "dependencies": {}
 }

package/project/client/_build/Bundle-CompLayer-Bootstrap-client.bld

@@ -2,29 +2,20 @@
   "layer": "Comp",
   "part": "Bootstrap-client",
   "source": {
-     "path": "./build/z-abs-complayer-bootstrap-client/client",
-	 "filters": ["js"]
+    "path": "./build/z-abs-complayer-bootstrap-client/client",
+    "filters": ["js"]
   },
   "dest": "./dist/scripts",
   "_bundle": true,
   "ignores": null,
-  "externals": [
-    "react",
-    "react-dom"
+  "dictionary": [],
+  "exports": [],
+  "dependencies": [
+    ["z-abs-complayer-bootstrap-client", "client"],
+    ["z-abs-complayer-router-client", "client"],
+    ["z-abs-corelayer-client", "client"],
+    ["z-abs-corelayer-cs", "cs"],
+    ["z-abs-3pplayer-react-client", "client"]
   ],
-  "externalGlobs": [
-    "./build/z-abs-corelayer-client/**/*.js",
-    "./build/z-abs-corelayer-cs/**/*.js"
-  ],
-  "exports": null,
-  "exportSource": true,
-  "dependencyNames": [
-    "Client:CompLayer/Bootstrap-client",
-    "Client:CompLayer/Bootstrap-client-jsx",
-    "Client:CoreLayer/client",
-    "Client:CoreLayer/client-jsx",
-    "Client:CoreLayer/cs",
-    "Client:3ppLayer/Reactdom-client",
-    "Client:3ppLayer/React-client"
-  ]
+  "allowRequire": false
 }

package/project/client/breadcrump.jsx

@@ -1,12 +1,12 @@
 
-'use strict';
+// SPDX-License-Identifier: MIT; Copyright (c) 2026 Hagnell Konsulting AB
 
-import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
-import Link from 'z-abs-complayer-router-client/client/react-component/link';
-import React from 'react';
+import * as CoreLayerClient from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import * as CompLayerRouterClient from 'z-abs-complayer-router-client/client/react-component/link';
+import * as React from 'react';
 
 
-export default class ComponentBreadcrump extends ReactComponentBase {
+export class Breadcrump extends CoreLayerClient.ReactComponentBase {
   constructor(props) {
     super(props);
   }
@@ -30,11 +30,11 @@ export default class ComponentBreadcrump extends ReactComponentBase {
       return (
         <div key={index}>
           {this.renderBreadcrumbSlash(index)}
-          <Link className="bootstrap_breadcrump_item" href={link} replace>
+          <CompLayerRouterClient.Link className="bootstrap_breadcrump_item" href={link} replace>
             <div className="bootstrap_breadcrump_item">
               {name}
             </div>
-          </Link>
+          </CompLayerRouterClient.Link>
         </div>
       );
     }

package/project/client/button-new.jsx

@@ -1,141 +1,58 @@
 
-'use strict';
+// SPDX-License-Identifier: MIT; Copyright (c) 2026 Hagnell Konsulting AB
 
-import Icon from './icons-inline/icon';
-import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
-import GuidGenerator from 'z-abs-corelayer-cs/clientServer/guid-generator';
-import React from 'react';
+import { Icon } from './icons-inline/icon';
+import { Popover } from './popover';
+import * as CoreLayerClient from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import * as CoreLayerCs from 'z-abs-corelayer-cs/client/guid-generator';
+import * as React from 'react';
 
 
-class ButtonNew extends ReactComponentBase {
+export class ButtonNew extends CoreLayerClient.ReactComponentBase {
   constructor(props) {
     super(props);
-    this.id = this.props.id ? this.props.id : GuidGenerator.create();
-    this.$popover = null;
-    this.clearId = 0;
+    this.id = this.props.id ? this.props.id : CoreLayerCs.GuidGenerator.create();
+    this.refPopover = React.createRef();
     this.refButton = props.onLoad ? React.createRef() : null;
   }
   
   shouldUpdate(nextProps, nextState) {
     return !this.shallowCompare(this.props.active, nextProps.active)
-      || !this.shallowCompare(this.props.content, nextProps.content)
       || !this.shallowCompare(this.props.disabled, nextProps.disabled)
       || !this.shallowCompare(this.props.heading, nextProps.heading)
+      || !this.shallowCompare(this.props.content, nextProps.content)
       || !this.shallowCompare(this.props.text, nextProps.text)
       || !this.shallowCompare(this.props.placement, nextProps.placement)
       || !this.shallowCompare(this.props.shortcut, nextProps.shortcut);
   }
   
   didMount() {
-    this._createPopover();
     if(this.refButton) {
       this.props.onLoad(this.refButton.current);
     }
   }
   
-  didUpdate() {
-    this._createPopover();
-    if(null !== this.$popover) {
-      const popover = this.$popover.data('bs.popover');
-      if(null !== popover.tip()[0].lastChild.firstChild) {
-        popover.tip()[0].lastChild.firstChild.lastChild.outerHTML = this._getContent();
-      }
-    }
-  }
-  
-  willUnmount() {
-    this.onHide();
-  }
-  
-  onHide() {
-    if(0 !== this.clearId) {
-      clearTimeout(this.clearId);
-      this.clearId = 0;
-    }
-    if(null !== this.$popover) {
-      this.$popover.popover('destroy');
-      this.$popover = null;
-    }
-  }
-  
   render() {
-    const placement = this.props.placement ? this.props.placement : 'bottom';
+    const placement = this.props.placement || 'bottom';
     const title = this.props.title ? { title: this.props.title } : {};
     const size = this.props.size ? ` ${this.props.size}` : ' aj_btn_xs';
     const active = this.props.active ? ' active' : '';
     const disabled = this.props.disabled ? ' disabled' : '';
     const className = this.props.className ? ` ${this.props.className}` : '';
-    const al = this.props['aria-label'];
-    const ariaLabel = al ? { "aria-label": al } : {};
-    const ref = this.refButton ? {ref: this.refButton} : {};
+    const ariaLabel = this.props['aria-label'] ? { 'aria-label': this.props['aria-label'] } : {};
+    const ref = this.refButton ? { ref: this.refButton } : {};
     return (
-      <button {...ref} id={this.id} type="button" className={`aj_btn${size}${disabled}${active}${className}`} data-toggle="popover" {...title} data-placement={placement} data-img="/abs-images/svg/ActorJsA.svg" style={this.props.style} {...ariaLabel}
-        onClick={(e) => {
-          if(!this.props.disabled) {
-            this.props.onClick && this.props.onClick(e);
-          }
-        }}>
-        <Icon active={active} name={this.props.icon} text={this.props.text} colorMark={this.props.colorMark}/>
-      </button>
+      <Popover heading={this.props.heading} content={this.props.content} placement={this.props.placement} shortcut={this.props.shortcut}>
+        <button {...ref} id={this.id} type="button" className={`aj_btn${size}${disabled}${active}${className}`} data-placement={placement} data-img="/abs-images/svg/ActorJsA.svg" style={this.props.style} {...title} {...ariaLabel}
+          onClick={(e) => {
+            if(!this.props.disabled) {
+              this.props.onClick && this.props.onClick(e);
+            }
+          }}
+        >
+          <Icon active={active} name={this.props.icon} text={this.props.text} colorMark={this.props.colorMark} />
+        </button>
+      </Popover>
     );
   }
-  
-  _createPopover() {
-    if(!this.props.disabled && !this.$popover) {
-      const self = this;
-      const showDelay = this.props.showDelay ? this.props.showDelay : 1000;
-      const hideDelay = this.props.hideDelay ? this.props.hideDelay : 50;
-      const autoHideDelay = this.props.autoHideDelay ? this.props.autoHideDelay : 5000;
-      this.$popover = $(`#${this.id}`).popover({html:true,container:'body',delay:{show:showDelay,hide:hideDelay},trigger:'hover',content:function() {
-        const image = $(this).data('img');
-        return `<div class="bootstrap_popover"><img class="bootstrap_popover" src="${image}" />${self._getContent()}</div>`;
-      }});
-      this.$popover.on('shown.bs.popover', function () {
-        self.clearId = setTimeout(() => {
-          if(self.$popover) {
-            self.$popover.popover('hide');
-          }
-        }, autoHideDelay);
-      });
-      this.$popover.on('hidden.bs.popover', function () {
-        if(0 !== self.clearId) {
-          clearTimeout(self.clearId);
-          self.clearId = 0;
-        }
-      });
-    }
-    if(this.props.disabled && this.$popover) {
-      if(self.$popover) {
-        this.$popover.popover('destroy');
-        this.$popover = null;
-      }
-    }
-  }
-  
-  _getContent() {
-    let content = '';
-    if(typeof this.props.content === 'string') {
-      content = this.props.content;
-    }
-    else if(typeof this.props.content === 'function') {
-      content = this.props.content();
-    }
-    let innerContent = '';
-    if(typeof this.props.innerContent === 'string') {
-      innerContent = this.props.innerContent;
-    }
-    else if(typeof this.props.innerContent === 'function') {
-      innerContent = this.props.innerContent();
-    }
-    const shortcut = this.props.shortcut ? `<span class="bootstrap_popover"> (${this.props.shortcut})</span>` : '';
-    if(this.props.heading) {
-      return `<p class="bootstrap_popover_heading"><strong>${this.props.heading}: </strong>${content + shortcut + '</p>'}${innerContent}`;  
-    }
-    else {
-      return `<p class="bootstrap_popover">${content + shortcut + '</p>'}${innerContent}`;  
-    }
-  }
 }
-
-
-module.exports = ButtonNew;

package/project/client/button-text.jsx

@@ -1,142 +1,80 @@
 
-'use strict';
+// SPDX-License-Identifier: MIT; Copyright (c) 2026 Hagnell Konsulting AB
 
-import Icon from './icons-inline/icon';
-import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
-import GuidGenerator from 'z-abs-corelayer-cs/clientServer/guid-generator';
-import React from 'react';
+import { Icon } from './icons-inline/icon';
+import { Popover } from './popover';
+import * as CoreLayerClient from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import * as CoreLayerCs from 'z-abs-corelayer-cs/client/guid-generator';
+import * as React from 'react';
 
-
-class ButtonText extends ReactComponentBase {
+export class ButtonText extends CoreLayerClient.ReactComponentBase {
   constructor(props) {
     super(props);
-    this.id = this.props.id ? this.props.id : GuidGenerator.create();
-    this.$popover = null;
-    this.clearId = 0;
+    this.id = this.props.id ? this.props.id : CoreLayerCs.GuidGenerator.create();
     this.refButton = props.onLoad ? React.createRef() : null;
   }
   
   shouldUpdate(nextProps, nextState) {
     return !this.shallowCompare(this.props.active, nextProps.active)
-      || !this.shallowCompare(this.props.content, nextProps.content)
       || !this.shallowCompare(this.props.disabled, nextProps.disabled)
       || !this.shallowCompare(this.props.heading, nextProps.heading)
+      || !this.shallowCompare(this.props.content, nextProps.content)
       || !this.shallowCompare(this.props.text, nextProps.text)
       || !this.shallowCompare(this.props.placement, nextProps.placement)
       || !this.shallowCompare(this.props.shortcut, nextProps.shortcut);
   }
   
   didMount() {
-    this._createPopover();
     if(this.refButton) {
       this.props.onLoad(this.refButton.current);
     }
   }
   
-  didUpdate() {
-    this._createPopover();
-    if(null !== this.$popover) {
-      const popover = this.$popover.data('bs.popover');
-      if(null !== popover.tip()[0].lastChild.firstChild) {
-        popover.tip()[0].lastChild.firstChild.lastChild.outerHTML = this._getContent();
-      }
-    }
-  }
-  
-  willUnmount() {
-    this.onHide();
-  }
-  
-  onHide() {
-    if(0 !== this.clearId) {
-      clearTimeout(this.clearId);
-      this.clearId = 0;
-    }
-    if(null !== this.$popover) {
-      this.$popover.popover('destroy');
-      this.$popover = null;
-    }
-  }
-  
   render() {
-    const placement = this.props.placement ? this.props.placement : 'bottom';
+    const placement = this.props.placement || 'bottom';
     const title = this.props.title ? { title: this.props.title } : {};
     const size = this.props.size ? ` ${this.props.size}` : ' aj_btn_xs';
     const active = this.props.active ? ' active' : '';
     const disabled = this.props.disabled ? ' disabled' : '';
     const className = this.props.className ? ` ${this.props.className}` : '';
-    const al = this.props['aria-label'];
-    const ariaLabel = al ? { "aria-label": al } : {};
-    const ref = this.refButton ? {ref: this.refButton} : {};
+    const ariaLabel = this.props['aria-label'] ? { 'aria-label': this.props['aria-label'] } : {};
+    const ref = this.refButton ? { ref: this.refButton } : {};
     return (
-      <button {...ref} id={this.id} type="button" className={`aj_btn${size}${disabled}${active}${className} aj_btn_txt_xs`} data-toggle="popover" {...title} data-placement={placement} data-img="/abs-images/svg/ActorJsA.svg" style={this.props.style} {...ariaLabel}
+      <Popover heading={this.props.heading} content={this.props.content} placement={this.props.placement} shortcut={this.props.shortcut}>
+        <button {...ref} id={this.id} type="button" className={`aj_btn${size}${disabled}${active}${className} aj_btn_txt_xs`} data-placement={placement} data-img="/abs-images/svg/ActorJsA.svg" style={this.props.style} {...title} {...ariaLabel}
+          onClick={(e) => {
+            if(!this.props.disabled) {
+              this.props.onClick && this.props.onClick(e);
+            }
+          }}
+        >
+          <Icon active={active} name={this.props.icon} text={this.props.text} colorMark={this.props.colorMark} />
+          <span>{this.props.text}</span>
+        </button>
+      </Popover>
+    );
+    /*return (
+      <button {...ref} id={this.id} type="button"
+        className={`aj_btn${size}${disabled}${active}${className} aj_btn_txt_xs`}
+        data-placement={placement}
+        data-img="/abs-images/svg/ActorJsA.svg"
+        style={this.props.style}
+        {...title}
+        {...ariaLabel}
         onClick={(e) => {
-          if(!this.props.disabled) {
+          if (!this.props.disabled) {
             this.props.onClick && this.props.onClick(e);
           }
-        }}>
-        <Icon active={active} name={this.props.icon} text={this.props.text} colorMark={this.props.colorMark}/>
+        }}
+      >
+        <Icon
+          active={active}
+          name={this.props.icon}
+          text={this.props.text}
+          colorMark={this.props.colorMark}
+        />
         <span>{this.props.text}</span>
       </button>
-    );
-  }
-  
-  _createPopover() {
-    if(!this.props.disabled && !this.$popover) {
-      const self = this;
-      const showDelay = this.props.showDelay ? this.props.showDelay : 1000;
-      const hideDelay = this.props.hideDelay ? this.props.hideDelay : 50;
-      const autoHideDelay = this.props.autoHideDelay ? this.props.autoHideDelay : 5000;
-      this.$popover = $(`#${this.id}`).popover({html:true,container:'body',delay:{show:showDelay,hide:hideDelay},trigger:'hover',content:function() {
-        const image = $(this).data('img');
-        return `<div class="bootstrap_popover"><img class="bootstrap_popover" src="${image}" />${self._getContent()}</div>`;
-      }});
-      this.$popover.on('shown.bs.popover', function () {
-        self.clearId = setTimeout(() => {
-          if(self.$popover) {
-            self.$popover.popover('hide');
-          }
-        }, autoHideDelay);
-      });
-      this.$popover.on('hidden.bs.popover', function () {
-        if(0 !== self.clearId) {
-          clearTimeout(self.clearId);
-          self.clearId = 0;
-        }
-      });
-    }
-    if(this.props.disabled && this.$popover) {
-      if(self.$popover) {
-        this.$popover.popover('destroy');
-        this.$popover = null;
-      }
-    }
-  }
-  
-  _getContent() {
-    let content = '';
-    if(typeof this.props.content === 'string') {
-      content = this.props.content;
-    }
-    else if(typeof this.props.content === 'function') {
-      content = this.props.content();
-    }
-    let innerContent = '';
-    if(typeof this.props.innerContent === 'string') {
-      innerContent = this.props.innerContent;
-    }
-    else if(typeof this.props.innerContent === 'function') {
-      innerContent = this.props.innerContent();
-    }
-    const shortcut = this.props.shortcut ? `<span class="bootstrap_popover"> (${this.props.shortcut})</span>` : '';
-    if(this.props.heading) {
-      return `<p class="bootstrap_popover_heading"><strong>${this.props.heading}: </strong>${content + shortcut + '</p>'}${innerContent}`;  
-    }
-    else {
-      return `<p class="bootstrap_popover">${content + shortcut + '</p>'}${innerContent}`;  
-    }
+    );*/
   }
 }
-
-
-module.exports = ButtonText;

package/project/client/button.jsx

@@ -1,15 +1,15 @@
 
-'use strict';
+// SPDX-License-Identifier: MIT; Copyright (c) 2026 Hagnell Konsulting AB
 
-import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
-import GuidGenerator from 'z-abs-corelayer-cs/clientServer/guid-generator';
-import React from 'react';
+import * as CoreLayerClient from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import * as CoreLayerCs1 from 'z-abs-corelayer-cs/client/guid-generator';
+import * as React from 'react';
 
 
-class Button extends ReactComponentBase {
+export class Button extends CoreLayerClient.ReactComponentBase {
   constructor(props) {
     super(props);
-    this.id = this.props.id ? this.props.id : GuidGenerator.create();
+    this.id = this.props.id ? this.props.id : CoreLayerCs.GuidGenerator.create();
     this.$popover = null;
     this.clearId = 0;
     this.refButton = props.onLoad ? React.createRef() : null;
@@ -135,6 +135,3 @@ class Button extends ReactComponentBase {
     }
   }
 }
-
-
-module.exports = Button;

package/project/client/core-components/{button.jsx → orig-button.jsx}

@@ -1,15 +1,15 @@
 
-'use strict';
+// SPDX-License-Identifier: MIT; Copyright (c) 2026 Hagnell Konsulting AB
 
-import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
-import GuidGenerator from 'z-abs-corelayer-cs/clientServer/guid-generator';
-import React from 'react';
+import * as CoreLayerClient from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import * as CoreLayerCs1 from 'z-abs-corelayer-cs/client/guid-generator';
+import * as React from 'react';
 
 
-class Button extends ReactComponentBase {
+export class OrigButton extends CoreLayerClient.ReactComponentBase {
   constructor(props) {
     super(props);
-    this.id = this.props.id ? this.props.id : GuidGenerator.create();
+    this.id = this.props.id ? this.props.id : CoreLayerCs.GuidGenerator.create();
     this.$popover = null;
     this.clearId = 0;
     this.refButton = props.onLoad ? React.createRef() : null;
@@ -134,6 +134,3 @@ class Button extends ReactComponentBase {
     }
   }
 }
-
-
-module.exports = Button;

package/project/client/css/button.css

@@ -20,6 +20,8 @@ button.aj_btn {
 }
 
 div.aj_btn_group {
+  position:relative;
+  float:left;
   display:inline-flex;
   padding-left:4px;
 }

package/project/client/css/modal.css

@@ -1,4 +1,4 @@
 
 div.modal_dialog{
   width:fit-content;
-}
+}

package/project/client/css/original/bootstrap.css

@@ -5382,7 +5382,7 @@ button.close {
   top: 0;
   left: 0;
   z-index: 1060;
-  display: none;
+  display: block;
   max-width: 276px;
   padding: 1px;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;