@fluid-topics/ft-link 1.1.111

package/build/ftds-link.d.ts

@@ -0,0 +1,25 @@
+import { ElementDefinitionsMap, FtdsBase } from "@fluid-topics/ft-wc-utils";
+import { FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { ClassInfo } from "lit/directives/class-map";
+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: FtTypographyVariants;
+    underlined: boolean;
+    openInNewTabLabel: string;
+    target: LinkTarget;
+    static styles: import("lit").CSSResult[];
+    private readonly icon;
+    protected render(): import("lit").TemplateResult<1>;
+    private resolveIcon;
+    get resolveVariantClasses(): {
+        [x: string]: boolean;
+    };
+    private onSlotchange;
+}

package/build/ftds-link.js

@@ -0,0 +1,92 @@
+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 { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtIcon, FtIconVariants } from "@fluid-topics/ft-icon";
+import { designSystemStyles } from "./ftds-link.styles";
+export var LinkTarget;
+(function (LinkTarget) {
+    LinkTarget["SELF"] = "_self";
+    LinkTarget["BLANK"] = "_blank";
+})(LinkTarget || (LinkTarget = {}));
+class FtdsLink extends FtdsBase {
+    constructor() {
+        super(...arguments);
+        this.href = "";
+        this.variant = FtTypographyVariants.body2medium;
+        this.underlined = false;
+        this.openInNewTabLabel = "This link will be opened in a new tab";
+        this.target = LinkTarget.SELF;
+        this.icon = "extlink-light";
+    }
+    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)}">
+                <ft-typography part="label"
+                               variant=${this.variant}
+                               element="span"
+                               class="ftds-link--label ${isSafari ? "ft-safari-ellipsis-fix" : ""}">
+                    <span><slot @slotchange=${this.onSlotchange}></slot></span>
+                </ft-typography>
+                ${this.resolveIcon()}
+            </a>
+        `;
+    }
+    resolveIcon() {
+        return this.target === LinkTarget.BLANK ? html `
+            <ft-icon aria-label="${this.openInNewTabLabel}" part="icon" .variant="${FtIconVariants.fluid_topics}" .value="${this.icon}">
+            </ft-icon>
+        ` : html ``;
+    }
+    get resolveVariantClasses() {
+        let prefix = "ftds-link--variant-";
+        return {
+            [prefix + this.variant]: true
+        };
+    }
+    onSlotchange() {
+        this.requestUpdate();
+    }
+}
+FtdsLink.elementDefinitions = {
+    "ft-typography": FtTypography,
+    "ft-icon": FtIcon
+};
+FtdsLink.styles = [
+    safariEllipsisFix,
+    designSystemStyles
+];
+__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);
+export { FtdsLink };

package/build/ftds-link.properties.d.ts

@@ -0,0 +1,4 @@
+export interface FtdsLinkProperties {
+    openInNewTab?: boolean;
+    href: string;
+}

package/build/ftds-link.properties.js

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

package/build/ftds-link.styles.d.ts

@@ -0,0 +1,2 @@
+export { link as FtdsLinkCssVariables } from "@fluid-topics/design-system-variables";
+export declare const designSystemStyles: import("lit").CSSResult;

package/build/ftds-link.styles.js

@@ -0,0 +1,98 @@
+import { css } from "lit";
+import { link } from "@fluid-topics/design-system-variables";
+import { FtIconCssVariables } from "@fluid-topics/ft-icon";
+import { designSystemVariables, setVariable } from "@fluid-topics/ft-wc-utils";
+export { link as FtdsLinkCssVariables } from "@fluid-topics/design-system-variables";
+// language=CSS
+export const designSystemStyles = css `
+
+    .ftds-link {
+        display: inline-flex;
+        align-items: baseline;
+        text-decoration: none;
+    }
+
+    .ftds-link.ftds-link--underlined .ftds-link--label {
+        text-decoration: underline;
+    }
+
+    .ftds-link:focus-visible {
+        outline: 2px solid;
+        outline-offset: 2px;
+        border-radius: ${designSystemVariables.borderRadiusS};
+    }
+
+    .ftds-link--variant-caption-2-medium,
+    .ftds-link--variant-caption-2-semibold,
+    .ftds-link--variant-caption-2-bold
+    {
+        ${setVariable(FtIconCssVariables.size, '14px')};
+    }
+
+    .ftds-link--variant-caption-1-medium,
+    .ftds-link--variant-caption-1-semibold,
+    .ftds-link--variant-caption-1-bold
+    {
+        ${setVariable(FtIconCssVariables.size, '16px')};
+    }
+
+    .ftds-link--variant-body-2-medium,
+    .ftds-link--variant-body-2-semibold,
+    .ftds-link--variant-body-2-regular
+    {
+        ${setVariable(FtIconCssVariables.size, '18px')};
+    }
+
+    .ftds--family-neutral {
+        color: ${link.neutralDefaultColor};
+    }
+
+    .ftds--family-neutral:hover {
+        color: ${link.neutralHoverColor};
+    }
+
+    .ftds--family-neutral:focus-visible {
+        color: ${link.neutralFocusColor};
+        outline-color: ${link.neutralFocusFocusRingColor};
+    }
+
+    .ftds--family-neutral:active {
+        color: ${link.neutralActiveColor};
+    }
+
+    .ftds--family-info {
+        color: ${link.infoDefaultColor};
+    }
+
+    .ftds--family-info:hover {
+        color: ${link.infoHoverColor};
+        opacity: ${link.infoHoverOpacity};
+    }
+
+    .ftds--family-info:focus-visible {
+        color: ${link.infoFocusColor};
+        outline-color: ${link.infoFocusFocusRingColor};
+    }
+
+    .ftds--family-info:active {
+        color: ${link.infoActiveColor};
+    }
+
+    .ftds--family-brand {
+        color: ${link.brandDefaultColor};
+    }
+
+    .ftds--family-brand:hover {
+        color: ${link.brandHoverColor};
+        opacity: ${link.brandHoverOpacity};
+    }
+
+    .ftds--family-brand:focus-visible {
+        color: ${link.brandFocusColor};
+        outline-color: ${link.brandFocusFocusRingColor};
+    }
+
+    .ftds--family-brand:active {
+        color: ${link.infoActiveColor};
+    }
+`;

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ftds-link.properties";
+export * from "./ftds-link";
+export * from "./ftds-link.styles";

package/build/index.js

@@ -0,0 +1,6 @@
+import { customElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsLink } from "./ftds-link";
+export * from "./ftds-link.properties";
+export * from "./ftds-link";
+export * from "./ftds-link.styles";
+customElement("ftds-link")(FtdsLink);

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@fluid-topics/ft-link",
+  "version": "1.1.111",
+  "description": "Generic link component",
+  "keywords": [
+    "Lit"
+  ],
+  "author": "Fluid Topics <devtopics@antidot.net>",
+  "license": "ISC",
+  "main": "build/index.js",
+  "web": "build/ft-link.min.js",
+  "typings": "build/index",
+  "files": [
+    "build/**/*.ts",
+    "build/**/*.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+  },
+  "dependencies": {
+    "@fluid-topics/ft-icon": "1.1.111",
+    "@fluid-topics/ft-typography": "1.1.111",
+    "@fluid-topics/ft-wc-utils": "1.1.111",
+    "lit": "3.1.0"
+  },
+  "gitHead": "23129f0e44db11e1d2c0431cedc4dde05c3241ee"
+}