@baloise/ds-core 16.0.3 → 16.1.0-nightly.20240418

package/components/bal-content.js

@@ -6,7 +6,7 @@ import { L as Logger } from './log.js';
 const balContentCss = ".bal-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;text-align:left;gap:.25rem}.bal-content--align-center{-ms-flex-align:center;align-items:center;text-align:center}.bal-content--align-end{-ms-flex-align:end;align-items:flex-end;text-align:right}.bal-content--layout-horizontal{-ms-flex-direction:row;flex-direction:row}.bal-content--layout-vertical{-ms-flex-direction:column;flex-direction:column}.bal-content--space-xx-small{gap:.25rem}.bal-content--space-x-small{gap:.5rem}.bal-content--space-small{gap:.75rem}.bal-content--space-normal{gap:1rem}.bal-content>.bal-text{margin:0}";
 const BalContentStyle0 = balContentCss;
 
-const BalContent$1 = /*@__PURE__*/ proxyCustomElement(class BalContent extends HTMLElement {
+const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -53,7 +53,7 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], BalContent$1.prototype, "createLogger", null);
+], Content.prototype, "createLogger", null);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
@@ -62,13 +62,13 @@ function defineCustomElement$1() {
     components.forEach(tagName => { switch (tagName) {
         case "bal-content":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, BalContent$1);
+                customElements.define(tagName, Content);
             }
             break;
     } });
 }
 
-const BalContent = BalContent$1;
+const BalContent = Content;
 const defineCustomElement = defineCustomElement$1;
 
 export { BalContent, defineCustomElement };

package/components/bal-date-calendar-cell.js

@@ -1,6 +1,6 @@
-import { D as DateCalendar, d as defineCustomElement$1 } from './bal-date-calendar-cell2.js';
+import { D as DateCalendarCell, d as defineCustomElement$1 } from './bal-date-calendar-cell2.js';
 
-const BalDateCalendarCell = DateCalendar;
+const BalDateCalendarCell = DateCalendarCell;
 const defineCustomElement = defineCustomElement$1;
 
 export { BalDateCalendarCell, defineCustomElement };

package/components/bal-date-calendar-cell2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { s as stopEventBubbling } from './form-input.js';
 import { B as BEM } from './bem.js';
 
-const DateCalendar = /*@__PURE__*/ proxyCustomElement(class DateCalendar extends HTMLElement {
+const DateCalendarCell = /*@__PURE__*/ proxyCustomElement(class DateCalendarCell extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -54,10 +54,10 @@ function defineCustomElement() {
     components.forEach(tagName => { switch (tagName) {
         case "bal-date-calendar-cell":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, DateCalendar);
+                customElements.define(tagName, DateCalendarCell);
             }
             break;
     } });
 }
 
-export { DateCalendar as D, defineCustomElement as d };
+export { DateCalendarCell as D, defineCustomElement as d };

package/components/bal-date-calendar2.js

@@ -160,7 +160,7 @@ const CalendarList = ({ name, isVisible, girdHeight, list, onSelect, ref, }) =>
     const blockBodyList = blockBody.element('list');
     return (h("ul", { class: Object.assign(Object.assign(Object.assign({}, blockBodyList.class()), blockBodyList.modifier(name).class()), blockBodyList.modifier('visible').class(isVisible)), "aria-hidden": isVisible ? 'false' : 'true', style: {
             height: `${girdHeight - 2 - 8 - 8}px`,
-        }, ref: el => (ref ? ref(el) : undefined) }, list.map(item => (h("li", { id: `${name}-${item.value}` },
+        }, ref: el => (ref ? ref(el) : undefined) }, list.map(item => (h("li", { key: item.value, id: `${name}-${item.value}` },
         h("button", { class: Object.assign(Object.assign(Object.assign(Object.assign({}, blockBodyList.element('item').class()), blockBodyList.element('item').modifier('today').class(item.today)), blockBodyList.element('item').modifier('selected').class(item.selected)), blockBodyList.element('item').modifier('disabled').class(item.disabled)), disabled: item.disabled, tabIndex: -1, onClick: () => {
                 if (!item.disabled) {
                     onSelect(item);
@@ -173,8 +173,8 @@ const CalendarGrid = ({ isVisible, ref, grid, weekdays, selectedDate, firstDayOf
     const blockBody = block.element('body');
     const blockBodyGrid = blockBody.element('grid');
     return (h("div", { role: "grid", class: Object.assign(Object.assign({}, blockBodyGrid.class()), blockBodyGrid.modifier('visible').class(isVisible)), "aria-hidden": isVisible ? 'false' : 'true', ref: el => ref(el) },
-        h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('head').class()) }, weekdays.map(weekday => (h("span", { role: "columnheader", "aria-label": weekday.ariaLabel, title: weekday.ariaLabel }, weekday.textContent)))),
-        h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('body').class()), style: { '--bal-date-first-week-day': `${firstDayOfWeek}` } }, grid.map(cell => (h("bal-date-calendar-cell", Object.assign({}, cell, { selected: cell.isoDate === selectedDate, onBalSelectDay: ({ detail }) => onSelectDay(detail) })))))));
+        h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('head').class()) }, weekdays.map(weekday => (h("span", { key: weekday.textContent, role: "columnheader", "aria-label": weekday.ariaLabel, title: weekday.ariaLabel }, weekday.textContent)))),
+        h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('body').class()), style: { '--bal-date-first-week-day': `${firstDayOfWeek}` } }, grid.map(cell => (h("bal-date-calendar-cell", Object.assign({ key: cell.isoDate }, cell, { selected: cell.isoDate === selectedDate, onBalSelectDay: ({ detail }) => onSelectDay(detail) })))))));
 };
 
 const CalendarNav = ({ language, onClickSelectMonthAndYear, monthFullNames, month, year, isCalendarVisible, isListVisible, onClickPreviousMonth, onClickNextMonth, }) => {

package/components/bal-datepicker.js

@@ -953,20 +953,20 @@ const Datepicker = /*@__PURE__*/ proxyCustomElement(class Datepicker extends HTM
         const block = BEM.block('datepicker-grid');
         const rowEl = block.element('row');
         const cellEl = block.element('cell');
-        return (h("div", null, this.renderWeekDayHeader(), h("div", { class: Object.assign({}, block.class()) }, this.calendarGrid.map(row => (h("div", { class: Object.assign({}, rowEl.class()) }, row.map(cell => (h("button", { type: "button", "data-date": cell.dateString, onClick: () => this.onClickDateCell(cell), disabled: cell.isDisabled, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cellEl.class()), { 'button': true, 'is-text': !cell.isDisabled && !cell.isSelected, 'is-primary': cell.isSelected && cell.isSelected, 'is-disabled': cell.isDisabled || cell.isOutdated }), cellEl.modifier('today').class(cell.isToday)), cellEl.modifier('selectable').class(!cell.isDisabled && !cell.isOutdated)), cellEl.modifier('disabled').class(cell.isDisabled || cell.isOutdated)), cellEl.modifier('outdated').class(cell.isOutdated)), cellEl.modifier('selected').class(cell.isSelected)) }, h("span", null, cell.label))))))))));
+        return (h("div", null, this.renderWeekDayHeader(), h("div", { class: Object.assign({}, block.class()) }, this.calendarGrid.map((row, index) => (h("div", { key: index, class: Object.assign({}, rowEl.class()) }, row.map(cell => (h("button", { key: cell.dateString, type: "button", "data-date": cell.dateString, onClick: () => this.onClickDateCell(cell), disabled: cell.isDisabled, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cellEl.class()), { 'button': true, 'is-text': !cell.isDisabled && !cell.isSelected, 'is-primary': cell.isSelected && cell.isSelected, 'is-disabled': cell.isDisabled || cell.isOutdated }), cellEl.modifier('today').class(cell.isToday)), cellEl.modifier('selectable').class(!cell.isDisabled && !cell.isOutdated)), cellEl.modifier('disabled').class(cell.isDisabled || cell.isOutdated)), cellEl.modifier('outdated').class(cell.isOutdated)), cellEl.modifier('selected').class(cell.isSelected)) }, h("span", null, cell.label))))))))));
     }
     renderWeekDayHeader() {
         const block = BEM.block('datepicker-grid');
         const headerEl = block.element('header');
         const cellEl = block.element('cell');
-        return (h("header", { class: Object.assign({}, headerEl.class()) }, this.weekDays.map(weekday => (h("div", { class: Object.assign(Object.assign({}, cellEl.class()), cellEl.modifier('header').class()) }, h("span", null, weekday))))));
+        return (h("header", { class: Object.assign({}, headerEl.class()) }, this.weekDays.map(weekday => (h("div", { key: weekday, class: Object.assign(Object.assign({}, cellEl.class()), cellEl.modifier('header').class()) }, h("span", null, weekday))))));
     }
     renderHeader() {
         const block = BEM.block('datepicker-pagination');
         const innerEl = block.element('inner');
         const monthAndYearEl = block.element('month-and-year');
         const selectEl = monthAndYearEl.element('select');
-        return (h("header", { class: Object.assign({}, block.class()) }, h("div", { class: Object.assign({}, innerEl.class()) }, h("bal-button", { square: true, size: this.isMobile ? 'small' : '', color: "info", icon: "nav-go-left", disabled: this.isPreviousMonthDisabled, onClick: () => this.previousMonth() }), h("div", { class: Object.assign({}, monthAndYearEl.class()) }, h("div", { class: Object.assign(Object.assign({}, selectEl.class()), selectEl.modifier('month').class()) }, h("div", { class: "select" }, h("select", { onInput: this.onMonthSelect }, this.months.map(month => (h("option", { value: month.index, selected: this.pointerDate.month === month.index }, month.name)))))), h("div", { class: Object.assign(Object.assign({}, selectEl.class()), selectEl.modifier('year').class()) }, h("div", { class: "select" }, h("select", { onInput: this.onYearSelect }, this.years.map(year => (h("option", { value: year, selected: this.pointerDate.year === year }, year))))))), h("bal-button", { square: true, size: this.isMobile ? 'small' : '', color: "info", icon: "nav-go-right", disabled: this.isNextMonthDisabled, onClick: () => this.nextMonth() }))));
+        return (h("header", { class: Object.assign({}, block.class()) }, h("div", { class: Object.assign({}, innerEl.class()) }, h("bal-button", { square: true, size: this.isMobile ? 'small' : '', color: "info", icon: "nav-go-left", disabled: this.isPreviousMonthDisabled, onClick: () => this.previousMonth() }), h("div", { class: Object.assign({}, monthAndYearEl.class()) }, h("div", { class: Object.assign(Object.assign({}, selectEl.class()), selectEl.modifier('month').class()) }, h("div", { class: "select" }, h("select", { onInput: this.onMonthSelect }, this.months.map(month => (h("option", { key: month.index, value: month.index, selected: this.pointerDate.month === month.index }, month.name)))))), h("div", { class: Object.assign(Object.assign({}, selectEl.class()), selectEl.modifier('year').class()) }, h("div", { class: "select" }, h("select", { onInput: this.onYearSelect }, this.years.map(year => (h("option", { key: year, value: year, selected: this.pointerDate.year === year }, year))))))), h("bal-button", { square: true, size: this.isMobile ? 'small' : '', color: "info", icon: "nav-go-right", disabled: this.isNextMonthDisabled, onClick: () => this.nextMonth() }))));
     }
     previousMonth() {
         if (!this.isPreviousMonthDisabled) {

package/components/bal-divider.js

@@ -6,7 +6,7 @@ import { L as Logger } from './log.js';
 const balDividerCss = ":root{--bal-divider-border-width:var(--bal-border-width-normal);--bal-divider-background-primary:var(--bal-color-border-primary);--bal-divider-background-primary-light:var(--bal-color-border-primary-light);--bal-divider-background-primary-dark:var(--bal-color-border-primary-pressed);--bal-divider-background-grey-light:var(--bal-color-border-divider);--bal-divider-background-grey:var(--bal-color-border);--bal-divider-background-grey-dark:var(--bal-color-border-grey-dark);--bal-divider-background-warning:var(--bal-color-border-warning);--bal-divider-background-success:var(--bal-color-border-success);--bal-divider-background-danger:var(--bal-color-border-danger);--bal-divider-background-danger-dark:var(--bal-color-border-danger-hovered);--bal-divider-background-danger-darker:var(--bal-color-border-danger-pressed);--bal-divider-background-white:var(--bal-color-border-inverted);--bal-divider-background-light-blue:var(--bal-color-border-primary-hovered);--bal-divider-radius:var(--bal-radius-rounded)}.bal-divider{margin:0;display:block;border-radius:var(--bal-divider-radius)}.bal-divider--color-primary{background:var(--bal-divider-background-primary)}.bal-divider--color-primary-light{background:var(--bal-divider-background-primary-light)}.bal-divider--color-primary-dark{background:var(--bal-divider-background-primary-dark)}.bal-divider--color-grey-light{background:var(--bal-divider-background-grey-light)}.bal-divider--color-grey{background:var(--bal-divider-background-grey)}.bal-divider--color-grey-dark{background:var(--bal-divider-background-grey-dark)}.bal-divider--color-warning{background:var(--bal-divider-background-warning)}.bal-divider--color-success{background:var(--bal-divider-background-success)}.bal-divider--color-danger{background:var(--bal-divider-background-danger)}.bal-divider--color-danger-dark{background:var(--bal-divider-background-danger-dark)}.bal-divider--color-danger-darker{background:var(--bal-divider-background-danger-darker)}.bal-divider--color-white{background:var(--bal-divider-background-white)}.bal-divider--color-light-blue{background:var(--bal-divider-background-light-blue)}.bal-divider--layout-horizontal{-ms-flex:1 0 100%;flex:1 0 100%;width:100%;min-height:var(--bal-divider-border-width);height:var(--bal-divider-border-width)}.bal-divider--layout-vertical{height:auto;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:stretch;align-self:stretch;width:var(--bal-divider-border-width)}.bal-divider--space-none{margin:0}.bal-divider--space-xx-small{margin:var(--bal-space-xx-small) 0}@media screen and (min-width: 769px),print{.bal-divider--space-xx-small{margin:var(--bal-space-xx-small-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-xx-small{margin:var(--bal-space-xx-small-desktop) 0}}.bal-divider--space-x-small{margin:var(--bal-space-x-small) 0}@media screen and (min-width: 769px),print{.bal-divider--space-x-small{margin:var(--bal-space-x-small-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-x-small{margin:var(--bal-space-x-small-desktop) 0}}.bal-divider--space-small{margin:var(--bal-space-small) 0}@media screen and (min-width: 769px),print{.bal-divider--space-small{margin:var(--bal-space-small-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-small{margin:var(--bal-space-small-desktop) 0}}.bal-divider--space-normal{margin:var(--bal-space-normal) 0}@media screen and (min-width: 769px),print{.bal-divider--space-normal{margin:var(--bal-space-normal-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-normal{margin:var(--bal-space-normal-desktop) 0}}.bal-divider--space-medium{margin:var(--bal-space-medium) 0}@media screen and (min-width: 769px),print{.bal-divider--space-medium{margin:var(--bal-space-medium-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-medium{margin:var(--bal-space-medium-desktop) 0}}.bal-divider--space-large{margin:var(--bal-space-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-large{margin:var(--bal-space-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-large{margin:var(--bal-space-large-desktop) 0}}.bal-divider--space-x-large{margin:var(--bal-space-x-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-x-large{margin:var(--bal-space-x-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-x-large{margin:var(--bal-space-x-large-desktop) 0}}.bal-divider--space-xx-large{margin:var(--bal-space-xx-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-xx-large{margin:var(--bal-space-xx-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-xx-large{margin:var(--bal-space-xx-large-desktop) 0}}.bal-divider--space-xxx-large{margin:var(--bal-space-xxx-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-xxx-large{margin:var(--bal-space-xxx-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-xxx-large{margin:var(--bal-space-xxx-large-desktop) 0}}.bal-divider--layout-vertical.bal-divider--space-none{margin:0}.bal-divider--layout-vertical.bal-divider--space-xx-small{margin:0 var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-xx-small{margin:0 var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-xx-small{margin:0 var(--bal-space-xx-small-desktop)}}.bal-divider--layout-vertical.bal-divider--space-x-small{margin:0 var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-x-small{margin:0 var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-x-small{margin:0 var(--bal-space-x-small-desktop)}}.bal-divider--layout-vertical.bal-divider--space-small{margin:0 var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-small{margin:0 var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-small{margin:0 var(--bal-space-small-desktop)}}.bal-divider--layout-vertical.bal-divider--space-normal{margin:0 var(--bal-space-normal)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-normal{margin:0 var(--bal-space-normal-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-normal{margin:0 var(--bal-space-normal-desktop)}}.bal-divider--layout-vertical.bal-divider--space-medium{margin:0 var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-medium{margin:0 var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-medium{margin:0 var(--bal-space-medium-desktop)}}.bal-divider--layout-vertical.bal-divider--space-large{margin:0 var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-large{margin:0 var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-large{margin:0 var(--bal-space-large-desktop)}}.bal-divider--layout-vertical.bal-divider--space-x-large{margin:0 var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-x-large{margin:0 var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-x-large{margin:0 var(--bal-space-x-large-desktop)}}.bal-divider--layout-vertical.bal-divider--space-xx-large{margin:0 var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-xx-large{margin:0 var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-xx-large{margin:0 var(--bal-space-xx-large-desktop)}}.bal-divider--layout-vertical.bal-divider--space-xxx-large{margin:0 var(--bal-space-xxx-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-xxx-large{margin:0 var(--bal-space-xxx-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-xxx-large{margin:0 var(--bal-space-xxx-large-desktop)}}";
 const BalDividerStyle0 = balDividerCss;
 
-const BalDivider$1 = /*@__PURE__*/ proxyCustomElement(class BalDivider extends HTMLElement {
+const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -39,7 +39,7 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], BalDivider$1.prototype, "createLogger", null);
+], Divider.prototype, "createLogger", null);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
@@ -48,13 +48,13 @@ function defineCustomElement$1() {
     components.forEach(tagName => { switch (tagName) {
         case "bal-divider":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, BalDivider$1);
+                customElements.define(tagName, Divider);
             }
             break;
     } });
 }
 
-const BalDivider = BalDivider$1;
+const BalDivider = Divider;
 const defineCustomElement = defineCustomElement$1;
 
 export { BalDivider, defineCustomElement };

package/components/bal-doc-app.d.ts

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