km-card-layout-component-miniprogram 0.1.7 → 0.1.9

package/example/pages/home/index.js

@@ -1,24 +1,115 @@
-
-
-const layouts = [{"name":"内置布局-右侧logo","width":343,"height":210,"children":[{"id":"f2dd3515-2147-460a-b788-3f58dd5f858b","type":"custom","style":{"borderRadius":0,"backgroundColor":"currentColor"},"layout":{"x":20,"y":104,"mode":"absolute","width":12,"height":1,"zIndex":8}},{"id":"7fd4c8cd-6bea-42d0-9a80-b1ba27f4abd3","type":"custom","style":{"borderRadius":0,"backgroundColor":"currentColor"},"layout":{"x":37,"y":104,"mode":"absolute","width":105,"height":1,"zIndex":9}},{"id":"1","key":"name","type":"text","style":{"color":"","fontSize":16,"textAlign":"left","fontWeight":"bold","lineHeight":22},"layout":{"x":20,"y":45,"mode":"absolute","width":210,"height":22,"zIndex":1},"binding":"user.name","defaultValue":"名片君"},{"id":"2","key":"company","type":"text","style":{"color":"","fontSize":11,"textAlign":"left","fontWeight":"normal","lineHeight":15},"layout":{"x":20,"y":74,"mode":"absolute","width":210,"height":15,"zIndex":3},"binding":"user.company","defaultValue":"合肥魅客网络有限公司"},{"id":"4","key":"duty","type":"text","style":{"color":"","fontSize":10,"textAlign":"left","fontWeight":"normal","lineHeight":15},"layout":{"x":20,"y":21,"mode":"absolute","width":210,"height":15,"zIndex":2},"binding":"user.duty","defaultValue":"销售经理"},{"id":"3","key":"mobile","icon":{"style":"fill","enable":true},"type":"text","style":{"color":"","fontSize":10,"textAlign":"left","fontWeight":"normal","lineHeight":15},"layout":{"x":20,"y":123,"mode":"absolute","width":280,"height":15,"zIndex":5},"binding":"user.mobile","defaultValue":"18888888888"},{"id":"5","key":"email","icon":{"style":"fill","enable":true},"type":"text","style":{"color":"","fontSize":10,"textAlign":"left","fontWeight":"normal","lineHeight":15},"layout":{"x":20,"y":145,"mode":"absolute","width":280,"height":15,"zIndex":6},"binding":"user.email","defaultValue":"km@kuanmai.com"},{"id":"8","key":"logo","type":"image","style":{"color":"#000000","objectFit":"contain","borderRadius":0},"layout":{"x":263,"y":20,"mode":"absolute","width":60,"height":60,"zIndex":4},"binding":"user.logo","defaultValue":"https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/4c71811adfa51e1e3ab4181a88cebc87.png"},{"id":"9","key":"address","icon":{"style":"fill","enable":true},"type":"text","style":{"color":"","fontSize":10,"textAlign":"left","fontWeight":"normal","lineHeight":15},"layout":{"x":20,"y":167,"mode":"absolute","width":280,"height":33,"zIndex":7},"binding":"user.address","defaultValue":"安徽省合肥市包河区硅谷大厦"}],"container":{"mode":"absolute"},"fontColor":"#333333","backgroundImage":"https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/0a7331e2e1a9a4cbc828afe6c338aaae.png","backgroundZIndex":1}]
-
+const layouts = [
+  {
+    name: "内置布局-右侧logo",
+    container: { mode: "absolute" },
+    width: 343,
+    height: 210,
+    backgroundImage:
+      "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/0a7331e2e1a9a4cbc828afe6c338aaae.png",
+    backgroundZIndex: 1,
+    fontColor: "#333333",
+    children: [
+      {
+        id: "f2dd3515-2147-460a-b788-3f58dd5f858b",
+        type: "custom",
+        style: { borderRadius: 0, backgroundColor: "currentColor" },
+        layout: { x: 20, y: 104, mode: "absolute", width: 12, height: 1, zIndex: 8 },
+      },
+      {
+        id: "7fd4c8cd-6bea-42d0-9a80-b1ba27f4abd3",
+        type: "custom",
+        style: { borderRadius: 0, backgroundColor: "currentColor" },
+        layout: { x: 37, y: 104, mode: "absolute", width: 105, height: 1, zIndex: 9 },
+      },
+      {
+        id: "1",
+        key: "name",
+        type: "text",
+        style: { color: "", fontSize: 16, textAlign: "left", fontWeight: "bold", lineHeight: 22 },
+        layout: { x: 20, y: 45, mode: "absolute", width: 210, height: 22, zIndex: 1 },
+        binding: "user.name",
+        defaultValue: "名片君",
+      },
+      {
+        id: "2",
+        key: "company",
+        type: "text",
+        style: { color: "", fontSize: 11, textAlign: "left", fontWeight: "normal", lineHeight: 15 },
+        layout: { x: 20, y: 74, mode: "absolute", width: 210, height: 15, zIndex: 3 },
+        binding: "user.company",
+        defaultValue: "合肥魅客网络有限公司",
+        icon: { name: "company" },
+      },
+      {
+        id: "4",
+        key: "duty",
+        type: "text",
+        style: { color: "", fontSize: 10, textAlign: "left", fontWeight: "normal", lineHeight: 15 },
+        layout: { x: 20, y: 21, mode: "absolute", width: 210, height: 15, zIndex: 2 },
+        binding: "user.duty",
+        defaultValue: "销售经理",
+      },
+      {
+        id: "3",
+        key: "mobile",
+        icon: { style: "fill", enable: true, name: "mobile" },
+        type: "text",
+        style: { color: "", fontSize: 10, textAlign: "left", fontWeight: "normal", lineHeight: 15 },
+        layout: { x: 20, y: 123, mode: "absolute", width: 280, height: 15, zIndex: 5 },
+        binding: "user.mobile",
+        defaultValue: "18888888888",
+      },
+      {
+        id: "5",
+        key: "email",
+        icon: { style: "fill", enable: true, name: "email" },
+        type: "text",
+        style: { color: "", fontSize: 10, textAlign: "left", fontWeight: "normal", lineHeight: 15 },
+        layout: { x: 20, y: 145, mode: "absolute", width: 280, height: 15, zIndex: 6 },
+        binding: "user.email",
+        defaultValue: "km@kuanmai.com",
+      },
+      {
+        id: "8",
+        key: "logo",
+        url: "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/4c71811adfa51e1e3ab4181a88cebc87.png",
+        type: "image",
+        style: { color: "#000000", objectFit: "contain", borderRadius: 0 },
+        layout: { x: 263, y: 20, mode: "absolute", width: 60, height: 60, zIndex: 4 },
+        binding: "user.shareStyle.logo",
+        defaultValue:
+          "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/4c71811adfa51e1e3ab4181a88cebc87.png",
+      },
+      {
+        id: "9",
+        key: "address",
+        icon: { style: "fill", enable: true, name: "address" },
+        type: "text",
+        style: { color: "", fontSize: 10, textAlign: "left", fontWeight: "normal", lineHeight: 15 },
+        layout: { x: 20, y: 167, mode: "absolute", width: 280, height: 33, zIndex: 7 },
+        binding: "user.addressName",
+        defaultValue: "安徽省合肥市包河区硅谷大厦",
+      },
+    ],
+  },
+];
 
 const cardData = {
   user: {
-    company: 'Kuanmai Networks',
-    name: 'Ada Lovelace',
-    duty: 'Product Lead',
-    phone: '+86 188-0000-0000',
-    email: 'ada@kuanmai.com',
-    address: '1 Infinite Loop, Shenzhen',
-    avatar: 'https://picsum.photos/200/200?random=12'
-  }
-}
+    company: "Kuanmai Networks",
+    name: "Ada Lovelace",
+    duty: "Product Lead",
+    phone: "+86 188-0000-0000",
+    email: "ada@kuanmai.com",
+    address: "1 Infinite Loop, Shenzhen",
+    avatar: "https://picsum.photos/200/200?random=12",
+  },
+};
 
 Page({
   data: {
     layouts,
     cardData,
-    description: 'CardLayoutInput + data.user binding with stacked cards.'
-  }
-})
+    description: "CardLayoutInput + data.user binding with stacked cards.",
+  },
+});

package/miniprogram_dist/components/card-layout/elements/custom-element/index.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("../../../../vendor/km-card-layout-core/index");
+Component({
+    options: {
+        styleIsolation: 'apply-shared',
+    },
+    properties: {
+        element: {
+            type: Object,
+            value: {},
+        },
+    },
+    data: {
+        wrapperStyle: '',
+        contentStyle: '',
+    },
+    observers: {
+        element(el) {
+            if (!el)
+                return;
+            const wrapperStyle = (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(el, 'rpx'), 'rpx');
+            const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildBaseContentStyle)(el), 'rpx');
+            this.setData({ wrapperStyle, contentStyle });
+        },
+    },
+});

package/miniprogram_dist/components/card-layout/elements/custom-element/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/miniprogram_dist/components/card-layout/elements/custom-element/index.wxml

@@ -0,0 +1,5 @@
+<view class="km-node km-node--custom" style="{{wrapperStyle}}">
+  <view class="km-node__custom" style="{{contentStyle}}">
+    <slot name="{{element.id}}"></slot>
+  </view>
+</view>

package/miniprogram_dist/components/card-layout/elements/custom-element/index.wxss

@@ -0,0 +1,14 @@
+.km-node {
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.km-node--custom {
+  box-sizing: border-box;
+}
+
+.km-node__custom {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}

package/miniprogram_dist/components/card-layout/elements/icon-element/index.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("../../../../vendor/km-card-layout-core/index");
+const icon_map_1 = require("../../icon-map");
+const mapIconGlyph = (name, fallback) => {
+    if (!name)
+        return fallback;
+    const glyph = icon_map_1.ICON_CODE_MAP[name];
+    if (glyph)
+        return String.fromCharCode(parseInt(glyph, 16));
+    return fallback || name;
+};
+Component({
+    options: {
+        styleIsolation: 'apply-shared',
+    },
+    properties: {
+        element: {
+            type: Object,
+            value: {},
+        },
+    },
+    data: {
+        wrapperStyle: '',
+        contentStyle: '',
+        iconText: '',
+    },
+    observers: {
+        element(el) {
+            if (!el)
+                return;
+            const wrapperStyle = (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(el, 'rpx'), 'rpx');
+            const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildBaseContentStyle)(el), 'rpx');
+            const name = (0, index_1.getIconName)(el);
+            const iconText = mapIconGlyph(name, name || '');
+            this.setData({ wrapperStyle, contentStyle, iconText });
+        },
+    },
+});

package/miniprogram_dist/components/card-layout/elements/icon-element/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/miniprogram_dist/components/card-layout/elements/icon-element/index.wxml

@@ -0,0 +1,5 @@
+<view class="km-node km-node--icon" style="{{wrapperStyle}}">
+  <view class="km-node__icon icon" style="{{contentStyle}}">
+    {{iconText}}
+  </view>
+</view>

package/miniprogram_dist/components/card-layout/elements/icon-element/index.wxss

@@ -0,0 +1,37 @@
+.km-node {
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.km-node--icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.km-node__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-family: 'km-icon', 'PingFang SC', 'Microsoft Yahei', sans-serif;
+  font-style: normal;
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: 'km-icon';
+  src: url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAAEl4AA0AAAAAcmgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAABJXAAAABoAAAAcrMtJV0dERUYAAEk8AAAAHgAAAB4AKQByT1MvMgAAAaQAAABGAAAAYDw3SVljbWFwAAAC7AAAAM8AAAIW8XL3K2dhc3AAAEk0AAAACAAAAAj//wADZ2x5ZgAABJgAAEBZAABkZPJymXJoZWFkAAABMAAAADEAAAA2MtZiFmhoZWEAAAFkAAAAIAAAACQNagmCaG10eAAAAewAAAD/AAABqqs3Ii9sb2NhAAADvAAAANoAAADaKv0P7G1heHAAAAGEAAAAHwAAACABmQHEbmFtZQAARPQAAAFGAAACgl6CAQJwb3N0AABGPAAAAvUAAATh1g15W3jaY2BkYGAA4lqffPd4fpuvDNwsDCDwVIyfA0b///i/gXMWcyeQy8HABBIFAAVdCfwAAAB42mNgZGBgbvjfwBDDOfP/x///OWcxAEVQQCYAuxgH/XjaY2BkYGDIYdzBoMwAAkxAzAWEDAz/wXwGACjlAl8AeNpjYGFRYJzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnjE+y2Ju+N/AwMB8h6ERKMyIpESBgREAenQNCwAAeNo90cErBGEYx/Hf1LMH7MVxoigHtS600pzWnMjBlt2dFAeiNuWgXLgokgslbpyE/Aduyl38J3ty4aCs7/vOk6lPv+d5531n3nfGVF5JIZlUx9fAbawnEfIFq14/YhddFPjFmynZ9n4TbYzg2tcMW6Epr4NQT3jSJ2lcW9ec1fSEAheMnVume7KKBbQwiMye+5/kEpqYwQoOY59pn1xGw3Lt8NwHS7UY35frivqbet2fNYZp+4j76vj+GpUhjZJreLfxODecay/eTzVPzmIj9uX7VLnUmfdb/2fN4trcv0kYv8Oxe/V5Rzhg7inZ8wzjN5b0f6z8PV2d/AHivi0JAHja3dBFUoVRDITR88PD3d3d3d3d3d33zQqYwwVGbIGk8qV6kK7qIN7vlIsCRdlBRT865iPsWOig318/PwOjbwYd+7mKSZAoSbIUqdKky5ApS7YcufLkK1CoSLESpcqCZ4VKVarVqFWnXoNGTZq1aNWmXYdOXbr16NWn34BBQ4aNGDVm3IRJU6bNmDVn3oJFS5atWLVm3YZNW7bt2LVn34FDR46dOHXm3IVLV67duHXn3oNHT8Hv2YtXbyFaot9HfMeMC4jztyL/vr4AXx4eawAAAAAAAAAAAACwAPIDSgQ8BLIFUgWUBcIF/gY8BpIHCgdAB3wHoAgOCHAIxgk+CV4JzAnqCkQKrgtUC8QMEAxsDNQNFA1SDegONg6qDyQPgg/CEAIQxBEwEaQSHBLYE14T4hRcFPIVTBYMFkwWqBckGGAYxhmYGegaEBpeGuIbXhvwHPQd5B62Hygf6CBeILog9CFUIbgiBCJ0ItQjbCQSJGgkuCVsJcImKib0J44ocijOKSApUCo2KmQqtituK34sJixkLMgtdC3WLpgvPC+QMBww/DGCMagyMgAA') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+.icon {
+  font-family: 'km-icon' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/miniprogram_dist/components/card-layout/elements/image-element/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("../../../../vendor/km-card-layout-core/index");
+Component({
+    options: {
+        styleIsolation: 'apply-shared',
+    },
+    properties: {
+        element: {
+            type: Object,
+            value: {},
+        },
+    },
+    data: {
+        wrapperStyle: '',
+        contentStyle: '',
+        imageSrc: '',
+        mode: 'aspectFill',
+    },
+    observers: {
+        element(el) {
+            if (!el)
+                return;
+            const wrapperStyle = (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(el, 'rpx'), 'rpx');
+            const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildImageContentStyle)(el), 'rpx');
+            const imageSrc = (0, index_1.getImageSrc)(el);
+            const mode = el.fit === 'contain' ? 'aspectFit' : 'aspectFill';
+            this.setData({ wrapperStyle, contentStyle, imageSrc, mode });
+        },
+    },
+});

package/miniprogram_dist/components/card-layout/elements/image-element/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/miniprogram_dist/components/card-layout/elements/image-element/index.wxml

@@ -0,0 +1,8 @@
+<view class="km-node" style="{{wrapperStyle}}">
+  <image
+    class="km-node__image"
+    style="{{contentStyle}}"
+    src="{{imageSrc}}"
+    mode="{{mode}}"
+  />
+</view>

package/miniprogram_dist/components/card-layout/elements/image-element/index.wxss

@@ -0,0 +1,10 @@
+.km-node {
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.km-node__image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}

package/miniprogram_dist/components/card-layout/elements/text-element/index.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("../../../../vendor/km-card-layout-core/index");
+const icon_map_1 = require("../../icon-map");
+const mapIconGlyph = (name, fallback) => {
+    if (!name)
+        return fallback;
+    const glyph = icon_map_1.ICON_CODE_MAP[name];
+    if (glyph)
+        return String.fromCharCode(parseInt(glyph, 16));
+    return fallback || name;
+};
+Component({
+    options: {
+        styleIsolation: 'apply-shared',
+    },
+    properties: {
+        element: {
+            type: Object,
+            value: {},
+        },
+    },
+    data: {
+        wrapperStyle: '',
+        contentStyle: '',
+        textValue: '',
+        iconMeta: null,
+    },
+    observers: {
+        element(el) {
+            if (!el)
+                return;
+            const wrapperStyle = (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(el, 'rpx'), 'rpx');
+            const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildTextContentStyle)(el, 'rpx'), 'rpx');
+            const textValue = (0, index_1.getTextValue)(el);
+            const iconRaw = (0, index_1.buildTextIconMeta)(el, 'rpx');
+            const iconMeta = iconRaw && iconRaw.name
+                ? {
+                    ...iconRaw,
+                    text: mapIconGlyph(iconRaw.name, iconRaw.name),
+                    wrapperStyle: (0, index_1.styleObjectToString)(iconRaw.wrapperStyle, 'rpx'),
+                }
+                : iconRaw;
+            this.setData({ wrapperStyle, contentStyle, textValue, iconMeta });
+        },
+    },
+});

package/miniprogram_dist/components/card-layout/elements/text-element/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/miniprogram_dist/components/card-layout/elements/text-element/index.wxml

@@ -0,0 +1,29 @@
+<view class="km-node km-node--text" style="{{wrapperStyle}}">
+  <view class="km-node__text" style="{{contentStyle}}">
+    <block wx:if="{{iconMeta && iconMeta.name}}">
+      <view class="km-node__text-content">
+        <block wx:if="{{iconMeta.align === 'right'}}">
+          <text class="km-node__text-value">{{textValue || ''}}</text>
+          <view style="{{iconMeta.wrapperStyle}}" class="km-node__text-icon--wrapper" >
+            <text
+              class="km-node__text-icon icon"
+              style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
+            >{{iconMeta.text || iconMeta.name || ''}}</text>
+          </view>
+        </block>
+        <block wx:else>
+          <view style="{{iconMeta.wrapperStyle}}" class="km-node__text-icon--wrapper">
+            <text
+              class="km-node__text-icon icon"
+              style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
+            >{{iconMeta.text || iconMeta.name || ''}}</text>
+          </view>
+          <text class="km-node__text-value">{{textValue || ''}}</text>
+        </block>
+      </view>
+    </block>
+    <block wx:else>
+      <text class="km-node__text-value">{{textValue || ''}}</text>
+    </block>
+  </view>
+</view>

package/miniprogram_dist/components/card-layout/elements/text-element/index.wxss

@@ -0,0 +1,59 @@
+.km-node {
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.km-node--text {
+  /* overflow hidden if needed */
+}
+
+.km-node--text text {
+  display: inline;
+}
+
+.km-node__text {
+  width: 100%;
+  height: 100%;
+  display: block;
+  box-sizing: border-box;
+  text-align: inherit;
+}
+
+.km-node__text-content {
+  display: inline-block;
+  vertical-align: middle;
+  height: 100%;
+}
+
+.km-node__text-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.km-node__text-value {
+  display: inline-block;
+  white-space: pre-wrap;
+  word-break: break-word;
+  vertical-align: middle;
+}
+
+@font-face {
+  font-family: 'km-icon';
+  src: url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAAEl4AA0AAAAAcmgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAABJXAAAABoAAAAcrMtJV0dERUYAAEk8AAAAHgAAAB4AKQByT1MvMgAAAaQAAABGAAAAYDw3SVljbWFwAAAC7AAAAM8AAAIW8XL3K2dhc3AAAEk0AAAACAAAAAj//wADZ2x5ZgAABJgAAEBZAABkZPJymXJoZWFkAAABMAAAADEAAAA2MtZiFmhoZWEAAAFkAAAAIAAAACQNagmCaG10eAAAAewAAAD/AAABqqs3Ii9sb2NhAAADvAAAANoAAADaKv0P7G1heHAAAAGEAAAAHwAAACABmQHEbmFtZQAARPQAAAFGAAACgl6CAQJwb3N0AABGPAAAAvUAAATh1g15W3jaY2BkYGAA4lqffPd4fpuvDNwsDCDwVIyfA0b///i/gXMWcyeQy8HABBIFAAVdCfwAAAB42mNgZGBgbvjfwBDDOfP/x///OWcxAEVQQCYAuxgH/XjaY2BkYGDIYdzBoMwAAkxAzAWEDAz/wXwGACjlAl8AeNpjYGFRYJzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnjE+y2Ju+N/AwMB8h6ERKMyIpESBgREAenQNCwAAeNo90cErBGEYx/Hf1LMH7MVxoigHtS600pzWnMjBlt2dFAeiNuWgXLgokgslbpyE/Aduyl38J3ty4aCs7/vOk6lPv+d5531n3nfGVF5JIZlUx9fAbawnEfIFq14/YhddFPjFmynZ9n4TbYzg2tcMW6Epr4NQT3jSJ2lcW9ec1fSEAheMnVume7KKBbQwiMye+5/kEpqYwQoOY59pn1xGw3Lt8NwHS7UY35frivqbet2fNYZp+4j76vj+GpUhjZJreLfxODecay/eTzVPzmIj9uX7VLnUmfdb/2fN4trcv0kYv8Oxe/V5Rzhg7inZ8wzjN5b0f6z8PV2d/AHivi0JAHja3dBFUoVRDITR88PD3d3d3d3d3d33zQqYwwVGbIGk8qV6kK7qIN7vlIsCRdlBRT865iPsWOig318/PwOjbwYd+7mKSZAoSbIUqdKky5ApS7YcufLkK1CoSLESpcqCZ4VKVarVqFWnXoNGTZq1aNWmXYdOXbr16NWn34BBQ4aNGDVm3IRJU6bNmDVn3oJFS5atWLVm3YZNW7bt2LVn34FDR46dOHXm3IVLV67duHXn3oNHT8Hv2YtXbyFaot9HfMeMC4jztyL/vr4AXx4eawAAAAAAAAAAAACwAPIDSgQ8BLIFUgWUBcIF/gY8BpIHCgdAB3wHoAgOCHAIxgk+CV4JzAnqCkQKrgtUC8QMEAxsDNQNFA1SDegONg6qDyQPgg/CEAIQxBEwEaQSHBLYE14T4hRcFPIVTBYMFkwWqBckGGAYxhmYGegaEBpeGuIbXhvwHPQd5B62Hygf6CBeILog9CFUIbgiBCJ0ItQjbCQSJGgkuCVsJcImKib0J44ocijOKSApUCo2KmQqtituK34sJixkLMgtdC3WLpgvPC+QMBww/DGCMagyMgAA') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+.icon {
+  font-family: 'km-icon' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.km-node__text-icon--wrapper{
+  display: inline-block;
+}