km-card-layout-component-miniprogram 0.1.8 → 0.1.10

package/miniprogram_dist/vendor/km-card-layout-core/render/helpers.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildTextIconMeta = exports.getIconName = exports.getImageSrc = exports.getTextValue = exports.buildImageContentStyle = exports.buildTextContentStyle = exports.buildPanelContentStyle = exports.buildBaseContentStyle = exports.buildBackgroundStyle = exports.buildCardStyle = exports.buildWrapperStyle = void 0;
+const helpers_1 = require("../helpers");
+const layout_1 = require("../layout");
+const data_1 = require("../data");
+const buildWrapperStyle = (el, unit = 'px') => {
+    const abs = (0, layout_1.getAbsLayout)(el);
+    if (!abs)
+        return {};
+    return {
+        position: 'absolute',
+        left: (0, helpers_1.addUnit)(abs.x, unit),
+        top: (0, helpers_1.addUnit)(abs.y, unit),
+        width: (0, helpers_1.addUnit)(abs.width, unit),
+        height: (0, helpers_1.addUnit)(abs.height, unit),
+        zIndex: abs.zIndex,
+        boxSizing: 'border-box',
+    };
+};
+exports.buildWrapperStyle = buildWrapperStyle;
+const buildCardStyle = (layout, unit = 'px') => ({
+    width: (0, helpers_1.addUnit)(layout.width, unit),
+    height: (0, helpers_1.addUnit)(layout.height, unit),
+    color: layout.fontColor,
+    borderRadius: layout.borderRadius !== undefined
+        ? (0, helpers_1.addUnit)(layout.borderRadius, unit)
+        : undefined,
+    padding: layout.padding !== undefined ? (0, helpers_1.addUnit)(layout.padding, unit) : undefined,
+    position: 'relative',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    backgroundColor: 'transparent',
+});
+exports.buildCardStyle = buildCardStyle;
+const buildBackgroundStyle = (layout, unit = 'px') => ({
+    zIndex: layout.backgroundZIndex,
+    borderRadius: layout.borderRadius !== undefined
+        ? (0, helpers_1.addUnit)(layout.borderRadius, unit)
+        : undefined,
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+});
+exports.buildBackgroundStyle = buildBackgroundStyle;
+const buildBaseContentStyle = (el) => ({
+    ...(el.style || {}),
+    boxSizing: 'border-box',
+});
+exports.buildBaseContentStyle = buildBaseContentStyle;
+const buildPanelContentStyle = (el, unit = 'px') => ({
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    boxSizing: 'border-box',
+    ...(el.style || {}),
+});
+exports.buildPanelContentStyle = buildPanelContentStyle;
+const buildTextContentStyle = (el, unit = 'px') => {
+    var _a, _b, _c, _d;
+    const textAlign = ((_a = el.style) === null || _a === void 0 ? void 0 : _a.textAlign) || el.align || undefined;
+    const style = {
+        ...(el.style || {}),
+        fontSize: (0, helpers_1.addUnit)((_b = el.style) === null || _b === void 0 ? void 0 : _b.fontSize, unit),
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+        lineHeight: ((_c = el.style) === null || _c === void 0 ? void 0 : _c.lineHeight) !== undefined && ((_d = el.style) === null || _d === void 0 ? void 0 : _d.lineHeight) !== null
+            ? (0, helpers_1.addUnit)(el.style.lineHeight, unit)
+            : '1',
+    };
+    if (textAlign)
+        style.textAlign = textAlign;
+    return style;
+};
+exports.buildTextContentStyle = buildTextContentStyle;
+const buildImageContentStyle = (el) => {
+    const style = { ...(el.style || {}) };
+    const borderWidth = Number(style.borderWidth);
+    if (Number.isFinite(borderWidth) && borderWidth > 0) {
+        if (!style.borderStyle)
+            style.borderStyle = 'solid';
+        if (!style.borderColor)
+            style.borderColor = '#000000';
+    }
+    return style;
+};
+exports.buildImageContentStyle = buildImageContentStyle;
+const getTextValue = (el, data) => {
+    const bound = el.binding && data ? (0, data_1.resolveBindingValue)(el.binding, data) : undefined;
+    const val = bound !== undefined && bound !== null
+        ? bound
+        : el.defaultValue !== undefined && el.defaultValue !== null
+            ? el.defaultValue
+            : '';
+    return `${val !== null && val !== void 0 ? val : ''}`;
+};
+exports.getTextValue = getTextValue;
+const getImageSrc = (el, data) => {
+    const bound = el.binding && data ? (0, data_1.resolveBindingValue)(el.binding, data) : undefined;
+    return bound || el.defaultUrl || el.defaultValue || '';
+};
+exports.getImageSrc = getImageSrc;
+const getIconName = (el) => (el.name || el.defaultValue || '');
+exports.getIconName = getIconName;
+const buildTextIconMeta = (el, unit = 'px') => {
+    var _a, _b, _c, _d, _e, _f;
+    const icon = el.icon;
+    const enabled = (icon === null || icon === void 0 ? void 0 : icon.enable) === true;
+    if (!icon || !enabled)
+        return null;
+    const style = icon.style || 'fill';
+    const baseName = icon.name || el.key || el.binding || el.id;
+    let name;
+    if (style === 'dot')
+        name = 'round';
+    else if (style === 'line')
+        name = baseName ? `${baseName}-line` : undefined;
+    else
+        name = baseName || undefined;
+    if (!name)
+        return null;
+    const size = icon.size !== undefined && icon.size !== null
+        ? icon.size
+        : (_a = el.style) === null || _a === void 0 ? void 0 : _a.fontSize;
+    const gap = icon.gap !== undefined && icon.gap !== null ? icon.gap : 4;
+    const color = (_b = icon.color) !== null && _b !== void 0 ? _b : (typeof ((_c = el.style) === null || _c === void 0 ? void 0 : _c.color) === 'string' ? el.style.color : undefined);
+    return {
+        name: `${name}`,
+        size: (0, helpers_1.addUnit)(size, unit),
+        gap: (0, helpers_1.addUnit)(gap, unit),
+        color,
+        align: icon.align || 'left',
+        wrapperStyle: {
+            height: ((_d = el.style) === null || _d === void 0 ? void 0 : _d.lineHeight) !== undefined && ((_e = el.style) === null || _e === void 0 ? void 0 : _e.lineHeight) !== null
+                ? (0, helpers_1.addUnit)(el.style.lineHeight, unit)
+                : (_f = el.style) === null || _f === void 0 ? void 0 : _f.fontSize,
+        },
+    };
+};
+exports.buildTextIconMeta = buildTextIconMeta;

package/miniprogram_dist/vendor/km-card-layout-core/render/tool.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildRenderData = void 0;
+const changeBackground_1 = require("../ops/changeBackground");
+const utils_1 = require("../utils");
+function buildRenderData(layout, items, config) {
+    // 绑定数据
+    let renderLayout = (0, utils_1.applyItemCollectBindings)(layout, items);
+    // 设置显示逻辑
+    renderLayout = (0, changeBackground_1.setElementVisible)(renderLayout, 'image', config.showAvatar);
+    renderLayout = (0, changeBackground_1.setElementVisible)(renderLayout, 'logo', config.showLogo);
+    // 设置背景
+    renderLayout = renderLayout.map((la, index) => config.currentBg[index] ? (0, changeBackground_1.backgroundChange)(config.currentBg[index], la) : la);
+    return renderLayout;
+}
+exports.buildRenderData = buildRenderData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "km-card-layout-component-miniprogram",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "",
   "main": "miniprogram_dist/index.js",
   "miniprogram": "miniprogram_dist",

package/script/sync-core.js

@@ -24,6 +24,9 @@ function ensureFileExists(filePath) {
 
 function syncCore() {
   ensureFileExists(coreRoot);
+  if (fs.existsSync(targetDir)) {
+    fs.rmSync(targetDir, { recursive: true, force: true });
+  }
   fs.mkdirSync(targetDir, { recursive: true });
 
   filesToCopy.forEach((fileName) => {

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

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

package/src/components/card-layout/elements/custom-element/index.ts

@@ -0,0 +1,34 @@
+import {
+  buildBaseContentStyle,
+  buildWrapperStyle,
+  styleObjectToString,
+  type CustomElement,
+} from '../../../../vendor/km-card-layout-core/index';
+
+Component({
+  options: {
+    styleIsolation: 'apply-shared',
+  },
+  properties: {
+    element: {
+      type: Object,
+      value: {},
+    },
+    rootData: {
+      type: Object,
+      value: {},
+    },
+  },
+  data: {
+    wrapperStyle: '',
+    contentStyle: '',
+  },
+  observers: {
+    element(el: CustomElement) {
+      if (!el) return;
+      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, 'rpx'), 'rpx');
+      const contentStyle = styleObjectToString(buildBaseContentStyle(el), 'rpx');
+      this.setData({ wrapperStyle, contentStyle });
+    },
+  },
+});

package/src/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/src/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/src/components/card-layout/elements/icon-element/index.json

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

package/src/components/card-layout/elements/icon-element/index.ts

@@ -0,0 +1,46 @@
+import {
+  buildBaseContentStyle,
+  buildWrapperStyle,
+  getIconName,
+  styleObjectToString,
+  type IconElement,
+} from '../../../../vendor/km-card-layout-core/index';
+import { ICON_CODE_MAP } from '../../icon-map';
+
+const mapIconGlyph = (name?: string, fallback?: string) => {
+  if (!name) return fallback;
+  const glyph = 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: {},
+    },
+    rootData: {
+      type: Object,
+      value: {},
+    },
+  },
+  data: {
+    wrapperStyle: '',
+    contentStyle: '',
+    iconText: '',
+  },
+  observers: {
+    element(el: IconElement) {
+      if (!el) return;
+      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, 'rpx'), 'rpx');
+      const contentStyle = styleObjectToString(buildBaseContentStyle(el), 'rpx');
+      const name = getIconName(el);
+      const iconText = mapIconGlyph(name, name || '');
+      this.setData({ wrapperStyle, contentStyle, iconText });
+    },
+  },
+});

package/src/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/src/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/src/components/card-layout/elements/image-element/index.json

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

package/src/components/card-layout/elements/image-element/index.ts

@@ -0,0 +1,40 @@
+import {
+  buildImageContentStyle,
+  buildWrapperStyle,
+  getImageSrc,
+  styleObjectToString,
+  type ImageElement,
+} from '../../../../vendor/km-card-layout-core/index';
+
+Component({
+  options: {
+    styleIsolation: 'apply-shared',
+  },
+  properties: {
+    element: {
+      type: Object,
+      value: {},
+    },
+    rootData: {
+      type: Object,
+      value: {},
+    },
+  },
+  data: {
+    wrapperStyle: '',
+    contentStyle: '',
+    imageSrc: '',
+    mode: 'aspectFill',
+  },
+  observers: {
+    element(el: ImageElement) {
+      if (!el) return;
+      const data: Record<string, any> = this.data.rootData || {};
+      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, 'rpx'), 'rpx');
+      const contentStyle = styleObjectToString(buildImageContentStyle(el), 'rpx');
+      const imageSrc = getImageSrc(el, data);
+      const mode = el.fit === 'contain' ? 'aspectFit' : 'aspectFill';
+      this.setData({ wrapperStyle, contentStyle, imageSrc, mode });
+    },
+  },
+});

package/src/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/src/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/src/components/card-layout/elements/text-element/index.json

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

package/src/components/card-layout/elements/text-element/index.ts

@@ -0,0 +1,57 @@
+import {
+  buildTextContentStyle,
+  buildTextIconMeta,
+  buildWrapperStyle,
+  getTextValue,
+  styleObjectToString,
+  type TextElement,
+} from '../../../../vendor/km-card-layout-core/index';
+import { ICON_CODE_MAP } from '../../icon-map';
+
+const mapIconGlyph = (name?: string, fallback?: string) => {
+  if (!name) return fallback;
+  const glyph = 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: {},
+    },
+    rootData: {
+      type: Object,
+      value: {},
+    },
+  },
+  data: {
+    wrapperStyle: '',
+    contentStyle: '',
+    textValue: '',
+    iconMeta: null as any,
+  },
+  observers: {
+    element(el: TextElement) {
+      if (!el) return;
+      const data: Record<string, any> = this.data.rootData || {};
+      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, 'rpx'), 'rpx');
+      const contentStyle = styleObjectToString(buildTextContentStyle(el, 'rpx'), 'rpx');
+      const textValue = getTextValue(el, data);
+      const iconRaw = buildTextIconMeta(el, 'rpx');
+      const iconMeta =
+        iconRaw && iconRaw.name
+          ? {
+              ...iconRaw,
+              text: mapIconGlyph(iconRaw.name, iconRaw.name),
+              wrapperStyle: styleObjectToString(iconRaw.wrapperStyle, 'rpx'),
+            }
+          : iconRaw;
+      this.setData({ wrapperStyle, contentStyle, textValue, iconMeta });
+    },
+  },
+});

package/src/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/src/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;
+}

package/src/components/card-layout/index.json

@@ -1,3 +1,9 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "text-element": "./elements/text-element/index",
+    "image-element": "./elements/image-element/index",
+    "icon-element": "./elements/icon-element/index",
+    "custom-element": "./elements/custom-element/index"
+  }
 }