@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
192 lines (191 loc) • 7.04 kB
JavaScript
import { h, Host } from "@stencil/core";
import { convertPropsToClasses } from "./modus-wc-link.tailwind";
import { handleShadowDOMStyles } from "../base-component";
import { inheritAriaAttributes, inheritAttributes, sanitizeUrl, } from "../utils";
/**
* A customizable link component used to navigate to URLs.
*/
export class ModusWcLink {
constructor() {
this.inheritedAttributes = {};
/** The color of the link. */
this.color = 'primary';
/** Custom CSS class to apply to the link element. */
this.customClass = '';
/** The underline behavior of the link. */
this.underline = 'always';
}
componentWillLoad() {
handleShadowDOMStyles(this.el);
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['title']));
}
getClasses() {
const classList = ['modus-wc-link'];
const propClasses = convertPropsToClasses({
color: this.color,
underline: this.underline,
});
if (propClasses)
classList.push(propClasses);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
getRelAttribute() {
var _a;
const relValues = new Set(((_a = this.rel) !== null && _a !== void 0 ? _a : '')
.split(/\s+/)
.map((value) => value.trim())
.filter(Boolean));
if (this.target === '_blank') {
relValues.add('noopener');
relValues.add('noreferrer');
}
return relValues.size > 0 ? Array.from(relValues).join(' ') : undefined;
}
getHrefAttribute() {
var _a;
const trimmedHref = (_a = this.href) === null || _a === void 0 ? void 0 : _a.trim();
if (!trimmedHref || trimmedHref === 'undefined' || trimmedHref === 'null') {
return undefined;
}
return sanitizeUrl(trimmedHref);
}
render() {
const sanitizedHref = this.getHrefAttribute();
return (h(Host, { key: '22c340bcfde4e205d6ced4597e6404a2b08e8686' }, h("a", Object.assign({ key: '4925c2396ae4e7c7a86cf3b260370e5ef44aed7b', class: this.getClasses(), href: sanitizedHref, rel: this.getRelAttribute(), target: this.target }, this.inheritedAttributes), h("slot", { key: 'bbdddec44e7ab8dd94e7504739565dc6fd18a49e' }))));
}
static get is() { return "modus-wc-link"; }
static get originalStyleUrls() {
return {
"$": ["modus-wc-link.scss"]
};
}
static get styleUrls() {
return {
"$": ["modus-wc-link.css"]
};
}
static get properties() {
return {
"color": {
"type": "string",
"attribute": "color",
"mutable": false,
"complexType": {
"original": "| 'primary'\n | 'secondary'\n | 'tertiary'\n | 'inherit'\n | 'success'\n | 'info'\n | 'warning'\n | 'danger'",
"resolved": "\"danger\" | \"info\" | \"inherit\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The color of the link."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'primary'"
},
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Custom CSS class to apply to the link element."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"href": {
"type": "string",
"attribute": "href",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The URL to navigate to when the link is activated."
},
"getter": false,
"setter": false,
"reflect": false
},
"rel": {
"type": "string",
"attribute": "rel",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The relationship attribute for the link."
},
"getter": false,
"setter": false,
"reflect": false
},
"target": {
"type": "string",
"attribute": "target",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The browsing context for the link."
},
"getter": false,
"setter": false,
"reflect": false
},
"underline": {
"type": "string",
"attribute": "underline",
"mutable": false,
"complexType": {
"original": "'always' | 'hover' | 'none'",
"resolved": "\"always\" | \"hover\" | \"none\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The underline behavior of the link."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'always'"
}
};
}
static get elementRef() { return "el"; }
}