123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- /*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
- */
- import { Component, Element, Prop, h } from "@stencil/core";
- import { CSS, TEXT } from "./resources";
- /**
- * @slot - A slot for adding custom content, primarily loading information.
- */
- export class Scrim {
- constructor() {
- // --------------------------------------------------------------------------
- //
- // Properties
- //
- // --------------------------------------------------------------------------
- /** string to override English loading text
- * @default "Loading"
- */
- this.intlLoading = TEXT.loading;
- /**
- * Determines if the component will have the loader overlay.
- * Otherwise, will render opaque disabled state.
- */
- this.loading = false;
- }
- // --------------------------------------------------------------------------
- //
- // Render Method
- //
- // --------------------------------------------------------------------------
- render() {
- const { el, loading, intlLoading } = this;
- const hasContent = el.innerHTML.trim().length > 0;
- const loaderNode = loading ? h("calcite-loader", { active: true, label: intlLoading }) : null;
- const contentNode = hasContent ? (h("div", { class: CSS.content },
- h("slot", null))) : null;
- return (h("div", { class: CSS.scrim },
- loaderNode,
- contentNode));
- }
- static get is() { return "calcite-scrim"; }
- static get encapsulation() { return "shadow"; }
- static get originalStyleUrls() { return {
- "$": ["scrim.scss"]
- }; }
- static get styleUrls() { return {
- "$": ["scrim.css"]
- }; }
- static get properties() { return {
- "intlLoading": {
- "type": "string",
- "mutable": false,
- "complexType": {
- "original": "string",
- "resolved": "string",
- "references": {}
- },
- "required": false,
- "optional": true,
- "docs": {
- "tags": [{
- "name": "default",
- "text": "\"Loading\""
- }],
- "text": "string to override English loading text"
- },
- "attribute": "intl-loading",
- "reflect": false,
- "defaultValue": "TEXT.loading"
- },
- "loading": {
- "type": "boolean",
- "mutable": false,
- "complexType": {
- "original": "boolean",
- "resolved": "boolean",
- "references": {}
- },
- "required": false,
- "optional": false,
- "docs": {
- "tags": [],
- "text": "Determines if the component will have the loader overlay.\nOtherwise, will render opaque disabled state."
- },
- "attribute": "loading",
- "reflect": true,
- "defaultValue": "false"
- }
- }; }
- static get elementRef() { return "el"; }
- }
|