carbon-custom-elements
Version:
A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.
437 lines (369 loc) • 24 kB
JavaScript
function _decorate(decorators, factory, superClass, mixins) { var api = _getDecoratorsApi(); if (mixins) { for (var i = 0; i < mixins.length; i++) { api = mixins[i](api); } } var r = factory(function initialize(O) { api.initializeInstanceElements(O, decorated.elements); }, superClass); var decorated = api.decorateClass(_coalesceClassElements(r.d.map(_createElementDescriptor)), decorators); api.initializeClassElements(r.F, decorated.elements); return api.runClassFinishers(r.F, decorated.finishers); }
function _getDecoratorsApi() { _getDecoratorsApi = function () { return api; }; var api = { elementsDefinitionOrder: [["method"], ["field"]], initializeInstanceElements: function (O, elements) { ["method", "field"].forEach(function (kind) { elements.forEach(function (element) { if (element.kind === kind && element.placement === "own") { this.defineClassElement(O, element); } }, this); }, this); }, initializeClassElements: function (F, elements) { var proto = F.prototype; ["method", "field"].forEach(function (kind) { elements.forEach(function (element) { var placement = element.placement; if (element.kind === kind && (placement === "static" || placement === "prototype")) { var receiver = placement === "static" ? F : proto; this.defineClassElement(receiver, element); } }, this); }, this); }, defineClassElement: function (receiver, element) { var descriptor = element.descriptor; if (element.kind === "field") { var initializer = element.initializer; descriptor = { enumerable: descriptor.enumerable, writable: descriptor.writable, configurable: descriptor.configurable, value: initializer === void 0 ? void 0 : initializer.call(receiver) }; } Object.defineProperty(receiver, element.key, descriptor); }, decorateClass: function (elements, decorators) { var newElements = []; var finishers = []; var placements = { static: [], prototype: [], own: [] }; elements.forEach(function (element) { this.addElementPlacement(element, placements); }, this); elements.forEach(function (element) { if (!_hasDecorators(element)) return newElements.push(element); var elementFinishersExtras = this.decorateElement(element, placements); newElements.push(elementFinishersExtras.element); newElements.push.apply(newElements, elementFinishersExtras.extras); finishers.push.apply(finishers, elementFinishersExtras.finishers); }, this); if (!decorators) { return { elements: newElements, finishers: finishers }; } var result = this.decorateConstructor(newElements, decorators); finishers.push.apply(finishers, result.finishers); result.finishers = finishers; return result; }, addElementPlacement: function (element, placements, silent) { var keys = placements[element.placement]; if (!silent && keys.indexOf(element.key) !== -1) { throw new TypeError("Duplicated element (" + element.key + ")"); } keys.push(element.key); }, decorateElement: function (element, placements) { var extras = []; var finishers = []; for (var decorators = element.decorators, i = decorators.length - 1; i >= 0; i--) { var keys = placements[element.placement]; keys.splice(keys.indexOf(element.key), 1); var elementObject = this.fromElementDescriptor(element); var elementFinisherExtras = this.toElementFinisherExtras((0, decorators[i])(elementObject) || elementObject); element = elementFinisherExtras.element; this.addElementPlacement(element, placements); if (elementFinisherExtras.finisher) { finishers.push(elementFinisherExtras.finisher); } var newExtras = elementFinisherExtras.extras; if (newExtras) { for (var j = 0; j < newExtras.length; j++) { this.addElementPlacement(newExtras[j], placements); } extras.push.apply(extras, newExtras); } } return { element: element, finishers: finishers, extras: extras }; }, decorateConstructor: function (elements, decorators) { var finishers = []; for (var i = decorators.length - 1; i >= 0; i--) { var obj = this.fromClassDescriptor(elements); var elementsAndFinisher = this.toClassDescriptor((0, decorators[i])(obj) || obj); if (elementsAndFinisher.finisher !== undefined) { finishers.push(elementsAndFinisher.finisher); } if (elementsAndFinisher.elements !== undefined) { elements = elementsAndFinisher.elements; for (var j = 0; j < elements.length - 1; j++) { for (var k = j + 1; k < elements.length; k++) { if (elements[j].key === elements[k].key && elements[j].placement === elements[k].placement) { throw new TypeError("Duplicated element (" + elements[j].key + ")"); } } } } } return { elements: elements, finishers: finishers }; }, fromElementDescriptor: function (element) { var obj = { kind: element.kind, key: element.key, placement: element.placement, descriptor: element.descriptor }; var desc = { value: "Descriptor", configurable: true }; Object.defineProperty(obj, Symbol.toStringTag, desc); if (element.kind === "field") obj.initializer = element.initializer; return obj; }, toElementDescriptors: function (elementObjects) { if (elementObjects === undefined) return; return _toArray(elementObjects).map(function (elementObject) { var element = this.toElementDescriptor(elementObject); this.disallowProperty(elementObject, "finisher", "An element descriptor"); this.disallowProperty(elementObject, "extras", "An element descriptor"); return element; }, this); }, toElementDescriptor: function (elementObject) { var kind = String(elementObject.kind); if (kind !== "method" && kind !== "field") { throw new TypeError('An element descriptor\'s .kind property must be either "method" or' + ' "field", but a decorator created an element descriptor with' + ' .kind "' + kind + '"'); } var key = _toPropertyKey(elementObject.key); var placement = String(elementObject.placement); if (placement !== "static" && placement !== "prototype" && placement !== "own") { throw new TypeError('An element descriptor\'s .placement property must be one of "static",' + ' "prototype" or "own", but a decorator created an element descriptor' + ' with .placement "' + placement + '"'); } var descriptor = elementObject.descriptor; this.disallowProperty(elementObject, "elements", "An element descriptor"); var element = { kind: kind, key: key, placement: placement, descriptor: Object.assign({}, descriptor) }; if (kind !== "field") { this.disallowProperty(elementObject, "initializer", "A method descriptor"); } else { this.disallowProperty(descriptor, "get", "The property descriptor of a field descriptor"); this.disallowProperty(descriptor, "set", "The property descriptor of a field descriptor"); this.disallowProperty(descriptor, "value", "The property descriptor of a field descriptor"); element.initializer = elementObject.initializer; } return element; }, toElementFinisherExtras: function (elementObject) { var element = this.toElementDescriptor(elementObject); var finisher = _optionalCallableProperty(elementObject, "finisher"); var extras = this.toElementDescriptors(elementObject.extras); return { element: element, finisher: finisher, extras: extras }; }, fromClassDescriptor: function (elements) { var obj = { kind: "class", elements: elements.map(this.fromElementDescriptor, this) }; var desc = { value: "Descriptor", configurable: true }; Object.defineProperty(obj, Symbol.toStringTag, desc); return obj; }, toClassDescriptor: function (obj) { var kind = String(obj.kind); if (kind !== "class") { throw new TypeError('A class descriptor\'s .kind property must be "class", but a decorator' + ' created a class descriptor with .kind "' + kind + '"'); } this.disallowProperty(obj, "key", "A class descriptor"); this.disallowProperty(obj, "placement", "A class descriptor"); this.disallowProperty(obj, "descriptor", "A class descriptor"); this.disallowProperty(obj, "initializer", "A class descriptor"); this.disallowProperty(obj, "extras", "A class descriptor"); var finisher = _optionalCallableProperty(obj, "finisher"); var elements = this.toElementDescriptors(obj.elements); return { elements: elements, finisher: finisher }; }, runClassFinishers: function (constructor, finishers) { for (var i = 0; i < finishers.length; i++) { var newConstructor = (0, finishers[i])(constructor); if (newConstructor !== undefined) { if (typeof newConstructor !== "function") { throw new TypeError("Finishers must return a constructor."); } constructor = newConstructor; } } return constructor; }, disallowProperty: function (obj, name, objectType) { if (obj[name] !== undefined) { throw new TypeError(objectType + " can't have a ." + name + " property."); } } }; return api; }
function _createElementDescriptor(def) { var key = _toPropertyKey(def.key); var descriptor; if (def.kind === "method") { descriptor = { value: def.value, writable: true, configurable: true, enumerable: false }; } else if (def.kind === "get") { descriptor = { get: def.value, configurable: true, enumerable: false }; } else if (def.kind === "set") { descriptor = { set: def.value, configurable: true, enumerable: false }; } else if (def.kind === "field") { descriptor = { configurable: true, writable: true, enumerable: true }; } var element = { kind: def.kind === "field" ? "field" : "method", key: key, placement: def.static ? "static" : def.kind === "field" ? "own" : "prototype", descriptor: descriptor }; if (def.decorators) element.decorators = def.decorators; if (def.kind === "field") element.initializer = def.value; return element; }
function _coalesceGetterSetter(element, other) { if (element.descriptor.get !== undefined) { other.descriptor.get = element.descriptor.get; } else { other.descriptor.set = element.descriptor.set; } }
function _coalesceClassElements(elements) { var newElements = []; var isSameElement = function isSameElement(other) { return other.kind === "method" && other.key === element.key && other.placement === element.placement; }; for (var i = 0; i < elements.length; i++) { var element = elements[i]; var other; if (element.kind === "method" && (other = newElements.find(isSameElement))) { if (_isDataDescriptor(element.descriptor) || _isDataDescriptor(other.descriptor)) { if (_hasDecorators(element) || _hasDecorators(other)) { throw new ReferenceError("Duplicated methods (" + element.key + ") can't be decorated."); } other.descriptor = element.descriptor; } else { if (_hasDecorators(element)) { if (_hasDecorators(other)) { throw new ReferenceError("Decorators can't be placed on different accessors with for " + "the same property (" + element.key + ")."); } other.decorators = element.decorators; } _coalesceGetterSetter(element, other); } } else { newElements.push(element); } } return newElements; }
function _hasDecorators(element) { return element.decorators && element.decorators.length; }
function _isDataDescriptor(desc) { return desc !== undefined && !(desc.value === undefined && desc.writable === undefined); }
function _optionalCallableProperty(obj, name) { var value = obj[name]; if (value !== undefined && typeof value !== "function") { throw new TypeError("Expected '" + name + "' to be a function"); } return value; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
/**
* @license
*
* Copyright IBM Corp. 2019, 2020
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { LitElement } from 'lit-element';
import HostListener from '../../globals/decorators/host-listener';
import FocusMixin from '../../globals/mixins/focus';
import HostListenerMixin from '../../globals/mixins/host-listener';
/**
* The LTR/RTL direction used for positioning floating menu.
*/
export let FLOATING_MENU_POSITION_DIRECTION;
/**
* Position of floating menu, or trigger button of floating menu.
*/
(function (FLOATING_MENU_POSITION_DIRECTION) {
FLOATING_MENU_POSITION_DIRECTION["LTR"] = "ltr";
FLOATING_MENU_POSITION_DIRECTION["RTL"] = "rtl";
})(FLOATING_MENU_POSITION_DIRECTION || (FLOATING_MENU_POSITION_DIRECTION = {}));
/**
* The alignment choices of floating menu.
*/
export let FLOATING_MENU_ALIGNMENT;
/**
* The direction/positioning/orientation choices of floating menu.
*/
(function (FLOATING_MENU_ALIGNMENT) {
FLOATING_MENU_ALIGNMENT["START"] = "start";
FLOATING_MENU_ALIGNMENT["CENTER"] = "center";
FLOATING_MENU_ALIGNMENT["END"] = "end";
})(FLOATING_MENU_ALIGNMENT || (FLOATING_MENU_ALIGNMENT = {}));
export let FLOATING_MENU_DIRECTION;
/**
* The group of the direction/positioning/orientation choices of floating menu.
*/
(function (FLOATING_MENU_DIRECTION) {
FLOATING_MENU_DIRECTION["LEFT"] = "left";
FLOATING_MENU_DIRECTION["TOP"] = "top";
FLOATING_MENU_DIRECTION["RIGHT"] = "right";
FLOATING_MENU_DIRECTION["BOTTOM"] = "bottom";
})(FLOATING_MENU_DIRECTION || (FLOATING_MENU_DIRECTION = {}));
export let FLOATING_MENU_DIRECTION_GROUP;
/**
* Observes resize of the given element with the given resize observer.
* @param observer The resize observer.
* @param elem The element to observe the resize.
*/
(function (FLOATING_MENU_DIRECTION_GROUP) {
FLOATING_MENU_DIRECTION_GROUP["HORIZONTAL"] = "horizontal";
FLOATING_MENU_DIRECTION_GROUP["VERTICAL"] = "vertical";
})(FLOATING_MENU_DIRECTION_GROUP || (FLOATING_MENU_DIRECTION_GROUP = {}));
const observeResize = (observer, elem) => {
observer.observe(elem);
return {
release() {
observer.unobserve(elem);
return null;
}
};
};
/**
* Floating menu.
*/
let BXFloatingMenu = _decorate(null, function (_initialize, _HostListenerMixin) {
class BXFloatingMenu extends _HostListenerMixin {
constructor(...args) {
super(...args);
_initialize(this);
}
}
return {
F: BXFloatingMenu,
d: [{
kind: "field",
key: "_hObserveResizeParent",
value() {
return null;
}
}, {
kind: "field",
key: "_hObserveResizeContainer",
value() {
return null;
}
}, {
kind: "field",
key: "_resizeObserver",
value() {
return new ResizeObserver(() => {
const {
container,
open,
parent,
position
} = this;
if (container && open && parent) {
const {
direction,
start,
top
} = position;
this.style[direction !== FLOATING_MENU_POSITION_DIRECTION.RTL ? 'left' : 'right'] = `${start}px`;
this.style.top = `${top}px`;
}
});
}
}, {
kind: "field",
decorators: [HostListener('focusout')],
key: "_handleBlur",
value() {
return ({
relatedTarget
}) => {
if (!this.contains(relatedTarget)) {
const {
parent
} = this;
if (parent) {
parent.open = false;
HTMLElement.prototype.focus.call(this.parent); // SVGElement in IE11 does not have `.focus()` method
}
}
};
}
}, {
kind: "field",
key: "parent",
value() {
return null;
}
}, {
kind: "get",
key: "alignmentDirection",
value:
/**
* The handle for observing resize of the element containing the trigger button.
*/
/**
* The handle for observing resize of the floating menu container.
*/
/**
* The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.
*/
// TODO: Wait for `.d.ts` update to support `ResizeObserver`
// @ts-ignore
/**
* The DOM element, typically a custom element in this library, launching this floating menu.
*/
/**
* The horizontal/vertical direction with regard to how the menu is aligned to the trigger button.
*/
function alignmentDirection() {
return {
[FLOATING_MENU_DIRECTION.LEFT]: FLOATING_MENU_DIRECTION_GROUP.VERTICAL,
[FLOATING_MENU_DIRECTION.TOP]: FLOATING_MENU_DIRECTION_GROUP.HORIZONTAL,
[FLOATING_MENU_DIRECTION.RIGHT]: FLOATING_MENU_DIRECTION_GROUP.VERTICAL,
[FLOATING_MENU_DIRECTION.BOTTOM]: FLOATING_MENU_DIRECTION_GROUP.HORIZONTAL
}[this.direction];
}
/**
* The DOM element to put this menu into.
*/
}, {
kind: "get",
key: "container",
value: function container() {
return this.closest(this.constructor.selectorContainer) || this.ownerDocument.body;
}
/**
* The position of this floating menu.
*/
}, {
kind: "get",
key: "position",
value: function position() {
const {
triggerPosition
} = this.parent;
if (!triggerPosition) {
throw new TypeError('Missing information of trigger button position.');
}
const {
container
} = this;
const {
left: refLeft = 0,
top: refTop = 0,
right: refRight = 0,
bottom: refBottom = 0
} = triggerPosition;
const {
width,
height
} = this.getBoundingClientRect();
const {
left: containerLeft = 0,
right: containerRight = 0,
top: containerTop = 0
} = container.getBoundingClientRect();
const refCenterHorizontal = (refLeft + refRight) / 2;
const refCenterVertical = (refTop + refBottom) / 2;
const containerComputedStyle = container.ownerDocument.defaultView.getComputedStyle(container);
const positionDirection = containerComputedStyle.getPropertyValue('direction');
const isRtl = positionDirection === FLOATING_MENU_POSITION_DIRECTION.RTL;
const containerStartFromViewport = !isRtl ? containerLeft : container.ownerDocument.defaultView.innerWidth - containerRight;
const refStartFromContainer = !isRtl ? refLeft - containerLeft : containerRight - refRight;
const refEndFromContainer = !isRtl ? refRight - containerLeft : containerRight - refLeft;
const refCenterHorizontalFromContainer = !isRtl ? refCenterHorizontal - containerLeft : containerRight - refCenterHorizontal;
const refTopFromContainer = refTop - containerTop;
const refCenterVerticalFromContainer = refCenterVertical - containerTop;
if ((container !== this.ownerDocument.body || containerStartFromViewport !== 0 || containerTop !== 0) && containerComputedStyle.getPropertyValue('position') === 'static') {
throw new Error('Floating menu container must not have `position:static`.');
}
const {
alignment,
alignmentDirection,
direction
} = this;
if (Object.values(FLOATING_MENU_ALIGNMENT).indexOf(alignment) < 0) {
throw new Error(`Wrong menu alignment: ${alignment}`);
}
if (Object.values(FLOATING_MENU_DIRECTION).indexOf(direction) < 0) {
throw new Error(`Wrong menu position direction: ${direction}`);
}
const alignmentStart = {
[FLOATING_MENU_DIRECTION_GROUP.HORIZONTAL]: {
[FLOATING_MENU_ALIGNMENT.START]: () => refStartFromContainer,
[FLOATING_MENU_ALIGNMENT.CENTER]: () => refCenterHorizontalFromContainer - width / 2,
[FLOATING_MENU_ALIGNMENT.END]: () => refEndFromContainer - width
},
[FLOATING_MENU_DIRECTION_GROUP.VERTICAL]: {
[FLOATING_MENU_ALIGNMENT.START]: () => refTopFromContainer,
[FLOATING_MENU_ALIGNMENT.CENTER]: () => refCenterVerticalFromContainer - height / 2,
[FLOATING_MENU_ALIGNMENT.END]: () => refBottom - height
}
}[alignmentDirection][alignment]();
const {
start,
top
} = {
[FLOATING_MENU_DIRECTION.LEFT]: () => ({
start: refStartFromContainer - width,
top: alignmentStart
}),
[FLOATING_MENU_DIRECTION.TOP]: () => ({
start: alignmentStart,
top: refTopFromContainer - height
}),
[FLOATING_MENU_DIRECTION.RIGHT]: () => ({
start: refEndFromContainer,
top: alignmentStart
}),
[FLOATING_MENU_DIRECTION.BOTTOM]: () => ({
start: alignmentStart,
top: refBottom
})
}[direction]();
return {
direction: positionDirection,
start,
top
};
}
}, {
kind: "method",
key: "createRenderRoot",
value: function createRenderRoot() {
return this.attachShadow({
mode: 'open',
delegatesFocus: true
});
}
}, {
kind: "method",
key: "disconnectedCallback",
value: function disconnectedCallback() {
if (this._hObserveResizeContainer) {
this._hObserveResizeContainer = this._hObserveResizeContainer.release();
}
if (this._hObserveResizeParent) {
this._hObserveResizeParent = this._hObserveResizeParent.release();
}
}
}, {
kind: "method",
key: "updated",
value: function updated(changedProperties) {
const {
container,
open,
parent
} = this;
if ((changedProperties.has('alignment') || changedProperties.has('direction') || changedProperties.has('open')) && open) {
if (!parent) {
this.parent = this.parentElement;
container.appendChild(this);
} // Note: `this.position` cannot be referenced until `this.parent` is set
const {
direction,
start,
top
} = this.position;
this.style[direction !== FLOATING_MENU_POSITION_DIRECTION.RTL ? 'left' : 'right'] = `${start}px`;
this.style.top = `${top}px`;
}
if (changedProperties.has('open')) {
if (this._hObserveResizeContainer) {
this._hObserveResizeContainer = this._hObserveResizeContainer.release();
}
if (this._hObserveResizeParent) {
this._hObserveResizeParent = this._hObserveResizeParent.release();
}
if (open) {
var _this$parent;
const {
parentElement
} = (_this$parent = this.parent) !== null && _this$parent !== void 0 ? _this$parent : {};
this._hObserveResizeContainer = observeResize(this._resizeObserver, container);
if (parentElement) {
this._hObserveResizeParent = observeResize(this._resizeObserver, parentElement);
}
}
}
}
/**
* A constant indicating that this class is a floating menu.
*/
}, {
kind: "field",
static: true,
key: "FLOATING_MENU",
value() {
return true;
}
}, {
kind: "get",
static: true,
key: "selectorContainer",
value:
/**
* The CSS selector to find the element to put this floating menu in.
*/
function selectorContainer() {
return '[data-floating-menu-container],bx-modal';
}
}]
};
}, HostListenerMixin(FocusMixin(LitElement)));
export default BXFloatingMenu;
//# sourceMappingURL=floating-menu.js.map