@baloise/ds-core 19.2.0 → 19.3.0-nightly.20250630

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

@@ -1,42 +1,38 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const bem = require('./bem-81bc6a2d.js');
-const utils = require('./utils-9ea175af.js');
-const scroll = require('./scroll-dc37ea84.js');
-const breakpoints_subject = require('./breakpoints.subject-46e29594.js');
-const breakpoints_decorator = require('./breakpoints.decorator-e93836f7.js');
-const config_decorator = require('./config.decorator-de244188.js');
-const keyboard_helpers = require('./keyboard.helpers-2093e793.js');
-const browser = require('./browser-1d542d0f.js');
-const log = require('./log-33398c2a.js');
-require('./index-e6a233be.js');
-require('./helpers-debb881a.js');
-require('./config.utils-df30e424.js');
-require('./device-9f97a845.js');
-require('./listener-52d2e5fd.js');
-require('./tokens.esm-b4bf229a.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;
+var index = require('./index-D4vG8k57.js');
+var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var config_decorator = require('./config.decorator-D_FjiIar.js');
+var bem = require('./bem-p0PWVN8n.js');
+var utils = require('./utils-Bl0u6rg1.js');
+var scroll = require('./scroll-D7ot6_a-.js');
+var breakpoints_subject = require('./breakpoints.subject-BO2zDz46.js');
+var breakpoints_decorator = require('./breakpoints.decorator-BvW42Q0T.js');
+var keyboard_helpers = require('./keyboard.helpers-BkZpVT-9.js');
+require('./index-BZ67Dcnb.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
+require('./device-PwXgHi--.js');
+require('./listener-B7XPbb55.js');
+require('./tokens.esm-BPYitgVY.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) {
         index.registerInstance(this, hostRef);
         this.bodyScrollHandler = new scroll.BalScrollHandler();
         this.componentId = `bal-hint-${hintIds++}`;
-        this.onPopupChange = (ev) => {
-            this.isActive = ev.detail;
-            utils.preventDefault(ev);
-        };
         this.isActive = false;
         this.innerCloseLabel = 'Close';
         this.isMobile = breakpoints_subject.balBreakpoints.isMobile;
-        this.closeLabel = undefined;
+        /**
+         * Disables the close button for tablet and desktop
+         */
         this.small = false;
+        this.onPopupChange = (ev) => {
+            this.isActive = ev.detail;
+            utils.preventDefault(ev);
+        };
     }
     connectedCallback() {
         this.bodyScrollHandler.connect();
@@ -154,7 +150,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", Promise)
 ], Hint.prototype, "configChanged", null);
 let hintIds = 0;
-Hint.style = BalHintStyle0;
+Hint.style = balHintCss;
 
 const HintText = class {
     constructor(hostRef) {
@@ -325,7 +321,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',
@@ -640,7 +636,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',
@@ -807,7 +803,7 @@ function computeStyles(_ref5) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const computeStyles$1 = {
+var computeStyles$1 = {
   name: 'computeStyles',
   enabled: true,
   phase: 'beforeWrite',
@@ -854,7 +850,7 @@ function effect(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const eventListeners = {
+var eventListeners = {
   name: 'eventListeners',
   enabled: true,
   phase: 'write',
@@ -1164,7 +1160,6 @@ function detectOverflow(state, options) {
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
     element: popperRect,
-    strategy: 'absolute',
     placement: placement
   });
   var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
@@ -1360,7 +1355,7 @@ function flip(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const flip$1 = {
+var flip$1 = {
   name: 'flip',
   enabled: true,
   phase: 'main',
@@ -1422,7 +1417,7 @@ function hide(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const hide$1 = {
+var hide$1 = {
   name: 'hide',
   enabled: true,
   phase: 'main',
@@ -1474,7 +1469,7 @@ function offset(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const offset$1 = {
+var offset$1 = {
   name: 'offset',
   enabled: true,
   phase: 'main',
@@ -1492,13 +1487,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',
@@ -1633,7 +1627,7 @@ function preventOverflow(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const preventOverflow$1 = {
+var preventOverflow$1 = {
   name: 'preventOverflow',
   enabled: true,
   phase: 'main',
@@ -1974,30 +1968,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) {
         index.registerInstance(this, hostRef);
-        this.balChange = index.createEvent(this, "balChange", 7);
-        this.balWillAnimate = index.createEvent(this, "balWillAnimate", 7);
-        this.balDidAnimate = index.createEvent(this, "balDidAnimate", 7);
-        this.balPopoverPrepare = index.createEvent(this, "balPopoverPrepare", 7);
+        this.balChange = index.createEvent(this, "balChange");
+        this.balWillAnimate = index.createEvent(this, "balWillAnimate");
+        this.balDidAnimate = index.createEvent(this, "balDidAnimate");
+        this.balPopoverPrepare = index.createEvent(this, "balPopoverPrepare");
         this.popoverId = `bal-po-${PopoverIds++}`;
         this.isTouch = breakpoints_subject.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) {
@@ -2065,7 +2098,7 @@ const Popover = class {
             this.updatePopper();
         }
         // Bug fix for https://github.com/baloise/design-system/issues/551
-        if (browser.balBrowser.isSafari && !this.isTouch) {
+        if (index.balBrowser.isSafari && !this.isTouch) {
             clearTimeout(this.componentDidRenderTimer);
             this.componentDidRenderTimer = setTimeout(() => {
                 var _a;
@@ -2201,7 +2234,7 @@ const Popover = class {
         return this.el.querySelector('.bal-popover__content__inner');
     }
     getBackdropHeight() {
-        if (browser.balBrowser.hasWindow) {
+        if (index.balBrowser.hasWindow) {
             return this.isInMainNav ? (window.innerHeight - (this.isTouch ? 64 : 48)) / 16 : window.innerHeight / 16;
         }
         return 0;
@@ -2231,7 +2264,7 @@ const Popover = class {
     }; }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-popover'),
+    index.Logger('bal-popover'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
@@ -2243,25 +2276,52 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", void 0)
 ], Popover.prototype, "breakpointListener", null);
 let PopoverIds = 0;
-Popover.style = BalPopoverStyle0;
+Popover.style = balPopoverCss;
 
 const PopoverContent = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.isTouch = breakpoints_subject.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;
     }
     breakpointListener(_breakpoints) {
-        if (browser.balBrowser.hasWindow) {
+        if (index.balBrowser.hasWindow) {
             this.contentHeightOnTop = window.innerHeight - 64;
         }
     }
@@ -2290,7 +2350,7 @@ const PopoverContent = class {
         return Object.assign(Object.assign(Object.assign({}, contentWidth), contentMinWidth), contentHeightOnTopNav);
     }
     componentWillLoad() {
-        if (browser.balBrowser.hasWindow) {
+        if (index.balBrowser.hasWindow) {
             this.contentHeightOnTop = window.innerHeight - 64;
         }
     }