@polarityio/pi-external-link 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2026 ThreatConnect, Inc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all 
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,71 @@
+# Polarity Integration Component Library
+
+## External Link Component
+
+A styled link that opens in a new tab with an external link icon and customizable hover tooltip.
+
+## Installation
+
+```bash
+npm install @polarityio/pi-external-link
+```
+
+### Peer Dependencies
+
+- [lit](https://lit.dev/) ^3.0.0
+
+## Usage
+
+```javascript
+import '@polarityio/pi-external-link';
+```
+
+```html
+<!-- Basic link (displays the URL as text) -->
+<pi-external-link href="https://example.com"></pi-external-link>
+
+<!-- Link with custom display text -->
+<pi-external-link href="https://example.com" text="Visit Example"></pi-external-link>
+
+<!-- Link without icon -->
+<pi-external-link href="https://example.com" text="Example" no-icon></pi-external-link>
+
+<!-- Link with custom tooltip -->
+<pi-external-link href="https://example.com" text="Example" tooltip-text="Opens in a new tab"></pi-external-link>
+
+<!-- Link without tooltip -->
+<pi-external-link href="https://example.com" text="Example" no-tooltip></pi-external-link>
+```
+
+## API Reference
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `href` | `string` | `''` | The destination URL. Component renders nothing when empty. |
+| `text` | `string` | `''` | Display text for the link. Falls back to `href` if empty. |
+| `noIcon` | `boolean` | `false` | Hides the external-link icon when `true` |
+| `tooltipText` | `string` | `''` | Custom tooltip text. Defaults to showing the `href` when empty. |
+| `noTooltip` | `boolean` | `false` | Hides the tooltip entirely when `true` |
+
+### Slots
+
+| Slot Name | Description |
+| --- | --- |
+| `tooltip` | Custom tooltip content. Overrides both `tooltipText` and the default href tooltip. |
+
+### CSS Custom Properties
+
+| Property | Default | Description |
+| --- | --- | --- |
+| `--pi-external-link-icon-size` | `0.85em` | Size of the external-link icon |
+| `--pi-external-link-icon-color` | `currentColor` | Color of the external-link icon |
+
+## Theming
+
+Customize the appearance using CSS custom properties. This component uses design tokens from `@polarityio/pi-shared` for consistent theming across the component library.
+
+## License
+
+MIT

package/dist/component-registry.json

@@ -0,0 +1,7 @@
+{
+  "pi-external-link": {
+    "element": "pi-external-link-v1-0-0",
+    "className": "PiExternalLink",
+    "package": "@polarityio/pi-external-link"
+  }
+}

package/dist/external-link.d.ts

@@ -0,0 +1,31 @@
+import { LitElement, nothing } from 'lit';
+export declare const CUSTOM_ELEMENT_NAME: string;
+export interface PiExternalLinkProps {
+    href: string;
+    text: string;
+    noIcon: boolean;
+    tooltipText: string;
+    noTooltip: boolean;
+}
+/**
+ * A styled link that opens in a new tab with an external link icon and hover tooltip.
+ *
+ * @element pi-external-link
+ * @slot tooltip - Custom tooltip content (overrides default tooltip)
+ * @cssproperty [--pi-external-link-icon-size=0.85em] - Override the link icon size
+ * @cssproperty [--pi-external-link-icon-color=currentColor] - Override the link icon color
+ */
+export declare class PiExternalLink extends LitElement {
+    href: string;
+    text: string;
+    /** Hide the external-link icon */
+    noIcon: boolean;
+    /** Custom tooltip text (defaults to href) */
+    tooltipText: string;
+    /** Hide the tooltip entirely */
+    noTooltip: boolean;
+    static styles: import('lit').CSSResult;
+    private _renderIcon;
+    private _renderTooltip;
+    render(): typeof nothing | import('lit').TemplateResult<1>;
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { PiExternalLink, CUSTOM_ELEMENT_NAME } from './external-link.js';
+export type { PiExternalLinkProps } from './external-link.js';

package/dist/index.js

@@ -0,0 +1,118 @@
+import { css, LitElement, nothing, html as html$1 } from "lit";
+import { property } from "lit/decorators.js";
+import { unsafeStatic, html } from "lit/static-html.js";
+import { faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { defineCustomElementOnce, libraryCustomElementName } from "@polarityio/pi-shared";
+import { CUSTOM_ELEMENT_NAME as CUSTOM_ELEMENT_NAME$1, PiIcon } from "@polarityio/pi-icon";
+import { CUSTOM_ELEMENT_NAME as CUSTOM_ELEMENT_NAME$2, PiTooltip } from "@polarityio/pi-tooltip";
+const version = "1.0.0";
+const packageJson = {
+  version
+};
+const externalLinkStyles = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--pi-font-family-base, 'NotoSans', sans-serif);
+    font-size: var(--pi-size-font-base, 0.8125rem);
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  a {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--pi-size-spacing-xs, 0.25rem);
+    color: var(--pi-color-font-info, #5ba4cf);
+    text-decoration: none;
+    cursor: pointer;
+    line-height: 1.4;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  a:focus-visible {
+    outline: 2px solid var(--pi-color-border-focus, var(--pi-color-background-primary));
+    outline-offset: 2px;
+    border-radius: var(--pi-size-radius-sm, 2px);
+  }
+
+  .link-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    line-height: 0;
+    margin-bottom: 2px;
+    --pi-icon-size: var(--pi-external-link-icon-size, 0.85em);
+    --pi-icon-color: var(--pi-external-link-icon-color, currentColor);
+  }
+`;
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+defineCustomElementOnce(CUSTOM_ELEMENT_NAME$1, PiIcon);
+defineCustomElementOnce(CUSTOM_ELEMENT_NAME$2, PiTooltip);
+const CUSTOM_ELEMENT_NAME = libraryCustomElementName("external-link", packageJson.version);
+const iconTag = unsafeStatic(CUSTOM_ELEMENT_NAME$1);
+const tooltipTag = unsafeStatic(CUSTOM_ELEMENT_NAME$2);
+const _PiExternalLink = class _PiExternalLink extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.href = "";
+    this.text = "";
+    this.noIcon = false;
+    this.tooltipText = "";
+    this.noTooltip = false;
+  }
+  _renderIcon() {
+    if (this.noIcon) return nothing;
+    return html`<${iconTag} class="link-icon" .icon=${faUpRightFromSquare}></${iconTag}>`;
+  }
+  _renderTooltip() {
+    if (this.noTooltip) return nothing;
+    const defaultText = this.tooltipText || this.href;
+    return html`<${tooltipTag} placement="top" open-delay="500"><slot name="tooltip">${defaultText}</slot></${tooltipTag}>`;
+  }
+  render() {
+    if (!this.href) return nothing;
+    const displayText = this.text || this.href;
+    return html$1`
+      <a href=${this.href} target="_blank" rel="noopener noreferrer">
+        <span class="link-text">${displayText}</span>
+        ${this._renderIcon()}
+      </a>
+      ${this._renderTooltip()}
+    `;
+  }
+};
+_PiExternalLink.styles = externalLinkStyles;
+let PiExternalLink = _PiExternalLink;
+__decorateClass([
+  property({ type: String })
+], PiExternalLink.prototype, "href");
+__decorateClass([
+  property({ type: String })
+], PiExternalLink.prototype, "text");
+__decorateClass([
+  property({ type: Boolean, attribute: "no-icon" })
+], PiExternalLink.prototype, "noIcon");
+__decorateClass([
+  property({ type: String, attribute: "tooltip-text" })
+], PiExternalLink.prototype, "tooltipText");
+__decorateClass([
+  property({ type: Boolean, attribute: "no-tooltip" })
+], PiExternalLink.prototype, "noTooltip");
+export {
+  CUSTOM_ELEMENT_NAME,
+  PiExternalLink
+};

package/dist/styles/external-link.d.ts

@@ -0,0 +1 @@
+export declare const externalLinkStyles: import('lit').CSSResult;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@polarityio/pi-external-link",
+  "version": "1.0.0",
+  "description": "External link component that opens in a new tab with icon and tooltip",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/polarityio/integration-component-library.git",
+    "directory": "packages/external-link"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "import": "./dist/index.js"
+    },
+    "./component-registry.json": "./dist/component-registry.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
+    "@polarityio/pi-shared": "1.0.0",
+    "@polarityio/pi-tooltip": "1.0.0",
+    "@polarityio/pi-icon": "1.0.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  }
+}