@aquera/nile-elements 0.0.4-6 → 0.0.4-8

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.4-6",
+  "version": "0.0.4-8",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -29,3 +29,4 @@ export { NileErrorMessage } from './nile-error-message';
 export { NileFormErrorMessage } from './nile-form-error-message';
 export { NileFormHelpText } from './nile-form-help-text';
 export { NileCalendar } from './nile-calendar';
+export { NileLink} from './nile-link';

package/src/nile-link/index.ts

@@ -0,0 +1 @@
+export { NileLink} from './nile-link';

package/src/nile-link/nile-link.css.ts

@@ -0,0 +1,70 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * Link CSS
+ */
+export const styles = css`
+  :host {
+  }
+
+  .link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    user-select: none;
+    white-space: nowrap;
+    padding: 12px;
+    gap: 8px;
+    height: 38px;
+    box-sizing: border-box;
+  }
+
+  .link__label {
+    color: #005ea6;
+    text-align: center;
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+
+  .link--disabled {
+    color: rgba(0, 94, 166, 0.5);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .link:not(.link--disabled):not(.link__button):hover {
+    color: #005291;
+    text-decoration-line: underline;
+  }
+
+  .link:not(.link--disabled):not(.link__button):active {
+    color: #002f53;
+    text-decoration-line: underline;
+  }
+
+  .link__button:hover {
+    color: #005291;
+    border-radius: 4px;
+    background: #f5f7f7;
+  }
+
+  .link__button:active {
+    color: #002f53;
+    border-radius: 4px;
+    background: rgba(0, 94, 166, 0.1);
+  }
+`;
+
+export default [styles];

package/src/nile-link/nile-link.ts

@@ -0,0 +1,91 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement, state } from 'lit/decorators.js';
+import {styles} from './nile-link.css';
+import { HasSlotController } from '../slot';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import NileElement from '../internal/nile-element';
+import { watch } from '../internal/watch';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-link
+ *
+ */
+@customElement('nile-link')
+export class NileLink extends NileElement {
+
+	/**
+	 * The styles for Link
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
+
+  @state() private hasFocus = false;
+
+  /** Disables the button. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @property({ type: Boolean }) button = false;
+
+
+  private handleBlur() {
+    this.hasFocus = false;
+    this.emit('nile-blur');
+  }
+
+  private handleFocus() {
+    this.hasFocus = true;
+    this.emit('nile-focus');
+  }
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          link: true,
+          'link--disabled': this.disabled,
+          'link__button': this.button
+        })}
+        ?disabled=${ifDefined(this.disabled)}
+        title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+      >
+        <slot name="prefix" part="prefix" class="link__prefix"></slot>
+        <slot part="label" class="link__label"></slot>
+        <slot name="suffix" part="suffix" class="link__suffix"></slot>
+      </div>
+    `;
+  }
+
+
+	/* #endregion */
+}
+
+export default NileLink;
+
+declare global {
+  interface HTMLElementTagNameMap {
+     'nile-link': NileLink;
+   }
+ }