@exmg/exm-breadcrumbs 1.1.9 → 1.1.10-alpha.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.rollup.cache/root/repo/packages/exm-breadcrumbs/dist/exm-breadcrumb-mixin.d.ts +31 -0
- package/.rollup.cache/root/repo/packages/exm-breadcrumbs/dist/exm-breadcrumb-mixin.js +92 -0
- package/.rollup.cache/root/repo/packages/exm-breadcrumbs/dist/exm-breadcrumbs-base.d.ts +17 -0
- package/.rollup.cache/root/repo/packages/exm-breadcrumbs/dist/exm-breadcrumbs-base.js +56 -0
- package/.rollup.cache/root/repo/packages/exm-breadcrumbs/dist/exm-breadcrumbs-controller.d.ts +23 -0
- package/.rollup.cache/root/repo/packages/exm-breadcrumbs/dist/exm-breadcrumbs-controller.js +46 -0
- package/.rollup.cache/root/repo/packages/exm-breadcrumbs/dist/exm-breadcrumbs.d.ts +30 -0
- package/.rollup.cache/root/repo/packages/exm-breadcrumbs/dist/exm-breadcrumbs.js +33 -0
- package/.rollup.cache/root/repo/packages/exm-breadcrumbs/dist/index.d.ts +6 -0
- package/.rollup.cache/root/repo/packages/exm-breadcrumbs/dist/index.js +6 -0
- package/.rollup.cache/root/repo/packages/exm-breadcrumbs/dist/styles/exm-breadcrumbs-styles-css.d.ts +1 -0
- package/.rollup.cache/root/repo/packages/exm-breadcrumbs/dist/styles/exm-breadcrumbs-styles-css.js +83 -0
- package/.rollup.cache/root/repo/packages/exm-breadcrumbs/dist/types.d.ts +4 -0
- package/dist/exm-breadcrumb-mixin.js +7 -4
- package/dist/exm-breadcrumbs-base.js +7 -4
- package/dist/exm-breadcrumbs-controller.js +6 -3
- package/dist/exm-breadcrumbs.js +4 -2
- package/dist/index.js +2 -2
- package/dist/styles/exm-breadcrumbs-styles-css.js +5 -2
- package/package.json +5 -8
- /package/{dist → .rollup.cache/root/repo/packages/exm-breadcrumbs/dist}/types.js +0 -0
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { ExmBreadcrumbs } from './exm-breadcrumbs.js';
|
|
2
|
+
import { ExmgElement, Constructor } from '@exmg/lit-base/index.js';
|
|
3
|
+
import { BreadcrumbItem } from './types.js';
|
|
4
|
+
/**
|
|
5
|
+
* @class
|
|
6
|
+
* @abstract
|
|
7
|
+
* @extends ExmgElement
|
|
8
|
+
* @property {ExmBreadcrumbs|undefined} breadcrumbsElement - Reference to the breadcrumbs element.
|
|
9
|
+
* @property {BreadcrumbItem[]|undefined} breadcrumbs - The breadcrumbs array.
|
|
10
|
+
*/
|
|
11
|
+
export declare abstract class BreadcrumbsClass extends ExmgElement {
|
|
12
|
+
breadcrumbsElement?: ExmBreadcrumbs;
|
|
13
|
+
breadcrumbs?: BreadcrumbItem[];
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* @interface
|
|
17
|
+
* @extends BreadcrumbsClass
|
|
18
|
+
* @method emitSetBreadcrumbs - Emit a custom event to set breadcrumbs.
|
|
19
|
+
* @method emitResetBreadcrumbs - Emit a custom event to reset breadcrumbs.
|
|
20
|
+
*/
|
|
21
|
+
export interface BreadcrumbsInterface {
|
|
22
|
+
emitSetBreadcrumbs(items: BreadcrumbItem[]): void;
|
|
23
|
+
emitResetBreadcrumbs(): void;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* @function
|
|
27
|
+
* @template T
|
|
28
|
+
* @param {T} base - The base class.
|
|
29
|
+
* @returns {Constructor<BreadcrumbsInterface> & T} - The BreadcrumbsMixin class.
|
|
30
|
+
*/
|
|
31
|
+
export declare const BreadcrumbsMixin: <T extends Constructor<ExmgElement & BreadcrumbsClass>>(base: T) => Constructor<BreadcrumbsInterface> & T;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { observer, ExmgElement } from '@exmg/lit-base/index.js';
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
/**
|
|
5
|
+
* @class
|
|
6
|
+
* @abstract
|
|
7
|
+
* @extends ExmgElement
|
|
8
|
+
* @property {ExmBreadcrumbs|undefined} breadcrumbsElement - Reference to the breadcrumbs element.
|
|
9
|
+
* @property {BreadcrumbItem[]|undefined} breadcrumbs - The breadcrumbs array.
|
|
10
|
+
*/
|
|
11
|
+
export class BreadcrumbsClass extends ExmgElement {
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* @function
|
|
15
|
+
* @template T
|
|
16
|
+
* @param {T} base - The base class.
|
|
17
|
+
* @returns {Constructor<BreadcrumbsInterface> & T} - The BreadcrumbsMixin class.
|
|
18
|
+
*/
|
|
19
|
+
export const BreadcrumbsMixin = (base) => {
|
|
20
|
+
/**
|
|
21
|
+
* @class
|
|
22
|
+
* @extends base
|
|
23
|
+
* @implements BreadcrumbsInterface
|
|
24
|
+
* @property {function} setBreadcrumbsBind - The binded setBreadcrumbs function.
|
|
25
|
+
* @property {function} resetBreadcrumbsBind - The binded resetBreadcrumbs function.
|
|
26
|
+
* @property {BreadcrumbItem[]|undefined} breadcrumbs - The breadcrumbs array.
|
|
27
|
+
*/
|
|
28
|
+
class BreadcrumbsState extends base {
|
|
29
|
+
/**
|
|
30
|
+
* Emit a custom event to set breadcrumbs from anywhere in the application.
|
|
31
|
+
* @param {BreadcrumbItem[]} items - The breadcrumbs array.
|
|
32
|
+
* @returns {void}
|
|
33
|
+
*/
|
|
34
|
+
emitSetBreadcrumbs(items) {
|
|
35
|
+
window.dispatchEvent(new CustomEvent('breadcrumbs-set', {
|
|
36
|
+
bubbles: true,
|
|
37
|
+
composed: true,
|
|
38
|
+
detail: { items },
|
|
39
|
+
}));
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Emit a custom event to reset breadcrumbs.
|
|
43
|
+
* @returns {void}
|
|
44
|
+
*/
|
|
45
|
+
emitResetBreadcrumbs() {
|
|
46
|
+
window.dispatchEvent(new CustomEvent('breadcrumbs-reset', {
|
|
47
|
+
bubbles: true,
|
|
48
|
+
composed: true,
|
|
49
|
+
detail: false,
|
|
50
|
+
}));
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Reset the breadcrumbs element.
|
|
54
|
+
* @returns {void}
|
|
55
|
+
*/
|
|
56
|
+
resetBreadcrumbs() {
|
|
57
|
+
this.breadcrumbsElement && (this.breadcrumbsElement.items = []);
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Set the breadcrumbs element.
|
|
61
|
+
* @param {CustomEvent<{ items: BreadcrumbItem[] }>} e - The custom event.
|
|
62
|
+
* @returns {void}
|
|
63
|
+
*/
|
|
64
|
+
setBreadcrumbs(e) {
|
|
65
|
+
this.breadcrumbsElement && (this.breadcrumbsElement.items = e.detail.items);
|
|
66
|
+
}
|
|
67
|
+
constructor(...args) {
|
|
68
|
+
super(args);
|
|
69
|
+
this.breadcrumbs = [];
|
|
70
|
+
this.setBreadcrumbsBind = this.setBreadcrumbs.bind(this);
|
|
71
|
+
this.resetBreadcrumbsBind = this.resetBreadcrumbs.bind(this);
|
|
72
|
+
// @ts-ignore
|
|
73
|
+
window.addEventListener('breadcrumbs-set', this.setBreadcrumbsBind);
|
|
74
|
+
window.addEventListener('breadcrumbs-reset', this.resetBreadcrumbsBind);
|
|
75
|
+
}
|
|
76
|
+
disconnectedCallback() {
|
|
77
|
+
this.emitResetBreadcrumbs();
|
|
78
|
+
// @ts-ignore
|
|
79
|
+
window.removeEventListener('breadcrumbs-set', this.setBreadcrumbsBind);
|
|
80
|
+
window.removeEventListener('breadcrumbs-reset', this.resetBreadcrumbsBind);
|
|
81
|
+
super.disconnectedCallback();
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
__decorate([
|
|
85
|
+
property({ type: Array }),
|
|
86
|
+
observer(function (breadcrumbs) {
|
|
87
|
+
this.emitSetBreadcrumbs(breadcrumbs);
|
|
88
|
+
})
|
|
89
|
+
], BreadcrumbsState.prototype, "breadcrumbs", void 0);
|
|
90
|
+
return BreadcrumbsState;
|
|
91
|
+
};
|
|
92
|
+
//# sourceMappingURL=exm-breadcrumb-mixin.js.map
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { BreadcrumbItem } from './types.js';
|
|
2
|
+
import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
3
|
+
export declare const arrowSeparator: import("lit-html").TemplateResult<1>;
|
|
4
|
+
export declare class ExmBreadcrumbsBase extends ExmgElement {
|
|
5
|
+
/**
|
|
6
|
+
* The items displayed by the breadcrumbs
|
|
7
|
+
* @type {Array}
|
|
8
|
+
*/
|
|
9
|
+
items: BreadcrumbItem[];
|
|
10
|
+
/**
|
|
11
|
+
* Whether or not to display the arrow seperator
|
|
12
|
+
* @type {Boolean}
|
|
13
|
+
*/
|
|
14
|
+
arrowSeperator: boolean;
|
|
15
|
+
protected renderItems(): unknown;
|
|
16
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
17
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html, nothing } from 'lit';
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
import { repeat } from 'lit/directives/repeat.js';
|
|
5
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
6
|
+
import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
7
|
+
export const arrowSeparator = html `
|
|
8
|
+
<svg height="24" viewBox="0 0 24 24" width="24" preserveAspectRatio="xMidYMid meet">
|
|
9
|
+
<path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
|
|
10
|
+
</svg>
|
|
11
|
+
`;
|
|
12
|
+
export class ExmBreadcrumbsBase extends ExmgElement {
|
|
13
|
+
constructor() {
|
|
14
|
+
super(...arguments);
|
|
15
|
+
/**
|
|
16
|
+
* The items displayed by the breadcrumbs
|
|
17
|
+
* @type {Array}
|
|
18
|
+
*/
|
|
19
|
+
this.items = [];
|
|
20
|
+
/**
|
|
21
|
+
* Whether or not to display the arrow seperator
|
|
22
|
+
* @type {Boolean}
|
|
23
|
+
*/
|
|
24
|
+
this.arrowSeperator = false;
|
|
25
|
+
}
|
|
26
|
+
renderItems() {
|
|
27
|
+
var _a;
|
|
28
|
+
const lastIndex = ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) - 1;
|
|
29
|
+
return repeat(this.items || [], ({ href, content }) => `${href}${content}`, ({ href, content }, index) => {
|
|
30
|
+
return html `
|
|
31
|
+
<li class="${classMap({ arrowSeperator: this.arrowSeperator })}">
|
|
32
|
+
<a href=${lastIndex !== index ? href : ''} aria-current=${index === lastIndex ? 'page' : 'false'}>
|
|
33
|
+
${content}
|
|
34
|
+
</a>
|
|
35
|
+
${this.arrowSeperator && index !== lastIndex ? arrowSeparator : nothing}
|
|
36
|
+
</li>
|
|
37
|
+
`;
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
render() {
|
|
41
|
+
return html `
|
|
42
|
+
<nav class="breadcrumb" aria-label="Breadcrumb">
|
|
43
|
+
<ol>
|
|
44
|
+
${this.renderItems()}
|
|
45
|
+
</ol>
|
|
46
|
+
</nav>
|
|
47
|
+
`;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
__decorate([
|
|
51
|
+
property({ type: Array })
|
|
52
|
+
], ExmBreadcrumbsBase.prototype, "items", void 0);
|
|
53
|
+
__decorate([
|
|
54
|
+
property({ type: Boolean, attribute: 'arrow-separator', reflect: true })
|
|
55
|
+
], ExmBreadcrumbsBase.prototype, "arrowSeperator", void 0);
|
|
56
|
+
//# sourceMappingURL=exm-breadcrumbs-base.js.map
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ReactiveControllerHost } from 'lit';
|
|
2
|
+
import { BreadcrumbItem } from './types.js';
|
|
3
|
+
import { ExmBreadcrumbs } from './exm-breadcrumbs.js';
|
|
4
|
+
export interface BreadcrumbsControllerConfig {
|
|
5
|
+
breadcrumbsElement?: ExmBreadcrumbs;
|
|
6
|
+
}
|
|
7
|
+
export declare class BreadcrumbsController {
|
|
8
|
+
_host: ReactiveControllerHost;
|
|
9
|
+
breadcrumbsElement?: ExmBreadcrumbs;
|
|
10
|
+
setBreadcrumbsBind: (e: CustomEvent<{
|
|
11
|
+
items: BreadcrumbItem[];
|
|
12
|
+
}>) => void;
|
|
13
|
+
resetBreadcrumbsBind: () => void;
|
|
14
|
+
breadcrumbs?: BreadcrumbItem[];
|
|
15
|
+
constructor(host: ReactiveControllerHost, { breadcrumbsElement }: BreadcrumbsControllerConfig);
|
|
16
|
+
emitSetBreadcrumbs(items: BreadcrumbItem[]): void;
|
|
17
|
+
emitResetBreadcrumbs(): void;
|
|
18
|
+
resetBreadcrumbs(): void;
|
|
19
|
+
setBreadcrumbs(e: CustomEvent<{
|
|
20
|
+
items: BreadcrumbItem[];
|
|
21
|
+
}>): void;
|
|
22
|
+
hostDisconnected(): void;
|
|
23
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { observer } from '@exmg/lit-base/index.js';
|
|
3
|
+
export class BreadcrumbsController {
|
|
4
|
+
constructor(host, { breadcrumbsElement }) {
|
|
5
|
+
this.breadcrumbs = [];
|
|
6
|
+
(this._host = host).addController(this);
|
|
7
|
+
this.breadcrumbsElement = breadcrumbsElement;
|
|
8
|
+
this.setBreadcrumbsBind = this.setBreadcrumbs.bind(this);
|
|
9
|
+
this.resetBreadcrumbsBind = this.resetBreadcrumbs.bind(this);
|
|
10
|
+
// @ts-ignore
|
|
11
|
+
window.addEventListener('breadcrumbs-set', this.setBreadcrumbsBind);
|
|
12
|
+
window.addEventListener('breadcrumbs-reset', this.resetBreadcrumbsBind);
|
|
13
|
+
}
|
|
14
|
+
emitSetBreadcrumbs(items) {
|
|
15
|
+
window.dispatchEvent(new CustomEvent('breadcrumbs-set', {
|
|
16
|
+
bubbles: true,
|
|
17
|
+
composed: true,
|
|
18
|
+
detail: { items },
|
|
19
|
+
}));
|
|
20
|
+
}
|
|
21
|
+
emitResetBreadcrumbs() {
|
|
22
|
+
window.dispatchEvent(new CustomEvent('breadcrumbs-reset', {
|
|
23
|
+
bubbles: true,
|
|
24
|
+
composed: true,
|
|
25
|
+
detail: false,
|
|
26
|
+
}));
|
|
27
|
+
}
|
|
28
|
+
resetBreadcrumbs() {
|
|
29
|
+
this.breadcrumbsElement && (this.breadcrumbsElement.items = []);
|
|
30
|
+
}
|
|
31
|
+
setBreadcrumbs(e) {
|
|
32
|
+
this.breadcrumbsElement && (this.breadcrumbsElement.items = e.detail.items);
|
|
33
|
+
}
|
|
34
|
+
hostDisconnected() {
|
|
35
|
+
this.emitResetBreadcrumbs();
|
|
36
|
+
// @ts-ignore
|
|
37
|
+
window.removeEventListener('breadcrumbs-set', this.setBreadcrumbsBind);
|
|
38
|
+
window.removeEventListener('breadcrumbs-reset', this.resetBreadcrumbsBind);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
__decorate([
|
|
42
|
+
observer(function (breadcrumbs) {
|
|
43
|
+
this.emitSetBreadcrumbs(breadcrumbs);
|
|
44
|
+
})
|
|
45
|
+
], BreadcrumbsController.prototype, "breadcrumbs", void 0);
|
|
46
|
+
//# sourceMappingURL=exm-breadcrumbs-controller.js.map
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ExmBreadcrumbsBase } from './exm-breadcrumbs-base.js';
|
|
2
|
+
/**
|
|
3
|
+
* exm-breadcrumbs
|
|
4
|
+
*
|
|
5
|
+
* Component to render breadcrumbs within a page or component with the option to enable / disable arrow seperator
|
|
6
|
+
*
|
|
7
|
+
* * Example:
|
|
8
|
+
* ```js
|
|
9
|
+
* @state()
|
|
10
|
+
* private items = [
|
|
11
|
+
* {href: '/home', content: 'Home page'},
|
|
12
|
+
* {href: '/users', content: 'User List'},
|
|
13
|
+
* {href: '/users/1234', content: 'Mark'},
|
|
14
|
+
* {href: '/users/1234/details', content: 'Details'},
|
|
15
|
+
* ];
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* ```html
|
|
19
|
+
* <exm-breadcrumbs .items="${this.items}"></exm-breadcrumbs>
|
|
20
|
+
* ```
|
|
21
|
+
*
|
|
22
|
+
*/
|
|
23
|
+
export declare class ExmBreadcrumbs extends ExmBreadcrumbsBase {
|
|
24
|
+
static styles: import("lit").CSSResult;
|
|
25
|
+
}
|
|
26
|
+
declare global {
|
|
27
|
+
interface HTMLElementTagNameMap {
|
|
28
|
+
'exm-breadcrumbs': ExmBreadcrumbs;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { customElement } from 'lit/decorators.js';
|
|
3
|
+
import { style } from './styles/exm-breadcrumbs-styles-css.js';
|
|
4
|
+
import { ExmBreadcrumbsBase } from './exm-breadcrumbs-base.js';
|
|
5
|
+
/**
|
|
6
|
+
* exm-breadcrumbs
|
|
7
|
+
*
|
|
8
|
+
* Component to render breadcrumbs within a page or component with the option to enable / disable arrow seperator
|
|
9
|
+
*
|
|
10
|
+
* * Example:
|
|
11
|
+
* ```js
|
|
12
|
+
* @state()
|
|
13
|
+
* private items = [
|
|
14
|
+
* {href: '/home', content: 'Home page'},
|
|
15
|
+
* {href: '/users', content: 'User List'},
|
|
16
|
+
* {href: '/users/1234', content: 'Mark'},
|
|
17
|
+
* {href: '/users/1234/details', content: 'Details'},
|
|
18
|
+
* ];
|
|
19
|
+
* ```
|
|
20
|
+
*
|
|
21
|
+
* ```html
|
|
22
|
+
* <exm-breadcrumbs .items="${this.items}"></exm-breadcrumbs>
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
*/
|
|
26
|
+
let ExmBreadcrumbs = class ExmBreadcrumbs extends ExmBreadcrumbsBase {
|
|
27
|
+
};
|
|
28
|
+
ExmBreadcrumbs.styles = style;
|
|
29
|
+
ExmBreadcrumbs = __decorate([
|
|
30
|
+
customElement('exm-breadcrumbs')
|
|
31
|
+
], ExmBreadcrumbs);
|
|
32
|
+
export { ExmBreadcrumbs };
|
|
33
|
+
//# sourceMappingURL=exm-breadcrumbs.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { BreadcrumbItem } from './types.js';
|
|
2
|
+
export { ExmBreadcrumbs } from './exm-breadcrumbs.js';
|
|
3
|
+
export { ExmBreadcrumbsBase } from './exm-breadcrumbs-base.js';
|
|
4
|
+
export { BreadcrumbsControllerConfig, BreadcrumbsController } from './exm-breadcrumbs-controller.js';
|
|
5
|
+
export { BreadcrumbsMixin, BreadcrumbsClass, BreadcrumbsInterface } from './exm-breadcrumb-mixin.js';
|
|
6
|
+
export { style as breadcrumbStyles } from './styles/exm-breadcrumbs-styles-css.js';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { ExmBreadcrumbs } from './exm-breadcrumbs.js';
|
|
2
|
+
export { ExmBreadcrumbsBase } from './exm-breadcrumbs-base.js';
|
|
3
|
+
export { BreadcrumbsController } from './exm-breadcrumbs-controller.js';
|
|
4
|
+
export { BreadcrumbsMixin, BreadcrumbsClass } from './exm-breadcrumb-mixin.js';
|
|
5
|
+
export { style as breadcrumbStyles } from './styles/exm-breadcrumbs-styles-css.js';
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
package/.rollup.cache/root/repo/packages/exm-breadcrumbs/dist/styles/exm-breadcrumbs-styles-css.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const style: import("lit").CSSResult;
|
package/.rollup.cache/root/repo/packages/exm-breadcrumbs/dist/styles/exm-breadcrumbs-styles-css.js
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const style = css `
|
|
3
|
+
:host {
|
|
4
|
+
display: block;
|
|
5
|
+
--_breadcrumbs-seperator-color: var(--breadcrumbs-seperator-color, var(--md-sys-color-primary, #0071dc));
|
|
6
|
+
--_breadcrumbs-text-color: var(--breadcrumbs-text-color, var(--md-sys-color-primary, #0071dc));
|
|
7
|
+
--_breadcrumbs-decoration-color: var(--breadcrumbs-decoration-color, var(--md-sys-color-primary, #0071dc));
|
|
8
|
+
--_breadcrumbs-visited-color: var(--breadcrumbs-visited-color, var(--md-sys-color-primary, #0071dc));
|
|
9
|
+
--_breadcrumbs-current-color: var(--breadcrumbs-current-color, var(--md-sys-color-primary, #0071dc));
|
|
10
|
+
--_breadcrumbs-item-separator-size: var(--breadcrumbs-item-separator-size, 24px);
|
|
11
|
+
--_breadcrumbs-item-separator-padding: var(breadcrumbs-item-separator-padding, 0);
|
|
12
|
+
display: block;
|
|
13
|
+
color: var(--breadcrumbs-text-color);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
svg {
|
|
17
|
+
height: var(--_breadcrumbs-item-separator-size);
|
|
18
|
+
width: var(--_breadcrumbs-item-separator-size);
|
|
19
|
+
min-height: var(--_breadcrumbs-item-separator-size);
|
|
20
|
+
min-width: var(--_breadcrumbs-item-separator-size);
|
|
21
|
+
vertical-align: middle;
|
|
22
|
+
display: inline-flex;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
align-items: center;
|
|
25
|
+
padding: 0 var(--_breadcrumbs-item-separator-padding, 0);
|
|
26
|
+
fill: var(--_breadcrumbs-seperator-color);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
nav.breadcrumb li {
|
|
30
|
+
display: inline;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
li {
|
|
34
|
+
margin: 0.25em 0 0.5em;
|
|
35
|
+
padding: 0;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
a[href] {
|
|
39
|
+
color: var(--_breadcrumbs-text-color);
|
|
40
|
+
text-decoration-color: var(--_breadcrumbs-decoration-color);
|
|
41
|
+
text-decoration-skip-ink: none;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
a:visited {
|
|
45
|
+
text-decoration-color: var(--_breadcrumbs-visited-color);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
nav.breadcrumb ol {
|
|
49
|
+
margin: 0;
|
|
50
|
+
padding-left: 0;
|
|
51
|
+
list-style: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
nav.breadcrumb li + li::before {
|
|
55
|
+
display: inline-block;
|
|
56
|
+
margin: 0 0.25em;
|
|
57
|
+
transform: rotate(15deg);
|
|
58
|
+
border-right: 0.1em solid var(--_breadcrumbs-seperator-color);
|
|
59
|
+
height: 0.8em;
|
|
60
|
+
content: '';
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
:host([arrow-separator]) nav.breadcrumb li + li::before {
|
|
64
|
+
display: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
nav.breadcrumb [aria-current='page'] {
|
|
68
|
+
color: var(--_breadcrumbs-current-color);
|
|
69
|
+
font-weight: 600;
|
|
70
|
+
text-decoration: none;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@media (max-width: 460px) {
|
|
74
|
+
.breadcrumb-item {
|
|
75
|
+
display: none;
|
|
76
|
+
}
|
|
77
|
+
.breadcrumb-item:first-child,
|
|
78
|
+
.breadcrumb-item:last-child {
|
|
79
|
+
display: initial;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
`;
|
|
83
|
+
//# sourceMappingURL=exm-breadcrumbs-styles-css.js.map
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { __decorate } from
|
|
1
|
+
import { __decorate } from 'tslib';
|
|
2
2
|
import { observer, ExmgElement } from '@exmg/lit-base/index.js';
|
|
3
3
|
import { property } from 'lit/decorators.js';
|
|
4
|
+
|
|
4
5
|
/**
|
|
5
6
|
* @class
|
|
6
7
|
* @abstract
|
|
@@ -8,7 +9,7 @@ import { property } from 'lit/decorators.js';
|
|
|
8
9
|
* @property {ExmBreadcrumbs|undefined} breadcrumbsElement - Reference to the breadcrumbs element.
|
|
9
10
|
* @property {BreadcrumbItem[]|undefined} breadcrumbs - The breadcrumbs array.
|
|
10
11
|
*/
|
|
11
|
-
|
|
12
|
+
class BreadcrumbsClass extends ExmgElement {
|
|
12
13
|
}
|
|
13
14
|
/**
|
|
14
15
|
* @function
|
|
@@ -16,7 +17,7 @@ export class BreadcrumbsClass extends ExmgElement {
|
|
|
16
17
|
* @param {T} base - The base class.
|
|
17
18
|
* @returns {Constructor<BreadcrumbsInterface> & T} - The BreadcrumbsMixin class.
|
|
18
19
|
*/
|
|
19
|
-
|
|
20
|
+
const BreadcrumbsMixin = (base) => {
|
|
20
21
|
/**
|
|
21
22
|
* @class
|
|
22
23
|
* @extends base
|
|
@@ -89,4 +90,6 @@ export const BreadcrumbsMixin = (base) => {
|
|
|
89
90
|
], BreadcrumbsState.prototype, "breadcrumbs", void 0);
|
|
90
91
|
return BreadcrumbsState;
|
|
91
92
|
};
|
|
92
|
-
|
|
93
|
+
|
|
94
|
+
export { BreadcrumbsClass, BreadcrumbsMixin };
|
|
95
|
+
//# sourceMappingURL=exm-breadcrumb-mixin.js.map
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
import { __decorate } from
|
|
1
|
+
import { __decorate } from 'tslib';
|
|
2
2
|
import { html, nothing } from 'lit';
|
|
3
3
|
import { property } from 'lit/decorators.js';
|
|
4
4
|
import { repeat } from 'lit/directives/repeat.js';
|
|
5
5
|
import { classMap } from 'lit/directives/class-map.js';
|
|
6
6
|
import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
7
|
-
|
|
7
|
+
|
|
8
|
+
const arrowSeparator = html `
|
|
8
9
|
<svg height="24" viewBox="0 0 24 24" width="24" preserveAspectRatio="xMidYMid meet">
|
|
9
10
|
<path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
|
|
10
11
|
</svg>
|
|
11
12
|
`;
|
|
12
|
-
|
|
13
|
+
class ExmBreadcrumbsBase extends ExmgElement {
|
|
13
14
|
constructor() {
|
|
14
15
|
super(...arguments);
|
|
15
16
|
/**
|
|
@@ -53,4 +54,6 @@ __decorate([
|
|
|
53
54
|
__decorate([
|
|
54
55
|
property({ type: Boolean, attribute: 'arrow-separator', reflect: true })
|
|
55
56
|
], ExmBreadcrumbsBase.prototype, "arrowSeperator", void 0);
|
|
56
|
-
|
|
57
|
+
|
|
58
|
+
export { ExmBreadcrumbsBase, arrowSeparator };
|
|
59
|
+
//# sourceMappingURL=exm-breadcrumbs-base.js.map
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { __decorate } from
|
|
1
|
+
import { __decorate } from 'tslib';
|
|
2
2
|
import { observer } from '@exmg/lit-base/index.js';
|
|
3
|
-
|
|
3
|
+
|
|
4
|
+
class BreadcrumbsController {
|
|
4
5
|
constructor(host, { breadcrumbsElement }) {
|
|
5
6
|
this.breadcrumbs = [];
|
|
6
7
|
(this._host = host).addController(this);
|
|
@@ -43,4 +44,6 @@ __decorate([
|
|
|
43
44
|
this.emitSetBreadcrumbs(breadcrumbs);
|
|
44
45
|
})
|
|
45
46
|
], BreadcrumbsController.prototype, "breadcrumbs", void 0);
|
|
46
|
-
|
|
47
|
+
|
|
48
|
+
export { BreadcrumbsController };
|
|
49
|
+
//# sourceMappingURL=exm-breadcrumbs-controller.js.map
|
package/dist/exm-breadcrumbs.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { __decorate } from
|
|
1
|
+
import { __decorate } from 'tslib';
|
|
2
2
|
import { customElement } from 'lit/decorators.js';
|
|
3
3
|
import { style } from './styles/exm-breadcrumbs-styles-css.js';
|
|
4
4
|
import { ExmBreadcrumbsBase } from './exm-breadcrumbs-base.js';
|
|
5
|
+
|
|
5
6
|
/**
|
|
6
7
|
* exm-breadcrumbs
|
|
7
8
|
*
|
|
@@ -29,5 +30,6 @@ ExmBreadcrumbs.styles = style;
|
|
|
29
30
|
ExmBreadcrumbs = __decorate([
|
|
30
31
|
customElement('exm-breadcrumbs')
|
|
31
32
|
], ExmBreadcrumbs);
|
|
33
|
+
|
|
32
34
|
export { ExmBreadcrumbs };
|
|
33
|
-
//# sourceMappingURL=exm-breadcrumbs.js.map
|
|
35
|
+
//# sourceMappingURL=exm-breadcrumbs.js.map
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { ExmBreadcrumbs } from './exm-breadcrumbs.js';
|
|
2
2
|
export { ExmBreadcrumbsBase } from './exm-breadcrumbs-base.js';
|
|
3
3
|
export { BreadcrumbsController } from './exm-breadcrumbs-controller.js';
|
|
4
|
-
export {
|
|
4
|
+
export { BreadcrumbsClass, BreadcrumbsMixin } from './exm-breadcrumb-mixin.js';
|
|
5
5
|
export { style as breadcrumbStyles } from './styles/exm-breadcrumbs-styles-css.js';
|
|
6
|
-
//# sourceMappingURL=index.js.map
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
const style = css `
|
|
3
4
|
:host {
|
|
4
5
|
display: block;
|
|
5
6
|
--_breadcrumbs-seperator-color: var(--breadcrumbs-seperator-color, var(--md-sys-color-primary, #0071dc));
|
|
@@ -80,4 +81,6 @@ export const style = css `
|
|
|
80
81
|
}
|
|
81
82
|
}
|
|
82
83
|
`;
|
|
83
|
-
|
|
84
|
+
|
|
85
|
+
export { style };
|
|
86
|
+
//# sourceMappingURL=exm-breadcrumbs-styles-css.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@exmg/exm-breadcrumbs",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.10-alpha.26+dffd4ec",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -9,15 +9,12 @@
|
|
|
9
9
|
".": "./dist/index.js",
|
|
10
10
|
"./exm-breadcrumbs.js": "./dist/exm-breadcrumbs.js"
|
|
11
11
|
},
|
|
12
|
-
"
|
|
13
|
-
"@exmg/lit-base": "^3.0.
|
|
12
|
+
"peerDependencies": {
|
|
13
|
+
"@exmg/lit-base": "^3.0.3",
|
|
14
14
|
"@material/typography": "^14.0.0",
|
|
15
|
-
"lit": "^3.
|
|
15
|
+
"lit": "^3.2.1",
|
|
16
16
|
"tslib": "^2.6.2"
|
|
17
17
|
},
|
|
18
|
-
"devDependencies": {
|
|
19
|
-
"@exmg/lit-cli": "1.1.13"
|
|
20
|
-
},
|
|
21
18
|
"keywords": [
|
|
22
19
|
"web-components",
|
|
23
20
|
"lit",
|
|
@@ -38,5 +35,5 @@
|
|
|
38
35
|
"publishConfig": {
|
|
39
36
|
"access": "public"
|
|
40
37
|
},
|
|
41
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "dffd4ecb68fdeb061f4e8ad585af221bfb0f8e8b"
|
|
42
39
|
}
|
|
File without changes
|