@limetech/lime-elements
Version:
189 lines (182 loc) • 9.95 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-174a078a.js');
const translations = require('./translations-d2be6dd7.js');
const randomString = require('./random-string-27fb6c74.js');
/**
* Container to keep track of all snackbar elements that gets added to the page.
* When an element gets added or removed, the container will emit a
* `changeOffset` event on all elements in the container, letting them know
* the new offset to where they should position themselves.
*/
class SnackbarContainer {
constructor() {
this.snackbarElements = [];
}
/**
* Add a new element to the container
*
* @param snackbar - element to add
*/
add(snackbar) {
const popover = this.getPopover(snackbar);
// @ts-expect-error Stencil does not seem to recognise the existance of showPopover
popover === null || popover === void 0 ? void 0 : popover.showPopover();
this.snackbarElements = [snackbar, ...this.snackbarElements];
this.emitOffsets();
}
/**
* Remove an element from the container
*
* @param snackbar - element to remove
*/
remove(snackbar) {
const popover = this.getPopover(snackbar);
// @ts-expect-error Stencil does not seem to recognise the existance of hidePopover
popover === null || popover === void 0 ? void 0 : popover.hidePopover();
this.snackbarElements = this.snackbarElements.filter((item) => item !== snackbar);
this.emitOffsets();
}
emitOffsets() {
let offset = 0;
for (const snackbar of this.snackbarElements) {
snackbar.dispatchEvent(new CustomEvent('changeOffset', {
detail: offset,
}));
offset += this.getPopover(snackbar).getBoundingClientRect().height;
}
}
getPopover(snackbar) {
return snackbar.shadowRoot.querySelector('[popover]');
}
}
const snackbarCss = "*{box-sizing:border-box}aside{background:none;border:none;inset:unset;overflow:visible;padding:0.5rem 0.5rem 0 0.5rem;right:0;width:var(--limel-snackbar-width, 21rem);top:calc(var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0));transition:opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease, top var(--limel-snackbar-top-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89), transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;transform:translate3d(0, 0, 0);opacity:1}aside.is-closing{transform:translate3d(2rem, 0, 0);opacity:0;--limel-snackbar-top-transition-speed:0.2s;--limel-snackbar-opacity-transition-speed:0.2s}.surface{overflow:hidden;padding:0.5rem;display:flex;align-items:center;justify-content:flex-start;gap:0.25rem;min-height:3.25rem;border-radius:0.75rem;background-color:rgb(var(--contrast-1400));box-shadow:var(--shadow-depth-8), var(--shadow-depth-16)}.label{color:rgb(var(--contrast-100));-webkit-font-smoothing:antialiased;font-size:var(--limel-theme-default-small-font-size);font-weight:400;padding:0 0.25rem;width:100%;flex-grow:1}.actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;gap:0.5rem}.dismiss,.actions{--lime-elevated-surface-background-color:rgb(\n var(--contrast-1300)\n )}.dismiss{--limel-theme-on-surface-color:rgb(\n var(--contrast-100)\n );--icon-background-color:var(--lime-elevated-surface-background-color);--fill-color:var(--lime-primary-color, var(--limel-theme-primary-color));--track-color:rgb(var(--contrast-800), 0.2);transition:opacity 0.1s ease, transform 0.1s ease;position:absolute;top:-0.375rem;left:-0.375rem;transform:scale(0.7);display:flex;align-items:center;justify-content:center}.dismiss svg{position:absolute;transform:rotate(90deg);fill:transparent;stroke-dasharray:100;stroke-linecap:round}aside.open .dismiss svg{animation:timeout var(--snackbar-timeout) linear forwards}.dismiss .is-closing{transform:scale(0.5);opacity:0}.dismiss-button{transform:scale(0.8);margin:0;padding:0}@keyframes timeout{0%{stroke-width:4;stroke-dashoffset:0;opacity:1}100%{stroke-width:1;stroke-dashoffset:-100;opacity:0.7}}.limel-portal--container{font-family:var(--limel-portal-font-family, inherit);opacity:0;display:none}.limel-portal--container.is-visible{opacity:1;display:inline-block}.limel-portal--container.is-visible>*{will-change:opacity, transform}@keyframes fade-in{from{opacity:0;transform:scale(0.94)}to{opacity:1;transform:scale(1) translate3d(0, 0, 0)}}@keyframes fade-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.94) translate3d(0, 0, 0)}}.limel-portal--container>*{animation:fade-in 0.18s cubic-bezier(0.11, 0.59, 0.18, 1.26) forwards}.limel-portal--container.is-hiding>*{animation:fade-out 0.22s ease forwards}.limel-portal--container[data-popper-placement=left-start]>*{transform-origin:right top}.limel-portal--container[data-popper-placement=left]>*{transform-origin:right center}.limel-portal--container[data-popper-placement=left-end]>*{transform-origin:right bottom}.limel-portal--container[data-popper-placement=top-start]>*{transform-origin:left bottom}.limel-portal--container[data-popper-placement=top]>*{transform-origin:center bottom}.limel-portal--container[data-popper-placement=top-end]>*{transform-origin:right bottom}.limel-portal--container[data-popper-placement=right-start]>*{transform-origin:left top}.limel-portal--container[data-popper-placement=right]>*{transform-origin:left center}.limel-portal--container[data-popper-placement=right-end]>*{transform-origin:left bottom}.limel-portal--container[data-popper-placement=bottom-start]>*{transform-origin:left top}.limel-portal--container[data-popper-placement=bottom]>*{transform-origin:center top}.limel-portal--container[data-popper-placement=bottom-end]>*{transform-origin:right top}";
const container = new SnackbarContainer();
const hideAnimationDuration = 300;
const Snackbar = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.action = index.createEvent(this, "action", 7);
this.hide = index.createEvent(this, "hide", 7);
this.handleOpen = () => {
if (this.isOpen) {
return;
}
this.isOpen = true;
this.closing = false;
container.add(this.host);
if (this.timeout && this.timeout !== -1) {
this.timeoutId = window.setTimeout(this.handleClose, Math.max(this.timeout - hideAnimationDuration, hideAnimationDuration));
}
};
this.handleClose = () => {
if (!this.isOpen) {
return;
}
this.closing = true;
if (this.timeoutId) {
clearTimeout(this.timeoutId);
this.timeoutId = undefined;
}
setTimeout(() => {
this.isOpen = false;
container.remove(this.host);
this.hide.emit();
this.offset = 0;
}, hideAnimationDuration);
};
this.handleClickAction = () => {
this.action.emit();
};
this.open = false;
this.message = undefined;
this.timeout = 5000;
this.actionText = undefined;
this.dismissible = true;
this.multiline = undefined;
this.language = 'en';
this.offset = 0;
this.isOpen = false;
this.closing = true;
this.snackbarId = randomString.createRandomString();
}
componentDidLoad() {
if (this.open) {
requestAnimationFrame(this.handleOpen);
}
}
onChangeIndex(event) {
event.stopPropagation();
this.offset = event.detail;
}
watchOpen() {
if (this.open) {
this.handleOpen();
}
else {
this.handleClose();
}
this.isOpen = this.open;
}
/**
* Show the snackbar
* @deprecated Use the `open` property instead.
*/
async show() {
console.warn('The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.');
if (!this.open) {
this.handleOpen();
}
}
render() {
return (index.h("aside", { popover: "manual", style: {
'--snackbar-timeout': `${Math.max(this.timeout || 0, 0)}ms`,
'--snackbar-distance-to-top-edge': `${this.offset}px`,
}, class: {
open: this.open,
'is-closing': this.closing,
'limel-portal--parent': true,
}, id: this.snackbarId, role: this.setAriaRoles(), "aria-relevant": this.open ? 'additions' : undefined }, index.h("div", { class: "surface", "aria-atomic": "false" }, index.h("div", { class: "label" }, this.message), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
}
setAriaRoles() {
if (!this.open) {
return;
}
if (!this.timeout || this.timeout === -1) {
return 'alertdialog';
}
return 'status';
}
renderActions(actionText) {
if (!actionText) {
return;
}
return (index.h("div", { class: "actions", "aria-atomic": "true" }, this.renderActionButton(actionText)));
}
renderActionButton(actionText) {
if (!actionText) {
return;
}
return (index.h("limel-button", { label: actionText, onClick: this.handleClickAction }));
}
renderDismissButton(dismissible) {
if (!dismissible) {
return;
}
const label = translations.translate.get('snackbar.dismiss', this.language);
return (index.h("div", { class: "dismiss" }, this.renderTimeoutVisualization(), index.h("limel-icon-button", { class: "dismiss-button", icon: "multiply", label: label, onClick: this.handleClose, "aria-controls": this.snackbarId })));
}
renderTimeoutVisualization() {
if (!this.timeout || this.timeout === -1) {
return;
}
return (index.h("svg", { width: "36", height: "36", viewBox: "0 0 36 36" }, index.h("circle", { r: "18", cx: "18", cy: "18", fill: "var(--track-color)" }), index.h("path", { class: "track", d: "M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0", stroke: "var(--fill-color)" })));
}
get host() { return index.getElement(this); }
static get watchers() { return {
"open": ["watchOpen"]
}; }
};
Snackbar.style = snackbarCss;
exports.limel_snackbar = Snackbar;
//# sourceMappingURL=limel-snackbar.cjs.entry.js.map