@limetech/lime-elements
Version:
274 lines (273 loc) • 8.4 kB
JavaScript
import { h, Host, } from '@stencil/core';
const DEFAULT_MOBILE_BREAKPOINT = 700;
/**
* @exampleComponent limel-example-dock-basic
* @exampleComponent limel-example-dock-custom-component
* @exampleComponent limel-example-dock-notification
* @exampleComponent limel-example-dock-mobile
* @exampleComponent limel-example-dock-expanded
* @exampleComponent limel-example-dock-colors-css
*/
export class Dock {
constructor() {
this.renderSeparator = () => {
return this.useMobileLayout ? null : h("span", { class: "footer-separator" });
};
this.renderDockItem = (item) => {
return (h("limel-dock-button", { class: {
'dock-item': true,
selected: item.selected,
}, item: item, expanded: this.expanded && !this.useMobileLayout, useMobileLayout: this.useMobileLayout }));
};
this.handleResize = () => {
if (window.innerWidth <= this.mobileBreakPoint) {
this.useMobileLayout = true;
}
else {
this.useMobileLayout = false;
}
};
this.toggleDockWidth = () => {
this.expanded = !this.expanded;
this.dockExpanded.emit(this.expanded);
};
this.dockItems = [];
this.dockFooterItems = [];
this.accessibleLabel = undefined;
this.expanded = false;
this.allowResize = true;
this.mobileBreakPoint = DEFAULT_MOBILE_BREAKPOINT;
this.useMobileLayout = false;
}
componentDidLoad() {
this.resizeObserver = new ResizeObserver(this.handleResize);
this.resizeObserver.observe(document.body);
}
disconnectedCallback() {
this.resizeObserver.disconnect();
}
render() {
return (h(Host, { class: {
dock: true,
expanded: this.expanded,
'has-mobile-layout': this.useMobileLayout,
} }, h("nav", { "aria-label": this.accessibleLabel }, this.dockItems.map(this.renderDockItem), this.renderSeparator(), this.dockFooterItems.map(this.renderDockItem)), this.renderExpandShrinkToggle()));
}
renderExpandShrinkToggle() {
if (this.useMobileLayout || !this.allowResize) {
return;
}
return (h("button", { class: {
'expand-shrink': true,
expanded: this.expanded,
}, onClick: this.toggleDockWidth }, h("limel-icon", { name: "angle_right" })));
}
static get is() { return "limel-dock"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["dock.scss"]
};
}
static get styleUrls() {
return {
"$": ["dock.css"]
};
}
static get properties() {
return {
"dockItems": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "DockItem[]",
"resolved": "DockItem[]",
"references": {
"DockItem": {
"location": "import",
"path": "./dock.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Items that are placed in the dock."
},
"defaultValue": "[]"
},
"dockFooterItems": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "DockItem[]",
"resolved": "DockItem[]",
"references": {
"DockItem": {
"location": "import",
"path": "./dock.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Items that are placed at the bottom of the dock. (Or at the end in mobile\nlayout.)"
},
"defaultValue": "[]"
},
"accessibleLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "A label used to describe the purpose of the navigation element to users\nof assistive technologies, like screen readers. Especially useful when\nthere are multiple navigation elements in the user interface.\nExample value: \"Primary navigation\""
},
"attribute": "accessible-label",
"reflect": true
},
"expanded": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the width of the component, when it loads.\n- `true`: shows both icons and labels of the Dock items.\n- `false`: only shows icons of the doc items, and displays\ntheir labels as tooltip.\n\nNote: when `useMobileLayout` is `true`, labels will always\nbe shown as tooltips. Read more below\u2026"
},
"attribute": "expanded",
"reflect": true,
"defaultValue": "false"
},
"allowResize": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set to `false` if you do not want to allow end-users\nto exapnd or shrink the Dock. This will hide the\nexpand/shrink button, and the only things that defines\nthe layout will be the `expanded` property, and\nthe `mobileBreakPoint`."
},
"attribute": "allow-resize",
"reflect": true,
"defaultValue": "true"
},
"mobileBreakPoint": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the breakpoint in pixles, at which the component will be rendered\nin a hoizontal layout. Default breakpoint is `700` pixels, which means\nwhen the screen size is smaller than `700px`, the component will automatically\nswitch to a horizontal layout."
},
"attribute": "mobile-break-point",
"reflect": true,
"defaultValue": "DEFAULT_MOBILE_BREAKPOINT"
}
};
}
static get states() {
return {
"useMobileLayout": {}
};
}
static get events() {
return [{
"method": "itemSelected",
"name": "itemSelected",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired when a dock item has been selected from the dock."
},
"complexType": {
"original": "DockItem",
"resolved": "DockItem",
"references": {
"DockItem": {
"location": "import",
"path": "./dock.types"
}
}
}
}, {
"method": "menuOpen",
"name": "menuOpen",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired when a dock menu is opened."
},
"complexType": {
"original": "DockItem",
"resolved": "DockItem",
"references": {
"DockItem": {
"location": "import",
"path": "./dock.types"
}
}
}
}, {
"method": "close",
"name": "close",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired when the popover is closed."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "dockExpanded",
"name": "dockExpanded",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired when a Dock is expanded or collapsed."
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
}
//# sourceMappingURL=dock.js.map