@haiilo/catalyst 0.1.0 → 0.2.1

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
  1. package/dist/catalyst/catalyst.css +1 -1403
  2. package/dist/catalyst/catalyst.esm.js +1 -126
  3. package/dist/catalyst/index.esm.js +0 -1
  4. package/dist/catalyst/p-22fac0fb.js +1 -0
  5. package/dist/catalyst/p-2dc28db3.entry.js +11 -0
  6. package/dist/catalyst/{p-f3fad7a0.js → p-e08f13c7.js} +1 -1
  7. package/dist/cjs/{app-globals-8908fe44.js → app-globals-814f34aa.js} +5 -2
  8. package/dist/cjs/cat-alert_7.cjs.entry.js +3115 -0
  9. package/dist/cjs/{cat-icon-registry-da00f7d6.js → cat-icon-registry-909e38e7.js} +65 -1
  10. package/dist/cjs/catalyst.cjs.js +7 -114
  11. package/dist/cjs/loader.cjs.js +5 -20
  12. package/dist/collection/collection-manifest.json +6 -2
  13. package/dist/collection/components/cat-alert/cat-alert.css +57 -0
  14. package/dist/collection/components/cat-alert/cat-alert.js +49 -0
  15. package/dist/collection/components/cat-badge/cat-badge.css +154 -0
  16. package/dist/collection/components/cat-badge/cat-badge.js +141 -0
  17. package/dist/collection/components/cat-button/cat-button.css +43 -8
  18. package/dist/collection/components/cat-button/cat-button.js +28 -6
  19. package/dist/collection/components/cat-icon/cat-icon.css +2 -1
  20. package/dist/collection/components/cat-menu/cat-menu.css +33 -0
  21. package/dist/collection/components/cat-menu/cat-menu.js +185 -0
  22. package/dist/collection/components/cat-skeleton/cat-skeleton.css +177 -0
  23. package/dist/collection/components/cat-skeleton/cat-skeleton.js +130 -0
  24. package/dist/components/cat-alert.d.ts +11 -0
  25. package/dist/components/cat-alert.js +42 -0
  26. package/dist/components/cat-badge.d.ts +11 -0
  27. package/dist/components/cat-badge.js +66 -0
  28. package/dist/components/cat-button.js +14 -42
  29. package/dist/components/cat-icon2.js +4 -5
  30. package/dist/components/cat-menu.d.ts +11 -0
  31. package/dist/components/cat-menu.js +2377 -0
  32. package/dist/components/cat-skeleton.d.ts +11 -0
  33. package/dist/components/cat-skeleton.js +76 -0
  34. package/dist/components/cat-spinner2.js +3 -4
  35. package/dist/components/index.d.ts +1 -1
  36. package/dist/components/index.js +4 -575
  37. package/dist/esm/{app-globals-000601ea.js → app-globals-e1679c2d.js} +5 -2
  38. package/dist/esm/cat-alert_7.entry.js +3105 -0
  39. package/dist/esm/{cat-icon-registry-b66e3f57.js → cat-icon-registry-4d02ee6c.js} +65 -2
  40. package/dist/esm/catalyst.js +6 -113
  41. package/dist/esm/loader.js +4 -19
  42. package/dist/esm/polyfills/css-shim.js +1 -1
  43. package/dist/types/components/cat-alert/cat-alert.d.ts +12 -0
  44. package/dist/types/components/cat-badge/cat-badge.d.ts +28 -0
  45. package/dist/types/components/cat-button/cat-button.d.ts +5 -0
  46. package/dist/types/components/cat-menu/cat-menu.d.ts +32 -0
  47. package/dist/types/components/cat-skeleton/cat-skeleton.d.ts +28 -0
  48. package/dist/types/components.d.ts +153 -0
  49. package/package.json +12 -9
  50. package/dist/catalyst/app-globals-622e4f87.js +0 -704
  51. package/dist/catalyst/cat-button.entry.js +0 -629
  52. package/dist/catalyst/cat-icon-registry-59da2e37.js +0 -43
  53. package/dist/catalyst/cat-icon.entry.js +0 -27
  54. package/dist/catalyst/cat-spinner.entry.js +0 -21
  55. package/dist/catalyst/css-shim-20dbffa5.js +0 -4
  56. package/dist/catalyst/dom-c5ed0ba5.js +0 -73
  57. package/dist/catalyst/index-72a1bbba.js +0 -3031
  58. package/dist/catalyst/p-17a20657.js +0 -1
  59. package/dist/catalyst/p-582935bb.entry.js +0 -1
  60. package/dist/catalyst/shadow-css-8c625855.js +0 -388
  61. package/dist/cjs/app-globals-fe9ff8ba.js +0 -706
  62. package/dist/cjs/cat-button.cjs.entry.js +0 -633
  63. package/dist/cjs/cat-button_3.cjs.entry.js +0 -645
  64. package/dist/cjs/cat-icon-registry-850c538c.js +0 -45
  65. package/dist/cjs/cat-icon.cjs.entry.js +0 -31
  66. package/dist/cjs/cat-spinner.cjs.entry.js +0 -25
  67. package/dist/cjs/css-shim-3bfdba4f.js +0 -6
  68. package/dist/cjs/dom-8ac1ad03.js +0 -75
  69. package/dist/cjs/index-083488c8.js +0 -3065
  70. package/dist/cjs/shadow-css-41d9783d.js +0 -390
  71. package/dist/esm/app-globals-622e4f87.js +0 -704
  72. package/dist/esm/cat-button.entry.js +0 -629
  73. package/dist/esm/cat-button_3.entry.js +0 -639
  74. package/dist/esm/cat-icon-registry-59da2e37.js +0 -43
  75. package/dist/esm/cat-icon.entry.js +0 -27
  76. package/dist/esm/cat-spinner.entry.js +0 -21
  77. package/dist/esm/css-shim-20dbffa5.js +0 -4
  78. package/dist/esm/dom-c5ed0ba5.js +0 -73
  79. package/dist/esm/index-72a1bbba.js +0 -3031
  80. package/dist/esm/shadow-css-8c625855.js +0 -388
@@ -1,645 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const catIconRegistry = require('./cat-icon-registry-da00f7d6.js');
6
-
7
- var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
8
-
9
- function createCommonjsModule(fn, basedir, module) {
10
- return module = {
11
- path: basedir,
12
- exports: {},
13
- require: function (path, base) {
14
- return commonjsRequire();
15
- }
16
- }, fn(module, module.exports), module.exports;
17
- }
18
-
19
- function commonjsRequire () {
20
- throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
21
- }
22
-
23
- var loglevel = createCommonjsModule(function (module) {
24
- /*
25
- * loglevel - https://github.com/pimterry/loglevel
26
- *
27
- * Copyright (c) 2013 Tim Perry
28
- * Licensed under the MIT license.
29
- */
30
- (function (root, definition) {
31
- if (module.exports) {
32
- module.exports = definition();
33
- } else {
34
- root.log = definition();
35
- }
36
- }(commonjsGlobal, function () {
37
-
38
- // Slightly dubious tricks to cut down minimized file size
39
- var noop = function() {};
40
- var undefinedType = "undefined";
41
- var isIE = (typeof window !== undefinedType) && (typeof window.navigator !== undefinedType) && (
42
- /Trident\/|MSIE /.test(window.navigator.userAgent)
43
- );
44
-
45
- var logMethods = [
46
- "trace",
47
- "debug",
48
- "info",
49
- "warn",
50
- "error"
51
- ];
52
-
53
- // Cross-browser bind equivalent that works at least back to IE6
54
- function bindMethod(obj, methodName) {
55
- var method = obj[methodName];
56
- if (typeof method.bind === 'function') {
57
- return method.bind(obj);
58
- } else {
59
- try {
60
- return Function.prototype.bind.call(method, obj);
61
- } catch (e) {
62
- // Missing bind shim or IE8 + Modernizr, fallback to wrapping
63
- return function() {
64
- return Function.prototype.apply.apply(method, [obj, arguments]);
65
- };
66
- }
67
- }
68
- }
69
-
70
- // Trace() doesn't print the message in IE, so for that case we need to wrap it
71
- function traceForIE() {
72
- if (console.log) {
73
- if (console.log.apply) {
74
- console.log.apply(console, arguments);
75
- } else {
76
- // In old IE, native console methods themselves don't have apply().
77
- Function.prototype.apply.apply(console.log, [console, arguments]);
78
- }
79
- }
80
- if (console.trace) console.trace();
81
- }
82
-
83
- // Build the best logging method possible for this env
84
- // Wherever possible we want to bind, not wrap, to preserve stack traces
85
- function realMethod(methodName) {
86
- if (methodName === 'debug') {
87
- methodName = 'log';
88
- }
89
-
90
- if (typeof console === undefinedType) {
91
- return false; // No method possible, for now - fixed later by enableLoggingWhenConsoleArrives
92
- } else if (methodName === 'trace' && isIE) {
93
- return traceForIE;
94
- } else if (console[methodName] !== undefined) {
95
- return bindMethod(console, methodName);
96
- } else if (console.log !== undefined) {
97
- return bindMethod(console, 'log');
98
- } else {
99
- return noop;
100
- }
101
- }
102
-
103
- // These private functions always need `this` to be set properly
104
-
105
- function replaceLoggingMethods(level, loggerName) {
106
- /*jshint validthis:true */
107
- for (var i = 0; i < logMethods.length; i++) {
108
- var methodName = logMethods[i];
109
- this[methodName] = (i < level) ?
110
- noop :
111
- this.methodFactory(methodName, level, loggerName);
112
- }
113
-
114
- // Define log.log as an alias for log.debug
115
- this.log = this.debug;
116
- }
117
-
118
- // In old IE versions, the console isn't present until you first open it.
119
- // We build realMethod() replacements here that regenerate logging methods
120
- function enableLoggingWhenConsoleArrives(methodName, level, loggerName) {
121
- return function () {
122
- if (typeof console !== undefinedType) {
123
- replaceLoggingMethods.call(this, level, loggerName);
124
- this[methodName].apply(this, arguments);
125
- }
126
- };
127
- }
128
-
129
- // By default, we use closely bound real methods wherever possible, and
130
- // otherwise we wait for a console to appear, and then try again.
131
- function defaultMethodFactory(methodName, level, loggerName) {
132
- /*jshint validthis:true */
133
- return realMethod(methodName) ||
134
- enableLoggingWhenConsoleArrives.apply(this, arguments);
135
- }
136
-
137
- function Logger(name, defaultLevel, factory) {
138
- var self = this;
139
- var currentLevel;
140
- defaultLevel = defaultLevel == null ? "WARN" : defaultLevel;
141
-
142
- var storageKey = "loglevel";
143
- if (typeof name === "string") {
144
- storageKey += ":" + name;
145
- } else if (typeof name === "symbol") {
146
- storageKey = undefined;
147
- }
148
-
149
- function persistLevelIfPossible(levelNum) {
150
- var levelName = (logMethods[levelNum] || 'silent').toUpperCase();
151
-
152
- if (typeof window === undefinedType || !storageKey) return;
153
-
154
- // Use localStorage if available
155
- try {
156
- window.localStorage[storageKey] = levelName;
157
- return;
158
- } catch (ignore) {}
159
-
160
- // Use session cookie as fallback
161
- try {
162
- window.document.cookie =
163
- encodeURIComponent(storageKey) + "=" + levelName + ";";
164
- } catch (ignore) {}
165
- }
166
-
167
- function getPersistedLevel() {
168
- var storedLevel;
169
-
170
- if (typeof window === undefinedType || !storageKey) return;
171
-
172
- try {
173
- storedLevel = window.localStorage[storageKey];
174
- } catch (ignore) {}
175
-
176
- // Fallback to cookies if local storage gives us nothing
177
- if (typeof storedLevel === undefinedType) {
178
- try {
179
- var cookie = window.document.cookie;
180
- var location = cookie.indexOf(
181
- encodeURIComponent(storageKey) + "=");
182
- if (location !== -1) {
183
- storedLevel = /^([^;]+)/.exec(cookie.slice(location))[1];
184
- }
185
- } catch (ignore) {}
186
- }
187
-
188
- // If the stored level is not valid, treat it as if nothing was stored.
189
- if (self.levels[storedLevel] === undefined) {
190
- storedLevel = undefined;
191
- }
192
-
193
- return storedLevel;
194
- }
195
-
196
- function clearPersistedLevel() {
197
- if (typeof window === undefinedType || !storageKey) return;
198
-
199
- // Use localStorage if available
200
- try {
201
- window.localStorage.removeItem(storageKey);
202
- return;
203
- } catch (ignore) {}
204
-
205
- // Use session cookie as fallback
206
- try {
207
- window.document.cookie =
208
- encodeURIComponent(storageKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
209
- } catch (ignore) {}
210
- }
211
-
212
- /*
213
- *
214
- * Public logger API - see https://github.com/pimterry/loglevel for details
215
- *
216
- */
217
-
218
- self.name = name;
219
-
220
- self.levels = { "TRACE": 0, "DEBUG": 1, "INFO": 2, "WARN": 3,
221
- "ERROR": 4, "SILENT": 5};
222
-
223
- self.methodFactory = factory || defaultMethodFactory;
224
-
225
- self.getLevel = function () {
226
- return currentLevel;
227
- };
228
-
229
- self.setLevel = function (level, persist) {
230
- if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) {
231
- level = self.levels[level.toUpperCase()];
232
- }
233
- if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) {
234
- currentLevel = level;
235
- if (persist !== false) { // defaults to true
236
- persistLevelIfPossible(level);
237
- }
238
- replaceLoggingMethods.call(self, level, name);
239
- if (typeof console === undefinedType && level < self.levels.SILENT) {
240
- return "No console available for logging";
241
- }
242
- } else {
243
- throw "log.setLevel() called with invalid level: " + level;
244
- }
245
- };
246
-
247
- self.setDefaultLevel = function (level) {
248
- defaultLevel = level;
249
- if (!getPersistedLevel()) {
250
- self.setLevel(level, false);
251
- }
252
- };
253
-
254
- self.resetLevel = function () {
255
- self.setLevel(defaultLevel, false);
256
- clearPersistedLevel();
257
- };
258
-
259
- self.enableAll = function(persist) {
260
- self.setLevel(self.levels.TRACE, persist);
261
- };
262
-
263
- self.disableAll = function(persist) {
264
- self.setLevel(self.levels.SILENT, persist);
265
- };
266
-
267
- // Initialize with the right level
268
- var initialLevel = getPersistedLevel();
269
- if (initialLevel == null) {
270
- initialLevel = defaultLevel;
271
- }
272
- self.setLevel(initialLevel, false);
273
- }
274
-
275
- /*
276
- *
277
- * Top-level API
278
- *
279
- */
280
-
281
- var defaultLogger = new Logger();
282
-
283
- var _loggersByName = {};
284
- defaultLogger.getLogger = function getLogger(name) {
285
- if ((typeof name !== "symbol" && typeof name !== "string") || name === "") {
286
- throw new TypeError("You must supply a name when creating a logger.");
287
- }
288
-
289
- var logger = _loggersByName[name];
290
- if (!logger) {
291
- logger = _loggersByName[name] = new Logger(
292
- name, defaultLogger.getLevel(), defaultLogger.methodFactory);
293
- }
294
- return logger;
295
- };
296
-
297
- // Grab the current global log variable in case of overwrite
298
- var _log = (typeof window !== undefinedType) ? window.log : undefined;
299
- defaultLogger.noConflict = function() {
300
- if (typeof window !== undefinedType &&
301
- window.log === defaultLogger) {
302
- window.log = _log;
303
- }
304
-
305
- return defaultLogger;
306
- };
307
-
308
- defaultLogger.getLoggers = function getLoggers() {
309
- return _loggersByName;
310
- };
311
-
312
- // ES6 default export, for compatibility
313
- defaultLogger['default'] = defaultLogger;
314
-
315
- return defaultLogger;
316
- }));
317
- });
318
-
319
- const _breakpoints = ['xs', 's', 'm', 'l', 'xl'];
320
- const Breakpoints = {
321
- xs: '(max-width: 539.98px)',
322
- s: '(max-width: 767.98px)',
323
- m: '(max-width: 991.98px)',
324
- l: '(max-width: 1199.98px)',
325
- xl: '(max-width: 1399.98px)'
326
- };
327
- function isBreakpoint(value) {
328
- return typeof value === 'string' && _breakpoints.includes(value);
329
- }
330
-
331
- // https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts
332
- // Whether the current platform supports the V8 Break Iterator. The V8 check
333
- // is necessary to detect all Blink based browsers.
334
- let hasV8BreakIterator;
335
- // We need a try/catch around the reference to `Intl`, because accessing it in some cases can
336
- // cause IE to throw. These cases are tied to particular versions of Windows and can happen if
337
- // the consumer is providing a polyfilled `Map`. See:
338
- // https://github.com/Microsoft/ChakraCore/issues/3189
339
- // https://github.com/angular/components/issues/15687
340
- try {
341
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
342
- hasV8BreakIterator = typeof Intl !== 'undefined' && Intl.v8BreakIterator;
343
- }
344
- catch (_a) {
345
- hasV8BreakIterator = false;
346
- }
347
- class Platform {
348
- constructor() {
349
- /** Whether the current browser is Microsoft Edge. */
350
- this.EDGE = /(edge)/i.test(navigator.userAgent);
351
- /** Whether the current rendering engine is Microsoft Trident. */
352
- this.TRIDENT = /(msie|trident)/i.test(navigator.userAgent);
353
- // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.
354
- /** Whether the current rendering engine is Blink. */
355
- this.BLINK =
356
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
357
- !!(window.chrome || hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;
358
- // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to
359
- // ensure that Webkit runs standalone and is not used as another engine's base.
360
- /** Whether the current rendering engine is WebKit. */
361
- this.WEBKIT = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;
362
- /** Whether the current platform is Apple iOS. */
363
- this.IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);
364
- // It's difficult to detect the plain Gecko engine, because most of the browsers identify
365
- // them self as Gecko-like browsers and modify the userAgent's according to that.
366
- // Since we only cover one explicit Firefox case, we can simply check for Firefox
367
- // instead of having an unstable check for Gecko.
368
- /** Whether the current browser is Firefox. */
369
- this.FIREFOX = /(firefox|minefield)/i.test(navigator.userAgent);
370
- /** Whether the current platform is Android. */
371
- // Trident on mobile adds the android platform to the userAgent to trick detections.
372
- this.ANDROID = /android/i.test(navigator.userAgent) && !this.TRIDENT;
373
- // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake
374
- // this and just place the Safari keyword in the userAgent. To be more safe about Safari every
375
- // Safari browser should also use Webkit as its layout engine.
376
- /** Whether the current browser is Safari. */
377
- this.SAFARI = /safari/i.test(navigator.userAgent) && this.WEBKIT;
378
- }
379
- }
380
-
381
- // https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts
382
- /** Global registry for all dynamically-created, injected media queries. */
383
- const mediaQueriesForWebkitCompatibility = new Set();
384
- /** Style tag that holds all of the dynamically-created media queries. */
385
- let mediaQueryStyleNode;
386
- /** A utility for calling matchMedia queries. */
387
- class MediaMatcher {
388
- constructor() {
389
- this._platform = new Platform();
390
- this._matchMedia = window.matchMedia.bind(window);
391
- }
392
- /**
393
- * Evaluates the given media query and returns the native MediaQueryList from which results
394
- * can be retrieved.
395
- * Confirms the layout engine will trigger for the selector query provided and returns the
396
- * MediaQueryList for the query provided.
397
- */
398
- matchMedia(query) {
399
- if (this._platform.WEBKIT || this._platform.BLINK) {
400
- createEmptyStyleRule(query);
401
- }
402
- return this._matchMedia(query);
403
- }
404
- }
405
- /**
406
- * Creates an empty stylesheet that is used to work around browser inconsistencies related to
407
- * `matchMedia`. At the time of writing, it handles the following cases:
408
- * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`
409
- * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.
410
- * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules
411
- * inside the `@media` match existing elements on the page. We work around it by having one rule
412
- * targeting the `body`. See https://github.com/angular/components/issues/23546.
413
- */
414
- function createEmptyStyleRule(query) {
415
- if (mediaQueriesForWebkitCompatibility.has(query)) {
416
- return;
417
- }
418
- try {
419
- if (!mediaQueryStyleNode) {
420
- mediaQueryStyleNode = document.createElement('style');
421
- mediaQueryStyleNode.setAttribute('type', 'text/css');
422
- document.head.appendChild(mediaQueryStyleNode);
423
- }
424
- if (mediaQueryStyleNode.sheet) {
425
- mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);
426
- mediaQueriesForWebkitCompatibility.add(query);
427
- }
428
- }
429
- catch (e) {
430
- loglevel.error(e);
431
- }
432
- }
433
-
434
- const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host[hidden]{display:none}.cat-button{font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid #0071ff;outline-offset:1px}.cat-button-content{flex:1 1 auto;text-align:center}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:underline}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:248, 248, 251;--fill:0, 0, 0;--text:0, 0, 0;--base:248, 248, 251}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:235, 236, 240;--fill:0, 0, 0;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:235, 236, 240;--fill:0, 0, 0;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text:174, 42, 10}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}";
435
-
436
- let CatButton = class {
437
- constructor(hostRef) {
438
- catIconRegistry.registerInstance(this, hostRef);
439
- this.catFocus = catIconRegistry.createEvent(this, "catFocus", 7);
440
- this.catBlur = catIconRegistry.createEvent(this, "catBlur", 7);
441
- this._iconOnly = true;
442
- /**
443
- * The rendering style of the button.
444
- */
445
- this.variant = 'filled';
446
- /**
447
- * The color palette of the button.
448
- */
449
- this.color = 'primary';
450
- /**
451
- * The size of the button.
452
- */
453
- this.size = 'm';
454
- /**
455
- * Specifies that the button should be disabled. A disabled button is unusable
456
- * and un-clickable. Corresponds with the native HTML disabled attribute.
457
- */
458
- this.disabled = false;
459
- /**
460
- * Displays the button in a loading state with a spinner. Just like a disabled
461
- * button, an inactive button is unusable and un-clickable. However, it
462
- * retains the current focus state.
463
- */
464
- this.loading = false;
465
- /**
466
- * Allows the button to submit a form.
467
- */
468
- this.submit = false;
469
- /**
470
- * Ellipse overflowing button content.
471
- */
472
- this.ellipsed = true;
473
- /**
474
- * Use round button edges.
475
- */
476
- this.round = false;
477
- /**
478
- * Hide the actual button content and only display the icon.
479
- */
480
- this.iconOnly = false;
481
- /**
482
- * Display the icon as a suffix.
483
- */
484
- this.iconSuffix = false;
485
- }
486
- onIconOnlyChanged(value) {
487
- var _a, _b;
488
- // teardown
489
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
490
- (_a = this.mediaQueryList) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.mediaQueryListener);
491
- this.mediaQueryList = undefined;
492
- this.mediaQueryListener = undefined;
493
- // setup
494
- if (isBreakpoint(value)) {
495
- (_b = this.mediaMatcher) !== null && _b !== void 0 ? _b : (this.mediaMatcher = new MediaMatcher());
496
- this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);
497
- this.mediaQueryListener = (event) => (this._iconOnly = event.matches);
498
- this.mediaQueryList.addEventListener('change', this.mediaQueryListener);
499
- this._iconOnly = this.mediaQueryList.matches;
500
- }
501
- else {
502
- this._iconOnly = value;
503
- }
504
- }
505
- componentWillLoad() {
506
- this.onIconOnlyChanged(this.iconOnly);
507
- }
508
- componentWillRender() {
509
- if (this.isIconButton && !this.a11yLabel) {
510
- loglevel.warn('[A11y] Missing ARIA label on icon button', this);
511
- }
512
- }
513
- haltDisabledEvents(event) {
514
- if (this.disabled || this.loading) {
515
- event.preventDefault();
516
- event.stopImmediatePropagation();
517
- }
518
- }
519
- /**
520
- * Sets focus on the button. Use this method instead of `button.focus()`.
521
- *
522
- * @param options An optional object providing options to control aspects of
523
- * the focusing process.
524
- */
525
- async setFocus(options) {
526
- this.button.focus(options);
527
- }
528
- render() {
529
- var _a;
530
- if (this.url) {
531
- return (catIconRegistry.h("a", { ref: el => (this.button = el), href: this.disabled ? undefined : this.url, target: this.urlTarget, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, id: this.buttonId, part: "button", class: {
532
- 'cat-button': true,
533
- 'cat-button-icon': this.isIconButton,
534
- 'cat-button-round': this.round,
535
- 'cat-button-loading': this.loading,
536
- 'cat-button-disabled': this.disabled,
537
- 'cat-button-ellipsed': this.ellipsed && !this.isIconButton,
538
- [`cat-button-${this.variant}`]: Boolean(this.variant),
539
- [`cat-button-${this.color}`]: Boolean(this.color),
540
- [`cat-button-${this.size}`]: Boolean(this.size)
541
- }, onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
542
- }
543
- else {
544
- return (catIconRegistry.h("button", { ref: el => (this.button = el), type: this.submit ? 'submit' : 'button', name: this.name, value: this.value, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, id: this.buttonId, part: "button", class: {
545
- 'cat-button': true,
546
- 'cat-button-icon': this.isIconButton,
547
- 'cat-button-round': (_a = this.round) !== null && _a !== void 0 ? _a : this.isIconButton,
548
- 'cat-button-loading': this.loading,
549
- 'cat-button-disabled': this.disabled,
550
- 'cat-button-ellipsed': this.ellipsed && !this.isIconButton,
551
- [`cat-button-${this.variant}`]: Boolean(this.variant),
552
- [`cat-button-${this.color}`]: Boolean(this.color),
553
- [`cat-button-${this.size}`]: Boolean(this.size)
554
- }, onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
555
- }
556
- }
557
- get iconSize() {
558
- switch (this.size) {
559
- case 'xs':
560
- return 's';
561
- default:
562
- return 'l';
563
- }
564
- }
565
- get spinnerSize() {
566
- switch (this.size) {
567
- case 'xs':
568
- return 'xs';
569
- default:
570
- return 'm';
571
- }
572
- }
573
- get isIconButton() {
574
- return Boolean(this.icon) && this._iconOnly;
575
- }
576
- get hasPrefixIcon() {
577
- return Boolean(this.icon) && !this._iconOnly && !this.iconSuffix;
578
- }
579
- get hasSuffixIcon() {
580
- return Boolean(this.icon) && !this._iconOnly && this.iconSuffix;
581
- }
582
- get content() {
583
- return [
584
- this.hasPrefixIcon ? (catIconRegistry.h("cat-icon", { icon: this.icon, size: this.iconSize, class: "cat-button-prefix", part: "prefix" })) : null,
585
- this.isIconButton ? (catIconRegistry.h("cat-icon", { icon: this.icon, size: this.iconSize })) : (catIconRegistry.h("span", { class: "cat-button-content", part: "content" }, catIconRegistry.h("slot", null))),
586
- this.hasSuffixIcon ? (catIconRegistry.h("cat-icon", { icon: this.icon, size: this.iconSize, class: "cat-button-suffix", part: "suffix" })) : null,
587
- this.loading ? catIconRegistry.h("cat-spinner", { size: this.spinnerSize }) : null
588
- ];
589
- }
590
- onFocus(event) {
591
- this.catFocus.emit(event);
592
- }
593
- onBlur(event) {
594
- this.catBlur.emit(event);
595
- }
596
- static get watchers() { return {
597
- "iconOnly": ["onIconOnlyChanged"]
598
- }; }
599
- };
600
- CatButton.style = catButtonCss;
601
-
602
- const catIconCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host[hidden]{display:none}span{display:inline-flex}svg{fill:currentColor;stroke:none;transform-origin:center center;width:1em;height:1em}.cat-icon-xs svg{font-size:0.75rem}.cat-icon-s svg{font-size:1rem}.cat-icon-m svg{font-size:1.25rem}.cat-icon-l svg{font-size:1.5rem}.cat-icon-xl svg{font-size:1.75rem}";
603
-
604
- let CatIcon = class {
605
- constructor(hostRef) {
606
- catIconRegistry.registerInstance(this, hostRef);
607
- this.iconRegistry = catIconRegistry.CatIconRegistry.getInstance();
608
- /**
609
- * The name of the icon.
610
- */
611
- this.icon = '';
612
- /**
613
- * The size of the icon.
614
- */
615
- this.size = 'm';
616
- }
617
- render() {
618
- return (catIconRegistry.h("span", { innerHTML: this.iconRegistry.getIcon(this.icon), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
619
- [`cat-icon-${this.size}`]: this.size !== 'inline'
620
- } }));
621
- }
622
- };
623
- CatIcon.style = catIconCss;
624
-
625
- const catSpinnerCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host[hidden]{display:none}span{display:inline-flex}svg{fill:none;stroke:currentColor;stroke-dasharray:135px;stroke-dashoffset:95px;stroke-linecap:round;stroke-width:5px;transform-origin:center center;animation:cat-spinner 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;width:1em;height:1em}.cat-spinner-xs svg{font-size:0.75rem}.cat-spinner-s svg{font-size:1rem}.cat-spinner-m svg{font-size:1.25rem}.cat-spinner-l svg{font-size:1.5rem}.cat-spinner-xl svg{font-size:1.75rem}@keyframes cat-spinner{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";
626
-
627
- let CatSpinner = class {
628
- constructor(hostRef) {
629
- catIconRegistry.registerInstance(this, hostRef);
630
- /**
631
- * The size of the spinner.
632
- */
633
- this.size = 'm';
634
- }
635
- render() {
636
- return (catIconRegistry.h("span", { "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
637
- [`cat-spinner-${this.size}`]: this.size !== 'inline'
638
- } }, catIconRegistry.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, catIconRegistry.h("circle", { cx: "24", cy: "24", r: "21.5" }))));
639
- }
640
- };
641
- CatSpinner.style = catSpinnerCss;
642
-
643
- exports.cat_button = CatButton;
644
- exports.cat_icon = CatIcon;
645
- exports.cat_spinner = CatSpinner;
@@ -1,45 +0,0 @@
1
- 'use strict';
2
-
3
- class CatIconRegistry {
4
- constructor() {
5
- this.icons = new Map();
6
- // hide constructor
7
- }
8
- static getInstance() {
9
- if (!CatIconRegistry.instance) {
10
- CatIconRegistry.instance = new CatIconRegistry();
11
- }
12
- return CatIconRegistry.instance;
13
- }
14
- getIcon(name, setName) {
15
- return this.icons.get(this.buildName(name, setName));
16
- }
17
- addIcon(name, data, setName) {
18
- this.icons.set(this.buildName(name, setName), data);
19
- window.dispatchEvent(this.buildEvent('cat-icon-added', { name, setName }));
20
- }
21
- addIcons(icons, setName) {
22
- Object.entries(icons).forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));
23
- window.dispatchEvent(this.buildEvent('cat-icons-added', { names: Object.keys(icons), setName }));
24
- }
25
- removeIcon(name, setName) {
26
- this.icons.delete(this.buildName(name, setName));
27
- window.dispatchEvent(this.buildEvent('cat-icon-removed', { name, setName }));
28
- }
29
- removeIcons(names, setName) {
30
- names.forEach(name => this.icons.delete(this.buildName(name, setName)));
31
- window.dispatchEvent(this.buildEvent('cat-icons-removed', { names, setName }));
32
- }
33
- buildName(name, setName) {
34
- return setName ? `${setName}:name` : name;
35
- }
36
- buildEvent(name, detail) {
37
- return new CustomEvent(name, {
38
- bubbles: true,
39
- composed: true,
40
- detail
41
- });
42
- }
43
- }
44
-
45
- exports.CatIconRegistry = CatIconRegistry;