@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/esm/{ds-logo.entry.js → ds-divider_2.entry.js}

@@ -1,16 +1,127 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { E as h, B as registerInstance, r as rOnLoad, F as Host, G as getElement } from './index-CuwLeg-T.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-tdchDLyb.js';
+import { B as registerInstance, E as h, F as Host, G as getElement, L as rOnLoad } from './index-C6MVahkC.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { h as hasValue } from './has-value-DU9L2JaI.js';
 import { n as normalizeDeprecatedTShirtSize } from './t-shirt-DR5LIaCn.js';
-import { s as setupValidation, V as ValidateType, a as ValidateOneOf } from './validate.decorator-82RSSk25.js';
-import { d as dsBreakpoints } from './breakpoints.subject-BhbzG-rl.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-L2xeP46f.js';
-import { L as ListenToConfig } from './config.decorator-BQNIja4k.js';
-import './listener-C_kjUVTE.js';
-import './device-Dhwt3m7W.js';
-import './config.utils-COlKFRlV.js';
+import { O as OneOf } from './one-of-CKPv0Nqm.js';
+import { T as Type } from './type-DzkhLOG_.js';
+import { d as dsBreakpoints } from './breakpoints.subject-BNnXcKMw.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-DZ0xN4Np.js';
+import { L as ListenToConfig } from './config.decorator-ZQ0_Zx5y.js';
+import './create-validator-decorator-DovxquEu.js';
+import './listener-DHP2OPMZ.js';
+import './device-CRuIJzXR.js';
+import './config.utils-D9o7rffC.js';
+
+const DIVIDER_LAYOUTS = ['horizontal', 'vertical', ''];
+const DIVIDER_COLORS = [
+    'primary',
+    'primary-light',
+    'primary-dark',
+    'grey-light',
+    'grey',
+    'grey-dark',
+    'warning',
+    'success',
+    'danger',
+    'danger-dark',
+    'danger-darker',
+    'white',
+    'light-blue',
+];
+const DIVIDER_SPACES = [
+    'none',
+    '2xs',
+    'xs',
+    'sm',
+    'base',
+    'md',
+    'lg',
+    'xl',
+    '2xl',
+    '3xl',
+    'xx-small',
+    'x-small',
+    'small',
+    'normal',
+    'medium',
+    'large',
+    'x-large',
+    'xx-large',
+    'xxx-large',
+    '',
+];
+
+const dividerHostCss = () => `:host{--_divider-position:var(--divider-position, var(--mod-divider-position, static));--_divider-top:var(--divider-top, var(--mod-divider-top));--_divider-right:var(--divider-right, var(--mod-divider-right));--_divider-bottom:var(--divider-bottom, var(--mod-divider-bottom));--_divider-left:var(--divider-left, var(--mod-divider-left));position:var(--_divider-position);top:var(--_divider-top);right:var(--_divider-right);bottom:var(--_divider-bottom);left:var(--_divider-left);--_divider-m:var(--divider-m, var(--mod-divider-m, 0));--_divider-my:var(--divider-my, var(--mod-divider-my));--_divider-mx:var(--divider-mx, var(--mod-divider-mx));--_divider-ml:var(--divider-ml, var(--mod-divider-ml));--_divider-mr:var(--divider-mr, var(--mod-divider-mr));--_divider-mt:var(--divider-mt, var(--mod-divider-mt));--_divider-mb:var(--divider-mb, var(--mod-divider-mb));margin:var(--_divider-m);margin-inline:var(--_divider-mx);margin-block:var(--_divider-my);margin-left:var(--_divider-ml);margin-right:var(--_divider-mr);margin-top:var(--_divider-mt);margin-bottom:var(--_divider-mb);--_divider-color:var(--divider-color, var(--mod-divider-color, var(--ds-divider-color-base)));--_divider-width:var(--divider-width, var(--mod-divider-width, var(--ds-divider-width)));--_divider-radius:var(--divider-radius, var(--mod-divider-radius, var(--ds-divider-radius)));--_divider-space:var(--divider-space, var(--mod-divider-space, 0))}:host{display:block;padding:0;margin:0;border:none;border-radius:var(--_divider-radius);height:var(--_divider-width);background-color:var(--_divider-color)}:host(:not(.is-vertical)),:host(.is-horizontal){-ms-flex:1 0 100%;flex:1 0 100%;width:100%;min-height:var(--_divider-width);height:var(--_divider-width);margin-top:var(--_divider-space);margin-bottom:var(--_divider-space)}:host(.is-vertical){height:auto;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:stretch;align-self:stretch;width:var(--_divider-width);margin-left:var(--_divider-space);margin-right:var(--_divider-space)}:host(.is-primary){--mod-divider-color:var(--ds-divider-color-primary)}:host(.is-primary-light){--mod-divider-color:var(--ds-divider-color-primary-light)}:host(.is-primary-dark){--mod-divider-color:var(--ds-divider-color-primary-dark)}:host(.is-grey-light){--mod-divider-color:var(--ds-divider-color-grey-light)}:host(.is-grey){--mod-divider-color:var(--ds-divider-color-grey)}:host(.is-grey-dark){--mod-divider-color:var(--ds-divider-color-grey-dark)}:host(.is-warning){--mod-divider-color:var(--ds-divider-color-warning)}:host(.is-success){--mod-divider-color:var(--ds-divider-color-success)}:host(.is-danger){--mod-divider-color:var(--ds-divider-color-danger)}:host(.is-danger-dark){--mod-divider-color:var(--ds-divider-color-danger-dark)}:host(.is-danger-darker){--mod-divider-color:var(--ds-divider-color-danger-darker)}:host(.is-white){--mod-divider-color:var(--ds-divider-color-white)}:host(.is-light-blue){--mod-divider-color:var(--ds-divider-color-light-blue)}:host(.has-space-none){--mod-divider-space:var(--ds-alias-space-none-device)}:host(.has-space-2xs){--mod-divider-space:var(--ds-alias-space-2xs-device)}:host(.has-space-xs){--mod-divider-space:var(--ds-alias-space-xs-device)}:host(.has-space-sm){--mod-divider-space:var(--ds-alias-space-sm-device)}:host(.has-space-base){--mod-divider-space:var(--ds-alias-space-base-device)}:host(.has-space-md){--mod-divider-space:var(--ds-alias-space-md-device)}:host(.has-space-lg){--mod-divider-space:var(--ds-alias-space-lg-device)}:host(.has-space-xl){--mod-divider-space:var(--ds-alias-space-xl-device)}:host(.has-space-2xl){--mod-divider-space:var(--ds-alias-space-2xl-device)}:host(.has-space-3xl){--mod-divider-space:var(--ds-alias-space-3xl-device)}:host.is-dashed:not(.is-vertical){background:repeating-linear-gradient(90deg, var(--_divider-color) 0, var(--_divider-color) 8px, transparent 8px, transparent 16px)}:host.is-dashed.is-vertical{background:repeating-linear-gradient(180deg, var(--_divider-color) 0, var(--_divider-color) 8px, transparent 8px, transparent 16px)}:host{display:block}`;
+
+const Divider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Defines the position of the child elements if they
+         * are showed verticaly or horizontally. Default is verticaly.
+         */
+        this.layout = 'horizontal';
+        /**
+         * Defines the space between the child elements. Default is xx-small.
+         */
+        this.space = 'none';
+        /**
+         * Defines the color of the separator line.
+         */
+        this.color = 'grey';
+        /**
+         * Defines if the separator line is dashed or solid. Default is solid.
+         */
+        this.dashed = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const space = normalizeDeprecatedTShirtSize(this.space) || '';
+        return (h(Host, { key: 'b8c46c8b8746484960d92be8e9005b5f5f2a9792', role: "separator", class: {
+                [`is-${this.layout}`]: hasValue(this.layout),
+                [`is-${this.color}`]: hasValue(this.color),
+                [`has-space-${space}`]: hasValue(this.space),
+                [`is-dashed`]: this.dashed,
+            } }));
+    }
+    get el() { return getElement(this); }
+};
+__decorate([
+    Logger('divider'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Divider.prototype, "createLogger", null);
+__decorate([
+    OneOf(DIVIDER_LAYOUTS),
+    __metadata("design:type", String)
+], Divider.prototype, "layout", void 0);
+__decorate([
+    OneOf(DIVIDER_SPACES),
+    __metadata("design:type", String)
+], Divider.prototype, "space", void 0);
+__decorate([
+    OneOf(DIVIDER_COLORS),
+    __metadata("design:type", String)
+], Divider.prototype, "color", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Divider.prototype, "dashed", void 0);
+Divider.style = dividerHostCss();
 
 const LogoHelvetia = ({ onlyText, height }) => {
     // const height = small ? 22 : 32
@@ -64,16 +175,11 @@ const Logo = class {
             this.destroyAnimation();
         }
     }
-    sizeChanged(newValue) {
-        this.size = normalizeDeprecatedTShirtSize(newValue);
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
-        this.size = normalizeDeprecatedTShirtSize(this.size);
         this.animatedChanged();
     }
     componentDidUpdate() {
@@ -160,13 +266,14 @@ const Logo = class {
      * ------------------------------------------------------
      */
     render() {
+        const size = normalizeDeprecatedTShirtSize(this.size) || '';
         const LogoElement = this.brand === 'helvetia' || (this.brand === '' && this.configBrand === 'helvetia') ? (h(LogoHelvetia, { onlyText: this.animated, height: this.getHeight() })) : (h(LogoBaloise, { onlyText: this.animated, height: this.getHeight() }));
-        return (h(Host, { key: 'ac324310cb087df2dab4ae68f10b29750d51f4da', class: {
+        return (h(Host, { key: '549891bcf54e833cc226fecd178f6aabbfd8bcfa', class: {
                 'is-animated': this.isAnimated,
                 'is-white': this.color === 'white',
-                'is-sm': this.size === 'sm',
-                'is-lg': this.size === 'lg',
-            } }, h("div", { key: '91aac5fbf1a66d6706be717f514fc62ac9cfc1b3', id: "animated", part: "animated", ref: el => (this.animatedLogoElement = el), "aria-hidden": "true", style: {
+                'is-sm': size === 'sm',
+                'is-lg': size === 'lg',
+            } }, h("div", { key: '91dd1d3eb07ee2b0da7396558137dde63bcde0da', id: "animated", part: "animated", ref: el => (this.animatedLogoElement = el), "aria-hidden": "true", style: {
                 display: this.isAnimated ? 'block' : 'none',
                 width: this.getHeight() + 'px',
                 height: this.getHeight() + 'px',
@@ -176,9 +283,6 @@ const Logo = class {
     static get watchers() { return {
         "animated": [{
                 "animatedChanged": 0
-            }],
-        "size": [{
-                "sizeChanged": 0
             }]
     }; }
 };
@@ -189,19 +293,19 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Logo.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Logo.prototype, "animated", void 0);
 __decorate([
-    ValidateOneOf(...LOGO_BRANDS),
+    OneOf(LOGO_BRANDS),
     __metadata("design:type", String)
 ], Logo.prototype, "brand", void 0);
 __decorate([
-    ValidateOneOf(...LOGO_COLORS),
+    OneOf(LOGO_COLORS),
     __metadata("design:type", String)
 ], Logo.prototype, "color", void 0);
 __decorate([
-    ValidateOneOf(...LOGO_SIZES),
+    OneOf(LOGO_SIZES),
     __metadata("design:type", String)
 ], Logo.prototype, "size", void 0);
 __decorate([
@@ -218,4 +322,4 @@ __decorate([
 ], Logo.prototype, "configChanged", null);
 Logo.style = logoHostCss();
 
-export { Logo as ds_logo };
+export { Divider as ds_divider, Logo as ds_logo };