+ * `;
+ * }
+ *
+ * @eventOptions({capture: true})
+ * _onClick(e) {
+ * this.clicked = true;
+ * }
+ * }
+ * ```
+ * @category Decorator
+ */
+
+
+ function eventOptions(options) {
+ // Return value typed as any to prevent TypeScript from complaining that
+ // standard decorator function signature does not match TypeScript decorator
+ // signature
+ // TODO(kschaaf): unclear why it was only failing on this decorator and not
+ // the others
+ return function (protoOrDescriptor, name) {
+ return name !== undefined ? legacyEventOptions(options, protoOrDescriptor, name) : standardEventOptions(options, protoOrDescriptor);
+ };
+ } // x-browser support for matches
+
/**
@license
Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
@@ -47206,7 +47745,11 @@
part of the polymer project is also subject to an additional IP rights grant
found at http://polymer.github.io/PATENTS.txt
*/
- var supportsAdoptingStyleSheets = 'adoptedStyleSheets' in Document.prototype && 'replace' in CSSStyleSheet.prototype;
+
+ /**
+ * Whether the current browser supports `adoptedStyleSheets`.
+ */
+ var supportsAdoptingStyleSheets = window.ShadowRoot && (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) && 'adoptedStyleSheets' in Document.prototype && 'replace' in CSSStyleSheet.prototype;
var constructionToken = Symbol();
var CSSResult = /*#__PURE__*/function () {
function CSSResult(cssText, safeToken) {
@@ -47230,8 +47773,8 @@
key: "styleSheet",
get: function get() {
if (this._styleSheet === undefined) {
- // Note, if `adoptedStyleSheets` is supported then we assume CSSStyleSheet
- // is constructable.
+ // Note, if `supportsAdoptingStyleSheets` is true then we assume
+ // CSSStyleSheet is constructable.
if (supportsAdoptingStyleSheets) {
this._styleSheet = new CSSStyleSheet();
@@ -47247,6 +47790,17 @@
return CSSResult;
}();
+ /**
+ * Wrap a value for interpolation in a [[`css`]] tagged template literal.
+ *
+ * This is unsafe because untrusted CSS text can be used to phone home
+ * or exfiltrate data to an attacker controlled site. Take care to only use
+ * this with trusted input.
+ */
+
+ var unsafeCSS = function unsafeCSS(value) {
+ return new CSSResult(String(value), constructionToken);
+ };
var textFromCSSResult = function textFromCSSResult(value) {
if (value instanceof CSSResult) {
@@ -47258,10 +47812,10 @@
}
};
/**
- * Template tag which which can be used with LitElement's `style` property to
- * set element styles. For security reasons, only literal string values may be
- * used. To incorporate non-literal values `unsafeCSS` may be used inside a
- * template string part.
+ * Template tag which which can be used with LitElement's [[LitElement.styles |
+ * `styles`]] property to set element styles. For security reasons, only literal
+ * string values may be used. To incorporate non-literal values [[`unsafeCSS`]]
+ * may be used inside a template string part.
*/
@@ -47279,13 +47833,22 @@
// This line will be used in regexes to search for LitElement usage.
// TODO(justinfagnani): inject version number at build time
- (window['litElementVersions'] || (window['litElementVersions'] = [])).push('2.3.1');
+ (window['litElementVersions'] || (window['litElementVersions'] = [])).push('2.4.0');
/**
* Sentinal value used to avoid calling lit-html's render function when
* subclasses do not implement `render`
*/
var renderNotImplemented = {};
+ /**
+ * Base element class that manages element properties and attributes, and
+ * renders a lit-html template.
+ *
+ * To define a component, subclass `LitElement` and implement a
+ * `render` method to provide the component's template. Define properties
+ * using the [[`properties`]] property or the [[`property`]] decorator.
+ */
+
var LitElement = /*#__PURE__*/function (_UpdatingElement) {
_inherits(LitElement, _UpdatingElement);
@@ -47301,9 +47864,9 @@
key: "initialize",
/**
- * Performs element initialization. By default this calls `createRenderRoot`
- * to create the element `renderRoot` node and captures any pre-set values for
- * registered properties.
+ * Performs element initialization. By default this calls
+ * [[`createRenderRoot`]] to create the element [[`renderRoot`]] node and
+ * captures any pre-set values for registered properties.
*/
value: function initialize() {
_get(_getPrototypeOf(LitElement.prototype), "initialize", this).call(this);
@@ -47334,7 +47897,7 @@
});
}
/**
- * Applies styling to the element shadowRoot using the `static get styles`
+ * Applies styling to the element shadowRoot using the [[`styles`]]
* property. Styling will apply using `shadowRoot.adoptedStyleSheets` where
* available and will fallback otherwise. When Shadow DOM is polyfilled,
* ShadyCSS scopes styles and adds them to the document. When Shadow DOM
@@ -47352,7 +47915,7 @@
return;
} // There are three separate cases here based on Shadow DOM support.
// (1) shadowRoot polyfilled: use ShadyCSS
- // (2) shadowRoot.adoptedStyleSheets available: use it.
+ // (2) shadowRoot.adoptedStyleSheets available: use it
// (3) shadowRoot.adoptedStyleSheets polyfilled: append styles after
// rendering
@@ -47363,7 +47926,7 @@
}), this.localName);
} else if (supportsAdoptingStyleSheets) {
this.renderRoot.adoptedStyleSheets = styles.map(function (s) {
- return s.styleSheet;
+ return s instanceof CSSStyleSheet ? s : s.styleSheet;
});
} else {
// This must be done after rendering so the actual style insertion is done
@@ -47425,9 +47988,9 @@
}
/**
* Invoked on each update to perform rendering tasks. This method may return
- * any value renderable by lit-html's NodePart - typically a TemplateResult.
- * Setting properties inside this method will *not* trigger the element to
- * update.
+ * any value renderable by lit-html's `NodePart` - typically a
+ * `TemplateResult`. Setting properties inside this method will *not* trigger
+ * the element to update.
*/
}, {
@@ -47465,9 +48028,7 @@
var userStyles = this.getStyles();
- if (userStyles === undefined) {
- this._styles = [];
- } else if (Array.isArray(userStyles)) {
+ if (Array.isArray(userStyles)) {
// De-duplicate styles preserving the _last_ instance in the set.
// This is a performance optimization to avoid duplicated styles that can
// occur especially when composing via subclassing.
@@ -47491,8 +48052,29 @@
});
this._styles = styles;
} else {
- this._styles = [userStyles];
- }
+ this._styles = userStyles === undefined ? [] : [userStyles];
+ } // Ensure that there are no invalid CSSStyleSheet instances here. They are
+ // invalid in two conditions.
+ // (1) the sheet is non-constructible (`sheet` of a HTMLStyleElement), but
+ // this is impossible to check except via .replaceSync or use
+ // (2) the ShadyCSS polyfill is enabled (:. supportsAdoptingStyleSheets is
+ // false)
+
+
+ this._styles = this._styles.map(function (s) {
+ if (s instanceof CSSStyleSheet && !supportsAdoptingStyleSheets) {
+ // Flatten the cssText from the passed constructible stylesheet (or
+ // undetectable non-constructible stylesheet). The user might have
+ // expected to update their stylesheets over time, but the alternative
+ // is a crash.
+ var cssText = Array.prototype.slice.call(s.cssRules).reduce(function (css, rule) {
+ return css + rule.cssText;
+ }, '');
+ return unsafeCSS(cssText);
+ }
+
+ return s;
+ });
}
}]);
@@ -47508,15 +48090,925 @@
LitElement['finalized'] = true;
/**
- * Render method used to render the value to the element's DOM.
- * @param result The value to render.
- * @param container Node into which to render.
- * @param options Element name.
+ * Reference to the underlying library method used to render the element's
+ * DOM. By default, points to the `render` method from lit-html's shady-render
+ * module.
+ *
+ * **Most users will never need to touch this property.**
+ *
+ * This property should not be confused with the `render` instance method,
+ * which should be overridden to define a template for the element.
+ *
+ * Advanced users creating a new base class based on LitElement can override
+ * this property to point to a custom render method with a signature that
+ * matches [shady-render's `render`
+ * method](https://lit-html.polymer-project.org/api/modules/shady_render.html#render).
+ *
* @nocollapse
*/
LitElement.render = render$1;
+ function __decorate(decorators, target, key, desc) {
+ var c = arguments.length,
+ r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+ d;
+ if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
+ if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+ }
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
+ }
+
+ function __decorate$1(decorators, target, key, desc) {
+ var c = arguments.length,
+ r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+ d;
+ if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
+ if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+ }
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
+ }
+
+ var fn$7 = function fn() {};
+
+ var optionsBlock = {
+ get passive() {
+ return false;
+ }
+
+ };
+ document.addEventListener('x', fn$7, optionsBlock);
+ document.removeEventListener('x', fn$7);
+
+ /** @soyCompatible */
+
+ var BaseElement = /*#__PURE__*/function (_LitElement) {
+ _inherits(BaseElement, _LitElement);
+
+ var _super = _createSuper(BaseElement);
+
+ function BaseElement() {
+ _classCallCheck(this, BaseElement);
+
+ return _super.apply(this, arguments);
+ }
+
+ _createClass(BaseElement, [{
+ key: "click",
+ value: function click() {
+ if (this.mdcRoot) {
+ this.mdcRoot.focus();
+ this.mdcRoot.click();
+ return;
+ }
+
+ _get(_getPrototypeOf(BaseElement.prototype), "click", this).call(this);
+ }
+ /**
+ * Create and attach the MDC Foundation to the instance
+ */
+
+ }, {
+ key: "createFoundation",
+ value: function createFoundation() {
+ if (this.mdcFoundation !== undefined) {
+ this.mdcFoundation.destroy();
+ }
+
+ if (this.mdcFoundationClass) {
+ this.mdcFoundation = new this.mdcFoundationClass(this.createAdapter());
+ this.mdcFoundation.init();
+ }
+ }
+ }, {
+ key: "firstUpdated",
+ value: function firstUpdated() {
+ this.createFoundation();
+ }
+ }]);
+
+ return BaseElement;
+ }(LitElement);
+
+ /*! *****************************************************************************
+ Copyright (c) Microsoft Corporation. All rights reserved.
+ Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+ this file except in compliance with the License. You may obtain a copy of the
+ License at http://www.apache.org/licenses/LICENSE-2.0
+
+ THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+ WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+ MERCHANTABLITY OR NON-INFRINGEMENT.
+
+ See the Apache Version 2.0 License for specific language governing permissions
+ and limitations under the License.
+ ***************************************************************************** */
+ /* global Reflect, Promise */
+
+ var extendStatics = function(d, b) {
+ extendStatics = Object.setPrototypeOf ||
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+ function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+ return extendStatics(d, b);
+ };
+
+ function __extends(d, b) {
+ extendStatics(d, b);
+ function __() { this.constructor = d; }
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+ }
+
+ var __assign = function() {
+ __assign = Object.assign || function __assign(t) {
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
+ s = arguments[i];
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+ }
+ return t;
+ };
+ return __assign.apply(this, arguments);
+ };
+
+ /**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+ var MDCFoundation =
+ /** @class */
+ function () {
+ function MDCFoundation(adapter) {
+ if (adapter === void 0) {
+ adapter = {};
+ }
+
+ this.adapter = adapter;
+ }
+
+ Object.defineProperty(MDCFoundation, "cssClasses", {
+ get: function get() {
+ // Classes extending MDCFoundation should implement this method to return an object which exports every
+ // CSS class the foundation class needs as a property. e.g. {ACTIVE: 'mdc-component--active'}
+ return {};
+ },
+ enumerable: true,
+ configurable: true
+ });
+ Object.defineProperty(MDCFoundation, "strings", {
+ get: function get() {
+ // Classes extending MDCFoundation should implement this method to return an object which exports all
+ // semantic strings as constants. e.g. {ARIA_ROLE: 'tablist'}
+ return {};
+ },
+ enumerable: true,
+ configurable: true
+ });
+ Object.defineProperty(MDCFoundation, "numbers", {
+ get: function get() {
+ // Classes extending MDCFoundation should implement this method to return an object which exports all
+ // of its semantic numbers as constants. e.g. {ANIMATION_DELAY_MS: 350}
+ return {};
+ },
+ enumerable: true,
+ configurable: true
+ });
+ Object.defineProperty(MDCFoundation, "defaultAdapter", {
+ get: function get() {
+ // Classes extending MDCFoundation may choose to implement this getter in order to provide a convenient
+ // way of viewing the necessary methods of an adapter. In the future, this could also be used for adapter
+ // validation.
+ return {};
+ },
+ enumerable: true,
+ configurable: true
+ });
+
+ MDCFoundation.prototype.init = function () {// Subclasses should override this method to perform initialization routines (registering events, etc.)
+ };
+
+ MDCFoundation.prototype.destroy = function () {// Subclasses should override this method to perform de-initialization routines (de-registering events, etc.)
+ };
+
+ return MDCFoundation;
+ }();
+
+ /**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+ var cssClasses = {
+ // Ripple is a special case where the "root" component is really a "mixin" of sorts,
+ // given that it's an 'upgrade' to an existing component. That being said it is the root
+ // CSS class that all other CSS classes derive from.
+ BG_FOCUSED: 'mdc-ripple-upgraded--background-focused',
+ FG_ACTIVATION: 'mdc-ripple-upgraded--foreground-activation',
+ FG_DEACTIVATION: 'mdc-ripple-upgraded--foreground-deactivation',
+ ROOT: 'mdc-ripple-upgraded',
+ UNBOUNDED: 'mdc-ripple-upgraded--unbounded'
+ };
+ var strings = {
+ VAR_FG_SCALE: '--mdc-ripple-fg-scale',
+ VAR_FG_SIZE: '--mdc-ripple-fg-size',
+ VAR_FG_TRANSLATE_END: '--mdc-ripple-fg-translate-end',
+ VAR_FG_TRANSLATE_START: '--mdc-ripple-fg-translate-start',
+ VAR_LEFT: '--mdc-ripple-left',
+ VAR_TOP: '--mdc-ripple-top'
+ };
+ var numbers = {
+ DEACTIVATION_TIMEOUT_MS: 225,
+ FG_DEACTIVATION_MS: 150,
+ INITIAL_ORIGIN_SCALE: 0.6,
+ PADDING: 10,
+ TAP_DELAY_MS: 300
+ };
+
+ /**
+ * Stores result from supportsCssVariables to avoid redundant processing to
+ * detect CSS custom variable support.
+ */
+ function getNormalizedEventCoords(evt, pageOffset, clientRect) {
+ if (!evt) {
+ return {
+ x: 0,
+ y: 0
+ };
+ }
+
+ var x = pageOffset.x,
+ y = pageOffset.y;
+ var documentX = x + clientRect.left;
+ var documentY = y + clientRect.top;
+ var normalizedX;
+ var normalizedY; // Determine touch point relative to the ripple container.
+
+ if (evt.type === 'touchstart') {
+ var touchEvent = evt;
+ normalizedX = touchEvent.changedTouches[0].pageX - documentX;
+ normalizedY = touchEvent.changedTouches[0].pageY - documentY;
+ } else {
+ var mouseEvent = evt;
+ normalizedX = mouseEvent.pageX - documentX;
+ normalizedY = mouseEvent.pageY - documentY;
+ }
+
+ return {
+ x: normalizedX,
+ y: normalizedY
+ };
+ }
+
+ var ACTIVATION_EVENT_TYPES = ['touchstart', 'pointerdown', 'mousedown', 'keydown']; // Deactivation events registered on documentElement when a pointer-related down event occurs
+
+ var POINTER_DEACTIVATION_EVENT_TYPES = ['touchend', 'pointerup', 'mouseup', 'contextmenu']; // simultaneous nested activations
+
+ var activatedTargets = [];
+
+ var MDCRippleFoundation =
+ /** @class */
+ function (_super) {
+ __extends(MDCRippleFoundation, _super);
+
+ function MDCRippleFoundation(adapter) {
+ var _this = _super.call(this, __assign(__assign({}, MDCRippleFoundation.defaultAdapter), adapter)) || this;
+
+ _this.activationAnimationHasEnded_ = false;
+ _this.activationTimer_ = 0;
+ _this.fgDeactivationRemovalTimer_ = 0;
+ _this.fgScale_ = '0';
+ _this.frame_ = {
+ width: 0,
+ height: 0
+ };
+ _this.initialSize_ = 0;
+ _this.layoutFrame_ = 0;
+ _this.maxRadius_ = 0;
+ _this.unboundedCoords_ = {
+ left: 0,
+ top: 0
+ };
+ _this.activationState_ = _this.defaultActivationState_();
+
+ _this.activationTimerCallback_ = function () {
+ _this.activationAnimationHasEnded_ = true;
+
+ _this.runDeactivationUXLogicIfReady_();
+ };
+
+ _this.activateHandler_ = function (e) {
+ return _this.activate_(e);
+ };
+
+ _this.deactivateHandler_ = function () {
+ return _this.deactivate_();
+ };
+
+ _this.focusHandler_ = function () {
+ return _this.handleFocus();
+ };
+
+ _this.blurHandler_ = function () {
+ return _this.handleBlur();
+ };
+
+ _this.resizeHandler_ = function () {
+ return _this.layout();
+ };
+
+ return _this;
+ }
+
+ Object.defineProperty(MDCRippleFoundation, "cssClasses", {
+ get: function get() {
+ return cssClasses;
+ },
+ enumerable: true,
+ configurable: true
+ });
+ Object.defineProperty(MDCRippleFoundation, "strings", {
+ get: function get() {
+ return strings;
+ },
+ enumerable: true,
+ configurable: true
+ });
+ Object.defineProperty(MDCRippleFoundation, "numbers", {
+ get: function get() {
+ return numbers;
+ },
+ enumerable: true,
+ configurable: true
+ });
+ Object.defineProperty(MDCRippleFoundation, "defaultAdapter", {
+ get: function get() {
+ return {
+ addClass: function addClass() {
+ return undefined;
+ },
+ browserSupportsCssVars: function browserSupportsCssVars() {
+ return true;
+ },
+ computeBoundingRect: function computeBoundingRect() {
+ return {
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ width: 0,
+ height: 0
+ };
+ },
+ containsEventTarget: function containsEventTarget() {
+ return true;
+ },
+ deregisterDocumentInteractionHandler: function deregisterDocumentInteractionHandler() {
+ return undefined;
+ },
+ deregisterInteractionHandler: function deregisterInteractionHandler() {
+ return undefined;
+ },
+ deregisterResizeHandler: function deregisterResizeHandler() {
+ return undefined;
+ },
+ getWindowPageOffset: function getWindowPageOffset() {
+ return {
+ x: 0,
+ y: 0
+ };
+ },
+ isSurfaceActive: function isSurfaceActive() {
+ return true;
+ },
+ isSurfaceDisabled: function isSurfaceDisabled() {
+ return true;
+ },
+ isUnbounded: function isUnbounded() {
+ return true;
+ },
+ registerDocumentInteractionHandler: function registerDocumentInteractionHandler() {
+ return undefined;
+ },
+ registerInteractionHandler: function registerInteractionHandler() {
+ return undefined;
+ },
+ registerResizeHandler: function registerResizeHandler() {
+ return undefined;
+ },
+ removeClass: function removeClass() {
+ return undefined;
+ },
+ updateCssVariable: function updateCssVariable() {
+ return undefined;
+ }
+ };
+ },
+ enumerable: true,
+ configurable: true
+ });
+
+ MDCRippleFoundation.prototype.init = function () {
+ var _this = this;
+
+ var supportsPressRipple = this.supportsPressRipple_();
+ this.registerRootHandlers_(supportsPressRipple);
+
+ if (supportsPressRipple) {
+ var _a = MDCRippleFoundation.cssClasses,
+ ROOT_1 = _a.ROOT,
+ UNBOUNDED_1 = _a.UNBOUNDED;
+ requestAnimationFrame(function () {
+ _this.adapter.addClass(ROOT_1);
+
+ if (_this.adapter.isUnbounded()) {
+ _this.adapter.addClass(UNBOUNDED_1); // Unbounded ripples need layout logic applied immediately to set coordinates for both shade and ripple
+
+
+ _this.layoutInternal_();
+ }
+ });
+ }
+ };
+
+ MDCRippleFoundation.prototype.destroy = function () {
+ var _this = this;
+
+ if (this.supportsPressRipple_()) {
+ if (this.activationTimer_) {
+ clearTimeout(this.activationTimer_);
+ this.activationTimer_ = 0;
+ this.adapter.removeClass(MDCRippleFoundation.cssClasses.FG_ACTIVATION);
+ }
+
+ if (this.fgDeactivationRemovalTimer_) {
+ clearTimeout(this.fgDeactivationRemovalTimer_);
+ this.fgDeactivationRemovalTimer_ = 0;
+ this.adapter.removeClass(MDCRippleFoundation.cssClasses.FG_DEACTIVATION);
+ }
+
+ var _a = MDCRippleFoundation.cssClasses,
+ ROOT_2 = _a.ROOT,
+ UNBOUNDED_2 = _a.UNBOUNDED;
+ requestAnimationFrame(function () {
+ _this.adapter.removeClass(ROOT_2);
+
+ _this.adapter.removeClass(UNBOUNDED_2);
+
+ _this.removeCssVars_();
+ });
+ }
+
+ this.deregisterRootHandlers_();
+ this.deregisterDeactivationHandlers_();
+ };
+ /**
+ * @param evt Optional event containing position information.
+ */
+
+
+ MDCRippleFoundation.prototype.activate = function (evt) {
+ this.activate_(evt);
+ };
+
+ MDCRippleFoundation.prototype.deactivate = function () {
+ this.deactivate_();
+ };
+
+ MDCRippleFoundation.prototype.layout = function () {
+ var _this = this;
+
+ if (this.layoutFrame_) {
+ cancelAnimationFrame(this.layoutFrame_);
+ }
+
+ this.layoutFrame_ = requestAnimationFrame(function () {
+ _this.layoutInternal_();
+
+ _this.layoutFrame_ = 0;
+ });
+ };
+
+ MDCRippleFoundation.prototype.setUnbounded = function (unbounded) {
+ var UNBOUNDED = MDCRippleFoundation.cssClasses.UNBOUNDED;
+
+ if (unbounded) {
+ this.adapter.addClass(UNBOUNDED);
+ } else {
+ this.adapter.removeClass(UNBOUNDED);
+ }
+ };
+
+ MDCRippleFoundation.prototype.handleFocus = function () {
+ var _this = this;
+
+ requestAnimationFrame(function () {
+ return _this.adapter.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);
+ });
+ };
+
+ MDCRippleFoundation.prototype.handleBlur = function () {
+ var _this = this;
+
+ requestAnimationFrame(function () {
+ return _this.adapter.removeClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);
+ });
+ };
+ /**
+ * We compute this property so that we are not querying information about the client
+ * until the point in time where the foundation requests it. This prevents scenarios where
+ * client-side feature-detection may happen too early, such as when components are rendered on the server
+ * and then initialized at mount time on the client.
+ */
+
+
+ MDCRippleFoundation.prototype.supportsPressRipple_ = function () {
+ return this.adapter.browserSupportsCssVars();
+ };
+
+ MDCRippleFoundation.prototype.defaultActivationState_ = function () {
+ return {
+ activationEvent: undefined,
+ hasDeactivationUXRun: false,
+ isActivated: false,
+ isProgrammatic: false,
+ wasActivatedByPointer: false,
+ wasElementMadeActive: false
+ };
+ };
+ /**
+ * supportsPressRipple Passed from init to save a redundant function call
+ */
+
+
+ MDCRippleFoundation.prototype.registerRootHandlers_ = function (supportsPressRipple) {
+ var _this = this;
+
+ if (supportsPressRipple) {
+ ACTIVATION_EVENT_TYPES.forEach(function (evtType) {
+ _this.adapter.registerInteractionHandler(evtType, _this.activateHandler_);
+ });
+
+ if (this.adapter.isUnbounded()) {
+ this.adapter.registerResizeHandler(this.resizeHandler_);
+ }
+ }
+
+ this.adapter.registerInteractionHandler('focus', this.focusHandler_);
+ this.adapter.registerInteractionHandler('blur', this.blurHandler_);
+ };
+
+ MDCRippleFoundation.prototype.registerDeactivationHandlers_ = function (evt) {
+ var _this = this;
+
+ if (evt.type === 'keydown') {
+ this.adapter.registerInteractionHandler('keyup', this.deactivateHandler_);
+ } else {
+ POINTER_DEACTIVATION_EVENT_TYPES.forEach(function (evtType) {
+ _this.adapter.registerDocumentInteractionHandler(evtType, _this.deactivateHandler_);
+ });
+ }
+ };
+
+ MDCRippleFoundation.prototype.deregisterRootHandlers_ = function () {
+ var _this = this;
+
+ ACTIVATION_EVENT_TYPES.forEach(function (evtType) {
+ _this.adapter.deregisterInteractionHandler(evtType, _this.activateHandler_);
+ });
+ this.adapter.deregisterInteractionHandler('focus', this.focusHandler_);
+ this.adapter.deregisterInteractionHandler('blur', this.blurHandler_);
+
+ if (this.adapter.isUnbounded()) {
+ this.adapter.deregisterResizeHandler(this.resizeHandler_);
+ }
+ };
+
+ MDCRippleFoundation.prototype.deregisterDeactivationHandlers_ = function () {
+ var _this = this;
+
+ this.adapter.deregisterInteractionHandler('keyup', this.deactivateHandler_);
+ POINTER_DEACTIVATION_EVENT_TYPES.forEach(function (evtType) {
+ _this.adapter.deregisterDocumentInteractionHandler(evtType, _this.deactivateHandler_);
+ });
+ };
+
+ MDCRippleFoundation.prototype.removeCssVars_ = function () {
+ var _this = this;
+
+ var rippleStrings = MDCRippleFoundation.strings;
+ var keys = Object.keys(rippleStrings);
+ keys.forEach(function (key) {
+ if (key.indexOf('VAR_') === 0) {
+ _this.adapter.updateCssVariable(rippleStrings[key], null);
+ }
+ });
+ };
+
+ MDCRippleFoundation.prototype.activate_ = function (evt) {
+ var _this = this;
+
+ if (this.adapter.isSurfaceDisabled()) {
+ return;
+ }
+
+ var activationState = this.activationState_;
+
+ if (activationState.isActivated) {
+ return;
+ } // Avoid reacting to follow-on events fired by touch device after an already-processed user interaction
+
+
+ var previousActivationEvent = this.previousActivationEvent_;
+ var isSameInteraction = previousActivationEvent && evt !== undefined && previousActivationEvent.type !== evt.type;
+
+ if (isSameInteraction) {
+ return;
+ }
+
+ activationState.isActivated = true;
+ activationState.isProgrammatic = evt === undefined;
+ activationState.activationEvent = evt;
+ activationState.wasActivatedByPointer = activationState.isProgrammatic ? false : evt !== undefined && (evt.type === 'mousedown' || evt.type === 'touchstart' || evt.type === 'pointerdown');
+ var hasActivatedChild = evt !== undefined && activatedTargets.length > 0 && activatedTargets.some(function (target) {
+ return _this.adapter.containsEventTarget(target);
+ });
+
+ if (hasActivatedChild) {
+ // Immediately reset activation state, while preserving logic that prevents touch follow-on events
+ this.resetActivationState_();
+ return;
+ }
+
+ if (evt !== undefined) {
+ activatedTargets.push(evt.target);
+ this.registerDeactivationHandlers_(evt);
+ }
+
+ activationState.wasElementMadeActive = this.checkElementMadeActive_(evt);
+
+ if (activationState.wasElementMadeActive) {
+ this.animateActivation_();
+ }
+
+ requestAnimationFrame(function () {
+ // Reset array on next frame after the current event has had a chance to bubble to prevent ancestor ripples
+ activatedTargets = [];
+
+ if (!activationState.wasElementMadeActive && evt !== undefined && (evt.key === ' ' || evt.keyCode === 32)) {
+ // If space was pressed, try again within an rAF call to detect :active, because different UAs report
+ // active states inconsistently when they're called within event handling code:
+ // - https://bugs.chromium.org/p/chromium/issues/detail?id=635971
+ // - https://bugzilla.mozilla.org/show_bug.cgi?id=1293741
+ // We try first outside rAF to support Edge, which does not exhibit this problem, but will crash if a CSS
+ // variable is set within a rAF callback for a submit button interaction (#2241).
+ activationState.wasElementMadeActive = _this.checkElementMadeActive_(evt);
+
+ if (activationState.wasElementMadeActive) {
+ _this.animateActivation_();
+ }
+ }
+
+ if (!activationState.wasElementMadeActive) {
+ // Reset activation state immediately if element was not made active.
+ _this.activationState_ = _this.defaultActivationState_();
+ }
+ });
+ };
+
+ MDCRippleFoundation.prototype.checkElementMadeActive_ = function (evt) {
+ return evt !== undefined && evt.type === 'keydown' ? this.adapter.isSurfaceActive() : true;
+ };
+
+ MDCRippleFoundation.prototype.animateActivation_ = function () {
+ var _this = this;
+
+ var _a = MDCRippleFoundation.strings,
+ VAR_FG_TRANSLATE_START = _a.VAR_FG_TRANSLATE_START,
+ VAR_FG_TRANSLATE_END = _a.VAR_FG_TRANSLATE_END;
+ var _b = MDCRippleFoundation.cssClasses,
+ FG_DEACTIVATION = _b.FG_DEACTIVATION,
+ FG_ACTIVATION = _b.FG_ACTIVATION;
+ var DEACTIVATION_TIMEOUT_MS = MDCRippleFoundation.numbers.DEACTIVATION_TIMEOUT_MS;
+ this.layoutInternal_();
+ var translateStart = '';
+ var translateEnd = '';
+
+ if (!this.adapter.isUnbounded()) {
+ var _c = this.getFgTranslationCoordinates_(),
+ startPoint = _c.startPoint,
+ endPoint = _c.endPoint;
+
+ translateStart = startPoint.x + "px, " + startPoint.y + "px";
+ translateEnd = endPoint.x + "px, " + endPoint.y + "px";
+ }
+
+ this.adapter.updateCssVariable(VAR_FG_TRANSLATE_START, translateStart);
+ this.adapter.updateCssVariable(VAR_FG_TRANSLATE_END, translateEnd); // Cancel any ongoing activation/deactivation animations
+
+ clearTimeout(this.activationTimer_);
+ clearTimeout(this.fgDeactivationRemovalTimer_);
+ this.rmBoundedActivationClasses_();
+ this.adapter.removeClass(FG_DEACTIVATION); // Force layout in order to re-trigger the animation.
+
+ this.adapter.computeBoundingRect();
+ this.adapter.addClass(FG_ACTIVATION);
+ this.activationTimer_ = setTimeout(function () {
+ return _this.activationTimerCallback_();
+ }, DEACTIVATION_TIMEOUT_MS);
+ };
+
+ MDCRippleFoundation.prototype.getFgTranslationCoordinates_ = function () {
+ var _a = this.activationState_,
+ activationEvent = _a.activationEvent,
+ wasActivatedByPointer = _a.wasActivatedByPointer;
+ var startPoint;
+
+ if (wasActivatedByPointer) {
+ startPoint = getNormalizedEventCoords(activationEvent, this.adapter.getWindowPageOffset(), this.adapter.computeBoundingRect());
+ } else {
+ startPoint = {
+ x: this.frame_.width / 2,
+ y: this.frame_.height / 2
+ };
+ } // Center the element around the start point.
+
+
+ startPoint = {
+ x: startPoint.x - this.initialSize_ / 2,
+ y: startPoint.y - this.initialSize_ / 2
+ };
+ var endPoint = {
+ x: this.frame_.width / 2 - this.initialSize_ / 2,
+ y: this.frame_.height / 2 - this.initialSize_ / 2
+ };
+ return {
+ startPoint: startPoint,
+ endPoint: endPoint
+ };
+ };
+
+ MDCRippleFoundation.prototype.runDeactivationUXLogicIfReady_ = function () {
+ var _this = this; // This method is called both when a pointing device is released, and when the activation animation ends.
+ // The deactivation animation should only run after both of those occur.
+
+
+ var FG_DEACTIVATION = MDCRippleFoundation.cssClasses.FG_DEACTIVATION;
+ var _a = this.activationState_,
+ hasDeactivationUXRun = _a.hasDeactivationUXRun,
+ isActivated = _a.isActivated;
+ var activationHasEnded = hasDeactivationUXRun || !isActivated;
+
+ if (activationHasEnded && this.activationAnimationHasEnded_) {
+ this.rmBoundedActivationClasses_();
+ this.adapter.addClass(FG_DEACTIVATION);
+ this.fgDeactivationRemovalTimer_ = setTimeout(function () {
+ _this.adapter.removeClass(FG_DEACTIVATION);
+ }, numbers.FG_DEACTIVATION_MS);
+ }
+ };
+
+ MDCRippleFoundation.prototype.rmBoundedActivationClasses_ = function () {
+ var FG_ACTIVATION = MDCRippleFoundation.cssClasses.FG_ACTIVATION;
+ this.adapter.removeClass(FG_ACTIVATION);
+ this.activationAnimationHasEnded_ = false;
+ this.adapter.computeBoundingRect();
+ };
+
+ MDCRippleFoundation.prototype.resetActivationState_ = function () {
+ var _this = this;
+
+ this.previousActivationEvent_ = this.activationState_.activationEvent;
+ this.activationState_ = this.defaultActivationState_(); // Touch devices may fire additional events for the same interaction within a short time.
+ // Store the previous event until it's safe to assume that subsequent events are for new interactions.
+
+ setTimeout(function () {
+ return _this.previousActivationEvent_ = undefined;
+ }, MDCRippleFoundation.numbers.TAP_DELAY_MS);
+ };
+
+ MDCRippleFoundation.prototype.deactivate_ = function () {
+ var _this = this;
+
+ var activationState = this.activationState_; // This can happen in scenarios such as when you have a keyup event that blurs the element.
+
+ if (!activationState.isActivated) {
+ return;
+ }
+
+ var state = __assign({}, activationState);
+
+ if (activationState.isProgrammatic) {
+ requestAnimationFrame(function () {
+ return _this.animateDeactivation_(state);
+ });
+ this.resetActivationState_();
+ } else {
+ this.deregisterDeactivationHandlers_();
+ requestAnimationFrame(function () {
+ _this.activationState_.hasDeactivationUXRun = true;
+
+ _this.animateDeactivation_(state);
+
+ _this.resetActivationState_();
+ });
+ }
+ };
+
+ MDCRippleFoundation.prototype.animateDeactivation_ = function (_a) {
+ var wasActivatedByPointer = _a.wasActivatedByPointer,
+ wasElementMadeActive = _a.wasElementMadeActive;
+
+ if (wasActivatedByPointer || wasElementMadeActive) {
+ this.runDeactivationUXLogicIfReady_();
+ }
+ };
+
+ MDCRippleFoundation.prototype.layoutInternal_ = function () {
+ var _this = this;
+
+ this.frame_ = this.adapter.computeBoundingRect();
+ var maxDim = Math.max(this.frame_.height, this.frame_.width); // Surface diameter is treated differently for unbounded vs. bounded ripples.
+ // Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately
+ // to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically
+ // square). Bounded ripples, on the other hand, are fully expected to expand beyond the surface's longest diameter
+ // (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via
+ // `overflow: hidden`.
+
+ var getBoundedRadius = function getBoundedRadius() {
+ var hypotenuse = Math.sqrt(Math.pow(_this.frame_.width, 2) + Math.pow(_this.frame_.height, 2));
+ return hypotenuse + MDCRippleFoundation.numbers.PADDING;
+ };
+
+ this.maxRadius_ = this.adapter.isUnbounded() ? maxDim : getBoundedRadius(); // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
+
+ var initialSize = Math.floor(maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE); // Unbounded ripple size should always be even number to equally center align.
+
+ if (this.adapter.isUnbounded() && initialSize % 2 !== 0) {
+ this.initialSize_ = initialSize - 1;
+ } else {
+ this.initialSize_ = initialSize;
+ }
+
+ this.fgScale_ = "" + this.maxRadius_ / this.initialSize_;
+ this.updateLayoutCssVars_();
+ };
+
+ MDCRippleFoundation.prototype.updateLayoutCssVars_ = function () {
+ var _a = MDCRippleFoundation.strings,
+ VAR_FG_SIZE = _a.VAR_FG_SIZE,
+ VAR_LEFT = _a.VAR_LEFT,
+ VAR_TOP = _a.VAR_TOP,
+ VAR_FG_SCALE = _a.VAR_FG_SCALE;
+ this.adapter.updateCssVariable(VAR_FG_SIZE, this.initialSize_ + "px");
+ this.adapter.updateCssVariable(VAR_FG_SCALE, this.fgScale_);
+
+ if (this.adapter.isUnbounded()) {
+ this.unboundedCoords_ = {
+ left: Math.round(this.frame_.width / 2 - this.initialSize_ / 2),
+ top: Math.round(this.frame_.height / 2 - this.initialSize_ / 2)
+ };
+ this.adapter.updateCssVariable(VAR_LEFT, this.unboundedCoords_.left + "px");
+ this.adapter.updateCssVariable(VAR_TOP, this.unboundedCoords_.top + "px");
+ }
+ };
+
+ return MDCRippleFoundation;
+ }(MDCFoundation);
+
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -47531,6 +49023,54 @@
* http://polymer.github.io/PATENTS.txt
*/
var directives$1 = new WeakMap();
+ /**
+ * Brands a function as a directive factory function so that lit-html will call
+ * the function during template rendering, rather than passing as a value.
+ *
+ * A _directive_ is a function that takes a Part as an argument. It has the
+ * signature: `(part: Part) => void`.
+ *
+ * A directive _factory_ is a function that takes arguments for data and
+ * configuration and returns a directive. Users of directive usually refer to
+ * the directive factory as the directive. For example, "The repeat directive".
+ *
+ * Usually a template author will invoke a directive factory in their template
+ * with relevant arguments, which will then return a directive function.
+ *
+ * Here's an example of using the `repeat()` directive factory that takes an
+ * array and a function to render an item:
+ *
+ * ```js
+ * html`
<${repeat(items, (item) => html`
${item}
`)}
`
+ * ```
+ *
+ * When `repeat` is invoked, it returns a directive function that closes over
+ * `items` and the template function. When the outer template is rendered, the
+ * return directive function is called with the Part for the expression.
+ * `repeat` then performs it's custom logic to render multiple items.
+ *
+ * @param f The directive factory function. Must be a function that returns a
+ * function of the signature `(part: Part) => void`. The returned function will
+ * be called with the part object.
+ *
+ * @example
+ *
+ * import {directive, html} from 'lit-html';
+ *
+ * const immutable = directive((v) => (part) => {
+ * if (part.value !== v) {
+ * part.setValue(v)
+ * }
+ * });
+ */
+
+ var directive = function directive(f) {
+ return function () {
+ var d = f.apply(void 0, arguments);
+ directives$1.set(d, true);
+ return d;
+ };
+ };
var isDirective$1 = function isDirective(o) {
return typeof o === 'function' && directives$1.has(o);
};
@@ -47552,7 +49092,7 @@
/**
* True if the custom elements polyfill is in use.
*/
- var isCEPolyfill$1 = window.customElements !== undefined && window.customElements.polyfillWrapFlushCallback !== undefined;
+ var isCEPolyfill$1 = typeof window !== 'undefined' && window.customElements != null && window.customElements.polyfillWrapFlushCallback !== undefined;
/**
* Removes nodes, starting from `start` (inclusive) to `end` (exclusive), from
* `container`.
@@ -47659,7 +49199,8 @@
* * (') then any non-(')
*/
- var lastAttributeNameRegex$1 = /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
+ var lastAttributeNameRegex$1 = // eslint-disable-next-line no-control-regex
+ /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
/**
* An instance of a `Template` that can be attached to the DOM and updated
@@ -47740,7 +49281,7 @@
// Given these constraints, with full custom elements support we would
// prefer the order: Clone, Process, Adopt, Upgrade, Update, Connect
//
- // But Safari dooes not implement CustomElementRegistry#upgrade, so we
+ // But Safari does not implement CustomElementRegistry#upgrade, so we
// can not implement that order and still have upgrade-before-update and
// upgrade disconnected fragments. So we instead sacrifice the
// process-before-upgrade constraint, since in Custom Elements v1 elements
@@ -47828,6 +49369,21 @@
return TemplateInstance;
}();
+ /**
+ * Our TrustedTypePolicy for HTML which is declared using the html template
+ * tag function.
+ *
+ * That HTML is a developer-authored constant, and is parsed with innerHTML
+ * before any untrusted expressions have been mixed in. Therefor it is
+ * considered safe by construction.
+ */
+
+ var policy$1 = window.trustedTypes && trustedTypes.createPolicy('lit-html', {
+ createHTML: function createHTML(s) {
+ return s;
+ }
+ });
+ var commentMarker$1 = " ".concat(marker$1, " ");
/**
* The return type of `html`, which holds a Template and the values from
* interpolated expressions.
@@ -47858,7 +49414,7 @@
var s = this.strings[i]; // For each binding we want to determine the kind of marker to insert
// into the template source before it's parsed by the browser's HTML
// parser. The marker type is based on whether the expression is in an
- // attribute, text, or comment poisition.
+ // attribute, text, or comment position.
// * For node-position bindings we insert a comment with the marker
// sentinel as its text content, like .
// * For attribute bindings we insert just the marker sentinel for the
@@ -47877,7 +49433,7 @@
// comment close. Because <-- can appear in an attribute value there can
// be false positives.
- isCommentBinding = (commentOpen > -1 || isCommentBinding) && s.indexOf('-->', commentOpen + 1) === -1; // Check to see if we have an attribute-like sequence preceeding the
+ isCommentBinding = (commentOpen > -1 || isCommentBinding) && s.indexOf('-->', commentOpen + 1) === -1; // Check to see if we have an attribute-like sequence preceding the
// expression. This can match "name=value" like structures in text,
// comments, and attribute values, so there can be false-positives.
@@ -47885,11 +49441,11 @@
if (attributeMatch === null) {
// We're only in this branch if we don't have a attribute-like
- // preceeding sequence. For comments, this guards against unusual
+ // preceding sequence. For comments, this guards against unusual
// attribute values like
. Cases like
// are handled correctly in the attribute branch
// below.
- html += s + (isCommentBinding ? marker$1 : nodeMarker$1);
+ html += s + (isCommentBinding ? commentMarker$1 : nodeMarker$1);
} else {
// For attributes we use just a marker sentinel, and also append a
// $lit$ suffix to the name to opt-out of attribute-specific parsing
@@ -47905,7 +49461,17 @@
key: "getTemplateElement",
value: function getTemplateElement() {
var template = document.createElement('template');
- template.innerHTML = this.getHTML();
+ var value = this.getHTML();
+
+ if (policy$1 !== undefined) {
+ // this is secure because `this.strings` is a TemplateStringsArray.
+ // TODO: validate this when
+ // https://github.com/tc39/proposal-array-is-template-object is
+ // implemented.
+ value = policy$1.createHTML(value);
+ }
+
+ template.innerHTML = value;
return template;
}
}]);
@@ -47917,12 +49483,12 @@
return value === null || !(_typeof(value) === 'object' || typeof value === 'function');
};
var isIterable$1 = function isIterable(value) {
- return Array.isArray(value) || // tslint:disable-next-line:no-any
+ return Array.isArray(value) || // eslint-disable-next-line @typescript-eslint/no-explicit-any
!!(value && value[Symbol.iterator]);
};
/**
* Writes attribute values to the DOM for a group of AttributeParts bound to a
- * single attibute. The value is only set once even if there are multiple parts
+ * single attribute. The value is only set once even if there are multiple parts
* for an attribute.
*/
@@ -47955,19 +49521,45 @@
value: function _getValue() {
var strings = this.strings;
var l = strings.length - 1;
+ var parts = this.parts; // If we're assigning an attribute via syntax like:
+ // attr="${foo}" or attr=${foo}
+ // but not
+ // attr="${foo} ${bar}" or attr="${foo} baz"
+ // then we don't want to coerce the attribute value into one long
+ // string. Instead we want to just return the value itself directly,
+ // so that sanitizeDOMValue can get the actual value rather than
+ // String(value)
+ // The exception is if v is an array, in which case we do want to smash
+ // it together into a string without calling String() on the array.
+ //
+ // This also allows trusted values (when using TrustedTypes) being
+ // assigned to DOM sinks without being stringified in the process.
+
+ if (l === 1 && strings[0] === '' && strings[1] === '') {
+ var v = parts[0].value;
+
+ if (_typeof(v) === 'symbol') {
+ return String(v);
+ }
+
+ if (typeof v === 'string' || !isIterable$1(v)) {
+ return v;
+ }
+ }
+
var text = '';
for (var i = 0; i < l; i++) {
text += strings[i];
- var part = this.parts[i];
+ var part = parts[i];
if (part !== undefined) {
- var v = part.value;
+ var _v = part.value;
- if (isPrimitive$1(v) || !isIterable$1(v)) {
- text += typeof v === 'string' ? v : String(v);
+ if (isPrimitive$1(_v) || !isIterable$1(_v)) {
+ text += typeof _v === 'string' ? _v : String(_v);
} else {
- var _iterator = _createForOfIteratorHelper(v),
+ var _iterator = _createForOfIteratorHelper(_v),
_step;
try {
@@ -48122,6 +49714,10 @@
}, {
key: "commit",
value: function commit() {
+ if (this.startNode.parentNode === null) {
+ return;
+ }
+
while (isDirective$1(this.__pendingValue)) {
var directive = this.__pendingValue;
this.__pendingValue = noChange$1;
@@ -48174,7 +49770,10 @@
key: "__commitText",
value: function __commitText(value) {
var node = this.startNode.nextSibling;
- value = value == null ? '' : value;
+ value = value == null ? '' : value; // If `value` isn't already a string, we explicitly convert it here in case
+ // it can't be implicitly converted - i.e. it's a symbol.
+
+ var valueAsString = typeof value === 'string' ? value : String(value);
if (node === this.endNode.previousSibling && node.nodeType === 3
/* Node.TEXT_NODE */
@@ -48182,9 +49781,9 @@
// If we only have a single text node between the markers, we can just
// set its value, rather than replacing it.
// TODO(justinfagnani): Can we just check if this.value is primitive?
- node.data = value;
+ node.data = valueAsString;
} else {
- this.__commitNode(document.createTextNode(typeof value === 'string' ? value : String(value)));
+ this.__commitNode(document.createTextNode(valueAsString));
}
this.value = value;
@@ -48384,7 +49983,7 @@
key: "commit",
value: function commit() {
if (this.dirty) {
- this.dirty = false; // tslint:disable-next-line:no-any
+ this.dirty = false; // eslint-disable-next-line @typescript-eslint/no-explicit-any
this.element[this.name] = this._getValue();
}
@@ -48406,25 +50005,29 @@
return PropertyPart;
}(AttributePart$1); // Detect event listener options support. If the `capture` property is read
- // from the options object, then options are supported. If not, then the thrid
+ // from the options object, then options are supported. If not, then the third
// argument to add/removeEventListener is interpreted as the boolean capture
// value so we should only pass the `capture` property.
- var eventOptionsSupported$1 = false;
+ var eventOptionsSupported$1 = false; // Wrap into an IIFE because MS Edge <= v41 does not support having try/catch
+ // blocks right into the body of a module
- try {
- var options = {
- get capture() {
- eventOptionsSupported$1 = true;
- return false;
- }
+ (function () {
+ try {
+ var options = {
+ get capture() {
+ eventOptionsSupported$1 = true;
+ return false;
+ }
- }; // tslint:disable-next-line:no-any
+ }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
- window.addEventListener('test', options, options); // tslint:disable-next-line:no-any
+ window.addEventListener('test', options, options); // eslint-disable-next-line @typescript-eslint/no-explicit-any
- window.removeEventListener('test', options, options);
- } catch (_e) {}
+ window.removeEventListener('test', options, options);
+ } catch (_e) {// event options not supported
+ }
+ })();
var EventPart$1 = /*#__PURE__*/function () {
function EventPart(element, eventName, eventContext) {
@@ -48575,10 +50178,199 @@
// This line will be used in regexes to search for lit-html usage.
// TODO(justinfagnani): inject version number at build time
- (window['litHtmlVersions'] || (window['litHtmlVersions'] = [])).push('1.0.0');
+ if (typeof window !== 'undefined') {
+ (window['litHtmlVersions'] || (window['litHtmlVersions'] = [])).push('1.3.0');
+ }
+
+ var ClassList = /*#__PURE__*/function () {
+ function ClassList(element) {
+ _classCallCheck(this, ClassList);
+
+ this.classes = new Set();
+ this.changed = false;
+ this.element = element;
+ var classList = (element.getAttribute('class') || '').split(/\s+/);
+
+ var _iterator = _createForOfIteratorHelper(classList),
+ _step;
+
+ try {
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
+ var cls = _step.value;
+ this.classes.add(cls);
+ }
+ } catch (err) {
+ _iterator.e(err);
+ } finally {
+ _iterator.f();
+ }
+ }
+
+ _createClass(ClassList, [{
+ key: "add",
+ value: function add(cls) {
+ this.classes.add(cls);
+ this.changed = true;
+ }
+ }, {
+ key: "remove",
+ value: function remove(cls) {
+ this.classes["delete"](cls);
+ this.changed = true;
+ }
+ }, {
+ key: "commit",
+ value: function commit() {
+ if (this.changed) {
+ var classString = '';
+ this.classes.forEach(function (cls) {
+ return classString += cls + ' ';
+ });
+ this.element.setAttribute('class', classString);
+ }
+ }
+ }]);
+
+ return ClassList;
+ }();
+ /**
+ * Stores the ClassInfo object applied to a given AttributePart.
+ * Used to unset existing values when a new ClassInfo object is applied.
+ */
+
+
+ var previousClassesCache = new WeakMap();
+ /**
+ * A directive that applies CSS classes. This must be used in the `class`
+ * attribute and must be the only part used in the attribute. It takes each
+ * property in the `classInfo` argument and adds the property name to the
+ * element's `class` if the property value is truthy; if the property value is
+ * falsey, the property name is removed from the element's `class`. For example
+ * `{foo: bar}` applies the class `foo` if the value of `bar` is truthy.
+ * @param classInfo {ClassInfo}
+ */
+
+ var classMap = directive(function (classInfo) {
+ return function (part) {
+ if (!(part instanceof AttributePart$1) || part instanceof PropertyPart$1 || part.committer.name !== 'class' || part.committer.parts.length > 1) {
+ throw new Error('The `classMap` directive must be used in the `class` attribute ' + 'and must be the only part in the attribute.');
+ }
+
+ var committer = part.committer;
+ var element = committer.element;
+ var previousClasses = previousClassesCache.get(part);
+
+ if (previousClasses === undefined) {
+ // Write static classes once
+ // Use setAttribute() because className isn't a string on SVG elements
+ element.setAttribute('class', committer.strings.join(' '));
+ previousClassesCache.set(part, previousClasses = new Set());
+ }
+
+ var classList = element.classList || new ClassList(element); // Remove old classes that no longer apply
+ // We use forEach() instead of for-of so that re don't require down-level
+ // iteration.
+
+ previousClasses.forEach(function (name) {
+ if (!(name in classInfo)) {
+ classList.remove(name);
+ previousClasses["delete"](name);
+ }
+ }); // Add or remove classes based on their classMap value
+
+ for (var name in classInfo) {
+ var value = classInfo[name];
+
+ if (value != previousClasses.has(name)) {
+ // We explicitly want a loose truthy check of `value` because it seems
+ // more convenient that '' and 0 are skipped.
+ if (value) {
+ classList.add(name);
+ previousClasses.add(name);
+ } else {
+ classList.remove(name);
+ previousClasses["delete"](name);
+ }
+ }
+ }
+
+ if (typeof classList.commit === 'function') {
+ classList.commit();
+ }
+ };
+ });
+
+ /**
+ * Stores the StyleInfo object applied to a given AttributePart.
+ * Used to unset existing values when a new StyleInfo object is applied.
+ */
+
+ var previousStylePropertyCache = new WeakMap();
+ /**
+ * A directive that applies CSS properties to an element.
+ *
+ * `styleMap` can only be used in the `style` attribute and must be the only
+ * expression in the attribute. It takes the property names in the `styleInfo`
+ * object and adds the property values as CSS properties. Property names with
+ * dashes (`-`) are assumed to be valid CSS property names and set on the
+ * element's style object using `setProperty()`. Names without dashes are
+ * assumed to be camelCased JavaScript property names and set on the element's
+ * style object using property assignment, allowing the style object to
+ * translate JavaScript-style names to CSS property names.
+ *
+ * For example `styleMap({backgroundColor: 'red', 'border-top': '5px', '--size':
+ * '0'})` sets the `background-color`, `border-top` and `--size` properties.
+ *
+ * @param styleInfo {StyleInfo}
+ */
+
+ var styleMap = directive(function (styleInfo) {
+ return function (part) {
+ if (!(part instanceof AttributePart$1) || part instanceof PropertyPart$1 || part.committer.name !== 'style' || part.committer.parts.length > 1) {
+ throw new Error('The `styleMap` directive must be used in the style attribute ' + 'and must be the only part in the attribute.');
+ }
+
+ var committer = part.committer;
+ var style = committer.element.style;
+ var previousStyleProperties = previousStylePropertyCache.get(part);
+
+ if (previousStyleProperties === undefined) {
+ // Write static styles once
+ style.cssText = committer.strings.join(' ');
+ previousStylePropertyCache.set(part, previousStyleProperties = new Set());
+ } // Remove old properties that no longer exist in styleInfo
+ // We use forEach() instead of for-of so that re don't require down-level
+ // iteration.
+
+
+ previousStyleProperties.forEach(function (name) {
+ if (!(name in styleInfo)) {
+ previousStyleProperties["delete"](name);
+
+ if (name.indexOf('-') === -1) {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ style[name] = null;
+ } else {
+ style.removeProperty(name);
+ }
+ }
+ }); // Add or update properties
+
+ for (var name in styleInfo) {
+ previousStyleProperties.add(name);
+
+ if (name.indexOf('-') === -1) {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ style[name] = styleInfo[name];
+ } else {
+ style.setProperty(name, styleInfo[name]);
+ }
+ }
+ };
+ });
function _templateObject() {
- var data = _taggedTemplateLiteral([":host{font-family:var(--mdc-icon-font, \"Material Icons\");font-weight:normal;font-style:normal;font-size:var(--mdc-icon-size, 24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}"]);
+ var data = _taggedTemplateLiteral(["\n "]);
_templateObject = function _templateObject() {
return data;
@@ -48586,11 +50378,327 @@
return data;
}
- var style = css(_templateObject());
+ /** @soyCompatible */
+
+ var RippleBase = /*#__PURE__*/function (_BaseElement) {
+ _inherits(RippleBase, _BaseElement);
+
+ var _super = _createSuper(RippleBase);
+
+ function RippleBase() {
+ var _this;
+
+ _classCallCheck(this, RippleBase);
+
+ _this = _super.apply(this, arguments);
+ _this.primary = false;
+ _this.accent = false;
+ _this.unbounded = false;
+ _this.disabled = false;
+ _this.activated = false;
+ _this.selected = false;
+ _this.hovering = false;
+ _this.bgFocused = false;
+ _this.fgActivation = false;
+ _this.fgDeactivation = false;
+ _this.fgScale = '';
+ _this.fgSize = '';
+ _this.translateStart = '';
+ _this.translateEnd = '';
+ _this.leftPos = '';
+ _this.topPos = '';
+ _this.mdcFoundationClass = MDCRippleFoundation;
+ return _this;
+ }
+
+ _createClass(RippleBase, [{
+ key: "createAdapter",
+ value: function createAdapter() {
+ var _this2 = this;
+
+ return {
+ browserSupportsCssVars: function browserSupportsCssVars() {
+ return true;
+ },
+ isUnbounded: function isUnbounded() {
+ return _this2.unbounded;
+ },
+ isSurfaceActive: function isSurfaceActive() {
+ return _this2.isActive;
+ },
+ isSurfaceDisabled: function isSurfaceDisabled() {
+ return _this2.disabled;
+ },
+ addClass: function addClass(className) {
+ switch (className) {
+ case 'mdc-ripple-upgraded--background-focused':
+ _this2.bgFocused = true;
+ break;
+
+ case 'mdc-ripple-upgraded--foreground-activation':
+ _this2.fgActivation = true;
+ break;
+
+ case 'mdc-ripple-upgraded--foreground-deactivation':
+ _this2.fgDeactivation = true;
+ break;
+ }
+ },
+ removeClass: function removeClass(className) {
+ switch (className) {
+ case 'mdc-ripple-upgraded--background-focused':
+ _this2.bgFocused = false;
+ break;
+
+ case 'mdc-ripple-upgraded--foreground-activation':
+ _this2.fgActivation = false;
+ break;
+
+ case 'mdc-ripple-upgraded--foreground-deactivation':
+ _this2.fgDeactivation = false;
+ break;
+ }
+ },
+ containsEventTarget: function containsEventTarget() {
+ return true;
+ },
+ registerInteractionHandler: function registerInteractionHandler() {
+ return undefined;
+ },
+ deregisterInteractionHandler: function deregisterInteractionHandler() {
+ return undefined;
+ },
+ registerDocumentInteractionHandler: function registerDocumentInteractionHandler() {
+ return undefined;
+ },
+ deregisterDocumentInteractionHandler: function deregisterDocumentInteractionHandler() {
+ return undefined;
+ },
+ registerResizeHandler: function registerResizeHandler() {
+ return undefined;
+ },
+ deregisterResizeHandler: function deregisterResizeHandler() {
+ return undefined;
+ },
+ updateCssVariable: function updateCssVariable(varName, value) {
+ switch (varName) {
+ case '--mdc-ripple-fg-scale':
+ _this2.fgScale = value;
+ break;
+
+ case '--mdc-ripple-fg-size':
+ _this2.fgSize = value;
+ break;
+
+ case '--mdc-ripple-fg-translate-end':
+ _this2.translateEnd = value;
+ break;
+
+ case '--mdc-ripple-fg-translate-start':
+ _this2.translateStart = value;
+ break;
+
+ case '--mdc-ripple-left':
+ _this2.leftPos = value;
+ break;
+
+ case '--mdc-ripple-top':
+ _this2.topPos = value;
+ break;
+ }
+ },
+ computeBoundingRect: function computeBoundingRect() {
+ return (_this2.parentElement || _this2).getBoundingClientRect();
+ },
+ getWindowPageOffset: function getWindowPageOffset() {
+ return {
+ x: window.pageXOffset,
+ y: window.pageYOffset
+ };
+ }
+ };
+ }
+ }, {
+ key: "startPress",
+ value: function startPress(ev) {
+ var _this3 = this;
+
+ this.waitForFoundation(function () {
+ _this3.mdcFoundation.activate(ev);
+ });
+ }
+ }, {
+ key: "endPress",
+ value: function endPress() {
+ var _this4 = this;
+
+ this.waitForFoundation(function () {
+ _this4.mdcFoundation.deactivate();
+ });
+ }
+ }, {
+ key: "startFocus",
+ value: function startFocus() {
+ var _this5 = this;
+
+ this.waitForFoundation(function () {
+ _this5.mdcFoundation.handleFocus();
+ });
+ }
+ }, {
+ key: "endFocus",
+ value: function endFocus() {
+ var _this6 = this;
+
+ this.waitForFoundation(function () {
+ _this6.mdcFoundation.handleBlur();
+ });
+ }
+ }, {
+ key: "startHover",
+ value: function startHover() {
+ this.hovering = true;
+ }
+ }, {
+ key: "endHover",
+ value: function endHover() {
+ this.hovering = false;
+ }
+ /**
+ * Wait for the MDCFoundation to be created by `firstUpdated`
+ */
+
+ }, {
+ key: "waitForFoundation",
+ value: function waitForFoundation(fn) {
+ if (this.mdcFoundation) {
+ fn();
+ } else {
+ this.updateComplete.then(fn);
+ }
+ }
+ /** @soyTemplate */
+
+ }, {
+ key: "render",
+ value: function render() {
+ var shouldActivateInPrimary = this.activated && (this.primary || !this.accent);
+ var shouldSelectInPrimary = this.selected && (this.primary || !this.accent);
+ /** @classMap */
+
+ var classes = {
+ 'mdc-ripple-surface--accent': this.accent,
+ 'mdc-ripple-surface--primary--activated': shouldActivateInPrimary,
+ 'mdc-ripple-surface--accent--activated': this.accent && this.activated,
+ 'mdc-ripple-surface--primary--selected': shouldSelectInPrimary,
+ 'mdc-ripple-surface--accent--selected': this.accent && this.selected,
+ 'mdc-ripple-surface--disabled': this.disabled,
+ 'mdc-ripple-surface--hover': this.hovering,
+ 'mdc-ripple-surface--primary': this.primary,
+ 'mdc-ripple-surface--selected': this.selected,
+ 'mdc-ripple-upgraded--background-focused': this.bgFocused,
+ 'mdc-ripple-upgraded--foreground-activation': this.fgActivation,
+ 'mdc-ripple-upgraded--foreground-deactivation': this.fgDeactivation,
+ 'mdc-ripple-upgraded--unbounded': this.unbounded
+ };
+ return html$1(_templateObject(), classMap(classes), styleMap({
+ '--mdc-ripple-fg-scale': this.fgScale,
+ '--mdc-ripple-fg-size': this.fgSize,
+ '--mdc-ripple-fg-translate-end': this.translateEnd,
+ '--mdc-ripple-fg-translate-start': this.translateStart,
+ '--mdc-ripple-left': this.leftPos,
+ '--mdc-ripple-top': this.topPos
+ }));
+ }
+ }, {
+ key: "isActive",
+ get: function get() {
+ return (this.parentElement || this).matches(':active');
+ }
+ }]);
+
+ return RippleBase;
+ }(BaseElement);
+
+ __decorate$1([query('.mdc-ripple-surface')], RippleBase.prototype, "mdcRoot", void 0);
+
+ __decorate$1([property({
+ type: Boolean
+ })], RippleBase.prototype, "primary", void 0);
+
+ __decorate$1([property({
+ type: Boolean
+ })], RippleBase.prototype, "accent", void 0);
+
+ __decorate$1([property({
+ type: Boolean
+ })], RippleBase.prototype, "unbounded", void 0);
+
+ __decorate$1([property({
+ type: Boolean
+ })], RippleBase.prototype, "disabled", void 0);
+
+ __decorate$1([property({
+ type: Boolean
+ })], RippleBase.prototype, "activated", void 0);
+
+ __decorate$1([property({
+ type: Boolean
+ })], RippleBase.prototype, "selected", void 0);
+
+ __decorate$1([internalProperty()], RippleBase.prototype, "hovering", void 0);
+
+ __decorate$1([internalProperty()], RippleBase.prototype, "bgFocused", void 0);
+
+ __decorate$1([internalProperty()], RippleBase.prototype, "fgActivation", void 0);
+
+ __decorate$1([internalProperty()], RippleBase.prototype, "fgDeactivation", void 0);
+
+ __decorate$1([internalProperty()], RippleBase.prototype, "fgScale", void 0);
+
+ __decorate$1([internalProperty()], RippleBase.prototype, "fgSize", void 0);
+
+ __decorate$1([internalProperty()], RippleBase.prototype, "translateStart", void 0);
+
+ __decorate$1([internalProperty()], RippleBase.prototype, "translateEnd", void 0);
+
+ __decorate$1([internalProperty()], RippleBase.prototype, "leftPos", void 0);
+
+ __decorate$1([internalProperty()], RippleBase.prototype, "topPos", void 0);
+
+ function _templateObject$1() {
+ var data = _taggedTemplateLiteral([".mdc-ripple-surface{--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity;position:relative;outline:none;overflow:hidden}.mdc-ripple-surface::before,.mdc-ripple-surface::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface::before,.mdc-ripple-surface::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-ripple-surface:hover::before,.mdc-ripple-surface.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::before,.mdc-ripple-surface::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-upgraded--unbounded::before,.mdc-ripple-upgraded--unbounded::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}:host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:block}:host .mdc-ripple-surface{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;will-change:unset}.mdc-ripple-surface--primary::before,.mdc-ripple-surface--primary::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-ripple-surface--primary:hover::before,.mdc-ripple-surface--primary.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface--primary.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface--primary--activated::before{opacity:0.12;opacity:var(--mdc-ripple-activated-opacity, 0.12)}.mdc-ripple-surface--primary--activated::before,.mdc-ripple-surface--primary--activated::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-ripple-surface--primary--activated:hover::before,.mdc-ripple-surface--primary--activated.mdc-ripple-surface--hover::before{opacity:0.16;opacity:var(--mdc-ripple-hover-opacity, 0.16)}.mdc-ripple-surface--primary--activated.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--primary--activated:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-focus-opacity, 0.24)}.mdc-ripple-surface--primary--activated:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--primary--activated:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-ripple-surface--primary--activated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24)}.mdc-ripple-surface--primary--selected::before{opacity:0.08;opacity:var(--mdc-ripple-selected-opacity, 0.08)}.mdc-ripple-surface--primary--selected::before,.mdc-ripple-surface--primary--selected::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-ripple-surface--primary--selected:hover::before,.mdc-ripple-surface--primary--selected.mdc-ripple-surface--hover::before{opacity:0.12;opacity:var(--mdc-ripple-hover-opacity, 0.12)}.mdc-ripple-surface--primary--selected.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--primary--selected:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-focus-opacity, 0.2)}.mdc-ripple-surface--primary--selected:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--primary--selected:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-press-opacity, 0.2)}.mdc-ripple-surface--primary--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.2)}.mdc-ripple-surface--accent::before,.mdc-ripple-surface--accent::after{background-color:#018786;background-color:var(--mdc-ripple-color, var(--mdc-theme-secondary, #018786))}.mdc-ripple-surface--accent:hover::before,.mdc-ripple-surface--accent.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface--accent.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface--accent--activated::before{opacity:0.12;opacity:var(--mdc-ripple-activated-opacity, 0.12)}.mdc-ripple-surface--accent--activated::before,.mdc-ripple-surface--accent--activated::after{background-color:#018786;background-color:var(--mdc-ripple-color, var(--mdc-theme-secondary, #018786))}.mdc-ripple-surface--accent--activated:hover::before,.mdc-ripple-surface--accent--activated.mdc-ripple-surface--hover::before{opacity:0.16;opacity:var(--mdc-ripple-hover-opacity, 0.16)}.mdc-ripple-surface--accent--activated.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--accent--activated:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-focus-opacity, 0.24)}.mdc-ripple-surface--accent--activated:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--accent--activated:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-ripple-surface--accent--activated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24)}.mdc-ripple-surface--accent--selected::before{opacity:0.08;opacity:var(--mdc-ripple-selected-opacity, 0.08)}.mdc-ripple-surface--accent--selected::before,.mdc-ripple-surface--accent--selected::after{background-color:#018786;background-color:var(--mdc-ripple-color, var(--mdc-theme-secondary, #018786))}.mdc-ripple-surface--accent--selected:hover::before,.mdc-ripple-surface--accent--selected.mdc-ripple-surface--hover::before{opacity:0.12;opacity:var(--mdc-ripple-hover-opacity, 0.12)}.mdc-ripple-surface--accent--selected.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--accent--selected:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-focus-opacity, 0.2)}.mdc-ripple-surface--accent--selected:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--accent--selected:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-press-opacity, 0.2)}.mdc-ripple-surface--accent--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.2)}.mdc-ripple-surface--disabled{opacity:0}"]);
+
+ _templateObject$1 = function _templateObject() {
+ return data;
+ };
+
+ return data;
+ }
+ var style = css(_templateObject$1());
+
+ /** @soyCompatible */
+
+ var Ripple = /*#__PURE__*/function (_RippleBase) {
+ _inherits(Ripple, _RippleBase);
+
+ var _super = _createSuper(Ripple);
+
+ function Ripple() {
+ _classCallCheck(this, Ripple);
+
+ return _super.apply(this, arguments);
+ }
+
+ return Ripple;
+ }(RippleBase);
+
+ Ripple.styles = style;
+ Ripple = __decorate$1([customElement('mwc-ripple')], Ripple);
/**
@license
- Copyright 2018 Google Inc. All Rights Reserved.
+ Copyright 2020 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -48604,56 +50712,254 @@
See the License for the specific language governing permissions and
limitations under the License.
*/
- // load material icons font
- var fontEl = document.createElement('link');
- fontEl.rel = 'stylesheet';
- fontEl.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
- document.head.appendChild(fontEl);
+ /**
+ * Class that encapsulates the events handlers for `mwc-ripple`
+ *
+ *
+ * Example:
+ * ```
+ * class XFoo extends LitElement {
+ * async getRipple() {
+ * this.renderRipple = true;
+ * await this.updateComplete;
+ * return this.renderRoot.querySelector('mwc-ripple');
+ * }
+ * rippleHandlers = new RippleHandlers(() => this.getRipple());
+ *
+ * render() {
+ * return html`
+ *
+ * ${this.renderRipple ? html`` : ''}
+ * `;
+ * }
+ * }
+ * ```
+ */
+ var RippleHandlers = function RippleHandlers(
+ /** Function that returns a `mwc-ripple` */
+ rippleFn) {
+ _classCallCheck(this, RippleHandlers);
+
+ this.startPress = function (ev) {
+ rippleFn().then(function (r) {
+ r && r.startPress(ev);
+ });
+ };
- function _templateObject$1() {
- var data = _taggedTemplateLiteral([""]);
+ this.endPress = function () {
+ rippleFn().then(function (r) {
+ r && r.endPress();
+ });
+ };
- _templateObject$1 = function _templateObject() {
+ this.startFocus = function () {
+ rippleFn().then(function (r) {
+ r && r.startFocus();
+ });
+ };
+
+ this.endFocus = function () {
+ rippleFn().then(function (r) {
+ r && r.endFocus();
+ });
+ };
+
+ this.startHover = function () {
+ rippleFn().then(function (r) {
+ r && r.startHover();
+ });
+ };
+
+ this.endHover = function () {
+ rippleFn().then(function (r) {
+ r && r.endHover();
+ });
+ };
+ };
+
+ function _templateObject2() {
+ var data = _taggedTemplateLiteral(["\n ", "\n ", "\n \n \n \n "]);
+
+ _templateObject2 = function _templateObject2() {
return data;
};
return data;
}
- var __decorate = undefined && undefined.__decorate || function (decorators, target, key, desc) {
- var c = arguments.length,
- r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
- d;
- if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
- if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- }
- return c > 3 && r && Object.defineProperty(target, key, r), r;
- };
+ function _templateObject$2() {
+ var data = _taggedTemplateLiteral(["\n \n "]);
- var Icon = /*#__PURE__*/function (_LitElement) {
- _inherits(Icon, _LitElement);
+ _templateObject$2 = function _templateObject() {
+ return data;
+ };
- var _super = _createSuper(Icon);
+ return data;
+ }
+ /** @soyCompatible */
- function Icon() {
- _classCallCheck(this, Icon);
+ var IconButtonBase = /*#__PURE__*/function (_LitElement) {
+ _inherits(IconButtonBase, _LitElement);
- return _super.apply(this, arguments);
+ var _super = _createSuper(IconButtonBase);
+
+ function IconButtonBase() {
+ var _this;
+
+ _classCallCheck(this, IconButtonBase);
+
+ _this = _super.apply(this, arguments);
+ _this.disabled = false;
+ _this.icon = '';
+ _this.label = '';
+ _this.shouldRenderRipple = false;
+ _this.rippleHandlers = new RippleHandlers(function () {
+ _this.shouldRenderRipple = true;
+ return _this.ripple;
+ });
+ return _this;
}
+ /** @soyTemplate */
- _createClass(Icon, [{
+
+ _createClass(IconButtonBase, [{
+ key: "renderRipple",
+ value: function renderRipple() {
+ return this.shouldRenderRipple ? html$1(_templateObject$2(), this.disabled) : '';
+ }
+ }, {
+ key: "focus",
+ value: function focus() {
+ var buttonElement = this.buttonElement;
+
+ if (buttonElement) {
+ this.rippleHandlers.startFocus();
+ buttonElement.focus();
+ }
+ }
+ }, {
+ key: "blur",
+ value: function blur() {
+ var buttonElement = this.buttonElement;
+
+ if (buttonElement) {
+ this.rippleHandlers.endFocus();
+ buttonElement.blur();
+ }
+ }
+ /** @soyTemplate */
+
+ }, {
key: "render",
value: function render() {
- return html$1(_templateObject$1());
+ return html$1(_templateObject2(), this.label || this.icon, this.disabled, this.handleRippleFocus, this.handleRippleBlur, this.handleRippleMouseDown, this.handleRippleMouseEnter, this.handleRippleMouseLeave, this.handleRippleTouchStart, this.handleRippleDeactivate, this.handleRippleDeactivate, this.renderRipple(), this.icon);
+ }
+ }, {
+ key: "handleRippleMouseDown",
+ value: function handleRippleMouseDown(event) {
+ var _this2 = this;
+
+ var onUp = function onUp() {
+ window.removeEventListener('mouseup', onUp);
+
+ _this2.handleRippleDeactivate();
+ };
+
+ window.addEventListener('mouseup', onUp);
+ this.rippleHandlers.startPress(event);
+ }
+ }, {
+ key: "handleRippleTouchStart",
+ value: function handleRippleTouchStart(event) {
+ this.rippleHandlers.startPress(event);
+ }
+ }, {
+ key: "handleRippleDeactivate",
+ value: function handleRippleDeactivate() {
+ this.rippleHandlers.endPress();
+ }
+ }, {
+ key: "handleRippleMouseEnter",
+ value: function handleRippleMouseEnter() {
+ this.rippleHandlers.startHover();
+ }
+ }, {
+ key: "handleRippleMouseLeave",
+ value: function handleRippleMouseLeave() {
+ this.rippleHandlers.endHover();
+ }
+ }, {
+ key: "handleRippleFocus",
+ value: function handleRippleFocus() {
+ this.rippleHandlers.startFocus();
+ }
+ }, {
+ key: "handleRippleBlur",
+ value: function handleRippleBlur() {
+ this.rippleHandlers.endFocus();
}
}]);
- return Icon;
+ return IconButtonBase;
}(LitElement);
- Icon.styles = style;
- Icon = __decorate([customElement('mwc-icon')], Icon);
+ __decorate([property({
+ type: Boolean,
+ reflect: true
+ })], IconButtonBase.prototype, "disabled", void 0);
+
+ __decorate([property({
+ type: String
+ })], IconButtonBase.prototype, "icon", void 0);
+
+ __decorate([property({
+ type: String
+ })], IconButtonBase.prototype, "label", void 0);
+
+ __decorate([query('button')], IconButtonBase.prototype, "buttonElement", void 0);
+
+ __decorate([queryAsync('mwc-ripple')], IconButtonBase.prototype, "ripple", void 0);
+
+ __decorate([internalProperty()], IconButtonBase.prototype, "shouldRenderRipple", void 0);
+
+ __decorate([eventOptions({
+ passive: true
+ })], IconButtonBase.prototype, "handleRippleMouseDown", null);
+
+ __decorate([eventOptions({
+ passive: true
+ })], IconButtonBase.prototype, "handleRippleTouchStart", null);
+
+ function _templateObject$3() {
+ var data = _taggedTemplateLiteral([".material-icons{font-family:var(--mdc-icon-font, \"Material Icons\");font-weight:normal;font-style:normal;font-size:var(--mdc-icon-size, 24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}.mdc-icon-button{display:inline-block;position:relative;box-sizing:border-box;border:none;outline:none;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;user-select:none;width:48px;height:48px;padding:12px}.mdc-icon-button svg,.mdc-icon-button img{width:24px;height:24px}.mdc-icon-button:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38))}.mdc-icon-button:disabled{cursor:default;pointer-events:none}.mdc-icon-button__icon{display:inline-block}.mdc-icon-button__icon.mdc-icon-button__icon--on{display:none}.mdc-icon-button--on .mdc-icon-button__icon{display:none}.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on{display:inline-block}:host{display:inline-block;outline:none;--mdc-ripple-color: currentcolor;-webkit-tap-highlight-color:transparent}:host([disabled]){pointer-events:none}:host,.mdc-icon-button{vertical-align:top}.mdc-icon-button{width:var(--mdc-icon-button-size, 48px);height:var(--mdc-icon-button-size, 48px);padding:calc( (var(--mdc-icon-button-size, 48px) - var(--mdc-icon-size, 24px)) / 2 )}.mdc-icon-button>i{position:absolute;top:0;padding-top:inherit}.mdc-icon-button i,.mdc-icon-button svg,.mdc-icon-button img,.mdc-icon-button ::slotted(*){display:block;width:var(--mdc-icon-size, 24px);height:var(--mdc-icon-size, 24px)}"]);
+
+ _templateObject$3 = function _templateObject() {
+ return data;
+ };
+
+ return data;
+ }
+ var style$1 = css(_templateObject$3());
+
+ /** @soyCompatible */
+
+ var IconButton = /*#__PURE__*/function (_IconButtonBase) {
+ _inherits(IconButton, _IconButtonBase);
+
+ var _super = _createSuper(IconButton);
+
+ function IconButton() {
+ _classCallCheck(this, IconButton);
+
+ return _super.apply(this, arguments);
+ }
+
+ return IconButton;
+ }(IconButtonBase);
+
+ IconButton.styles = style$1;
+ IconButton = __decorate([customElement('mwc-icon-button')], IconButton);
function _templateObject96() {
var data = _taggedTemplateLiteral(["#422D53"]);
@@ -49595,20 +51901,20 @@
return data;
}
- function _templateObject2() {
+ function _templateObject2$1() {
var data = _taggedTemplateLiteral(["#666"]);
- _templateObject2 = function _templateObject2() {
+ _templateObject2$1 = function _templateObject2() {
return data;
};
return data;
}
- function _templateObject$2() {
+ function _templateObject$4() {
var data = _taggedTemplateLiteral(["#fff"]);
- _templateObject$2 = function _templateObject() {
+ _templateObject$4 = function _templateObject() {
return data;
};
@@ -49616,8 +51922,8 @@
}
var gscape = {
// primary colors
- primary: css(_templateObject$2()),
- on_primary: css(_templateObject2()),
+ primary: css(_templateObject$4()),
+ on_primary: css(_templateObject2$1()),
primary_dark: css(_templateObject3()),
on_primary_dark: css(_templateObject4()),
// secondary colors
@@ -49736,20 +52042,20 @@
dark: dark
});
- function _templateObject2$1() {
+ function _templateObject2$2() {
var data = _taggedTemplateLiteral([""]);
- _templateObject2$1 = function _templateObject2() {
+ _templateObject2$2 = function _templateObject2() {
return data;
};
return data;
}
- function _templateObject$3() {
- var data = _taggedTemplateLiteral(["\n :host, .gscape-panel{\n font-family : \"Open Sans\",\"Helvetica Neue\",Helvetica,sans-serif;\n display: block;\n position: absolute;\n color: var(--theme-gscape-on-primary, ", ");\n background-color:var(--theme-gscape-primary, ", ");\n box-shadow: 0 2px 4px 0 var(--theme-gscape-shadows, ", ");\n border-radius: 8px;\n transition: opacity 0.2s;\n scrollbar-width: thin;\n }\n\n :host(:hover){\n box-shadow: 0 4px 8px 0 var(--theme-gscape-shadows, ", ");\n }\n\n .hide {\n display:none;\n }\n\n .widget-body {\n width: 100%;\n max-height:450px;\n border-top:solid 1px var(--theme-gscape-shadows, ", ");\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n overflow:auto;\n scrollbar-width: inherit;\n }\n\n .gscape-panel {\n position: absolute;\n bottom: 40px;\n width: auto;\n padding:10px;\n overflow: unset;\n border: none;\n }\n\n .gscape-panel::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 16px;\n margin-left: -8px;\n border-width: 8px;\n border-style: solid;\n border-color: #ddd transparent transparent transparent;\n }\n\n .gscape-panel-title{\n font-weight: bold;\n text-align: center;\n margin-bottom: 10px;\n }\n\n .widget-body .section:last-of-type {\n margin-bottom: 12px;\n }\n\n .widget-body .section-header {\n text-align: center;\n font-weight: bold;\n border-bottom: solid 1px var(--theme-gscape-shadows, ", ");\n color: var(--theme-gscape-secondary, ", ");\n width: 85%;\n margin: auto;\n margin-bottom: 10px;\n padding-bottom: 5px;\n }\n\n .description {\n margin-bottom: 20px;\n }\n\n .description:last-of-type {\n margin-bottom: 0;\n }\n\n .description .language {\n min-width: 50px;\n display: inline-block;\n font-weight: bold;\n color: var(--theme-gscape-secondary, ", ");\n margin: 5px;\n }\n\n .section { padding: 10px; }\n\n .details_table{\n border-spacing: 0;\n }\n\n .details_table th {\n color: var(--theme-gscape-secondary, ", ");\n border-right: solid 1px var(--theme-gscape-shadows, ", ");\n font-weight: bold;\n text-align:left;\n min-width: 50px;\n }\n\n .details_table th, td {\n padding:5px 8px;\n white-space: nowrap;\n }\n\n .highlight:hover {\n color: var(--theme-gscape-on-secondary, ", ");\n background-color:var(--theme-gscape-secondary, ", ");\n }\n\n /* width */\n ::-webkit-scrollbar {\n width: 5px;\n height: 5px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: #f0f0f0;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #cdcdcd;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: #888;\n }\n\n .clickable {\n font-weight:bold;\n text-decoration: underline;\n }\n\n .clickable:hover {\n cursor:pointer;\n color: var(--theme-gscape-secondary-dark, ", ");\n }\n\n "]);
+ function _templateObject$5() {
+ var data = _taggedTemplateLiteral(["\n :host, .gscape-panel{\n font-family : \"Open Sans\",\"Helvetica Neue\",Helvetica,sans-serif;\n display: block;\n position: absolute;\n color: var(--theme-gscape-on-primary, ", ");\n background-color:var(--theme-gscape-primary, ", ");\n box-shadow: 0 2px 4px 0 var(--theme-gscape-shadows, ", ");\n border-radius: 8px;\n transition: opacity 0.2s;\n scrollbar-width: thin;\n --mdc-icon-button-size: 24px;\n }\n\n :host(:hover){\n box-shadow: 0 4px 8px 0 var(--theme-gscape-shadows, ", ");\n }\n\n .hide {\n display:none;\n }\n\n .widget-body {\n width: 100%;\n max-height:450px;\n border-top:solid 1px var(--theme-gscape-shadows, ", ");\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n overflow:auto;\n scrollbar-width: inherit;\n }\n\n .gscape-panel {\n position: absolute;\n bottom: 40px;\n width: auto;\n padding:10px;\n overflow: unset;\n border: none;\n }\n\n .gscape-panel::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 16px;\n margin-left: -8px;\n border-width: 8px;\n border-style: solid;\n border-color: #ddd transparent transparent transparent;\n }\n\n .gscape-panel-title{\n font-weight: bold;\n text-align: center;\n margin-bottom: 10px;\n }\n\n .widget-body .section:last-of-type {\n margin-bottom: 12px;\n }\n\n .widget-body .section-header {\n text-align: center;\n font-weight: bold;\n border-bottom: solid 1px var(--theme-gscape-shadows, ", ");\n color: var(--theme-gscape-secondary, ", ");\n width: 85%;\n margin: auto;\n margin-bottom: 10px;\n padding-bottom: 5px;\n }\n\n .description {\n margin-bottom: 20px;\n }\n\n .description:last-of-type {\n margin-bottom: 0;\n }\n\n .description .language {\n min-width: 50px;\n display: inline-block;\n font-weight: bold;\n color: var(--theme-gscape-secondary, ", ");\n margin: 5px;\n }\n\n .section { padding: 10px; }\n\n .details_table{\n border-spacing: 0;\n }\n\n .details_table th {\n color: var(--theme-gscape-secondary, ", ");\n border-right: solid 1px var(--theme-gscape-shadows, ", ");\n font-weight: bold;\n text-align:left;\n min-width: 50px;\n }\n\n .details_table th, td {\n padding:5px 8px;\n white-space: nowrap;\n }\n\n .highlight:hover {\n color: var(--theme-gscape-on-secondary, ", ");\n background-color:var(--theme-gscape-secondary, ", ");\n }\n\n /* width */\n ::-webkit-scrollbar {\n width: 5px;\n height: 5px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: #f0f0f0;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #cdcdcd;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: #888;\n }\n\n .clickable {\n font-weight:bold;\n text-decoration: underline;\n }\n\n .clickable:hover {\n cursor:pointer;\n color: var(--theme-gscape-secondary-dark, ", ");\n }\n\n "]);
- _templateObject$3 = function _templateObject() {
+ _templateObject$5 = function _templateObject() {
return data;
};
@@ -49777,7 +52083,7 @@
key: "styles",
get: function get() {
var colors = gscape;
- return [[css(_templateObject$3(), colors.on_primary, colors.primary, colors.shadows, colors.shadows, colors.shadows, colors.shadows, colors.secondary, colors.secondary, colors.secondary, colors.shadows, colors.on_secondary, colors.secondary, colors.secondary_dark)], colors];
+ return [[css(_templateObject$5(), colors.on_primary, colors.primary, colors.shadows, colors.shadows, colors.shadows, colors.shadows, colors.secondary, colors.secondary, colors.secondary, colors.shadows, colors.on_secondary, colors.secondary, colors.secondary_dark)], colors];
}
}]);
@@ -49803,7 +52109,7 @@
_createClass(GscapeWidget, [{
key: "render",
value: function render() {
- return html$1(_templateObject2$1());
+ return html$1(_templateObject2$2());
}
}, {
key: "toggleBody",
@@ -49911,10 +52217,15 @@
value: function blur() {
this.collapseBody();
}
+ }, {
+ key: "isCustomIcon",
+ value: function isCustomIcon(icon) {
+ return typeof icon !== 'string';
+ }
}, {
key: "isVisible",
get: function get() {
- return this.style.display !== 'none' ? true : false;
+ return this.style.display !== 'none';
}
}, {
key: "hiddenDefault",
@@ -49936,20 +52247,50 @@
return GscapeWidget;
}(LitElement); //customElements.define('gscape-widget', GscapeWidget)
- function _templateObject2$2() {
- var data = _taggedTemplateLiteral(["\n :host {\n display:flex;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--header-padding, 8px);\n }\n\n .head-btn {\n color:var(--theme-gscape-on-primary, ", ");\n right:0;\n padding: var(--btn-padding, 0 0 0 5px);\n cursor:pointer;\n }\n\n .head-btn:hover{\n color:var(--theme-gscape-secondary, ", ");\n }\n\n .head-title {\n padding: var(--title-padding, 0 5px 0 0);\n box-sizing: border-box;\n font-weight:bold;\n cursor:grab;\n width: var(--title-width, '');\n text-align: var(--title-text-align, '')\n }\n "]);
+ function _templateObject5$1() {
+ var data = _taggedTemplateLiteral(["\n :host {\n display:flex;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--header-padding, 8px);\n }\n\n .head-btn {\n color:var(--theme-gscape-on-primary, ", ");\n right:0;\n cursor:pointer;\n }\n\n .head-btn:hover{\n color:var(--theme-gscape-secondary, ", ");\n }\n\n .head-title {\n padding: var(--title-padding, 0 10px);\n box-sizing: border-box;\n font-weight:bold;\n cursor:grab;\n width: var(--title-width, '');\n text-align: var(--title-text-align, 'left');\n justify-self: flex-start;\n }\n\n "]);
- _templateObject2$2 = function _templateObject2() {
+ _templateObject5$1 = function _templateObject5() {
return data;
};
return data;
}
- function _templateObject$4() {
- var data = _taggedTemplateLiteral(["\n
", "
\n \n \n ", "\n \n "]);
+ function _templateObject4$1() {
+ var data = _taggedTemplateLiteral(["\n \n "]);
- _templateObject$4 = function _templateObject() {
+ _templateObject4$1 = function _templateObject4() {
+ return data;
+ };
+
+ return data;
+ }
+
+ function _templateObject3$1() {
+ var data = _taggedTemplateLiteral(["", ""]);
+
+ _templateObject3$1 = function _templateObject3() {
+ return data;
+ };
+
+ return data;
+ }
+
+ function _templateObject2$3() {
+ var data = _taggedTemplateLiteral(["\n \n ", "\n \n "]);
+
+ _templateObject2$3 = function _templateObject2() {
+ return data;
+ };
+
+ return data;
+ }
+
+ function _templateObject$6() {
+ var data = _taggedTemplateLiteral(["\n ", "\n\n
\n ", "\n "]);
- _templateObject$e = function _templateObject() {
+ _templateObject2$d = function _templateObject2() {
+ return data;
+ };
+
+ return data;
+ }
+
+ function _templateObject$j() {
+ var data = _taggedTemplateLiteral(["\n :host {\n left:50%;\n bottom:10px;\n transform: translate(-50%, 0);\n max-width:60%;\n }\n\n gscape-head {\n --title-text-align: center;\n --title-width: 100%;\n }\n\n .widget-body {\n margin:0;\n border-top: none;\n border-bottom: 1px solid var(--theme-gscape-shadows, ", ");\n border-bottom-left-radius:0;\n border-bottom-right-radius:0;\n }\n\n .owl-text {\n padding: 15px 10px;\n font-family: \"Lucida Console\", Monaco, monospace;\n overflow: auto;\n white-space: nowrap;\n line-height: 1.5;\n }\n\n .owl_concept{\n color: #b58900;\n }\n\n .owl_role{\n color: #268bd2;\n }\n\n .owl_attribute{\n color: #859900;\n }\n\n .owl_value-domain{\n color: #2aa198;\n }\n\n .owl_individual{\n color: #6c71c4;\n }\n\n .owl_value {\n color: #d33682;\n }\n\n .axiom_predicate_prefix{\n color:#cb4b16;\n }\n\n .owl_error {\n color: var(--theme-gscape-error, ", ");\n }\n\n .axiom_predefinite_obj {\n color: #00c0a0;\n }\n\n "]);
+
+ _templateObject$j = function _templateObject() {
return data;
};
@@ -51242,7 +53702,7 @@
var super_styles = _get(_getPrototypeOf(GscapeOwlTranslator), "styles", this);
var colors = super_styles[1];
- return [_get(_getPrototypeOf(GscapeOwlTranslator), "styles", this)[0], css(_templateObject$e(), colors.shadows, colors.error)];
+ return [_get(_getPrototypeOf(GscapeOwlTranslator), "styles", this)[0], css(_templateObject$j(), colors.shadows, colors.error)];
}
}]);
@@ -51255,13 +53715,16 @@
_this.collapsible = true;
_this.hiddenDefault = true;
_this.owl_text = '';
+ _this.header = new GscapeHeader();
+ _this.header.title = 'Owl Translation';
+ _this.header.left_icon = owl_icon;
return _this;
}
_createClass(GscapeOwlTranslator, [{
key: "render",
value: function render() {
- return html$1(_templateObject2$c());
+ return html$1(_templateObject2$d(), this.header);
}
}, {
key: "updated",
@@ -51280,20 +53743,20 @@
}(GscapeWidget);
customElements.define('gscape-owl-translator', GscapeOwlTranslator);
- function _templateObject2$d() {
+ function _templateObject2$e() {
var data = _taggedTemplateLiteral(["\n ", "\n \n ", "\n "]);
- _templateObject2$d = function _templateObject2() {
+ _templateObject2$e = function _templateObject2() {
return data;
};
return data;
}
- function _templateObject$f() {
+ function _templateObject$k() {
var data = _taggedTemplateLiteral(["\n :host {\n position: absolute;\n bottom:52px;\n right:10px;\n }\n\n gscape-button{\n position: static;\n box-shadow: initial;\n }\n\n #hr {\n height:1px;\n width:90%;\n margin: 2px auto 0 auto;\n background-color: var(--theme-gscape-shadows, ", ")\n }\n\n "]);
- _templateObject$f = function _templateObject() {
+ _templateObject$k = function _templateObject() {
return data;
};
@@ -51311,7 +53774,7 @@
var super_styles = _get(_getPrototypeOf(GscapeZoomTools), "styles", this);
var colors = super_styles[1];
- return [super_styles[0], css(_templateObject$f(), colors.shadows)];
+ return [super_styles[0], css(_templateObject$k(), colors.shadows)];
}
}]);
@@ -51331,7 +53794,7 @@
_createClass(GscapeZoomTools, [{
key: "render",
value: function render() {
- return html$1(_templateObject2$d(), this.btn_plus, this.btn_minus);
+ return html$1(_templateObject2$e(), this.btn_plus, this.btn_minus);
}
}, {
key: "onZoomIn",
@@ -51686,6 +54149,21 @@
_this.cy.container().style.cursor = 'inherit';
});
}
+ /**
+ * WHY NOT USING cy.mount(container)??
+ * because it causes a problem with float renderer.
+ * In particular at the second time this.mount() will be
+ * called, the layout will stop working, something happens internally
+ * breaking the layout.
+ *
+ * WHY SWITCHING FROM display:none TO position:absolute??
+ * display:none will cause the container having clientHeight(Width) = 0
+ * and cytoscpae uses those values to perform the fit().
+ * This will cause problems when switching renderers cause in some
+ * cases fit() will be automatically called on the container having
+ * zero asdimensions
+ */
+
_createClass(GrapholscapeRenderer, [{
key: "mount",
@@ -51938,6 +54416,8 @@
_createClass(FloatingGscapeRenderer, [{
key: "drawDiagram",
value: function drawDiagram(diagram) {
+ var _this2 = this;
+
this.clearPoppers();
_get(_getPrototypeOf(FloatingGscapeRenderer.prototype), "drawDiagram", this).call(this, diagram);
@@ -51946,11 +54426,20 @@
this.main_layout = this.layout(); // apply layout on those not locked
this.main_layout.run();
+ /**
+ * hack: let layout run a bit and fit to it.
+ * Prevent some diagrams to disappear from screen due to
+ * automatic layout.
+ */
+
+ setTimeout(function () {
+ return _this2.cy.fit();
+ }, 100);
}
}, {
key: "centerOnNode",
value: function centerOnNode(node_id, zoom) {
- var _this2 = this;
+ var _this3 = this;
var node = this.cy.$id(node_id);
@@ -51960,13 +54449,13 @@
if (node.data('type') == 'role') {
var elems = node.connectedNodes();
setTimeout(function () {
- return _this2.cy.fit(elems);
+ return _this3.cy.fit(elems);
}, 300);
node.select();
elems.select();
} else {
setTimeout(function () {
- return _this2.centerOnPosition(node.position('x'), node.position('y'), zoom);
+ return _this3.centerOnPosition(node.position('x'), node.position('y'), zoom);
}, 300);
node.select();
}
@@ -51981,42 +54470,45 @@
}, {
key: "unlockNode",
value: function unlockNode(node) {
- node.unlockButton.destroy();
+ this.removeUnlockButton(node);
node.unlock();
}
}, {
key: "lockNode",
value: function lockNode(node) {
- var _this3 = this;
+ var _this4 = this;
node.lock();
var unlockButton = node.popper({
content: function content() {
- var dimension = node.data('width') / 9 * _this3.cy.zoom();
+ var dimension = node.data('width') / 9 * _this4.cy.zoom();
var div = document.createElement('div');
div.style.background = node.style('border-color');
div.style.borderRadius = '100%';
div.style.padding = '5px';
- div.style.color = _this3.theme.on_secondary;
+ div.style.color = _this4.theme.on_secondary;
div.style.cursor = 'pointer';
div.setAttribute('title', 'Unlock Node');
div.innerHTML = "lock_open";
setStyle(dimension, div);
div.onclick = function () {
- return _this3.unlockNode(node);
+ return _this4.unlockNode(node);
};
- document.body.appendChild(div);
- return div;
- } //popper: {} // my popper options here
+ _this4.cy.container().appendChild(div);
+ return div;
+ },
+ popper: {
+ removeOnDestroy: true
+ }
});
node.unlockButton = unlockButton;
var update = function update() {
- var dimension = node.data('width') / 9 * _this3.cy.zoom();
+ var dimension = node.data('width') / 9 * _this4.cy.zoom();
setStyle(dimension, unlockButton.popper);
unlockButton.scheduleUpdate();
@@ -52048,16 +54540,26 @@
}, {
key: "clearPoppers",
value: function clearPoppers() {
+ var _this5 = this;
+
this.cy.nodes().each(function (node) {
- if (node.unlockButton) node.unlockButton.destroy();
+ return _this5.removeUnlockButton(node);
});
}
}, {
key: "unmount",
value: function unmount() {
- _get(_getPrototypeOf(FloatingGscapeRenderer.prototype), "unmount", this).call(this);
-
this.clearPoppers();
+
+ _get(_getPrototypeOf(FloatingGscapeRenderer.prototype), "unmount", this).call(this);
+ }
+ }, {
+ key: "removeUnlockButton",
+ value: function removeUnlockButton(node) {
+ if (node.unlockButton) {
+ node.unlockButton.destroy();
+ node.unlockButton = null;
+ }
}
}, {
key: "layout_settings",
@@ -52093,11 +54595,11 @@
}, {
key: "dragAndPin",
set: function set(active) {
- var _this4 = this;
+ var _this6 = this;
this._dragAndPin = active;
if (!active) this.cy.$(':locked').each(function (node) {
- return _this4.unlockNode(node);
+ return _this6.unlockNode(node);
});
},
get: function get() {
@@ -52108,51 +54610,61 @@
return FloatingGscapeRenderer;
}(GrapholscapeRenderer);
- function _templateObject$g() {
- var data = _taggedTemplateLiteral([""]);
+ function _templateObject$l() {
+ var data = _taggedTemplateLiteral([""]);
- _templateObject$g = function _templateObject() {
+ _templateObject$l = function _templateObject() {
return data;
};
return data;
}
- var graphol = html$1(_templateObject$g());
+ var graphol_logo = html$1(_templateObject$l());
- function _templateObject4$5() {
- var data = _taggedTemplateLiteral(["", ""]);
+ function _templateObject5$6() {
+ var data = _taggedTemplateLiteral(["\n \n "]);
- _templateObject4$5 = function _templateObject4() {
+ _templateObject5$6 = function _templateObject5() {
return data;
};
return data;
}
- function _templateObject3$9() {
- var data = _taggedTemplateLiteral(["\n \n ", "\n ", "\n
\n "]);
+ function _templateObject4$6() {
+ var data = _taggedTemplateLiteral(["\n ", ""]);
- _templateObject3$9 = function _templateObject3() {
+ _templateObject4$6 = function _templateObject4() {
return data;
};
return data;
}
- function _templateObject2$e() {
- var data = _taggedTemplateLiteral(["\n