gov-gui
Version:
Gov UI Component Library Demo ready Build
218 lines (213 loc) • 12.6 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h } from './p-cf89dfa6.js';
import { g as getGlobalPropsClasses } from './p-3f1f0cff.js';
import { g as getAnimationClasses } from './p-be5d7e2d.js';
import { a as accessibleLifecycle } from './p-e89af057.js';
import { d as defineCustomElement$3 } from './p-a4c404fb.js';
import { d as defineCustomElement$2 } from './p-307c52d0.js';
const govCardCss = ":host{display:block}.line-height-reference{position:absolute;opacity:0;pointer-events:none;height:auto;overflow:hidden;white-space:nowrap}.text-wrapper{overflow:hidden;transition:all 0.3s ease}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.text-wrapper.expanded{-webkit-line-clamp:unset}.truncate-toggle{display:flex;align-items:center;background:none;border:none;padding:4px 8px;margin-top:4px;font-size:0.875rem;color:var(--gov-card-link-color, #0066cc);cursor:pointer;transition:color 0.2s ease}.truncate-toggle:hover{color:var(--gov-card-link-hover-color, #004499);text-decoration:underline}.toggle-icon{display:inline-block;width:12px;height:12px;margin-left:4px;position:relative}.toggle-icon:before{content:\"\";position:absolute;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}.toggle-icon.down:before{border-top:6px solid currentColor;top:3px}.toggle-icon.up:before{border-bottom:6px solid currentColor;bottom:3px}.show-more{cursor:pointer;color:var(--gov-card-link-color, #0066cc);margin-top:0.5rem;font-size:0.875rem;transition:color 0.2s ease}.show-more:hover{color:var(--gov-card-link-hover-color, #004499);text-decoration:underline}.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;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;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;
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const GovCard$1 = /*@__PURE__*/ proxyCustomElement(class GovCard extends H {
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.animationDelay = '2s';
this.allClasses = '';
this.variant = 'success';
this._styles = {};
this._buttonStyles = {};
this.isTextExpanded = false;
this.isTextTruncatable = false;
this.checkTextTruncation = () => {
if (this.textRef && this.lineHeightRef) {
// First, make sure text is visible for measurement by temporarily removing line-clamp
const hasLineClamp = this.textRef.classList.contains('line-clamp-3');
if (hasLineClamp) {
this.textRef.classList.remove('line-clamp-3');
}
// Get the line height from our single-line reference element
const lineHeight = this.lineHeightRef.clientHeight;
// Calculate how many lines would be needed for the full text
const fullTextHeight = this.textRef.scrollHeight;
const threeLineHeight = lineHeight * 3;
// Restore line-clamp if it was there
if (hasLineClamp) {
this.textRef.classList.add('line-clamp-3');
}
// If the full text height is greater than three lines, it's truncatable
this.isTextTruncatable = fullTextHeight > threeLineHeight;
}
else {
console.log('Missing refs:', { textRef: !!this.textRef, lineHeightRef: !!this.lineHeightRef });
}
};
this.handleButtonClick = () => {
this.cardButtonClicked.emit();
};
this.toggleTextExpansion = () => {
this.isTextExpanded = !this.isTextExpanded;
// Force recalculation after toggling
setTimeout(() => this.checkTextTruncation(), 50);
};
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();
}
watchStyles(newValue) {
if (typeof newValue === 'string') {
try {
this._styles = JSON.parse(newValue);
}
catch (e) {
console.error('Failed to parse styles:', e);
this._styles = {};
}
}
else {
this._styles = newValue || {};
}
}
watchButtonStyles(newValue) {
if (typeof newValue === 'string') {
try {
this._buttonStyles = JSON.parse(newValue);
}
catch (e) {
console.error('Failed to parse styles:', e);
this._buttonStyles = {};
}
}
else {
this._buttonStyles = newValue || {};
}
}
connectedCallback() {
// Any component-specific setup here
}
// inject the animations and styles on component load
componentWillLoad() {
this.watchStyles(this.styles);
this.watchButtonStyles(this.buttonStyles);
this.provideClass();
}
//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: this.classes + ' ' + animationClasses,
variant: this.variant,
size: this.size,
});
}
componentDidLoad() {
// Run the check after component is fully loaded
setTimeout(() => {
this.checkTextTruncation();
}, 100);
// Add resize listener
window.addEventListener('resize', this.checkTextTruncation);
}
disconnectedCallback() {
// Clean up resize listener
window.removeEventListener('resize', this.checkTextTruncation);
}
render() {
return (h("div", { key: '4f8b0095b4b93ea64ca22eae0c3268d53c55310d', class: `card ${this.alignment} ${this.allClasses}`, style: Object.assign({}, this._styles) }, this.imageSrc && (h("div", { key: 'b3ae76333e16ba099efa2f2b74aab432d92924d0', class: "image-container", "data-clip": this.imageClip }, h("img", { key: '42c7645a55a58726ca2dcc012b79711c7f6c46ff', src: this.imageSrc || '/placeholder.svg', alt: this.cardTitle, "data-clip": this.imageClip }))), h("div", { key: 'c781bf9e85f924a6329fafdc6a22064f259611fa', class: "content" }, this.cardTitle && h("h2", { key: 'ef599c630328d457053157870c81edafdb04f5ce' }, this.cardTitle), this.description && (h("div", { key: '4f205fb3f610c7ed3cd8b92d72ee244470fd7c0b', class: "description", style: { maxHeight: this.isTextExpanded ? '' : '4.5em' } }, h("div", { key: '169c1f2f5c169899658c1cd2fd6316737fdb6850', ref: el => (this.lineHeightRef = el), class: "line-height-reference", "aria-hidden": "true" }, "Sample Text"), h("div", { key: '43092983e4b56770dbbef74fe0c4de5a8a4be8b5', ref: el => (this.textRef = el), class: `text-wrapper ${this.isTextExpanded ? '' : 'line-clamp-3'}`, style: { display: 'block' } }, this.description), this.isTextTruncatable && (h("div", { key: 'f43f74d060a05ad6e54bba393f556a0a04a8f276', class: "show-more", onClick: this.toggleTextExpansion }, this.isTextExpanded ? 'Show less' : 'Show more')))), h("slot", { key: '3ca268f74a13739dced427cc2ad8583513a8e097' }), this.showButton == true && (h("gov-button", { key: 'a641c99b035d2db672c0d41492803a9db79cf746', styles: Object.assign({}, this._buttonStyles), onClick: this.handleButtonClick, label: this.truncateButtonText(this.buttonText) })))));
}
get el() { return this; }
static get watchers() { return {
"animation": ["watchAnimations"],
"animationDelay": ["watchAnimationsDelay"],
"animationSpeed": ["watchAnimationsSpeed"],
"styles": ["watchStyles"],
"buttonStyles": ["watchButtonStyles"]
}; }
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"],
"classes": [1],
"styles": [8],
"buttonStyles": [8, "button-styles"],
"variant": [1],
"size": [1],
"_styles": [32],
"_buttonStyles": [32],
"isTextExpanded": [32],
"isTextTruncatable": [32]
}, undefined, {
"animation": ["watchAnimations"],
"animationDelay": ["watchAnimationsDelay"],
"animationSpeed": ["watchAnimationsSpeed"],
"styles": ["watchStyles"],
"buttonStyles": ["watchButtonStyles"]
}]);
__decorate([
accessibleLifecycle('gov-card')
], GovCard$1.prototype, "connectedCallback", null);
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, GovCard$1);
}
break;
case "gov-button":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "gov-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const GovCard = GovCard$1;
const defineCustomElement = defineCustomElement$1;
export { GovCard, defineCustomElement };
//# sourceMappingURL=gov-card.js.map