diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts index 20d12f746..aa7221f6d 100644 --- a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts +++ b/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 })}> - ${this.href ? this.#renderLink() : this.#renderButton()} - + ${this.#renderContent()} `; @@ -83,6 +82,16 @@ export class UUICardBlockTypeElement extends UUICardElement { `; } + #renderContent() { + if (this.readonly) { + return html`
+ ${this.name}${this.description} +
`; + } 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; }