@aurodesignsystem/auro-hyperlink
Version:
auro-hyperlink HTML custom element
292 lines • 9.38 kB
text/typescript
export default class ComponentBase extends AuroElement {
static get properties(): {
/**
* Defines the URL of the linked page.
*/
href: {
type: StringConstructor;
reflect: boolean;
};
/**
* Defines the relationship between the current document and the linked document.
*/
rel: {
type: StringConstructor;
reflect: boolean;
};
/**
* DEPRECATED.
*/
role: {
type: StringConstructor;
reflect: boolean;
};
/**
* Defines where to open the linked document.
*/
target: {
type: StringConstructor;
reflect: boolean;
};
/**
* If true, the linked resource will be downloaded when the hyperlink is clicked.
*/
download: {
type: BooleanConstructor;
reflect: boolean;
};
/**
* If true, the auto URL re-write feature will be disabled.
*/
relative: {
type: BooleanConstructor;
reflect: boolean;
};
/**
* If true, the hyperlink will be styled for use on a dark background.
*/
ondark: {
type: BooleanConstructor;
};
/**
* Defines the type of hyperlink; accepts `nav` or `cta`.
*/
type: {
type: StringConstructor;
reflect: boolean;
};
/**
* If true and `type="cta"`, the hyperlink will have a fluid-width UI.
*/
fluid: {
type: BooleanConstructor;
};
/**
* If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests.
*/
referrerpolicy: {
type: BooleanConstructor;
reflect: boolean;
};
/**
* Sets button variant option.
* @default primary
*/
variant: {
type: StringConstructor;
reflect: boolean;
};
layout: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
shape: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
size: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
onDark: {
type: BooleanConstructor;
attribute: string;
reflect: boolean;
};
};
download: boolean;
relative: boolean;
ondark: boolean;
variant: string;
/**
* @private
*/
private layout;
/**
* @private
*/
private shape;
/**
* @private
*/
private size;
/**
* @private
*/
private defaultReferrerPolicy;
/**
* @private
*/
private ariapressed;
/**
* @private
*/
private tabIsActive;
/**
* @private
*/
private runtimeUtils;
firstUpdated(): void;
/**
* Returns a safe URI based on the provided `href` and `relative` parameters.
* If `href` is truthy, it generates a safe URL using the `safeUrl` function.
* Otherwise, it returns an empty string.
*
* @example
* // Assuming this.href = 'http://example.com' and this.relative = false
* this.safeUri; // Returns 'http://example.com'
*
* @example
* // Assuming this.href = '' or this.href = null
* this.safeUri; // Returns ''
*
* @returns {string} The safe URI or an empty string.
*/
get safeUri(): string;
/**
* Checks whether the provided URI (if available) includes the 'http' protocol.
* If the URI is truthy, it examines whether it contains 'http'.
* Otherwise, it returns false.
*
* @example
* // Assuming this.href = 'http://example.com'
* this.includesDomain; // Returns true
*
* @example
* // Assuming this.href = '/path/to/file'
* this.includesDomain; // Returns false
*
* @example
* // Assuming this.href = '' or this.href = null
* this.includesDomain; // Returns false
*
* @private
* @returns {boolean} True if the URI includes 'http', false otherwise.
*/
private get includesDomain();
/**
* Generates a safe URL based on the provided `href` and `relative` parameters.
* If `href` is falsy, it returns `undefined`.
*
* @example
* // Assuming href = 'http://example.com' and relative = false
* this.safeUrl(href, relative); // Returns 'https://example.com'
*
* @example
* // Assuming href = '/path/to/file' and relative = true
* this.safeUrl(href, relative); // Returns '/path/to/file'
*
* @example
* // Assuming href = 'javascript:alert("Hello")'
* this.safeUrl(href, relative); // Returns undefined
*
* @private
* @param {string} href - The original URL.
* @param {boolean} relative - Indicates whether the URL is relative.
* @returns {string|undefined} The safe URL or `undefined`.
*/
private safeUrl;
/**
* Generates an HTML element containing an SVG icon based on the provided `svgContent`.
*
* @example
* // Assuming svgContent = '<svg><path d="..."/></svg>'
* this.generateIconHtml(svgContent); // Returns HTML element containing the SVG icon
*
* @private
* @param {string} svgContent - The SVG content to be embedded.
* @returns {Element} The HTML element containing the SVG icon.
*/
private generateIconHtml;
/**
* Generates an icon HTML element based on the target attribute.
*
* @example
* // Assuming target = '_blank' and this.safeUri = 'http://alaskaair.com'
* this.targetIcon(target); // Returns HTML element containing the new window icon
*
* @example
* // Assuming target = '_blank' and this.safeUri = 'http://external.com'
* this.targetIcon(target); // Returns HTML element containing the external link icon
*
* @example
* // Assuming target = '_self' or this.safeUri = '/relative/path'
* this.targetIcon(target); // Returns undefined
*
* @private
* @param {string} target - The target attribute of the anchor element.
* @returns {HTMLElement|undefined} The HTML element containing the icon, or undefined if no icon is generated.
*/
private targetIcon;
/**
* Returns the state of a tab as a string.
*
* @example
* // Assuming tabIsActive = true
* this.getTabState(tabIsActive); // Returns 'is-active'
*
* @example
* // Assuming tabIsActive = false
* this.getTabState(tabIsActive); // Returns ''
*
* @private
* @param {boolean} tabIsActive - Indicates whether the tab is active.
* @returns {string} 'is-active' if the tab is active, otherwise an empty string.
*/
private getTabState;
/**
* Gets the rel attribute value based on target and rel values.
*
* @example
* // Assuming target = '_blank', rel = 'noFollow', and this.safeUri = 'http://alaskaair.com'
* this.getRelType(target, rel); // Returns 'noFollow'
*
* @example
* // Assuming target = '_blank', rel = undefined, this.safeUri = 'http://alaskaair.com', and this.includesDomain = true
* this.getRelType(target, rel); // Returns undefined
*
* @example
* // Assuming target = '_blank', rel = undefined, this.safeUri = 'http://external.com', this.includesDomain = true, and this.referrerpolicy = undefined
* this.getRelType(target, rel); // Returns 'noOpener noReferrer'
*
* @example
* // Assuming target = '_blank', rel = undefined, this.safeUri = 'http://external.com', this.includesDomain = true, and this.referrerpolicy = 'no-referrer'
* this.getRelType(target, rel); // Returns 'external'
*
* @private
* @param {string} target - The target attribute of the anchor element.
* @param {string} rel - The rel attribute of the anchor element.
* @returns {string|undefined} The rel attribute value or undefined if not applicable.
*/
private getRelType;
/**
* Sets the ARIA pressed state based on user interactions.
*
* @example
* // Assuming ariaPressed = false and user performs a mousedown event
* this.ariaPressedState(ariaPressed); // Returns true
*
* @example
* // Assuming ariaPressed = true and user performs a mouseup event
* this.ariaPressedState(ariaPressed); // Returns false
*
* @example
* // Assuming ariaPressed = false and user performs a keydown event with 'Enter' or 'Space'
* this.ariaPressedState(ariaPressed); // Returns true
*
* @example
* // Assuming ariaPressed = true and user performs a keyup event
* this.ariaPressedState(ariaPressed); // Returns false
*
* @private
* @param {boolean} ariaPressed - The initial value of the ARIA pressed state.
* @returns {boolean} The updated ARIA pressed state.
*/
private ariaPressedState;
render(): any;
}
import { AuroElement } from "./layoutElement/auroElement.js";
//# sourceMappingURL=component-base.d.mts.map