@public-ui/components 4.2.1 → 4.3.0-rc.0

package/dist/cjs/inline-D-XZg3UD.js

@@ -1,15 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-'use strict';
-
-var common = require('./common-DPb6NWR4.js');
-
-const validateInline = (component, value, options = {}) => {
-    common.watchBoolean(component, '_inline', value, options);
-};
-
-exports.validateInline = validateInline;
-//# sourceMappingURL=inline-D-XZg3UD.js.map
-
-//# sourceMappingURL=inline-D-XZg3UD.js.map

package/dist/cjs/inline-D-XZg3UD.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inline-D-XZg3UD.js","sources":["src/schema/props/inline.ts"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchBooleanOptions } from '../utils';\nimport { watchBoolean } from '../utils';\n\nexport type InlinePropType = boolean;\n\n/**\n * Renders the component inline so it aligns with surrounding text without enforcing a minimum height.\n */\nexport type PropInline = {\n\tinline: InlinePropType;\n};\n\nexport const validateInline = (component: Generic.Element.Component, value?: InlinePropType, options: WatchBooleanOptions = {}): void => {\n\twatchBoolean(component, '_inline', value, options);\n};\n"],"names":["watchBoolean"],"mappings":";;;;;;;AAcO,MAAM,cAAc,GAAG,CAAC,SAAoC,EAAE,KAAsB,EAAE,OAAA,GAA+B,EAAE,KAAU;IACvIA,mBAAY,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC;AACnD;;;;"}

package/dist/cjs/label-8vcJJEVI.js

@@ -1,50 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-'use strict';
-
-var common = require('./common-DPb6NWR4.js');
-
-const READABLE_CHARS = /[a-zA-Z0-9äöüÄÖÜß]/g;
-const ONLY_NUMBERS = /^\d+$/;
-function countReadableChars(str) {
-    var _a;
-    return typeof str === 'string' ? ((_a = str.match(READABLE_CHARS)) === null || _a === void 0 ? void 0 : _a.length) || 0 : 0;
-}
-function hasEnoughReadableChars(str, min = 1) {
-    return countReadableChars(str) >= min;
-}
-function containsOnlyNumbers(str) {
-    return ONLY_NUMBERS.test(str);
-}
-function getValidationOptions(options) {
-    var _a;
-    return Object.assign(Object.assign({}, options), { hooks: {
-            afterPatch: (value, state, component, key) => {
-                var _a, _b;
-                if (typeof ((_a = options.hooks) === null || _a === void 0 ? void 0 : _a.afterPatch) === 'function') {
-                    (_b = options.hooks) === null || _b === void 0 ? void 0 : _b.afterPatch(value, state, component, key);
-                }
-                if (typeof value === 'string' && hasEnoughReadableChars(value, 3) === false && containsOnlyNumbers(value) === false) {
-                    common.a11yHint(`The heading or label ("${value}") is inaccessible. A label should consist of at least three readable characters.`);
-                }
-                if (typeof value === 'string' && value.length > 80) {
-                    common.uiUxHint(`A heading or label should not be longer than 80 characters.`);
-                }
-            },
-            beforePatch: (_a = options.hooks) === null || _a === void 0 ? void 0 : _a.beforePatch,
-        } });
-}
-const LABEL_VALUES = new Set(['string']);
-const validateLabel = (component, value, options = {}) => {
-    common.watchValidator(component, '_label', (value) => typeof value === 'string', LABEL_VALUES, value, getValidationOptions(options));
-};
-const validateLabelWithExpertSlot = validateLabel;
-
-exports.containsOnlyNumbers = containsOnlyNumbers;
-exports.hasEnoughReadableChars = hasEnoughReadableChars;
-exports.validateLabel = validateLabel;
-exports.validateLabelWithExpertSlot = validateLabelWithExpertSlot;
-//# sourceMappingURL=label-8vcJJEVI.js.map
-
-//# sourceMappingURL=label-8vcJJEVI.js.map

package/dist/cjs/label-8vcJJEVI.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"label-8vcJJEVI.js","sources":["src/schema/props/label.ts"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchStringOptions } from '../utils';\nimport { watchValidator } from '../utils';\nimport { a11yHint, uiUxHint } from '../utils/a11y.tipps';\n\n/**\n * This is a regular expression that matches all readable characters.\n *\n * Interesting: https://stackoverflow.com/questions/150033/regular-expression-to-match-non-english-characters\n */\nconst READABLE_CHARS = /[a-zA-Z0-9äöüÄÖÜß]/g;\n\n/**\n * This is a regular expression that matches only numbers.\n */\nconst ONLY_NUMBERS = /^\\d+$/;\n\n/**\n * This function counts the number of readable characters in a string.\n * @param str The string to count.\n * @returns The number of readable characters in the string.\n */\nfunction countReadableChars(str: string): number {\n\treturn typeof str === 'string' ? str.match(READABLE_CHARS)?.length || 0 : 0;\n}\n\n/**\n * This function checks if a string has at least a certain number of readable characters.\n * @param str The string to check.\n * @param min The minimum number of readable characters.\n * @returns True if the string has at least the minimum number of readable characters, false otherwise.\n */\nexport function hasEnoughReadableChars(str: string, min = 1): boolean {\n\treturn countReadableChars(str) >= min;\n}\n\n/**\n * This function checks if a string contains only numbers.\n * @param str The string to check.\n * @returns True if the string contains only numbers, false otherwise.\n */\nexport function containsOnlyNumbers(str: string): boolean {\n\treturn ONLY_NUMBERS.test(str);\n}\n\n/**\n * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n */\nexport type LabelPropType = string;\n\n/**\n * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n */\nexport type LabelWithExpertSlotPropType = LabelPropType | '';\n\n/**\n * The label property is used to label different elements:\n * - abbr -> title text\n * - button -> label text\n * - heading -> headline text\n * - input, select and textarea -> label text\n * - summary -> summary text\n * - quote, table -> caption text\n * - version -> version text\n * - etc.\n *\n * The label is often a mandatory attribute. If the value of the label is false,\n * the expert-slot will be used. Otherwise, the value of the label must be a string\n * and the expert-slot will be ignored.\n */\nexport type PropLabel = {\n\tlabel: LabelPropType;\n};\nexport type PropLabelWithExpertSlot = {\n\tlabel: LabelWithExpertSlotPropType;\n};\n\nexport type LabelProp = Generic.Element.Members<PropLabel, unknown>;\n// type LabelWithExpertSlotProp = Generic.Element.Members<PropLabelWithExpertSlot, unknown>;\n\nfunction getValidationOptions(options: WatchStringOptions): WatchStringOptions {\n\treturn {\n\t\t...options,\n\t\thooks: {\n\t\t\tafterPatch: (value, state, component, key) => {\n\t\t\t\tif (typeof options.hooks?.afterPatch === 'function') {\n\t\t\t\t\toptions.hooks?.afterPatch(value, state, component, key);\n\t\t\t\t}\n\t\t\t\tif (typeof value === 'string' && hasEnoughReadableChars(value, 3) === false && containsOnlyNumbers(value) === false) {\n\t\t\t\t\ta11yHint(`The heading or label (\"${value}\") is inaccessible. A label should consist of at least three readable characters.`);\n\t\t\t\t}\n\t\t\t\tif (typeof value === 'string' && value.length > 80) {\n\t\t\t\t\tuiUxHint(`A heading or label should not be longer than 80 characters.`);\n\t\t\t\t}\n\t\t\t},\n\t\t\tbeforePatch: options.hooks?.beforePatch,\n\t\t},\n\t};\n}\n\nconst LABEL_VALUES = new Set(['string']);\nexport const validateLabel = (component: Generic.Element.Component, value?: LabelPropType, options: WatchStringOptions = {}): void => {\n\twatchValidator(component, '_label', (value) => typeof value === 'string', LABEL_VALUES, value, getValidationOptions(options));\n};\n\n/**\n * This method name helps to differentiate between the label\n * and the label with expert slot usage.\n */\nexport const validateLabelWithExpertSlot = validateLabel;\n"],"names":["a11yHint","uiUxHint","watchValidator"],"mappings":";;;;;;;AAWA,MAAM,cAAc,GAAG,qBAAqB;AAK5C,MAAM,YAAY,GAAG,OAAO;AAO5B,SAAS,kBAAkB,CAAC,GAAW,EAAA;;AACtC,IAAA,OAAO,OAAO,GAAG,KAAK,QAAQ,GAAG,CAAA,CAAA,EAAA,GAAA,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,KAAI,CAAC,GAAG,CAAC;AAC5E;SAQgB,sBAAsB,CAAC,GAAW,EAAE,GAAG,GAAG,CAAC,EAAA;AAC1D,IAAA,OAAO,kBAAkB,CAAC,GAAG,CAAC,IAAI,GAAG;AACtC;AAOM,SAAU,mBAAmB,CAAC,GAAW,EAAA;AAC9C,IAAA,OAAO,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC;AAC9B;AAqCA,SAAS,oBAAoB,CAAC,OAA2B,EAAA;;AACxD,IAAA,OACI,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,OAAO,CACV,EAAA,EAAA,KAAK,EAAE;YACN,UAAU,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAI;;AAC5C,gBAAA,IAAI,QAAO,CAAA,EAAA,GAAA,OAAO,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAA,KAAK,UAAU,EAAE;AACpD,oBAAA,CAAA,EAAA,GAAA,OAAO,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC;;gBAExD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,sBAAsB,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,KAAK,IAAI,mBAAmB,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE;AACpH,oBAAAA,eAAQ,CAAC,CAAA,uBAAA,EAA0B,KAAK,CAAA,iFAAA,CAAmF,CAAC;;gBAE7H,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,EAAE,EAAE;oBACnDC,eAAQ,CAAC,CAA6D,2DAAA,CAAA,CAAC;;aAExE;YACD,WAAW,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,KAAK,0CAAE,WAAW;AACvC,SAAA,EACA,CAAA;AACH;AAEA,MAAM,YAAY,GAAG,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC;AACjC,MAAM,aAAa,GAAG,CAAC,SAAoC,EAAE,KAAqB,EAAE,OAAA,GAA8B,EAAE,KAAU;IACpIC,qBAAc,CAAC,SAAS,EAAE,QAAQ,EAAE,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAC9H;AAMO,MAAM,2BAA2B,GAAG;;;;;;;"}

package/dist/cjs/label-DRrPbj-j.js

@@ -1,13 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-'use strict';
-
-var normalizers = require('./normalizers-BCLslVaT.js');
-
-const labelProp = normalizers.createPropDefinition('label', '', normalizers.normalizeString, (v) => v === '' || (v.length >= 2 && v.length <= 80));
-
-exports.labelProp = labelProp;
-//# sourceMappingURL=label-DRrPbj-j.js.map
-
-//# sourceMappingURL=label-DRrPbj-j.js.map

package/dist/cjs/label-DRrPbj-j.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"label-DRrPbj-j.js","sources":["src/internal/props/label.ts"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Label prop for accessible names\n *\n * Description:\n * The label provides the accessible name for a component. It is announced by screen readers\n * and is essential for users who rely on assistive technology to understand the purpose of\n * interactive elements.\n *\n * Usage (according to WCAG 2.1 and WAI-ARIA):\n * - Every interactive element must have a perceivable label (WCAG 4.1.2 Name, Role, Value)\n * - Labels must be descriptive and concise (WCAG 2.4.6 Headings and Labels)\n * - Labels must be programmatically associated with their controls (WCAG 1.3.1 Info and Relationships)\n * - Minimum 2 characters, maximum 80 characters for meaningful, concise labels\n * - An empty label (\"\") is allowed for cases where the accessible name is provided differently\n *\n * @see https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html\n * @see https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n * @see https://www.w3.org/TR/accname-1.2/\n */\nexport type LabelProp = SimpleProp<'label', string>;\nexport const labelProp = createPropDefinition<LabelProp>('label', '', normalizeString, (v) => v === '' || (v.length >= 2 && v.length <= 80));\n"],"names":["createPropDefinition","normalizeString"],"mappings":";;;;;;;AAyBO,MAAM,SAAS,GAAGA,gCAAoB,CAAY,OAAO,EAAE,EAAE,EAAEC,2BAAe,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,EAAE,CAAC;;;;"}

package/dist/cjs/level-DmIt1w-r.js

@@ -1,15 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-'use strict';
-
-var normalizers = require('./normalizers-BCLslVaT.js');
-
-const headingLevelOptions = [0, 1, 2, 3, 4, 5, 6];
-const levelProp = normalizers.createPropDefinition('level', 0, (value) => normalizers.normalizeInteger(value), (v) => headingLevelOptions.includes(v));
-
-exports.headingLevelOptions = headingLevelOptions;
-exports.levelProp = levelProp;
-//# sourceMappingURL=level-DmIt1w-r.js.map
-
-//# sourceMappingURL=level-DmIt1w-r.js.map

package/dist/cjs/level-DmIt1w-r.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"level-DmIt1w-r.js","sources":["src/internal/props/level.ts"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeInteger } from './helpers/normalizers';\n\nexport const headingLevelOptions = [0, 1, 2, 3, 4, 5, 6] as const;\nexport type HeadingLevel = (typeof headingLevelOptions)[number];\n\nexport type LevelProp = SimpleProp<'level', HeadingLevel>;\nexport const levelProp = createPropDefinition<LevelProp>(\n\t'level',\n\t0,\n\t(value) => normalizeInteger(value) as HeadingLevel,\n\t(v) => headingLevelOptions.includes(v),\n);\n"],"names":["createPropDefinition","normalizeInteger"],"mappings":";;;;;;;AAIa,MAAA,mBAAmB,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;AAIhD,MAAM,SAAS,GAAGA,gCAAoB,CAC5C,OAAO,EACP,CAAC,EACD,CAAC,KAAK,KAAKC,4BAAgB,CAAC,KAAK,CAAiB,EAClD,CAAC,CAAC,KAAK,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;;"}

package/dist/cjs/max-length-behavior-CqAwfrV8.js

@@ -1,26 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-'use strict';
-
-var common = require('./common-DPb6NWR4.js');
-
-const validateHasCounter = (component, value, options) => {
-    common.watchBoolean(component, '_hasCounter', value, options);
-};
-
-const validateMaxLength = (component, value, options = {}) => {
-    common.watchNumber(component, '_maxLength', value, Object.assign({ min: 0 }, options));
-};
-
-const maxLengthBehaviorPropTypeOptions = ['hard', 'soft'];
-const validateMaxLengthBehavior = (component, value) => {
-    common.watchValidator(component, '_maxLengthBehavior', (value) => typeof value === 'string' && maxLengthBehaviorPropTypeOptions.includes(value), new Set(['String {hard, soft}']), value);
-};
-
-exports.validateHasCounter = validateHasCounter;
-exports.validateMaxLength = validateMaxLength;
-exports.validateMaxLengthBehavior = validateMaxLengthBehavior;
-//# sourceMappingURL=max-length-behavior-CqAwfrV8.js.map
-
-//# sourceMappingURL=max-length-behavior-CqAwfrV8.js.map

package/dist/cjs/max-length-behavior-CqAwfrV8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"max-length-behavior-CqAwfrV8.js","sources":["src/schema/props/has-counter.ts","src/schema/props/max-length.ts","src/schema/props/max-length-behavior.ts"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchBooleanOptions } from '../utils';\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasCounterPropType = boolean;\n\n/**\n * Shows the character count on the lower border of the input.\n */\nexport type PropHasCounter = {\n\thasCounter: HasCounterPropType;\n};\n\n/* validator */\nexport const validateHasCounter = (component: Generic.Element.Component, value?: HasCounterPropType, options?: WatchBooleanOptions): void => {\n\twatchBoolean(component, '_hasCounter', value, options);\n};\n","import type { Generic } from 'adopted-style-sheets';\nimport type { WatchNumberOptions } from '../utils';\nimport { watchNumber } from '../utils';\n\nexport type MaxLengthPropType = number;\n\n/**\n * Defines the maximum length of the value.\n */\nexport type PropMaxLength = {\n\tmaxLength: MaxLengthPropType;\n};\n\nexport const validateMaxLength = (component: Generic.Element.Component, value?: MaxLengthPropType, options: WatchNumberOptions = {}): void => {\n\twatchNumber(component, '_maxLength', value, { min: 0, ...options });\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../utils';\n\n/* types */\nconst maxLengthBehaviorPropTypeOptions = ['hard', 'soft'] as const;\nexport type MaxLengthBehaviorPropType = (typeof maxLengthBehaviorPropTypeOptions)[number];\n\n/**\n * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.\n */\nexport type PropMaxLengthBehavior = {\n\tmaxLengthBehavior: MaxLengthBehaviorPropType;\n};\n\n/* validator */\nexport const validateMaxLengthBehavior = (component: Generic.Element.Component, value?: MaxLengthBehaviorPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_maxLengthBehavior',\n\t\t(value): boolean => typeof value === 'string' && maxLengthBehaviorPropTypeOptions.includes(value),\n\t\tnew Set(['String {hard, soft}']),\n\t\tvalue,\n\t);\n};\n"],"names":["watchBoolean","watchNumber","watchValidator"],"mappings":";;;;;;;AAgBa,MAAA,kBAAkB,GAAG,CAAC,SAAoC,EAAE,KAA0B,EAAE,OAA6B,KAAU;IAC3IA,mBAAY,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,CAAC;AACvD;;ACLO,MAAM,iBAAiB,GAAG,CAAC,SAAoC,EAAE,KAAyB,EAAE,OAAA,GAA8B,EAAE,KAAU;IAC5IC,kBAAW,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,EAAI,MAAA,CAAA,MAAA,CAAA,EAAA,GAAG,EAAE,CAAC,EAAK,EAAA,OAAO,EAAG;AACpE;;ACVA,MAAM,gCAAgC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAU;MAWrD,yBAAyB,GAAG,CAAC,SAAoC,EAAE,KAAiC,KAAU;AAC1H,IAAAC,qBAAc,CACb,SAAS,EACT,oBAAoB,EACpB,CAAC,KAAK,KAAc,OAAO,KAAK,KAAK,QAAQ,IAAI,gCAAgC,CAAC,QAAQ,CAAC,KAAK,CAAC,EACjG,IAAI,GAAG,CAAC,CAAC,qBAAqB,CAAC,CAAC,EAChC,KAAK,CACL;AACF;;;;;;"}

package/dist/cjs/multiple-BEGQDyov.js

@@ -1,15 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-'use strict';
-
-var common = require('./common-DPb6NWR4.js');
-
-const validateMultiple = (component, value, options) => {
-    common.watchBoolean(component, '_multiple', value, options);
-};
-
-exports.validateMultiple = validateMultiple;
-//# sourceMappingURL=multiple-BEGQDyov.js.map
-
-//# sourceMappingURL=multiple-BEGQDyov.js.map

package/dist/cjs/multiple-BEGQDyov.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"multiple-BEGQDyov.js","sources":["src/schema/props/multiple.ts"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchBooleanOptions } from '../utils';\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type MultiplePropType = boolean;\n\n/**\n * Makes the input accept multiple inputs.\n */\nexport type PropMultiple = {\n\tmultiple: MultiplePropType;\n};\n\n/* validator */\nexport const validateMultiple = (component: Generic.Element.Component, value?: MultiplePropType, options?: WatchBooleanOptions): void => {\n\twatchBoolean(component, '_multiple', value, options);\n};\n"],"names":["watchBoolean"],"mappings":";;;;;;;AAgBa,MAAA,gBAAgB,GAAG,CAAC,SAAoC,EAAE,KAAwB,EAAE,OAA6B,KAAU;IACvIA,mBAAY,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC;AACrD;;;;"}