@internetarchive/ia-item-navigator 1.0.4-a1 → 1.0.4
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/dist/demo/app-root.d.ts +47 -47
- package/dist/demo/app-root.js +199 -199
- package/dist/index.d.ts +3 -3
- package/dist/index.js +3 -3
- package/dist/src/interfaces/custom-theater-interface.d.ts +20 -20
- package/dist/src/interfaces/custom-theater-interface.js +1 -1
- package/dist/src/interfaces/event-interfaces.d.ts +40 -40
- package/dist/src/interfaces/event-interfaces.js +1 -1
- package/dist/src/interfaces/menu-interfaces.d.ts +22 -22
- package/dist/src/interfaces/menu-interfaces.js +1 -1
- package/dist/src/item-navigator.d.ts +69 -69
- package/dist/src/item-navigator.js +256 -256
- package/dist/src/loader.d.ts +13 -13
- package/dist/src/loader.js +31 -31
- package/dist/src/menu-slider/ia-menu-slider.d.ts +30 -30
- package/dist/src/menu-slider/ia-menu-slider.js +112 -112
- package/dist/src/menu-slider/menu-button.d.ts +19 -19
- package/dist/src/menu-slider/menu-button.js +75 -75
- package/dist/src/menu-slider/styles/menu-button.d.ts +2 -2
- package/dist/src/menu-slider/styles/menu-button.js +2 -2
- package/dist/src/menu-slider/styles/menu-slider.d.ts +2 -2
- package/dist/src/menu-slider/styles/menu-slider.js +9 -20
- package/dist/src/menu-slider/styles/menu-slider.js.map +1 -1
- package/dist/src/no-theater-available.d.ts +9 -9
- package/dist/src/no-theater-available.js +35 -35
- package/dist/test/ia-item-navigator.test.d.ts +1 -1
- package/dist/test/ia-item-navigator.test.js +296 -296
- package/dist/test/ia-stub.d.ts +22 -22
- package/dist/test/ia-stub.js +34 -34
- package/dist/test/no-theater-available.test.d.ts +1 -1
- package/dist/test/no-theater-available.test.js +22 -22
- package/package.json +1 -1
- package/src/menu-slider/styles/menu-slider.ts +4 -15
@@ -1,30 +1,30 @@
|
|
1
|
-
import { LitElement } from 'lit';
|
2
|
-
import '@internetarchive/icon-collapse-sidebar';
|
3
|
-
import './menu-button';
|
4
|
-
export declare class IaMenuSlider extends LitElement {
|
5
|
-
static get styles(): import("lit").CSSResult;
|
6
|
-
menus: never[];
|
7
|
-
open: boolean;
|
8
|
-
manuallyHandleClose: boolean;
|
9
|
-
selectedMenu: string;
|
10
|
-
selectedMenuAction: symbol;
|
11
|
-
animateMenuOpen: boolean;
|
12
|
-
updated(): void;
|
13
|
-
/**
|
14
|
-
* Event handler, captures state of selected menu
|
15
|
-
*/
|
16
|
-
setSelectedMenu({ detail }: CustomEvent): void;
|
17
|
-
/**
|
18
|
-
* closes menu drawer
|
19
|
-
*/
|
20
|
-
closeMenu(): void;
|
21
|
-
get selectedMenuDetails(): undefined;
|
22
|
-
get selectedMenuComponent(): any;
|
23
|
-
get sliderDetailsClass(): string;
|
24
|
-
get selectedMenuClass(): "" | "open";
|
25
|
-
get menuItems(): import("lit-html").TemplateResult<1>[];
|
26
|
-
get renderMenuHeader(): import("lit-html").TemplateResult<1>;
|
27
|
-
get closeButton(): import("lit-html").TemplateResult<1>;
|
28
|
-
/** @inheritdoc */
|
29
|
-
render(): import("lit-html").TemplateResult<1>;
|
30
|
-
}
|
1
|
+
import { LitElement } from 'lit';
|
2
|
+
import '@internetarchive/icon-collapse-sidebar';
|
3
|
+
import './menu-button';
|
4
|
+
export declare class IaMenuSlider extends LitElement {
|
5
|
+
static get styles(): import("lit").CSSResult;
|
6
|
+
menus: never[];
|
7
|
+
open: boolean;
|
8
|
+
manuallyHandleClose: boolean;
|
9
|
+
selectedMenu: string;
|
10
|
+
selectedMenuAction: symbol;
|
11
|
+
animateMenuOpen: boolean;
|
12
|
+
updated(): void;
|
13
|
+
/**
|
14
|
+
* Event handler, captures state of selected menu
|
15
|
+
*/
|
16
|
+
setSelectedMenu({ detail }: CustomEvent): void;
|
17
|
+
/**
|
18
|
+
* closes menu drawer
|
19
|
+
*/
|
20
|
+
closeMenu(): void;
|
21
|
+
get selectedMenuDetails(): undefined;
|
22
|
+
get selectedMenuComponent(): any;
|
23
|
+
get sliderDetailsClass(): string;
|
24
|
+
get selectedMenuClass(): "" | "open";
|
25
|
+
get menuItems(): import("lit-html").TemplateResult<1>[];
|
26
|
+
get renderMenuHeader(): import("lit-html").TemplateResult<1>;
|
27
|
+
get closeButton(): import("lit-html").TemplateResult<1>;
|
28
|
+
/** @inheritdoc */
|
29
|
+
render(): import("lit-html").TemplateResult<1>;
|
30
|
+
}
|
@@ -1,75 +1,75 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { LitElement, html, nothing } from 'lit';
|
3
|
-
import { customElement, property } from 'lit/decorators.js';
|
4
|
-
import menuSliderCSS from './styles/menu-slider';
|
5
|
-
import '@internetarchive/icon-collapse-sidebar';
|
6
|
-
import './menu-button';
|
7
|
-
const sliderEvents = {
|
8
|
-
closeDrawer: 'menuSliderClosed',
|
9
|
-
};
|
10
|
-
let IaMenuSlider = class IaMenuSlider extends LitElement {
|
11
|
-
constructor() {
|
12
|
-
super(...arguments);
|
13
|
-
this.menus = [];
|
14
|
-
this.open = false;
|
15
|
-
this.manuallyHandleClose = false;
|
16
|
-
this.selectedMenu = '';
|
17
|
-
this.selectedMenuAction = nothing;
|
18
|
-
this.animateMenuOpen = false;
|
19
|
-
}
|
20
|
-
static get styles() {
|
21
|
-
return menuSliderCSS;
|
22
|
-
}
|
23
|
-
updated() {
|
24
|
-
const { actionButton } = this.selectedMenuDetails || {};
|
25
|
-
const actionButtonHasChanged = actionButton !== this.selectedMenuAction;
|
26
|
-
if (actionButtonHasChanged) {
|
27
|
-
this.selectedMenuAction = actionButton || nothing;
|
28
|
-
}
|
29
|
-
}
|
30
|
-
/**
|
31
|
-
* Event handler, captures state of selected menu
|
32
|
-
*/
|
33
|
-
setSelectedMenu({ detail }) {
|
34
|
-
const { id } = detail;
|
35
|
-
this.selectedMenu = this.selectedMenu === id ? '' : id;
|
36
|
-
const { actionButton } = this.selectedMenuDetails || {};
|
37
|
-
this.selectedMenuAction = actionButton || nothing;
|
38
|
-
}
|
39
|
-
/**
|
40
|
-
* closes menu drawer
|
41
|
-
*/
|
42
|
-
closeMenu() {
|
43
|
-
if (!this.manuallyHandleClose) {
|
44
|
-
this.open = false;
|
45
|
-
}
|
46
|
-
const { closeDrawer } = sliderEvents;
|
47
|
-
const drawerClosed = new CustomEvent(closeDrawer, {
|
48
|
-
detail: this.selectedMenuDetails,
|
49
|
-
});
|
50
|
-
this.dispatchEvent(drawerClosed);
|
51
|
-
}
|
52
|
-
get selectedMenuDetails() {
|
53
|
-
const selectedMenu = this.menus.find(menu => menu.id === this.selectedMenu);
|
54
|
-
return selectedMenu;
|
55
|
-
}
|
56
|
-
get selectedMenuComponent() {
|
57
|
-
var _a;
|
58
|
-
const menuItem = this.selectedMenuDetails;
|
59
|
-
return menuItem && ((_a = menuItem) === null || _a === void 0 ? void 0 : _a.component)
|
60
|
-
? menuItem.component
|
61
|
-
: html ``;
|
62
|
-
}
|
63
|
-
/* render */
|
64
|
-
get sliderDetailsClass() {
|
65
|
-
const animate = this.animateMenuOpen ? 'animate' : '';
|
66
|
-
const state = this.open ? 'open' : '';
|
67
|
-
return `${animate} ${state}`;
|
68
|
-
}
|
69
|
-
get selectedMenuClass() {
|
70
|
-
return this.selectedMenu ? 'open' : '';
|
71
|
-
}
|
72
|
-
get menuItems() {
|
1
|
+
import { __decorate } from "tslib";
|
2
|
+
import { LitElement, html, nothing } from 'lit';
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
4
|
+
import menuSliderCSS from './styles/menu-slider';
|
5
|
+
import '@internetarchive/icon-collapse-sidebar';
|
6
|
+
import './menu-button';
|
7
|
+
const sliderEvents = {
|
8
|
+
closeDrawer: 'menuSliderClosed',
|
9
|
+
};
|
10
|
+
let IaMenuSlider = class IaMenuSlider extends LitElement {
|
11
|
+
constructor() {
|
12
|
+
super(...arguments);
|
13
|
+
this.menus = [];
|
14
|
+
this.open = false;
|
15
|
+
this.manuallyHandleClose = false;
|
16
|
+
this.selectedMenu = '';
|
17
|
+
this.selectedMenuAction = nothing;
|
18
|
+
this.animateMenuOpen = false;
|
19
|
+
}
|
20
|
+
static get styles() {
|
21
|
+
return menuSliderCSS;
|
22
|
+
}
|
23
|
+
updated() {
|
24
|
+
const { actionButton } = this.selectedMenuDetails || {};
|
25
|
+
const actionButtonHasChanged = actionButton !== this.selectedMenuAction;
|
26
|
+
if (actionButtonHasChanged) {
|
27
|
+
this.selectedMenuAction = actionButton || nothing;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
/**
|
31
|
+
* Event handler, captures state of selected menu
|
32
|
+
*/
|
33
|
+
setSelectedMenu({ detail }) {
|
34
|
+
const { id } = detail;
|
35
|
+
this.selectedMenu = this.selectedMenu === id ? '' : id;
|
36
|
+
const { actionButton } = this.selectedMenuDetails || {};
|
37
|
+
this.selectedMenuAction = actionButton || nothing;
|
38
|
+
}
|
39
|
+
/**
|
40
|
+
* closes menu drawer
|
41
|
+
*/
|
42
|
+
closeMenu() {
|
43
|
+
if (!this.manuallyHandleClose) {
|
44
|
+
this.open = false;
|
45
|
+
}
|
46
|
+
const { closeDrawer } = sliderEvents;
|
47
|
+
const drawerClosed = new CustomEvent(closeDrawer, {
|
48
|
+
detail: this.selectedMenuDetails,
|
49
|
+
});
|
50
|
+
this.dispatchEvent(drawerClosed);
|
51
|
+
}
|
52
|
+
get selectedMenuDetails() {
|
53
|
+
const selectedMenu = this.menus.find(menu => menu.id === this.selectedMenu);
|
54
|
+
return selectedMenu;
|
55
|
+
}
|
56
|
+
get selectedMenuComponent() {
|
57
|
+
var _a;
|
58
|
+
const menuItem = this.selectedMenuDetails;
|
59
|
+
return menuItem && ((_a = menuItem) === null || _a === void 0 ? void 0 : _a.component)
|
60
|
+
? menuItem.component
|
61
|
+
: html ``;
|
62
|
+
}
|
63
|
+
/* render */
|
64
|
+
get sliderDetailsClass() {
|
65
|
+
const animate = this.animateMenuOpen ? 'animate' : '';
|
66
|
+
const state = this.open ? 'open' : '';
|
67
|
+
return `${animate} ${state}`;
|
68
|
+
}
|
69
|
+
get selectedMenuClass() {
|
70
|
+
return this.selectedMenu ? 'open' : '';
|
71
|
+
}
|
72
|
+
get menuItems() {
|
73
73
|
return this.menus.map((menu) => html `
|
74
74
|
<li>
|
75
75
|
<menu-button
|
@@ -83,14 +83,14 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
|
|
83
83
|
.href=${menu.href}
|
84
84
|
></menu-button>
|
85
85
|
</li>
|
86
|
-
`);
|
87
|
-
}
|
88
|
-
get renderMenuHeader() {
|
89
|
-
const { label = '', menuDetails = '' } = this.selectedMenuDetails || {};
|
90
|
-
const headerClass = this.selectedMenuAction ? 'with-secondary-action' : '';
|
91
|
-
const actionBlock = this.selectedMenuAction
|
92
|
-
? html `<span class="custom-action">${this.selectedMenuAction}</span>`
|
93
|
-
: nothing;
|
86
|
+
`);
|
87
|
+
}
|
88
|
+
get renderMenuHeader() {
|
89
|
+
const { label = '', menuDetails = '' } = this.selectedMenuDetails || {};
|
90
|
+
const headerClass = this.selectedMenuAction ? 'with-secondary-action' : '';
|
91
|
+
const actionBlock = this.selectedMenuAction
|
92
|
+
? html `<span class="custom-action">${this.selectedMenuAction}</span>`
|
93
|
+
: nothing;
|
94
94
|
return html `
|
95
95
|
<header class="${headerClass}">
|
96
96
|
<div class="details">
|
@@ -99,9 +99,9 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
|
|
99
99
|
</div>
|
100
100
|
${actionBlock} ${this.closeButton}
|
101
101
|
</header>
|
102
|
-
`;
|
103
|
-
}
|
104
|
-
get closeButton() {
|
102
|
+
`;
|
103
|
+
}
|
104
|
+
get closeButton() {
|
105
105
|
return html `
|
106
106
|
<button
|
107
107
|
class="close"
|
@@ -110,10 +110,10 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
|
|
110
110
|
>
|
111
111
|
<ia-icon-collapse-sidebar></ia-icon-collapse-sidebar>
|
112
112
|
</button>
|
113
|
-
`;
|
114
|
-
}
|
115
|
-
/** @inheritdoc */
|
116
|
-
render() {
|
113
|
+
`;
|
114
|
+
}
|
115
|
+
/** @inheritdoc */
|
116
|
+
render() {
|
117
117
|
return html `
|
118
118
|
<div class="main">
|
119
119
|
<div class="menu ${this.sliderDetailsClass}">
|
@@ -132,29 +132,29 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
|
|
132
132
|
</div>
|
133
133
|
</div>
|
134
134
|
</div>
|
135
|
-
`;
|
136
|
-
}
|
137
|
-
};
|
138
|
-
__decorate([
|
139
|
-
property({ type: Array })
|
140
|
-
], IaMenuSlider.prototype, "menus", void 0);
|
141
|
-
__decorate([
|
142
|
-
property({ type: Boolean })
|
143
|
-
], IaMenuSlider.prototype, "open", void 0);
|
144
|
-
__decorate([
|
145
|
-
property({ type: Boolean })
|
146
|
-
], IaMenuSlider.prototype, "manuallyHandleClose", void 0);
|
147
|
-
__decorate([
|
148
|
-
property({ type: String })
|
149
|
-
], IaMenuSlider.prototype, "selectedMenu", void 0);
|
150
|
-
__decorate([
|
151
|
-
property({ type: Object })
|
152
|
-
], IaMenuSlider.prototype, "selectedMenuAction", void 0);
|
153
|
-
__decorate([
|
154
|
-
property({ type: Boolean })
|
155
|
-
], IaMenuSlider.prototype, "animateMenuOpen", void 0);
|
156
|
-
IaMenuSlider = __decorate([
|
157
|
-
customElement('ia-menu-slider')
|
158
|
-
], IaMenuSlider);
|
159
|
-
export { IaMenuSlider };
|
135
|
+
`;
|
136
|
+
}
|
137
|
+
};
|
138
|
+
__decorate([
|
139
|
+
property({ type: Array })
|
140
|
+
], IaMenuSlider.prototype, "menus", void 0);
|
141
|
+
__decorate([
|
142
|
+
property({ type: Boolean })
|
143
|
+
], IaMenuSlider.prototype, "open", void 0);
|
144
|
+
__decorate([
|
145
|
+
property({ type: Boolean })
|
146
|
+
], IaMenuSlider.prototype, "manuallyHandleClose", void 0);
|
147
|
+
__decorate([
|
148
|
+
property({ type: String })
|
149
|
+
], IaMenuSlider.prototype, "selectedMenu", void 0);
|
150
|
+
__decorate([
|
151
|
+
property({ type: Object })
|
152
|
+
], IaMenuSlider.prototype, "selectedMenuAction", void 0);
|
153
|
+
__decorate([
|
154
|
+
property({ type: Boolean })
|
155
|
+
], IaMenuSlider.prototype, "animateMenuOpen", void 0);
|
156
|
+
IaMenuSlider = __decorate([
|
157
|
+
customElement('ia-menu-slider')
|
158
|
+
], IaMenuSlider);
|
159
|
+
export { IaMenuSlider };
|
160
160
|
//# sourceMappingURL=ia-menu-slider.js.map
|
@@ -1,19 +1,19 @@
|
|
1
|
-
import { LitElement } from 'lit';
|
2
|
-
export declare class MenuButton extends LitElement {
|
3
|
-
static get styles(): import("lit").CSSResult;
|
4
|
-
icon: string;
|
5
|
-
href: string;
|
6
|
-
label: string;
|
7
|
-
menuDetails: string;
|
8
|
-
id: string;
|
9
|
-
selected: boolean;
|
10
|
-
followable: boolean;
|
11
|
-
onClick(e: Event): void;
|
12
|
-
dispatchMenuTypeSelectedEvent(): void;
|
13
|
-
get buttonClass(): "" | "selected";
|
14
|
-
get iconClass(): "active" | "";
|
15
|
-
get menuItem(): import("lit-html").TemplateResult<1>;
|
16
|
-
get linkButton(): import("lit-html").TemplateResult<1>;
|
17
|
-
get clickButton(): import("lit-html").TemplateResult<1>;
|
18
|
-
render(): import("lit-html").TemplateResult<1>;
|
19
|
-
}
|
1
|
+
import { LitElement } from 'lit';
|
2
|
+
export declare class MenuButton extends LitElement {
|
3
|
+
static get styles(): import("lit").CSSResult;
|
4
|
+
icon: string;
|
5
|
+
href: string;
|
6
|
+
label: string;
|
7
|
+
menuDetails: string;
|
8
|
+
id: string;
|
9
|
+
selected: boolean;
|
10
|
+
followable: boolean;
|
11
|
+
onClick(e: Event): void;
|
12
|
+
dispatchMenuTypeSelectedEvent(): void;
|
13
|
+
get buttonClass(): "" | "selected";
|
14
|
+
get iconClass(): "active" | "";
|
15
|
+
get menuItem(): import("lit-html").TemplateResult<1>;
|
16
|
+
get linkButton(): import("lit-html").TemplateResult<1>;
|
17
|
+
get clickButton(): import("lit-html").TemplateResult<1>;
|
18
|
+
render(): import("lit-html").TemplateResult<1>;
|
19
|
+
}
|
@@ -1,48 +1,48 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { html, LitElement } from 'lit';
|
3
|
-
import { customElement, property } from 'lit/decorators.js';
|
4
|
-
import menuButtonCSS from './styles/menu-button';
|
5
|
-
let MenuButton = class MenuButton extends LitElement {
|
6
|
-
constructor() {
|
7
|
-
super(...arguments);
|
8
|
-
this.icon = '';
|
9
|
-
this.href = '';
|
10
|
-
this.label = '';
|
11
|
-
this.menuDetails = '';
|
12
|
-
this.id = '';
|
13
|
-
this.selected = false;
|
14
|
-
this.followable = false;
|
15
|
-
}
|
16
|
-
static get styles() {
|
17
|
-
return menuButtonCSS;
|
18
|
-
}
|
19
|
-
onClick(e) {
|
20
|
-
e.preventDefault();
|
21
|
-
this.dispatchMenuTypeSelectedEvent();
|
22
|
-
}
|
23
|
-
dispatchMenuTypeSelectedEvent() {
|
24
|
-
this.dispatchEvent(new CustomEvent('menuTypeSelected', {
|
25
|
-
bubbles: true,
|
26
|
-
composed: true,
|
27
|
-
detail: {
|
28
|
-
id: this.id,
|
29
|
-
},
|
30
|
-
}));
|
31
|
-
}
|
32
|
-
get buttonClass() {
|
33
|
-
return this.selected ? 'selected' : '';
|
34
|
-
}
|
35
|
-
get iconClass() {
|
36
|
-
return this.selected ? 'active' : '';
|
37
|
-
}
|
38
|
-
get menuItem() {
|
1
|
+
import { __decorate } from "tslib";
|
2
|
+
import { html, LitElement } from 'lit';
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
4
|
+
import menuButtonCSS from './styles/menu-button';
|
5
|
+
let MenuButton = class MenuButton extends LitElement {
|
6
|
+
constructor() {
|
7
|
+
super(...arguments);
|
8
|
+
this.icon = '';
|
9
|
+
this.href = '';
|
10
|
+
this.label = '';
|
11
|
+
this.menuDetails = '';
|
12
|
+
this.id = '';
|
13
|
+
this.selected = false;
|
14
|
+
this.followable = false;
|
15
|
+
}
|
16
|
+
static get styles() {
|
17
|
+
return menuButtonCSS;
|
18
|
+
}
|
19
|
+
onClick(e) {
|
20
|
+
e.preventDefault();
|
21
|
+
this.dispatchMenuTypeSelectedEvent();
|
22
|
+
}
|
23
|
+
dispatchMenuTypeSelectedEvent() {
|
24
|
+
this.dispatchEvent(new CustomEvent('menuTypeSelected', {
|
25
|
+
bubbles: true,
|
26
|
+
composed: true,
|
27
|
+
detail: {
|
28
|
+
id: this.id,
|
29
|
+
},
|
30
|
+
}));
|
31
|
+
}
|
32
|
+
get buttonClass() {
|
33
|
+
return this.selected ? 'selected' : '';
|
34
|
+
}
|
35
|
+
get iconClass() {
|
36
|
+
return this.selected ? 'active' : '';
|
37
|
+
}
|
38
|
+
get menuItem() {
|
39
39
|
return html `
|
40
40
|
<span class="icon ${this.iconClass}"> ${this.icon} </span>
|
41
41
|
<span class="label">${this.label}</span>
|
42
42
|
<span class="menu-details">${this.menuDetails}</span>
|
43
|
-
`;
|
44
|
-
}
|
45
|
-
get linkButton() {
|
43
|
+
`;
|
44
|
+
}
|
45
|
+
get linkButton() {
|
46
46
|
return html `
|
47
47
|
<a
|
48
48
|
href="${this.href}"
|
@@ -50,42 +50,42 @@ let MenuButton = class MenuButton extends LitElement {
|
|
50
50
|
@click=${this.followable ? undefined : this.onClick}
|
51
51
|
>${this.menuItem}</a
|
52
52
|
>
|
53
|
-
`;
|
54
|
-
}
|
55
|
-
get clickButton() {
|
53
|
+
`;
|
54
|
+
}
|
55
|
+
get clickButton() {
|
56
56
|
return html `
|
57
57
|
<button class="menu-item ${this.buttonClass}" @click=${this.onClick}>
|
58
58
|
${this.menuItem}
|
59
59
|
</button>
|
60
|
-
`;
|
61
|
-
}
|
62
|
-
render() {
|
63
|
-
return this.href ? this.linkButton : this.clickButton;
|
64
|
-
}
|
65
|
-
};
|
66
|
-
__decorate([
|
67
|
-
property({ type: String })
|
68
|
-
], MenuButton.prototype, "icon", void 0);
|
69
|
-
__decorate([
|
70
|
-
property({ type: String })
|
71
|
-
], MenuButton.prototype, "href", void 0);
|
72
|
-
__decorate([
|
73
|
-
property({ type: String })
|
74
|
-
], MenuButton.prototype, "label", void 0);
|
75
|
-
__decorate([
|
76
|
-
property({ type: String })
|
77
|
-
], MenuButton.prototype, "menuDetails", void 0);
|
78
|
-
__decorate([
|
79
|
-
property({ type: String })
|
80
|
-
], MenuButton.prototype, "id", void 0);
|
81
|
-
__decorate([
|
82
|
-
property({ type: Boolean })
|
83
|
-
], MenuButton.prototype, "selected", void 0);
|
84
|
-
__decorate([
|
85
|
-
property({ type: Boolean })
|
86
|
-
], MenuButton.prototype, "followable", void 0);
|
87
|
-
MenuButton = __decorate([
|
88
|
-
customElement('menu-button')
|
89
|
-
], MenuButton);
|
90
|
-
export { MenuButton };
|
60
|
+
`;
|
61
|
+
}
|
62
|
+
render() {
|
63
|
+
return this.href ? this.linkButton : this.clickButton;
|
64
|
+
}
|
65
|
+
};
|
66
|
+
__decorate([
|
67
|
+
property({ type: String })
|
68
|
+
], MenuButton.prototype, "icon", void 0);
|
69
|
+
__decorate([
|
70
|
+
property({ type: String })
|
71
|
+
], MenuButton.prototype, "href", void 0);
|
72
|
+
__decorate([
|
73
|
+
property({ type: String })
|
74
|
+
], MenuButton.prototype, "label", void 0);
|
75
|
+
__decorate([
|
76
|
+
property({ type: String })
|
77
|
+
], MenuButton.prototype, "menuDetails", void 0);
|
78
|
+
__decorate([
|
79
|
+
property({ type: String })
|
80
|
+
], MenuButton.prototype, "id", void 0);
|
81
|
+
__decorate([
|
82
|
+
property({ type: Boolean })
|
83
|
+
], MenuButton.prototype, "selected", void 0);
|
84
|
+
__decorate([
|
85
|
+
property({ type: Boolean })
|
86
|
+
], MenuButton.prototype, "followable", void 0);
|
87
|
+
MenuButton = __decorate([
|
88
|
+
customElement('menu-button')
|
89
|
+
], MenuButton);
|
90
|
+
export { MenuButton };
|
91
91
|
//# sourceMappingURL=menu-button.js.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
declare const _default: import("lit").CSSResult;
|
2
|
-
export default _default;
|
1
|
+
declare const _default: import("lit").CSSResult;
|
2
|
+
export default _default;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
declare const _default: import("lit").CSSResult;
|
2
|
-
export default _default;
|
1
|
+
declare const _default: import("lit").CSSResult;
|
2
|
+
export default _default;
|
@@ -1,7 +1,7 @@
|
|
1
|
-
import { css } from 'lit';
|
2
|
-
const menuButtonWidth = css `42px`;
|
3
|
-
const sliderWidth = css `var(--menuWidth, 320px)`;
|
4
|
-
const transitionTiming = css `var(--animationTiming, 200ms)`;
|
1
|
+
import { css } from 'lit';
|
2
|
+
const menuButtonWidth = css `42px`;
|
3
|
+
const sliderWidth = css `var(--menuWidth, 320px)`;
|
4
|
+
const transitionTiming = css `var(--animationTiming, 200ms)`;
|
5
5
|
export default css `
|
6
6
|
.main {
|
7
7
|
overflow: hidden;
|
@@ -92,6 +92,8 @@ export default css `
|
|
92
92
|
border-right: 0.2rem solid;
|
93
93
|
border-color: var(--subpanelRightBorderColor);
|
94
94
|
padding: 0.5rem 0 0 0.5rem;
|
95
|
+
display: flex;
|
96
|
+
flex-direction: column;
|
95
97
|
}
|
96
98
|
|
97
99
|
.open {
|
@@ -108,22 +110,9 @@ export default css `
|
|
108
110
|
margin-bottom: 0.2rem;
|
109
111
|
}
|
110
112
|
|
111
|
-
.content section {
|
112
|
-
height: 100%;
|
113
|
-
position: relative;
|
114
|
-
width: 100%;
|
115
|
-
}
|
116
|
-
|
117
|
-
.content .selected-menu {
|
113
|
+
.content > section {
|
118
114
|
overflow: auto;
|
119
|
-
|
120
|
-
position: relative;
|
121
|
-
}
|
122
|
-
|
123
|
-
.content .selected-menu > * {
|
124
|
-
display: block;
|
125
|
-
padding-bottom: 3rem;
|
126
|
-
position: relative;
|
115
|
+
overscroll-behavior: contain;
|
127
116
|
}
|
128
|
-
`;
|
117
|
+
`;
|
129
118
|
//# sourceMappingURL=menu-slider.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"menu-slider.js","sourceRoot":"","sources":["../../../../src/menu-slider/styles/menu-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA,MAAM,CAAC;AAClC,MAAM,WAAW,GAAG,GAAG,CAAA,yBAAyB,CAAC;AACjD,MAAM,gBAAgB,GAAG,GAAG,CAAA,+BAA+B,CAAC;AAE5D,eAAe,GAAG,CAAA;;;;;;;;4BAQU,gBAAgB;;;;;;;;aAQ/B,WAAW;;;;;;iCAMS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA4DhC,eAAe;;iCAEM,WAAW;4BAChB,gBAAgB
|
1
|
+
{"version":3,"file":"menu-slider.js","sourceRoot":"","sources":["../../../../src/menu-slider/styles/menu-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA,MAAM,CAAC;AAClC,MAAM,WAAW,GAAG,GAAG,CAAA,yBAAyB,CAAC;AACjD,MAAM,gBAAgB,GAAG,GAAG,CAAA,+BAA+B,CAAC;AAE5D,eAAe,GAAG,CAAA;;;;;;;;4BAQU,gBAAgB;;;;;;;;aAQ/B,WAAW;;;;;;iCAMS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA4DhC,eAAe;;iCAEM,WAAW;4BAChB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B3C,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst menuButtonWidth = css`42px`;\nconst sliderWidth = css`var(--menuWidth, 320px)`;\nconst transitionTiming = css`var(--animationTiming, 200ms)`;\n\nexport default css`\n .main {\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n .animate {\n transition: transform ${transitionTiming} ease-out;\n }\n\n .menu {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: ${sliderWidth};\n padding: 0.5rem 0.5rem 0 0;\n box-sizing: border-box;\n font-size: 1.4rem;\n color: var(--primaryTextColor);\n background: var(--menuSliderBg);\n transform: translateX(calc(${sliderWidth} * -1));\n }\n\n .menu > button.close {\n right: 0.7rem;\n }\n\n button {\n outline: none;\n cursor: pointer;\n }\n\n header {\n margin: 0 0 0.5rem 0;\n }\n\n header * {\n margin: 0;\n display: inline-block;\n }\n header button {\n outline: none;\n cursor: pointer;\n }\n\n header.with-secondary-action .details {\n width: 80%;\n }\n\n header .details {\n font-weight: bold;\n width: 88%;\n }\n\n header .custom-action > *,\n button.close {\n padding: 0;\n background-color: transparent;\n border: 0;\n --iconWidth: var(--menuSliderHeaderIconWidth);\n --iconHeight: var(--menuSliderHeaderIconHeight);\n }\n\n header .custom-action,\n button.close {\n position: absolute;\n }\n button.close {\n right: 0.5rem;\n }\n\n button.close * {\n float: right;\n }\n\n .content {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: ${menuButtonWidth};\n z-index: 1;\n transform: translateX(calc(${sliderWidth} * -1));\n transition: transform ${transitionTiming} ease-out;\n background: var(--activeButtonBg);\n border-right: 0.2rem solid;\n border-color: var(--subpanelRightBorderColor);\n padding: 0.5rem 0 0 0.5rem;\n display: flex;\n flex-direction: column;\n }\n\n .open {\n transform: translateX(0);\n }\n\n .menu-list {\n padding: 0;\n margin: 0;\n list-style: none;\n background: var(--menuSliderBg);\n }\n .menu-list li {\n margin-bottom: 0.2rem;\n }\n\n .content > section {\n overflow: auto;\n overscroll-behavior: contain;\n }\n`;\n"]}
|
@@ -1,9 +1,9 @@
|
|
1
|
-
import { LitElement, TemplateResult, PropertyValues, CSSResult } from 'lit';
|
2
|
-
export declare class IANoTheaterAvailable extends LitElement {
|
3
|
-
identifier?: string;
|
4
|
-
emitLoaded(): void;
|
5
|
-
updated(changed: PropertyValues): void;
|
6
|
-
get downloadUrl(): string;
|
7
|
-
render(): TemplateResult;
|
8
|
-
static get styles(): CSSResult;
|
9
|
-
}
|
1
|
+
import { LitElement, TemplateResult, PropertyValues, CSSResult } from 'lit';
|
2
|
+
export declare class IANoTheaterAvailable extends LitElement {
|
3
|
+
identifier?: string;
|
4
|
+
emitLoaded(): void;
|
5
|
+
updated(changed: PropertyValues): void;
|
6
|
+
get downloadUrl(): string;
|
7
|
+
render(): TemplateResult;
|
8
|
+
static get styles(): CSSResult;
|
9
|
+
}
|