@baloise/ds-core 0.0.5-nightly.e56f740

package/components/bal-time-input.js

@@ -0,0 +1,216 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { l as lodash_isnil } from './index2.js';
+import { g as getInputTarget, b as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, s as stopEventBubbling, d as inputListenOnClick, j as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
+import { m as debounceEvent } from './helpers.js';
+import { i as inheritAttributes } from './attributes.js';
+import { i as isCtrlOrCommandKey, N as NUMBER_KEYS, A as ACTION_KEYS } from './keys.constant.js';
+import { B as BEM } from './bem.js';
+import { i as i18nBalTimeInput } from './bal-time-input.i18n.js';
+import { d as defaultBalAriaForm } from './form.js';
+import { L as Logger } from './log.js';
+import { d as defineCustomElement$3 } from './bal-icon2.js';
+import { d as defineCustomElement$2 } from './bal-input-group2.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
+
+const balTimeInputCss = ":root{--bal-time-input-native-placeholder-background-before:var(--bal-color-white);--bal-time-input-native-placeholder-background-disabled-before:var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-danger-before:var(--bal-color-danger-1);--bal-time-input-native-placeholder-background-disabled-danger-before:var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-hover-before:var(--bal-color-grey-1);--bal-time-input-native-text-color:var(--bal-color-primary-3);--bal-time-input-native-text-color-focus-value:var(--bal-color-primary);--bal-time-input-native-text-color-disabled:var(--bal-color-grey-5);--bal-time-input-native-text-color-disabled-value:var(--bal-color-grey-4);--bal-time-input-native-placeholder-text-color-disabled-before:var(--bal-color-grey-5);--bal-time-input-native-placeholder-text-color-before:var(--bal-color-primary-3)}.bal-time-input{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:relative;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;width:100%;padding:0;font-family:var(--bal-font-family-text)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper{display:flex}.bal-time-input__native::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-clear-button{display:none}.bal-time-input__native::-webkit-inner-spin-button{display:none}.bal-time-input__native::-webkit-calendar-picker-indicator{display:none;background:none}.bal-time-input__native::-webkit-datetime-edit-ampm-field{display:none}.bal-time-input__native.has-focus::-webkit-datetime-edit-text,.bal-time-input__native.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.has-focus::-webkit-datetime-edit-hour-field,.bal-time-input__native.has-value::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.has-focus::-webkit-datetime-edit-minute-field,.bal-time-input__native.has-value::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.show-placeholder.is-disabled::before{color:var(--bal-time-input-native-placeholder-text-color-disabled-before);background:var(--bal-time-input-native-placeholder-background-disabled-before)}.bal-time-input__native.show-placeholder.is-danger::before{background:var(--bal-time-input-native-placeholder-background-danger-before)}.bal-time-input__native.show-placeholder.is-disabled.is-danger::before{background:var(--bal-time-input-native-placeholder-background-disabled-danger-before)}.bal-time-input__native.show-placeholder:hover::before{background:var(--bal-time-input-native-placeholder-background-hover-before)}.bal-time-input__native.show-placeholder::before{color:var(--bal-time-input-native-placeholder-text-color-before);content:attr(placeholder);pointer-events:none;position:absolute;background:var(--bal-time-input-native-placeholder-background-before)}";
+const BalTimeInputStyle0 = balTimeInputCss;
+
+const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.balInput = createEvent(this, "balInput", 7);
+        this.balChange = createEvent(this, "balChange", 7);
+        this.balBlur = createEvent(this, "balBlur", 7);
+        this.balFocus = createEvent(this, "balFocus", 7);
+        this.balKeyPress = createEvent(this, "balKeyPress", 7);
+        this.balClick = createEvent(this, "balClick", 7);
+        this.inputId = `bal-time-input-${timeInputIds++}`;
+        this.inheritedAttributes = {};
+        this.inputValue = this.value;
+        this.initialValue = '';
+        this.onInput = (ev) => {
+            const input = getInputTarget(ev);
+            if (input) {
+                this.inputValue = input.value;
+            }
+            this.balInput.emit(this.inputValue);
+        };
+        this.onFocus = (ev) => {
+            inputHandleFocus(this, ev);
+        };
+        this.onBlur = (ev) => {
+            inputHandleBlur(this, ev);
+            const input = ev.target;
+            if (input) {
+                input.value = this.getFormattedValue();
+                inputHandleChange(this);
+            }
+        };
+        this.onKeydown = (ev) => {
+            if (!lodash_isnil(ev) && !isCtrlOrCommandKey(ev)) {
+                if (!this.getAllowedKeys().includes(ev.key)) {
+                    return stopEventBubbling(ev);
+                }
+            }
+        };
+        this.focused = false;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.ariaForm = defaultBalAriaForm;
+        this.name = this.inputId;
+        this.invalid = false;
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.debounce = 0;
+        this.value = undefined;
+        this.autoInvalidOff = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    debounceChanged() {
+        this.balChange = debounceEvent(this.balChange, this.debounce);
+    }
+    listenOnClick(ev) {
+        inputListenOnClick(this, ev);
+    }
+    resetHandler(ev) {
+        const formElement = ev.target;
+        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.el)) {
+            inputHandleReset(this, this.initialValue, this.resetHandlerTimer);
+        }
+    }
+    connectedCallback() {
+        this.debounceChanged();
+        this.initialValue = this.value || '';
+    }
+    componentDidLoad() {
+        this.inputValue = this.value;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
+    }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+        this.region = state.region;
+        if (!this.focused && this.nativeInput) {
+            this.nativeInput.value = this.getFormattedValue();
+        }
+    }
+    /**
+     * Sets focus on the native `input`. Use this method instead of the global
+     * `input.focus()`.
+     */
+    async setFocus() {
+        inputSetFocus(this);
+    }
+    /**
+     * Sets blur on the native `input`. Use this method instead of the global
+     * `input.blur()`.
+     * @internal
+     */
+    async setBlur() {
+        inputSetBlur(this);
+    }
+    /**
+     * Returns the native `<input>` element used under the hood.
+     */
+    async getInputElement() {
+        return this.nativeInput;
+    }
+    /**
+     * @internal
+     */
+    async setAriaForm(ariaForm) {
+        this.ariaForm = Object.assign({}, ariaForm);
+    }
+    getAllowedKeys() {
+        return [...NUMBER_KEYS, ...ACTION_KEYS, ':'];
+    }
+    getRawValue() {
+        const value = (this.value || '').toString();
+        return value;
+    }
+    getFormattedValue() {
+        return this.getRawValue();
+    }
+    render() {
+        const value = this.focused ? this.getRawValue() : this.getFormattedValue();
+        const block = BEM.block('time-input');
+        const native = block.element('native');
+        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("bal-input-group", { disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "debounce": ["debounceChanged"]
+    }; }
+    static get style() { return BalTimeInputStyle0; }
+}, [0, "bal-time-input", {
+        "name": [1],
+        "invalid": [4],
+        "required": [4],
+        "disabled": [4],
+        "readonly": [4],
+        "debounce": [2],
+        "value": [1025],
+        "autoInvalidOff": [516, "auto-invalid-off"],
+        "focused": [32],
+        "language": [32],
+        "region": [32],
+        "ariaForm": [32],
+        "configChanged": [64],
+        "setFocus": [64],
+        "setBlur": [64],
+        "getInputElement": [64],
+        "setAriaForm": [64]
+    }, [[6, "click", "listenOnClick"], [6, "reset", "resetHandler"]], {
+        "debounce": ["debounceChanged"]
+    }]);
+__decorate([
+    Logger('bal-time-input'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], TimeInput.prototype, "createLogger", null);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], TimeInput.prototype, "configChanged", null);
+let timeInputIds = 0;
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-time-input", "bal-icon", "bal-input-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-time-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TimeInput);
+            }
+            break;
+        case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bal-input-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const BalTimeInput = TimeInput;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalTimeInput, defineCustomElement };

package/components/bal-toast.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalToast extends Components.BalToast, HTMLElement {}
+export const BalToast: {
+    prototype: BalToast;
+    new (): BalToast;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-toast.js

@@ -0,0 +1,86 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './bal-close2.js';
+import { d as defineCustomElement$2 } from './bal-icon2.js';
+
+const balToastCss = ":root{--bal-toast-font-size:var(--bal-text-size-normal);--bal-toast-font-family:var(--bal-font-family-text);--bal-toast-background:var(--bal-color-white);--bal-toast-background-primary:var(--bal-color-white);--bal-toast-background-info:var(--bal-color-info-2);--bal-toast-background-success:var(--bal-color-success-2);--bal-toast-background-warning:var(--bal-color-warning-2);--bal-toast-background-danger:var(--bal-color-danger-2);--bal-toast-radius:var(--bal-radius-large);--bal-toast-color:var(--bal-color-text-primary);--bal-toast-color-primary:var(--bal-color-text-primary);--bal-toast-color-info:var(--bal-color-text-primary);--bal-toast-color-success:var(--bal-color-text-primary);--bal-toast-color-warning:var(--bal-color-text-primary);--bal-toast-color-danger:var(--bal-color-text-primary)}.bal-toast{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-positive:0 !important;flex-grow:0 !important;width:100%}.bal-toast__inner{min-height:3.5rem;border-radius:var(--bal-toast-radius);font-size:var(--bal-toast-font-size);font-family:var(--bal-toast-font-family);background:var(--bal-toast-background);color:var(--bal-toast-color);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-positive:1;flex-grow:1;margin:.5rem 0 0 0;-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal);padding:var(--bal-space-normal)}.bal-toast__inner--is-primary{background:var(--bal-toast-background-primary);color:var(--bal-toast-color-primary)}.bal-toast__inner--is-info{background:var(--bal-toast-background-info);color:var(--bal-toast-color-info)}.bal-toast__inner--is-danger{background:var(--bal-toast-background-danger);color:var(--bal-toast-color-danger)}.bal-toast__inner--is-warning{background:var(--bal-toast-background-warning);color:var(--bal-toast-color-warning)}.bal-toast__inner--is-success{background:var(--bal-toast-background-success);color:var(--bal-toast-color-success)}@media screen and (min-width: 769px),print{.bal-toast__inner{padding:var(--bal-space-normal-tablet)}}@media screen and (min-width: 1024px){.bal-toast__inner{padding:var(--bal-space-normal-desktop)}}@media screen and (min-width: 769px),print{.bal-toast__inner{max-width:28.75rem;width:28.75rem}}@media screen and (min-width: 1024px){.bal-toast__inner{max-width:30rem;width:30rem}}.bal-toast__label{margin-right:3rem;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-toast__close.bal-close{position:absolute;top:50%;right:1rem;margin-top:-0.75rem}";
+const BalToastStyle0 = balToastCss;
+
+const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.balClose = createEvent(this, "balClose", 7);
+        this.toastId = `bal-toast-${toastIds++}`;
+        this.color = '';
+        this.duration = 0;
+        this.message = '';
+        this.closeHandler = () => void 0;
+    }
+    async componentWillLoad() {
+        if (this.duration > 0) {
+            await this.closeIn(this.duration);
+        }
+    }
+    /**
+     * Closes the toast after the given duration in ms
+     */
+    async closeIn(duration) {
+        this.timer = setTimeout(() => this.close(), duration);
+    }
+    /**
+     * Closes this toast
+     */
+    async close() {
+        this.element.remove();
+        clearTimeout(this.timer);
+        this.balClose.emit(this.toastId);
+        this.closeHandler();
+    }
+    get colorType() {
+        if (this.color === '') {
+            return '';
+        }
+        return `bal-toast__inner--is-${this.color}`;
+    }
+    render() {
+        return (h(Host, { id: this.toastId, class: "bal-toast" }, h("div", { role: "alert", onClick: () => this.close(), class: `bal-toast__inner ${this.colorType}` }, h("span", { class: "bal-toast__label", innerHTML: this.message, "data-testid": "bal-toast-label" }, h("slot", null)), h("bal-close", { class: "bal-toast__close", inverted: false, "data-testid": "bal-toast-close" }))));
+    }
+    get element() { return this; }
+    static get style() { return BalToastStyle0; }
+}, [4, "bal-toast", {
+        "color": [1],
+        "duration": [2],
+        "message": [1],
+        "closeHandler": [16],
+        "closeIn": [64],
+        "close": [64]
+    }]);
+let toastIds = 0;
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-toast", "bal-close", "bal-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-toast":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Toast);
+            }
+            break;
+        case "bal-close":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const BalToast = Toast;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalToast, defineCustomElement };

package/components/bal-tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalTooltip extends Components.BalTooltip, HTMLElement {}
+export const BalTooltip: {
+    prototype: BalTooltip;
+    new (): BalTooltip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-tooltip.js

@@ -0,0 +1,290 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { L as Logger } from './log.js';
+import { B as BEM } from './bem.js';
+import { b as balBrowser } from './browser.js';
+import { b as balDevice } from './device.js';
+import { a as autoUpdate, c as computePosition, s as shift, f as flip, o as offset, b as arrow } from './floating-ui.dom.esm.js';
+import { d as defineCustomElement$2 } from './bal-stack2.js';
+
+const showContainerElement = (containerEl) => {
+    if (containerEl) {
+        showElement(containerEl);
+    }
+};
+const hideContainerElement = (containerEl) => {
+    if (containerEl) {
+        hideElement(containerEl);
+    }
+};
+const showArrowElement = (arrowEl) => {
+    if (arrowEl) {
+        showElement(arrowEl);
+    }
+};
+const hideArrowElement = (arrowEl) => {
+    if (arrowEl) {
+        Object.assign(arrowEl.style, {
+            left: '',
+            top: '',
+            display: 'none',
+            visibility: 'hidden',
+        });
+    }
+};
+const showElement = (element) => {
+    if (element) {
+        element.style.setProperty('display', 'block');
+        element.style.setProperty('visibility', 'visible');
+    }
+};
+const hideElement = (element) => {
+    if (element) {
+        element.style.removeProperty('display');
+        element.style.removeProperty('visibility');
+    }
+};
+
+const balTooltipCss = ":host{--bal-tooltip-container-background:var(--bal-color-primary-6);--bal-tooltip-max-width:auto;--bal-tooltip-radius:var(--bal-radius-normal);--bal-tooltip-shadow:var(--bal-shadow-normal);--bal-tooltip-arrow-background:var(--bal-color-primary-6);--bal-tooltip-font-family:var(--bal-font-family-text);--bal-tooltip-font-size:var(--bal-text-size-small)}:host{position:static;display:inline;z-index:var(--bal-z-index-tooltip)}.bal-tooltip__container{background-color:var(--bal-tooltip-container-background);display:none;visibility:hidden;color:#fff;padding:var(--bal-space-x-small);border-radius:var(--bal-tooltip-radius);-webkit-box-shadow:var(--bal-tooltip-shadow);box-shadow:var(--bal-tooltip-shadow);width:var(--bal-tooltip-max-width);position:absolute;top:0;left:0}.bal-tooltip__inner{overflow-y:auto;max-height:calc(var(--bal-app-height, 100%) - 8rem)}.bal-tooltip__inner__content{width:100%;font-family:var(--bal-tooltip-font-family);font-size:var(--bal-tooltip-font-size)}.bal-tooltip__arrow{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;width:.5rem;height:.5rem;background:var(--bal-tooltip-arrow-background);-webkit-transform:rotate(45deg);transform:rotate(45deg);display:none;visibility:hidden}.bal-tooltip-variant-popover-trigger,.bal-tooltip-permanent-trigger{z-index:calc(var(--bal-z-index-tooltip) + 1) !important;position:relative !important}";
+const BalTooltipStyle0 = balTooltipCss;
+
+const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.balWillAnimate = createEvent(this, "balWillAnimate", 7);
+        this.balDidAnimate = createEvent(this, "balDidAnimate", 7);
+        this.tooltipId = `bal-to-${tooltipIds++}`;
+        this.reference = '';
+        this.placement = 'bottom';
+        this.offset = 0;
+        this.demo = false;
+        this.presented = false;
+        this.contentWidth = undefined;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    contentWidthChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            if (newValue === undefined) {
+                this.el.style.removeProperty('--bal-tooltip-max-width');
+            }
+            else {
+                this.el.style.setProperty('--bal-tooltip-max-width', `${this.contentWidth}px`);
+            }
+        }
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    // componentDidRender() {
+    //   if (this.demo) {
+    //     this.present()
+    //   }
+    // }
+    componentDidLoad() {
+        this.contentWidthChanged(this.contentWidth, 0);
+        if (!balDevice.hasTouchScreen) {
+            let showEvents = [];
+            let hideEvents = [];
+            showEvents = ['mouseenter', 'focus'];
+            hideEvents = ['mouseleave', 'blur'];
+            showEvents.forEach(event => {
+                if (this.triggerElement) {
+                    this.triggerElement.addEventListener(event, () => this.present());
+                }
+            });
+            hideEvents.forEach(event => {
+                if (this.triggerElement) {
+                    this.triggerElement.addEventListener(event, () => this.dismiss());
+                }
+            });
+        }
+        if (this.demo) {
+            this.present();
+        }
+    }
+    /**
+     * INTERNAL METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal
+     */
+    async present() {
+        //
+        // identify trigger element or the the closest trigger available
+        if (!this.trigger && balBrowser.hasDocument) {
+            const firstTrigger = Array.from(document.querySelectorAll(`[id="${this.reference}"]`))[0];
+            this.trigger = firstTrigger;
+        }
+        if (this.trigger && this.containerEl && this.arrowEl) {
+            this.balWillAnimate.emit();
+            //
+            // get placement type of the trigger
+            const triggerVariantAttr = this.trigger.attributes.getNamedItem('bal-tooltip-placement');
+            if (triggerVariantAttr) {
+                this.placement = triggerVariantAttr.value;
+            }
+            else {
+                this.placement = this.placement;
+            }
+            //
+            // show all required elements
+            showContainerElement(this.containerEl);
+            showArrowElement(this.arrowEl);
+            this.trigger.classList.add('bal-tooltip-trigger');
+            this.presented = true;
+            this.cleanup = autoUpdate(this.trigger, this.containerEl, () => {
+                this.update();
+            }, {
+                ancestorScroll: true,
+                ancestorResize: true,
+                elementResize: false,
+                layoutShift: true,
+                animationFrame: true,
+            });
+            this.balDidAnimate.emit();
+            return true;
+        }
+        return false;
+    }
+    /**
+     * @internal
+     */
+    async dismiss() {
+        if (this.containerEl && this.arrowEl && this.trigger) {
+            this.balWillAnimate.emit();
+            if (this.cleanup) {
+                this.cleanup();
+            }
+            this.trigger.classList.remove('bal-tooltip-trigger');
+            hideContainerElement(this.containerEl);
+            hideArrowElement(this.arrowEl);
+            this.presented = false;
+            this.balDidAnimate.emit();
+            return true;
+        }
+        return false;
+    }
+    /**
+     * @internal
+     */
+    async update() {
+        if (this.trigger && this.containerEl && this.arrowEl) {
+            this.balWillAnimate.emit();
+            let isInFrame = false;
+            if (balBrowser.hasWindow) {
+                isInFrame = !!window.frameElement;
+            }
+            computePosition(this.trigger, this.containerEl, {
+                placement: this.placement,
+                middleware: [
+                    isInFrame ? undefined : shift(),
+                    flip(),
+                    offset(8),
+                    arrow({
+                        element: this.arrowEl,
+                        padding: 4,
+                    }),
+                ],
+            }).then(({ x, y, middlewareData, placement }) => {
+                const side = placement.split('-')[0];
+                const staticSide = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right',
+                }[side];
+                if (this.containerEl) {
+                    Object.assign(this.containerEl.style, {
+                        left: `${x}px`,
+                        top: `${y}px`,
+                    });
+                }
+                if (middlewareData.arrow && this.arrowEl) {
+                    const arrowPosition = middlewareData.arrow;
+                    Object.assign(this.arrowEl.style, {
+                        left: x != null && arrowPosition.x != null ? `${arrowPosition.x}px` : '',
+                        top: y != null && arrowPosition.y != null ? `${arrowPosition.y}px` : '',
+                        right: '',
+                        bottom: '',
+                        [staticSide]: `${-4}px`,
+                    });
+                }
+            });
+            this.balDidAnimate.emit();
+            return true;
+        }
+        return false;
+    }
+    /**
+     * GETTERS
+     * ------------------------------------------------------
+     */
+    get triggerElement() {
+        return document.querySelector(`[id="${this.reference}"]`);
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = BEM.block('tooltip');
+        const containerBlock = block.element('container');
+        const arrowBlock = block.element('arrow');
+        const innerBlock = block.element('inner');
+        const innerContentBlock = innerBlock.element('content');
+        return (h(Host, { class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}` }, h("div", { class: Object.assign({}, containerBlock.class()), ref: containerEl => (this.containerEl = containerEl) }, h("div", { class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { layout: "vertical", class: Object.assign({}, innerBlock.class()) }, h("div", { class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-tooltip-content" }, h("slot", null))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "contentWidth": ["contentWidthChanged"]
+    }; }
+    static get style() { return BalTooltipStyle0; }
+}, [1, "bal-tooltip", {
+        "reference": [1],
+        "placement": [1],
+        "offset": [2],
+        "demo": [4],
+        "contentWidth": [2, "content-width"],
+        "presented": [32],
+        "present": [64],
+        "dismiss": [64],
+        "update": [64]
+    }, undefined, {
+        "contentWidth": ["contentWidthChanged"]
+    }]);
+__decorate([
+    Logger('bal-tooltip'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Tooltip.prototype, "createLogger", null);
+let tooltipIds = 0;
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-tooltip", "bal-stack"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Tooltip);
+            }
+            break;
+        case "bal-stack":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const BalTooltip = Tooltip;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalTooltip, defineCustomElement };

package/components/bem.js

@@ -0,0 +1,10 @@
+const bemReturn = (selector) => ({
+    class: (condition = true) => ({ [selector]: condition }),
+    element: bemElement(selector),
+    modifier: bemModifier(selector),
+});
+const bemElement = (selector) => (name) => bemReturn(`${selector}__${name}`);
+const bemModifier = (selector) => (name) => bemReturn(`${selector}--${name}`);
+const BEM = { block: (name) => bemReturn(`bal-${name}`) };
+
+export { BEM as B };

package/components/breakpoints.decorator.js

@@ -0,0 +1,17 @@
+import { a as balBreakpointSubject } from './breakpoints.subject.js';
+
+function ListenToBreakpoints() {
+    return function (target, _propertyKey, _descriptor) {
+        const { connectedCallback, disconnectedCallback } = target;
+        target.connectedCallback = function () {
+            balBreakpointSubject.attach(this);
+            return connectedCallback && connectedCallback.call(this);
+        };
+        target.disconnectedCallback = function () {
+            balBreakpointSubject.detach(this);
+            return disconnectedCallback && disconnectedCallback.call(this);
+        };
+    };
+}
+
+export { ListenToBreakpoints as L };