@lmvz-ds/components 0.30.0 → 0.31.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.
- package/CHANGELOG.md +8 -0
- package/cjs/{ds.constants-D3srqM9m.js → ds.constants-CKeXfK-s.js} +10 -0
- package/cjs/{component-C7cavwmZ.js → element.util-Cq4y-_iX.js} +42 -31
- package/cjs/index.cjs.js +7 -1
- package/cjs/{list-keyboard-controller-CzZdPBeH.js → list-keyboard-controller-StN6Yn8W.js} +13 -8
- package/cjs/lmvz-action-list.cjs.entry.js +79 -0
- package/cjs/lmvz-button-group.cjs.entry.js +43 -47
- package/cjs/lmvz-button_2.cjs.entry.js +10 -8
- package/cjs/lmvz-card.cjs.entry.js +2 -2
- package/cjs/lmvz-checkbox.cjs.entry.js +1 -1
- package/cjs/lmvz-chip.cjs.entry.js +2 -2
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +3 -3
- package/cjs/lmvz-input.cjs.entry.js +5 -5
- package/cjs/lmvz-link.cjs.entry.js +2 -2
- package/cjs/lmvz-menuitem.cjs.entry.js +1 -1
- package/cjs/lmvz-message.cjs.entry.js +1 -1
- package/cjs/lmvz-modal.cjs.entry.js +5 -5
- package/cjs/lmvz-radio.cjs.entry.js +1 -1
- package/cjs/lmvz-select.cjs.entry.js +1 -1
- package/cjs/lmvz-snackbar.cjs.entry.js +1 -1
- package/cjs/lmvz-spinner.cjs.entry.js +1 -1
- package/cjs/lmvz-tab.cjs.entry.js +2 -2
- package/cjs/lmvz-tabs.cjs.entry.js +4 -4
- package/cjs/lmvz-toggle.cjs.entry.js +3 -3
- package/cjs/loader.cjs.js +1 -1
- package/cjs/stencil.util-DzvzXSwk.js +25 -0
- package/collection/collection-manifest.json +1 -0
- package/collection/components/lmvz-action-list/lmvz-action-list.css +93 -0
- package/collection/components/lmvz-action-list/lmvz-action-list.js +104 -0
- package/collection/components/lmvz-button/lmvz-button.css +65 -45
- package/collection/components/lmvz-button/lmvz-button.js +28 -7
- package/collection/components/lmvz-button-group/lmvz-button-group.css +33 -2
- package/collection/components/lmvz-button-group/lmvz-button-group.js +54 -38
- package/collection/components/lmvz-card/lmvz-card.css +58 -45
- package/collection/components/lmvz-card/lmvz-card.js +2 -2
- package/collection/components/lmvz-checkbox/lmvz-checkbox.js +2 -2
- package/collection/components/lmvz-chip/lmvz-chip.js +7 -7
- package/collection/components/lmvz-header/lmvz-header.js +2 -2
- package/collection/components/lmvz-icon/lmvz-icon.js +2 -2
- package/collection/components/lmvz-input/lmvz-input.js +5 -5
- package/collection/components/lmvz-link/lmvz-link.js +3 -3
- package/collection/components/lmvz-menuitem/lmvz-menuitem.js +2 -2
- package/collection/components/lmvz-message/lmvz-message.js +1 -1
- package/collection/components/lmvz-modal/lmvz-modal.css +7 -0
- package/collection/components/lmvz-modal/lmvz-modal.js +3 -3
- package/collection/components/lmvz-radio/lmvz-radio.js +2 -2
- package/collection/components/lmvz-select/lmvz-select.js +2 -2
- package/collection/components/lmvz-snackbar/lmvz-snackbar.js +1 -1
- package/collection/components/lmvz-spinner/lmvz-spinner.js +1 -1
- package/collection/components/lmvz-tab/lmvz-tab.css +7 -0
- package/collection/components/lmvz-tab/lmvz-tab.js +1 -1
- package/collection/components/lmvz-tabs/lmvz-tabs.css +7 -0
- package/collection/components/lmvz-tabs/lmvz-tabs.js +2 -2
- package/collection/components/lmvz-toggle/lmvz-toggle.js +3 -3
- package/collection/index.js +1 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/collection/utils/aria/aria.constants.js +53 -0
- package/collection/utils/aria/list-keyboard-controller.js +12 -7
- package/collection/utils/async/async.util.js +62 -0
- package/collection/utils/data/event.utilt.js +19 -0
- package/collection/utils/data/number.util.js +6 -0
- package/collection/utils/data/object.util.js +20 -0
- package/collection/utils/data/time.util.js +3 -0
- package/collection/utils/element/element.util.js +117 -0
- package/collection/utils/{assets.js → stencil/assets.js} +1 -1
- package/collection/utils/stencil/stencil.util.js +12 -0
- package/components/index.d.ts +2 -0
- package/components/index.d.ts.bak +2 -0
- package/components/index.js +1 -1
- package/components/lmvz-action-list.d.ts +11 -0
- package/components/lmvz-action-list.d.ts.bak +11 -0
- package/components/lmvz-action-list.js +1 -0
- package/components/lmvz-button-group.js +1 -1
- package/components/lmvz-button.js +1 -1
- package/components/lmvz-card.js +1 -1
- package/components/lmvz-checkbox.js +1 -1
- package/components/lmvz-chip.js +1 -1
- package/components/lmvz-header.js +1 -1
- package/components/lmvz-icon.js +1 -1
- package/components/lmvz-input.js +1 -1
- package/components/lmvz-link.js +1 -1
- package/components/lmvz-menuitem.js +1 -1
- package/components/lmvz-message.js +1 -1
- package/components/lmvz-modal.js +1 -1
- package/components/lmvz-radio.js +1 -1
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-snackbar.js +1 -1
- package/components/lmvz-spinner.js +1 -1
- package/components/lmvz-tab.js +1 -1
- package/components/lmvz-tabs.js +1 -1
- package/components/lmvz-toggle.js +1 -1
- package/components/p-B0H9qIwE.js +1 -0
- package/components/p-B4m1n4et.js +1 -0
- package/components/p-CJRqhXjK.js +1 -0
- package/components/p-CxfT9IA1.js +1 -0
- package/components/{p-CXakymyP.js → p-DJ90327O.js} +1 -1
- package/components/p-DeO5Vbxh.js +1 -0
- package/components/p-DuEtnKRj.js +1 -0
- package/esm/{ds.constants-BLS5MjIu.js → ds.constants-DuEtnKRj.js} +5 -1
- package/esm/{component-DOTK1OW3.js → element.util-CxfT9IA1.js} +37 -31
- package/esm/index.js +1 -1
- package/esm/{list-keyboard-controller-Coi8XfUH.js → list-keyboard-controller-BKa9Kd2t.js} +12 -7
- package/esm/lmvz-action-list.entry.js +77 -0
- package/esm/lmvz-button-group.entry.js +35 -39
- package/esm/lmvz-button_2.entry.js +9 -7
- package/esm/lmvz-card.entry.js +2 -2
- package/esm/lmvz-checkbox.entry.js +1 -1
- package/esm/lmvz-chip.entry.js +2 -2
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-header_2.entry.js +3 -3
- package/esm/lmvz-input.entry.js +4 -4
- package/esm/lmvz-link.entry.js +2 -2
- package/esm/lmvz-menuitem.entry.js +1 -1
- package/esm/lmvz-message.entry.js +1 -1
- package/esm/lmvz-modal.entry.js +3 -3
- package/esm/lmvz-radio.entry.js +1 -1
- package/esm/lmvz-select.entry.js +1 -1
- package/esm/lmvz-snackbar.entry.js +1 -1
- package/esm/lmvz-spinner.entry.js +1 -1
- package/esm/lmvz-tab.entry.js +2 -2
- package/esm/lmvz-tabs.entry.js +4 -4
- package/esm/lmvz-toggle.entry.js +2 -2
- package/esm/loader.js +1 -1
- package/esm/stencil.util-CJRqhXjK.js +23 -0
- package/hydrate/index.js +501 -388
- package/hydrate/index.mjs +501 -388
- package/lmvz-components/index.esm.js +1 -1
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/{p-f3c44dd4.entry.js → p-1ce90ea7.entry.js} +1 -1
- package/lmvz-components/{p-b08db5ad.entry.js → p-24125bcf.entry.js} +1 -1
- package/lmvz-components/p-25a78ead.entry.js +1 -0
- package/lmvz-components/p-4072b2fb.entry.js +1 -0
- package/lmvz-components/p-48109e1d.entry.js +1 -0
- package/lmvz-components/{p-3b3e532f.entry.js → p-582f44ff.entry.js} +1 -1
- package/lmvz-components/p-592d509b.entry.js +1 -0
- package/lmvz-components/{p-d7e99f03.entry.js → p-6f61c24d.entry.js} +1 -1
- package/lmvz-components/{p-58498d43.entry.js → p-703b10b5.entry.js} +1 -1
- package/lmvz-components/p-74c7521c.entry.js +1 -0
- package/lmvz-components/{p-b5254532.entry.js → p-80a26307.entry.js} +1 -1
- package/lmvz-components/{p-c60ab9c9.entry.js → p-8e1f66dd.entry.js} +1 -1
- package/lmvz-components/p-947e1fe6.entry.js +1 -0
- package/lmvz-components/p-B4m1n4et.js +1 -0
- package/lmvz-components/p-CJRqhXjK.js +1 -0
- package/lmvz-components/p-CxfT9IA1.js +1 -0
- package/lmvz-components/p-DuEtnKRj.js +1 -0
- package/lmvz-components/{p-230962c8.entry.js → p-b79af711.entry.js} +1 -1
- package/lmvz-components/p-c00f0d96.entry.js +1 -0
- package/lmvz-components/{p-5c951888.entry.js → p-c0d05a97.entry.js} +1 -1
- package/lmvz-components/{p-c0b1d0af.entry.js → p-c3e8092e.entry.js} +1 -1
- package/lmvz-components/{p-2ca85b7c.entry.js → p-ed3c2b13.entry.js} +1 -1
- package/lmvz-components/{p-35da6bfb.entry.js → p-fa2cd315.entry.js} +1 -1
- package/manifest.json +130 -18
- package/package.json +5 -1
- package/types/api/ds.constants.d.ts +0 -40
- package/types/api/ds.types.d.ts +68 -1
- package/types/components/lmvz-action-list/lmvz-action-list.d.ts +15 -0
- package/types/components/lmvz-button/lmvz-button.d.ts +6 -3
- package/types/components/lmvz-button-group/lmvz-button-group.d.ts +2 -0
- package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +1 -1
- package/types/components/lmvz-chip/lmvz-chip.d.ts +2 -2
- package/types/components/lmvz-header/lmvz-header.d.ts +1 -1
- package/types/components/lmvz-icon/lmvz-icon.d.ts +1 -1
- package/types/components/lmvz-input/lmvz-input.d.ts +1 -1
- package/types/components/lmvz-link/lmvz-link.d.ts +1 -1
- package/types/components/lmvz-menuitem/lmvz-menuitem.d.ts +1 -1
- package/types/components/lmvz-modal/lmvz-modal.d.ts +1 -1
- package/types/components/lmvz-radio/lmvz-radio.d.ts +1 -1
- package/types/components/lmvz-select/lmvz-select.d.ts +1 -1
- package/types/components/lmvz-tabs/lmvz-tabs.d.ts +1 -1
- package/types/components/lmvz-toggle/lmvz-toggle.d.ts +1 -1
- package/types/components.d.ts +83 -2
- package/types/index.d.ts +1 -1
- package/types/utils/aria/aria-validation-controller.d.ts +3 -3
- package/types/utils/aria/aria.constants.d.ts +1 -0
- package/types/utils/aria/element-activation-controller.d.ts +1 -1
- package/types/utils/aria/list-keyboard-controller.d.ts +4 -1
- package/types/utils/async/async.util.d.ts +8 -0
- package/types/utils/data/event.utilt.d.ts +4 -0
- package/types/utils/data/number.util.d.ts +2 -0
- package/types/utils/data/object.util.d.ts +5 -0
- package/types/utils/data/time.util.d.ts +1 -0
- package/types/utils/element/element.util.d.ts +21 -0
- package/types/utils/radio/radio-group-controller.d.ts +1 -1
- package/types/utils/{reactive-controller-host.d.ts → stencil/reactive-controller-host.d.ts} +1 -1
- package/types/utils/stencil/stencil.util.d.ts +6 -0
- package/collection/utils/component.js +0 -270
- package/collection/utils/http.js +0 -21
- package/collection/utils/http.unit.js +0 -47
- package/components/p-BLS5MjIu.js +0 -1
- package/components/p-C0f2nNPZ.js +0 -1
- package/components/p-CtaMrBNE.js +0 -1
- package/components/p-DGlgVBPj.js +0 -1
- package/components/p-DOTK1OW3.js +0 -1
- package/lmvz-components/p-0d435e7b.entry.js +0 -1
- package/lmvz-components/p-44fea470.entry.js +0 -1
- package/lmvz-components/p-4dc44520.entry.js +0 -1
- package/lmvz-components/p-BLS5MjIu.js +0 -1
- package/lmvz-components/p-CtaMrBNE.js +0 -1
- package/lmvz-components/p-DOTK1OW3.js +0 -1
- package/lmvz-components/p-a4077c9f.entry.js +0 -1
- package/lmvz-components/p-dce6e41d.entry.js +0 -1
- package/lmvz-components/p-e3ce44a3.entry.js +0 -1
- package/types/utils/component.d.ts +0 -33
- package/types/utils/http.d.ts +0 -26
- package/types/utils/http.unit.d.ts +0 -1
- /package/collection/utils/{reactive-controller-host.js → stencil/reactive-controller-host.js} +0 -0
- /package/types/utils/{assets.d.ts → stencil/assets.d.ts} +0 -0
package/hydrate/index.js
CHANGED
|
@@ -5431,97 +5431,6 @@ class LmvzAction {
|
|
|
5431
5431
|
}; }
|
|
5432
5432
|
}
|
|
5433
5433
|
|
|
5434
|
-
function getDefaultExportFromCjs (x) {
|
|
5435
|
-
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
5436
|
-
}
|
|
5437
|
-
|
|
5438
|
-
var classnames = {exports: {}};
|
|
5439
|
-
|
|
5440
|
-
/*!
|
|
5441
|
-
Copyright (c) 2018 Jed Watson.
|
|
5442
|
-
Licensed under the MIT License (MIT), see
|
|
5443
|
-
http://jedwatson.github.io/classnames
|
|
5444
|
-
*/
|
|
5445
|
-
|
|
5446
|
-
var hasRequiredClassnames;
|
|
5447
|
-
|
|
5448
|
-
function requireClassnames () {
|
|
5449
|
-
if (hasRequiredClassnames) return classnames.exports;
|
|
5450
|
-
hasRequiredClassnames = 1;
|
|
5451
|
-
(function (module) {
|
|
5452
|
-
/* global define */
|
|
5453
|
-
|
|
5454
|
-
(function () {
|
|
5455
|
-
|
|
5456
|
-
var hasOwn = {}.hasOwnProperty;
|
|
5457
|
-
|
|
5458
|
-
function classNames () {
|
|
5459
|
-
var classes = '';
|
|
5460
|
-
|
|
5461
|
-
for (var i = 0; i < arguments.length; i++) {
|
|
5462
|
-
var arg = arguments[i];
|
|
5463
|
-
if (arg) {
|
|
5464
|
-
classes = appendClass(classes, parseValue(arg));
|
|
5465
|
-
}
|
|
5466
|
-
}
|
|
5467
|
-
|
|
5468
|
-
return classes;
|
|
5469
|
-
}
|
|
5470
|
-
|
|
5471
|
-
function parseValue (arg) {
|
|
5472
|
-
if (typeof arg === 'string' || typeof arg === 'number') {
|
|
5473
|
-
return arg;
|
|
5474
|
-
}
|
|
5475
|
-
|
|
5476
|
-
if (typeof arg !== 'object') {
|
|
5477
|
-
return '';
|
|
5478
|
-
}
|
|
5479
|
-
|
|
5480
|
-
if (Array.isArray(arg)) {
|
|
5481
|
-
return classNames.apply(null, arg);
|
|
5482
|
-
}
|
|
5483
|
-
|
|
5484
|
-
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
|
|
5485
|
-
return arg.toString();
|
|
5486
|
-
}
|
|
5487
|
-
|
|
5488
|
-
var classes = '';
|
|
5489
|
-
|
|
5490
|
-
for (var key in arg) {
|
|
5491
|
-
if (hasOwn.call(arg, key) && arg[key]) {
|
|
5492
|
-
classes = appendClass(classes, key);
|
|
5493
|
-
}
|
|
5494
|
-
}
|
|
5495
|
-
|
|
5496
|
-
return classes;
|
|
5497
|
-
}
|
|
5498
|
-
|
|
5499
|
-
function appendClass (value, newClass) {
|
|
5500
|
-
if (!newClass) {
|
|
5501
|
-
return value;
|
|
5502
|
-
}
|
|
5503
|
-
|
|
5504
|
-
if (value) {
|
|
5505
|
-
return value + ' ' + newClass;
|
|
5506
|
-
}
|
|
5507
|
-
|
|
5508
|
-
return value + newClass;
|
|
5509
|
-
}
|
|
5510
|
-
|
|
5511
|
-
if (module.exports) {
|
|
5512
|
-
classNames.default = classNames;
|
|
5513
|
-
module.exports = classNames;
|
|
5514
|
-
} else {
|
|
5515
|
-
window.classNames = classNames;
|
|
5516
|
-
}
|
|
5517
|
-
}());
|
|
5518
|
-
} (classnames));
|
|
5519
|
-
return classnames.exports;
|
|
5520
|
-
}
|
|
5521
|
-
|
|
5522
|
-
var classnamesExports = requireClassnames();
|
|
5523
|
-
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
5524
|
-
|
|
5525
5434
|
/**
|
|
5526
5435
|
* Verify whether a value is a Promise by duck-testing for a 'then' function
|
|
5527
5436
|
*/
|
|
@@ -5706,55 +5615,6 @@ class AriaValidationController {
|
|
|
5706
5615
|
}
|
|
5707
5616
|
}
|
|
5708
5617
|
|
|
5709
|
-
class ElementActivationController {
|
|
5710
|
-
host;
|
|
5711
|
-
config;
|
|
5712
|
-
constructor(host, config) {
|
|
5713
|
-
this.host = host;
|
|
5714
|
-
this.config = config;
|
|
5715
|
-
}
|
|
5716
|
-
hostDidLoad() {
|
|
5717
|
-
if (!this.host.el.hasAttribute('tabindex')) {
|
|
5718
|
-
console.warn('Interactive element does not have a tabindex attribute!', this.host.el);
|
|
5719
|
-
}
|
|
5720
|
-
this.host.el.addEventListener('keydown', this.handleKeyDown.bind(this));
|
|
5721
|
-
this.host.el.addEventListener('click', this.handleActivation.bind(this));
|
|
5722
|
-
}
|
|
5723
|
-
handleKeyDown = (event) => {
|
|
5724
|
-
if ((this.config?.keys ?? ['Enter', ' ']).includes(event.key)) {
|
|
5725
|
-
event.preventDefault();
|
|
5726
|
-
this.handleActivation(event);
|
|
5727
|
-
}
|
|
5728
|
-
};
|
|
5729
|
-
handleActivation = (event) => {
|
|
5730
|
-
this.host.lmvzActivation.emit();
|
|
5731
|
-
if (this.config?.localHandler) {
|
|
5732
|
-
this.config.localHandler(event);
|
|
5733
|
-
}
|
|
5734
|
-
};
|
|
5735
|
-
}
|
|
5736
|
-
|
|
5737
|
-
const componentOnReady = (el, callback) => {
|
|
5738
|
-
if (el.componentOnReady) {
|
|
5739
|
-
el.componentOnReady().then((resolvedEl) => callback(resolvedEl));
|
|
5740
|
-
}
|
|
5741
|
-
else {
|
|
5742
|
-
raf(() => callback(el));
|
|
5743
|
-
}
|
|
5744
|
-
};
|
|
5745
|
-
const inheritAttributes = (el, attributes = []) => {
|
|
5746
|
-
const attributeObject = {};
|
|
5747
|
-
attributes.forEach((attr) => {
|
|
5748
|
-
if (el.hasAttribute(attr)) {
|
|
5749
|
-
const value = el.getAttribute(attr);
|
|
5750
|
-
if (value !== null) {
|
|
5751
|
-
attributeObject[attr] = el.getAttribute(attr);
|
|
5752
|
-
}
|
|
5753
|
-
el.removeAttribute(attr);
|
|
5754
|
-
}
|
|
5755
|
-
});
|
|
5756
|
-
return attributeObject;
|
|
5757
|
-
};
|
|
5758
5618
|
const ariaAttributes = [
|
|
5759
5619
|
'role',
|
|
5760
5620
|
'aria-activedescendant',
|
|
@@ -5808,6 +5668,42 @@ const ariaAttributes = [
|
|
|
5808
5668
|
'aria-valuenow',
|
|
5809
5669
|
'aria-valuetext',
|
|
5810
5670
|
];
|
|
5671
|
+
|
|
5672
|
+
function isActionButton(element) {
|
|
5673
|
+
return ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
|
|
5674
|
+
}
|
|
5675
|
+
function isLmvzButton(element) {
|
|
5676
|
+
return element?.tagName.toUpperCase() === 'LMVZ-BUTTON';
|
|
5677
|
+
}
|
|
5678
|
+
function isDisabledButton(element) {
|
|
5679
|
+
return element.hasAttribute('disabled') || element.disabled === true;
|
|
5680
|
+
}
|
|
5681
|
+
function isVisible(element) {
|
|
5682
|
+
return !element.hasAttribute('hidden');
|
|
5683
|
+
}
|
|
5684
|
+
function getActionVariant(element) {
|
|
5685
|
+
const variant = element.getAttribute('variant') ?? element.variant;
|
|
5686
|
+
return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
|
|
5687
|
+
}
|
|
5688
|
+
function isPrimaryAction(element) {
|
|
5689
|
+
return getActionVariant(element) === 'primary';
|
|
5690
|
+
}
|
|
5691
|
+
function isSecondaryAction(element) {
|
|
5692
|
+
return getActionVariant(element) === 'secondary';
|
|
5693
|
+
}
|
|
5694
|
+
const inheritAttributes = (el, attributes = []) => {
|
|
5695
|
+
const attributeObject = {};
|
|
5696
|
+
attributes.forEach((attr) => {
|
|
5697
|
+
if (el.hasAttribute(attr)) {
|
|
5698
|
+
const value = el.getAttribute(attr);
|
|
5699
|
+
if (value !== null) {
|
|
5700
|
+
attributeObject[attr] = el.getAttribute(attr);
|
|
5701
|
+
}
|
|
5702
|
+
el.removeAttribute(attr);
|
|
5703
|
+
}
|
|
5704
|
+
});
|
|
5705
|
+
return attributeObject;
|
|
5706
|
+
};
|
|
5811
5707
|
const inheritAriaAttributes = (el, ignoreList) => {
|
|
5812
5708
|
let attributesToInherit = ariaAttributes;
|
|
5813
5709
|
if (ignoreList && ignoreList.length > 0) {
|
|
@@ -5815,15 +5711,6 @@ const inheritAriaAttributes = (el, ignoreList) => {
|
|
|
5815
5711
|
}
|
|
5816
5712
|
return inheritAttributes(el, attributesToInherit);
|
|
5817
5713
|
};
|
|
5818
|
-
const raf = (h) => {
|
|
5819
|
-
if (typeof __zone_symbol__requestAnimationFrame === 'function') {
|
|
5820
|
-
return __zone_symbol__requestAnimationFrame(h);
|
|
5821
|
-
}
|
|
5822
|
-
if (typeof requestAnimationFrame === 'function') {
|
|
5823
|
-
return requestAnimationFrame(h);
|
|
5824
|
-
}
|
|
5825
|
-
return setTimeout(h);
|
|
5826
|
-
};
|
|
5827
5714
|
function getDeepActiveElement(root = document) {
|
|
5828
5715
|
let activeElement = root.activeElement;
|
|
5829
5716
|
if (!activeElement) {
|
|
@@ -5870,6 +5757,179 @@ function findFormByRef(form, el) {
|
|
|
5870
5757
|
return el.closest('form');
|
|
5871
5758
|
}
|
|
5872
5759
|
|
|
5760
|
+
const defaultConfig = {
|
|
5761
|
+
orientation: 'both',
|
|
5762
|
+
enableHomeAndEnd: false,
|
|
5763
|
+
manageTabIndex: false,
|
|
5764
|
+
};
|
|
5765
|
+
class DirectionalFocusController {
|
|
5766
|
+
host;
|
|
5767
|
+
elements = [];
|
|
5768
|
+
currentElement;
|
|
5769
|
+
config;
|
|
5770
|
+
constructor(host, config = {}) {
|
|
5771
|
+
this.host = host;
|
|
5772
|
+
this.config = {
|
|
5773
|
+
...defaultConfig,
|
|
5774
|
+
...config,
|
|
5775
|
+
};
|
|
5776
|
+
}
|
|
5777
|
+
hostConnected() {
|
|
5778
|
+
this.host.el.addEventListener('keydown', this.handleKeydown);
|
|
5779
|
+
this.syncManagedFocusTarget();
|
|
5780
|
+
}
|
|
5781
|
+
hostDisconnected() {
|
|
5782
|
+
this.host.el.removeEventListener('keydown', this.handleKeydown);
|
|
5783
|
+
}
|
|
5784
|
+
updateElements(elements) {
|
|
5785
|
+
const previousElement = this.currentElement ?? this.getManagedActiveElement() ?? undefined;
|
|
5786
|
+
this.elements = elements.filter((element) => 'focus' in element && element.nodeType === 1);
|
|
5787
|
+
this.syncManagedFocusTarget(previousElement);
|
|
5788
|
+
}
|
|
5789
|
+
setCurrentElement(element) {
|
|
5790
|
+
const previousElement = this.currentElement;
|
|
5791
|
+
this.currentElement = element !== null && element !== undefined && 'focus' in element && element.nodeType === 1 ? element : undefined;
|
|
5792
|
+
this.syncManagedFocusTarget(previousElement);
|
|
5793
|
+
}
|
|
5794
|
+
handleKeydown = (event) => {
|
|
5795
|
+
const intent = this.getFocusIntent(event.key);
|
|
5796
|
+
if (!intent)
|
|
5797
|
+
return;
|
|
5798
|
+
const activeElement = this.getManagedActiveElement();
|
|
5799
|
+
const nextElement = this.getTargetElement(activeElement, intent);
|
|
5800
|
+
if (!nextElement)
|
|
5801
|
+
return;
|
|
5802
|
+
event.preventDefault();
|
|
5803
|
+
this.applyFocusTarget(nextElement, true);
|
|
5804
|
+
};
|
|
5805
|
+
getFocusIntent(key) {
|
|
5806
|
+
if (this.config.enableHomeAndEnd && key === 'Home')
|
|
5807
|
+
return 'first';
|
|
5808
|
+
if (this.config.enableHomeAndEnd && key === 'End')
|
|
5809
|
+
return 'last';
|
|
5810
|
+
if (this.config.orientation === 'horizontal') {
|
|
5811
|
+
if (key === 'ArrowRight')
|
|
5812
|
+
return 'next';
|
|
5813
|
+
if (key === 'ArrowLeft')
|
|
5814
|
+
return 'previous';
|
|
5815
|
+
return undefined;
|
|
5816
|
+
}
|
|
5817
|
+
if (this.config.orientation === 'vertical') {
|
|
5818
|
+
if (key === 'ArrowDown')
|
|
5819
|
+
return 'next';
|
|
5820
|
+
if (key === 'ArrowUp')
|
|
5821
|
+
return 'previous';
|
|
5822
|
+
return undefined;
|
|
5823
|
+
}
|
|
5824
|
+
if (key === 'ArrowDown' || key === 'ArrowRight')
|
|
5825
|
+
return 'next';
|
|
5826
|
+
if (key === 'ArrowUp' || key === 'ArrowLeft')
|
|
5827
|
+
return 'previous';
|
|
5828
|
+
return undefined;
|
|
5829
|
+
}
|
|
5830
|
+
getManagedActiveElement() {
|
|
5831
|
+
const activeElement = getDeepActiveElement(this.host.el.ownerDocument ?? document);
|
|
5832
|
+
if (activeElement instanceof HTMLElement) {
|
|
5833
|
+
const match = this.elements.find((el) => resolveElement(el) === activeElement);
|
|
5834
|
+
if (match && this.canMoveFocusTo(match))
|
|
5835
|
+
return match;
|
|
5836
|
+
}
|
|
5837
|
+
if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
|
|
5838
|
+
return this.currentElement;
|
|
5839
|
+
}
|
|
5840
|
+
return undefined;
|
|
5841
|
+
}
|
|
5842
|
+
getTargetElement(current, intent) {
|
|
5843
|
+
if (!this.elements.length)
|
|
5844
|
+
return undefined;
|
|
5845
|
+
if (intent === 'first')
|
|
5846
|
+
return this.findFocusableFromIndex(-1, 'next');
|
|
5847
|
+
if (intent === 'last')
|
|
5848
|
+
return this.findFocusableFromIndex(this.elements.length, 'previous');
|
|
5849
|
+
const currentIndex = current ? this.elements.indexOf(current) : -1;
|
|
5850
|
+
if (currentIndex === -1) {
|
|
5851
|
+
return intent === 'next' ? this.findFocusableFromIndex(-1, 'next') : this.findFocusableFromIndex(this.elements.length, 'previous');
|
|
5852
|
+
}
|
|
5853
|
+
return this.findFocusableFromIndex(currentIndex, intent);
|
|
5854
|
+
}
|
|
5855
|
+
findFocusableFromIndex(startIndex, intent) {
|
|
5856
|
+
if (!this.elements.length)
|
|
5857
|
+
return undefined;
|
|
5858
|
+
const step = intent === 'next' ? 1 : -1;
|
|
5859
|
+
for (let offset = 1; offset <= this.elements.length; offset++) {
|
|
5860
|
+
const index = (startIndex + step * offset + this.elements.length) % this.elements.length;
|
|
5861
|
+
const candidate = this.elements[index];
|
|
5862
|
+
if (this.canMoveFocusTo(candidate))
|
|
5863
|
+
return candidate;
|
|
5864
|
+
}
|
|
5865
|
+
return undefined;
|
|
5866
|
+
}
|
|
5867
|
+
syncManagedFocusTarget(previousElement) {
|
|
5868
|
+
const nextElement = this.selectManagedElement(previousElement);
|
|
5869
|
+
const didChange = nextElement !== this.currentElement;
|
|
5870
|
+
this.currentElement = nextElement;
|
|
5871
|
+
if (this.config.manageTabIndex) {
|
|
5872
|
+
this.updateTabIndexes(nextElement);
|
|
5873
|
+
}
|
|
5874
|
+
if (didChange && nextElement) {
|
|
5875
|
+
this.config.onFocusTargetChange?.(nextElement);
|
|
5876
|
+
}
|
|
5877
|
+
}
|
|
5878
|
+
selectManagedElement(previousElement) {
|
|
5879
|
+
const activeElement = this.getManagedActiveElement();
|
|
5880
|
+
if (activeElement)
|
|
5881
|
+
return activeElement;
|
|
5882
|
+
if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
|
|
5883
|
+
return this.currentElement;
|
|
5884
|
+
}
|
|
5885
|
+
if (previousElement && this.elements.includes(previousElement)) {
|
|
5886
|
+
return this.findFocusableFromIndex(this.elements.indexOf(previousElement), 'next') ?? this.findFocusableFromIndex(-1, 'next');
|
|
5887
|
+
}
|
|
5888
|
+
const currentRovingTarget = this.elements.find((element) => element.tabIndex === 0 && this.canMoveFocusTo(element));
|
|
5889
|
+
if (currentRovingTarget)
|
|
5890
|
+
return currentRovingTarget;
|
|
5891
|
+
return this.findFocusableFromIndex(-1, 'next');
|
|
5892
|
+
}
|
|
5893
|
+
updateTabIndexes(activeElement) {
|
|
5894
|
+
this.elements.forEach((element) => {
|
|
5895
|
+
element.tabIndex = activeElement && element === activeElement ? 0 : -1;
|
|
5896
|
+
});
|
|
5897
|
+
}
|
|
5898
|
+
applyFocusTarget(element, shouldFocus) {
|
|
5899
|
+
const didChange = element !== this.currentElement;
|
|
5900
|
+
this.currentElement = element;
|
|
5901
|
+
if (this.config.manageTabIndex) {
|
|
5902
|
+
this.updateTabIndexes(element);
|
|
5903
|
+
}
|
|
5904
|
+
if (shouldFocus) {
|
|
5905
|
+
element.focus();
|
|
5906
|
+
}
|
|
5907
|
+
if (didChange) {
|
|
5908
|
+
this.config.onFocusTargetChange?.(element);
|
|
5909
|
+
}
|
|
5910
|
+
}
|
|
5911
|
+
canMoveFocusTo(element) {
|
|
5912
|
+
if (!element)
|
|
5913
|
+
return false;
|
|
5914
|
+
if (element.hasAttribute('disabled'))
|
|
5915
|
+
return false;
|
|
5916
|
+
if ('disabled' in element && Boolean(element.disabled))
|
|
5917
|
+
return false;
|
|
5918
|
+
if (element.getAttribute('aria-disabled') === 'true')
|
|
5919
|
+
return false;
|
|
5920
|
+
if (this.config.isFocusableElement)
|
|
5921
|
+
return this.config.isFocusableElement(element);
|
|
5922
|
+
const isTabOrderable = this.config.manageTabIndex || element.tabIndex >= 0;
|
|
5923
|
+
return isTabOrderable && element.getAttribute('aria-hidden') !== 'true' && (element.checkVisibility?.() ?? true) && element.offsetParent !== null;
|
|
5924
|
+
}
|
|
5925
|
+
}
|
|
5926
|
+
function isDirectionalFocusReceiver(el) {
|
|
5927
|
+
return typeof el.resolveFocusableElement === 'function';
|
|
5928
|
+
}
|
|
5929
|
+
function resolveElement(el) {
|
|
5930
|
+
return isDirectionalFocusReceiver(el) ? (el.resolveFocusableElement() ?? el) : el;
|
|
5931
|
+
}
|
|
5932
|
+
|
|
5873
5933
|
class ReactiveControllerHost {
|
|
5874
5934
|
controllers = new Set();
|
|
5875
5935
|
addController(controller) {
|
|
@@ -5905,12 +5965,210 @@ class ReactiveControllerHost {
|
|
|
5905
5965
|
componentWillUpdate() {
|
|
5906
5966
|
this.activeControllers.forEach((controller) => controller.hostWillUpdate?.());
|
|
5907
5967
|
}
|
|
5908
|
-
componentDidUpdate() {
|
|
5909
|
-
this.activeControllers.forEach((controller) => controller.hostDidUpdate?.());
|
|
5968
|
+
componentDidUpdate() {
|
|
5969
|
+
this.activeControllers.forEach((controller) => controller.hostDidUpdate?.());
|
|
5970
|
+
}
|
|
5971
|
+
}
|
|
5972
|
+
|
|
5973
|
+
const lmvzActionListCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } @layer lmvz-ds.components { .lmvz-wrapper-card-sm, .lmvz-wrapper-card-md, .lmvz-wrapper-card-lg { background: var(--lmvz-semantic-color-surface-primary, #ffffff); box-shadow: var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11)); } .lmvz-wrapper-card-sm { padding: var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); border-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px); } .lmvz-wrapper-card-md { padding: var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); border-radius: var(--lmvz-component-wrapper-md-border-radius, 18px); } .lmvz-wrapper-card-lg { padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem)); border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px); } } .sc-lmvz-action-list-h { display: flex; flex-direction: column; gap: 0; lmvz-button, button { --lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px); --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); width: 100%; display: block; &:hover { --lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } &:active { --lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } } .lmvz-action-list-item--danger { --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31); &:hover { --lmvz-button-background-override: var(--lmvz-semantic-color-status-danger, #fdf1f2); --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31); } &:active { --lmvz-button-background-override: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2); --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31); } } }`;
|
|
5974
|
+
|
|
5975
|
+
class LmvzActionList extends ReactiveControllerHost {
|
|
5976
|
+
get el() { return getElement(this); }
|
|
5977
|
+
slotEl;
|
|
5978
|
+
get validationEl() {
|
|
5979
|
+
return this.el;
|
|
5980
|
+
}
|
|
5981
|
+
get validationSlot() {
|
|
5982
|
+
return this.slotEl;
|
|
5983
|
+
}
|
|
5984
|
+
focusController = new DirectionalFocusController(this, {
|
|
5985
|
+
orientation: 'vertical',
|
|
5986
|
+
manageTabIndex: true,
|
|
5987
|
+
enableHomeAndEnd: true,
|
|
5988
|
+
});
|
|
5989
|
+
label;
|
|
5990
|
+
constructor(hostRef) {
|
|
5991
|
+
super();
|
|
5992
|
+
registerInstance(this, hostRef);
|
|
5993
|
+
this.addController(this.focusController);
|
|
5994
|
+
this.addController(new AriaValidationController(this, {
|
|
5995
|
+
validationTiming: 'slot',
|
|
5996
|
+
}));
|
|
5997
|
+
}
|
|
5998
|
+
componentDidLoad() {
|
|
5999
|
+
this.handleSlotChange();
|
|
6000
|
+
super.componentDidLoad();
|
|
6001
|
+
}
|
|
6002
|
+
handleSlotChange = () => {
|
|
6003
|
+
const slot = this.slotEl;
|
|
6004
|
+
if (!slot)
|
|
6005
|
+
return;
|
|
6006
|
+
const assigned = slot.assignedElements();
|
|
6007
|
+
const interactive = [];
|
|
6008
|
+
for (const el of assigned) {
|
|
6009
|
+
collectInteractiveButtonsRecursively(el, interactive);
|
|
6010
|
+
}
|
|
6011
|
+
this.focusController.updateElements(interactive);
|
|
6012
|
+
};
|
|
6013
|
+
render() {
|
|
6014
|
+
const ariaLabel = this.label || undefined;
|
|
6015
|
+
return (hAsync(Host, { key: '79e2d77c9aca02fb3ef2e58d241664598253334b', role: "menu", "aria-label": ariaLabel, class: "lmvz-wrapper-card-sm" }, hAsync("slot", { key: '941b875a5be536c3d0e2ff9287da5af1a416d356', onSlotchange: this.handleSlotChange, ref: (el) => (this.slotEl = el) })));
|
|
6016
|
+
}
|
|
6017
|
+
static get style() { return lmvzActionListCss(); }
|
|
6018
|
+
static get cmpMeta() { return {
|
|
6019
|
+
"$flags$": 774,
|
|
6020
|
+
"$tagName$": "lmvz-action-list",
|
|
6021
|
+
"$members$": {
|
|
6022
|
+
"label": [1]
|
|
6023
|
+
},
|
|
6024
|
+
"$listeners$": undefined,
|
|
6025
|
+
"$lazyBundleId$": "-",
|
|
6026
|
+
"$attrsToReflect$": []
|
|
6027
|
+
}; }
|
|
6028
|
+
}
|
|
6029
|
+
function collectInteractiveButtonsRecursively(el, collection) {
|
|
6030
|
+
const tag = el.tagName.toLowerCase();
|
|
6031
|
+
if (tag === 'lmvz-button') {
|
|
6032
|
+
el.buttonRole = 'menuitem';
|
|
6033
|
+
collection.push(el);
|
|
6034
|
+
return;
|
|
6035
|
+
}
|
|
6036
|
+
if (tag === 'button') {
|
|
6037
|
+
el.setAttribute('role', 'menuitem');
|
|
6038
|
+
collection.push(el);
|
|
6039
|
+
return;
|
|
6040
|
+
}
|
|
6041
|
+
if (tag === 'hr') {
|
|
6042
|
+
return;
|
|
6043
|
+
}
|
|
6044
|
+
if (el.getAttribute('role') === 'group') {
|
|
6045
|
+
const children = el.querySelectorAll('lmvz-button, button');
|
|
6046
|
+
children.forEach((child) => collectInteractiveButtonsRecursively(child, collection));
|
|
6047
|
+
return;
|
|
6048
|
+
}
|
|
6049
|
+
console.warn('Unexpected element encountered in ActionList:', tag);
|
|
6050
|
+
}
|
|
6051
|
+
|
|
6052
|
+
function getDefaultExportFromCjs (x) {
|
|
6053
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
6054
|
+
}
|
|
6055
|
+
|
|
6056
|
+
var classnames = {exports: {}};
|
|
6057
|
+
|
|
6058
|
+
/*!
|
|
6059
|
+
Copyright (c) 2018 Jed Watson.
|
|
6060
|
+
Licensed under the MIT License (MIT), see
|
|
6061
|
+
http://jedwatson.github.io/classnames
|
|
6062
|
+
*/
|
|
6063
|
+
|
|
6064
|
+
var hasRequiredClassnames;
|
|
6065
|
+
|
|
6066
|
+
function requireClassnames () {
|
|
6067
|
+
if (hasRequiredClassnames) return classnames.exports;
|
|
6068
|
+
hasRequiredClassnames = 1;
|
|
6069
|
+
(function (module) {
|
|
6070
|
+
/* global define */
|
|
6071
|
+
|
|
6072
|
+
(function () {
|
|
6073
|
+
|
|
6074
|
+
var hasOwn = {}.hasOwnProperty;
|
|
6075
|
+
|
|
6076
|
+
function classNames () {
|
|
6077
|
+
var classes = '';
|
|
6078
|
+
|
|
6079
|
+
for (var i = 0; i < arguments.length; i++) {
|
|
6080
|
+
var arg = arguments[i];
|
|
6081
|
+
if (arg) {
|
|
6082
|
+
classes = appendClass(classes, parseValue(arg));
|
|
6083
|
+
}
|
|
6084
|
+
}
|
|
6085
|
+
|
|
6086
|
+
return classes;
|
|
6087
|
+
}
|
|
6088
|
+
|
|
6089
|
+
function parseValue (arg) {
|
|
6090
|
+
if (typeof arg === 'string' || typeof arg === 'number') {
|
|
6091
|
+
return arg;
|
|
6092
|
+
}
|
|
6093
|
+
|
|
6094
|
+
if (typeof arg !== 'object') {
|
|
6095
|
+
return '';
|
|
6096
|
+
}
|
|
6097
|
+
|
|
6098
|
+
if (Array.isArray(arg)) {
|
|
6099
|
+
return classNames.apply(null, arg);
|
|
6100
|
+
}
|
|
6101
|
+
|
|
6102
|
+
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
|
|
6103
|
+
return arg.toString();
|
|
6104
|
+
}
|
|
6105
|
+
|
|
6106
|
+
var classes = '';
|
|
6107
|
+
|
|
6108
|
+
for (var key in arg) {
|
|
6109
|
+
if (hasOwn.call(arg, key) && arg[key]) {
|
|
6110
|
+
classes = appendClass(classes, key);
|
|
6111
|
+
}
|
|
6112
|
+
}
|
|
6113
|
+
|
|
6114
|
+
return classes;
|
|
6115
|
+
}
|
|
6116
|
+
|
|
6117
|
+
function appendClass (value, newClass) {
|
|
6118
|
+
if (!newClass) {
|
|
6119
|
+
return value;
|
|
6120
|
+
}
|
|
6121
|
+
|
|
6122
|
+
if (value) {
|
|
6123
|
+
return value + ' ' + newClass;
|
|
6124
|
+
}
|
|
6125
|
+
|
|
6126
|
+
return value + newClass;
|
|
6127
|
+
}
|
|
6128
|
+
|
|
6129
|
+
if (module.exports) {
|
|
6130
|
+
classNames.default = classNames;
|
|
6131
|
+
module.exports = classNames;
|
|
6132
|
+
} else {
|
|
6133
|
+
window.classNames = classNames;
|
|
6134
|
+
}
|
|
6135
|
+
}());
|
|
6136
|
+
} (classnames));
|
|
6137
|
+
return classnames.exports;
|
|
6138
|
+
}
|
|
6139
|
+
|
|
6140
|
+
var classnamesExports = requireClassnames();
|
|
6141
|
+
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
6142
|
+
|
|
6143
|
+
class ElementActivationController {
|
|
6144
|
+
host;
|
|
6145
|
+
config;
|
|
6146
|
+
constructor(host, config) {
|
|
6147
|
+
this.host = host;
|
|
6148
|
+
this.config = config;
|
|
6149
|
+
}
|
|
6150
|
+
hostDidLoad() {
|
|
6151
|
+
if (!this.host.el.hasAttribute('tabindex')) {
|
|
6152
|
+
console.warn('Interactive element does not have a tabindex attribute!', this.host.el);
|
|
6153
|
+
}
|
|
6154
|
+
this.host.el.addEventListener('keydown', this.handleKeyDown.bind(this));
|
|
6155
|
+
this.host.el.addEventListener('click', this.handleActivation.bind(this));
|
|
5910
6156
|
}
|
|
6157
|
+
handleKeyDown = (event) => {
|
|
6158
|
+
if ((this.config?.keys ?? ['Enter', ' ']).includes(event.key)) {
|
|
6159
|
+
event.preventDefault();
|
|
6160
|
+
this.handleActivation(event);
|
|
6161
|
+
}
|
|
6162
|
+
};
|
|
6163
|
+
handleActivation = (event) => {
|
|
6164
|
+
this.host.lmvzActivation.emit();
|
|
6165
|
+
if (this.config?.localHandler) {
|
|
6166
|
+
this.config.localHandler(event);
|
|
6167
|
+
}
|
|
6168
|
+
};
|
|
5911
6169
|
}
|
|
5912
6170
|
|
|
5913
|
-
const lmvzButtonCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { button {
|
|
6171
|
+
const lmvzButtonCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } button.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } button.secondary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-hover, #000000)); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-active, #000000)); } button.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } button.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router)); } button.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router)); } display: inline-block; button { width: 100%; } } button { width: 100%; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } `;
|
|
5914
6172
|
|
|
5915
6173
|
class LmvzButton extends ReactiveControllerHost {
|
|
5916
6174
|
get el() { return getElement(this); }
|
|
@@ -5919,8 +6177,9 @@ class LmvzButton extends ReactiveControllerHost {
|
|
|
5919
6177
|
formEl = null;
|
|
5920
6178
|
formButtonEl = null;
|
|
5921
6179
|
lmvzActivation;
|
|
5922
|
-
|
|
5923
|
-
|
|
6180
|
+
ti = 0;
|
|
6181
|
+
resolveFocusableElement() {
|
|
6182
|
+
return this.validationEl;
|
|
5924
6183
|
}
|
|
5925
6184
|
scale = 'default';
|
|
5926
6185
|
variant;
|
|
@@ -5930,6 +6189,7 @@ class LmvzButton extends ReactiveControllerHost {
|
|
|
5930
6189
|
formMethod;
|
|
5931
6190
|
name;
|
|
5932
6191
|
value;
|
|
6192
|
+
buttonRole;
|
|
5933
6193
|
constructor(hostRef) {
|
|
5934
6194
|
super();
|
|
5935
6195
|
registerInstance(this, hostRef);
|
|
@@ -5941,7 +6201,7 @@ class LmvzButton extends ReactiveControllerHost {
|
|
|
5941
6201
|
}));
|
|
5942
6202
|
}
|
|
5943
6203
|
connectedCallback() {
|
|
5944
|
-
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
|
6204
|
+
this.inheritedAttributes = inheritAriaAttributes(this.el, ['role']);
|
|
5945
6205
|
super.connectedCallback();
|
|
5946
6206
|
}
|
|
5947
6207
|
disconnectedCallback() {
|
|
@@ -5998,7 +6258,7 @@ class LmvzButton extends ReactiveControllerHost {
|
|
|
5998
6258
|
};
|
|
5999
6259
|
render() {
|
|
6000
6260
|
this.renderHiddenButton();
|
|
6001
|
-
return (hAsync(Host, { key: '
|
|
6261
|
+
return (hAsync(Host, { key: 'f3e619dca398c3a8a78e9d2f8c3df4178b2531b2', role: "presentation" }, hAsync("button", { key: 'eb1aac6756a70968d3a72cb40c1d52d96340423e', ref: (e) => (this.validationEl = e), part: "button", role: this.buttonRole, disabled: this.disabled, type: this.type, class: classNames(this.variant ?? 'secondary', { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, hAsync("slot", { key: '786ff1c10ae05eda646c77ac8779813be6e51949' }))));
|
|
6002
6262
|
}
|
|
6003
6263
|
static get delegatesFocus() { return true; }
|
|
6004
6264
|
static get style() { return lmvzButtonCss(); }
|
|
@@ -6006,7 +6266,7 @@ class LmvzButton extends ReactiveControllerHost {
|
|
|
6006
6266
|
"$flags$": 793,
|
|
6007
6267
|
"$tagName$": "lmvz-button",
|
|
6008
6268
|
"$members$": {
|
|
6009
|
-
"ti": [
|
|
6269
|
+
"ti": [514, "tabindex"],
|
|
6010
6270
|
"scale": [513],
|
|
6011
6271
|
"variant": [513],
|
|
6012
6272
|
"disabled": [516],
|
|
@@ -6014,7 +6274,8 @@ class LmvzButton extends ReactiveControllerHost {
|
|
|
6014
6274
|
"form": [1],
|
|
6015
6275
|
"formMethod": [1, "form-method"],
|
|
6016
6276
|
"name": [1],
|
|
6017
|
-
"value": [1]
|
|
6277
|
+
"value": [1],
|
|
6278
|
+
"buttonRole": [1, "button-role"]
|
|
6018
6279
|
},
|
|
6019
6280
|
"$listeners$": undefined,
|
|
6020
6281
|
"$lazyBundleId$": "-",
|
|
@@ -6036,6 +6297,7 @@ function negate(delegate) {
|
|
|
6036
6297
|
};
|
|
6037
6298
|
}
|
|
6038
6299
|
|
|
6300
|
+
const variants = ['primary', 'secondary', 'tertiary'];
|
|
6039
6301
|
const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
|
|
6040
6302
|
const chipSizes = ['default', 'small'];
|
|
6041
6303
|
const linkTypes = ['internal', 'external'];
|
|
@@ -8190,15 +8452,17 @@ function toValidSvgStringWithFallback(value) {
|
|
|
8190
8452
|
}
|
|
8191
8453
|
}
|
|
8192
8454
|
|
|
8193
|
-
const lmvzButtonGroupCss = () => `:host{display:flex;
|
|
8455
|
+
const lmvzButtonGroupCss = () => `:host{display:flex;flex-flow:row-reverse wrap;gap:var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));font:var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);}:host([stacked]){flex-flow:column nowrap;align-items:stretch;padding:0}:host([stacked]) ::slotted(*){display:block;width:100%}::slotted([hidden]){display:none !important}:host(:not([data-only-tertiary],[stacked])) ::slotted([data-first-tertiary]){margin-inline-end:auto}:host([data-only-tertiary]:not([stacked])){justify-content:flex-end}`;
|
|
8194
8456
|
|
|
8195
8457
|
class LmvzButtonGroup {
|
|
8196
8458
|
constructor(hostRef) {
|
|
8197
8459
|
registerInstance(this, hostRef);
|
|
8198
8460
|
}
|
|
8461
|
+
get el() { return getElement(this); }
|
|
8199
8462
|
actionsSlot;
|
|
8200
8463
|
validationMessageCache = [];
|
|
8201
8464
|
actionsStateObserver;
|
|
8465
|
+
stacked = false;
|
|
8202
8466
|
get primaryEnabledAction() {
|
|
8203
8467
|
return this.enabledButtons.find(isPrimaryAction) ?? this.enabledButtons[0];
|
|
8204
8468
|
}
|
|
@@ -8230,23 +8494,23 @@ class LmvzButtonGroup {
|
|
|
8230
8494
|
const primaryActions = this.visibleButtons.filter(isPrimaryAction);
|
|
8231
8495
|
const secondaryActions = this.visibleButtons.filter(isSecondaryAction);
|
|
8232
8496
|
const issues = [];
|
|
8233
|
-
const order = this.visibleButtons
|
|
8497
|
+
const order = this.visibleButtons;
|
|
8234
8498
|
if (primaryActions.length !== 1)
|
|
8235
|
-
issues.push('
|
|
8499
|
+
issues.push('LmvzButtonGroup actions slot should contain exactly one primary action.');
|
|
8236
8500
|
if (secondaryActions.length > 1)
|
|
8237
|
-
issues.push(`
|
|
8501
|
+
issues.push(`LmvzButtonGroup actions slot should contain at most one secondary action (received ${secondaryActions.length})`);
|
|
8238
8502
|
if (primaryActions.length) {
|
|
8239
8503
|
const primaryAction = primaryActions[0];
|
|
8240
8504
|
const secondaryAction = secondaryActions[0];
|
|
8241
8505
|
if (order.indexOf(primaryAction) !== 0)
|
|
8242
|
-
issues.push('Primary action
|
|
8506
|
+
issues.push('Primary action should be the first focusable element in the actions slot (i.e. first child of the actions slot).');
|
|
8243
8507
|
if (secondaryAction && order.indexOf(secondaryAction) !== 1)
|
|
8244
|
-
issues.push('Secondary action
|
|
8508
|
+
issues.push('Secondary action should be the second focusable element in the actions slot (i.e. immediately after the primary button).');
|
|
8245
8509
|
}
|
|
8246
8510
|
else if (secondaryActions.length) {
|
|
8247
8511
|
const secondaryAction = secondaryActions[0];
|
|
8248
8512
|
if (order.indexOf(secondaryAction) !== 0)
|
|
8249
|
-
issues.push('Secondary action
|
|
8513
|
+
issues.push('Secondary action should be the first focusable element in the actions slot when no primary action is present (i.e. first child of the actions slot).');
|
|
8250
8514
|
}
|
|
8251
8515
|
return issues;
|
|
8252
8516
|
}
|
|
@@ -8284,20 +8548,35 @@ class LmvzButtonGroup {
|
|
|
8284
8548
|
}
|
|
8285
8549
|
});
|
|
8286
8550
|
this.checkActions();
|
|
8287
|
-
const
|
|
8288
|
-
|
|
8289
|
-
|
|
8290
|
-
|
|
8551
|
+
const visibleButtons = this.visibleButtons;
|
|
8552
|
+
const hasNonTertiary = visibleButtons.length > 0 && visibleButtons.some((btn) => isPrimaryAction(btn) || isSecondaryAction(btn));
|
|
8553
|
+
if (visibleButtons.length > 0 && !hasNonTertiary) {
|
|
8554
|
+
this.el.setAttribute('data-only-tertiary', '');
|
|
8555
|
+
}
|
|
8556
|
+
else {
|
|
8557
|
+
this.el.removeAttribute('data-only-tertiary');
|
|
8558
|
+
}
|
|
8559
|
+
this.visibleButtons.forEach((element, i) => {
|
|
8560
|
+
const variant = variants[i] ?? 'tertiary';
|
|
8291
8561
|
if (!element)
|
|
8292
|
-
|
|
8562
|
+
return;
|
|
8293
8563
|
if (isLmvzButton(element)) {
|
|
8294
|
-
if (!element.getAttribute('variant'))
|
|
8564
|
+
if (!element.getAttribute('variant') && !element.variant)
|
|
8295
8565
|
element.setAttribute('variant', variant);
|
|
8296
8566
|
}
|
|
8297
8567
|
else {
|
|
8298
8568
|
element.classList.add(variant);
|
|
8299
8569
|
}
|
|
8300
|
-
}
|
|
8570
|
+
});
|
|
8571
|
+
const firstTertiary = this.visibleButtons.find((btn) => btn.getAttribute('variant') === 'tertiary');
|
|
8572
|
+
this.visibleButtons.forEach((btn) => {
|
|
8573
|
+
if (btn === firstTertiary) {
|
|
8574
|
+
btn.setAttribute('data-first-tertiary', '');
|
|
8575
|
+
}
|
|
8576
|
+
else {
|
|
8577
|
+
btn.removeAttribute('data-first-tertiary');
|
|
8578
|
+
}
|
|
8579
|
+
});
|
|
8301
8580
|
this.focusPrimaryAction();
|
|
8302
8581
|
}
|
|
8303
8582
|
focusPrimaryAction() {
|
|
@@ -8325,43 +8604,22 @@ class LmvzButtonGroup {
|
|
|
8325
8604
|
});
|
|
8326
8605
|
}
|
|
8327
8606
|
render() {
|
|
8328
|
-
return (hAsync(Host, { key: '
|
|
8607
|
+
return (hAsync(Host, { key: '3e8ce38f7e83e201e47d31579f22161ff36247b1' }, hAsync("slot", { key: 'bc953d19b333f51c5f5c5ba86be3a85d155a29d1', ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange })));
|
|
8329
8608
|
}
|
|
8330
8609
|
static get style() { return lmvzButtonGroupCss(); }
|
|
8331
8610
|
static get cmpMeta() { return {
|
|
8332
|
-
"$flags$":
|
|
8611
|
+
"$flags$": 777,
|
|
8333
8612
|
"$tagName$": "lmvz-button-group",
|
|
8334
8613
|
"$members$": {
|
|
8614
|
+
"stacked": [516],
|
|
8335
8615
|
"primaryEnabledAction": [2064],
|
|
8336
8616
|
"hasActions": [2052, "has-actions"]
|
|
8337
8617
|
},
|
|
8338
8618
|
"$listeners$": undefined,
|
|
8339
8619
|
"$lazyBundleId$": "-",
|
|
8340
|
-
"$attrsToReflect$": []
|
|
8620
|
+
"$attrsToReflect$": [["stacked", "stacked"]]
|
|
8341
8621
|
}; }
|
|
8342
8622
|
}
|
|
8343
|
-
function isActionButton(element) {
|
|
8344
|
-
return ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
|
|
8345
|
-
}
|
|
8346
|
-
function isLmvzButton(element) {
|
|
8347
|
-
return element?.tagName.toUpperCase() === 'LMVZ-BUTTON';
|
|
8348
|
-
}
|
|
8349
|
-
function isDisabledButton(element) {
|
|
8350
|
-
return element.hasAttribute('disabled') || element.disabled === true;
|
|
8351
|
-
}
|
|
8352
|
-
function isVisible(element) {
|
|
8353
|
-
return !element.hasAttribute('hidden');
|
|
8354
|
-
}
|
|
8355
|
-
function getActionVariant(element) {
|
|
8356
|
-
const variant = element.getAttribute('variant') ?? element.variant;
|
|
8357
|
-
return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
|
|
8358
|
-
}
|
|
8359
|
-
function isPrimaryAction(element) {
|
|
8360
|
-
return getActionVariant(element) === 'primary';
|
|
8361
|
-
}
|
|
8362
|
-
function isSecondaryAction(element) {
|
|
8363
|
-
return getActionVariant(element) === 'secondary';
|
|
8364
|
-
}
|
|
8365
8623
|
|
|
8366
8624
|
function getLocationBase() {
|
|
8367
8625
|
return (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('@app-factory-entry.js', document.baseURI).href)) ?? window?.location?.origin ?? '';
|
|
@@ -8383,7 +8641,7 @@ function joinPath(...parts) {
|
|
|
8383
8641
|
return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
|
|
8384
8642
|
}
|
|
8385
8643
|
|
|
8386
|
-
const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router); } display: flex; min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.4 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }`;
|
|
8644
|
+
const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } .sc-lmvz-card-h { button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } button.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } button.secondary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-hover, #000000)); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-active, #000000)); } button.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } button.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router)); } button.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router)); } display: flex; min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.4 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }`;
|
|
8387
8645
|
|
|
8388
8646
|
class LmvzCard {
|
|
8389
8647
|
constructor(hostRef) {
|
|
@@ -8408,7 +8666,7 @@ class LmvzCard {
|
|
|
8408
8666
|
const imgStyle = {
|
|
8409
8667
|
backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
|
|
8410
8668
|
};
|
|
8411
|
-
return (hAsync(Host, { key: '
|
|
8669
|
+
return (hAsync(Host, { key: '1dd819fd7c752af8d15001c08f7f60c6ea7278b9', role: "article" }, hAsync("div", { key: 'e0cc822e627b6bbe665e4faa705cc46a09bac7c6', class: "top" }, hAsync("div", { key: 'db79cb5a67ebdd6097f985e4b4bd27665b6329ef', class: "image-wrapper", style: imgStyle }, hAsync("div", { key: '90facc8595ddbbf31e3768faa8254a82ab8d3e65', class: "chip-slot" }, hAsync("slot", { key: 'cb2e6a1053aae2b2ca90c52c175e3c4174c89d23', name: "chip" })))), hAsync("div", { key: 'cb11069a329385178677e92d08044e0fe8e5b982', class: "bottom" }, hAsync("header", { key: '1e6076352124ca03de2fb13c17a565b4f492567e' }, hAsync("h2", { key: '73f11099fb751bd4f967dbe49b79763b6a8268f3', class: "title" }, this.cardTitle)), hAsync("p", { key: '36cf87b4c2004bff1e65feedd13e137d67115de3', class: "description" }, this.description), hAsync("div", { key: '6c1d82f4968ce8252307858e6ad0681274f06397', class: "actions" }, hAsync("button", { key: '0366e0caaf9235a3eaf7bfcab116e6a828fb248d', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), hAsync("button", { key: '4f435e79d75a621d6fe065471a915b55308ad15d', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, hAsync("span", { key: '7dec97e0b0ca58c40fc5308cc7863acafa8c5147', class: "icon-placeholder" }, "..."))))));
|
|
8412
8670
|
}
|
|
8413
8671
|
static get assetsDirs() { return ["../../assets"]; }
|
|
8414
8672
|
static get style() { return lmvzCardCss(); }
|
|
@@ -8523,7 +8781,7 @@ class LmvzCheckbox extends ReactiveControllerHost {
|
|
|
8523
8781
|
this.nativeInput?.click();
|
|
8524
8782
|
}
|
|
8525
8783
|
render() {
|
|
8526
|
-
return (hAsync(Host, { key: '
|
|
8784
|
+
return (hAsync(Host, { key: 'b6b4153dbf80af15cb15799889ca23b621b4ef73' }, hAsync("div", { key: 'f11d6baaa4b04ee74b201be8c4e125ccd5c366aa', class: "pill" }, hAsync("input", { key: 'd61dccfa163ecf4fffa95a5d44be35adbb8ee8ff', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), hAsync("span", { key: '87d62f1e0572e174e6d15f30ff59e37f6a5333cb', class: "box", "aria-hidden": "true" }, this.checkedState && hAsync("span", { key: '74d29a32599f6c1ee8bde0cb6f27e384de7fcc2d', class: "indicator", innerHTML: CHECKMARK_SVG })), hAsync("span", { key: '544990c81b3f7f90b53902d580d2eb2197edfa8b', class: "content" }, hAsync("label", { key: '1884744656a280f85bec91b27315d3a6b70e8238', htmlFor: this.checkboxId }, this.label), this.helperText && (hAsync("span", { key: '6783ff413a884c78dbd52e07cc7b433f5a9dcf29', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (hAsync("span", { key: '7c19fe406223a11e25df54cdfa304bc000eb421f', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
|
|
8527
8785
|
}
|
|
8528
8786
|
static get formAssociated() { return true; }
|
|
8529
8787
|
static get watchers() { return {
|
|
@@ -8619,7 +8877,7 @@ class LmvzChip extends ReactiveControllerHost {
|
|
|
8619
8877
|
}
|
|
8620
8878
|
}, 500);
|
|
8621
8879
|
render() {
|
|
8622
|
-
return (hAsync(Host, { key: '
|
|
8880
|
+
return (hAsync(Host, { key: 'f326ca8e4dba40941db6b9a711ba46989c4cf1b3', type: this.type, size: this.size }, hAsync("slot", { key: 'f9925e107c2e474ecbaca756451dc4249000b0db', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), hAsync("span", { key: '0b6ea980e0b0500d2955a03088d08eb2ca67f64f', class: "content-overflow-wrapper" }, hAsync("slot", { key: '2b7f5c02e9a09128e0a404c7fe35f6278ce1fa61', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), hAsync("slot", { key: '929291cdaccf26d332823f9a100c6b6a84dc04f2', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
|
|
8623
8881
|
}
|
|
8624
8882
|
static get watchers() { return {
|
|
8625
8883
|
"type": [{
|
|
@@ -8643,174 +8901,6 @@ class LmvzChip extends ReactiveControllerHost {
|
|
|
8643
8901
|
}; }
|
|
8644
8902
|
}
|
|
8645
8903
|
|
|
8646
|
-
const defaultConfig = {
|
|
8647
|
-
orientation: 'both',
|
|
8648
|
-
enableHomeAndEnd: false,
|
|
8649
|
-
manageTabIndex: false,
|
|
8650
|
-
};
|
|
8651
|
-
class DirectionalFocusController {
|
|
8652
|
-
host;
|
|
8653
|
-
elements = [];
|
|
8654
|
-
currentElement;
|
|
8655
|
-
config;
|
|
8656
|
-
constructor(host, config = {}) {
|
|
8657
|
-
this.host = host;
|
|
8658
|
-
this.config = {
|
|
8659
|
-
...defaultConfig,
|
|
8660
|
-
...config,
|
|
8661
|
-
};
|
|
8662
|
-
}
|
|
8663
|
-
hostConnected() {
|
|
8664
|
-
this.host.el.addEventListener('keydown', this.handleKeydown);
|
|
8665
|
-
this.syncManagedFocusTarget();
|
|
8666
|
-
}
|
|
8667
|
-
hostDisconnected() {
|
|
8668
|
-
this.host.el.removeEventListener('keydown', this.handleKeydown);
|
|
8669
|
-
}
|
|
8670
|
-
updateElements(elements) {
|
|
8671
|
-
const previousElement = this.currentElement ?? this.getManagedActiveElement() ?? undefined;
|
|
8672
|
-
this.elements = elements.filter((element) => 'focus' in element && element.nodeType === 1);
|
|
8673
|
-
this.syncManagedFocusTarget(previousElement);
|
|
8674
|
-
}
|
|
8675
|
-
setCurrentElement(element) {
|
|
8676
|
-
const previousElement = this.currentElement;
|
|
8677
|
-
this.currentElement = element !== null && element !== undefined && 'focus' in element && element.nodeType === 1 ? element : undefined;
|
|
8678
|
-
this.syncManagedFocusTarget(previousElement);
|
|
8679
|
-
}
|
|
8680
|
-
handleKeydown = (event) => {
|
|
8681
|
-
const intent = this.getFocusIntent(event.key);
|
|
8682
|
-
if (!intent)
|
|
8683
|
-
return;
|
|
8684
|
-
const activeElement = this.getManagedActiveElement();
|
|
8685
|
-
const nextElement = this.getTargetElement(activeElement, intent);
|
|
8686
|
-
if (!nextElement)
|
|
8687
|
-
return;
|
|
8688
|
-
event.preventDefault();
|
|
8689
|
-
this.applyFocusTarget(nextElement, true);
|
|
8690
|
-
};
|
|
8691
|
-
getFocusIntent(key) {
|
|
8692
|
-
if (this.config.enableHomeAndEnd && key === 'Home')
|
|
8693
|
-
return 'first';
|
|
8694
|
-
if (this.config.enableHomeAndEnd && key === 'End')
|
|
8695
|
-
return 'last';
|
|
8696
|
-
if (this.config.orientation === 'horizontal') {
|
|
8697
|
-
if (key === 'ArrowRight')
|
|
8698
|
-
return 'next';
|
|
8699
|
-
if (key === 'ArrowLeft')
|
|
8700
|
-
return 'previous';
|
|
8701
|
-
return undefined;
|
|
8702
|
-
}
|
|
8703
|
-
if (this.config.orientation === 'vertical') {
|
|
8704
|
-
if (key === 'ArrowDown')
|
|
8705
|
-
return 'next';
|
|
8706
|
-
if (key === 'ArrowUp')
|
|
8707
|
-
return 'previous';
|
|
8708
|
-
return undefined;
|
|
8709
|
-
}
|
|
8710
|
-
if (key === 'ArrowDown' || key === 'ArrowRight')
|
|
8711
|
-
return 'next';
|
|
8712
|
-
if (key === 'ArrowUp' || key === 'ArrowLeft')
|
|
8713
|
-
return 'previous';
|
|
8714
|
-
return undefined;
|
|
8715
|
-
}
|
|
8716
|
-
getManagedActiveElement() {
|
|
8717
|
-
const activeElement = getDeepActiveElement(this.host.el.ownerDocument ?? document);
|
|
8718
|
-
if (activeElement instanceof HTMLElement && this.elements.includes(activeElement) && this.canMoveFocusTo(activeElement)) {
|
|
8719
|
-
return activeElement;
|
|
8720
|
-
}
|
|
8721
|
-
if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
|
|
8722
|
-
return this.currentElement;
|
|
8723
|
-
}
|
|
8724
|
-
return undefined;
|
|
8725
|
-
}
|
|
8726
|
-
getTargetElement(current, intent) {
|
|
8727
|
-
if (!this.elements.length)
|
|
8728
|
-
return undefined;
|
|
8729
|
-
if (intent === 'first')
|
|
8730
|
-
return this.findFocusableFromIndex(-1, 'next');
|
|
8731
|
-
if (intent === 'last')
|
|
8732
|
-
return this.findFocusableFromIndex(this.elements.length, 'previous');
|
|
8733
|
-
const currentIndex = current ? this.elements.indexOf(current) : -1;
|
|
8734
|
-
if (currentIndex === -1) {
|
|
8735
|
-
return intent === 'next' ? this.findFocusableFromIndex(-1, 'next') : this.findFocusableFromIndex(this.elements.length, 'previous');
|
|
8736
|
-
}
|
|
8737
|
-
return this.findFocusableFromIndex(currentIndex, intent);
|
|
8738
|
-
}
|
|
8739
|
-
findFocusableFromIndex(startIndex, intent) {
|
|
8740
|
-
if (!this.elements.length)
|
|
8741
|
-
return undefined;
|
|
8742
|
-
const step = intent === 'next' ? 1 : -1;
|
|
8743
|
-
for (let offset = 1; offset <= this.elements.length; offset++) {
|
|
8744
|
-
const index = (startIndex + step * offset + this.elements.length) % this.elements.length;
|
|
8745
|
-
const candidate = this.elements[index];
|
|
8746
|
-
if (this.canMoveFocusTo(candidate))
|
|
8747
|
-
return candidate;
|
|
8748
|
-
}
|
|
8749
|
-
return undefined;
|
|
8750
|
-
}
|
|
8751
|
-
syncManagedFocusTarget(previousElement) {
|
|
8752
|
-
const nextElement = this.selectManagedElement(previousElement);
|
|
8753
|
-
const didChange = nextElement !== this.currentElement;
|
|
8754
|
-
this.currentElement = nextElement;
|
|
8755
|
-
if (this.config.manageTabIndex) {
|
|
8756
|
-
this.updateTabIndexes(nextElement);
|
|
8757
|
-
}
|
|
8758
|
-
if (didChange && nextElement) {
|
|
8759
|
-
this.config.onFocusTargetChange?.(nextElement);
|
|
8760
|
-
}
|
|
8761
|
-
}
|
|
8762
|
-
selectManagedElement(previousElement) {
|
|
8763
|
-
const activeElement = this.getManagedActiveElement();
|
|
8764
|
-
if (activeElement)
|
|
8765
|
-
return activeElement;
|
|
8766
|
-
if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
|
|
8767
|
-
return this.currentElement;
|
|
8768
|
-
}
|
|
8769
|
-
if (previousElement && this.elements.includes(previousElement)) {
|
|
8770
|
-
return this.findFocusableFromIndex(this.elements.indexOf(previousElement), 'next') ?? this.findFocusableFromIndex(-1, 'next');
|
|
8771
|
-
}
|
|
8772
|
-
const currentRovingTarget = this.elements.find((element) => element.tabIndex === 0 && this.canMoveFocusTo(element));
|
|
8773
|
-
if (currentRovingTarget)
|
|
8774
|
-
return currentRovingTarget;
|
|
8775
|
-
return this.findFocusableFromIndex(-1, 'next');
|
|
8776
|
-
}
|
|
8777
|
-
updateTabIndexes(activeElement) {
|
|
8778
|
-
this.elements.forEach((element) => {
|
|
8779
|
-
element.tabIndex = activeElement && element === activeElement ? 0 : -1;
|
|
8780
|
-
});
|
|
8781
|
-
}
|
|
8782
|
-
applyFocusTarget(element, shouldFocus) {
|
|
8783
|
-
const didChange = element !== this.currentElement;
|
|
8784
|
-
this.currentElement = element;
|
|
8785
|
-
if (this.config.manageTabIndex) {
|
|
8786
|
-
this.updateTabIndexes(element);
|
|
8787
|
-
}
|
|
8788
|
-
if (shouldFocus) {
|
|
8789
|
-
element.focus();
|
|
8790
|
-
}
|
|
8791
|
-
if (didChange) {
|
|
8792
|
-
this.config.onFocusTargetChange?.(element);
|
|
8793
|
-
}
|
|
8794
|
-
}
|
|
8795
|
-
canMoveFocusTo(element) {
|
|
8796
|
-
if (!element)
|
|
8797
|
-
return false;
|
|
8798
|
-
if (element.hasAttribute('disabled'))
|
|
8799
|
-
return false;
|
|
8800
|
-
if ('disabled' in element && Boolean(element.disabled))
|
|
8801
|
-
return false;
|
|
8802
|
-
if (element.getAttribute('aria-disabled') === 'true')
|
|
8803
|
-
return false;
|
|
8804
|
-
if (this.config.isFocusableElement)
|
|
8805
|
-
return this.config.isFocusableElement(element);
|
|
8806
|
-
const isTabOrderable = this.config.manageTabIndex || element.tabIndex >= 0;
|
|
8807
|
-
return (isTabOrderable &&
|
|
8808
|
-
element.getAttribute('aria-hidden') !== 'true' &&
|
|
8809
|
-
(element.checkVisibility?.() ?? true) &&
|
|
8810
|
-
element.offsetParent !== null);
|
|
8811
|
-
}
|
|
8812
|
-
}
|
|
8813
|
-
|
|
8814
8904
|
const logoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNzIiIHZpZXdCb3g9IjAgMCA0NiA3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI3Ml80MDUpIj4KPHBhdGggZD0iTTEyLjUgMjAuNjVDMTMuMSAyMC42NSAxNC4yIDIwLjM1IDE0LjcgMjAuMzVDMTYuMSAyMC4zNSAxNy4yIDIxLjQ1IDE3LjIgMjIuODVDMTcuMiAyNC4yNSAxNi4xIDI1LjM1IDE0LjcgMjUuMzVIMi44QzEuMiAyNS4zNSAwIDI0LjE1IDAgMjIuNTVDMCAyMS45NSAwLjIgMjAuNjUgMC4yIDIwLjA1VjUuODQ5OTlDMC4yIDUuMTQ5OTkgMCAzLjk0OTk5IDAgMy4zNDk5OUMwIDEuNzQ5OTkgMS4yIDAuNTQ5OTg4IDIuOCAwLjU0OTk4OEM0LjMgMC41NDk5ODggNS42IDEuNzQ5OTkgNS42IDMuMzQ5OTlDNS42IDMuOTQ5OTkgNS40IDUuMTQ5OTkgNS40IDUuODQ5OTlWMjAuNTVIMTIuNVYyMC42NVpNMjIuMSAyMi43NUMyMi4xIDIyLjE1IDIyLjMgMjAuOTUgMjIuMyAyMC4yNVY1Ljg0OTk5QzIyLjMgNS4xNDk5OSAyMi4xIDMuOTQ5OTkgMjIuMSAzLjQ0OTk5QzIyLjEgMS45NDk5OSAyMy4yIDAuNzQ5OTg4IDI0LjYgMC43NDk5ODhIMjUuMkMyNi40IDAuNzQ5OTg4IDI3LjIgMS41NDk5OSAyNy42IDIuNjQ5OTlMMjggMy40NDk5OUwzMi45IDE0LjA1QzMzLjMgMTQuOTUgMzMuNyAxNi4wNSAzNCAxNi43NUMzNC4zIDE2LjA1IDM0LjcgMTQuOTUgMzUuMSAxNC4wNUw0MCAzLjU0OTk5TDQwLjMgMi41NDk5OUM0MC43IDEuNTQ5OTkgNDEuNSAwLjY0OTk4OCA0Mi42IDAuNjQ5OTg4SDQzLjJDNDQuNyAwLjY0OTk4OCA0NS43IDEuODQ5OTkgNDUuNyAzLjM0OTk5QzQ1LjcgMy45NDk5OSA0NS41IDUuMTQ5OTkgNDUuNSA1Ljc0OTk5VjIwLjE1QzQ1LjUgMjAuODUgNDUuNyAyMi4wNSA0NS43IDIyLjY1QzQ1LjcgMjQuMjUgNDQuNSAyNS40NSA0MyAyNS40NUM0MS40IDI1LjQ1IDQwLjMgMjQuMjUgNDAuMyAyMi42NUM0MC4zIDIxLjk1IDQwLjQgMjAuNzUgNDAuNCAyMC4xNUw0MC42IDE0LjA1QzQwLjYgMTMuMTUgNDAuNyAxMS43NSA0MC43IDEwLjY1TDM3IDE5LjA1QzM2LjcgMTkuNzUgMzYuNiAxOS45NSAzNi40IDIwLjM1QzM2IDIxLjI1IDM1LjMgMjEuODUgMzMuOSAyMS44NUMzMi41IDIxLjg1IDMxLjggMjEuMjUgMzEuNCAyMC40NUMzMS4yIDIwLjA1IDMxLjIgMTkuNzUgMzAuOCAxOS4wNUwyNyAxMC43NUMyNyAxMC43NSAyNy4xIDEzLjE1IDI3LjIgMTQuMDVMMjcuNCAyMC4xNUMyNy40IDIwLjg1IDI3LjUgMjEuOTUgMjcuNSAyMi42NUMyNy41IDI0LjI1IDI2LjQgMjUuNDUgMjQuOCAyNS40NUMyMy4zIDI1LjU1IDIyLjEgMjQuMjUgMjIuMSAyMi43NVpNMjguNyAzMi45NUMyOS4xIDMyLjk1IDMwLjIgMzMuMTUgMzAuNyAzMy4xNUg0MS44QzQyLjMgMzMuMTUgNDMuMiAzMi45NSA0My43IDMyLjk1QzQ0LjkgMzIuOTUgNDUuOCAzMy44NSA0NS44IDM1LjA1QzQ1LjggMzYuMTUgNDQuOSAzNy4xNSA0My43IDM3LjE1QzQzLjMgMzcuMTUgNDIuMyAzNi45NSA0MS44IDM2Ljk1SDMwLjhDMzAuMyAzNi45NSAyOS4yIDM3LjE1IDI4LjggMzcuMTVDMjcuNiAzNy4xNSAyNi43IDM2LjI1IDI2LjcgMzUuMDVDMjYuNiAzMy45NSAyNy41IDMyLjk1IDI4LjcgMzIuOTVaTTIuMSA2Ny4yNUMyLjUgNjcuMjUgMy42IDY3LjQ1IDQuMSA2Ny40NUgxOC41QzE5IDY3LjQ1IDE5LjkgNjcuMjUgMjAuNCA2Ny4yNUMyMS42IDY3LjI1IDIyLjUgNjguMTUgMjIuNSA2OS4zNUMyMi41IDcwLjQ1IDIxLjYgNzEuNDUgMjAuNCA3MS40NUMyMCA3MS40NSAxOSA3MS4yNSAxOC41IDcxLjI1SDQuMUMzLjYgNzEuMjUgMi41IDcxLjQ1IDIuMSA3MS40NUMwLjkgNzEuNDUgMCA3MC41NSAwIDY5LjM1QzAgNjguMjUgMC45IDY3LjI1IDIuMSA2Ny4yNVpNMjEuOSAzNS42NUMyMS45IDM1Ljk1IDIxLjggMzYuMzUgMjEuNiAzNi43NUMyMS4zIDM3LjQ1IDIwLjkgMzguMzUgMjAuNyAzOC44NUwxNC43IDU0LjY1QzE0LjUgNTUuMDUgMTQuNCA1NS41NSAxNC4yIDU2LjM1QzEzLjggNTcuNjUgMTIuNiA1OC4yNSAxMS4yIDU4LjI1SDEwLjhDOS40IDU4LjI1IDguMiA1Ny43NSA3LjggNTYuMzVDNy42IDU1LjU1IDcuNCA1NS4xNSA3LjIgNTQuNjVMMS4yIDM4Ljg1QzEgMzguMzUgMC42IDM3LjU1IDAuMiAzNi44NUMwLjEgMzYuNDUgMCAzNS45NSAwIDM1LjY1QzAgMzQuMTUgMS4yIDMyLjg1IDIuOCAzMi44NUMzLjkgMzIuODUgNSAzMy41NSA1LjMgMzQuNzVDNS41IDM1LjU1IDUuNSAzNi4xNSA2IDM3LjU1TDEwLjIgNDkuNDVDMTAuNSA1MC4zNSAxMC45IDUxLjQ1IDExLjEgNTIuMzVDMTEuMyA1MS40NSAxMS42IDUwLjQ1IDExLjkgNDkuNTVMMTYgMzcuNTVDMTYuNSAzNi4wNSAxNi40IDM1LjY1IDE2LjcgMzQuODVDMTcuMSAzMy42NSAxOC4xIDMyLjg1IDE5LjMgMzIuODVDMjAuOSAzMi44NSAyMS45IDM0LjE1IDIxLjkgMzUuNjVaTTI5LjcgNzEuNDVDMjguMiA3MS40NSAyNy4yIDcwLjQ1IDI3LjIgNjkuMTVDMjcuMiA2OC43NSAyNy4yIDY4LjI1IDI3LjggNjcuNDVMMzcuNCA1My40NUMzNy45IDUyLjc1IDM4LjUgNTIuMDUgMzkuMSA1MS4zNUgzMi4yQzMxLjUgNTEuMzUgMzAuNyA1MS42NSAzMC4xIDUxLjY1QzI4LjcgNTEuNjUgMjcuNiA1MC43NSAyNy42IDQ5LjM1QzI3LjYgNDcuOTUgMjguNyA0Ni45NSAzMC4xIDQ2Ljk1SDQyLjdDNDQuMiA0Ni45NSA0NS4yIDQ3Ljg1IDQ1LjIgNDkuMjVDNDUuMiA0OS42NSA0NSA1MC4zNSA0NC41IDUxLjA1TDM1LjIgNjQuODVDMzQuNyA2NS42NSAzNC4xIDY2LjQ1IDMzLjUgNjcuMDVINDEuMUM0MS45IDY3LjA1IDQyLjcgNjYuNzUgNDMuMyA2Ni43NUM0NC43IDY2Ljc1IDQ1LjcgNjcuNzUgNDUuNyA2OS4wNUM0NS43IDcwLjU1IDQ0LjUgNzEuNTUgNDMuMiA3MS41NUgyOS43VjcxLjQ1WiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNzJfNDA1Ij4KPHJlY3Qgd2lkdGg9IjQ2IiBoZWlnaHQ9IjcyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=';
|
|
8815
8905
|
|
|
8816
8906
|
const lmvzHeaderCss = () => `:host{display:flex;width:100vw;flex-direction:row;align-items:center;box-sizing:border-box;background-color:var(--lmvz-semantic-color-surface-primary, #ffffff);--lmvz-header-x-spacing-level-1:var(--lmvz-dimension-8-28, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));--lmvz-header-x-spacing-level-2:var(--lmvz-component-buttongroup-wrapper-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));padding:var(--lmvz-dimension-8-16, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);gap:var(--lmvz-header-x-spacing-level-1);.brand{display:inline-flex;justify-content:center;align-items:center}#fallback-logo-lmvz{height:34px;width:auto}nav{flex-grow:1}.primary-menubar{display:flex;flex-direction:row;align-items:center}.secondary-menubar{display:flex;flex-direction:row;align-items:center;margin-left:var(--lmvz-header-x-spacing-level-2);padding-left:var(--lmvz-header-x-spacing-level-2);border-left:1px solid var(--lmvz-semantic-color-border-default, #e0e0e0)}}`;
|
|
@@ -8897,7 +8987,7 @@ class LmvzHeader extends ReactiveControllerHost {
|
|
|
8897
8987
|
}
|
|
8898
8988
|
}
|
|
8899
8989
|
render() {
|
|
8900
|
-
return (hAsync(Host, { key: '
|
|
8990
|
+
return (hAsync(Host, { key: '5730219e990fc0f131ffacc7c88e6a5311553399', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: '7285f2dcac7d60c5d93328aa0e2fe8aa6b7b379c', class: "brand" }, hAsync("slot", { key: 'd06d953ee82eab20da3f383c15032bcbe8803ff9', name: "brand" }, hAsync("img", { key: 'd2441ce0efbf99c05f6344051703a96ffb376450', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: '7f092938728af5cb6568383a6622df49f222dc93', "aria-label": "Hauptnavigation" }, hAsync("div", { key: 'caa56893d6185aebb89661e62a555407675ccc2a', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: '90684f49cd3d53e20a63d4ebc37ec24e630bc313', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: 'ead46c08c6833565a55cd7af27fbece4e4468a03', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: '3f2ba617d9ed78abb9ab94b9515b02bb6836385a', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: '6fc79122baa3fd95992cbf30a465c3b40438a18f', class: "actions" }, hAsync("slot", { key: 'c427f5a3ad693169e267060b9076086fd0e37670', name: "actions" }))));
|
|
8901
8991
|
}
|
|
8902
8992
|
static get watchers() { return {
|
|
8903
8993
|
"lmvzActiveNav": [{
|
|
@@ -8965,7 +9055,7 @@ class LmvzIcon extends ReactiveControllerHost {
|
|
|
8965
9055
|
super.componentDidRender();
|
|
8966
9056
|
}
|
|
8967
9057
|
render() {
|
|
8968
|
-
return hAsync(Host, { key: '
|
|
9058
|
+
return hAsync(Host, { key: '4fba217d573d968951819f12af24d775c8ac62dc', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
|
|
8969
9059
|
}
|
|
8970
9060
|
waitUntilVisible(callback, rootMargin = 50) {
|
|
8971
9061
|
{
|
|
@@ -9000,6 +9090,28 @@ class LmvzIcon extends ReactiveControllerHost {
|
|
|
9000
9090
|
}; }
|
|
9001
9091
|
}
|
|
9002
9092
|
|
|
9093
|
+
const raf = (h) => {
|
|
9094
|
+
if (typeof __zone_symbol__requestAnimationFrame === 'function') {
|
|
9095
|
+
return __zone_symbol__requestAnimationFrame(h);
|
|
9096
|
+
}
|
|
9097
|
+
if (typeof requestAnimationFrame === 'function') {
|
|
9098
|
+
return requestAnimationFrame(h);
|
|
9099
|
+
}
|
|
9100
|
+
return setTimeout(h);
|
|
9101
|
+
};
|
|
9102
|
+
|
|
9103
|
+
const componentOnReady = (stencilEl, callback) => {
|
|
9104
|
+
if (hasLazyBuild(stencilEl)) {
|
|
9105
|
+
stencilEl.componentOnReady().then((resolvedEl) => callback(resolvedEl));
|
|
9106
|
+
}
|
|
9107
|
+
else {
|
|
9108
|
+
raf(() => callback(stencilEl));
|
|
9109
|
+
}
|
|
9110
|
+
};
|
|
9111
|
+
const hasLazyBuild = (stencilEl) => {
|
|
9112
|
+
return stencilEl.componentOnReady !== undefined;
|
|
9113
|
+
};
|
|
9114
|
+
|
|
9003
9115
|
const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-input-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --input-radius: var(--lmvz-component-input-radius-default, 999px); --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc); --input-border-width: var(--lmvz-semantic-border-width-default, 1px); --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } [size='sm'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem)); } [size='md'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); } [size='lg'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .input-container.sc-lmvz-input { display: flex; flex-direction: column; position: relative; width: 100%; } .input-wrapper.sc-lmvz-input { background-color: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-radius); display: flex; align-items: center; height: var(--input-height); padding: 0 var(--input-padding-x); position: relative; transition: border-color 0.2s ease; gap: var(--input-gap); } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { opacity: var(--input-disabled-opacity); cursor: not-allowed; pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--input-border-color-focus); outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); } .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover { border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; } label.sc-lmvz-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--label-color); font-size: var(--input-font-size); font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: 1.5; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0.5em; transform: translateY(-100%); transform-origin: left top; font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 400; } .required-indicator.sc-lmvz-input { color: var(--error-text-color); margin-left: 2px; } input.sc-lmvz-input { border: none; background: transparent; width: 100%; height: 100%; color: var(--input-text-color); font-family: inherit; font-size: var(--input-font-size); outline: none; padding: 0; margin: 0; font-weight: 400; } input.sc-lmvz-input::placeholder { color: var(--label-color); } div.sc-lmvz-input:empty { display: none; } [role='status'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--helper-text-color); font-weight: 400; } [role='alert'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--error-text-color); font-weight: 400; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding: 4px; }`;
|
|
9004
9116
|
|
|
9005
9117
|
let inputIdCounter = 0;
|
|
@@ -9148,7 +9260,7 @@ class LmvzInput extends ReactiveControllerHost {
|
|
|
9148
9260
|
handleFocus = () => { };
|
|
9149
9261
|
handleBlur = (event) => {
|
|
9150
9262
|
const input = event.target;
|
|
9151
|
-
input.
|
|
9263
|
+
input.checkValidity?.();
|
|
9152
9264
|
};
|
|
9153
9265
|
updateNativeError(fromEvent) {
|
|
9154
9266
|
const input = fromEvent ?? this.nativeInputElement;
|
|
@@ -9159,9 +9271,9 @@ class LmvzInput extends ReactiveControllerHost {
|
|
|
9159
9271
|
render() {
|
|
9160
9272
|
const hasValue = Boolean(this.value);
|
|
9161
9273
|
const shouldFloatLabel = hasValue || Boolean(this.placeholder);
|
|
9162
|
-
return (hAsync("div", { key: '
|
|
9274
|
+
return (hAsync("div", { key: '693614c334a94373dcef56b461455bf872249a69', class: classNames('input-container', {
|
|
9163
9275
|
'interaction-filled': hasValue,
|
|
9164
|
-
}) }, hAsync("div", { key: '
|
|
9276
|
+
}) }, hAsync("div", { key: '0eb36d76661d70bea71027ca7b30763d89bd6cb6', class: "input-wrapper" }, hAsync("slot", { key: '03adf18ebe01fe70dc821dcea2bb2963df40f8b4', name: "before-input" }), hAsync("div", { key: 'f1254561b53e321d0f2e4cf4ac93936119083f3f', class: "label-input-group" }, hAsync("label", { key: 'e17cdec368fd36a041d9d8853f4a82249f1b5d8c', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (hAsync("span", { key: 'b3e003bf972c3ad5b6c5b25f8ee509bd5d8df758', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), hAsync("input", { key: '75f192118b7a4c3e507172e13d0ae7e32118aad3', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), hAsync("slot", { key: '58a9701259ca92fd7441c1480de741d92bc47bc9', name: "after-input" })), hAsync("div", { key: '396b719d080c781f38d736e28e9c048f629d6ffe', id: this.helperId, role: "status" }, this.helperText || null), hAsync("div", { key: '9e5c86e6098f58d95c0984348d3da07b9e34e1fb', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
|
|
9165
9277
|
}
|
|
9166
9278
|
static get formAssociated() { return true; }
|
|
9167
9279
|
static get watchers() { return {
|
|
@@ -9267,7 +9379,7 @@ class LmvzLink {
|
|
|
9267
9379
|
const rel = this.computeRel();
|
|
9268
9380
|
const iconSvg = this.type === 'external' ? EXTERNAL_SVG : ARROW_RIGHT_SVG;
|
|
9269
9381
|
const isBlank = this.target === '_blank';
|
|
9270
|
-
return (hAsync(Host, { key: '
|
|
9382
|
+
return (hAsync(Host, { key: '338116d5af3112ec2a4a09b652048b733565a7d4' }, hAsync("a", { key: 'ae70aa2320ea2eeca56a14714de4dcfb06b8c94c', href: this.computeHref(), target: this.target, rel: rel }, hAsync("slot", { key: '4852b3336a94a46f363a83fb2c4f6d267f680d3d' }), hAsync("lmvz-icon", { key: 'e7f72016611a7d741eef7c81a047e026c699bdef', "aria-hidden": "true", icon: iconSvg }), isBlank && hAsync("span", { key: 'b4138b479b7c36c3b16c8e96fc6e39736222b26f', class: "sr-only" }, this.externalLabel))));
|
|
9271
9383
|
}
|
|
9272
9384
|
static get delegatesFocus() { return true; }
|
|
9273
9385
|
static get watchers() { return {
|
|
@@ -9315,7 +9427,7 @@ class LmvzMenuItem extends ReactiveControllerHost {
|
|
|
9315
9427
|
this.addController(new ElementActivationController(this));
|
|
9316
9428
|
}
|
|
9317
9429
|
render() {
|
|
9318
|
-
return (hAsync(Host, { key: '
|
|
9430
|
+
return (hAsync(Host, { key: '9c86e99a0427a5d11925a30bcdb9f88124006413' }, hAsync("slot", { key: '9a578cdf49bd1edd981d68d7b28c39b784980345', ref: (e) => (this.validationSlot = e) })));
|
|
9319
9431
|
}
|
|
9320
9432
|
static get style() { return lmvzMenuitemCss(); }
|
|
9321
9433
|
static get cmpMeta() { return {
|
|
@@ -9400,7 +9512,7 @@ class LmvzMessage {
|
|
|
9400
9512
|
}
|
|
9401
9513
|
render() {
|
|
9402
9514
|
const role = this.live === 'assertive' ? 'alert' : this.live === 'polite' ? 'status' : 'note';
|
|
9403
|
-
return (hAsync(Host, { key: '
|
|
9515
|
+
return (hAsync(Host, { key: 'f422e8ee4bb4466757c081bc6b33761db15cb02d', role: role }, this.leadingIcon && hAsync("span", { key: 'c4077083db459a65cacce2cbb8e8dbb477572d95', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), hAsync("span", { key: '77c3af94194adc2b663c6d6626951e5789e17686', class: "message" }, hAsync("slot", { key: '8db714f6bd0ac80a3c77a2768431baa37a63b3d1', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (hAsync("lmvz-button", { key: 'f75e835f39e97ea217727b55dc842ceda004834b', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (hAsync("lmvz-button", { key: '51b04ad48a68e0843445104e303eae5bb4cdd351', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, hAsync("lmvz-icon", { key: '5949210f479a6a19f1c4bb9d3c91a77a1c0ad8a6', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
|
|
9404
9516
|
}
|
|
9405
9517
|
static get style() { return lmvzMessageCss(); }
|
|
9406
9518
|
static get cmpMeta() { return {
|
|
@@ -9420,7 +9532,7 @@ class LmvzMessage {
|
|
|
9420
9532
|
}; }
|
|
9421
9533
|
}
|
|
9422
9534
|
|
|
9423
|
-
const lmvzModalCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; height: 100vh; width: 100vw; contain: layout size; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { margin-inline: auto; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: fit-content; max-height: 100%; max-width: clamp(20rem, 100%, 90vw); display: flex; flex-direction: column; gap: var(--lmvz-modal-shell-gap); padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem)); border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px); background: var(--lmvz-semantic-color-surface-primary, #ffffff); position: relative; .close-button { position: absolute; top: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } } .header { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--lmvz-modal-shell-gap); } .title { min-inline-size: 0; font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.5 Router); } .has-title .title { flex: 1 1 auto; } .body { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); flex: 1; overflow: scroll; } `;
|
|
9535
|
+
const lmvzModalCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; height: 100vh; width: 100vw; contain: layout size; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { margin-inline: auto; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: fit-content; max-height: 100%; max-width: clamp(20rem, 100%, 90vw); display: flex; flex-direction: column; gap: var(--lmvz-modal-shell-gap); padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem)); border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px); background: var(--lmvz-semantic-color-surface-primary, #ffffff); position: relative; .close-button { position: absolute; top: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } } .header { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--lmvz-modal-shell-gap); } .title { min-inline-size: 0; font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.5 Router); } .has-title .title { flex: 1 1 auto; } .body { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); flex: 1; overflow: scroll; } `;
|
|
9424
9536
|
|
|
9425
9537
|
const closeIconSvg = toValidSvgStringWithFallback(closeSmSvg);
|
|
9426
9538
|
let modalIdCounter = 0;
|
|
@@ -9644,7 +9756,7 @@ class LmvzModal extends ReactiveControllerHost {
|
|
|
9644
9756
|
this.hasHeader = this.hasAssignedContent(this.headerSlot);
|
|
9645
9757
|
};
|
|
9646
9758
|
render() {
|
|
9647
|
-
return (hAsync(Host, { key: '
|
|
9759
|
+
return (hAsync(Host, { key: '8b5f506cdac223a440309d472639fe965b94f8c2' }, hAsync("dialog", { key: '0b70ac4d9590266271052c4d7fdef03c684d9b72', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, hAsync("div", { key: '25b529bec1905408c2041b7370ab37586eade47d', class: "modal-shell" }, hAsync("header", { key: 'd86ae4a6f4ac7f6efd38385f1407d1f6bfbb1abb', class: { header: true, 'has-title': this.hasHeader } }, hAsync("div", { key: '7fd7059bfb0b90834895a87c2f2598e2e8c2ba80', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, hAsync("slot", { key: 'b6eb7885e220e5def4c3c8420d5b83f4a7e30907', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), hAsync("lmvz-button", { key: 'dcebb06482cdef7423c6b62ef877ca9aaabf55a4', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, hAsync("lmvz-icon", { key: '0db22c68fe164ed2a33bfaeacf9eac619424f464', icon: closeIconSvg }))), hAsync("div", { key: 'ef402c343f2c68210351f7556eec08f2e9be851b', class: "body" }, hAsync("slot", { key: '3fe86dc88c88c2cf7bfe3429c62cb2047b64611a' })), hAsync("footer", { key: '92b7bdab1ffe700749fc029723f70913f436397d', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, hAsync("lmvz-button-group", { key: '7e1b310fb1b20449ead14d0702af4977c74198dd', ref: (element) => (this.buttonGroupEl = element) }, hAsync("slot", { key: 'cb2187ab2758c61e80b65f9fc55c6be5f9fd0458', name: "actions" })))))));
|
|
9648
9760
|
}
|
|
9649
9761
|
static get watchers() { return {
|
|
9650
9762
|
"open": [{
|
|
@@ -9976,7 +10088,7 @@ class LmvzRadio extends ReactiveControllerHost {
|
|
|
9976
10088
|
this.radioGroupController.setFocused(target);
|
|
9977
10089
|
}
|
|
9978
10090
|
render() {
|
|
9979
|
-
return (hAsync(Host, { key: '
|
|
10091
|
+
return (hAsync(Host, { key: '9b8fbfe18376f9411f792630065dfd219f9ddb32' }, hAsync("input", { key: '24a0675eff854bbd751c07905db4be11e5353d11', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), hAsync("span", { key: 'f888c1f76f6f929609584d378dbe0974fd980f68', class: "circle", "aria-hidden": "true" }, this.checked && hAsync("span", { key: '57fbb1e7abdca10861cf8709d4300459e1f62e5c', class: "dot" })), hAsync("span", { key: '1c845611162be86500e8475ac37412e2d3f2fd99', class: "content" }, hAsync("label", { key: '1399f4d34ff0e6d369cefc9f5d08208a4dee593f', htmlFor: this.radioId }, this.label), hAsync("span", { key: '1345435ff2f4773260ea3f73e943f043c2b88bdb', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
|
|
9980
10092
|
}
|
|
9981
10093
|
static get formAssociated() { return true; }
|
|
9982
10094
|
static get watchers() { return {
|
|
@@ -10069,7 +10181,7 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
10069
10181
|
render() {
|
|
10070
10182
|
const hasValue = this.hasValue;
|
|
10071
10183
|
const shouldShowLabel = hasValue;
|
|
10072
|
-
return (hAsync(Host, { key: '
|
|
10184
|
+
return (hAsync(Host, { key: 'c753006bdabf1723fa9ff61eb35f58d5bef3157b', "data-highlighted": String(this.highlighted) }, hAsync("div", { key: '6b06056fd48ef4f837cbe17383756e3726c68f90', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, hAsync("label", { key: '819901582fc449566a112cd4544fa0af903a7011', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && hAsync("span", { key: '14ad70c1cf1a96c7398698fa86baeadd5fe4257b', "aria-hidden": "true" }, " *")), hAsync("div", { key: '589c6946bee6e320a36dfa0ed765ff9e02af4c2f', "aria-hidden": "true" }, hAsync("span", { key: '04444223ed66a5ddff3eb7bd581cf5a7e615cf6b' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: '9631d4a655514957a4564be939d8bd16c3a036f0', "aria-hidden": "true" }, " *")), hAsync("span", { key: '3950abf6ee9528adb5895fe6bc88be67b39d458e' }, hAsync("svg", { key: '98a0a380e9ca5044ca1fefb03b74bfc178974a60', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, hAsync("path", { key: '19fe8b40e315fabee982ba37fe2d397493429519', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), hAsync("select", { key: '7480ff36ef3acfe10fb0122bfdf7feb5af406c67', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && hAsync("option", { key: '5d00f696c2c4d7c35c180018a4c487cbb0229d37', value: "", disabled: true, selected: true, hidden: true }), hAsync("slot", { key: '218fe11d224d7ca72c8555301d41d8878b6b34b4' }))), this.helperText && hAsync("div", { key: 'edbb738590305f6724a590a3532fd9284a187866', role: "status" }, this.helperText)));
|
|
10073
10185
|
}
|
|
10074
10186
|
static get watchers() { return {
|
|
10075
10187
|
"value": [{
|
|
@@ -10161,7 +10273,7 @@ class LmvzSnackbar {
|
|
|
10161
10273
|
this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
|
|
10162
10274
|
};
|
|
10163
10275
|
render() {
|
|
10164
|
-
return (hAsync(Host, { key: '
|
|
10276
|
+
return (hAsync(Host, { key: 'f207854371f8423ff8dc9b732d1dabe1ab06e0b1', class: this.animationClass }, hAsync("lmvz-icon", { key: 'e0ffdd4c51d11f94aa33c5a9678a15e4162d4bdd', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), hAsync("span", { key: 'fcce1cbef0597af7e86de7b33a4f8a40c09f0cc8', class: "message" }, this.message), this.actionLabel && (hAsync("lmvz-button", { key: '3cdbd81ba0c9102d0539c913f530e2abfbed0fb6', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
|
|
10165
10277
|
}
|
|
10166
10278
|
static get watchers() { return {
|
|
10167
10279
|
"status": [{
|
|
@@ -10198,7 +10310,7 @@ class LmvzSpinner {
|
|
|
10198
10310
|
ariaLabel;
|
|
10199
10311
|
render() {
|
|
10200
10312
|
const hasLabel = !!this.ariaLabel?.trim();
|
|
10201
|
-
return (hAsync(Host, { key: '
|
|
10313
|
+
return (hAsync(Host, { key: '1953e9328170f6203b0936fd051fcaae44cba1d6', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, hAsync("svg", { key: '4393e17fe0b2e899cdd84f0bfba2047d3a08bac1', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, hAsync("circle", { key: 'a321ad329e7a94680b37f2e11bb0ab3ef6344708', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
|
|
10202
10314
|
}
|
|
10203
10315
|
static get style() { return lmvzSpinnerCss(); }
|
|
10204
10316
|
static get cmpMeta() { return {
|
|
@@ -10214,7 +10326,7 @@ class LmvzSpinner {
|
|
|
10214
10326
|
}; }
|
|
10215
10327
|
}
|
|
10216
10328
|
|
|
10217
|
-
const lmvzTabCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { display: inline-block; flex: none; } :host([disabled]) { cursor: not-allowed; pointer-events: none; } button { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lmvz-component-component-spacing-0-default, 4px); padding-top: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem)); padding-inline: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); border: none; border-radius: var(--lmvz-semantic-border-radius-round, 999px); background: var(--lmvz-tab-background); color: var(--lmvz-tab-color); font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); z-index: 1; } button:disabled { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; cursor: not-allowed; } button:hover { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button { padding-top: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); padding-inline: var(--lmvz-dimension-40-48, clamp(2.5rem, 2.38rem + 0.52vw, 3rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator { --lmvz-tab-indicator-size: 4px; position: absolute; background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); opacity: 0; transition: opacity 0.15s ease; inset-block-end: 0; inset-inline: 0; block-size: var(--lmvz-tab-indicator-size); border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: var(--lmvz-tab-indicator-size); border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator { opacity: 1; } :host([vertical]) button { border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator { inset-block: 0; inset-inline: 0 auto; inline-size: var(--lmvz-tab-indicator-size); block-size: auto; border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0; background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) { --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem)); } .label { display: contents; } `;
|
|
10329
|
+
const lmvzTabCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { display: inline-block; flex: none; } :host([disabled]) { cursor: not-allowed; pointer-events: none; } button { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lmvz-component-component-spacing-0-default, 4px); padding-top: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem)); padding-inline: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); border: none; border-radius: var(--lmvz-semantic-border-radius-round, 999px); background: var(--lmvz-tab-background); color: var(--lmvz-tab-color); font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); z-index: 1; } button:disabled { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; cursor: not-allowed; } button:hover { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button { padding-top: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); padding-inline: var(--lmvz-dimension-40-48, clamp(2.5rem, 2.38rem + 0.52vw, 3rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator { --lmvz-tab-indicator-size: 4px; position: absolute; background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); opacity: 0; transition: opacity 0.15s ease; inset-block-end: 0; inset-inline: 0; block-size: var(--lmvz-tab-indicator-size); border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: var(--lmvz-tab-indicator-size); border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator { opacity: 1; } :host([vertical]) button { border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator { inset-block: 0; inset-inline: 0 auto; inline-size: var(--lmvz-tab-indicator-size); block-size: auto; border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0; background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) { --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem)); } .label { display: contents; } `;
|
|
10218
10330
|
|
|
10219
10331
|
class LmvzTab {
|
|
10220
10332
|
constructor(hostRef) {
|
|
@@ -10234,7 +10346,7 @@ class LmvzTab {
|
|
|
10234
10346
|
this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
|
|
10235
10347
|
}
|
|
10236
10348
|
render() {
|
|
10237
|
-
return (hAsync(Host, { key: '
|
|
10349
|
+
return (hAsync(Host, { key: '642a74020dfe8e3f96ebbdf8067b1eba5c07bd15' }, hAsync("button", { key: 'b786b259aed2f2e1f61f3ef14959f564841b3761', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, hAsync("slot", { key: 'e29265a24673c39397266ef21419cebdf9a05a2c', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), hAsync("span", { key: 'c74ae843e36f85291e404955056ba1f34d0393e7', class: "label" }, hAsync("slot", { key: '0f13548f3ec10a126016bfc92aa93a4c21b86e0f' })), hAsync("span", { key: '2f969a70550975bffd1884a55b12fec733331b01', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
|
|
10238
10350
|
}
|
|
10239
10351
|
static get delegatesFocus() { return true; }
|
|
10240
10352
|
static get style() { return lmvzTabCss(); }
|
|
@@ -10253,7 +10365,7 @@ class LmvzTab {
|
|
|
10253
10365
|
}; }
|
|
10254
10366
|
}
|
|
10255
10367
|
|
|
10256
|
-
const lmvzTabsCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { display: inline-block; } .tablist { display: inline-flex; flex-direction: row; background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); border-radius: var(--lmvz-semantic-border-radius-round, 999px); overflow: auto hidden; scrollbar-width: none; } .tablist::-webkit-scrollbar { display: none; } :host([has-icon-tabs]) .tablist { gap: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); background: none; border-radius: 0; } :host([orientation='vertical']) .tablist { flex-direction: column; overflow: visible auto; } ::slotted([role='tabpanel']) { display: block; } ::slotted([role='tabpanel'][hidden]) { display: none; } `;
|
|
10368
|
+
const lmvzTabsCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { display: inline-block; } .tablist { display: inline-flex; flex-direction: row; background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); border-radius: var(--lmvz-semantic-border-radius-round, 999px); overflow: auto hidden; scrollbar-width: none; } .tablist::-webkit-scrollbar { display: none; } :host([has-icon-tabs]) .tablist { gap: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); background: none; border-radius: 0; } :host([orientation='vertical']) .tablist { flex-direction: column; overflow: visible auto; } ::slotted([role='tabpanel']) { display: block; } ::slotted([role='tabpanel'][hidden]) { display: none; } `;
|
|
10257
10369
|
|
|
10258
10370
|
let tabsIdCounter = 0;
|
|
10259
10371
|
class LmvzTabs extends ReactiveControllerHost {
|
|
@@ -10488,7 +10600,7 @@ class LmvzTabs extends ReactiveControllerHost {
|
|
|
10488
10600
|
this.selectTab(value);
|
|
10489
10601
|
};
|
|
10490
10602
|
render() {
|
|
10491
|
-
return (hAsync(Host, { key: '
|
|
10603
|
+
return (hAsync(Host, { key: '0247aeab4ec148274ab25c78a5444d14c1b70d89', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: 'aa8baa8e55f84ee0fa75ce02a172adebfe4fefcd', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, hAsync("slot", { key: 'b626f8dc73503c5013fa2e0a7623752eeb6f733f', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '230e7cc4686d643e8562aa93db6b2a3e94fccb5f', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: '713f88911b7cb14d3487d0945aac818b6727dee7', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
|
|
10492
10604
|
}
|
|
10493
10605
|
static get watchers() { return {
|
|
10494
10606
|
"value": [{
|
|
@@ -10592,7 +10704,7 @@ class LmvzToggle extends ReactiveControllerHost {
|
|
|
10592
10704
|
this.lmvzChange.emit(newChecked);
|
|
10593
10705
|
};
|
|
10594
10706
|
render() {
|
|
10595
|
-
return (hAsync(Host, { key: '
|
|
10707
|
+
return (hAsync(Host, { key: '56c73859d7eeb40842744a29392598678268d7e8' }, hAsync("span", { key: '145915fb9d77976328c39c00e7ef73426220b3ca', class: "track" }, hAsync("input", { key: '4363e8e3a614ce18da19abc70257b82363b291da', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), hAsync("span", { key: '794ef6a50e8442dd1c460df7c42ffcf3009aab15', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: '9432dc73d637ea8dbeb5c3b3ff8d0941c662f707', htmlFor: this.toggleId }, this.label)));
|
|
10596
10708
|
}
|
|
10597
10709
|
static get formAssociated() { return true; }
|
|
10598
10710
|
static get watchers() { return {
|
|
@@ -10629,6 +10741,7 @@ class LmvzToggle extends ReactiveControllerHost {
|
|
|
10629
10741
|
|
|
10630
10742
|
registerComponents([
|
|
10631
10743
|
LmvzAction,
|
|
10744
|
+
LmvzActionList,
|
|
10632
10745
|
LmvzButton,
|
|
10633
10746
|
LmvzButtonGroup,
|
|
10634
10747
|
LmvzCard,
|