@exmg/exm-breadcrumbs 1.0.0

package/README.md

@@ -0,0 +1,62 @@
+# `<exm-breadcrumbs>` [![Published on npm](https://img.shields.io/npm/v/@exmg/exm-breadcrumbs.svg)](https://www.npmjs.com/package/@exmg/exm-breadcrumbs)
+
+# @exmg/exm-breadcrumbs
+
+Component to render breadcrumbs within a page or component with the option to enable / disable arrow seperator
+
+## Installation
+
+```sh
+npm install @exmg/exm-breadcrumbs
+```
+
+## Example Usage
+
+### Standard
+
+```js
+@state()
+private items = [
+   {href: '/home', content: 'Home page'},
+   {href: '/users', content: 'User List'},
+   {href: '/users/1234', content: 'Mark'},
+   {href: '/users/1234/details', content: 'Details'},
+ ];
+```
+
+```html
+<exm-breadcrumbs .items="${this.items}"></exm-breadcrumbs>
+```
+
+## API
+
+### Slots
+
+| Name      | Description                        |
+| --------- | ---------------------------------- |
+| _default_ | Button to handle copy to clipboard |
+
+### Properties/Attributes
+
+| Name             | Type      | Default | Description                                   |
+| ---------------- | --------- | ------- | --------------------------------------------- |
+| `items`          | `array`   | _[]_    | The items displayed by the breadcrumbs        |
+| `arrowSeperator` | `boolean` | _false_ | Whether or not to display the arrow seperator |
+
+### Methods
+
+_None_
+
+### Events
+
+_None_
+
+### CSS Custom Properties
+
+_None_
+
+## Additional references
+
+- [Additional Documentation](https://exmg.github.io/exmachina-web-components/ExmgBreadcrumbs.html)
+
+- [Demo](https://exmg.github.io/exmachina-web-components/demo/?el=exm-breadcrumbs)

package/index.d.ts

@@ -0,0 +1,6 @@
+export { BreadcrumbItem } from './src/types.js';
+export { ExmgBreadcrumbs } from './src/exm-breadcrumbs.js';
+export { ExmgBreadcrumbsBase } from './src/exm-breadcrumbs-base.js';
+export { BreadcrumbsControllerConfig, BreadcrumbsController } from './src/exm-breadcrumbs-controller.js';
+export { BreadcrumbsMixin, BreadcrumbsClass, BreadcrumbsInterface } from './src/exm-breadcrumb-mixin.js';
+export { style as breadcrumbStyles } from './src/styles/exm-breadcrumbs-styles-css.js';

package/index.js

@@ -0,0 +1,6 @@
+export { ExmgBreadcrumbs } from './src/exm-breadcrumbs.js';
+export { ExmgBreadcrumbsBase } from './src/exm-breadcrumbs-base.js';
+export { BreadcrumbsController } from './src/exm-breadcrumbs-controller.js';
+export { BreadcrumbsMixin, BreadcrumbsClass } from './src/exm-breadcrumb-mixin.js';
+export { style as breadcrumbStyles } from './src/styles/exm-breadcrumbs-styles-css.js';
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@exmg/exm-breadcrumbs",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./exm-breadcrumbs.js": "./src/exm-breadcrumbs.js"
+  },
+  "dependencies": {
+    "@exmg/lit-base": "^2.0.1",
+    "@material/typography": "^14.0.0",
+    "lit": "^3.0.0",
+    "tslib": "^2.6.2"
+  },
+  "devDependencies": {
+    "@exmg/lit-cli": "1.1.13"
+  },
+  "keywords": [
+    "web-components",
+    "lit",
+    "button"
+  ],
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "homepage": "https://github.com/exmg/exmachina-web-components",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:exmg/exm-web-components.git",
+    "directory": "packages/exm-breadcrumbs"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build:styles": "exmg-lit-cli sass -f \"./**/*.scss\""
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0907b55c89325d59902b98a64c352bf6e1fc81ff"
+}

package/src/exm-breadcrumb-mixin.d.ts

@@ -0,0 +1,31 @@
+import { ExmgBreadcrumbs } from './exm-breadcrumbs.js';
+import { ExmgElement, Constructor } from '@exmg/lit-base/index.js';
+import { BreadcrumbItem } from './types.js';
+/**
+ * @class
+ * @abstract
+ * @extends ExmgElement
+ * @property {ExmgBreadcrumbs|undefined} breadcrumbsElement - Reference to the breadcrumbs element.
+ * @property {BreadcrumbItem[]|undefined} breadcrumbs - The breadcrumbs array.
+ */
+export declare abstract class BreadcrumbsClass extends ExmgElement {
+    breadcrumbsElement?: ExmgBreadcrumbs;
+    breadcrumbs?: BreadcrumbItem[];
+}
+/**
+ * @interface
+ * @extends BreadcrumbsClass
+ * @method emitSetBreadcrumbs - Emit a custom event to set breadcrumbs.
+ * @method emitResetBreadcrumbs - Emit a custom event to reset breadcrumbs.
+ */
+export interface BreadcrumbsInterface {
+    emitSetBreadcrumbs(items: BreadcrumbItem[]): void;
+    emitResetBreadcrumbs(): void;
+}
+/**
+ * @function
+ * @template T
+ * @param {T} base - The base class.
+ * @returns {Constructor<BreadcrumbsInterface> & T} - The BreadcrumbsMixin class.
+ */
+export declare const BreadcrumbsMixin: <T extends Constructor<ExmgElement & BreadcrumbsClass>>(base: T) => Constructor<BreadcrumbsInterface> & T;

package/src/exm-breadcrumb-mixin.js

@@ -0,0 +1,92 @@
+import { __decorate } from "tslib";
+import { observer, ExmgElement } from '@exmg/lit-base/index.js';
+import { property } from 'lit/decorators.js';
+/**
+ * @class
+ * @abstract
+ * @extends ExmgElement
+ * @property {ExmgBreadcrumbs|undefined} breadcrumbsElement - Reference to the breadcrumbs element.
+ * @property {BreadcrumbItem[]|undefined} breadcrumbs - The breadcrumbs array.
+ */
+export class BreadcrumbsClass extends ExmgElement {
+}
+/**
+ * @function
+ * @template T
+ * @param {T} base - The base class.
+ * @returns {Constructor<BreadcrumbsInterface> & T} - The BreadcrumbsMixin class.
+ */
+export const BreadcrumbsMixin = (base) => {
+    /**
+     * @class
+     * @extends base
+     * @implements BreadcrumbsInterface
+     * @property {function} setBreadcrumbsBind - The binded setBreadcrumbs function.
+     * @property {function} resetBreadcrumbsBind - The binded resetBreadcrumbs function.
+     * @property {BreadcrumbItem[]|undefined} breadcrumbs - The breadcrumbs array.
+     */
+    class BreadcrumbsState extends base {
+        /**
+         * Emit a custom event to set breadcrumbs from anywhere in the application.
+         * @param {BreadcrumbItem[]} items - The breadcrumbs array.
+         * @returns {void}
+         */
+        emitSetBreadcrumbs(items) {
+            window.dispatchEvent(new CustomEvent('breadcrumbs-set', {
+                bubbles: true,
+                composed: true,
+                detail: { items },
+            }));
+        }
+        /**
+         * Emit a custom event to reset breadcrumbs.
+         * @returns {void}
+         */
+        emitResetBreadcrumbs() {
+            window.dispatchEvent(new CustomEvent('breadcrumbs-reset', {
+                bubbles: true,
+                composed: true,
+                detail: false,
+            }));
+        }
+        /**
+         * Reset the breadcrumbs element.
+         * @returns {void}
+         */
+        resetBreadcrumbs() {
+            this.breadcrumbsElement && (this.breadcrumbsElement.items = []);
+        }
+        /**
+         * Set the breadcrumbs element.
+         * @param {CustomEvent<{ items: BreadcrumbItem[] }>} e - The custom event.
+         * @returns {void}
+         */
+        setBreadcrumbs(e) {
+            this.breadcrumbsElement && (this.breadcrumbsElement.items = e.detail.items);
+        }
+        constructor(...args) {
+            super(args);
+            this.breadcrumbs = [];
+            this.setBreadcrumbsBind = this.setBreadcrumbs.bind(this);
+            this.resetBreadcrumbsBind = this.resetBreadcrumbs.bind(this);
+            // @ts-ignore
+            window.addEventListener('breadcrumbs-set', this.setBreadcrumbsBind);
+            window.addEventListener('breadcrumbs-reset', this.resetBreadcrumbsBind);
+        }
+        disconnectedCallback() {
+            this.emitResetBreadcrumbs();
+            // @ts-ignore
+            window.removeEventListener('breadcrumbs-set', this.setBreadcrumbsBind);
+            window.removeEventListener('breadcrumbs-reset', this.resetBreadcrumbsBind);
+            super.disconnectedCallback();
+        }
+    }
+    __decorate([
+        property({ type: Array }),
+        observer(function (breadcrumbs) {
+            this.emitSetBreadcrumbs(breadcrumbs);
+        })
+    ], BreadcrumbsState.prototype, "breadcrumbs", void 0);
+    return BreadcrumbsState;
+};
+//# sourceMappingURL=exm-breadcrumb-mixin.js.map

package/src/exm-breadcrumbs-base.d.ts

@@ -0,0 +1,17 @@
+import { BreadcrumbItem } from './types.js';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+export declare const arrowSeparator: import("lit-html").TemplateResult<1>;
+export declare class ExmgBreadcrumbsBase extends ExmgElement {
+    /**
+     * The items displayed by the breadcrumbs
+     * @type {Array}
+     */
+    items: BreadcrumbItem[];
+    /**
+     * Whether or not to display the arrow seperator
+     * @type {Boolean}
+     */
+    arrowSeperator: boolean;
+    protected renderItems(): unknown;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/exm-breadcrumbs-base.js

@@ -0,0 +1,54 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+export const arrowSeparator = html `
+  <svg height="24" viewBox="0 0 24 24" width="24" preserveAspectRatio="xMidYMid meet">
+    <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
+  </svg>
+`;
+export class ExmgBreadcrumbsBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The items displayed by the breadcrumbs
+         * @type {Array}
+         */
+        this.items = [];
+        /**
+         * Whether or not to display the arrow seperator
+         * @type {Boolean}
+         */
+        this.arrowSeperator = false;
+    }
+    renderItems() {
+        var _a;
+        const lastIndex = ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) - 1;
+        return repeat(this.items || [], ({ href, content }) => `${href}${content}`, ({ href, content }, index) => {
+            return html `
+          <li class="${classMap({ arrowSeperator: this.arrowSeperator })}">
+            <a href=${href} aria-current=${index === lastIndex ? 'page' : 'false'}>${content}</a>
+            ${this.arrowSeperator && index !== lastIndex ? arrowSeparator : nothing}
+          </li>
+        `;
+        });
+    }
+    render() {
+        return html `
+      <nav class="breadcrumb" aria-label="Breadcrumb">
+        <ol>
+          ${this.renderItems()}
+        </ol>
+      </nav>
+    `;
+    }
+}
+__decorate([
+    property({ type: Array })
+], ExmgBreadcrumbsBase.prototype, "items", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'arrow-separator', reflect: true })
+], ExmgBreadcrumbsBase.prototype, "arrowSeperator", void 0);
+//# sourceMappingURL=exm-breadcrumbs-base.js.map

package/src/exm-breadcrumbs-controller.d.ts

@@ -0,0 +1,23 @@
+import { ReactiveControllerHost } from 'lit';
+import { BreadcrumbItem } from './types.js';
+import { ExmgBreadcrumbs } from './exm-breadcrumbs.js';
+export interface BreadcrumbsControllerConfig {
+    breadcrumbsElement?: ExmgBreadcrumbs;
+}
+export declare class BreadcrumbsController {
+    _host: ReactiveControllerHost;
+    breadcrumbsElement?: ExmgBreadcrumbs;
+    setBreadcrumbsBind: (e: CustomEvent<{
+        items: BreadcrumbItem[];
+    }>) => void;
+    resetBreadcrumbsBind: () => void;
+    breadcrumbs?: BreadcrumbItem[];
+    constructor(host: ReactiveControllerHost, { breadcrumbsElement }: BreadcrumbsControllerConfig);
+    emitSetBreadcrumbs(items: BreadcrumbItem[]): void;
+    emitResetBreadcrumbs(): void;
+    resetBreadcrumbs(): void;
+    setBreadcrumbs(e: CustomEvent<{
+        items: BreadcrumbItem[];
+    }>): void;
+    hostDisconnected(): void;
+}

package/src/exm-breadcrumbs-controller.js

@@ -0,0 +1,46 @@
+import { __decorate } from "tslib";
+import { observer } from '@exmg/lit-base/index.js';
+export class BreadcrumbsController {
+    constructor(host, { breadcrumbsElement }) {
+        this.breadcrumbs = [];
+        (this._host = host).addController(this);
+        this.breadcrumbsElement = breadcrumbsElement;
+        this.setBreadcrumbsBind = this.setBreadcrumbs.bind(this);
+        this.resetBreadcrumbsBind = this.resetBreadcrumbs.bind(this);
+        // @ts-ignore
+        window.addEventListener('breadcrumbs-set', this.setBreadcrumbsBind);
+        window.addEventListener('breadcrumbs-reset', this.resetBreadcrumbsBind);
+    }
+    emitSetBreadcrumbs(items) {
+        window.dispatchEvent(new CustomEvent('breadcrumbs-set', {
+            bubbles: true,
+            composed: true,
+            detail: { items },
+        }));
+    }
+    emitResetBreadcrumbs() {
+        window.dispatchEvent(new CustomEvent('breadcrumbs-reset', {
+            bubbles: true,
+            composed: true,
+            detail: false,
+        }));
+    }
+    resetBreadcrumbs() {
+        this.breadcrumbsElement && (this.breadcrumbsElement.items = []);
+    }
+    setBreadcrumbs(e) {
+        this.breadcrumbsElement && (this.breadcrumbsElement.items = e.detail.items);
+    }
+    hostDisconnected() {
+        this.emitResetBreadcrumbs();
+        // @ts-ignore
+        window.removeEventListener('breadcrumbs-set', this.setBreadcrumbsBind);
+        window.removeEventListener('breadcrumbs-reset', this.resetBreadcrumbsBind);
+    }
+}
+__decorate([
+    observer(function (breadcrumbs) {
+        this.emitSetBreadcrumbs(breadcrumbs);
+    })
+], BreadcrumbsController.prototype, "breadcrumbs", void 0);
+//# sourceMappingURL=exm-breadcrumbs-controller.js.map

package/src/exm-breadcrumbs.d.ts

@@ -0,0 +1,30 @@
+import { ExmgBreadcrumbsBase } from './exm-breadcrumbs-base.js';
+/**
+ * exm-breadcrumbs
+ *
+ * Component to render breadcrumbs within a page or component with the option to enable / disable arrow seperator
+ *
+ *  * Example:
+ * ```js
+ * @state()
+ * private items = [
+ *    {href: '/home', content: 'Home page'},
+ *    {href: '/users', content: 'User List'},
+ *    {href: '/users/1234', content: 'Mark'},
+ *    {href: '/users/1234/details', content: 'Details'},
+ *  ];
+ * ```
+ *
+ * ```html
+ *  <exm-breadcrumbs .items="${this.items}"></exm-breadcrumbs>
+ * ```
+ *
+ */
+export declare class ExmgBreadcrumbs extends ExmgBreadcrumbsBase {
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-breadcrumbs': ExmgBreadcrumbs;
+    }
+}

package/src/exm-breadcrumbs.js

@@ -0,0 +1,33 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { style } from './styles/exm-breadcrumbs-styles-css.js';
+import { ExmgBreadcrumbsBase } from './exm-breadcrumbs-base.js';
+/**
+ * exm-breadcrumbs
+ *
+ * Component to render breadcrumbs within a page or component with the option to enable / disable arrow seperator
+ *
+ *  * Example:
+ * ```js
+ * @state()
+ * private items = [
+ *    {href: '/home', content: 'Home page'},
+ *    {href: '/users', content: 'User List'},
+ *    {href: '/users/1234', content: 'Mark'},
+ *    {href: '/users/1234/details', content: 'Details'},
+ *  ];
+ * ```
+ *
+ * ```html
+ *  <exm-breadcrumbs .items="${this.items}"></exm-breadcrumbs>
+ * ```
+ *
+ */
+let ExmgBreadcrumbs = class ExmgBreadcrumbs extends ExmgBreadcrumbsBase {
+};
+ExmgBreadcrumbs.styles = style;
+ExmgBreadcrumbs = __decorate([
+    customElement('exm-breadcrumbs')
+], ExmgBreadcrumbs);
+export { ExmgBreadcrumbs };
+//# sourceMappingURL=exm-breadcrumbs.js.map

package/src/styles/exm-breadcrumbs-styles-css.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+export default style;

package/src/styles/exm-breadcrumbs-styles-css.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `:host{display:block;--_breadcrumbs-seperator-color: var(--breadcrumbs-seperator-color, var(--md-sys-color-primary, #0071dc));--_breadcrumbs-text-color: var(--breadcrumbs-text-color, var(--md-sys-color-primary, #0071dc));--_breadcrumbs-decoration-color: var(--breadcrumbs-decoration-color, var(--md-sys-color-primary, #0071dc));--_breadcrumbs-visited-color: var(--breadcrumbs-visited-color, var(--md-sys-color-primary, #0071dc));--_breadcrumbs-current-color: var(--breadcrumbs-current-color, var(--md-sys-color-primary, #0071dc));--_breadcrumbs-item-separator-size: var(--breadcrumbs-item-separator-size, 24px);--_breadcrumbs-item-separator-padding: var(breadcrumbs-item-separator-padding, 0);display:block;color:var(--breadcrumbs-text-color)}svg{height:var(--_breadcrumbs-item-separator-size);width:var(--_breadcrumbs-item-separator-size);min-height:var(--_breadcrumbs-item-separator-size);min-width:var(--_breadcrumbs-item-separator-size);vertical-align:middle;display:inline-flex;justify-content:center;align-items:center;padding:0 var(--_breadcrumbs-item-separator-padding, 0);fill:var(--_breadcrumbs-seperator-color)}nav.breadcrumb li{display:inline}li{margin:.25em 0 .5em;padding:0}a[href]{color:var(--_breadcrumbs-text-color);text-decoration-color:var(--_breadcrumbs-decoration-color);text-decoration-skip-ink:none}a:visited{text-decoration-color:var(--_breadcrumbs-visited-color)}nav.breadcrumb ol{margin:0;padding-left:0;list-style:none}nav.breadcrumb li+li::before{display:inline-block;margin:0 .25em;transform:rotate(15deg);border-right:.1em solid var(--_breadcrumbs-seperator-color);height:.8em;content:""}:host([arrow-separator]) nav.breadcrumb li+li::before{display:none}nav.breadcrumb [aria-current=page]{color:var(--_breadcrumbs-current-color);font-weight:600;text-decoration:none}@media(max-width: 460px){.breadcrumb-item{display:none}.breadcrumb-item:first-child,.breadcrumb-item:last-child{display:initial}}`;
+export default style;
+//# sourceMappingURL=exm-breadcrumbs-styles-css.js.map

package/src/styles/exm-breadcrumbs-styles.scss

@@ -0,0 +1,79 @@
+:host {
+  display: block;
+  --_breadcrumbs-seperator-color: var(--breadcrumbs-seperator-color, var(--md-sys-color-primary, #0071dc));
+  --_breadcrumbs-text-color: var(--breadcrumbs-text-color, var(--md-sys-color-primary, #0071dc));
+  --_breadcrumbs-decoration-color: var(--breadcrumbs-decoration-color, var(--md-sys-color-primary, #0071dc));
+  --_breadcrumbs-visited-color: var(--breadcrumbs-visited-color, var(--md-sys-color-primary, #0071dc));
+  --_breadcrumbs-current-color: var(--breadcrumbs-current-color, var(--md-sys-color-primary, #0071dc));
+  --_breadcrumbs-item-separator-size: var(--breadcrumbs-item-separator-size, 24px);
+  --_breadcrumbs-item-separator-padding: var(breadcrumbs-item-separator-padding, 0);
+  display: block;
+  color: var(--breadcrumbs-text-color);
+}
+
+svg {
+  height: var(--_breadcrumbs-item-separator-size);
+  width: var(--_breadcrumbs-item-separator-size);
+  min-height: var(--_breadcrumbs-item-separator-size);
+  min-width: var(--_breadcrumbs-item-separator-size);
+  vertical-align: middle;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 var(--_breadcrumbs-item-separator-padding, 0);
+  fill: var(--_breadcrumbs-seperator-color);
+}
+
+nav.breadcrumb li {
+  display: inline;
+}
+
+li {
+  margin: 0.25em 0 0.5em;
+  padding: 0;
+}
+
+a[href] {
+  color: var(--_breadcrumbs-text-color);
+  text-decoration-color: var(--_breadcrumbs-decoration-color);
+  text-decoration-skip-ink: none;
+}
+
+a:visited {
+  text-decoration-color: var(--_breadcrumbs-visited-color);
+}
+
+nav.breadcrumb ol {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+nav.breadcrumb li + li::before {
+  display: inline-block;
+  margin: 0 0.25em;
+  transform: rotate(15deg);
+  border-right: 0.1em solid var(--_breadcrumbs-seperator-color);
+  height: 0.8em;
+  content: '';
+}
+
+:host([arrow-separator]) nav.breadcrumb li + li::before {
+  display: none;
+}
+
+nav.breadcrumb [aria-current='page'] {
+  color: var(--_breadcrumbs-current-color);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+@media (max-width: 460px) {
+  .breadcrumb-item {
+    display: none;
+  }
+  .breadcrumb-item:first-child,
+  .breadcrumb-item:last-child {
+    display: initial;
+  }
+}

package/src/types.d.ts

@@ -0,0 +1,4 @@
+export interface BreadcrumbItem {
+    href: string;
+    content: string;
+}

package/src/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map