@baloise/ds-core 19.3.0 → 19.4.0

package/dist/esm/bal-hint_5.entry.js

@@ -1,38 +1,36 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-8d2a7ce7.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { B as BEM } from './bem-8c7d2eb0.js';
-import { p as preventDefault } from './utils-9fbab1d3.js';
-import { B as BalScrollHandler } from './scroll-521224a9.js';
-import { b as balBreakpoints } from './breakpoints.subject-2f68e834.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-4de4315f.js';
-import { L as ListenToConfig } from './config.decorator-6795d1fe.js';
-import { b as isEnterKey, d as isSpaceKey } from './keyboard.helpers-159e517d.js';
-import { b as balBrowser } from './browser-a8073d92.js';
-import { L as Logger } from './log-dfd1c19f.js';
-import './index-82aff103.js';
-import './helpers-51d51cc5.js';
-import './config.utils-f3793464.js';
-import './device-8c6d2881.js';
-import './listener-04842ae9.js';
-import './tokens.esm-4409ffbb.js';
-
-const balHintCss = "@media (hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-hint-content-background:var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle{fill:var(--bal-color-light-blue-5)}.bal-hint .bal-popup__container{z-index:var(--bal-z-index-popup);background:var(--bal-hint-content-background);width:auto;max-width:30rem;min-width:16.25rem}.bal-hint__content{background:var(--bal-hint-content-background);display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{-ms-flex:1;flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}";
-const BalHintStyle0 = balHintCss;
+import { H as registerInstance, M as h, N as Host, O as getElement, L as Logger, P as createEvent, a as balBrowser } from './index-pkPHUz5e.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
+import { L as ListenToConfig } from './config.decorator-T4wBa62Z.js';
+import { B as BEM } from './bem-ByiN-QjD.js';
+import { p as preventDefault } from './utils-C_qktPg7.js';
+import { B as BalScrollHandler } from './scroll-CGUsHi6i.js';
+import { b as balBreakpoints } from './breakpoints.subject-C7fjILif.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-SHkWCW_Y.js';
+import { b as isEnterKey, d as isSpaceKey } from './keyboard.helpers-D1VPLQ5z.js';
+import './index-zWZxKBfo.js';
+import './_commonjsHelpers-BFTU3MAI.js';
+import './device-ClkcmLoi.js';
+import './listener-tzACU3qe.js';
+import './tokens.esm-BvmIi0Pf.js';
+
+const balHintCss = "@media (hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-hint-content-background:var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle{fill:var(--bal-color-light-blue-5)}.bal-hint .bal-popup__container{z-index:var(--bal-z-index-popup);background:var(--bal-hint-content-background)}.bal-hint__content{background:var(--bal-hint-content-background);width:auto;max-width:30rem;min-width:16.25rem;display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{-ms-flex:1;flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}";
 
 const Hint = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.bodyScrollHandler = new BalScrollHandler();
         this.componentId = `bal-hint-${hintIds++}`;
-        this.onPopupChange = (ev) => {
-            this.isActive = ev.detail;
-            preventDefault(ev);
-        };
         this.isActive = false;
         this.innerCloseLabel = 'Close';
         this.isMobile = balBreakpoints.isMobile;
-        this.closeLabel = undefined;
+        /**
+         * Disables the close button for tablet and desktop
+         */
         this.small = false;
+        this.onPopupChange = (ev) => {
+            this.isActive = ev.detail;
+            preventDefault(ev);
+        };
     }
     connectedCallback() {
         this.bodyScrollHandler.connect();
@@ -150,7 +148,7 @@ __decorate([
     __metadata("design:returntype", Promise)
 ], Hint.prototype, "configChanged", null);
 let hintIds = 0;
-Hint.style = BalHintStyle0;
+Hint.style = balHintCss;
 
 const HintText = class {
     constructor(hostRef) {
@@ -321,7 +319,7 @@ function effect$2(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const applyStyles$1 = {
+var applyStyles$1 = {
   name: 'applyStyles',
   enabled: true,
   phase: 'write',
@@ -636,7 +634,7 @@ function effect$1(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const arrow$1 = {
+var arrow$1 = {
   name: 'arrow',
   enabled: true,
   phase: 'main',
@@ -803,7 +801,7 @@ function computeStyles(_ref5) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const computeStyles$1 = {
+var computeStyles$1 = {
   name: 'computeStyles',
   enabled: true,
   phase: 'beforeWrite',
@@ -850,7 +848,7 @@ function effect(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const eventListeners = {
+var eventListeners = {
   name: 'eventListeners',
   enabled: true,
   phase: 'write',
@@ -1160,7 +1158,6 @@ function detectOverflow(state, options) {
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
     element: popperRect,
-    strategy: 'absolute',
     placement: placement
   });
   var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
@@ -1356,7 +1353,7 @@ function flip(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const flip$1 = {
+var flip$1 = {
   name: 'flip',
   enabled: true,
   phase: 'main',
@@ -1418,7 +1415,7 @@ function hide(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const hide$1 = {
+var hide$1 = {
   name: 'hide',
   enabled: true,
   phase: 'main',
@@ -1470,7 +1467,7 @@ function offset(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const offset$1 = {
+var offset$1 = {
   name: 'offset',
   enabled: true,
   phase: 'main',
@@ -1488,13 +1485,12 @@ function popperOffsets(_ref) {
   state.modifiersData[name] = computeOffsets({
     reference: state.rects.reference,
     element: state.rects.popper,
-    strategy: 'absolute',
     placement: state.placement
   });
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const popperOffsets$1 = {
+var popperOffsets$1 = {
   name: 'popperOffsets',
   enabled: true,
   phase: 'read',
@@ -1629,7 +1625,7 @@ function preventOverflow(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const preventOverflow$1 = {
+var preventOverflow$1 = {
   name: 'preventOverflow',
   enabled: true,
   phase: 'main',
@@ -1970,30 +1966,69 @@ var createPopper = /*#__PURE__*/popperGenerator({
 }); // eslint-disable-next-line import/no-unused-modules
 
 const balPopoverCss = ".bal-popover__backdrop{bottom:0;left:0;position:absolute;right:0;top:0}:root{--bal-popover-backdrop-height:100vh;--bal-popover-content-height-top-nav:100vh;--bal-popover-backdrop-background:var(--bal-color-primary-6);--bal-popover-backdrop-opacity:.8;--bal-popover-content-shadow:var(--bal-shadow-normal);--bal-popover-content-background:var(--bal-color-white);--bal-popover-content-background-grey:var(--bal-color-grey-2);--bal-popover-tooltip-background:var(--bal-color-primary-6);--bal-popover-tooltip-color:var(--bal-color-white);--bal-popover-tooltip-font-family:var(--bal-font-family-text);--bal-popover-tooltip-font-size:var(--bal-text-size-small)}.bal-popover{display:block}@media screen and (max-width: 768px){.bal-popover .bal-popover__content{min-width:100vw !important}.bal-popover .bal-select__popover{min-width:100% !important}}.bal-popover--active .bal-popover__content{display:block}.bal-popover--backdrop [bal-popover-trigger]{z-index:calc(var(--bal-z-index-popup) - 1);position:relative}@media screen and (max-width: 768px){.bal-popover--hint .bal-popover__content{min-height:100vh}.bal-popover--hint .bal-popover__content .bal-popover__content__inner{min-height:100vh}}@media screen and (min-width: 769px),print{.bal-popover--hint .bal-popover__content{max-width:20rem}}@media screen and (min-width: 1024px){.bal-popover--hint .bal-popover__content{max-width:30rem}}.bal-popover__backdrop{z-index:calc(var(--bal-z-index-popup) - 2);position:fixed;background:var(--bal-popover-backdrop-background);opacity:var(--bal-popover-backdrop-opacity);height:var(--bal-popover-backdrop-height);width:100vw}.bal-popover__content{display:none;z-index:var(--bal-z-index-popup);-webkit-box-shadow:var(--bal-popover-content-shadow);box-shadow:var(--bal-popover-content-shadow);background:var(--bal-popover-content-background);min-width:16.25rem}.bal-popover__content[data-show]{display:block}.bal-popover__content--expanded{min-width:100%}.bal-popover__content--no-shadow{-webkit-box-shadow:none;box-shadow:none}.bal-popover__content--radius-normal{border-radius:var(--bal-radius-normal)}.bal-popover__content--radius-large{border-radius:var(--bal-radius-large)}.bal-popover__content--radius-none{border-radius:0}.bal-popover__content--radius-normal-bottom-none{border-radius:var(--bal-radius-normal);border-bottom-right-radius:0;border-bottom-left-radius:0}.bal-popover__content--radius-normal-top-none{border-radius:var(--bal-radius-normal);border-top-left-radius:0;border-top-right-radius:0}.bal-popover__content--radius-large-bottom-none{border-radius:var(--bal-radius-large);border-bottom-right-radius:0;border-bottom-left-radius:0}.bal-popover__content--radius-large-top-none{border-radius:var(--bal-radius-large);border-top-left-radius:0;border-top-right-radius:0}.bal-popover__content--on-top{border-top:1px solid var(--bal-color-grey-2);height:var(--bal-popover-content-height-top-nav);overflow-y:auto}.bal-popover__content--color-grey{background:var(--bal-popover-content-background-grey)}.bal-popover__content__inner{max-height:calc(100vh - 4.5rem);overflow:auto;padding:1rem}@media screen and (min-width: 769px),print{.bal-popover__content__inner{padding:1.5rem}}@media screen and (min-width: 1024px){.bal-popover__content__inner{max-height:calc(100vh - 8rem)}}.bal-popover__content--spaceless .bal-popover__content__inner{padding:0}.bal-popover__content [data-popper-arrow]{display:none}.bal-popover__content__arrow{visibility:hidden}.bal-popover__content__arrow [data-popper-arrow]{display:block}.bal-popover__content__arrow,.bal-popover__content__arrow:before{position:absolute;width:.5rem;height:.5rem;background:inherit}.bal-popover__content__arrow:before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.bal-popover__content[data-popper-placement^=top]>.bal-popover__content__arrow{bottom:-0.25rem}.bal-popover__content[data-popper-placement^=bottom]>.bal-popover__content__arrow{top:-0.25rem}.bal-popover__content[data-popper-placement^=left]>.bal-popover__content__arrow{right:-0.25rem}.bal-popover__content[data-popper-placement^=right]>.bal-popover__content__arrow{left:-0.25rem}.bal-popover--arrow .bal-popover__content__arrow{display:block}.bal-popover--tooltip .bal-popover__content{min-width:unset;background:var(--bal-popover-tooltip-background)}.bal-popover--tooltip .bal-popover__content .bal-popover__content__inner{padding:var(--bal-space-x-small)}.bal-popover--tooltip .bal-popover__content .bal-popover__content__inner,.bal-popover--tooltip .bal-popover__content .bal-popover__content__inner p{color:var(--bal-popover-tooltip-color);font-family:var(--bal-popover-tooltip-font-family);font-size:var(--bal-popover-tooltip-font-size)}";
-const BalPopoverStyle0 = balPopoverCss;
 
 const Popover = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.balChange = createEvent(this, "balChange", 7);
-        this.balWillAnimate = createEvent(this, "balWillAnimate", 7);
-        this.balDidAnimate = createEvent(this, "balDidAnimate", 7);
-        this.balPopoverPrepare = createEvent(this, "balPopoverPrepare", 7);
+        this.balChange = createEvent(this, "balChange");
+        this.balWillAnimate = createEvent(this, "balWillAnimate");
+        this.balDidAnimate = createEvent(this, "balDidAnimate");
+        this.balPopoverPrepare = createEvent(this, "balPopoverPrepare");
         this.popoverId = `bal-po-${PopoverIds++}`;
         this.isTouch = balBreakpoints.isTouch;
         this.isInMainNav = false;
         this.backdropHeight = 0;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true` the popover automatically opens on a click
+         */
         this.autoTrigger = false;
+        /**
+         * If `true` the popover has max-width on tablet and desktop. On mobile it uses the whole viewport.
+         */
         this.hint = false;
+        /**
+         * If `true` the popover shows on hover
+         */
         this.hover = false;
+        /**
+         * If `true` a little arrow is added, which points to the trigger element
+         */
         this.arrow = false;
+        /**
+         * If `true` a backdrop is added
+         */
         this.backdrop = false;
+        /**
+         * If `true` the popover is shown as a tooltip
+         */
         this.tooltip = false;
+        /**
+         * Define the offset of the popover content.
+         */
         this.offsetX = 0;
+        /**
+         * Define the offset of the popover content.
+         */
         this.offsetY = 0;
+        /**
+         * Define padding of the overflow
+         */
         this.padding = 0;
+        /**
+         * Define the position of the popover content.
+         */
         this.position = 'bottom-start';
+        /**
+         * If `true` the popover content is open.
+         */
         this.active = false;
+        /**
+         * If `true` there will be no backdrop
+         */
         this.mobileTop = false;
     }
     createLogger(log) {
@@ -2239,20 +2274,47 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Popover.prototype, "breakpointListener", null);
 let PopoverIds = 0;
-Popover.style = BalPopoverStyle0;
+Popover.style = balPopoverCss;
 
 const PopoverContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.isTouch = balBreakpoints.isTouch; // need this part to improve a none side effect import
+        /**
+         * If `true` the popover has no padding space.
+         */
         this.spaceless = false;
+        /**
+         * Limit the height of the popover content. Pass the amount of pixel.
+         */
         this.scrollable = 0;
+        /**
+         * Define the max width of the popover content.
+         */
         this.contentWidth = 0;
+        /**
+         * Define the min width of the popover content.
+         */
         this.contentMinWidth = 0;
+        /**
+         * Defines background color of the content.
+         */
         this.color = 'white';
+        /**
+         * If `true` the content has a min width of 100%.
+         */
         this.expanded = false;
+        /**
+         * Defines border-radius of popover content.
+         */
         this.radius = 'normal';
+        /**
+         * If `true` the popover does not have the shadow
+         */
         this.noShadow = false;
+        /**
+         * If `true` the content will have a divider line on top
+         */
         this.mobileTop = false;
         this.contentHeightOnTop = 0;
     }