blue-web 1.11.0 → 1.12.0

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

@@ -1 +1 @@
-(()=>{"use strict";class t extends HTMLElement{startX=0;startY=0;constructor(){super(),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",t)})();
+(()=>{"use strict";class t extends HTMLElement{startX=0;startY=0;constructor(){super(),this.attachShadow({mode:"open"})}static get observedAttributes(){return["disabled"]}connectedCallback(){this.render()}attributeChangedCallback(t,e,n){"disabled"===t&&this.updateDisabledState()}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\n                :host([disabled]) div {\n                    background-color: transparent;\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)),this.updateDisabledState())}updateDisabledState(){const t=this.hasAttribute("disabled");this.button?.setAttribute("aria-disabled",String(t)),this.container?.setAttribute("aria-disabled",String(t))}onEditRequested(){this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("EditRequested",{bubbles:!0,composed:!0}))}onMouseDown(t){this.hasAttribute("disabled")||(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){this.hasAttribute("disabled")||"a"===t.target.tagName.toLowerCase()||this.mouseHasMovedAfterMouseDown(t)||(t.preventDefault(),this.onEditRequested())}}customElements.define("read-view",t)})();

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

@@ -3,6 +3,7 @@
  * Fires event "EditRequested" when the user clicks the read view.
  * @element read-view
  * @fires EditRequested
+ * @attr {boolean} disabled - Disables the component, preventing interactions and removing hover effects.
  * @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.
@@ -22,8 +23,11 @@ export declare class ReadView extends HTMLElement {
     private startX;
     private startY;
     constructor();
+    static get observedAttributes(): string[];
     connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private render;
+    private updateDisabledState;
     private onEditRequested;
     private onMouseDown;
     private mouseHasMovedAfterMouseDown;

package/dist/js/read-view.js

@@ -11,6 +11,7 @@ const DRAG_THRESHOLD = 5;
  * Fires event "EditRequested" when the user clicks the read view.
  * @element read-view
  * @fires EditRequested
+ * @attr {boolean} disabled - Disables the component, preventing interactions and removing hover effects.
  * @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.
@@ -33,9 +34,17 @@ class ReadView extends HTMLElement {
       mode: "open"
     });
   }
+  static get observedAttributes() {
+    return ["disabled"];
+  }
   connectedCallback() {
     this.render();
   }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "disabled") {
+      this.updateDisabledState();
+    }
+  }
   render() {
     if (!this.shadowRoot) return;
     this.shadowRoot.innerHTML = /* HTML */`
@@ -71,6 +80,10 @@ class ReadView extends HTMLElement {
                 div:hover {
                     background-color: var(--bs-secondary-bg-subtle);
                 }
+
+                :host([disabled]) div {
+                    background-color: transparent;
+                }
             </style>
             <button aria-label="Edit"></button>
             <div role="presentation">
@@ -82,14 +95,22 @@ class ReadView extends HTMLElement {
     this.button.addEventListener("click", this.onEditRequested.bind(this));
     this.container.addEventListener("click", this.onReadViewClick.bind(this));
     this.container.addEventListener("mousedown", this.onMouseDown.bind(this));
+    this.updateDisabledState();
+  }
+  updateDisabledState() {
+    const isDisabled = this.hasAttribute("disabled");
+    this.button?.setAttribute("aria-disabled", String(isDisabled));
+    this.container?.setAttribute("aria-disabled", String(isDisabled));
   }
   onEditRequested() {
+    if (this.hasAttribute("disabled")) return;
     this.dispatchEvent(new CustomEvent("EditRequested", {
       bubbles: true,
       composed: true
     }));
   }
   onMouseDown(event) {
+    if (this.hasAttribute("disabled")) return;
     this.startX = event.clientX;
     this.startY = event.clientY;
   }
@@ -97,6 +118,7 @@ class ReadView extends HTMLElement {
     return Math.abs(this.startX - event.clientX) >= DRAG_THRESHOLD || Math.abs(this.startY - event.clientY) >= DRAG_THRESHOLD;
   }
   onReadViewClick(event) {
+    if (this.hasAttribute("disabled")) return;
     const target = event.target;
     if (target.tagName.toLowerCase() !== "a" && !this.mouseHasMovedAfterMouseDown(event)) {
       event.preventDefault();