(TAG_NAME, { ...params }, children);
diff --git a/packages/ui-library/src/components/ui/divider/index.stories.ts b/packages/ui-library/src/components/ui/divider/index.stories.ts
index a3042776c..1744e36b4 100644
--- a/packages/ui-library/src/components/ui/divider/index.stories.ts
+++ b/packages/ui-library/src/components/ui/divider/index.stories.ts
@@ -1,5 +1,6 @@
import { html } from 'lit-html';
-import { BlrDividerRenderFunction, BlrDividerType } from './index';
+import { BlrDividerType } from './index';
+import { BlrDividerRenderFunction } from './renderFunction';
import { DividerVariations } from '../../../globals/constants';
import { Themes } from '../../../foundation/_tokens-generated/index.themes';
diff --git a/packages/ui-library/src/components/ui/divider/index.test.ts b/packages/ui-library/src/components/ui/divider/index.test.ts
index f22e993f7..ce2d72718 100644
--- a/packages/ui-library/src/components/ui/divider/index.test.ts
+++ b/packages/ui-library/src/components/ui/divider/index.test.ts
@@ -1,17 +1,20 @@
-import { BlrDividerRenderFunction } from './index';
+import { BlrDividerRenderFunction } from '@boiler/ui-library/dist/';
+import type { BlrDividerType } from '@boiler/ui-library/dist/';
import { fixture, expect } from '@open-wc/testing';
import { querySelectorDeep } from 'query-selector-shadow-dom';
+const sampleParams: BlrDividerType = { theme: 'Light', directionVariant: 'vertical' };
+
describe('blr-divider', () => {
it('renders a element inside Shadow DOM', async () => {
- const element = await fixture(BlrDividerRenderFunction({ theme: 'Light', directionVariant: 'vertical' }));
+ const element = await fixture(BlrDividerRenderFunction(sampleParams));
const dividerDiv = querySelectorDeep('div.blr-divider', element.getRootNode() as HTMLElement);
expect(dividerDiv).to.exist;
});
it('is having a div with classname blr-divider', async () => {
- const element = await fixture(BlrDividerRenderFunction({ theme: 'Light', directionVariant: 'vertical' }));
+ const element = await fixture(BlrDividerRenderFunction(sampleParams));
const dividerDiv = querySelectorDeep('.blr-divider', element.getRootNode() as HTMLElement);
const className = dividerDiv?.className;
@@ -19,7 +22,7 @@ describe('blr-divider', () => {
});
it('should render vertical line', async () => {
- const element = await fixture(BlrDividerRenderFunction({ theme: 'Light', directionVariant: 'vertical' }));
+ const element = await fixture(BlrDividerRenderFunction(sampleParams));
const dividerDiv = querySelectorDeep('.blr-divider', element.getRootNode() as HTMLElement);
const className = dividerDiv?.className;
@@ -27,7 +30,7 @@ describe('blr-divider', () => {
});
it('should render horizontal line', async () => {
- const element = await fixture(BlrDividerRenderFunction({ theme: 'Light', directionVariant: 'horizontal' }));
+ const element = await fixture(BlrDividerRenderFunction({ ...sampleParams, directionVariant: 'horizontal' }));
const dividerDiv = querySelectorDeep('.blr-divider', element.getRootNode() as HTMLElement);
const className = dividerDiv?.className;
diff --git a/packages/ui-library/src/components/ui/divider/index.ts b/packages/ui-library/src/components/ui/divider/index.ts
index 02ca26945..2ae2935ac 100644
--- a/packages/ui-library/src/components/ui/divider/index.ts
+++ b/packages/ui-library/src/components/ui/divider/index.ts
@@ -2,11 +2,10 @@ import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { DividerVariationTypes } from '../../../globals/types';
import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
import { classMap } from 'lit/directives/class-map.js';
import { dividerDark, dividerLight } from './index.css';
-const TAG_NAME = 'blr-divider';
+export const TAG_NAME = 'blr-divider';
@customElement(TAG_NAME)
export class BlrDivider extends LitElement {
@@ -31,6 +30,3 @@ export class BlrDivider extends LitElement {
}
export type BlrDividerType = Omit;
-
-export const BlrDividerRenderFunction = (params: BlrDividerType) =>
- genericBlrComponentRenderer(TAG_NAME, { ...params });
diff --git a/packages/ui-library/src/components/ui/divider/renderFunction.ts b/packages/ui-library/src/components/ui/divider/renderFunction.ts
new file mode 100644
index 000000000..2ca977360
--- /dev/null
+++ b/packages/ui-library/src/components/ui/divider/renderFunction.ts
@@ -0,0 +1,5 @@
+import { BlrDividerType, TAG_NAME } from '.';
+import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+
+export const BlrDividerRenderFunction = (params: BlrDividerType) =>
+ genericBlrComponentRenderer(TAG_NAME, { ...params });
diff --git a/packages/ui-library/src/components/ui/icon/icon-link/index.stories.ts b/packages/ui-library/src/components/ui/icon/icon-link/index.stories.ts
index 4cab73a69..140fe547b 100644
--- a/packages/ui-library/src/components/ui/icon/icon-link/index.stories.ts
+++ b/packages/ui-library/src/components/ui/icon/icon-link/index.stories.ts
@@ -1,5 +1,6 @@
/* eslint-disable no-console */
-import { BlrIconLinkType, BlrIconLinkRenderFunction } from './index';
+import { BlrIconLinkType } from './index';
+import { BlrIconLinkRenderFunction } from './renderFunction';
import { PureIconKeys } from '@boiler/icons';
import { ActionVariants, ActionSizes } from '../../../../globals/constants';
import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
diff --git a/packages/ui-library/src/components/ui/icon/icon-link/index.test.ts b/packages/ui-library/src/components/ui/icon/icon-link/index.test.ts
index bd49cd108..e800720a3 100644
--- a/packages/ui-library/src/components/ui/icon/icon-link/index.test.ts
+++ b/packages/ui-library/src/components/ui/icon/icon-link/index.test.ts
@@ -1,4 +1,5 @@
-import { BlrIconLinkType, BlrIconLinkRenderFunction } from './index';
+import { BlrIconLinkRenderFunction } from '@boiler/ui-library/dist/';
+import type { BlrIconLinkType } from '@boiler/ui-library/dist/';
import { fixture, expect } from '@open-wc/testing';
import { querySelectorDeep } from 'query-selector-shadow-dom';
diff --git a/packages/ui-library/src/components/ui/icon/icon-link/index.ts b/packages/ui-library/src/components/ui/icon/icon-link/index.ts
index bd85b52a0..fdfadd33a 100644
--- a/packages/ui-library/src/components/ui/icon/icon-link/index.ts
+++ b/packages/ui-library/src/components/ui/icon/icon-link/index.ts
@@ -7,13 +7,12 @@ import { styleCustom as iconButtonStyleCustom } from '../../../actions/buttons/i
import { actionDark, actionLight } from '../../../../foundation/semantic-tokens/action.css';
import { ActionVariantType, ActionSizesType, SizesType, FormSizesType } from '../../../../globals/types';
import { determineLoaderVariant } from '../../../../utils/determine-loader-variant';
-import { BlrIconRenderFunction } from '..';
+import { BlrIconRenderFunction } from '../renderFunction';
import { calculateIconName } from '../../../../utils/calculate-icon-name';
-import { BlrLoaderRenderFunction } from '../../../feedback/loader';
+import { BlrLoaderRenderFunction } from '../../../feedback/loader/renderFunction';
import { ThemeType } from '../../../../foundation/_tokens-generated/index.themes';
-import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-component-renderer';
-const TAG_NAME = 'blr-icon-link';
+export const TAG_NAME = 'blr-icon-link';
import { getComponentConfigToken } from '../../../../utils/get-component-config-token';
@customElement(TAG_NAME)
@@ -79,17 +78,18 @@ export class BlrIconLink extends LitElement {
loadingStatus: this.loadingStatus,
theme: this.theme,
})
- : BlrIconRenderFunction({
- icon: calculateIconName(this.icon, iconSizeVariant),
- size: iconSizeVariant,
- hideAria: true,
- })}
+ : BlrIconRenderFunction(
+ {
+ icon: calculateIconName(this.icon, iconSizeVariant),
+ size: iconSizeVariant,
+ },
+ {
+ 'aria-hidden': true,
+ }
+ )}
`;
}
}
}
export type BlrIconLinkType = Omit;
-
-export const BlrIconLinkRenderFunction = (params: BlrIconLinkType) =>
- genericBlrComponentRenderer(TAG_NAME, { ...params });
diff --git a/packages/ui-library/src/components/ui/icon/icon-link/renderFunction.ts b/packages/ui-library/src/components/ui/icon/icon-link/renderFunction.ts
new file mode 100644
index 000000000..53289e332
--- /dev/null
+++ b/packages/ui-library/src/components/ui/icon/icon-link/renderFunction.ts
@@ -0,0 +1,5 @@
+import { BlrIconLinkType, TAG_NAME } from '.';
+import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-component-renderer';
+
+export const BlrIconLinkRenderFunction = (params: BlrIconLinkType) =>
+ genericBlrComponentRenderer(TAG_NAME, { ...params });
diff --git a/packages/ui-library/src/components/ui/icon/index.css.ts b/packages/ui-library/src/components/ui/icon/index.css.ts
index 31ae8a333..32e38433c 100644
--- a/packages/ui-library/src/components/ui/icon/index.css.ts
+++ b/packages/ui-library/src/components/ui/icon/index.css.ts
@@ -17,31 +17,35 @@ export const styleCustom = typeSafeNestedCss`
display: inline-flex;
flex-shrink: 0;
- .blr-icon.full {
+ .blr-icon {
+ line-height: 0;
+ }
+
+ .blr-icon.full > svg {
width: 100%;
}
- .blr-icon.xxs {
+ .blr-icon.xxs > svg {
width: ${UI.Icon.Container.Size.XXS};
}
- .blr-icon.xs {
+ .blr-icon.xs > svg {
width: ${UI.Icon.Container.Size.XS};
}
- .blr-icon.sm {
+ .blr-icon.sm > svg {
width: ${UI.Icon.Container.Size.SM};
}
- .blr-icon.md {
+ .blr-icon.md > svg {
width: ${UI.Icon.Container.Size.MD};
}
- .blr-icon.lg {
+ .blr-icon.lg > svg {
width: ${UI.Icon.Container.Size.LG};
}
- .blr-icon.xl {
+ .blr-icon.xl > svg {
width: ${UI.Icon.Container.Size.XL};
}
}
diff --git a/packages/ui-library/src/components/ui/icon/index.stories.ts b/packages/ui-library/src/components/ui/icon/index.stories.ts
index b27d333f8..4a6355d27 100644
--- a/packages/ui-library/src/components/ui/icon/index.stories.ts
+++ b/packages/ui-library/src/components/ui/icon/index.stories.ts
@@ -1,7 +1,9 @@
import { html } from 'lit-html';
import { IconKeys } from '@boiler/icons';
-import { BlrIconType, BlrIconRenderFunction } from './index';
+import { BlrIconType } from './index';
+import { BlrIconRenderFunction } from './renderFunction';
+
import { Sizes } from '../../../globals/constants';
import { getIconName } from '../../../utils/get-icon-name';
import { calculateIconName } from '../../../utils/calculate-icon-name';
diff --git a/packages/ui-library/src/components/ui/icon/index.test.ts b/packages/ui-library/src/components/ui/icon/index.test.ts
index 9ea90cf0d..a100d9073 100644
--- a/packages/ui-library/src/components/ui/icon/index.test.ts
+++ b/packages/ui-library/src/components/ui/icon/index.test.ts
@@ -1,18 +1,22 @@
/* eslint-disable @typescript-eslint/await-thenable */
+import { BlrIconRenderFunction } from '@boiler/ui-library/dist/';
+import type { BlrIconType } from '@boiler/ui-library/dist/';
+
import { fixture, expect } from '@open-wc/testing';
-import { BlrIconRenderFunction } from '.';
import { classMap } from 'lit/directives/class-map.js';
import { querySelectorDeep } from 'query-selector-shadow-dom';
const TEST_CLASS = 'test-class';
+const sampleParams: BlrIconType = { size: 'md' };
+
describe('blr-icon', () => {
it('containing the right className', async () => {
const classes = classMap({
[`${TEST_CLASS}`]: true,
});
- const element = await fixture(BlrIconRenderFunction({ size: 'md', classMap: classes }));
+ const element = await fixture(BlrIconRenderFunction({ ...sampleParams, classMap: classes }));
await expect(element.className).to.contain(TEST_CLASS);
});
@@ -20,19 +24,19 @@ describe('blr-icon', () => {
describe('blr-icon', () => {
it('svg contains md class if size is set to md and ignoreSize is false', async () => {
- const element = await fixture(BlrIconRenderFunction({ size: 'md', ignoreSize: false }));
- const svgElement = querySelectorDeep('svg', element?.getRootNode() as HTMLElement);
- const className = svgElement?.getAttribute('class'); // you can not use className here
+ const element = await fixture(BlrIconRenderFunction({ ...sampleParams, ignoreSize: false }));
+ const svgParentElement = querySelectorDeep('.blr-icon', element?.getRootNode() as HTMLElement);
+ const className = svgParentElement?.getAttribute('class'); // you can not use className here
await expect(className).to.contain('md');
});
});
describe('blr-icon', () => {
- it('svg does not contain md class if size is set to md and ignoreSize is false', async () => {
- const element = await fixture(BlrIconRenderFunction({ size: 'md', ignoreSize: true }));
- const svgElement = querySelectorDeep('svg', element?.getRootNode() as HTMLElement);
- const className = svgElement?.getAttribute('class'); // you can not use className here
+ it('svg does not contain md class if size is set to md and ignoreSize is true', async () => {
+ const element = await fixture(BlrIconRenderFunction({ ...sampleParams, ignoreSize: true }));
+ const svgParentElement = querySelectorDeep('.blr-icon', element?.getRootNode() as HTMLElement);
+ const className = svgParentElement?.getAttribute('class'); // you can not use className here
await expect(className).to.not.contain('md');
});
diff --git a/packages/ui-library/src/components/ui/icon/index.ts b/packages/ui-library/src/components/ui/icon/index.ts
index e0a57bda9..ea21d023c 100644
--- a/packages/ui-library/src/components/ui/icon/index.ts
+++ b/packages/ui-library/src/components/ui/icon/index.ts
@@ -1,13 +1,14 @@
-import { LitElement, html, nothing } from 'lit';
+import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { IconMapping, IconType } from '@boiler/icons';
import { styleCustom } from './index.css';
import { SizesType } from '../../../globals/types';
import { DirectiveResult } from 'lit-html/directive';
import { ClassMapDirective } from 'lit-html/directives/class-map';
-import { styleMap } from 'lit/directives/style-map.js';
+import { until } from 'lit-html/directives/until.js';
+import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
-const TAG_NAME = 'blr-icon';
+export const TAG_NAME = 'blr-icon';
@customElement(TAG_NAME)
export class BlrIcon extends LitElement {
@@ -17,20 +18,55 @@ export class BlrIcon extends LitElement {
@property() size: SizesType = 'md';
@property() ignoreSize?: boolean = false;
+ @property() onClick?: () => void;
+
+ @property() classMap?: DirectiveResult;
protected render() {
const sizeKey = this.ignoreSize ? 'full' : this.size.toLowerCase();
+ const unfullfilledRenderResult = html` {
+ if (event.code === 'Space') {
+ this.onClick?.();
+ }
+ }}
+ class="blr-icon ${sizeKey}"
+ >
+
+ `;
+
if (IconMapping.hasOwnProperty(this.icon) && typeof IconMapping[this.icon] === 'function') {
- return html`${IconMapping[this.icon](`blr-icon ${sizeKey}`)}`;
+ const importedIcon = IconMapping[this.icon]();
+
+ const fullfilledRenderResult = importedIcon
+ .then((iconModule) => {
+ return html` {
+ if (event.code === 'Space') {
+ this.onClick?.();
+ }
+ }}
+ class="blr-icon ${sizeKey}"
+ >${unsafeSVG(iconModule.default)}`;
+ })
+ // eslint-disable-next-line no-console
+ .catch((err) => console.error(err.message));
+
+ return until(fullfilledRenderResult, unfullfilledRenderResult);
} else {
- return nothing;
+ return unfullfilledRenderResult;
}
}
}
// BlrIconType is a new Type containing all properties of BlrIcon without the properties of LitElement
// and some additional properties which are not part of the component, so we dont use the generic render function
+
+/*
export type BlrIconType = Partial> & {
classMap?: DirectiveResult;
onClick?: HTMLElement['onclick'];
@@ -38,25 +74,6 @@ export type BlrIconType = Partial> & {
name?: string;
disablePointerEvents?: boolean;
};
+*/
-export const BlrIconRenderFunction = ({
- icon,
- size,
- classMap,
- onClick,
- hideAria,
- name,
- disablePointerEvents,
- ignoreSize,
-}: BlrIconType) => {
- return html``;
-};
+export type BlrIconType = Partial>;
diff --git a/packages/ui-library/src/components/ui/icon/renderFunction.ts b/packages/ui-library/src/components/ui/icon/renderFunction.ts
new file mode 100644
index 000000000..33b88b582
--- /dev/null
+++ b/packages/ui-library/src/components/ui/icon/renderFunction.ts
@@ -0,0 +1,31 @@
+import { BlrIconType, TAG_NAME } from '.';
+import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+
+/*
+export const BlrIconRenderFunction = ({
+ icon,
+ size,
+ classMap,
+ onClick,
+ hideAria,
+ name,
+ disablePointerEvents,
+ ignoreSize,
+}: BlrIconType) => {
+ return html``;
+};
+*/
+
+export const BlrIconRenderFunction = (
+ params: BlrIconType,
+ htmlAttributes?: { [s: string]: string | boolean | number }
+) => genericBlrComponentRenderer(TAG_NAME, { ...params }, undefined, htmlAttributes);
diff --git a/packages/ui-library/src/index.ts b/packages/ui-library/src/index.ts
index ddf55893f..34f46f88d 100644
--- a/packages/ui-library/src/index.ts
+++ b/packages/ui-library/src/index.ts
@@ -1,10 +1,112 @@
-export { BlrTextButton } from './components/actions/buttons/text-button/index';
-export { BlrCheckbox } from './components/forms/checkbox/index';
-export { BlrRadio } from './components/forms/radio/radio-input/index';
-export { BlrTextInput } from './components/forms/text-input/index';
-export { BlrTabBar } from './components/navigation/tab-bar/index';
-export { BlrTextarea } from './components/forms/textarea/index';
+// Actions
+export { BlrIconButton } from './components/actions/buttons/icon-button';
+export { BlrIconButtonRenderFunction } from './components/actions/buttons/icon-button/renderFunction';
+export type { BlrIconButtonType } from './components/actions/buttons/icon-button';
-export type { IconType } from '@boiler/icons/index';
+export { BlrTextButton } from './components/actions/buttons/text-button';
+export { BlrTextButtonRenderFunction } from './components/actions/buttons/text-button/renderFunction';
+export type { BlrTextButtonType } from './components/actions/buttons/text-button';
-export { IconMapping } from '@boiler/icons/index';
+// Feedback
+export { BlrLoader } from './components/feedback/loader';
+export { BlrLoaderRenderFunction } from './components/feedback/loader/renderFunction';
+export type { BlrLoaderType } from './components/feedback/loader';
+
+export { BlrTooltipBubble } from './components/feedback/tooltip/tooltip-bubble';
+export { BlrTooltipBubbleRenderFunction } from './components/feedback/tooltip/tooltip-bubble/renderFunction';
+export type { BlrTooltipBubbleType } from './components/feedback/tooltip/tooltip-bubble';
+
+export { BlrTooltip } from './components/feedback/tooltip';
+export { BlrTooltipRenderFunction } from './components/feedback/tooltip/renderFunction';
+export type { BlrTooltipType } from './components/feedback/tooltip';
+
+// Forms
+export { BlrCheckbox } from './components/forms/checkbox';
+export { BlrCheckboxRenderFunction } from './components/forms/checkbox/renderFunction';
+export type { BlrCheckboxType } from './components/forms/checkbox';
+
+export { BlrNumberInput } from './components/forms/number-input';
+export { BlrNumberInputRenderFunction } from './components/forms/number-input/renderFunction';
+export type { BlrNumberInputType } from './components/forms/number-input';
+
+export { BlrRadio } from './components/forms/radio/radio-input';
+export { BlrRadioRenderFunction } from './components/forms/radio/radio-input/renderFunction';
+export type { BlrRadioType } from './components/forms/radio/radio-input';
+
+export { BlrRadioGroup } from './components/forms/radio/radio-input-group';
+export { BlrRadioGroupRenderFunction } from './components/forms/radio/radio-input-group/renderFunction';
+export type { BlrRadioGroupType } from './components/forms/radio/radio-input-group';
+
+export { BlrSelect } from './components/forms/select';
+export { BlrSelectRenderFunction } from './components/forms/select/renderFunction';
+export type { BlrSelectType } from './components/forms/select';
+
+export { BlrRangeSlider } from './components/forms/slider/slider-single-value/range-slider';
+export { BlrRangeSliderRenderFunction } from './components/forms/slider/slider-single-value/range-slider/renderFunction';
+export type { BlrRangeSliderType } from './components/forms/slider/slider-single-value/range-slider';
+
+export { BlrRangeLegendSlider } from './components/forms/slider/slider-single-value/range-legend-slider';
+export { BlrRangeLegendSliderRenderFunction } from './components/forms/slider/slider-single-value/range-legend-slider/renderFunction';
+export type { BlrRangeLegendSliderType } from './components/forms/slider/slider-single-value/range-legend-slider';
+
+export { BlrRangeMinMaxSlider } from './components/forms/slider/slider-two-values/range-min-max-slider';
+export { BlrRangeMinMaxSliderRenderFunction } from './components/forms/slider/slider-two-values/range-min-max-slider/renderFunction';
+export type { BlrRangeMinMaxSliderType } from './components/forms/slider/slider-two-values/range-min-max-slider';
+
+export { BlrRangeLegendMinMaxSlider } from './components/forms/slider/slider-two-values/range-legend-min-max-slider';
+export { BlrRangeLegendMinMaxSliderRenderFunction } from './components/forms/slider/slider-two-values/range-legend-min-max-slider/renderFunction';
+export type { BlrRangeLegendMinMaxSliderType } from './components/forms/slider/slider-two-values/range-legend-min-max-slider';
+
+export { BlrTextInput } from './components/forms/text-input';
+export { BlrTextInputRenderFunction } from './components/forms/text-input/renderFunction';
+export type { BlrTextInputType } from './components/forms/text-input';
+
+export { BlrTextarea } from './components/forms/textarea';
+export { BlrTextareaRenderFunction } from './components/forms/textarea/renderFunction';
+export type { BlrTextareaType } from './components/forms/textarea';
+
+export { BlrToggleSwitch } from './components/forms/toggle-switch';
+export { BlrToggleSwitchRenderFunction } from './components/forms/toggle-switch/renderFunction';
+export type { BlrToggleSwitchType } from './components/forms/toggle-switch';
+
+// Internal
+export { BlrCounter } from './components/internal-components/counter';
+export { BlrCounterRenderFunction } from './components/internal-components/counter/renderFunction';
+export type { BlrCounterType } from './components/internal-components/counter';
+
+export { BlrFormCaptionGroup } from './components/internal-components/form-caption-group';
+export { BlrFormCaptionGroupRenderFunction } from './components/internal-components/form-caption-group/renderFunction';
+export type { BlrFormCaptionGroupType } from './components/internal-components/form-caption-group';
+
+export { BlrFormCaption } from './components/internal-components/form-caption-group/form-caption';
+export { BlrFormCaptionRenderFunction } from './components/internal-components/form-caption-group/form-caption/renderFunction';
+export type { BlrFormCaptionType } from './components/internal-components/form-caption-group/form-caption';
+
+export { BlrFormLabel } from './components/internal-components/form-label';
+export { BlrFormLabelRenderFunction } from './components/internal-components/form-label/renderFunction';
+export type { BlrFormLabelType } from './components/internal-components/form-label';
+
+export { BlrFormLabelInlineRenderFunction } from './components/internal-components/form-label/form-label-inline/renderFunction';
+export type { BlrFormLabelInlineType } from './components/internal-components/form-label/form-label-inline';
+
+// Navigation
+export { BlrTabBar } from './components/navigation/tab-bar';
+export { BlrTabBarRenderFunction } from './components/navigation/tab-bar/renderFunction';
+export type { BlrTabBarType } from './components/navigation/tab-bar';
+
+// UI
+export { BlrButtonGroup } from './components/ui/button-group';
+export { BlrButtonGroupFunction } from './components/ui/button-group/renderFunction';
+export type { BlrButtonGroupType } from './components/ui/button-group';
+
+export { BlrDivider } from './components/ui/divider';
+export { BlrDividerRenderFunction } from './components/ui/divider/renderFunction';
+export type { BlrDividerType } from './components/ui/divider';
+
+export { BlrIcon } from './components/ui/icon';
+export { BlrIconRenderFunction } from './components/ui/icon/renderFunction';
+export type { BlrIconType } from './components/ui/icon';
+
+export { BlrIconLink } from './components/ui/icon/icon-link';
+export { BlrIconLinkRenderFunction } from './components/ui/icon/icon-link/renderFunction';
+export type { BlrIconLinkType } from './components/ui/icon/icon-link';
diff --git a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
index 9236fabd8..50f53249a 100644
--- a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
+++ b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
@@ -3,30 +3,51 @@ import { TemplateResult, html } from 'lit';
export const genericBlrComponentRenderer = >(
tagName: string,
props: ComponentType,
- children?: TemplateResult<1>
+ children?: TemplateResult<1>,
+ htmlAttributes?: { [s: string]: string | boolean | number }
): TemplateResult<1> => {
const templateFragments: string[] = [];
const values: unknown[] = [];
- const entries = Object.entries(props);
+ const propEntries = Object.entries(props);
+ const attrEntries = Object.entries(htmlAttributes || {});
- entries.forEach(([key, value], index) => {
- if (typeof value !== 'function') {
+ // we will get rid of the dots later on by defining bindings within the component property decorator
+ propEntries.forEach(([key, value], index) => {
+ if (typeof value === 'function') {
if (index === 0) {
- templateFragments.push(`<${tagName} .${key}=`);
+ templateFragments.push(`<${tagName} @${key}=`);
} else {
- templateFragments.push(` .${key}=`);
+ templateFragments.push(` @${key}=`);
+ }
+ } else if (key === 'classMap') {
+ if (index === 0) {
+ templateFragments.push(`<${tagName} class=`);
+ } else {
+ templateFragments.push(` class=`);
}
} else {
if (index === 0) {
- templateFragments.push(`<${tagName} @${key}=`);
+ templateFragments.push(`<${tagName} .${key}=`);
} else {
- templateFragments.push(` @${key}=`);
+ templateFragments.push(` .${key}=`);
}
}
values.push(value);
});
+ attrEntries.forEach(([key, value], index) => {
+ if (typeof value !== 'boolean' || value === true) {
+ if (index === 0 && propEntries.length === 0) {
+ templateFragments.push(`<${tagName} ${key}=`);
+ } else {
+ templateFragments.push(` ${key}=`);
+ }
+
+ values.push(value);
+ }
+ });
+
if (children) {
templateFragments.push(`>`);
values.push(children);
diff --git a/packages/ui-library/tsconfig.json b/packages/ui-library/tsconfig.json
index 70bc31691..b8a2732a3 100644
--- a/packages/ui-library/tsconfig.json
+++ b/packages/ui-library/tsconfig.json
@@ -7,7 +7,7 @@
"allowSyntheticDefaultImports": true,
"emitDeclarationOnly": true,
"sourceMap": true,
- "module": "es2015",
+ "module": "es2020",
"target": "es2020",
"jsx": "react",
"allowJs": true,
@@ -17,5 +17,5 @@
"useDefineForClassFields": false
},
"include": ["src"],
- "exclude": [""]
+ "exclude": ["src/**/*.test.ts", "src/**/*.stories.ts"]
}
diff --git a/packages/ui-library/webpack.common.js b/packages/ui-library/webpack.common.js
index 630a8e00c..9cbd490ec 100644
--- a/packages/ui-library/webpack.common.js
+++ b/packages/ui-library/webpack.common.js
@@ -10,9 +10,18 @@ module.exports = {
optimization: {
usedExports: true,
},
+ experiments: {
+ outputModule: true,
+ },
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
+ chunkFilename: (pathData) => {
+ return pathData.chunk.name === 'main' ? '[name].js' : 'chunk_[name].js';
+ },
+ library: {
+ type: 'module',
+ },
},
module: {
rules: [
@@ -23,10 +32,13 @@ module.exports = {
loader: 'babel-loader',
},
},
+ {
+ test: /\.svg$/,
+ },
],
},
resolve: {
- extensions: ['.ts', '.js'],
+ extensions: ['.ts', '.js', '.svg'],
},
plugins: [
new CleanWebpackPlugin(),
diff --git a/yarn.lock b/yarn.lock
index 8c09f4b9d..8803569cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1586,6 +1586,7 @@ __metadata:
postcss-lit: "npm:^1.0.1"
prettier: "npm:2.8.3"
query-selector-shadow-dom: "npm:^1.0.1"
+ raw-loader: "npm:^4.0.2"
react: "npm:^18.2.0"
react-dom: "npm:^18.2.0"
rimraf: "npm:^5.0.5"
@@ -6675,6 +6676,13 @@ __metadata:
languageName: node
linkType: hard
+"big.js@npm:^5.2.2":
+ version: 5.2.2
+ resolution: "big.js@npm:5.2.2"
+ checksum: 230520f1ff920b2d2ce3e372d77a33faa4fa60d802fe01ca4ffbc321ee06023fe9a741ac02793ee778040a16b7e497f7d60c504d1c402b8fdab6f03bb785a25f
+ languageName: node
+ linkType: hard
+
"binary-extensions@npm:^2.0.0":
version: 2.2.0
resolution: "binary-extensions@npm:2.2.0"
@@ -8354,6 +8362,13 @@ __metadata:
languageName: node
linkType: hard
+"emojis-list@npm:^3.0.0":
+ version: 3.0.0
+ resolution: "emojis-list@npm:3.0.0"
+ checksum: 7dc4394b7b910444910ad64b812392159a21e1a7ecc637c775a440227dcb4f80eff7fe61f4453a7d7603fa23d23d30cc93fe9e4b5ed985b88d6441cd4a35117b
+ languageName: node
+ linkType: hard
+
"encodeurl@npm:^1.0.2, encodeurl@npm:~1.0.2":
version: 1.0.2
resolution: "encodeurl@npm:1.0.2"
@@ -11664,7 +11679,7 @@ __metadata:
languageName: node
linkType: hard
-"json5@npm:^2.2.2, json5@npm:^2.2.3":
+"json5@npm:^2.1.2, json5@npm:^2.2.2, json5@npm:^2.2.3":
version: 2.2.3
resolution: "json5@npm:2.2.3"
bin:
@@ -12053,6 +12068,17 @@ __metadata:
languageName: node
linkType: hard
+"loader-utils@npm:^2.0.0":
+ version: 2.0.4
+ resolution: "loader-utils@npm:2.0.4"
+ dependencies:
+ big.js: "npm:^5.2.2"
+ emojis-list: "npm:^3.0.0"
+ json5: "npm:^2.1.2"
+ checksum: d5654a77f9d339ec2a03d88221a5a695f337bf71eb8dea031b3223420bb818964ba8ed0069145c19b095f6c8b8fd386e602a3fc7ca987042bd8bb1dcc90d7100
+ languageName: node
+ linkType: hard
+
"locate-path@npm:^3.0.0":
version: 3.0.0
resolution: "locate-path@npm:3.0.0"
@@ -14322,6 +14348,18 @@ __metadata:
languageName: node
linkType: hard
+"raw-loader@npm:^4.0.2":
+ version: 4.0.2
+ resolution: "raw-loader@npm:4.0.2"
+ dependencies:
+ loader-utils: "npm:^2.0.0"
+ schema-utils: "npm:^3.0.0"
+ peerDependencies:
+ webpack: ^4.0.0 || ^5.0.0
+ checksum: 981ebe65e1cee7230300d21ba6dcd8bd23ea81ef4ad2b167c0f62d93deba347f27921d330be848634baab3831cf9f38900af6082d6416c2e937fe612fa6a74ff
+ languageName: node
+ linkType: hard
+
"react-colorful@npm:^5.1.2":
version: 5.6.1
resolution: "react-colorful@npm:5.6.1"
@@ -15023,7 +15061,7 @@ __metadata:
languageName: node
linkType: hard
-"schema-utils@npm:^3.1.1, schema-utils@npm:^3.2.0":
+"schema-utils@npm:^3.0.0, schema-utils@npm:^3.1.1, schema-utils@npm:^3.2.0":
version: 3.3.0
resolution: "schema-utils@npm:3.3.0"
dependencies: