@telekom/scale-components
Version:
Scale is the digital design system for Telekom products and experiences.
707 lines (687 loc) • 94.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-a0ea3d79.js');
const index$1 = require('./index-53f5a5fc.js');
const statusNote = require('./status-note-dceee5a3.js');
const floatingUi_dom_esm = require('./floating-ui.dom.esm-1bce2997.js');
const utils = require('./utils-e9c3b953.js');
const dropdownSelectCss = ":host{--font-weight:var(--telekom-typography-font-weight-bold);--height:var(--telekom-spacing-composition-space-13);--color:var(--telekom-color-text-and-icon-standard);--color-disabled:var(--telekom-color-text-and-icon-disabled);--background-disabled:none;--background-hover:var(--telekom-color-ui-state-fill-hovered);--border:var(--telekom-spacing-composition-space-01) solid\n var(--telekom-color-ui-border-standard);--border-color-hover:var(--telekom-color-ui-border-hovered);--border-color-focus:var(--telekom-color-ui-border-hovered);--border-color-disabled:var(--telekom-color-ui-border-disabled);--border-invalid:var(--telekom-spacing-composition-space-02) solid\n var(--telekom-color-functional-danger-hovered);--focus-outline:var(--telekom-line-weight-highlight) solid\n var(--telekom-color-functional-focus-standard);--spacing-x:var(--telekom-spacing-composition-space-05);--transition:all var(--telekom-motion-duration-transition)\n var(--telekom-motion-easing-standard);--radius:var(--telekom-radius-standard);--spacing-x-for-helper-text:var(--telekom-spacing-composition-space-03);--transition-combobox:var(--transition);--background-combobox:var(--telekom-color-ui-state-fill-standard);--spacing-combobox:1.125rem\n calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem\n calc(0.75rem - var(--telekom-spacing-composition-space-01));--spacing-y-meta:var(--telekom-spacing-composition-space-03);--color-meta:var(--telekom-color-text-and-icon-standard);--height-icon:20px;--color-icon:var(--telekom-color-text-and-icon-standard);--color-icon-hover:var(--telekom-color-text-and-icon-standard);--color-icon-active:var(--telekom-color-text-and-icon-standard);--transition-icon:var(--transition);--color-label:var(--telekom-color-text-and-icon-additional);--z-index-label:var(--scl-z-index-10);--transition-label:var(--transition);--transform-label:translate(var(--spacing-x), 0.875rem);--transform-label-animated:translate(\n var(--spacing-x),\n calc(0.25rem + var(--telekom-spacing-composition-space-01))\n );--background-listbox:var(--telekom-color-background-surface);--box-shadow-listbox:0 2px 4px 0 rgba(0, 0, 0, 0.1),\n 0 4px 16px 0 rgba(0, 0, 0, 0.1);--max-height-listbox:300px;--z-index-listbox:99}[part='combobox-container'] *,[part='combobox-container'] *::before,[part='combobox-container'] *::after{box-sizing:border-box}[part='combobox-container']{display:block;position:relative}[part='combobox']{width:100%;height:var(--height);margin:0;display:flex;align-items:center;outline:none;padding:var(--spacing-combobox);z-index:1;box-sizing:border-box;transition:var(--transition-combobox);font:var(--telekom-text-style-body);border-radius:var(--radius);border:var(--border);box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;appearance:none;-webkit-appearance:none;background-color:var(--background-combobox);color:var(--color)}[part~='select']:not([part~='disabled']) [part='combobox']:hover~[part='icon']{color:var(--color-icon-hover)}[part~='select']:not([part~='disabled']) [part='combobox']:active~[part='icon']{color:var(--color-icon-active)}[part~='select']:not([part~='disabled']):not([part~='invalid']) [part='combobox']:hover{border-color:var(--border-color-hover);background-color:var(--background-hover)}[part~='select']:not([part~='disabled'])[part~='invalid'] [part='combobox']:hover{background-color:var(--background-hover)}[part~='select']:not([part~='disabled']):not([part~='invalid']) [part='combobox']:focus{border-color:var(--border-color-focus)}[part~='select']:not([part~='disabled']):not([part~='steal-focus']) [part='combobox']:focus{outline:var(--focus-outline);outline-offset:1px}[part~='invalid'] [part='combobox']{border:var(--border-invalid)}[part~='transparent'] [part='combobox']{background-color:transparent}[part~='disabled'] [part='combobox']{cursor:not-allowed;border-color:var(--border-color-disabled);color:var(--color-disabled);background:var(--background-disabled)}[part='combobox_value']{width:calc(100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}[part='meta']{display:flex;justify-content:space-between;margin-top:var(--spacing-y-meta);color:var(--color-meta)}[part='icon']{top:50%;right:var(--spacing-x);position:absolute;transform:translateY(-50%);pointer-events:none;height:var(--height-icon);color:var(--color-icon);transition:var(--transition-icon)}[part~='disabled'] [part='icon']{color:var(--color-disabled)}[part='label']{width:calc(100% - 44px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;top:0;left:0;color:var(--color-label);display:inline-block;z-index:var(--z-index-label);position:absolute;transition:var(--transition-label);pointer-events:none;font:var(--telekom-text-style-ui);transform:var(--transform-label)}[part~='animated'] [part='label']{font:var(--telekom-text-style-small-bold);transform:var(--transform-label-animated)}[part~='disabled'] [part='label']{cursor:not-allowed;border-color:var(--border-color-disabled);color:var(--color-disabled);background:var(--background-disabled)}[part~='hide-label'] [part='combobox']{padding-top:0.3125rem}[part~='hide-label'] [part='label']{visibility:hidden}[part='listbox']{position:relative}[part='listbox-scroll-container']{max-height:var(--max-height-listbox);overflow-y:auto}[part='listbox-pad']{background:var(--background-listbox);box-shadow:var(--box-shadow-listbox);border-radius:var(--radius);padding:var(--radius) 0;margin-top:var(--telekom-spacing-composition-space-03);left:0;position:absolute;top:100%;width:100%;z-index:var(--z-index-listbox);display:none}[part~='open'] [part='listbox-pad']{display:block}[part~='strategy-fixed'] [part='listbox-pad']{position:fixed}[part~='transparent'] [part='listbox']{background-color:transparent}[part~='option']{color:var(--color)}[part~='option']:hover{background-color:var(--background-hover)}[part~='option'][part~='current']{outline:var(--focus-outline);outline-offset:-2px;border-radius:var(--radius)}[part~='option'][aria-selected='true']{padding-right:30px;position:relative}[part~='option'][aria-selected='true'] scale-icon-action-checkmark{position:absolute;right:var(--telekom-spacing-composition-space-05);top:var(--telekom-spacing-composition-space-05)}[part~='option'] scale-dropdown-select-item::part(base){padding:var(--telekom-spacing-composition-space-05)}[part~='has-helper-text'] [part~='combobox-container']{margin-bottom:var(--spacing-x-for-helper-text)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.hcm-disabled{display:none}@media screen and (forced-colors: active), (-ms-high-contrast: active){[part='listbox-pad']{outline:var(--focus-outline);outline-offset:-2px;border-radius:var(--radius)}.hcm-disabled{display:block}}";
var Actions;
(function (Actions) {
Actions["Close"] = "Close";
Actions["CloseSelect"] = "CloseSelect";
Actions["First"] = "First";
Actions["Last"] = "Last";
Actions["Next"] = "Next";
Actions["Open"] = "Open";
Actions["PageDown"] = "PageDown";
Actions["PageUp"] = "PageUp";
Actions["Previous"] = "Previous";
Actions["Select"] = "Select";
Actions["Type"] = "Type";
})(Actions || (Actions = {}));
const DEFAULT_ICON_SIZE$1 = 20;
const isElementValue = (x) => typeof x.value === 'string';
const readValue = (element) => isElementValue(element) ? element.value : null;
const readOptions = (hostElement) => {
return Array.from(hostElement.children).map((x) => {
var _a;
return ({
label: x.textContent.trim(),
value: (_a = x.getAttribute('value')) !== null && _a !== void 0 ? _a : readValue(x),
ItemElement: index.h("span", { innerHTML: x.outerHTML }),
});
});
};
function getActionFromKey(event, open) {
const { key, altKey, ctrlKey, metaKey } = event;
if (!open && ['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(key)) {
return Actions['Open'];
}
if (key === 'Home') {
return Actions['First'];
}
if (key === 'End') {
return Actions['Last'];
}
if (['Backspace', 'Clear'].includes(key) ||
(key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey)) {
return Actions['Type'];
}
if (!open) {
return;
}
if (key === 'ArrowUp' && altKey) {
return Actions['CloseSelect'];
}
if (key === 'ArrowDown' && !altKey) {
return Actions['Next'];
}
switch (key) {
case 'ArrowUp':
return Actions['Previous'];
case 'PageUp':
return Actions['PageUp'];
case 'PageDown':
return Actions['PageDown'];
case 'Escape':
return Actions['Close'];
case 'Enter':
return Actions['CloseSelect'];
case ' ':
return Actions['CloseSelect'];
}
}
function jumpToIndex(currentIndex, maxIndex, action) {
const JUMP_SIZE = 10;
switch (action) {
case Actions['First']:
return 0;
case Actions['Last']:
return maxIndex;
case Actions['Previous']:
return Math.max(0, currentIndex - 1);
case Actions['Next']:
return Math.min(maxIndex, currentIndex + 1);
case Actions['PageUp']:
return Math.max(0, currentIndex - JUMP_SIZE);
case Actions['PageDown']:
return Math.min(maxIndex, currentIndex + JUMP_SIZE);
default:
return currentIndex;
}
}
function matchOptions(options = [], filter) {
return options.filter((option) => option.toLowerCase().indexOf(filter.toLowerCase()) === 0);
}
function getIndexByChar(values, filter, startIndex = 0) {
const sortedValues = [
...values.slice(startIndex),
...values.slice(0, startIndex),
];
const firstHit = matchOptions(sortedValues, filter)[0];
const allMatchingChars = (array) => array.every((char) => char === array[0]);
if (firstHit) {
return values.indexOf(firstHit);
}
if (allMatchingChars(filter.split(''))) {
const hits = matchOptions(sortedValues, filter[0]);
return values.indexOf(hits[0]);
}
return -1;
}
function keepInView(activeElement, scrollParent) {
const { offsetHeight, offsetTop } = activeElement;
const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;
const isAboveParent = offsetTop < scrollTop;
const isBelowParent = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
if (isBelowParent) {
return (scrollParent.scrollTop =
offsetTop + offsetHeight - parentOffsetHeight);
}
if (isAboveParent) {
return (scrollParent.scrollTop = offsetTop);
}
}
function hasOverflow(element) {
return element && element.clientHeight < element.scrollHeight;
}
function isInView(element) {
const rect = element.getBoundingClientRect();
const parentRect = {
top: 0,
left: 0,
right: window.innerWidth || document.documentElement.clientWidth,
bottom: window.innerHeight || document.documentElement.clientHeight,
};
return (rect.top >= parentRect.top &&
rect.left >= parentRect.left &&
rect.bottom <= parentRect.bottom &&
rect.right <= parentRect.right);
}
const DropdownSelect = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.scaleChange = index.createEvent(this, "scale-change", 7);
this.scaleFocus = index.createEvent(this, "scale-focus", 7);
this.scaleBlur = index.createEvent(this, "scale-blur", 7);
this.scaleKeydown = index.createEvent(this, "scale-keydown", 7);
this.comboboxId = 'combobox';
this.helperText = '';
this.invalid = false;
this.variant = 'informational';
/** @see {@url https://floating-ui.com/docs/computePosition#strategy} */
this.floatingStrategy = 'absolute';
/** (optional) to hide the label */
this.hideLabelVisually = false;
/** (optional) Screen reader text appended to the selected element */
this.ariaLabelSelected = 'selected';
/** (optional) Text displayed in high contrast mode only to indicate disabled state */
this.hcmLabelDisabled = 'this field is disabled';
this.options = '';
this.open = false;
this.currentIndex = -1;
this.queryString = '';
this.queryTimeout = null;
this.ignoreBlur = false;
this.hasFocus = false;
this.selectOption = (index) => {
this.currentIndex = index;
this.value = readOptions(this.hostElement)[index].value;
utils.emitEvent(this, 'scaleChange', { value: this.value });
};
this.handleKeyDown = (event) => {
const { key } = event;
const max = readOptions(this.hostElement).length - 1;
const action = getActionFromKey(event, this.open);
utils.emitEvent(this, 'scaleKeydown', event);
switch (action) {
case Actions['Last']:
case Actions['First']:
this.setOpen(true);
case Actions['Next']:
case Actions['Previous']:
case Actions['PageUp']:
case Actions['PageDown']:
event.preventDefault();
return this.handleOptionChange(jumpToIndex(this.currentIndex, max, action));
case Actions['CloseSelect']:
event.preventDefault();
this.selectOption(this.currentIndex);
case Actions['Close']:
event.preventDefault();
return this.setOpen(false);
case Actions['Type']:
return this.buildQueryString(key);
case Actions['Open']:
event.preventDefault();
return this.setOpen(true);
}
};
this.handleBlur = () => {
if (this.ignoreBlur) {
this.ignoreBlur = false;
return;
}
this.setOpen(false);
utils.emitEvent(this, 'scaleBlur');
};
this.handleFocus = () => {
utils.emitEvent(this, 'scaleFocus');
};
this.handleClick = () => {
this.setOpen(!this.open);
const indexOfValue = readOptions(this.hostElement).findIndex(({ value }) => value === this.value);
if (indexOfValue > -1) {
setTimeout(() => {
this.bringIntoView(indexOfValue);
});
}
};
}
valueChange(newValue) {
this.currentIndex = readOptions(this.hostElement).findIndex(({ value }) => value === newValue);
}
connectedCallback() {
if (this.hostElement.closest('scale-tab-panel')) {
this.ignoreBlur = true;
}
statusNote.statusNote({ source: this.hostElement, tag: 'beta' });
this.currentIndex =
readOptions(this.hostElement).findIndex(({ value }) => value === this.value) || -1;
}
componentDidRender() {
if (!this.open) {
return;
}
if (this.floatingStrategy === 'fixed') {
this.listboxPadEl.style.width = `${this.comboEl.getBoundingClientRect().width}px`;
}
floatingUi_dom_esm.computePosition(this.comboEl, this.listboxPadEl, {
placement: 'bottom',
strategy: this.floatingStrategy,
}).then(({ x, y }) => {
Object.assign(this.listboxPadEl.style, {
left: `${x}px`,
top: `${y}px`,
});
});
}
handleOptionChange(index) {
this.currentIndex = index;
this.bringIntoView(index);
}
bringIntoView(index) {
const options = this.listboxEl.querySelectorAll('[role=option]');
if (hasOverflow(this.listboxEl)) {
keepInView(options[index], this.listboxEl);
}
if (!isInView(options[index])) {
options[index].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}
setOpen(open) {
if (this.open === open) {
return;
}
if (this.disabled) {
return;
}
this.open = open;
if (!this.open) {
this.comboEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
this.comboEl.focus();
this.currentIndex = -1;
}
}
handleOptionClick(event, index) {
event.stopPropagation();
this.handleOptionChange(index);
this.selectOption(index);
this.setOpen(false);
}
getSearchString(char) {
if (typeof this.queryTimeout === 'number') {
window.clearTimeout(this.queryTimeout);
}
this.queryTimeout = window.setTimeout(() => {
this.queryString = '';
}, 500);
this.queryString += char;
return this.queryString;
}
buildQueryString(char) {
this.setOpen(true);
const queryString = this.getSearchString(char);
const queryIndex = getIndexByChar(readOptions(this.hostElement).map(({ label }) => label), queryString, this.currentIndex + 1);
if (queryIndex >= 0) {
this.handleOptionChange(queryIndex);
}
else {
window.clearTimeout(this.queryTimeout);
this.queryString = '';
}
}
render() {
const ValueElement = (readOptions(this.hostElement).find(({ value }) => value === this.value) ||
{}).ItemElement;
const hasEmptyValueElement = (readOptions(this.hostElement).find(({ value }) => value === this.value) || {}).value === ''
? true
: false;
const helperTextId = `helper-message-${utils.generateUniqueId()}`;
const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
return (index.h(index.Host, null, index.h("div", { part: this.getBasePartMap() }, index.h("div", { part: "combobox-container" }, index.h("label", { id: `${this.comboboxId}-label`, part: "label" }, this.label), index.h("div", Object.assign({ ref: (el) => (this.comboEl = el), "aria-controls": `${this.comboboxId}-listbox`, "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "listbox", "aria-labelledby": `${this.comboboxId}-label`, id: this.comboboxId, part: "combobox", role: "combobox", tabindex: "0", onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, (this.open
? {
'aria-activedescendant': (readOptions(this.hostElement)[this.currentIndex] ||
{}).value,
}
: {}), (this.helperText ? ariaDescribedByAttr : {}), (this.invalid ? { 'aria-invalid': 'true' } : {})), index.h("span", { part: "combobox-value" }, hasEmptyValueElement ? '' : ValueElement)), index.h("div", { part: "listbox-pad", ref: (el) => (this.listboxPadEl = el) }, index.h("div", { part: "listbox-scroll-container" }, index.h("div", { ref: (el) => (this.listboxEl = el), part: "listbox", role: "listbox", id: `${this.comboboxId}-listbox`, "aria-labelledby": `${this.comboboxId}-label`, tabindex: "-1" }, readOptions(this.hostElement).map(({ value, ItemElement }, index$1) => (index.h("div", Object.assign({ role: "option", part: `option${index$1 === this.currentIndex ? ' current' : ''}`, id: value, onClick: (event) => {
this.handleOptionClick(event, index$1);
}, onMouseDown: () => {
this.ignoreBlur = true;
} }, (value === this.value
? { 'aria-selected': 'true' }
: {})), ItemElement, value === this.value ? (index.h("div", null, index.h("scale-icon-action-checkmark", { size: 16 }), index.h("span", { class: "sr-only" }, this.ariaLabelSelected))) : null)))))), index.h("div", { part: "icon" }, this.open ? (index.h("scale-icon-navigation-collapse-up", { decorative: true, size: DEFAULT_ICON_SIZE$1 })) : (index.h("scale-icon-navigation-collapse-down", { decorative: true, size: DEFAULT_ICON_SIZE$1 })))), this.helperText && (index.h("scale-helper-text", { helperText: this.helperText, variant: this.invalid ? 'danger' : this.variant, id: helperTextId })), this.disabled && (index.h("div", { class: "hcm-disabled" }, this.hcmLabelDisabled)))));
}
getBasePartMap() {
const animated = this.value != null && this.value !== '';
return index$1.classnames('select', this.open && `open`, this.disabled && `disabled`, this.readonly && `readonly`, this.transparent && 'transparent', this.invalid && `invalid`, this.currentIndex > -1 && `steal-focus`, animated && 'animated', this.helperText && 'has-helper-text', this.floatingStrategy && `strategy-${this.floatingStrategy}`, this.hideLabelVisually && 'hide-label');
}
get hostElement() { return index.getElement(this); }
static get watchers() { return {
"value": ["valueChange"]
}; }
};
DropdownSelect.style = dropdownSelectCss;
const dropdownSelectItemCss = "/*!*option*!*/[part~='base']{display:flex;justify-content:flex-start;align-items:center}[part~='prefix'],[part~='label'],[part~='suffix']{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1}";
const DropdownSelectItem = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
return (index.h("div", { part: "base" }, index.h("div", { part: "prefix" }, index.h("slot", { name: "prefix" })), index.h("div", { part: "label" }, index.h("slot", null)), index.h("div", { part: "suffix" }, index.h("slot", { name: "suffix" }))));
}
get hostElement() { return index.getElement(this); }
};
DropdownSelectItem.style = dropdownSelectItemCss;
const iconCss$4 = "scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";
const ActionHidePassword = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** (optional) The width and height in pixels */
this.size = 24;
/** (optional) Sets the icon color via the `fill` attribute */
this.fill = 'currentColor';
/** (optional) Alias for `fill` */
this.color = 'currentColor';
/** (optional) If `true`, the icon changes visually */
this.selected = false;
/** (optional) If `true` the SVG element will get `aria-hidden="true"` */
this.decorative = false;
/** (optional) If `true` the icon can receive focus */
this.focusable = false;
}
connectedCallback() {
if (!this.hostElement.hasAttribute('styles')) {
this.hostElement.style.display = 'inline-flex';
}
}
render() {
const ariaHidden = this.decorative ? { 'aria-hidden': 'true' } : {};
const focusable = this.focusable ? { tabindex: 0 } : {};
return (index.h(index.Host, null, index.h("svg", Object.assign({ class: "scale-icon", xmlns: "http://www.w3.org/2000/svg", width: this.size, height: this.size, viewBox: "0 0 24 24" }, ariaHidden, focusable), this.accessibilityTitle && index.h("title", null, this.accessibilityTitle), index.h("g", { fill: ((this.fill === 'currentColor') ? this.color : this.fill) }, this.selected ? (index.h("g", null, index.h("path", { d: "M3.815 2.776l.085.074L21.15 20.1c.3.3.3.75 0 1.05a.722.722 0 01-.965.074l-.085-.074L2.85 3.9c-.3-.3-.3-.75 0-1.05a.722.722 0 01.965-.074zM4.2 7.35L5.25 8.4l-.018.017 2.423 2.423A4.67 4.67 0 007.5 12a4.5 4.5 0 004.5 4.5 4.67 4.67 0 00.874-.089l.286-.066 2.285 2.28-.015.005.57.57c-1.2.5-2.5.8-4 .8-4.108 0-6.987-2.283-9.1-4.68l-.364-.425-.35-.423-.334-.421-.476-.62-.726-.981L.3 12l.35-.45.595-.806C1.969 9.776 2.8 8.73 3.774 7.76l.426-.41zM12 4c4.108 0 6.987 2.283 9.1 4.68l.364.425.35.423.334.421.476.62.726.981.35.45-.35.45-.595.806c-.724.968-1.555 2.014-2.529 2.983l-.426.411-1.05-1.05.018-.017-2.423-2.423c.1-.379.152-.768.155-1.16A4.5 4.5 0 0012 7.5a4.67 4.67 0 00-.874.089l-.286.066-2.285-2.28.015-.005L8 4.8c1.2-.5 2.5-.8 4-.8zm-3 8.19l2.8 2.8a3 3 0 01-2.783-2.621L9 12.19zm3.2-3.18a3 3 0 012.783 2.621l.017.179-2.8-2.8z", "fill-rule": "evenodd" }))) : (index.h("g", null, index.h("path", { d: "M2.85 2.85a.722.722 0 01.965-.074l.085.074L21.15 20.1c.3.3.3.75 0 1.05a.722.722 0 01-.965.074l-.085-.074L2.85 3.9c-.3-.3-.3-.75 0-1.05zm1.35 4.5L5.25 8.4c-1.1 1.05-2.1 2.3-3.05 3.6l.578.778.39.506.397.494C5.766 16.458 8.287 18.5 12 18.5c.919 0 1.76-.115 2.527-.345l.323-.105L16 19.2c-1.2.5-2.5.8-4 .8-4.108 0-6.987-2.283-9.1-4.68l-.364-.425-.35-.423-.334-.421-.476-.62-.726-.981L.3 12l.35-.45.595-.806C1.969 9.776 2.8 8.73 3.774 7.76l.426-.41zM12 4c4.108 0 6.987 2.283 9.1 4.68l.364.425.35.423.334.421.476.62.726.981.35.45-.35.45-.595.806c-.724.968-1.555 2.014-2.529 2.983l-.426.411-1.05-1.05c1.1-1.05 2.1-2.3 3.05-3.6l-.578-.778-.39-.506-.397-.494C18.234 7.542 15.713 5.5 12 5.5c-.919 0-1.76.115-2.527.345l-.323.105L8 4.8c1.2-.5 2.5-.8 4-.8zm-4.35 6.85l5.5 5.5c-.35.1-.75.15-1.15.15-2.5 0-4.5-2-4.5-4.5 0-.32.032-.64.096-.934l.054-.216zM12 7.5c2.5 0 4.5 2 4.5 4.5 0 .32-.032.64-.096.934l-.054.216-5.5-5.5c.35-.1.75-.15 1.15-.15z", "fill-rule": "evenodd" })))))));
}
get hostElement() { return index.getElement(this); }
};
ActionHidePassword.style = iconCss$4;
const iconCss$3 = "scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";
const ActionSort = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** (optional) The width and height in pixels */
this.size = 24;
/** (optional) Sets the icon color via the `fill` attribute */
this.fill = 'currentColor';
/** (optional) Alias for `fill` */
this.color = 'currentColor';
/** (optional) If `true`, the icon changes visually */
this.selected = false;
/** (optional) If `true` the SVG element will get `aria-hidden="true"` */
this.decorative = false;
/** (optional) If `true` the icon can receive focus */
this.focusable = false;
}
connectedCallback() {
if (!this.hostElement.hasAttribute('styles')) {
this.hostElement.style.display = 'inline-flex';
}
}
render() {
const ariaHidden = this.decorative ? { 'aria-hidden': 'true' } : {};
const focusable = this.focusable ? { tabindex: 0 } : {};
return (index.h(index.Host, null, index.h("svg", Object.assign({ class: "scale-icon", xmlns: "http://www.w3.org/2000/svg", width: this.size, height: this.size, viewBox: "0 0 24 24" }, ariaHidden, focusable), this.accessibilityTitle && index.h("title", null, this.accessibilityTitle), index.h("g", { fill: ((this.fill === 'currentColor') ? this.color : this.fill) }, this.selected ? (index.h("g", null, index.h("path", { d: "M17.25 3.5c.647 0 1.18.492 1.244 1.122l.006.128V14h3.17l-4.42 6.75L12.83 14H16V4.75c0-.69.56-1.25 1.25-1.25zm-10.5-.25L11.17 10H8v9.25a1.25 1.25 0 01-2.494.128L5.5 19.25V10H2.33l4.42-6.75z", "fill-rule": "evenodd" }))) : (index.h("g", null, index.h("path", { d: "M17.25 4c.367 0 .691.294.743.651L18 4.75V14h3.65l-4.4 6.75-4.4-6.75h3.65V4.75c0-.4.35-.75.75-.75zm-10.5-.75l4.4 6.75H7.5v9.25c0 .4-.35.75-.75.75a.772.772 0 01-.743-.651L6 19.25V10H2.35l4.4-6.75z", "fill-rule": "evenodd" })))))));
}
get hostElement() { return index.getElement(this); }
};
ActionSort.style = iconCss$3;
const iconCss$2 = "scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";
const ContentSortIndicatorDown = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** (optional) The width and height in pixels */
this.size = 24;
/** (optional) Sets the icon color via the `fill` attribute */
this.fill = 'currentColor';
/** (optional) Alias for `fill` */
this.color = 'currentColor';
/** (optional) If `true`, the icon changes visually */
this.selected = false;
/** (optional) If `true` the SVG element will get `aria-hidden="true"` */
this.decorative = false;
/** (optional) If `true` the icon can receive focus */
this.focusable = false;
}
connectedCallback() {
if (!this.hostElement.hasAttribute('styles')) {
this.hostElement.style.display = 'inline-flex';
}
}
render() {
const ariaHidden = this.decorative ? { 'aria-hidden': 'true' } : {};
const focusable = this.focusable ? { tabindex: 0 } : {};
return (index.h(index.Host, null, index.h("svg", Object.assign({ class: "scale-icon", xmlns: "http://www.w3.org/2000/svg", width: this.size, height: this.size, viewBox: "0 0 24 24" }, ariaHidden, focusable), this.accessibilityTitle && index.h("title", null, this.accessibilityTitle), index.h("g", { fill: ((this.fill === 'currentColor') ? this.color : this.fill) }, this.selected ? (index.h("g", null, index.h("path", { d: "M6.584 9.5l5.417 5 5.416-5z", "fill-rule": "evenodd" }))) : (index.h("g", null, index.h("path", { d: "M6.584 9.5l5.417 5 5.416-5z", "fill-rule": "evenodd" })))))));
}
get hostElement() { return index.getElement(this); }
};
ContentSortIndicatorDown.style = iconCss$2;
const iconCss$1 = "scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";
const ContentSortIndicatorUp = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** (optional) The width and height in pixels */
this.size = 24;
/** (optional) Sets the icon color via the `fill` attribute */
this.fill = 'currentColor';
/** (optional) Alias for `fill` */
this.color = 'currentColor';
/** (optional) If `true`, the icon changes visually */
this.selected = false;
/** (optional) If `true` the SVG element will get `aria-hidden="true"` */
this.decorative = false;
/** (optional) If `true` the icon can receive focus */
this.focusable = false;
}
connectedCallback() {
if (!this.hostElement.hasAttribute('styles')) {
this.hostElement.style.display = 'inline-flex';
}
}
render() {
const ariaHidden = this.decorative ? { 'aria-hidden': 'true' } : {};
const focusable = this.focusable ? { tabindex: 0 } : {};
return (index.h(index.Host, null, index.h("svg", Object.assign({ class: "scale-icon", xmlns: "http://www.w3.org/2000/svg", width: this.size, height: this.size, viewBox: "0 0 24 24" }, ariaHidden, focusable), this.accessibilityTitle && index.h("title", null, this.accessibilityTitle), index.h("g", { fill: ((this.fill === 'currentColor') ? this.color : this.fill) }, this.selected ? (index.h("g", null, index.h("path", { d: "M12 9.5l-5.417 5h10.834z", "fill-rule": "evenodd" }))) : (index.h("g", null, index.h("path", { d: "M12 9.5l-5.417 5h10.834z", "fill-rule": "evenodd" })))))));
}
get hostElement() { return index.getElement(this); }
};
ContentSortIndicatorUp.style = iconCss$1;
const iconCss = "scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";
const ServiceSettings = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** (optional) The width and height in pixels */
this.size = 24;
/** (optional) Sets the icon color via the `fill` attribute */
this.fill = 'currentColor';
/** (optional) Alias for `fill` */
this.color = 'currentColor';
/** (optional) If `true`, the icon changes visually */
this.selected = false;
/** (optional) If `true` the SVG element will get `aria-hidden="true"` */
this.decorative = false;
/** (optional) If `true` the icon can receive focus */
this.focusable = false;
}
connectedCallback() {
if (!this.hostElement.hasAttribute('styles')) {
this.hostElement.style.display = 'inline-flex';
}
}
render() {
const ariaHidden = this.decorative ? { 'aria-hidden': 'true' } : {};
const focusable = this.focusable ? { tabindex: 0 } : {};
return (index.h(index.Host, null, index.h("svg", Object.assign({ class: "scale-icon", xmlns: "http://www.w3.org/2000/svg", width: this.size, height: this.size, viewBox: "0 0 24 24" }, ariaHidden, focusable), this.accessibilityTitle && index.h("title", null, this.accessibilityTitle), index.h("g", { fill: ((this.fill === 'currentColor') ? this.color : this.fill) }, this.selected ? (index.h("g", null, index.h("path", { d: "M20.235 14.5L23 14v-4l-2.765-.5a1 1 0 01-.64-1.555l1.595-2.31-2.825-2.825-2.31 1.595a1 1 0 01-1.555-.64L14 1h-4l-.5 2.76a1 1 0 01-1.555.645L5.635 2.81 2.81 5.635l1.595 2.31a1 1 0 01-.64 1.555L1 10v4l2.76.5a1 1 0 01.645 1.555l-1.595 2.31 2.825 2.825 2.31-1.595a1 1 0 011.555.64L10 23h4l.5-2.765a1 1 0 011.555-.64l2.31 1.595 2.825-2.825-1.595-2.31a1 1 0 01.64-1.555zM12 15a3 3 0 110-6 3 3 0 010 6z", "fill-rule": "evenodd" }))) : (index.h("g", null, index.h("path", { d: "M14 1l.5 2.75a.992.992 0 001.448.71l.102-.06 2.3-1.6 2.85 2.85-1.6 2.3c-.378.567-.087 1.312.537 1.52l.113.03L23 10v4l-2.75.5a.992.992 0 00-.71 1.448l.06.102 1.6 2.3-2.85 2.85-2.3-1.6c-.567-.378-1.312-.087-1.52.537l-.03.113L14 23h-4l-.5-2.75c-.142-.661-.863-1.01-1.448-.71l-.102.06-2.3 1.6-2.85-2.85 1.6-2.3c.378-.567.087-1.312-.537-1.52l-.113-.03L1 14v-4l2.75-.5a.992.992 0 00.71-1.448L4.4 7.95l-1.6-2.3L5.65 2.8l2.3 1.6c.567.378 1.312.087 1.52-.537l.03-.113L10 1h4zm-1.25 1.5h-1.5l-.3 1.5c-.2 1.2-1.25 2.05-2.45 2.05-.438 0-.875-.115-1.246-.345L5.8 4.7 4.75 5.75l.9 1.3c.464.65.584 1.472.318 2.227L5.9 9.45c-.279.743-.902 1.27-1.67 1.462l-.18.038-1.55.3v1.5l1.55.25c.85.15 1.5.7 1.85 1.5a2.426 2.426 0 01-.149 2.247l-.101.153-.9 1.3 1.05 1.05 1.3-.9c.4-.3.9-.45 1.4-.45 1.145 0 2.154.774 2.418 1.889l.332 1.711h1.5l.3-1.55c.2-1.2 1.25-2.05 2.45-2.05.438 0 .875.115 1.246.345L18.2 19.25l1.05-1.05-.9-1.3c-.5-.7-.55-1.6-.25-2.3.279-.743.902-1.27 1.67-1.462l.18-.038 1.55-.3v-1.5l-1.55-.3c-.85-.15-1.5-.7-1.85-1.5a2.426 2.426 0 01.149-2.247l.101-.153.9-1.3-1.05-1.05-1.3.9c-.4.3-.9.45-1.4.45-1.145 0-2.154-.774-2.418-1.889L12.75 2.5zM12 9a3 3 0 110 6 3 3 0 010-6z", "fill-rule": "evenodd" })))))));
}
get hostElement() { return index.getElement(this); }
};
ServiceSettings.style = iconCss;
const menuFlyoutItemCss = ":host{--focus-outline:var(--telekom-line-weight-highlight) solid\n var(--telekom-color-functional-focus-standard);display:block;position:relative;outline-color:transparent;padding-left:var(--telekom-spacing-composition-space-02);padding-right:var(--telekom-spacing-composition-space-02);--_min-width:fit-content;--_min-width-moz:-moz-fit-content}*{-webkit-tap-highlight-color:rgba(255, 255, 255, 0)}.menu-flyout-item{position:relative;display:flex;align-items:stretch;text-align:left;font-size:var(--telekom-typography-font-size-body);line-height:2.635em;padding:0\n calc(\n var(--telekom-spacing-composition-space-08) -\n var(--telekom-spacing-composition-space-02)\n );user-select:none;white-space:nowrap;border-radius:0;cursor:pointer;color:var(--telekom-color-text-and-icon-standard);max-width:calc(\n 100vw - 2 * var(--telekom-spacing-composition-space-08) - 2 * 10px\n );overflow:hidden;min-width:var(--_min-width-moz);min-width:var(--_min-width)}.menu-flyout-item:focus:not(.menu-flyout-item--disabled),.menu-flyout-item:hover:not(.menu-flyout-item--disabled){color:var(--telekom-color-text-and-icon-primary-hovered)}:host(:focus) .menu-flyout-item:not(.menu-flyout-item--disabled){color:var(--telekom-color-text-and-icon-standard)}:host(:focus) .menu-flyout-item:hover:not(.menu-flyout-item--disabled){color:var(--telekom-color-text-and-icon-primary-hovered)}:host(:focus){outline:none}:host(:focus) .menu-flyout-item{outline:var(--focus-outline);border-radius:var(--telekom-radius-small)}:host(:active) .menu-flyout-item:not(.menu-flyout-item--disabled){color:var(--telekom-color-text-and-icon-primary-pressed)}:host([aria-expanded='true']) .menu-flyout-item{color:var(--telekom-color-text-and-icon-primary-standard)}.menu-flyout-item--disabled{outline:none;color:var(--telekom-color-text-and-icon-disabled);cursor:not-allowed}:host([active])::before{content:'';display:block;position:absolute;top:0;left:0;height:100%;width:0;background-color:var(--telekom-color-primary-standard);border-left:var(--telekom-spacing-composition-space-02) solid transparent}.menu-flyout-item--active{color:var(--telekom-color-text-and-icon-primary-standard)}@media screen and (forced-colors: active), (-ms-high-contrast: active){.menu-flyout-item--disabled:not(.menu-flyout-item--disabled),.menu-flyout-item--active:not(.menu-flyout-item--disabled){color:white;stroke:white}}.menu-flyout-item__label{flex:1 1 0;overflow:hidden;text-overflow:ellipsis}.menu-flyout-item__prefix{flex:0 0 auto;display:flex;align-items:center}.menu-flyout-item__check,slot[name='prefix']::slotted(:last-of-type){margin-right:var(--telekom-spacing-composition-space-04)}.menu-flyout-item__check{visibility:hidden}:host([aria-checked='true']) .menu-flyout-item__check{visibility:visible}.menu-flyout-item__suffix{flex:0 0 auto;display:flex;align-items:center}.menu-flyout-item__cascade,slot[name='suffix']::slotted(:first-of-type){margin-left:var(--telekom-spacing-composition-space-06)}";
const MenuFlyoutItem = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.scaleSelect = index.createEvent(this, "scale-select", 7);
this.scaleSelectLegacy = index.createEvent(this, "scaleSelect", 7);
/** (optional) Set to true to display arrow icon suffix */
this.cascade = false; // TODO rename to `hasMenu`?
/** (optional) Mark as active */
this.active = false;
/** (optional) Set to true to display check prefix, false to display empty prefix */
this.checked = false;
/** (optional) Disabled */
this.disabled = false;
this.hasSlotSublist = false;
}
// TODO there is lot of room for improving this, aka edge-cases
async triggerEvent(event, closeOnSelect = true) {
const { key } = event;
if (this.disabled) {
return;
}
if (key === 'ArrowRight' && !this.hasSlotSublist) {
return;
}
if (this.hasSlotSublist) {
const sublist = this.hostElement.querySelector('[slot="sublist"]');
if (sublist.hasAttribute('opened')) {
sublist.removeAttribute('opened');
}
else {
this.openSublist();
}
return;
}
const detail = {
eventType: event.type,
key,
item: this.hostElement,
closeOnSelect,
originalEvent: event,
};
utils.emitEvent(this, 'scaleSelect', detail);
}
connectedCallback() {
this.hasSlotSublist =
this.hostElement.querySelector('[slot="sublist"]') != null;
if (this.hasSlotSublist) {
this.cascade = true;
}
}
openSublist() {
const sublist = this.hostElement.querySelector('[slot="sublist"]');
if (sublist == null) {
return;
}
sublist.trigger = () => this.hostElement;
sublist.direction = 'right';
sublist.open();
}
getCssClassMap() {
return index$1.classnames('menu-flyout-item', this.disabled && 'menu-flyout-item--disabled', this.checkable != null && 'menu-flyout-item--checkable', this.active && 'menu-flyout-item--active');
}
render() {
const checked = this.checked ? 'true' : 'false';
return (index.h(index.Host, { role: this.checkable ? `menuitem${this.checkable}` : 'menuitem', "aria-checked": this.checkable == null ? false : checked, "aria-disabled": this.disabled ? 'true' : undefined, tabindex: "-1" }, this.styles && index.h("style", null, this.styles), index.h("div", { class: this.getCssClassMap(), part: "base" }, index.h("span", { part: "prefix", class: "menu-flyout-item__prefix" }, this.checkable == null ? (index.h("slot", { name: "prefix" })) : (index.h("scale-icon-action-checkmark", { class: "menu-flyout-item__check", size: 16 }))), index.h("span", { part: "label", class: "menu-flyout-item__label" }, index.h("slot", null)), index.h("span", { part: "suffix", class: "menu-flyout-item__suffix" }, this.cascade ? (index.h("scale-icon-navigation-right", { class: "menu-flyout-item__cascade", size: 16 })) : (index.h("slot", { name: "suffix" })))), index.h("slot", { name: "sublist" })));
}
get hostElement() { return index.getElement(this); }
};
MenuFlyoutItem.style = menuFlyoutItemCss;
const paginationCss = ":host{--color:var(--telekom-color-text-and-icon-standard);--radius:var(--telekom-radius-standard);--font-size:var(--telekom-typography-font-size-small);--border:1px solid var(--telekom-color-ui-faint);--color-hover:var(--telekom-color-text-and-icon-primary-hovered);--color-active:var(--telekom-color-text-and-icon-primary-pressed);--color-button:var(--telekom-color-ui-subtle);--border-button:var(--border);--focus-outline:var(--telekom-line-weight-highlight) solid\n var(--telekom-color-functional-focus-standard);--radius-first-prompt:var(--radius) 0 0 var(--radius);--radius-last-prompt:0 var(--radius) var(--radius) 0;--radius-first-prompt-stack:0 0 0 var(--radius);--radius-last-prompt-stack:0 0 var(--radius) 0;--stroke-svg:var(--telekom-color-ui-extra-strong);--stroke-svg-high-contrast:#fff;--width-button:44px;--padding-info:var(--telekom-spacing-composition-space-04);--height-button:44px;--line-height-info:calc(var(--height-button) - 2px)}.pagination{display:flex;overflow:auto;flex-wrap:wrap}.pagination__info,.pagination__info-responsive{color:var(--color);text-align:center;font-size:var(--font-size);font-weight:var(--telekom-typography-font-weight-medium);line-height:var(--line-height-info);padding:0 var(--padding-info);border:var(--border);flex-shrink:0;border-left:0;border-right:0;white-space:nowrap;order:1}.pagination__info-responsive{display:none}.pagination__info span,.pagination__info-responsive span{color:var(--telekom-color-text-and-icon-primary-standard);font-weight:var(--telekom-typography-font-weight-bold)}button{display:flex;flex-shrink:0;justify-content:center;align-items:center;padding:0;margin:0;height:var(--height-button);width:var(--width-button);color:var(--color-button);background:none;border:var(--border-button)}button:focus{outline:var(--focus-outline);outline-offset:-3px}.pagination__first-prompt{border-radius:var(--radius-first-prompt);margin-right:-1px}.pagination__last-prompt{border-radius:var(--radius-last-prompt);margin-left:-1px;order:2}.pagination__next-prompt{order:2}button svg{display:block}button:not(:disabled){cursor:pointer}button:not(:disabled) svg{color:var(--stroke-svg)}button:disabled svg{color:var(--telekom-color-text-and-icon-disabled)}button:not(:disabled):hover{border-color:var(--telekom-color-primary-hovered);z-index:1}button:not(:disabled):hover svg{color:var(--color-hover)}button:not(:disabled):active{border-color:var(--color-active);z-index:1}button:not(:disabled):active svg{color:var(--color-active)}.pagination--hide-borders .pagination__info,.pagination--hide-borders .pagination__info-responsive{border:0}.pagination--hide-borders .pagination__info-responsive{border-bottom:var(--border)}.pagination--hide-borders button{border-radius:0;border-top-width:0;border-bottom-width:0}.pagination--hide-borders .pagination__first-prompt{border-left-color:transparent}.pagination--hide-borders .pagination__last-prompt{border-right-color:transparent}.pagination--hide-borders button:not(:disabled):hover{border-width:1px;border-color:var(--telekom-color-primary-hovered)}.pagination__button-wrapper{display:flex}@media screen and (forced-colors: active), (-ms-high-contrast: active){button:not(:disabled) svg{color:var(--stroke-svg-high-contrast)}}@media screen and (max-width: 639px){:host{width:100%}.pagination{flex-direction:column}.pagination__info-responsive{display:initial;order:0;overflow:auto;border-left:var(--border);border-right:var(--border);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;line-height:var(--line-height-info)}.pagination__info{display:none;line-height:var(--line-height-info)}.pagination__first-prompt{border-radius:var(--radius-first-prompt-stack)}.pagination__last-prompt{border-radius:var(--radius-last-prompt-stack)}.pagination__next-prompt{margin-left:-1px}button{flex:1;height:var(--height-button)}.pagination--hide-borders .pagination__first-prompt{border-left-width:0}.pagination--hide-borders .pagination__last-prompt{border-right-width:0}}";
const DEFAULT_ICON_SIZE = 20;
const name = 'pagination';
const Pagination = class {
/* 6. Lifecycle Events (call order) */
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.scalePagination = index.createEvent(this, "scale-pagination", 7);
this.scalePaginationLegacy = index.createEvent(this, "scalePagination", 7);
/* 2. State Variables (alphabetical) */
/* 3. Public Properties (alphabetical) */
/** (optional) Deprecated; hideBorder should replace hideBorders */
this.hideBorders = false;
/** (optional) Set to true to hide top and bottom borders */
this.hideBorder = false;
/** (optional) Set number of rows/elements to show per page */
this.pageSize = 10;
/** (optional) Index of first element to display */
this.startElement = 0;
/** (optional) Total number of rows/elements used to calculate page displays */
this.totalElements = 1;
/** @deprecated - size should replace small */
this.small = false;
/** (optional) translation to 'Go to first page' */
this.ariaLabelFirstPage = 'Go to first page';
/** (optional) translation to 'Go to next page' */
this.ariaLabelNextPage = 'Go to next page';
/** (optional) translation to 'Go to previous page' */
this.ariaLabelPreviousPage = 'Go to previous page';
/** (optional) translation to 'Go to last page' */
this.ariaLabelLastPage = 'Go to last page';
/* 5. Private Properties (alphabetical) */
/** Calculated width of largest text so buttons don't move while changing pages */
this.maxWidth = 100;
}
componentWillLoad() {
this.calculateWidth();
}
componentWillUpdate() { }
componentDidRender() {
if (this.hideBorders !== false) {
statusNote.statusNote({
tag: 'deprecated',
message: 'Property "hideBorders" is deprecated. Please use the "hideBorder" property!',
type: 'warn',
source: this.hostElement,
});
}
if (this.small !== false) {
statusNote.statusNote({
tag: 'deprecated',
message: 'Property "small" is deprecated. Please use css overwrite!',
type: 'warn',
source: this.hostElement,
});
}
if (this.size) {
statusNote.statusNote({
tag: 'deprecated',
message: 'Property "size" is deprecated. Please use css overwrite!',
type: 'warn',
source: this.hostElement,
});
}
}
componentDidLoad() { }
componentDidUpdate() { }
disconnectedCallback() { }
/* 7. Listeners */
calculateWidth() {
// calculate max possible width
this.maxWidth = (this.totalElements.toString().length * 3 + 3) * 9;
}
/* 8. Public Methods */
/* 9. Local Methods */
goFirstPage() {
this.startElement = 0;
this.emitUpdate('FIRST');
}
goPreviousPage() {
// Min to prevent going below 0
this.startElement -= Math.min(this.pageSize, this.startElement);
this.emitUpdate('PREVIOUS');
}
goNextPage() {
this.startElement += this.pageSize;
this.emitUpdate('NEXT');
}
goLastPage() {
const p = this.pageSize;
// Make sure startElement is multiple of pageSize
this.startElement = Math.ceil((this.totalElements - p) / p) * p;
this.emitUpdate('LAST');
}
emitUpdate(direction) {
const data = {
startElement: this.startElement,
direction,
};
utils.emitEvent(this, 'scalePagination', data);
}
/* 10. Render */
render() {
const total = this.totalElements;
const start = this.startElement + 1;
const end = Math.min(this.startElement + this.pageSize, total);
const isAtStart = start === 1;
const isAtEnd = end === total;
return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h("div", { part: this.getBasePartMap(), class: this.getCssClassMap() }, index.h("div", { part: "info-responsive", class: `${name}__info-responsive` }, index.h("span", null, start, "-", end), ' ', "/ ", total), index.h("div", { class: `${name}__button-wrapper` }, index.h("div", { part: "info", class: `${name}__info`, style: { width: `${this.maxWidth}px` } }, index.h("span", null, start, "-", end), ' ', "/ ", total), index.h("button", { class: `${name}__first-prompt`, part: "first-prompt", disabled: isAtStart, onClick: () => this.goFirstPage(), "aria-label": this.ariaLabelFirstPage }, index.h("scale-icon-navigation-double-left", { size: DEFAULT_ICON_SIZE, decorative: true })), index.h("button", { class: `${name}__prev-prompt`, part: "prev-prompt", disabled: isAtStart, onClick: () => this.goPreviousPage(), "aria-label": this.ariaLabelPreviousPage }, index.h("scale-icon-navigation-left", { size: DEFAULT_ICON_SIZE, decorative: true })), index.h("button", { class: `${name}__next-prompt`, part: "next-prompt", disabled: isAtEnd, onClick: () => this.goNextPage(), "aria-label": this.ariaLabelNextPage }, index.h("scale-icon-navigation-right", { size: DEFAULT_ICON_SIZE, decorative: true })), index.h("button", { class: `${name}__last-prompt`, part: "last-prompt", disabled: isAtEnd, onClick: () => this.goLastPage(), "aria-label": this.ariaLabelLastPage }, index.h("scale-icon-navigation-double-right", { size: DEFAULT_ICON_SIZE, decorative: true }))))));
}
getBasePartMap() {
return this.getCssOrBasePartMap('basePart');
}
getCssClassMap() {
return this.getCssOrBasePartMap('css');
}
getCssOrBasePartMap(mode) {
const prefix = mode === 'basePart' ? '' : `${name}--`;
return index$1.classnames(name, (this.hideBorder || this.hideBorders) && `${prefix}hide-borders`);
}
get hostElement() { return index.getEl