@exmg/exm-breadcrumbs 0.0.2-alpha.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/ExmBreadcrumbs.html)
+
+- [Demo](https://exmg.github.io/exmachina-web-components/demo/?el=exm-breadcrumbs)

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

@@ -0,0 +1,31 @@
+import { ExmBreadcrumbs } from './exm-breadcrumbs.js';
+import { ExmgElement, Constructor } from '@exmg/lit-base/index.js';
+import { BreadcrumbItem } from './types.js';
+/**
+ * @class
+ * @abstract
+ * @extends ExmgElement
+ * @property {ExmBreadcrumbs|undefined} breadcrumbsElement - Reference to the breadcrumbs element.
+ * @property {BreadcrumbItem[]|undefined} breadcrumbs - The breadcrumbs array.
+ */
+export declare abstract class BreadcrumbsClass extends ExmgElement {
+    breadcrumbsElement?: ExmBreadcrumbs;
+    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/dist/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 {ExmBreadcrumbs|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/dist/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 ExmBreadcrumbsBase 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/dist/exm-breadcrumbs-base.js

@@ -0,0 +1,56 @@
+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 ExmBreadcrumbsBase 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=${lastIndex !== index ? 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 })
+], ExmBreadcrumbsBase.prototype, "items", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'arrow-separator', reflect: true })
+], ExmBreadcrumbsBase.prototype, "arrowSeperator", void 0);
+//# sourceMappingURL=exm-breadcrumbs-base.js.map

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

@@ -0,0 +1,23 @@
+import { ReactiveControllerHost } from 'lit';
+import { BreadcrumbItem } from './types.js';
+import { ExmBreadcrumbs } from './exm-breadcrumbs.js';
+export interface BreadcrumbsControllerConfig {
+    breadcrumbsElement?: ExmBreadcrumbs;
+}
+export declare class BreadcrumbsController {
+    _host: ReactiveControllerHost;
+    breadcrumbsElement?: ExmBreadcrumbs;
+    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/dist/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/dist/exm-breadcrumbs.d.ts

@@ -0,0 +1,30 @@
+import { ExmBreadcrumbsBase } 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 ExmBreadcrumbs extends ExmBreadcrumbsBase {
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-breadcrumbs': ExmBreadcrumbs;
+    }
+}

package/dist/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 { ExmBreadcrumbsBase } 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 ExmBreadcrumbs = class ExmBreadcrumbs extends ExmBreadcrumbsBase {
+};
+ExmBreadcrumbs.styles = style;
+ExmBreadcrumbs = __decorate([
+    customElement('exm-breadcrumbs')
+], ExmBreadcrumbs);
+export { ExmBreadcrumbs };
+//# sourceMappingURL=exm-breadcrumbs.js.map

package/dist/index.d.ts

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

package/dist/index.js

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

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

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

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

@@ -0,0 +1,83 @@
+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: 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;
+    }
+  }
+`;
+//# sourceMappingURL=exm-breadcrumbs-styles-css.js.map

package/dist/types.d.ts

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

package/dist/types.js

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

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@exmg/exm-breadcrumbs",
+  "version": "0.0.2-alpha.0+df24e0c",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./exm-breadcrumbs.js": "./dist/exm-breadcrumbs.js"
+  },
+  "peerDependencies": {
+    "@exmg/lit-base": "^3.0.3",
+    "@material/typography": "^14.0.0",
+    "lit": "^3.2.1",
+    "tslib": "^2.6.2"
+  },
+  "keywords": [
+    "web-components",
+    "lit",
+    "button"
+  ],
+  "files": [
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "homepage": "https://bitbucket.org/exmachina/exm-web-components",
+  "repository": {
+    "type": "git",
+    "url": "git@bitbucket.org:exmachina/exm-web-components.git",
+    "directory": "packages/exm-breadcrumbs"
+  },
+  "license": "MIT",
+  "scripts": {},
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "df24e0c74a76a7e1c258f69386036e24e7860256"
+}