npm - @haiilo/catalyst - Versions diffs - 3.0.2 → 4.1.0 - Mend

@haiilo/catalyst 3.0.2 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/dist/components/cat-button2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-button2.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAU,CAAC;AAInD,MAAM,WAAW,GAA2C;EACjE,EAAE,EAAE,uBAAuB;EAC3B,CAAC,EAAE,uBAAuB;EAC1B,CAAC,EAAE,uBAAuB;EAC1B,CAAC,EAAE,wBAAwB;EAC3B,EAAE,EAAE,wBAAwB;CAC7B,CAAC;SAEc,YAAY,CAAC,KAAc;EACzC,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,YAAY,CAAC,QAAQ,CAAC,KAAmB,CAAC,CAAC;AACjF;;ACdA;AAEA;AACA;AACA,IAAI,kBAA2B,CAAC;AAEhC;AACA;AACA;AACA;AACA;AACA,IAAI;;EAEF,kBAAkB,GAAG,OAAO,IAAI,KAAK,WAAW,IAAK,IAAY,CAAC,eAAe,CAAC;CACnF;AAAC,WAAM;EACN,kBAAkB,GAAG,KAAK,CAAC;CAC5B;MAEY,QAAQ;EAArB;;IAEE,SAAI,GAAY,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;;IAGpD,YAAO,GAAY,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;;;IAI/D,UAAK;;IAEH,CAAC,EAAG,MAAc,CAAC,MAAM,IAAI,kBAAkB,CAAC,IAAI,OAAO,GAAG,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;;;IAKhH,WAAM,GAAY,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGzG,QAAG,GAAY,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,UAAU,IAAI,MAAM,CAAC,CAAC;;;;;;IAOvF,YAAO,GAAY,sBAAsB,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;;;IAIpE,YAAO,GAAY,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;;;;IAMzE,WAAM,GAAY,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC;GACtE;;;ACpDD;AAEA;AACA,MAAM,kCAAkC,GAAgB,IAAI,GAAG,EAAU,CAAC;AAE1E;AACA,IAAI,mBAAiD,CAAC;AAEtD;MACa,YAAY;EAIvB;IACE,IAAI,CAAC,SAAS,GAAG,IAAI,QAAQ,EAAE,CAAC;IAChC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACnD;;;;;;;EAQD,UAAU,CAAC,KAAa;IACtB,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;MACjD,oBAAoB,CAAC,KAAK,CAAC,CAAC;KAC7B;IACD,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;GAChC;CACF;AAED;;;;;;;;;AASA,SAAS,oBAAoB,CAAC,KAAa;EACzC,IAAI,kCAAkC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACjD,OAAO;GACR;EAED,IAAI;IACF,IAAI,CAAC,mBAAmB,EAAE;MACxB,mBAAmB,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;MACtD,mBAAmB,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;MACrD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC;KAChD;IACD,IAAI,mBAAmB,CAAC,KAAK,EAAE;MAC7B,mBAAmB,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,KAAK,YAAY,EAAE,CAAC,CAAC,CAAC;MACrE,kCAAkC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;KAC/C;GACF;EAAC,OAAO,CAAC,EAAE;IACVA,QAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;GACd;AACH;;AC9DA,MAAM,YAAY,GAAG,+hUAA+hU;;MCmBviU,SAAS;EALtB;;;;;;;IAWW,cAAS,GAAG,IAAI,CAAC;;;;IAKlB,YAAO,GAAmC,UAAU,CAAC;;;;IAKrD,UAAK,GAA+D,WAAW,CAAC;;;;IAKhF,WAAM,GAAG,KAAK,CAAC;;;;IAKf,SAAI,GAAkC,GAAG,CAAC;;;;;IAoB1C,aAAQ,GAAG,KAAK,CAAC;;;;;;IAOjB,YAAO,GAAG,KAAK,CAAC;;;;IAKhB,WAAM,GAAG,KAAK,CAAC;;;;IAKf,eAAU,GAAG,KAAK,CAAC;;;;IAKnB,UAAK,GAAG,KAAK,CAAC;;;;IA0Bd,aAAQ,GAAyB,KAAK,CAAC;;;;IAKvC,cAAS,GAAG,KAAK,CAAC;GAoO3B;EA9MC,iBAAiB,CAAC,KAA2B;;;;IAG3C,MAAA,IAAI,CAAC,cAAc,0CAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAmB,CAAC,CAAC;IAC7E,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,kBAAkB,GAAG,SAAS,CAAC;;IAEpC,IAAI,YAAY,CAAC,KAAK,CAAC,EAAE;MACvB,MAAA,IAAI,CAAC,YAAY,oCAAjB,IAAI,CAAC,YAAY,GAAK,IAAI,YAAY,EAAE,EAAC;MACzC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;MACvE,IAAI,CAAC,kBAAkB,GAAG,CAAC,KAA0B,MAAM,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;MAC3F,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;MACxE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;KAC9C;SAAM;MACL,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB;GACF;EAiBD,iBAAiB;IACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACvC;EAED,mBAAmB;IACjB,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACxCA,QAAG,CAAC,IAAI,CAAC,0CAA0C,EAAE,IAAI,CAAC,CAAC;KAC5D;GACF;EAGD,kBAAkB,CAAC,KAAY;IAC7B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE;MACjC,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;KAClC;GACF;;;;;;;;EAUD,MAAM,OAAO,CAAC,OAAsB;IAClC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;GAC5B;;;;;EAOD,MAAM,MAAM;IACV,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;GACpB;;;;EAMD,MAAM,OAAO;IACX,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;GACrB;EAED,MAAM;;IACJ,IAAI,IAAI,CAAC,GAAG,EAAE;MACZ,QACE,SACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EAClD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,EAC1C,MAAM,EAAE,IAAI,CAAC,SAAS,mBACP,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,gBAChC,IAAI,CAAC,SAAS,kBACZ,IAAI,CAAC,WAAW,EAC9B,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;UACL,YAAY,EAAE,IAAI;UAClB,mBAAmB,EAAE,IAAI,CAAC,MAAM;UAChC,iBAAiB,EAAE,IAAI,CAAC,YAAY;UACpC,kBAAkB,EAAE,IAAI,CAAC,KAAK;UAC9B,oBAAoB,EAAE,IAAI,CAAC,OAAO;UAClC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;UACpC,qBAAqB,EAAE,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY;UAC7D,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;UACrD,CAAC,cAAc,IAAI,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;UACjD,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;SAChD,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAE7B,IAAI,CAAC,OAAO,CACX,EACJ;KACH;SAAM;MACL,QACE,cACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EAClD,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,QAAQ,EACvC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,gBAChC,IAAI,CAAC,SAAS,kBACZ,IAAI,CAAC,WAAW,EAC9B,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;UACL,YAAY,EAAE,IAAI;UAClB,mBAAmB,EAAE,IAAI,CAAC,MAAM;UAChC,iBAAiB,EAAE,IAAI,CAAC,YAAY;UACpC,kBAAkB,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,YAAY;UACnD,oBAAoB,EAAE,IAAI,CAAC,OAAO;UAClC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;UACpC,qBAAqB,EAAE,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY;UAC7D,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;UACrD,CAAC,cAAc,IAAI,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;UACjD,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;SAChD,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAE7B,IAAI,CAAC,OAAO,CACN,EACT;KACH;GACF;EAED,IAAY,QAAQ;IAClB,QAAQ,IAAI,CAAC,IAAI;MACf,KAAK,IAAI;QACP,OAAO,GAAG,CAAC;MACb;QACE,OAAO,GAAG,CAAC;KACd;GACF;EAED,IAAY,WAAW;IACrB,QAAQ,IAAI,CAAC,IAAI;MACf,KAAK,IAAI;QACP,OAAO,IAAI,CAAC;MACd;QACE,OAAO,GAAG,CAAC;KACd;GACF;EAED,IAAY,YAAY;IACtB,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC;GACxE;EAED,IAAY,aAAa;IACvB,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;GAC5F;EAED,IAAY,aAAa;IACvB,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;GAC3F;EAED,IAAY,OAAO;IACjB,OAAO;MACL,IAAI,CAAC,aAAa,IAChB,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ,GAAY,IAC9F,IAAI;MACR,IAAI,CAAC,YAAY,IACf,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAa,KAElF,YAAM,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,SAAS,IAC7C,eAAa,CACR,CACR;MACD,IAAI,CAAC,aAAa,IAChB,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ,GAAY,IAC9F,IAAI;MACR,IAAI,CAAC,OAAO,GAAG,mBAAa,IAAI,EAAE,IAAI,CAAC,WAAW,GAAgB,GAAG,IAAI;KAC1E,CAAC;GACH;EAEO,OAAO,CAAC,KAAiB;IAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAEO,OAAO,CAAC,KAAiB;IAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAEO,MAAM,CAAC,KAAiB;IAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["log"],"sources":["./src/utils/breakpoints.ts","./src/utils/platform.ts","./src/utils/media-matcher.ts","./src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","./src/components/cat-button/cat-button.tsx"],"sourcesContent":["const _breakpoints = ['xs', 's', 'm', 'l', 'xl'] as const;\n\nexport type Breakpoint = typeof _breakpoints[number];\n\nexport const Breakpoints: { [breakpoint in Breakpoint]: string } = {\n xs: '(max-width: 539.98px)',\n s: '(max-width: 767.98px)',\n m: '(max-width: 991.98px)',\n l: '(max-width: 1199.98px)',\n xl: '(max-width: 1399.98px)'\n};\n\nexport function isBreakpoint(value: unknown): value is Breakpoint {\n return typeof value === 'string' && _breakpoints.includes(value as Breakpoint);\n}\n","// https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts\n\n// Whether the current platform supports the V8 Break Iterator. The V8 check\n// is necessary to detect all Blink based browsers.\nlet hasV8BreakIterator: boolean;\n\n// We need a try/catch around the reference to `Intl`, because accessing it in some cases can\n// cause IE to throw. These cases are tied to particular versions of Windows and can happen if\n// the consumer is providing a polyfilled `Map`. See:\n// https://github.com/Microsoft/ChakraCore/issues/3189\n// https://github.com/angular/components/issues/15687\ntry {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n hasV8BreakIterator = typeof Intl !== 'undefined' && (Intl as any).v8BreakIterator;\n} catch {\n hasV8BreakIterator = false;\n}\n\nexport class Platform {\n /** Whether the current browser is Microsoft Edge. /\n EDGE: boolean = /(edge)/i.test(navigator.userAgent);\n\n /* Whether the current rendering engine is Microsoft Trident. /\n TRIDENT: boolean = /(msie\|trident)/i.test(navigator.userAgent);\n\n // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.\n /* Whether the current rendering engine is Blink. /\n BLINK: boolean =\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n !!((window as any).chrome \|\| hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;\n\n // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to\n // ensure that Webkit runs standalone and is not used as another engine's base.\n /* Whether the current rendering engine is WebKit. /\n WEBKIT: boolean = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;\n\n /* Whether the current platform is Apple iOS. /\n IOS: boolean = /iPad\|iPhone\|iPod/.test(navigator.userAgent) && !('MSStream' in window);\n\n // It's difficult to detect the plain Gecko engine, because most of the browsers identify\n // them self as Gecko-like browsers and modify the userAgent's according to that.\n // Since we only cover one explicit Firefox case, we can simply check for Firefox\n // instead of having an unstable check for Gecko.\n /* Whether the current browser is Firefox. /\n FIREFOX: boolean = /(firefox\|minefield)/i.test(navigator.userAgent);\n\n /* Whether the current platform is Android. /\n // Trident on mobile adds the android platform to the userAgent to trick detections.\n ANDROID: boolean = /android/i.test(navigator.userAgent) && !this.TRIDENT;\n\n // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake\n // this and just place the Safari keyword in the userAgent. To be more safe about Safari every\n // Safari browser should also use Webkit as its layout engine.\n /* Whether the current browser is Safari. /\n SAFARI: boolean = /safari/i.test(navigator.userAgent) && this.WEBKIT;\n}\n","import log from 'loglevel';\nimport { Platform } from './platform';\n\n// https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts\n\n/* Global registry for all dynamically-created, injected media queries. /\nconst mediaQueriesForWebkitCompatibility: Set<string> = new Set<string>();\n\n/* Style tag that holds all of the dynamically-created media queries. /\nlet mediaQueryStyleNode: HTMLStyleElement \| undefined;\n\n/* A utility for calling matchMedia queries. /\nexport class MediaMatcher {\n private _platform;\n private _matchMedia: (query: string) => MediaQueryList;\n\n constructor() {\n this._platform = new Platform();\n this._matchMedia = window.matchMedia.bind(window);\n }\n\n /\n Evaluates the given media query and returns the native MediaQueryList from which results\n * can be retrieved.\n * Confirms the layout engine will trigger for the selector query provided and returns the\n * MediaQueryList for the query provided.\n /\n matchMedia(query: string): MediaQueryList {\n if (this._platform.WEBKIT \|\| this._platform.BLINK) {\n createEmptyStyleRule(query);\n }\n return this._matchMedia(query);\n }\n}\n\n/\n Creates an empty stylesheet that is used to work around browser inconsistencies related to\n * `matchMedia`. At the time of writing, it handles the following cases:\n * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`\n * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.\n * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules\n * inside the `@media` match existing elements on the page. We work around it by having one rule\n * targeting the `body`. See https://github.com/angular/components/issues/23546.\n /\nfunction createEmptyStyleRule(query: string) {\n if (mediaQueriesForWebkitCompatibility.has(query)) {\n return;\n }\n\n try {\n if (!mediaQueryStyleNode) {\n mediaQueryStyleNode = document.createElement('style');\n mediaQueryStyleNode.setAttribute('type', 'text/css');\n document.head.appendChild(mediaQueryStyleNode);\n }\n if (mediaQueryStyleNode.sheet) {\n mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);\n mediaQueriesForWebkitCompatibility.add(query);\n }\n } catch (e) {\n log.error(e);\n }\n}\n","@use 'variables' as ;\n@use 'mixins' as ;\n@use 'sass:map';\n\n$button-sizes: (\n 'xl': 3.5rem,\n 'l': 3rem,\n 'm': 2.5rem,\n 's': 2rem,\n 'xs': 1.5rem\n);\n\n:host {\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n @include cat-select(none);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.cat-button {\n position: relative;\n font: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: cat-border-radius('m');\n text-decoration: none;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n transition: color cat-token('time.transition.s') linear, border-color cat-token('time.transition.s') linear,\n background-color cat-token('time.transition.s') linear, box-shadow cat-token('time.transition.s') linear;\n\n &:focus-visible {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n}\n\n// ----- content\n\n.cat-button-content {\n @include cat-break-word;\n\n .cat-button-ellipsed & {\n @include cat-ellipsis;\n }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n cursor: not-allowed;\n}\n\n// ----- round\n\n.cat-button-round {\n border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n cursor: default;\n\n cat-spinner {\n position: absolute;\n }\n\n > :not(cat-spinner) {\n visibility: hidden;\n }\n}\n\n// ----- theme\n\n.cat-button-filled {\n background-color: cat-token-wrap(var(--bg));\n color: cat-token-wrap(var(--fill));\n font-weight: 600;\n @include cat-font-smooth;\n\n &.cat-button-disabled {\n --bg: #{cat-token('color.ui.background.muted', $wrap: false)};\n --fill: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n}\n\n.cat-button-outlined {\n background-color: cat-token('color.ui.background.surface');\n box-shadow: inset 0 0 0 1px cat-token-wrap(var(--base), $alpha: 0.2);\n color: cat-token-wrap(var(--text));\n\n &.cat-button-disabled {\n --base: #{cat-token('color.ui.font.muted', $wrap: false)};\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.05);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n }\n\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n }\n}\n\n.cat-button-text {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n text-decoration: cat-token('font.decoration.linkButton');\n\n &.cat-button-disabled {\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration: cat-token('font.decoration.linkButtonHover');\n background-color: rgba(var(--base), 0.05);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration: cat-token('font.decoration.linkButtonHover');\n background-color: rgba(var(--base), 0.1);\n }\n}\n\n@mixin theme($theme) {\n .cat-button-#{$theme} {\n --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n @if $theme == 'secondary' {\n --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n } @else {\n --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};\n }\n }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding) {\n $-line-height: cat-body-line-height($fontSize);\n\n $-total-height: map.get($button-sizes, $size);\n $-padding-v: ($-total-height - $-line-height) * 0.5;\n $-padding-h: $padding;\n\n .cat-button-#{$size} {\n min-width: map.get($button-sizes, $size);\n padding: $-padding-v $-padding-h;\n @include cat-body($fontSize, null);\n gap: 0.25rem;\n\n // normalize icon size for line height\n @if $fontSize == 'm' {\n cat-icon {\n margin-top: -0.125rem;\n margin-bottom: -0.125rem;\n }\n }\n\n &.cat-button-icon {\n width: $-total-height;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n :host(.cat-button-pull[size='#{$size}']) {\n margin: $-padding-v * -1 $-padding-h * -1;\n }\n\n :host(.cat-button-pull-h[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n margin-right: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-v[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-t[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-l[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-b[size='#{$size}']) {\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-r[size='#{$size}']) {\n margin-right: $-padding-h * -1;\n }\n}\n\n:host(.cat-button-pull:not([size])) {\n margin: -0.625rem -0.75rem;\n}\n\n:host(.cat-button-pull-h:not([size])) {\n margin-left: -0.75rem;\n margin-right: -0.75rem;\n}\n\n:host(.cat-button-pull-v:not([size])) {\n margin-top: -0.625rem;\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-t:not([size])) {\n margin-top: -0.625rem;\n}\n\n:host(.cat-button-pull-l:not([size])) {\n margin-left: -0.75rem;\n}\n\n:host(.cat-button-pull-b:not([size])) {\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-r:not([size])) {\n margin-right: -0.75rem;\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem);\n@include size('xl', 'l', 1.25rem);\n\n// ----- tabs\n\n:host(.cat-tab-active:not(:hover)) {\n --cat-primary-text: transparent;\n}\n\n// ----- alignment\n\n:host(.cat-text-left) .cat-button {\n justify-content: left;\n}\n\n:host(.cat-text-right) .cat-button {\n justify-content: right;\n}\n\n// ----- navigation\n\n:host(.cat-nav-item) {\n width: 100%;\n\n .cat-button {\n box-shadow: none;\n border-radius: 0;\n justify-content: left;\n padding-left: $cat-nav-padding-horizontal;\n padding-right: $cat-nav-padding-horizontal;\n gap: 0.5rem;\n\n &:focus-visible {\n outline-offset: -2px;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/*\n Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n \n @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n /\n@Component({\n tag: 'cat-button',\n styleUrl: 'cat-button.scss',\n shadow: true\n})\nexport class CatButton {\n private button!: HTMLButtonElement \| HTMLAnchorElement;\n private mediaMatcher?: MediaMatcher;\n private mediaQueryList?: MediaQueryList;\n private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n @State() _iconOnly = true;\n\n /\n The rendering style of the button.\n /\n @Prop() variant: 'filled' \| 'outlined' \| 'text' = 'outlined';\n\n /\n The color palette of the button.\n /\n @Prop() color: 'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning' = 'secondary';\n\n /\n Set the button into an active state.\n /\n @Prop() active = false;\n\n /\n The size of the button.\n /\n @Prop() size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' = 'm';\n\n /\n The name of the button, which gets paired with the button's value when\n * submitted as part of a form. Corresponds with the native HTML name\n * attribute.\n /\n @Prop() name?: string;\n\n /\n The value of the button, which gets paired with the button's name when\n * submitted as part of a form. Corresponds with the native HTML value\n * attribute.\n /\n @Prop() value?: string;\n\n /\n Specifies that the button should be disabled. A disabled button is unusable\n * and un-clickable. Corresponds with the native HTML disabled attribute.\n /\n @Prop() disabled = false;\n\n /\n Displays the button in a loading state with a spinner. Just like a disabled\n * button, an inactive button is unusable and un-clickable. However, it\n * retains the current focus state.\n /\n @Prop() loading = false;\n\n /\n Allows the button to submit a form.\n /\n @Prop() submit = false;\n\n /\n Disables ellipse overflowing button content.\n /\n @Prop() noEllipsis = false;\n\n /\n Use round button edges.\n /\n @Prop() round = false;\n\n /\n A destination to link to, rendered in the href attribute of a link.\n /\n @Prop() url?: string;\n\n /\n Specifies where to open the linked document.\n /\n @Prop() urlTarget?: '_blank' \| '_self';\n\n /\n The name of an icon to be displayed in the button.\n /\n @Prop() icon?: string;\n\n /\n The SVG source of an icon to be displayed in the button. This takes\n * precenedence over the `icon` name.\n /\n @Prop() iconSrc?: string;\n\n /\n Hide the actual button content and only display the icon.\n /\n @Prop() iconOnly: boolean \| Breakpoint = false;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n Adds a unique identifier for the button. Please note that with this\n * particular component this ID is added inside the web component. If you need\n * an ID on the HTML element, use the regular `id` attribute instead.\n /\n @Prop() buttonId?: string;\n\n /\n Adds accessible label for the button that is only shown for screen\n * readers. Typically, this label text replaces the visible text on the\n * button for users who use assistive technology.\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /\n Sets the `aria-current` attribute on the button.\n /\n @Prop({ attribute: 'a11y-current' }) a11yCurrent?: string;\n\n @Watch('iconOnly')\n onIconOnlyChanged(value: boolean \| Breakpoint): void {\n // teardown\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n this.mediaQueryList = undefined;\n this.mediaQueryListener = undefined;\n // setup\n if (isBreakpoint(value)) {\n this.mediaMatcher ??= new MediaMatcher();\n this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n this._iconOnly = this.mediaQueryList.matches;\n } else {\n this._iconOnly = value;\n }\n }\n\n /\n Emitted when the button is clicked.\n /\n @Event() catClick!: EventEmitter<MouseEvent>;\n\n /\n Emitted when the button received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the button loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): void {\n this.onIconOnlyChanged(this.iconOnly);\n }\n\n componentWillRender(): void {\n if (this.isIconButton && !this.a11yLabel) {\n log.warn('[A11y] Missing ARIA label on icon button', this);\n }\n }\n\n @Listen('click')\n haltDisabledEvents(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n /\n Programmatically move focus to the button. Use this method instead of\n * `button.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.button.focus(options);\n }\n\n /\n Programmatically remove focus from the button. Use this method instead of\n * `button.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.button.blur();\n }\n\n /\n Programmatically simulate a click on the button.\n */\n @Method()\n async doClick(): Promise<void> {\n this.button.click();\n }\n\n render() {\n if (this.url) {\n return (\n <a\n ref={el => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? undefined : this.url}\n target={this.urlTarget}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </a>\n );\n } else {\n return (\n <button\n ref={el => (this.button = el as HTMLButtonElement)}\n type={this.submit ? 'submit' : 'button'}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round ?? this.isIconButton,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </button>\n );\n }\n }\n\n private get iconSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 's';\n default:\n return 'l';\n }\n }\n\n private get spinnerSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 'xs';\n default:\n return 'm';\n }\n }\n\n private get isIconButton() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && this._iconOnly;\n }\n\n private get hasPrefixIcon() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && !this._iconOnly && !this.iconRight;\n }\n\n private get hasSuffixIcon() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && !this._iconOnly && this.iconRight;\n }\n\n private get content() {\n return [\n this.hasPrefixIcon ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize} part=\"prefix\"></cat-icon>\n ) : null,\n this.isIconButton ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize}></cat-icon>\n ) : (\n <span class=\"cat-button-content\" part=\"content\">\n <slot></slot>\n </span>\n ),\n this.hasSuffixIcon ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize} part=\"suffix\"></cat-icon>\n ) : null,\n this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n ];\n }\n\n private onClick(event: MouseEvent) {\n this.catClick.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"],"version":3}
1	+ {"file":"cat-button2.js","mappings":"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","names":["log"],"sources":["./src/utils/breakpoints.ts","./src/utils/platform.ts","./src/utils/media-matcher.ts","./src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","./src/components/cat-button/cat-button.tsx"],"sourcesContent":["const _breakpoints = ['xs', 's', 'm', 'l', 'xl'] as const;\n\nexport type Breakpoint = typeof _breakpoints[number];\n\nexport const Breakpoints: { [breakpoint in Breakpoint]: string } = {\n xs: '(max-width: 539.98px)',\n s: '(max-width: 767.98px)',\n m: '(max-width: 991.98px)',\n l: '(max-width: 1199.98px)',\n xl: '(max-width: 1399.98px)'\n};\n\nexport function isBreakpoint(value: unknown): value is Breakpoint {\n return typeof value === 'string' && _breakpoints.includes(value as Breakpoint);\n}\n","// https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts\n\n// Whether the current platform supports the V8 Break Iterator. The V8 check\n// is necessary to detect all Blink based browsers.\nlet hasV8BreakIterator: boolean;\n\n// We need a try/catch around the reference to `Intl`, because accessing it in some cases can\n// cause IE to throw. These cases are tied to particular versions of Windows and can happen if\n// the consumer is providing a polyfilled `Map`. See:\n// https://github.com/Microsoft/ChakraCore/issues/3189\n// https://github.com/angular/components/issues/15687\ntry {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n hasV8BreakIterator = typeof Intl !== 'undefined' && (Intl as any).v8BreakIterator;\n} catch {\n hasV8BreakIterator = false;\n}\n\nexport class Platform {\n /** Whether the current browser is Microsoft Edge. /\n EDGE: boolean = /(edge)/i.test(navigator.userAgent);\n\n /* Whether the current rendering engine is Microsoft Trident. /\n TRIDENT: boolean = /(msie\|trident)/i.test(navigator.userAgent);\n\n // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.\n /* Whether the current rendering engine is Blink. /\n BLINK: boolean =\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n !!((window as any).chrome \|\| hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;\n\n // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to\n // ensure that Webkit runs standalone and is not used as another engine's base.\n /* Whether the current rendering engine is WebKit. /\n WEBKIT: boolean = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;\n\n /* Whether the current platform is Apple iOS. /\n IOS: boolean = /iPad\|iPhone\|iPod/.test(navigator.userAgent) && !('MSStream' in window);\n\n // It's difficult to detect the plain Gecko engine, because most of the browsers identify\n // them self as Gecko-like browsers and modify the userAgent's according to that.\n // Since we only cover one explicit Firefox case, we can simply check for Firefox\n // instead of having an unstable check for Gecko.\n /* Whether the current browser is Firefox. /\n FIREFOX: boolean = /(firefox\|minefield)/i.test(navigator.userAgent);\n\n /* Whether the current platform is Android. /\n // Trident on mobile adds the android platform to the userAgent to trick detections.\n ANDROID: boolean = /android/i.test(navigator.userAgent) && !this.TRIDENT;\n\n // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake\n // this and just place the Safari keyword in the userAgent. To be more safe about Safari every\n // Safari browser should also use Webkit as its layout engine.\n /* Whether the current browser is Safari. /\n SAFARI: boolean = /safari/i.test(navigator.userAgent) && this.WEBKIT;\n}\n","import log from 'loglevel';\nimport { Platform } from './platform';\n\n// https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts\n\n/* Global registry for all dynamically-created, injected media queries. /\nconst mediaQueriesForWebkitCompatibility: Set<string> = new Set<string>();\n\n/* Style tag that holds all of the dynamically-created media queries. /\nlet mediaQueryStyleNode: HTMLStyleElement \| undefined;\n\n/* A utility for calling matchMedia queries. /\nexport class MediaMatcher {\n private _platform;\n private _matchMedia: (query: string) => MediaQueryList;\n\n constructor() {\n this._platform = new Platform();\n this._matchMedia = window.matchMedia.bind(window);\n }\n\n /\n Evaluates the given media query and returns the native MediaQueryList from which results\n * can be retrieved.\n * Confirms the layout engine will trigger for the selector query provided and returns the\n * MediaQueryList for the query provided.\n /\n matchMedia(query: string): MediaQueryList {\n if (this._platform.WEBKIT \|\| this._platform.BLINK) {\n createEmptyStyleRule(query);\n }\n return this._matchMedia(query);\n }\n}\n\n/\n Creates an empty stylesheet that is used to work around browser inconsistencies related to\n * `matchMedia`. At the time of writing, it handles the following cases:\n * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`\n * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.\n * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules\n * inside the `@media` match existing elements on the page. We work around it by having one rule\n * targeting the `body`. See https://github.com/angular/components/issues/23546.\n /\nfunction createEmptyStyleRule(query: string) {\n if (mediaQueriesForWebkitCompatibility.has(query)) {\n return;\n }\n\n try {\n if (!mediaQueryStyleNode) {\n mediaQueryStyleNode = document.createElement('style');\n mediaQueryStyleNode.setAttribute('type', 'text/css');\n document.head.appendChild(mediaQueryStyleNode);\n }\n if (mediaQueryStyleNode.sheet) {\n mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);\n mediaQueriesForWebkitCompatibility.add(query);\n }\n } catch (e) {\n log.error(e);\n }\n}\n","@use 'variables' as ;\n@use 'mixins' as ;\n@use 'sass:map';\n\n$button-sizes: (\n 'xl': 3.5rem,\n 'l': 3rem,\n 'm': 2.5rem,\n 's': 2rem,\n 'xs': 1.5rem\n);\n\n:host {\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n @include cat-select(none);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.cat-button {\n position: relative;\n font: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: cat-border-radius('m');\n text-decoration: none;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n transition: color cat-token('time.transition.s') linear, border-color cat-token('time.transition.s') linear,\n background-color cat-token('time.transition.s') linear, box-shadow cat-token('time.transition.s') linear;\n\n &:focus-visible {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n}\n\n// ----- content\n\n.cat-button-content {\n @include cat-break-word;\n\n .cat-button-ellipsed & {\n @include cat-ellipsis;\n }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n cursor: not-allowed;\n}\n\n// ----- round\n\n.cat-button-round {\n border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n cursor: default;\n\n cat-spinner {\n position: absolute;\n }\n\n > :not(cat-spinner) {\n visibility: hidden;\n }\n}\n\n// ----- theme\n\n.cat-button-filled {\n background-color: cat-token-wrap(var(--bg));\n color: cat-token-wrap(var(--fill));\n font-weight: 600;\n @include cat-font-smooth;\n\n &.cat-button-disabled {\n --bg: #{cat-token('color.ui.background.muted', $wrap: false)};\n --fill: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n}\n\n.cat-button-outlined {\n background-color: cat-token('color.ui.background.surface');\n box-shadow: inset 0 0 0 1px cat-token-wrap(var(--base), $alpha: 0.2);\n color: cat-token-wrap(var(--text));\n\n &.cat-button-disabled {\n --base: #{cat-token('color.ui.font.muted', $wrap: false)};\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.05);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n }\n\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n }\n}\n\n.cat-button-text {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n text-decoration: cat-token('font.decoration.linkButton');\n\n &.cat-button-disabled {\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration: cat-token('font.decoration.linkButtonHover');\n background-color: rgba(var(--base), 0.05);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration: cat-token('font.decoration.linkButtonHover');\n background-color: rgba(var(--base), 0.1);\n }\n}\n\n@mixin theme($theme) {\n .cat-button-#{$theme} {\n --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n @if $theme == 'secondary' {\n --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n } @else {\n --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};\n }\n }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding) {\n $-line-height: cat-body-line-height($fontSize);\n\n $-total-height: map.get($button-sizes, $size);\n $-padding-v: ($-total-height - $-line-height) * 0.5;\n $-padding-h: $padding;\n\n .cat-button-#{$size} {\n min-width: map.get($button-sizes, $size);\n padding: $-padding-v $-padding-h;\n @include cat-body($fontSize, null);\n gap: 0.25rem;\n\n // normalize icon size for line height\n @if $fontSize == 'm' {\n cat-icon {\n margin-top: -0.125rem;\n margin-bottom: -0.125rem;\n }\n }\n\n &.cat-button-icon {\n width: $-total-height;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n :host(.cat-button-pull[size='#{$size}']) {\n margin: $-padding-v * -1 $-padding-h * -1;\n }\n\n :host(.cat-button-pull-h[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n margin-right: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-v[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-t[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-l[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-b[size='#{$size}']) {\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-r[size='#{$size}']) {\n margin-right: $-padding-h * -1;\n }\n}\n\n:host(.cat-button-pull:not([size])) {\n margin: -0.625rem -0.75rem;\n}\n\n:host(.cat-button-pull-h:not([size])) {\n margin-left: -0.75rem;\n margin-right: -0.75rem;\n}\n\n:host(.cat-button-pull-v:not([size])) {\n margin-top: -0.625rem;\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-t:not([size])) {\n margin-top: -0.625rem;\n}\n\n:host(.cat-button-pull-l:not([size])) {\n margin-left: -0.75rem;\n}\n\n:host(.cat-button-pull-b:not([size])) {\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-r:not([size])) {\n margin-right: -0.75rem;\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem);\n@include size('xl', 'l', 1.25rem);\n\n// ----- tabs\n\n:host(.cat-tab-active:not(:hover)) {\n --cat-primary-text: transparent;\n}\n\n// ----- alignment\n\n:host(.cat-text-left) .cat-button {\n justify-content: left;\n}\n\n:host(.cat-text-right) .cat-button {\n justify-content: right;\n}\n\n// ----- navigation\n\n:host(.cat-nav-item) {\n width: 100%;\n\n .cat-button {\n box-shadow: none;\n border-radius: 0;\n justify-content: left;\n padding-left: $cat-nav-padding-horizontal;\n padding-right: $cat-nav-padding-horizontal;\n gap: 0.5rem;\n\n &:focus-visible {\n outline-offset: -2px;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/*\n Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n \n @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n /\n@Component({\n tag: 'cat-button',\n styleUrl: 'cat-button.scss',\n shadow: true\n})\nexport class CatButton {\n private button!: HTMLButtonElement \| HTMLAnchorElement;\n private mediaMatcher?: MediaMatcher;\n private mediaQueryList?: MediaQueryList;\n private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n @State() _iconOnly = true;\n\n /\n The rendering style of the button.\n /\n @Prop() variant: 'filled' \| 'outlined' \| 'text' = 'outlined';\n\n /\n The color palette of the button.\n /\n @Prop() color: 'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning' = 'secondary';\n\n /\n Set the button into an active state.\n /\n @Prop() active = false;\n\n /\n The size of the button.\n /\n @Prop() size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' = 'm';\n\n /\n The name of the button, which gets paired with the button's value when\n * submitted as part of a form. Corresponds with the native HTML name\n * attribute.\n /\n @Prop() name?: string;\n\n /\n The value of the button, which gets paired with the button's name when\n * submitted as part of a form. Corresponds with the native HTML value\n * attribute.\n /\n @Prop() value?: string;\n\n /\n Specifies that the button should be disabled. A disabled button is unusable\n * and un-clickable. Corresponds with the native HTML disabled attribute.\n /\n @Prop() disabled = false;\n\n /\n Displays the button in a loading state with a spinner. Just like a disabled\n * button, an inactive button is unusable and un-clickable. However, it\n * retains the current focus state.\n /\n @Prop() loading = false;\n\n /\n Allows the button to submit a form.\n /\n @Prop() submit = false;\n\n /\n Disables ellipse overflowing button content.\n /\n @Prop() noEllipsis = false;\n\n /\n Use round button edges.\n /\n @Prop() round = false;\n\n /\n A destination to link to, rendered in the href attribute of a link.\n /\n @Prop() url?: string;\n\n /\n Specifies where to open the linked document.\n /\n @Prop() urlTarget?: '_blank' \| '_self';\n\n /\n The name of an icon to be displayed in the button.\n /\n @Prop() icon?: string;\n\n /\n The SVG source of an icon to be displayed in the button. This takes\n * precenedence over the `icon` name.\n /\n @Prop() iconSrc?: string;\n\n /\n Hide the actual button content and only display the icon.\n /\n @Prop() iconOnly: boolean \| Breakpoint = false;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n Adds a unique identifier for the button. Please note that with this\n * particular component this ID is added inside the web component. If you need\n * an ID on the HTML element, use the regular `id` attribute instead.\n /\n @Prop() buttonId?: string;\n\n /\n Adds accessible label for the button that is only shown for screen\n * readers. Typically, this label text replaces the visible text on the\n * button for users who use assistive technology.\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /\n Sets the `aria-current` attribute on the button.\n /\n @Prop({ attribute: 'a11y-current' }) a11yCurrent?: string;\n\n /\n Attributes that will be added to the native HTML button element\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n @Watch('iconOnly')\n onIconOnlyChanged(value: boolean \| Breakpoint): void {\n // teardown\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n this.mediaQueryList = undefined;\n this.mediaQueryListener = undefined;\n // setup\n if (isBreakpoint(value)) {\n this.mediaMatcher ??= new MediaMatcher();\n this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n this._iconOnly = this.mediaQueryList.matches;\n } else {\n this._iconOnly = value;\n }\n }\n\n /\n Emitted when the button is clicked.\n /\n @Event() catClick!: EventEmitter<MouseEvent>;\n\n /\n Emitted when the button received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the button loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): void {\n this.onIconOnlyChanged(this.iconOnly);\n }\n\n componentWillRender(): void {\n if (this.isIconButton && !this.a11yLabel) {\n log.warn('[A11y] Missing ARIA label on icon button', this);\n }\n }\n\n @Listen('click')\n haltDisabledEvents(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n /\n Programmatically move focus to the button. Use this method instead of\n * `button.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.button.focus(options);\n }\n\n /\n Programmatically remove focus from the button. Use this method instead of\n * `button.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.button.blur();\n }\n\n /\n Programmatically simulate a click on the button.\n */\n @Method()\n async doClick(): Promise<void> {\n this.button.click();\n }\n\n render() {\n if (this.url) {\n return (\n <a\n ref={el => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? undefined : this.url}\n target={this.urlTarget}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </a>\n );\n } else {\n return (\n <button\n {...this.nativeAttributes}\n ref={el => (this.button = el as HTMLButtonElement)}\n type={this.submit ? 'submit' : 'button'}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round ?? this.isIconButton,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </button>\n );\n }\n }\n\n private get iconSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 's';\n default:\n return 'l';\n }\n }\n\n private get spinnerSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 'xs';\n default:\n return 'm';\n }\n }\n\n private get isIconButton() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && this._iconOnly;\n }\n\n private get hasPrefixIcon() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && !this._iconOnly && !this.iconRight;\n }\n\n private get hasSuffixIcon() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && !this._iconOnly && this.iconRight;\n }\n\n private get content() {\n return [\n this.hasPrefixIcon ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize} part=\"prefix\"></cat-icon>\n ) : null,\n this.isIconButton ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize}></cat-icon>\n ) : (\n <span class=\"cat-button-content\" part=\"content\">\n <slot></slot>\n </span>\n ),\n this.hasSuffixIcon ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize} part=\"suffix\"></cat-icon>\n ) : null,\n this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n ];\n }\n\n private onClick(event: MouseEvent) {\n this.catClick.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"],"version":3}

package/dist/components/cat-checkbox2.js CHANGED Viewed

@@ -82,7 +82,7 @@ const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.input.click();
   }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.value) : this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.value) : this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) })), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
@@ -115,6 +115,7 @@ const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "value": [1032],
     "hint": [1],
     "labelLeft": [4, "label-left"],
+    "nativeAttributes": [16],
     "hasSlottedLabel": [32],
     "doFocus": [64],
     "doBlur": [64],

package/dist/components/cat-checkbox2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-checkbox2.js","mappings":"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","names":["log"],"sources":["./src/components/cat-checkbox/cat-checkbox.scss?tag=cat-checkbox&encapsulation=shadow","./src/components/cat-checkbox/cat-checkbox.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$checkbox-width: 1.25rem;\n$checkbox-height: 1.25rem;\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n display: none;\n}\n\nlabel {\n flex: 0 1 auto;\n display: flex;\n gap: 0.5rem;\n @include cat-body('m');\n @include cat-select(none);\n cursor: pointer;\n position: relative;\n}\n\n.label-left {\n flex-direction: row-reverse;\n\n input {\n right: 1px;\n left: unset;\n }\n}\n\ninput {\n position: absolute;\n width: $checkbox-width;\n height: $checkbox-height;\n margin: 0;\n opacity: 0;\n cursor: inherit;\n left: 1px;\n top: 0.5px;\n}\n\n.box {\n flex: 0 0 auto;\n display: flex;\n position: relative;\n height: $checkbox-height;\n width: $checkbox-width;\n background-color: cat-token('color.ui.background.input');\n border: 1px solid cat-token('color.ui.border.dark');\n border-radius: cat-border-radius(s);\n transition: background-color cat-token('time.transition.s') ease, border-color cat-token('time.transition.s') ease;\n pointer-events: none;\n\n svg {\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 16px;\n stroke-dashoffset: 16px;\n transition: all cat-token('time.transition.s') ease;\n width: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.99);\n }\n\n :checked + & {\n background-color: cat-token('color.theme.primary.bg');\n border-color: cat-token('color.theme.primary.bg');\n stroke: cat-token('color.theme.primary.fill');\n\n .check {\n stroke-dashoffset: 0;\n }\n }\n\n :indeterminate + & {\n background-color: cat-token('color.theme.primary.bg');\n border-color: cat-token('color.theme.primary.bg');\n stroke: cat-token('color.theme.primary.fill');\n\n .dash {\n stroke-dashoffset: 0;\n }\n }\n\n :focus-visible + & {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n\n .is-disabled & {\n background-color: cat-token('color.ui.background.muted');\n border-color: cat-token('color.ui.border.dark');\n stroke: cat-token('color.ui.font.muted');\n }\n}\n\n:host(.cat-error) {\n .box {\n border: 1px solid cat-token('color.theme.danger.bg');\n }\n\n :checked + .box,\n :indeterminate + .box {\n background-color: cat-token('color.theme.danger.bg');\n border-color: cat-token('color.theme.danger.bg');\n stroke: cat-token('color.theme.danger.fill');\n }\n}\n\n.label {\n flex: 1 1 auto;\n min-width: 0;\n\n .is-hidden & {\n @include cat-visually-hidden;\n }\n}\n\n.is-disabled {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/*\n Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n \n @slot hint - Optional hint element to be displayed with the checkbox.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part checkbox - The checkbox element.\n * @part label - The label content.\n /\n@Component({\n tag: 'cat-checkbox',\n styleUrls: ['cat-checkbox.scss'],\n shadow: true\n})\nexport class CatCheckbox {\n private readonly _id = `cat-checkbox-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n /\n Checked state of the checkbox\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Disabled state of the checkbox\n /\n @Prop() disabled = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n Indeterminate state of the checkbox\n /\n @Prop() indeterminate = false;\n\n /\n Label of the checkbox which is presented in the UI\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n The name of the input\n /\n @Prop() name?: string;\n\n /\n Required state of the checkbox\n /\n @Prop() required = false;\n\n /\n The value of the checkbox\n /\n @Prop({ mutable: true }) value?: string \| boolean;\n\n /\n Optional hint text(s) to be displayed with the checkbox.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the checkbox.\n /\n @Prop() labelLeft = false;\n\n /\n Emitted when the checked status of the checkbox is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the checkbox received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the checkbox loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentDidLoad() {\n if (this.input && this.indeterminate) {\n this.input.indeterminate = true;\n }\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on checkbox', this);\n }\n }\n\n /\n Programmatically move focus to the checkbox. Use this method instead of\n * `input.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n /\n Programmatically remove focus from the checkbox. Use this method instead of\n * `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Programmatically simulate a click on the checkbox.\n */\n @Method()\n async doClick(): Promise<void> {\n this.input.click();\n }\n\n render() {\n return (\n <Host>\n <label\n htmlFor={this.id}\n class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n >\n <input\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n type=\"checkbox\"\n name={this.name}\n value={this.value !== undefined ? String(this.value) : this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n />\n <span class=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n <svg class=\"check\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n </svg>\n <svg class=\"dash\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 5 10.5 5\"></polyline>\n </svg>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {this.hintSection}\n </Host>\n );\n }\n\n private get hintSection() {\n const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n return (\n (this.hint \|\| hasSlottedHint) && (\n <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n )\n );\n }\n\n private onInput(event: Event) {\n this.checked = this.input.checked;\n\n if (!this.value \|\| typeof this.value === 'boolean') {\n this.value = this.checked;\n }\n this.catChange.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"],"version":3}
1	+ {"file":"cat-checkbox2.js","mappings":"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","names":["log"],"sources":["./src/components/cat-checkbox/cat-checkbox.scss?tag=cat-checkbox&encapsulation=shadow","./src/components/cat-checkbox/cat-checkbox.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$checkbox-width: 1.25rem;\n$checkbox-height: 1.25rem;\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n display: none;\n}\n\nlabel {\n flex: 0 1 auto;\n display: flex;\n gap: 0.5rem;\n @include cat-body('m');\n @include cat-select(none);\n cursor: pointer;\n position: relative;\n}\n\n.label-left {\n flex-direction: row-reverse;\n\n input {\n right: 1px;\n left: unset;\n }\n}\n\ninput {\n position: absolute;\n width: $checkbox-width;\n height: $checkbox-height;\n margin: 0;\n opacity: 0;\n cursor: inherit;\n left: 1px;\n top: 0.5px;\n}\n\n.box {\n flex: 0 0 auto;\n display: flex;\n position: relative;\n height: $checkbox-height;\n width: $checkbox-width;\n background-color: cat-token('color.ui.background.input');\n border: 1px solid cat-token('color.ui.border.dark');\n border-radius: cat-border-radius(s);\n transition: background-color cat-token('time.transition.s') ease, border-color cat-token('time.transition.s') ease;\n pointer-events: none;\n\n svg {\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 16px;\n stroke-dashoffset: 16px;\n transition: all cat-token('time.transition.s') ease;\n width: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.99);\n }\n\n :checked + & {\n background-color: cat-token('color.theme.primary.bg');\n border-color: cat-token('color.theme.primary.bg');\n stroke: cat-token('color.theme.primary.fill');\n\n .check {\n stroke-dashoffset: 0;\n }\n }\n\n :indeterminate + & {\n background-color: cat-token('color.theme.primary.bg');\n border-color: cat-token('color.theme.primary.bg');\n stroke: cat-token('color.theme.primary.fill');\n\n .dash {\n stroke-dashoffset: 0;\n }\n }\n\n :focus-visible + & {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n\n .is-disabled & {\n background-color: cat-token('color.ui.background.muted');\n border-color: cat-token('color.ui.border.dark');\n stroke: cat-token('color.ui.font.muted');\n }\n}\n\n:host(.cat-error) {\n .box {\n border: 1px solid cat-token('color.theme.danger.bg');\n }\n\n :checked + .box,\n :indeterminate + .box {\n background-color: cat-token('color.theme.danger.bg');\n border-color: cat-token('color.theme.danger.bg');\n stroke: cat-token('color.theme.danger.fill');\n }\n}\n\n.label {\n flex: 1 1 auto;\n min-width: 0;\n\n .is-hidden & {\n @include cat-visually-hidden;\n }\n}\n\n.is-disabled {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/*\n Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n \n @slot hint - Optional hint element to be displayed with the checkbox.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part checkbox - The checkbox element.\n * @part label - The label content.\n /\n@Component({\n tag: 'cat-checkbox',\n styleUrls: ['cat-checkbox.scss'],\n shadow: true\n})\nexport class CatCheckbox {\n private readonly _id = `cat-checkbox-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n /\n Checked state of the checkbox\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Disabled state of the checkbox\n /\n @Prop() disabled = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n Indeterminate state of the checkbox\n /\n @Prop() indeterminate = false;\n\n /\n Label of the checkbox which is presented in the UI\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n The name of the input\n /\n @Prop() name?: string;\n\n /\n Required state of the checkbox\n /\n @Prop() required = false;\n\n /\n The value of the checkbox\n /\n @Prop({ mutable: true }) value?: string \| boolean;\n\n /\n Optional hint text(s) to be displayed with the checkbox.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the checkbox.\n /\n @Prop() labelLeft = false;\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Emitted when the checked status of the checkbox is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the checkbox received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the checkbox loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentDidLoad() {\n if (this.input && this.indeterminate) {\n this.input.indeterminate = true;\n }\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on checkbox', this);\n }\n }\n\n /\n Programmatically move focus to the checkbox. Use this method instead of\n * `input.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n /\n Programmatically remove focus from the checkbox. Use this method instead of\n * `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Programmatically simulate a click on the checkbox.\n */\n @Method()\n async doClick(): Promise<void> {\n this.input.click();\n }\n\n render() {\n return (\n <Host>\n <label\n htmlFor={this.id}\n class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n >\n <input\n {...this.nativeAttributes}\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n type=\"checkbox\"\n name={this.name}\n value={this.value !== undefined ? String(this.value) : this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n />\n <span class=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n <svg class=\"check\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n </svg>\n <svg class=\"dash\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 5 10.5 5\"></polyline>\n </svg>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {this.hintSection}\n </Host>\n );\n }\n\n private get hintSection() {\n const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n return (\n (this.hint \|\| hasSlottedHint) && (\n <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n )\n );\n }\n\n private onInput(event: Event) {\n this.checked = this.input.checked;\n\n if (!this.value \|\| typeof this.value === 'boolean') {\n this.value = this.checked;\n }\n this.catChange.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"],"version":3}

package/dist/components/cat-form-hint-utils.js ADDED Viewed

@@ -0,0 +1,17 @@
+import { h } from '@stencil/core/internal/client';
+import { C as CatFormHint } from './cat-form-hint.js';
+import { c as catI18nRegistry } from './cat-i18n-registry.js';
+function buildHintSection(hostElement, id, hint, errorMap) {
+  const errors = Object.entries(errorMap || {});
+  if (errors.length) {
+    return (h("div", { id: id + '-hint' }, errors.map(([key, params]) => (h(CatFormHint, { hint: catI18nRegistry.t(`error.${key}`, params), class: "cat-text-danger" })))));
+  }
+  const hasSlottedHint = !!hostElement.querySelector('[slot="hint"]');
+  return ((hint || hasSlottedHint) && (h("div", { id: id + '-hint' },
+    h(CatFormHint, { hint: hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) }))));
+}
+export { buildHintSection as b };
+//# sourceMappingURL=cat-form-hint-utils.js.map

package/dist/components/cat-form-hint-utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"cat-form-hint-utils.js","mappings":";;;;SAOgB,gBAAgB,CAC9B,WAAwB,EACxB,EAAU,EACV,IAAmC,EACnC,QAA8B;EAE9B,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;EAC9C,IAAI,MAAM,CAAC,MAAM,EAAE;IACjB,QACE,WAAK,EAAE,EAAE,EAAE,GAAG,OAAO,IAClB,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,MACxB,EAAC,WAAW,IAAC,IAAI,EAAEA,eAAI,CAAC,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,MAAM,CAAC,EAAE,KAAK,EAAC,iBAAiB,GAAG,CAC9E,CAAC,CACE,EACN;GACH;EAED,MAAM,cAAc,GAAG,CAAC,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EACpE,QACE,CAAC,IAAI,IAAI,cAAc,MACrB,WAAK,EAAE,EAAE,EAAE,GAAG,OAAO;IACnB,EAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,cAAc,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,GAAI,CACjF,CACP,EACD;AACJ;;;;","names":["i18n"],"sources":["./src/components/cat-form-hint/cat-form-hint-utils.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { CatFormHint } from './cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ErrorMap = { [key: string]: any };\n\nexport function buildHintSection(\n hostElement: HTMLElement,\n id: string,\n hint: string | string[] | undefined,\n errorMap: ErrorMap | undefined\n) {\n const errors = Object.entries(errorMap || {});\n if (errors.length) {\n return (\n <div id={id + '-hint'}>\n {errors.map(([key, params]) => (\n <CatFormHint hint={i18n.t(`error.${key}`, params)} class=\"cat-text-danger\" />\n ))}\n </div>\n );\n }\n\n const hasSlottedHint = !!hostElement.querySelector('[slot=\"hint\"]');\n return (\n (hint || hasSlottedHint) && (\n <div id={id + '-hint'}>\n <CatFormHint hint={hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n </div>\n )\n );\n}\n"],"version":3}

package/dist/components/cat-form-hint.js CHANGED Viewed

@@ -7,10 +7,11 @@ import { h } from '@stencil/core/internal/client';
  * @return a JSX.Element
  */
 const CatFormHint = props => {
+  var _a;
   const { hint, slottedHint } = props;
   return (h("div", { class: "hint-section" }, [
     hint &&
-      (Array.isArray(hint) ? hint.map(item => h("p", { class: "input-hint" }, item)) : h("p", { class: "input-hint" }, hint)),
+      (Array.isArray(hint) ? (hint.map(item => { var _a; return h("p", { class: ((_a = props.class) !== null && _a !== void 0 ? _a : '') + ' input-hint' }, item); })) : (h("p", { class: ((_a = props.class) !== null && _a !== void 0 ? _a : '') + ' input-hint' }, hint))),
     slottedHint
   ]));
 };

package/dist/components/cat-form-hint.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-form-hint.js","mappings":";;~~AAaA~~;;;;;;MAMa,WAAW,GAA0C,KAAK;EACrE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;EACpC,QACE,WAAK,KAAK,EAAC,cAAc,IACtB;IACC,IAAI;OACD,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,~~GAAG~~,IAAI,CAAC,GAAG,CAAC,IAAI,~~IAAI~~,SAAG,KAAK,~~EAAC~~,~~YAAY~~,~~IAAE~~,IAAI,CAAK,CAAC,~~GAAG~~,SAAG,KAAK,~~EAAC~~,~~YAAY~~,~~IAAE~~,IAAI,CAAK,CAAC;~~IAC/G~~,WAAW;GACZ,CACG,EACN;AACJ;;;;","names":[],"sources":["./src/components/cat-form-hint/cat-form-hint.tsx"],"sourcesContent":["import { h, FunctionalComponent } from '@stencil/core';\n\n/*\n Properties of CatFormHint.\n \n @property hint - Optional hint text(s) of the form field.\n * @property slottedHint - Optional hint element of the form field.\n /\ninterface CatFormHintProps {\n hint?: string \| string[];\n slottedHint?: HTMLSlotElement;\n}\n\n/\n CatFormHint is a functional component that represents the hint area of form elements.\n \n @param props - {@link CatFormHintProps}\n * @return a JSX.Element\n */\nexport const CatFormHint: FunctionalComponent<CatFormHintProps> = props => {\n const { hint, slottedHint } = props;\n return (\n <div class=\"hint-section\">\n {[\n hint &&\n (Array.isArray(hint) ? hint.map(item => <p class~~=\"~~input-hint\">{item}</p>) : <p class~~=\"~~input-hint\">{hint}</p>),\n slottedHint\n ]}\n </div>\n );\n};\n"],"version":3}
1	+ {"file":"cat-form-hint.js","mappings":";;AAcA;;;;;;MAMa,WAAW,GAA0C,KAAK;;EACrE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;EACpC,QACE,WAAK,KAAK,EAAC,cAAc,IACtB;IACC,IAAI;OACD,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAClB,IAAI,CAAC,GAAG,CAAC,IAAI,cAAI,OAAA,SAAG,KAAK,EAAE,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE,IAAI,aAAa,IAAG,IAAI,CAAK,CAAA,EAAA,CAAC,KAE3E,SAAG,KAAK,EAAE,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE,IAAI,aAAa,IAAG,IAAI,CAAK,CAC1D,CAAC;IACJ,WAAW;GACZ,CACG,EACN;AACJ;;;;","names":[],"sources":["./src/components/cat-form-hint/cat-form-hint.tsx"],"sourcesContent":["import { h, FunctionalComponent } from '@stencil/core';\n\n/*\n Properties of CatFormHint.\n \n @property hint - Optional hint text(s) of the form field.\n * @property slottedHint - Optional hint element of the form field.\n /\ninterface CatFormHintProps {\n hint?: string \| string[];\n slottedHint?: HTMLSlotElement;\n class?: string;\n}\n\n/\n CatFormHint is a functional component that represents the hint area of form elements.\n \n @param props - {@link CatFormHintProps}\n * @return a JSX.Element\n */\nexport const CatFormHint: FunctionalComponent<CatFormHintProps> = props => {\n const { hint, slottedHint } = props;\n return (\n <div class=\"hint-section\">\n {[\n hint &&\n (Array.isArray(hint) ? (\n hint.map(item => <p class={(props.class ?? '') + ' input-hint'}>{item}</p>)\n ) : (\n <p class={(props.class ?? '') + ' input-hint'}>{hint}</p>\n )),\n slottedHint\n ]}\n </div>\n );\n};\n"],"version":3}

package/dist/components/cat-i18n-registry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-i18n-registry.js","mappings":";;MAEa,eAAe;EAM1B;;IAHiB,OAAE,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACnD,SAAI,GAAwB,IAAI,GAAG,EAAE,CAAC;;;;;;;;IAYrD,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,KAAK;MAC3C,MAAM,EAAE,MAAM,EAAE,GAAI,KAAqB,IAAI,EAAE,CAAC;MAChD,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;QACnC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;OAC7B;KACF,CAAC,CAAC;IACH,MAAM,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,KAAK;MAC7C,MAAM,EAAE,MAAM,EAAE,GAAI,KAAqB,IAAI,EAAE,CAAC;MAChD,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;QACnC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;OAClB;KACF,CAAC,CAAC;GACJ;EAED,OAAO,WAAW;IAChB,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE;MAC7B,eAAe,CAAC,QAAQ,GAAG,IAAI,eAAe,EAAE,CAAC;KAClD;IACD,OAAO,eAAe,CAAC,QAAQ,CAAC;GACjC;EAED,GAAG,CAAC,IAA+B,EAAE,MAAM,GAAG,KAAK;IACjD,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;IACrEA,QAAG,CAAC,IAAI,CAAC,gCAAgC,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,UAAU,GAAG,SAAS,EAAE,CAAC,CAAC;IAC9F,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;GACzF;EAED,KAAK,CAAC,MAAM,GAAG,KAAK;IAClB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IAClBA,QAAG,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;IAC/C,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC;GACpE;EAED,CAAC,CAAC,GAAW,EAAE,~~MAA2C~~;~~IACxD~~,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnC,IAAI,OAAO,KAAK,SAAS,EAAE;MACzBA,QAAG,CAAC,KAAK,CAAC,0CAA0C,GAAG,EAAE,CAAC,CAAC;MAC3D,OAAO,GAAG,CAAC;KACZ;IACD,OAAO,OAAO,CAAC,OAAO,CAAC,2BAA2B,EAAE,CAAC,MAAM,EAAE,GAAG,eAAK,OAAA,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,GAAG,CAAC,mCAAI,EAAE,EAAE,CAAA,EAAA,CAAC,CAAC;GAChG;EAEO,UAAU,CAAI,IAAY,EAAE,MAAU;IAC5C,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;MAC3B,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,IAAI;MACd,MAAM;KACP,CAAC,CAAC;GACJ;CACF;MAEY,eAAe,GAAG,eAAe,CAAC,WAAW;;;;","names":["log"],"sources":["./src/components/cat-i18n/cat-i18n-registry.ts"],"sourcesContent":["import log from 'loglevel';\n\nexport class CatI18nRegistry {\n private static instance: CatI18nRegistry;\n\n private readonly id = (Math.random() + 1).toString(36).substring(2);\n private readonly i18n: Map<string, string> = new Map();\n\n private constructor() {\n // hide constructor\n\n // In rare cases, the registry can be initialized twice. This can happen in\n // a micro frontend architecture where the registry is initialized in the\n // host application and in the micro frontend. To prevent the registry in\n // one application from overwriting the registry in the other, we listen for\n // events that are dispatched when messages are added or removed in other\n // applications and add or remove messages if the event was not dispatched\n // by this registry.\n window.addEventListener('cat-i18n-set', event => {\n const { detail } = (event as CustomEvent) \|\| {};\n if (detail && detail.id !== this.id) {\n this.set(detail.i18n, true);\n }\n });\n window.addEventListener('cat-i18n-clear', event => {\n const { detail } = (event as CustomEvent) \|\| {};\n if (detail && detail.id !== this.id) {\n this.clear(true);\n }\n });\n }\n\n static getInstance(): CatI18nRegistry {\n if (!CatI18nRegistry.instance) {\n CatI18nRegistry.instance = new CatI18nRegistry();\n }\n return CatI18nRegistry.instance;\n }\n\n set(i18n: { [key: string]: string }, silent = false): void {\n const i18nEntries = Object.entries(i18n);\n i18nEntries.forEach(([key, message]) => this.i18n.set(key, message));\n log.info(`[CatI18nRegistry] Registered ${i18nEntries.length !== 1 ? 'messages' : 'message'}`);\n !silent && window.dispatchEvent(this.buildEvent('cat-i18n-set', { i18n, id: this.id }));\n }\n\n clear(silent = false): void {\n this.i18n.clear();\n log.info(`[CatI18nRegistry] Cleared messages`);\n !silent && window.dispatchEvent(this.buildEvent('cat-i18n-clear'));\n }\n\n t(key: string, params?: { [key: string]: ~~string~~ ~~\| number~~ }): string {\n const message = this.i18n.get(key);\n if (message === undefined) {\n log.error(`[CatI18nRegistry] Unknown message key: ${key}`);\n return key;\n }\n return message.replace(/{{\\s([-a-zA-Z._]+)\\s}}/g, (_match, key) => `${params?.[key] ?? ''}`);\n }\n\n private buildEvent<T>(name: string, detail?: T) {\n return new CustomEvent(name, {\n bubbles: true,\n composed: true,\n detail\n });\n }\n}\n\nexport const catI18nRegistry = CatI18nRegistry.getInstance();\n"],"version":3}
1	+ {"file":"cat-i18n-registry.js","mappings":";;MAEa,eAAe;EAM1B;;IAHiB,OAAE,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACnD,SAAI,GAAwB,IAAI,GAAG,EAAE,CAAC;;;;;;;;IAYrD,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,KAAK;MAC3C,MAAM,EAAE,MAAM,EAAE,GAAI,KAAqB,IAAI,EAAE,CAAC;MAChD,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;QACnC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;OAC7B;KACF,CAAC,CAAC;IACH,MAAM,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,KAAK;MAC7C,MAAM,EAAE,MAAM,EAAE,GAAI,KAAqB,IAAI,EAAE,CAAC;MAChD,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;QACnC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;OAClB;KACF,CAAC,CAAC;GACJ;EAED,OAAO,WAAW;IAChB,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE;MAC7B,eAAe,CAAC,QAAQ,GAAG,IAAI,eAAe,EAAE,CAAC;KAClD;IACD,OAAO,eAAe,CAAC,QAAQ,CAAC;GACjC;EAED,GAAG,CAAC,IAA+B,EAAE,MAAM,GAAG,KAAK;IACjD,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;IACrEA,QAAG,CAAC,IAAI,CAAC,gCAAgC,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,UAAU,GAAG,SAAS,EAAE,CAAC,CAAC;IAC9F,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;GACzF;EAED,KAAK,CAAC,MAAM,GAAG,KAAK;IAClB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IAClBA,QAAG,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;IAC/C,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC;GACpE;EAED,CAAC,CAAC,GAAW,EAAE,MAAmC;IAChD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnC,IAAI,OAAO,KAAK,SAAS,EAAE;MACzBA,QAAG,CAAC,KAAK,CAAC,0CAA0C,GAAG,EAAE,CAAC,CAAC;MAC3D,OAAO,GAAG,CAAC;KACZ;IACD,OAAO,OAAO,CAAC,OAAO,CAAC,2BAA2B,EAAE,CAAC,MAAM,EAAE,GAAG,eAAK,OAAA,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,GAAG,CAAC,mCAAI,EAAE,EAAE,CAAA,EAAA,CAAC,CAAC;GAChG;EAEO,UAAU,CAAI,IAAY,EAAE,MAAU;IAC5C,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;MAC3B,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,IAAI;MACd,MAAM;KACP,CAAC,CAAC;GACJ;CACF;MAEY,eAAe,GAAG,eAAe,CAAC,WAAW;;;;","names":["log"],"sources":["./src/components/cat-i18n/cat-i18n-registry.ts"],"sourcesContent":["import log from 'loglevel';\n\nexport class CatI18nRegistry {\n private static instance: CatI18nRegistry;\n\n private readonly id = (Math.random() + 1).toString(36).substring(2);\n private readonly i18n: Map<string, string> = new Map();\n\n private constructor() {\n // hide constructor\n\n // In rare cases, the registry can be initialized twice. This can happen in\n // a micro frontend architecture where the registry is initialized in the\n // host application and in the micro frontend. To prevent the registry in\n // one application from overwriting the registry in the other, we listen for\n // events that are dispatched when messages are added or removed in other\n // applications and add or remove messages if the event was not dispatched\n // by this registry.\n window.addEventListener('cat-i18n-set', event => {\n const { detail } = (event as CustomEvent) \|\| {};\n if (detail && detail.id !== this.id) {\n this.set(detail.i18n, true);\n }\n });\n window.addEventListener('cat-i18n-clear', event => {\n const { detail } = (event as CustomEvent) \|\| {};\n if (detail && detail.id !== this.id) {\n this.clear(true);\n }\n });\n }\n\n static getInstance(): CatI18nRegistry {\n if (!CatI18nRegistry.instance) {\n CatI18nRegistry.instance = new CatI18nRegistry();\n }\n return CatI18nRegistry.instance;\n }\n\n set(i18n: { [key: string]: string }, silent = false): void {\n const i18nEntries = Object.entries(i18n);\n i18nEntries.forEach(([key, message]) => this.i18n.set(key, message));\n log.info(`[CatI18nRegistry] Registered ${i18nEntries.length !== 1 ? 'messages' : 'message'}`);\n !silent && window.dispatchEvent(this.buildEvent('cat-i18n-set', { i18n, id: this.id }));\n }\n\n clear(silent = false): void {\n this.i18n.clear();\n log.info(`[CatI18nRegistry] Cleared messages`);\n !silent && window.dispatchEvent(this.buildEvent('cat-i18n-clear'));\n }\n\n t(key: string, params?: { [key: string]: unknown }): string {\n const message = this.i18n.get(key);\n if (message === undefined) {\n log.error(`[CatI18nRegistry] Unknown message key: ${key}`);\n return key;\n }\n return message.replace(/{{\\s([-a-zA-Z._]+)\\s}}/g, (_match, key) => `${params?.[key] ?? ''}`);\n }\n\n private buildEvent<T>(name: string, detail?: T) {\n return new CustomEvent(name, {\n bubbles: true,\n composed: true,\n detail\n });\n }\n}\n\nexport const catI18nRegistry = CatI18nRegistry.getInstance();\n"],"version":3}

package/dist/components/cat-input.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loglevel } from './loglevel.js';
-import { C as CatFormHint } from './cat-form-hint.js';
+import { b as buildHintSection } from './cat-form-hint-utils.js';
 import { c as catI18nRegistry } from './cat-i18n-registry.js';
 import { d as defineCustomElement$4 } from './cat-button2.js';
 import { d as defineCustomElement$3 } from './cat-icon2.js';
 import { d as defineCustomElement$2 } from './cat-spinner2.js';
-const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}:host(.cat-error) .input-wrapper{box-shadow:0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-danger-bg, 217, 52, 13))}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
+const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 105, 118, 135)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.input-wrapper:not(.input-disabled):hover.input-invalid{box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.input-wrapper:not(.input-disabled):focus-within.input-invalid{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper.input-invalid{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
 let nextUniqueId = 0;
 const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -59,11 +59,18 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Type of form control.
      */
     this.type = 'text';
+    /**
+     * Fine-grained control over when the errors are shown. Can be `false` to
+     * never show errors, `true` to show errors on blur, or a number to show
+     * errors on change with the given delay in milliseconds.
+     */
+    this.errorUpdate = 0;
   }
   get id() {
     return this.identifier || this._id;
   }
   componentWillRender() {
+    this.watchErrorsHandler(this.errors);
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
       loglevel.warn('[A11y] Missing ARIA label on input', this);
@@ -98,30 +105,53 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   async clear() {
     this.value = '';
   }
+  watchErrorsHandler(value) {
+    if (this.errorUpdate === false) {
+      this.errorMap = undefined;
+    }
+    else {
+      this.errorMapSrc = Array.isArray(value)
+        ? value.map(error => ({ [error]: undefined }))
+        : value === true
+          ? {}
+          : value || undefined;
+    }
+  }
   render() {
-    return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), h("div", { class: {
+    var _a;
+    return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), h("div", { class: {
         'input-wrapper': true,
         'input-round': this.round,
-        'input-disabled': this.disabled
-      }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l" }), h("div", { class: "input-inner-wrapper" }, h("input", { ref: el => (this.input = el), id: this.id, class: {
+        'input-disabled': this.disabled,
+        'input-invalid': this.invalid
+      }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l" }), h("div", { class: "input-inner-wrapper" }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.id, class: {
         'has-clearable': this.clearable && !this.disabled
-      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this) }))), this.icon && this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hintSection));
+      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": ((_a = this.hint) === null || _a === void 0 ? void 0 : _a.length) ? this.id + '-hint' : undefined })), this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this) }))), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" })), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), buildHintSection(this.hostElement, this.id, this.hint, this.errorMap)));
   }
-  get hintSection() {
-    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-    return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
+  get invalid() {
+    return !!this.errorMap;
   }
   onInput(event) {
     this.value = this.input.value;
     this.catChange.emit(event);
+    if (typeof this.errorUpdate === 'number') {
+      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
+      this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);
+    }
   }
   onFocus(event) {
     this.catFocus.emit(event);
   }
   onBlur(event) {
     this.catBlur.emit(event);
+    if (this.errorUpdate !== false) {
+      this.errorMap = this.errorMapSrc;
+    }
   }
   get hostElement() { return this; }
+  static get watchers() { return {
+    "errors": ["watchErrorsHandler"]
+  }; }
   static get style() { return catInputCss; }
 }, [1, "cat-input", {
     "requiredMarker": [1, "required-marker"],
@@ -147,7 +177,11 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "round": [4],
     "type": [1],
     "value": [1032],
+    "errors": [4],
+    "errorUpdate": [8, "error-update"],
+    "nativeAttributes": [16],
     "hasSlottedLabel": [32],
+    "errorMap": [32],
     "doFocus": [64],
     "doBlur": [64],
     "doClick": [64],

package/dist/components/cat-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-input.js","mappings":"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","names":["CatInput","log","i18n"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n @include cat-body('m');\n margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.input-wrapper {\n display: flex;\n align-items: stretch;\n gap: 0.75rem;\n padding: 0 0.75rem;\n height: 2.5rem;\n overflow: hidden;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n box-shadow: 0 0 0 1px cat-token('color.ui.border.dark');\n transition: box-shadow cat-token('time.transition.s') linear;\n\n &.input-round {\n border-radius: 10rem;\n }\n\n &.input-disabled {\n background: cat-token('color.ui.background.muted');\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &:not(.input-disabled) {\n &:hover {\n box-shadow: 0 0 0 2px cat-token('color.ui.border.dark');\n }\n\n &:focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n }\n }\n\n /* stylelint-disable property-no-vendor-prefix /\n &:has(input:-webkit-autofill) {\n &,\n &:hover,\n &:focus {\n background-color: cat-token('color.ui.background.inputAutofill');\n }\n }\n / stylelint-enable property-no-vendor-prefix /\n}\n\n:host(.cat-error) {\n .input-wrapper {\n box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg');\n\n &:not(.input-disabled):hover {\n box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg');\n }\n }\n}\n\nlabel {\n align-self: flex-start;\n\n &.hidden {\n @include cat-visually-hidden;\n }\n}\n\n.input-optional {\n margin-left: 0.25rem;\n @include cat-body('xs');\n color: cat-token('color.ui.font.muted');\n}\n\n.text-prefix,\n.text-suffix {\n display: inline-flex;\n align-items: center;\n @include cat-select(none);\n}\n\n.text-prefix {\n border-right: 1px solid cat-token('color.ui.border.dark');\n padding-right: 0.75rem;\n}\n\n.text-suffix {\n border-left: 1px solid cat-token('color.ui.border.dark');\n padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n align-self: center;\n}\n\n.input-inner-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n flex: 1 1 auto;\n}\n\ninput {\n font: inherit;\n margin: 0;\n padding: 0;\n width: 100%;\n min-width: 0;\n border: none;\n outline: none;\n background: none;\n\n .input-disabled & {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &.has-clearable {\n padding-right: 1.5rem;\n }\n\n &::placeholder {\n color: cat-token('color.ui.font.muted');\n }\n\n / stylelint-disable property-no-vendor-prefix /\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n }\n }\n / stylelint-enable property-no-vendor-prefix /\n}\n\n.clearable {\n position: absolute;\n top: calc(50% - 1rem);\n right: -0.5rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/\n Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n \n @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n /\n@Component({\n tag: 'cat-input',\n styleUrl: 'cat-input.scss',\n shadow: true\n})\nexport class CatInput {\n private readonly _id = `cat-input-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n /\n Whether the label need a marker to shown if the input is required or optional.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n Hint for form autofill feature.\n /\n @Prop() autoComplete?: string;\n\n /\n Whether the input should show a clear button.\n /\n @Prop() clearable = false;\n\n /\n Whether the input is disabled.\n /\n @Prop() disabled = false;\n\n /\n Optional hint text(s) to be displayed with the input.\n /\n @Prop() hint?: string \| string[];\n\n /\n The name of an icon to be displayed in the input.\n /\n @Prop() icon?: string;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label for the input.\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n A maximum value for date, time and numeric values.\n /\n @Prop() max?: number \| string;\n\n /\n A maximum length (number of characters) for textual values.\n /\n @Prop() maxLength?: number;\n\n /\n A minimum value for date, time and numeric values.\n /\n @Prop() min?: number \| string;\n\n /\n A minimum length (number of characters) for textual values.\n /\n @Prop() minLength?: number;\n\n /\n The name of the form control. Submitted with the form as part of a name/value pair.\n /\n @Prop() name?: string;\n\n /\n The placeholder text to display within the input.\n /\n @Prop() placeholder?: string;\n\n /\n A textual prefix to be displayed in the input.\n /\n @Prop() textPrefix?: string;\n\n /\n A textual suffix to be displayed in the input.\n /\n @Prop() textSuffix?: string;\n\n /\n The value is not editable.\n /\n @Prop() readonly = false;\n\n /\n A value is required or must be check for the form to be submittable.\n /\n @Prop() required = false;\n\n /\n Use round input edges.\n /\n @Prop() round = false;\n\n /\n Type of form control.\n /\n @Prop() type: InputType = 'text';\n\n /\n The value of the control.\n /\n @Prop({ mutable: true }) value?: string \| number;\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the input received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on input', this);\n }\n }\n\n /\n Programmatically move focus to the input. Use this method instead of\n * `input.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n /\n Programmatically remove focus from the input. Use this method instead of\n * `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Programmatically simulate a click on the input.\n /\n @Method()\n async doClick(): Promise<void> {\n this.input.click();\n }\n\n /\n Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n }\n\n render() {\n return (\n <Host>\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n <span part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n </span>\n </label>\n )}\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-disabled': this.disabled\n }}\n onClick={() => this.input.focus()}\n >\n {this.textPrefix && (\n <span class=\"text-prefix\" part=\"prefix\">\n {this.textPrefix}\n </span>\n )}\n {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n <div class=\"input-inner-wrapper\">\n <input\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n class={{\n 'has-clearable': this.clearable && !this.disabled\n }}\n autocomplete={this.autoComplete}\n disabled={this.disabled}\n max={this.max}\n maxlength={this.maxLength}\n min={this.min}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n ></input>\n {this.clearable && !this.disabled && this.value && (\n <cat-button\n class=\"clearable\"\n icon=\"cross-circle-outlined\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n ></cat-button>\n )}\n </div>\n {this.icon && this.iconRight && <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n {this.hintSection}\n </Host>\n );\n }\n\n private get hintSection() {\n const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n return (\n (this.hint \|\| hasSlottedHint) && (\n <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n )\n );\n }\n\n private onInput(event: Event) {\n this.value = this.input.value;\n this.catChange.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"],"version":3}
1	+ {"file":"cat-input.js","mappings":"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","names":["CatInput","log","i18n"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n @include cat-body('m');\n margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.input-wrapper {\n display: flex;\n align-items: stretch;\n gap: 0.75rem;\n padding: 0 0.75rem;\n height: 2.5rem;\n overflow: hidden;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n box-shadow: 0 0 0 1px cat-token('color.ui.border.dark');\n transition: box-shadow cat-token('time.transition.s') linear;\n\n &.input-round {\n border-radius: 10rem;\n }\n\n &.input-disabled {\n background: cat-token('color.ui.background.muted');\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &:not(.input-disabled):hover {\n box-shadow: 0 0 0 2px cat-token('color.ui.border.dark');\n\n &.input-invalid {\n box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg', 0.2);\n }\n }\n\n &:not(.input-disabled):focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n\n &.input-invalid {\n outline: 2px solid cat-token('color.theme.danger.bg', 0.2);\n }\n }\n\n &.input-invalid {\n box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg', 0.2);\n }\n\n /* stylelint-disable property-no-vendor-prefix /\n &:has(input:-webkit-autofill) {\n &,\n &:hover,\n &:focus {\n background-color: cat-token('color.ui.background.inputAutofill');\n }\n }\n / stylelint-enable property-no-vendor-prefix /\n}\n\nlabel {\n align-self: flex-start;\n\n &.hidden {\n @include cat-visually-hidden;\n }\n}\n\n.label-optional {\n margin-left: 0.25rem;\n @include cat-body('xs');\n color: cat-token('color.ui.font.muted');\n}\n\n.text-prefix,\n.text-suffix {\n display: inline-flex;\n align-items: center;\n @include cat-select(none);\n}\n\n.text-prefix {\n border-right: 1px solid cat-token('color.ui.border.dark');\n padding-right: 0.75rem;\n}\n\n.text-suffix {\n border-left: 1px solid cat-token('color.ui.border.dark');\n padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n align-self: center;\n}\n\n.input-inner-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n flex: 1 1 auto;\n}\n\ninput {\n font: inherit;\n margin: 0;\n padding: 0;\n width: 100%;\n min-width: 0;\n border: none;\n outline: none;\n background: none;\n\n .input-disabled & {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &.has-clearable {\n padding-right: 1.5rem;\n }\n\n &::placeholder {\n color: cat-token('color.ui.font.muted');\n }\n\n / stylelint-disable property-no-vendor-prefix /\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n }\n }\n / stylelint-enable property-no-vendor-prefix /\n}\n\n.clearable {\n position: absolute;\n top: calc(50% - 1rem);\n right: -0.5rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { buildHintSection, ErrorMap } from '../cat-form-hint/cat-form-hint-utils';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/\n Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n \n @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n /\n@Component({\n tag: 'cat-input',\n styleUrl: 'cat-input.scss',\n shadow: true\n})\nexport class CatInput {\n private readonly _id = `cat-input-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n private errorMapSrc?: ErrorMap;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() errorMap?: ErrorMap;\n\n /\n Whether the label need a marker to shown if the input is required or optional.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n Hint for form autofill feature.\n /\n @Prop() autoComplete?: string;\n\n /\n Whether the input should show a clear button.\n /\n @Prop() clearable = false;\n\n /\n Whether the input is disabled.\n /\n @Prop() disabled = false;\n\n /\n Optional hint text(s) to be displayed with the input.\n /\n @Prop() hint?: string \| string[];\n\n /\n The name of an icon to be displayed in the input.\n /\n @Prop() icon?: string;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label for the input.\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n A maximum value for date, time and numeric values.\n /\n @Prop() max?: number \| string;\n\n /\n A maximum length (number of characters) for textual values.\n /\n @Prop() maxLength?: number;\n\n /\n A minimum value for date, time and numeric values.\n /\n @Prop() min?: number \| string;\n\n /\n A minimum length (number of characters) for textual values.\n /\n @Prop() minLength?: number;\n\n /\n The name of the form control. Submitted with the form as part of a name/value pair.\n /\n @Prop() name?: string;\n\n /\n The placeholder text to display within the input.\n /\n @Prop() placeholder?: string;\n\n /\n A textual prefix to be displayed in the input.\n /\n @Prop() textPrefix?: string;\n\n /\n A textual suffix to be displayed in the input.\n /\n @Prop() textSuffix?: string;\n\n /\n The value is not editable.\n /\n @Prop() readonly = false;\n\n /\n A value is required or must be check for the form to be submittable.\n /\n @Prop() required = false;\n\n /\n Use round input edges.\n /\n @Prop() round = false;\n\n /\n Type of form control.\n /\n @Prop() type: InputType = 'text';\n\n /\n The value of the control.\n /\n @Prop({ mutable: true }) value?: string \| number;\n\n /\n The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n /\n @Prop() errors?: boolean \| string[] \| ErrorMap;\n\n /\n Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors on change with the given delay in milliseconds.\n /\n @Prop() errorUpdate: boolean \| number = 0;\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the input received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.watchErrorsHandler(this.errors);\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on input', this);\n }\n }\n\n /\n Programmatically move focus to the input. Use this method instead of\n * `input.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n /\n Programmatically remove focus from the input. Use this method instead of\n * `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Programmatically simulate a click on the input.\n /\n @Method()\n async doClick(): Promise<void> {\n this.input.click();\n }\n\n /\n Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n }\n\n @Watch('errors')\n watchErrorsHandler(value?: boolean \| string[] \| ErrorMap) {\n if (this.errorUpdate === false) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(value)\n ? value.map(error => ({ [error]: undefined }))\n : value === true\n ? {}\n : value \|\| undefined;\n }\n }\n\n render() {\n return (\n <Host>\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n <span part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n </span>\n </label>\n )}\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-disabled': this.disabled,\n 'input-invalid': this.invalid\n }}\n onClick={() => this.input.focus()}\n >\n {this.textPrefix && (\n <span class=\"text-prefix\" part=\"prefix\">\n {this.textPrefix}\n </span>\n )}\n {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n <div class=\"input-inner-wrapper\">\n <input\n {...this.nativeAttributes}\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n class={{\n 'has-clearable': this.clearable && !this.disabled\n }}\n autocomplete={this.autoComplete}\n disabled={this.disabled}\n max={this.max}\n maxlength={this.maxLength}\n min={this.min}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hint?.length ? this.id + '-hint' : undefined}\n ></input>\n {this.clearable && !this.disabled && this.value && (\n <cat-button\n class=\"clearable\"\n icon=\"cross-circle-outlined\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n ></cat-button>\n )}\n </div>\n {!this.invalid && this.icon && this.iconRight && (\n <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>\n )}\n {this.invalid && (\n <cat-icon icon=\"alert-circle-outlined\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>\n )}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n {buildHintSection(this.hostElement, this.id, this.hint, this.errorMap)}\n </Host>\n );\n }\n\n private get invalid() {\n return !!this.errorMap;\n }\n\n private errorUpdateTimeoutId?: number;\n private onInput(event: Event) {\n this.value = this.input.value;\n this.catChange.emit(event);\n if (typeof this.errorUpdate === 'number') {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);\n }\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n if (this.errorUpdate !== false) {\n this.errorMap = this.errorMapSrc;\n }\n }\n}\n"],"version":3}

package/dist/components/cat-radio.js CHANGED Viewed

@@ -73,7 +73,7 @@ const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.input.click();
   }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { class: "radio" }, h("input", { ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { class: "radio" }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) })), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
@@ -102,6 +102,7 @@ const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "value": [1],
     "hint": [1],
     "labelLeft": [4, "label-left"],
+    "nativeAttributes": [16],
     "hasSlottedLabel": [32],
     "doFocus": [64],
     "doBlur": [64],