feat: implement readonly for uui-card-block-type

packages/uui-card-block-type/lib/uui-card-block-type.element.ts

@@ -46,8 +46,7 @@ export class UUICardBlockTypeElement extends UUICardElement {
         style=${styleMap({ backgroundColor: this.background })}>
         <slot></slot>
       </div>
-      ${this.href ? this.#renderLink() : this.#renderButton()}
-
+      ${this.#renderContent()}
       <slot name="tag"></slot>
       <slot name="actions"></slot>
     `;
@@ -83,6 +82,16 @@ export class UUICardBlockTypeElement extends UUICardElement {
     `;
   }
 
+  #renderContent() {
+    if (this.readonly) {
+      return html`<div id="open-part">
+        <strong>${this.name}</strong><small>${this.description}</small>
+      </div>`;
+    } else {
+      return html` ${this.href ? this.#renderLink() : this.#renderButton()} `;
+    }
+  }
+
   static styles = [
     ...UUICardElement.styles,
     css`
@@ -135,6 +144,10 @@ export class UUICardBlockTypeElement extends UUICardElement {
         color: var(--uui-color-contrast-disabled);
       }
 
+      :host([readonly]) #open-part {
+        pointer-events: none;
+      }
+
       #open-part:hover strong {
         text-decoration: underline;
       }