gov-gui
Version:
Gov UI Component Library Typscript Build
154 lines (153 loc) • 5.7 kB
JavaScript
import { h, Host } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovBreadcrumb {
constructor() {
this.breadcrumbs = [];
this.animationDelay = '2s';
this.allClasses = '';
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
componentWillLoad() {
const path = window.location.pathname;
this.breadcrumbs = path.split('/').filter(segment => segment.length > 0);
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,
});
}
capitalize(str) {
return str.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
}
render() {
const breadcrumbItems = [
h("li", { key: "home" }, h("a", { key: '1f8b062e2276b390b5acccacdb31b7602ea2bdd5', href: "/", class: "breadcrumb-item", "aria-label": "Home" }, h("gov-icon", { key: 'b51efaec137a0cf240d2177b8e0d419b5c725941', name: "home", variant: "white", size: "lg" })))
];
this.breadcrumbs.forEach((crumb, index) => {
const isLast = index === this.breadcrumbs.length - 1;
const path = `/${this.breadcrumbs.slice(0, index + 1).join('/')}`;
const label = this.capitalize(crumb);
if (index > 0) {
breadcrumbItems.push(h("span", { class: "separator", key: `separator-${index}` }, '>'));
}
breadcrumbItems.push(h("li", { key: crumb }, !isLast ? (h("a", { href: path, class: "breadcrumb-item" }, label)) : (h("span", { class: "current-page", "aria-current": "page" }, label))));
});
return (h(Host, { key: '7a8db36982c6bd92ecc52e3f872a61aff252ebc9', class: `${this.allClasses}` }, h("nav", { key: '95aed22f89ef771ccee46c787891b5f0a08e639f', "aria-label": "Breadcrumb" }, h("ul", { key: '622300d1e080b6c04e623ed93132ff6683d489cb', class: "breadcrumb-list" }, breadcrumbItems))));
}
static get is() { return "gov-breadcrumb"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["breadcrumb.css"]
};
}
static get styleUrls() {
return {
"$": ["breadcrumb.css"]
};
}
static get properties() {
return {
"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 {
"breadcrumbs": {}
};
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-breadcrumb.js.map