gov-gui
Version:
Gov UI Component Library Typscript Build
330 lines (329 loc) • 12.2 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class MyCard {
constructor() {
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) })))));
}
static get is() { return "gov-card"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-card.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-card.css"]
};
}
static get properties() {
return {
"cardTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "card-title",
"reflect": false
},
"description": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "description",
"reflect": false
},
"imageSrc": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "image-src",
"reflect": false
},
"buttonText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "button-text",
"reflect": false,
"defaultValue": "'Learn More'"
},
"showButton": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "show-button",
"reflect": false,
"defaultValue": "true"
},
"alignment": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'vertical' | 'horizontal'",
"resolved": "\"horizontal\" | \"vertical\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "alignment",
"reflect": true,
"defaultValue": "'vertical'"
},
"imageClip": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'cover' | 'contain' | 'fill' | 'none'",
"resolved": "\"contain\" | \"cover\" | \"fill\" | \"none\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "image-clip",
"reflect": false,
"defaultValue": "'cover'"
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation",
"reflect": false
},
"animationDelay": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'2s' | '3s' | '4s' | '5s'",
"resolved": "\"2s\" | \"3s\" | \"4s\" | \"5s\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-delay",
"reflect": false,
"defaultValue": "'2s'"
},
"animationSpeed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'slow' | 'slower' | 'fast' | 'faster'",
"resolved": "\"fast\" | \"faster\" | \"slow\" | \"slower\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-speed",
"reflect": false
}
};
}
static get states() {
return {
"isTextExpanded": {},
"isTextOverflowing": {}
};
}
static get events() {
return [{
"method": "cardButtonClicked",
"name": "cardButtonClicked",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-card.js.map