blue-web 1.8.0 → 1.9.0

package/dist/js/edit-view.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";class e extends HTMLElement{connectedCallback(){this.render()}disconnectedCallback(){this.confirmTimeout&&clearTimeout(this.confirmTimeout)}render(){const e=document.createElement("form");e.style.position="relative";const t=Array.from(this.childNodes);this.appendChild(e),t.forEach((t=>e.appendChild(t))),e.addEventListener("submit",this.onSubmit.bind(this)),e.addEventListener("keydown",this.onKeydown.bind(this)),e.addEventListener("focusout",this.onFocusout.bind(this))}onSubmit(e){e.preventDefault(),this.confirm()}onKeydown(e){"Esc"!==e.key&&"Escape"!==e.key||this.dismiss()}onFocusout(e){this.contains(e.relatedTarget)||(this.confirmTimeout&&clearTimeout(this.confirmTimeout),this.confirmTimeout=setTimeout((()=>{this.confirm(),this.confirmTimeout=null}),500))}confirm(){this.dispatchEvent(new CustomEvent("Confirm",{bubbles:!0,composed:!0}))}dismiss(){this.dispatchEvent(new CustomEvent("Dismiss",{bubbles:!0,composed:!0}))}}customElements.define("edit-view",e)})();

package/dist/js/edit-view.d.ts

@@ -0,0 +1,14 @@
+/**
+ * EditView is a Custom Element that displays a edit view of its content and allows the user to confirm or dismiss the changes.
+ */
+export declare class EditView extends HTMLElement {
+    private confirmTimeout;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private render;
+    private onSubmit;
+    private onKeydown;
+    private onFocusout;
+    private confirm;
+    private dismiss;
+}

package/dist/js/edit-view.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditView = void 0;
+/**
+ * EditView is a Custom Element that displays a edit view of its content and allows the user to confirm or dismiss the changes.
+ */
+class EditView extends HTMLElement {
+  connectedCallback() {
+    this.render();
+  }
+  disconnectedCallback() {
+    if (this.confirmTimeout) {
+      clearTimeout(this.confirmTimeout);
+    }
+  }
+  render() {
+    const root = document.createElement("form");
+    root.style.position = "relative";
+    const children = Array.from(this.childNodes);
+    this.appendChild(root);
+    children.forEach(child => root.appendChild(child));
+    root.addEventListener("submit", this.onSubmit.bind(this));
+    root.addEventListener("keydown", this.onKeydown.bind(this));
+    root.addEventListener("focusout", this.onFocusout.bind(this));
+  }
+  onSubmit(e) {
+    e.preventDefault();
+    this.confirm();
+  }
+  onKeydown(e) {
+    if (e.key === "Esc" || e.key === "Escape") {
+      this.dismiss();
+    }
+  }
+  onFocusout(e) {
+    if (!this.contains(e.relatedTarget)) {
+      if (this.confirmTimeout) {
+        clearTimeout(this.confirmTimeout);
+      }
+      this.confirmTimeout = setTimeout(() => {
+        this.confirm();
+        this.confirmTimeout = null;
+      }, 500);
+    }
+  }
+  confirm() {
+    this.dispatchEvent(new CustomEvent("Confirm", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  dismiss() {
+    this.dispatchEvent(new CustomEvent("Dismiss", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+}
+exports.EditView = EditView;
+customElements.define("edit-view", EditView);

package/dist/js/progress.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";window.blueWeb=window.blueWeb||{},window.blueWeb.progress={progress:0},window.blueWeb.progress={...window.blueWeb.progress,start:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"blueWebProgress",r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document.body,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Loading data",o=document.getElementById(e);o||(o=document.createElement("div"),o.id=e,o.className="progress fixed-top rounded-0",o.setAttribute("style","--bs-progress-height: 0.25rem"),o.setAttribute("role","progressbar"),o.setAttribute("aria-label",s),o.setAttribute("aria-valuemin","0"),o.setAttribute("aria-valuemax","100"),o.innerHTML='<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>',r.appendChild(o));const t=o.querySelector(".progress-bar");if(t){window.blueWeb.progress.progress=0;var i=setInterval((function(){var e,r=5*Math.random();window.blueWeb.progress.progress+=r,window.blueWeb.progress.progress=Math.min(window.blueWeb.progress.progress,100),t.style.width=window.blueWeb.progress.progress+"%",null===(e=o)||void 0===e||e.setAttribute("aria-valuenow",Math.round(window.blueWeb.progress.progress).toString()),window.blueWeb.progress.progress>=100&&clearInterval(i)}),200)}},stop:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"blueWebProgress";const r=document.getElementById(e);r&&(window.blueWeb.progress.progress=100,setTimeout((()=>{r.remove()}),500))}},window.blueWeb.progress})();
+(()=>{"use strict";window.blueWeb=window.blueWeb||{},window.blueWeb.progress={progress:0},window.blueWeb.progress={...window.blueWeb.progress,start:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"blueWebProgress",r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document.body,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Loading data",t=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"fixed-top";const o="string"==typeof r||r instanceof String?document.querySelector(r.toString()):r;let n=document.getElementById(e);n||(n=document.createElement("div"),n.id=e,n.className="progress ".concat(t," rounded-0"),n.setAttribute("style","--bs-progress-height: 0.25rem"),n.setAttribute("role","progressbar"),n.setAttribute("aria-label",s),n.setAttribute("aria-valuemin","0"),n.setAttribute("aria-valuemax","100"),n.innerHTML='<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>',o.appendChild(n));const i=n.querySelector(".progress-bar");if(i){window.blueWeb.progress.progress=0;var b=setInterval((function(){var e,r=5*Math.random();window.blueWeb.progress.progress+=r,window.blueWeb.progress.progress=Math.min(window.blueWeb.progress.progress,100),i.style.width=window.blueWeb.progress.progress+"%",null===(e=n)||void 0===e||e.setAttribute("aria-valuenow",Math.round(window.blueWeb.progress.progress).toString()),window.blueWeb.progress.progress>=100&&clearInterval(b)}),200)}},stop:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"blueWebProgress";const r=document.getElementById(e);r&&(window.blueWeb.progress.progress=100,setTimeout((()=>{r.remove()}),500))}},window.blueWeb.progress})();

package/dist/js/progress.js

@@ -14,18 +14,20 @@ window.blueWeb.progress = {
     let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "blueWebProgress";
     let parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
     let ariaLabel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "Loading data";
+    let positionClass = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "fixed-top";
+    const parentEl = typeof parent === "string" || parent instanceof String ? document.querySelector(parent.toString()) : parent;
     let progressEl = document.getElementById(id);
     if (!progressEl) {
       progressEl = document.createElement("div");
       progressEl.id = id;
-      progressEl.className = "progress fixed-top rounded-0";
+      progressEl.className = "progress ".concat(positionClass, " rounded-0");
       progressEl.setAttribute("style", "--bs-progress-height: 0.25rem");
       progressEl.setAttribute("role", "progressbar");
       progressEl.setAttribute("aria-label", ariaLabel);
       progressEl.setAttribute("aria-valuemin", "0");
       progressEl.setAttribute("aria-valuemax", "100");
       progressEl.innerHTML = /*html*/"<div class=\"progress-bar progress-bar-striped progress-bar-animated\" style=\"width: 0%\"></div>";
-      parent.appendChild(progressEl);
+      parentEl.appendChild(progressEl);
     }
     const progressBar = progressEl.querySelector(".progress-bar");
     if (!progressBar) return;

package/dist/js/read-view.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";var t={};function e(t,e,n){return(e=function(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}t.d=(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);class n extends HTMLElement{constructor(){super(),e(this,"startX",0),e(this,"startY",0),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}render(){this.shadowRoot&&(this.shadowRoot.innerHTML='\n            <style>\n                button {\n                    display: block;\n                    margin: 0;\n                    padding: 0;\n                    appearance: none;\n                    background-color: transparent;\n                    border: none;\n                    line-height: 1;\n                    outline: 0;\n                }\n\n                button:focus-visible + div {\n                    outline: 0;\n                    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 25%);\n                    border-color: rgba(var(--bs-primary-rgb), 50%);\n                }\n\n                div {\n                    display: inline-block;\n                    box-sizing: border-box;\n                    width: auto;\n                    max-width: 100%;\n                    border-color: transparent;\n                    border-radius: var(--bs-border-radius-sm, 3px);\n                    border: 1px solid transparent;\n                    transition: background 0.2s;\n                }\n\n                div:hover {\n                    background-color: var(--bs-secondary-bg-subtle);\n                }\n            </style>\n            <button aria-label="Edit"></button>\n            <div role="presentation">\n                <slot></slot>\n            </div>\n        ',this.button=this.shadowRoot.querySelector("button"),this.container=this.shadowRoot.querySelector("div"),this.button.addEventListener("click",this.onEditRequested.bind(this)),this.container.addEventListener("click",this.onReadViewClick.bind(this)),this.container.addEventListener("mousedown",this.onMouseDown.bind(this)))}onEditRequested(){this.dispatchEvent(new CustomEvent("EditRequested",{bubbles:!0,composed:!0}))}onMouseDown(t){this.startX=t.clientX,this.startY=t.clientY}mouseHasMovedAfterMouseDown(t){return Math.abs(this.startX-t.clientX)>=5||Math.abs(this.startY-t.clientY)>=5}onReadViewClick(t){"a"===t.target.tagName.toLowerCase()||this.mouseHasMovedAfterMouseDown(t)||(t.preventDefault(),this.onEditRequested())}}customElements.define("read-view",n)})();

package/dist/js/read-view.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A Web Component that displays a read view of its content and allows the user to switch to an edit view.
+ * Fires event "EditRequested" when the user clicks the read view.
+ * @element read-view
+ * @fires EditRequested
+ * @cssprop --bs-primary-rgb - The primary color as an RGB value.
+ * @cssprop --bs-secondary-bg-subtle - The subtle background color for the read view.
+ * @cssprop --bs-border-radius-sm - The border radius for the read view.
+ * @slot - The content to display in the read view.
+ * @example
+ * <read-view id="my-read-view" onEditRequested="setEditing(true)">
+ *    <a href="#">bla</a> {value}
+ * </read-view>
+ * @example
+ * document.getElementById("my-read-view").addEventListener("EditRequested", () => {
+ *    setEditing(true)
+ * })
+ */
+export declare class ReadView extends HTMLElement {
+    private button;
+    private container;
+    private startX;
+    private startY;
+    constructor();
+    connectedCallback(): void;
+    private render;
+    private onEditRequested;
+    private onMouseDown;
+    private mouseHasMovedAfterMouseDown;
+    private onReadViewClick;
+}

package/dist/js/read-view.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReadView = void 0;
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const DRAG_THRESHOLD = 5;
+
+/**
+ * A Web Component that displays a read view of its content and allows the user to switch to an edit view.
+ * Fires event "EditRequested" when the user clicks the read view.
+ * @element read-view
+ * @fires EditRequested
+ * @cssprop --bs-primary-rgb - The primary color as an RGB value.
+ * @cssprop --bs-secondary-bg-subtle - The subtle background color for the read view.
+ * @cssprop --bs-border-radius-sm - The border radius for the read view.
+ * @slot - The content to display in the read view.
+ * @example
+ * <read-view id="my-read-view" onEditRequested="setEditing(true)">
+ *    <a href="#">bla</a> {value}
+ * </read-view>
+ * @example
+ * document.getElementById("my-read-view").addEventListener("EditRequested", () => {
+ *    setEditing(true)
+ * })
+ */
+class ReadView extends HTMLElement {
+  constructor() {
+    super();
+    _defineProperty(this, "startX", 0);
+    _defineProperty(this, "startY", 0);
+    this.attachShadow({
+      mode: "open"
+    });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    this.shadowRoot.innerHTML = /* HTML */"\n            <style>\n                button {\n                    display: block;\n                    margin: 0;\n                    padding: 0;\n                    appearance: none;\n                    background-color: transparent;\n                    border: none;\n                    line-height: 1;\n                    outline: 0;\n                }\n\n                button:focus-visible + div {\n                    outline: 0;\n                    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 25%);\n                    border-color: rgba(var(--bs-primary-rgb), 50%);\n                }\n\n                div {\n                    display: inline-block;\n                    box-sizing: border-box;\n                    width: auto;\n                    max-width: 100%;\n                    border-color: transparent;\n                    border-radius: var(--bs-border-radius-sm, 3px);\n                    border: 1px solid transparent;\n                    transition: background 0.2s;\n                }\n\n                div:hover {\n                    background-color: var(--bs-secondary-bg-subtle);\n                }\n            </style>\n            <button aria-label=\"Edit\"></button>\n            <div role=\"presentation\">\n                <slot></slot>\n            </div>\n        ";
+    this.button = this.shadowRoot.querySelector("button");
+    this.container = this.shadowRoot.querySelector("div");
+    this.button.addEventListener("click", this.onEditRequested.bind(this));
+    this.container.addEventListener("click", this.onReadViewClick.bind(this));
+    this.container.addEventListener("mousedown", this.onMouseDown.bind(this));
+  }
+  onEditRequested() {
+    this.dispatchEvent(new CustomEvent("EditRequested", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  onMouseDown(event) {
+    this.startX = event.clientX;
+    this.startY = event.clientY;
+  }
+  mouseHasMovedAfterMouseDown(event) {
+    return Math.abs(this.startX - event.clientX) >= DRAG_THRESHOLD || Math.abs(this.startY - event.clientY) >= DRAG_THRESHOLD;
+  }
+  onReadViewClick(event) {
+    const target = event.target;
+    if (target.tagName.toLowerCase() !== "a" && !this.mouseHasMovedAfterMouseDown(event)) {
+      event.preventDefault();
+      this.onEditRequested();
+    }
+  }
+}
+exports.ReadView = ReadView;
+customElements.define("read-view", ReadView);