@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
260 lines (259 loc) • 8 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
* v1.5.0-next.4
*/
import { Fragment, h } from "@stencil/core";
import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
import { getSlotted } from "../../utils/dom";
import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
import { SLOTS } from "./resources";
/**
* @slot content-start - A slot for adding non-actionable elements before the component's content.
* @slot content-end - A slot for adding non-actionable elements after the component's content.
*/
export class Tile {
constructor() {
this.active = false;
this.description = undefined;
this.disabled = false;
this.embed = false;
this.focused = false;
this.heading = undefined;
this.hidden = false;
this.href = undefined;
this.icon = undefined;
this.iconFlipRtl = false;
}
// --------------------------------------------------------------------------
//
// Lifecycle
//
// --------------------------------------------------------------------------
connectedCallback() {
connectConditionalSlotComponent(this);
connectInteractive(this);
}
disconnectedCallback() {
disconnectConditionalSlotComponent(this);
disconnectInteractive(this);
}
componentDidRender() {
updateHostInteraction(this);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
renderTile() {
const { icon, el, heading, description, iconFlipRtl } = this;
const isLargeVisual = heading && icon && !description;
const iconStyle = isLargeVisual
? {
height: "64px",
width: "64px"
}
: undefined;
return (h("div", { class: { container: true, "large-visual": isLargeVisual } }, icon && (h("div", { class: "icon" }, h("calcite-icon", { flipRtl: iconFlipRtl, icon: icon, scale: "l", style: iconStyle }))), h("div", { class: "content-container" }, getSlotted(el, SLOTS.contentStart) ? (h("div", { class: "content-slot-container" }, h("slot", { name: SLOTS.contentStart }))) : null, h("div", { class: "content" }, heading && h("div", { class: "heading" }, heading), description && h("div", { class: "description" }, description)), getSlotted(el, SLOTS.contentEnd) ? (h("div", { class: "content-slot-container" }, h("slot", { name: SLOTS.contentEnd }))) : null)));
}
render() {
return (h(Fragment, null, this.href ? (h("calcite-link", { disabled: this.disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
}
static get is() { return "calcite-tile"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["tile.scss"]
};
}
static get styleUrls() {
return {
"$": ["tile.css"]
};
}
static get properties() {
return {
"active": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, the component is active."
},
"attribute": "active",
"reflect": true,
"defaultValue": "false"
},
"description": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "A description for the component, which displays below the heading."
},
"attribute": "description",
"reflect": true
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"embed": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The component's embed mode.\n\nWhen `true`, renders without a border and padding for use by other components."
},
"attribute": "embed",
"reflect": true,
"defaultValue": "false"
},
"focused": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "The focused state of the component."
},
"attribute": "focused",
"reflect": true,
"defaultValue": "false"
},
"heading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The component header text, which displays between the icon and description."
},
"attribute": "heading",
"reflect": true
},
"hidden": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, the component is not displayed and is not focusable."
},
"attribute": "hidden",
"reflect": true,
"defaultValue": "false"
},
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When embed is `\"false\"`, the URL for the component."
},
"attribute": "href",
"reflect": true
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies an icon to display."
},
"attribute": "icon",
"reflect": true
},
"iconFlipRtl": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
},
"attribute": "icon-flip-rtl",
"reflect": true,
"defaultValue": "false"
}
};
}
static get elementRef() { return "el"; }
}