@fluid-topics/ftds-link 2.1.0

package/README.md

@@ -0,0 +1,19 @@
+The design system link component
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-link
+yarn add @fluid-topics/ftds-link
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ftds-link"
+
+function render() {
+    return html` <ftds-link foo="bar"></ftds-link> `
+}
+```

package/build/define.d.ts

@@ -0,0 +1 @@
+export {};

package/build/define.js

@@ -0,0 +1,3 @@
+import { customElements } from "@fluid-topics/ft-wc-utils";
+import definitions from "./definitions";
+customElements(definitions);

package/build/definitions.d.ts

@@ -0,0 +1,5 @@
+import { FtdsLink } from "./ftds-link";
+declare const _default: {
+    "ftds-link": typeof FtdsLink;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,4 @@
+import { FtdsLink } from "./ftds-link";
+export default {
+    "ftds-link": FtdsLink,
+};

package/build/ftds-link.d.ts

@@ -0,0 +1,25 @@
+import { ClassInfo } from "lit/directives/class-map.js";
+import { ElementDefinitionsMap, FtdsBase } from "@fluid-topics/ft-wc-utils";
+import { FtdsTypographyVariants } from "@fluid-topics/ftds-typography";
+import { FtdsLinkProperties } from "./ftds-link.properties";
+export declare enum LinkTarget {
+    SELF = "_self",
+    BLANK = "_blank"
+}
+export declare class FtdsLink extends FtdsBase implements FtdsLinkProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    get linkClasses(): ClassInfo;
+    href: string;
+    variant: FtdsTypographyVariants;
+    underlined: boolean;
+    openInNewTabLabel: string;
+    target: LinkTarget;
+    static styles: import("lit").CSSResult[];
+    private readonly icon;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private resolveIcon;
+    get resolveVariantClasses(): {
+        [x: string]: boolean;
+    };
+    private onSlotchange;
+}

package/build/ftds-link.js

@@ -0,0 +1,91 @@
+var __decorate = (this && this.__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;
+};
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap, } from "lit/directives/class-map.js";
+import { FtdsBase, isSafari, safariEllipsisFix, } from "@fluid-topics/ft-wc-utils";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { FtdsIcon, FtdsIcons, } from "@fluid-topics/ftds-icon";
+import { styles } from "./ftds-link.styles";
+export var LinkTarget;
+(function (LinkTarget) {
+    LinkTarget["SELF"] = "_self";
+    LinkTarget["BLANK"] = "_blank";
+})(LinkTarget || (LinkTarget = {}));
+export class FtdsLink extends FtdsBase {
+    constructor() {
+        super(...arguments);
+        this.href = "";
+        this.variant = FtdsTypographyVariants.body2medium;
+        this.underlined = false;
+        this.openInNewTabLabel = "This link will be opened in a new tab";
+        this.target = LinkTarget.SELF;
+        this.icon = FtdsIcons.ARROW_UP_RIGHT_FROM_SQUARE;
+    }
+    get linkClasses() {
+        return {
+            "ftds-link": true,
+            "ftds-link--underlined": this.underlined,
+            ...this.resolveVariantClasses,
+            ...this.getDesignSystemBaseClasses(),
+        };
+    }
+    render() {
+        return html `
+            <a part="link"
+               target="${this.target}"
+               href="${this.href}"
+               class="${classMap(this.linkClasses)}">
+                <ftds-typography part="label"
+                                 variant="${this.variant}"
+                                 element="span"
+                                 class="ftds-link--label ${isSafari ? "ft-safari-ellipsis-fix" : ""}">
+                    <span><slot @slotchange=${this.onSlotchange}></slot></span>
+                </ftds-typography>
+                ${this.resolveIcon()}
+            </a>
+        `;
+    }
+    resolveIcon() {
+        return this.target === LinkTarget.BLANK ? html `
+            <ftds-icon aria-label="${this.openInNewTabLabel}" part="icon" .icon=${this.icon}>
+            </ftds-icon>
+        ` : html ``;
+    }
+    get resolveVariantClasses() {
+        const prefix = "ftds-link--variant-";
+        return {
+            [prefix + this.variant]: true,
+        };
+    }
+    onSlotchange() {
+        this.requestUpdate();
+    }
+}
+FtdsLink.elementDefinitions = {
+    "ftds-typography": FtdsTypography,
+    "ftds-icon": FtdsIcon,
+};
+FtdsLink.styles = [
+    safariEllipsisFix,
+    styles,
+];
+__decorate([
+    property()
+], FtdsLink.prototype, "href", void 0);
+__decorate([
+    property()
+], FtdsLink.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsLink.prototype, "underlined", void 0);
+__decorate([
+    property()
+], FtdsLink.prototype, "openInNewTabLabel", void 0);
+__decorate([
+    property()
+], FtdsLink.prototype, "target", void 0);