@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
248 lines (247 loc) • 10.4 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { __decorate } from "tslib";
import { h } from "@stencil/core";
import { SpanFC } from "../../internal/functional-components/span/component";
import { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor, validateIcons } from "../../schema";
import { createUniqueId } from "../../utils/dev.utils";
import { KolButtonWcTag } from "../../core/component-names";
import clsx from "../../utils/clsx";
import { createCtaRef, delegateFocus } from "../../utils/element-interaction";
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
export class KolBadge {
constructor() {
this.bgColorStr = '#000';
this.colorStr = '#fff';
this.id = createUniqueId('badge-label');
this.ctaRef = createCtaRef();
this._color = '#000';
this.state = {
_color: {
backgroundColor: '#000',
foregroundColor: '#fff',
},
_icons: {},
};
this.handleColorChange = (value) => {
const colorPair = handleColorChange(value);
this.bgColorStr = colorPair.backgroundColor;
this.colorStr = colorPair.foregroundColor;
};
}
renderSmartButton(props) {
return (h(KolButtonWcTag, { ref: this.ctaRef, class: "kol-badge__smart-button", _ariaControls: this.id, _ariaDescription: props._ariaDescription, _variant: props._variant, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign }));
}
async focus() { }
render() {
const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
return (h("span", { key: '51437c2b683e3c84e4b3759b84066423cab53580', class: clsx('kol-badge', {
'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
}), style: {
backgroundColor: this.bgColorStr,
color: this.colorStr,
} }, h(SpanFC, { key: 'cb27d0dec0d497c6b63e4d6ae8803593d8b8e78d', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
}
validateIcons(value) {
validateIcons(this, value);
}
validateColor(value) {
validateColor(this, value, {
defaultValue: '#000',
hooks: {
beforePatch: this.handleColorChange,
},
});
}
validateSmartButton(value) {
objectObjectHandler(value, () => {
try {
value = parseJson(value);
}
catch (_a) {
}
setState(this, '_smartButton', value);
});
}
componentWillLoad() {
this.validateIcons(this._icons);
this.validateColor(this._color);
this.validateSmartButton(this._smartButton);
}
static get is() { return "kol-badge"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"default": ["./style.scss"]
};
}
static get styleUrls() {
return {
"default": ["style.css"]
};
}
static get properties() {
return {
"_color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Stringified<PropColor>",
"resolved": "string | undefined | { backgroundColor: string; foregroundColor: string; }",
"references": {
"Stringified": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::Stringified"
},
"PropColor": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::PropColor"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the backgroundColor and foregroundColor."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_color",
"defaultValue": "'#000'"
},
"_icons": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Stringified<KoliBriIconsProp>",
"resolved": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined",
"references": {
"Stringified": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::Stringified"
},
"KoliBriIconsProp": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::KoliBriIconsProp"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_icons"
},
"_label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "LabelPropType",
"resolved": "string",
"references": {
"LabelPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::LabelPropType"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_label"
},
"_smartButton": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Stringified<InternalButtonProps>",
"resolved": "string | undefined | { _label: string; } & { _type?: \"button\" | \"reset\" | \"submit\" | undefined; _accessKey?: string | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; }",
"references": {
"Stringified": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::Stringified"
},
"InternalButtonProps": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::InternalButtonProps"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Allows to add a button with an arbitrary action within the element (_hide-label only)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_smart-button"
}
};
}
static get states() {
return {
"state": {}
};
}
static get methods() {
return {
"focus": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Sets focus on the internal element.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "_icons",
"methodName": "validateIcons"
}, {
"propName": "_color",
"methodName": "validateColor"
}, {
"propName": "_smartButton",
"methodName": "validateSmartButton"
}];
}
}
__decorate([
delegateFocus('ctaRef')
], KolBadge.prototype, "focus", null);
//# sourceMappingURL=shadow.js.map