gov-gui/dist/components/gov-card.js

Gov UI Component Library Typscript Build

import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { g as getGlobalPropsClasses, a as getAnimationClasses } from './animation-helpers.js';
import { d as defineCustomElement$3 } from './gov-button2.js';
import { d as defineCustomElement$2 } from './gov-icon2.js';

const govCardCss = ":host{display:block}.card{display:flex;background:var(--white-color);border-radius:12px;border:1px solid var(--white-color);box-shadow:0 2px 5px rgba(0, 0, 0, 0.1);overflow:hidden;min-width:300px}.card.vertical{flex-direction:column;max-width:400px}.card.horizontal{flex-direction:row;max-width:600px}.image-container{position:relative;overflow:hidden}.image-container[data-clip=\"cover\"] img{width:100%;height:100%;object-fit:cover}.image-container[data-clip=\"contain\"] img{width:100%;height:100%;object-fit:contain}.image-container[data-clip=\"fill\"] img{width:100%;height:100%;object-fit:fill}.image-container[data-clip=\"none\"] img{width:auto;height:auto}.card.vertical .image-container{aspect-ratio:16/9}.card.horizontal .image-container{width:40%;min-width:150px}img{display:block}.content{padding:1rem;color:var(--black-color);flex:1;display:flex;flex-direction:column}h2{margin:0 0 0.5rem 0;font-size:1.25rem}.description{margin:0 0 1rem 0;font-size:14px;line-height:1.5;color:var(--black-color);position:relative;max-height:4.5em;overflow:hidden}.description.expanded{max-height:none}.text-wrapper{display:inline}.description .show-more,.description .show-less{color:var(--primary-color);cursor:pointer;margin-left:5px;font-weight:bold;position:absolute;bottom:0;right:0;background:var(--white-color);padding-left:5px}.description.expanded .show-more{display:none}.description:not(.expanded) .show-less{display:none}button{background-color:var(--primary-color);color:var(--white-color);border:none;padding:0.5rem 1rem;border-radius:4px;cursor:pointer;font-size:14px;transition:opacity 0.2s;align-self:flex-start}button:hover{opacity:0.9}@media (max-width: 480px){.card.horizontal{flex-direction:column}.card.horizontal .image-container{width:100%;aspect-ratio:16/9}}";
const GovCardStyle0 = govCardCss;

const MyCard = /*@__PURE__*/ proxyCustomElement(class MyCard extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.cardButtonClicked = createEvent(this, "cardButtonClicked", 7);
        this.buttonText = 'Learn More';
        this.showButton = true;
        this.alignment = 'vertical';
        this.imageClip = 'cover';
        this.isTextExpanded = false;
        this.isTextOverflowing = false;
        this.animationDelay = '2s';
        this.allClasses = '';
        this.handleButtonClick = () => {
            this.cardButtonClicked.emit();
        };
        this.toggleTextExpansion = () => {
            this.isTextExpanded = !this.isTextExpanded;
        };
        this.truncateButtonText = (text) => {
            const words = text.split(' ');
            return words.length > 4 ? words.slice(0, 4).join(' ') + '...' : text;
        };
    }
    //watching for any change in animations to trigger them
    watchAnimations() {
        this.provideClass();
    }
    watchAnimationsDelay() {
        this.provideClass();
    }
    watchAnimationsSpeed() {
        this.provideClass();
    }
    // inject the animations and styles on component load
    componentWillLoad() {
        const animationClasses = getAnimationClasses({
            animation: this.animation,
            animationDelay: this.animationDelay,
            animationSpeed: this.animationSpeed
        });
        this.allClasses = getGlobalPropsClasses({
            classes: ' ' + animationClasses,
        });
    }
    //Called on change of any animation related property to trigger change
    provideClass() {
        const animationClasses = getAnimationClasses({
            animation: this.animation,
            animationDelay: this.animationDelay,
            animationSpeed: this.animationSpeed
        });
        this.allClasses = getGlobalPropsClasses({
            classes: ' ' + animationClasses,
        });
    }
    componentDidRender() {
        this.checkTextOverflow();
    }
    checkTextOverflow() {
        const descriptionEl = this.el.shadowRoot.querySelector('.text-wrapper');
        if (descriptionEl) {
            // Create a clone to measure height without expansion
            const cloneEl = descriptionEl.cloneNode(true);
            cloneEl.style.display = 'block';
            cloneEl.style.position = 'absolute';
            cloneEl.style.visibility = 'hidden';
            cloneEl.style.maxHeight = 'none';
            this.el.shadowRoot.appendChild(cloneEl);
            // Check if text exceeds 3 lines
            const lineHeight = parseFloat(getComputedStyle(descriptionEl).lineHeight);
            this.isTextOverflowing = cloneEl.offsetHeight > lineHeight * 0.80;
            // Remove the clone
            this.el.shadowRoot.removeChild(cloneEl);
        }
    }
    render() {
        return (h("div", { key: '95176abac3afa1afbb003e03027d385984092f9e', class: `card ${this.alignment} ${this.allClasses}` }, this.imageSrc && (h("div", { key: '9c4246e729997e1d03a0555e56c6e4882bea672c', class: "image-container", "data-clip": this.imageClip }, h("img", { key: '8c0ac547a72589796724f007f940cd8e0f939c3f', src: this.imageSrc, alt: this.cardTitle, "data-clip": this.imageClip }))), h("div", { key: '78592d4741da5ec6fd67285d6a888f1d1b863777', class: "content" }, h("h2", { key: '04d942e1adc8ee267506822101876b53934ea208' }, this.cardTitle), h("div", { key: '4ca86e67b0856313faef6127ac79e774c2f22fb1', class: `description ${this.isTextExpanded ? 'expanded' : ''}` }, h("div", { key: '4800fb57ca26179381dedb919f80ba5bbfb02b98', class: "text-wrapper" }, this.description), this.isTextOverflowing && (h("span", { key: 'a649fc740fe05a2267bd2defa576df6bdc2900b1', class: "show-more", onClick: this.toggleTextExpansion }, "Show more")), this.isTextExpanded && (h("span", { key: '3cf53bd1b4a4ebf4607b9c74e1901c9b1045d200', class: "show-less", onClick: this.toggleTextExpansion }, "Show less"))), h("slot", { key: '6eee54b04a53ceda219e7dadbac73e6127df38e7', name: "content" }), this.showButton && (h("gov-button", { key: '7aae0c1b3b87811231cf7fec1984ffa854a012ef', onClick: this.handleButtonClick, label: this.truncateButtonText(this.buttonText) })))));
    }
    get el() { return this; }
    static get watchers() { return {
        "animation": ["watchAnimations"],
        "animationDelay": ["watchAnimationsDelay"],
        "animationSpeed": ["watchAnimationsSpeed"]
    }; }
    static get style() { return GovCardStyle0; }
}, [1, "gov-card", {
        "cardTitle": [1, "card-title"],
        "description": [1],
        "imageSrc": [1, "image-src"],
        "buttonText": [1, "button-text"],
        "showButton": [4, "show-button"],
        "alignment": [513],
        "imageClip": [1, "image-clip"],
        "animation": [1],
        "animationDelay": [1, "animation-delay"],
        "animationSpeed": [1, "animation-speed"],
        "isTextExpanded": [32],
        "isTextOverflowing": [32]
    }, undefined, {
        "animation": ["watchAnimations"],
        "animationDelay": ["watchAnimationsDelay"],
        "animationSpeed": ["watchAnimationsSpeed"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["gov-card", "gov-button", "gov-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "gov-card":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, MyCard);
            }
            break;
        case "gov-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "gov-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const GovCard = MyCard;
const defineCustomElement = defineCustomElement$1;

export { GovCard, defineCustomElement };

//# sourceMappingURL=gov-card.js.map