@maggioli-design-system/mds-accordion-timer 4.2.3 → 4.2.5
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/dist/cjs/mds-accordion-timer.cjs.entry.js +5 -3
- package/dist/collection/common/locale.js +10 -8
- package/dist/collection/common/number.js +5 -0
- package/dist/collection/common/slot.js +10 -1
- package/dist/collection/common/unit.js +16 -1
- package/dist/collection/components/mds-accordion-timer/mds-accordion-timer.js +5 -3
- package/dist/collection/components/mds-accordion-timer/test/mds-accordion-timer.stories.js +39 -28
- package/dist/collection/dictionary/button.js +20 -1
- package/dist/collection/dictionary/icon.js +1 -1
- package/dist/collection/dictionary/variant.js +9 -1
- package/dist/components/mds-accordion-timer.js +5 -3
- package/dist/documentation.json +1 -1
- package/dist/esm/mds-accordion-timer.entry.js +5 -3
- package/dist/esm-es5/mds-accordion-timer.entry.js +1 -1
- package/dist/mds-accordion-timer/mds-accordion-timer.esm.js +1 -1
- package/dist/mds-accordion-timer/p-20781d57.system.js +1 -1
- package/dist/mds-accordion-timer/{p-1fce583e.system.entry.js → p-9db3df3f.system.entry.js} +1 -1
- package/dist/mds-accordion-timer/p-ab278a5f.entry.js +1 -0
- package/dist/stats.json +20 -19
- package/dist/types/common/number.d.ts +2 -0
- package/dist/types/common/slot.d.ts +2 -1
- package/dist/types/common/unit.d.ts +3 -1
- package/dist/types/components/mds-accordion-timer/test/mds-accordion-timer.stories.d.ts +35 -6
- package/dist/types/dictionary/button.d.ts +4 -1
- package/dist/types/dictionary/icon.d.ts +1 -1
- package/dist/types/dictionary/variant.d.ts +2 -1
- package/dist/types/type/button.d.ts +2 -0
- package/dist/types/type/variant.d.ts +1 -0
- package/documentation.json +34 -4
- package/package.json +3 -3
- package/src/common/locale.ts +10 -8
- package/src/common/number.ts +8 -0
- package/src/common/slot.ts +12 -0
- package/src/common/unit.ts +23 -0
- package/src/components/mds-accordion-timer/mds-accordion-timer.tsx +2 -2
- package/src/components/mds-accordion-timer/test/mds-accordion-timer.stories.tsx +316 -72
- package/src/dictionary/button.ts +25 -0
- package/src/dictionary/icon.ts +2 -1
- package/src/dictionary/variant.ts +11 -1
- package/src/tailwind/components.css +1 -1
- package/src/type/button.ts +15 -0
- package/src/type/variant.ts +8 -0
- package/www/build/mds-accordion-timer.esm.js +1 -1
- package/www/build/p-20781d57.system.js +1 -1
- package/www/build/{p-1fce583e.system.entry.js → p-9db3df3f.system.entry.js} +1 -1
- package/www/build/p-ab278a5f.entry.js +1 -0
- package/dist/mds-accordion-timer/p-49f1b328.entry.js +0 -1
- package/src/fixtures/icons.json +0 -459
- package/src/fixtures/iconsauce.json +0 -306
- package/www/build/p-49f1b328.entry.js +0 -1
|
@@ -50,9 +50,10 @@ const MdsAccordionTimer = class {
|
|
|
50
50
|
};
|
|
51
51
|
this.setSelectedItem = (uuid) => {
|
|
52
52
|
this.children.forEach((item, key) => {
|
|
53
|
+
var _a;
|
|
53
54
|
if (key === uuid) {
|
|
54
55
|
item.selected = true;
|
|
55
|
-
|
|
56
|
+
this.currentDuration = (_a = item.duration) !== null && _a !== void 0 ? _a : this.duration;
|
|
56
57
|
this.selectedItem = item;
|
|
57
58
|
this.changeEvent.emit({ index: key });
|
|
58
59
|
}
|
|
@@ -87,9 +88,10 @@ const MdsAccordionTimer = class {
|
|
|
87
88
|
componentDidLoad() {
|
|
88
89
|
this.children = this.element.querySelectorAll('mds-accordion-timer-item');
|
|
89
90
|
this.children.forEach((item, key) => {
|
|
91
|
+
var _a;
|
|
90
92
|
item.uuid = key;
|
|
91
93
|
if (item.selected) {
|
|
92
|
-
|
|
94
|
+
this.currentDuration = (_a = item.duration) !== null && _a !== void 0 ? _a : this.duration;
|
|
93
95
|
this.selectedItem = item;
|
|
94
96
|
}
|
|
95
97
|
});
|
|
@@ -144,7 +146,7 @@ const MdsAccordionTimer = class {
|
|
|
144
146
|
this.playTimer();
|
|
145
147
|
}
|
|
146
148
|
render() {
|
|
147
|
-
return (index.h(index.Host, { key: '
|
|
149
|
+
return (index.h(index.Host, { key: '3070adf0c624fa3b640c04d0757a5b30ecb7ff91' }, index.h("slot", { key: '19cb85bc8ef2332a520c0124bdfd27c603d20005' })));
|
|
148
150
|
}
|
|
149
151
|
get element() { return index.getElement(this); }
|
|
150
152
|
static get watchers() { return {
|
|
@@ -19,15 +19,17 @@ export class Locale {
|
|
|
19
19
|
};
|
|
20
20
|
this.update = (doc) => {
|
|
21
21
|
const context = doc !== null && doc !== void 0 ? doc : this.element.shadowRoot;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
if (context) {
|
|
23
|
+
context.querySelectorAll('*').forEach(el => {
|
|
24
|
+
if (el.tagName.toLowerCase().startsWith('mds-')) {
|
|
25
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
26
|
+
if (el && 'updateLang' in el) {
|
|
27
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
28
|
+
el.updateLang();
|
|
29
|
+
}
|
|
28
30
|
}
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
+
});
|
|
32
|
+
}
|
|
31
33
|
};
|
|
32
34
|
this.pluralize = (tag, context) => {
|
|
33
35
|
const languagePhrase = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
|
|
@@ -25,4 +25,13 @@ const hasSlotted = (el, name) => {
|
|
|
25
25
|
}
|
|
26
26
|
return false;
|
|
27
27
|
};
|
|
28
|
-
|
|
28
|
+
const hasSlottedContent = (el, name) => {
|
|
29
|
+
var _a;
|
|
30
|
+
const query = name ? `slot[name="${name}"]` : 'slot:not([name])';
|
|
31
|
+
const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(query);
|
|
32
|
+
if (!slot)
|
|
33
|
+
return false;
|
|
34
|
+
const assignedNodes = slot.assignedNodes({ flatten: true });
|
|
35
|
+
return assignedNodes.some(node => { var _a; return node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== ''; });
|
|
36
|
+
};
|
|
37
|
+
export { hasSlottedElements, hasSlottedNodes, hasSlottedContent, hasSlotted, };
|
|
@@ -7,6 +7,15 @@ const cssDurationToMilliseconds = (duration, defaultValue = 1000) => {
|
|
|
7
7
|
}
|
|
8
8
|
return defaultValue;
|
|
9
9
|
};
|
|
10
|
+
const cssDurationToSeconds = (duration, defaultValue = 1000) => {
|
|
11
|
+
if (duration.includes('ms')) {
|
|
12
|
+
return Number(duration.replace('ms', '')) / 1000;
|
|
13
|
+
}
|
|
14
|
+
if (duration.includes('s')) {
|
|
15
|
+
return Number(duration.replace('s', ''));
|
|
16
|
+
}
|
|
17
|
+
return defaultValue;
|
|
18
|
+
};
|
|
10
19
|
const cssSizeToNumber = (size, defaultValue = 0) => {
|
|
11
20
|
if (size.includes('px')) {
|
|
12
21
|
return Number(size.replace('px', ''));
|
|
@@ -19,4 +28,10 @@ const cssSizeToNumber = (size, defaultValue = 0) => {
|
|
|
19
28
|
}
|
|
20
29
|
return defaultValue;
|
|
21
30
|
};
|
|
22
|
-
|
|
31
|
+
const cssRotationToNumber = (size, defaultValue = 0) => {
|
|
32
|
+
if (size.includes('deg')) {
|
|
33
|
+
return Number(size.replace('deg', ''));
|
|
34
|
+
}
|
|
35
|
+
return defaultValue;
|
|
36
|
+
};
|
|
37
|
+
export { cssDurationToMilliseconds, cssDurationToSeconds, cssRotationToNumber, cssSizeToNumber, };
|
|
@@ -43,9 +43,10 @@ export class MdsAccordionTimer {
|
|
|
43
43
|
};
|
|
44
44
|
this.setSelectedItem = (uuid) => {
|
|
45
45
|
this.children.forEach((item, key) => {
|
|
46
|
+
var _a;
|
|
46
47
|
if (key === uuid) {
|
|
47
48
|
item.selected = true;
|
|
48
|
-
|
|
49
|
+
this.currentDuration = (_a = item.duration) !== null && _a !== void 0 ? _a : this.duration;
|
|
49
50
|
this.selectedItem = item;
|
|
50
51
|
this.changeEvent.emit({ index: key });
|
|
51
52
|
}
|
|
@@ -80,9 +81,10 @@ export class MdsAccordionTimer {
|
|
|
80
81
|
componentDidLoad() {
|
|
81
82
|
this.children = this.element.querySelectorAll('mds-accordion-timer-item');
|
|
82
83
|
this.children.forEach((item, key) => {
|
|
84
|
+
var _a;
|
|
83
85
|
item.uuid = key;
|
|
84
86
|
if (item.selected) {
|
|
85
|
-
|
|
87
|
+
this.currentDuration = (_a = item.duration) !== null && _a !== void 0 ? _a : this.duration;
|
|
86
88
|
this.selectedItem = item;
|
|
87
89
|
}
|
|
88
90
|
});
|
|
@@ -137,7 +139,7 @@ export class MdsAccordionTimer {
|
|
|
137
139
|
this.playTimer();
|
|
138
140
|
}
|
|
139
141
|
render() {
|
|
140
|
-
return (h(Host, { key: '
|
|
142
|
+
return (h(Host, { key: '3070adf0c624fa3b640c04d0757a5b30ecb7ff91' }, h("slot", { key: '19cb85bc8ef2332a520c0124bdfd27c603d20005' })));
|
|
141
143
|
}
|
|
142
144
|
static get is() { return "mds-accordion-timer"; }
|
|
143
145
|
static get encapsulation() { return "shadow"; }
|
|
@@ -13,38 +13,49 @@ export default {
|
|
|
13
13
|
},
|
|
14
14
|
},
|
|
15
15
|
};
|
|
16
|
-
const Template = args => h("div", null, h("mds-accordion-timer", Object.assign({}, args), h("mds-accordion-timer-item", { selected: true, description: "Blipbug" }, h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa.")), h("mds-accordion-timer-item", { description: "Drednaw" }, h("mds-text", null, "Drednaw \u00E8 un Pok\u00E9mon quadrupede simile ad una tartaruga alligatore. Il corpo \u00E8 principalmente di colore turchese cos\u00EC come le zampe cilindriche e tozze, le quali terminano con tre unghie allungate e bianche. Sulle zampe anteriori, circa sulla loro met\u00E0, spuntanto delle protuberanze simili a scaglie di roccia color marroncino, ricorrenti anche nel resto del corpo: ad esempio, sul muso c'\u00E8 una protuberanza a zig-zag che ospita le sue narici; sulla coda sono alternate delle scaglie e attorno al guscio c'\u00E8 una cornice dello stesso colore; anche le placche superiori sembrano essere fatte di roccia, ma sono di un colore marrone scuro, invece che chiaro. Queste parti rocciose sembrano essere frastagliate, per niente levigate. Il suo volto presenta occhi bassi e imbronciati, con delle guance arancioni e sporgenti ed una bocca a zig-zag, la cui parte inferiore \u00E8 simile al beige, colore presente anche nelle placche del guscio inferiori, che stavolta fanno vedere la pelle a volte grinzosa del Pok\u00E9mon (in particolare attorno al collo e sulle zampe). Le sue scaglie di roccia sono spesso rivolte verso di dietro, dando l'idea di una roccia grezza e non liscia e lavorata.")), h("mds-accordion-timer-item", { description: "Orbeetle" }, h("mds-text", null, "Orbeetle presenta aspetti comuni ad una coccinella ormai matura. Il suo corpo si sviluppa attorno al guscio che \u00E8 di forma semisferica ed \u00E8 metallizzato in grigio (lo si pu\u00F2 vedere in particolare dalla parte inferiore di esso): la sua scocca \u00E8 rossa, con dei pois denim sopra di essa; \u00E8 bisezionata per permettere di aprirsi e attaccare con degli strani poteri. All'estremit\u00E0 del taglio intermedio \u00E8 incastonato il volto di Orbeetle, il quale presenta delle guance bianche con occhi imbronciati celesti, aventi sclere concentriche; sopra di essi ci sono due lunghe sopracciglia dorate a forma di \"V\" e ad incorniciare la faccia del Pok\u00E9mon \u00E8 una cornice grigia, che finisce, con delle striature, sul naso dello stesso. La bocca, assieme alle ginocchia e alla pancia, \u00E8 rossa. Il suo corpo \u00E8 piccolo ed \u00E8 costituito da una vita stretta con una bacino largo, da dove si sviluppano due cosce secche ed esili per poi finire con appuntiti gambali dorati; le sue braccia sono magre e biforcute, come se avessero artigli.")), h("mds-accordion-timer-item", { description: "Dottler" }, h("mds-text", null, "Dottler pu\u00F2 essere considerato la \"crisalide\" della linea evolutiva di Blipbug, vista la sua forma e il suo comportamento. Presenta un guscio di forma poligonale (molto simile a quella di un radar Doppler o di un radome) di color giallo sabbia, con dei pois blu scuro sugli spigoli; leggermente in basso \u00E8 presente la sua faccia di color arancione chiaro, sulla quale ci sono degli occhi celesti attorniati da un contorno arancione, da linee sottili e nere e da delle appendici blu simili a quelle dei Blipbug. Il Pok\u00E9mon non sembra essere dedito a muoversi se non fosse per le quattro zampette blu scuro su cui cammina.")), h("mds-accordion-timer-item", { description: "Centiskorch" }, h("mds-text", null, "Con l'evoluzione Sizzlipede diventa pi\u00F9 aggressivo, soprattutto grazie alla sua stazza pi\u00F9 grande e al suo enorme potenziale. Il corpo diventa pi\u00F9 lungo e si \"seziona\" in dodici parti, anche qui un'estremit\u00E0 \u00E8 la \"coda\" e l'altra \u00E8 la testa, queste due parti, assieme all'intera parte inferiore del corpo sono del rosso mattone presente nella sua pre-evo, mentre le \"parti\" comprese tra la coda e la testa restano marroni/bordeaux; questa volte, dello stesso colore della \"schiena\" sono le zampe, le quali son diventate pi\u00F9 minacciose e uncinate, questa volta sono dieci per ogni lato; marrone/bordeaux sono anche delle tenaglie. presenti in paia, sulla coda e sulla testa; su queste estremit\u00E0 son presenti quattro sbuffi o \"baffi\" di fuoco. Sulla testa \u00E8 presente un simbolo arancione chiaro a forma di punto esclamativo; stessa gamma cromatica \u00E8 presente nei segni circolari situati nella zona inferiore del corpo, i quali son formati, per\u00F2, anche da un anello e da un cerchio, pi\u00F9 interno, di colore giallo sabbia; non sono altro che i punti che Sizzlipede riscalda per attaccare e scottare le prede. I suoi occhi sono giallo elettrico con pupille triangolari color marrone e rovesciati."))));
|
|
17
|
-
const TemplateVariableDuration = args => h("div", null, h("mds-accordion-timer", Object.assign({}, args), h("mds-accordion-timer-item", { selected: true, description: "Blipbug", duration: 2000 }, h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa.")), h("mds-accordion-timer-item", { description: "Drednaw", duration: 6000 }, h("mds-text", null, "Drednaw \u00E8 un Pok\u00E9mon quadrupede simile ad una tartaruga alligatore. Il corpo \u00E8 principalmente di colore turchese cos\u00EC come le zampe cilindriche e tozze, le quali terminano con tre unghie allungate e bianche. Sulle zampe anteriori, circa sulla loro met\u00E0, spuntanto delle protuberanze simili a scaglie di roccia color marroncino, ricorrenti anche nel resto del corpo: ad esempio, sul muso c'\u00E8 una protuberanza a zig-zag che ospita le sue narici; sulla coda sono alternate delle scaglie e attorno al guscio c'\u00E8 una cornice dello stesso colore; anche le placche superiori sembrano essere fatte di roccia, ma sono di un colore marrone scuro, invece che chiaro. Queste parti rocciose sembrano essere frastagliate, per niente levigate. Il suo volto presenta occhi bassi e imbronciati, con delle guance arancioni e sporgenti ed una bocca a zig-zag, la cui parte inferiore \u00E8 simile al beige, colore presente anche nelle placche del guscio inferiori, che stavolta fanno vedere la pelle a volte grinzosa del Pok\u00E9mon (in particolare attorno al collo e sulle zampe). Le sue scaglie di roccia sono spesso rivolte verso di dietro, dando l'idea di una roccia grezza e non liscia e lavorata.")), h("mds-accordion-timer-item", { description: "Orbeetle", duration: 1000 }, h("mds-text", null, "Orbeetle presenta aspetti comuni ad una coccinella ormai matura. Il suo corpo si sviluppa attorno al guscio che \u00E8 di forma semisferica ed \u00E8 metallizzato in grigio (lo si pu\u00F2 vedere in particolare dalla parte inferiore di esso): la sua scocca \u00E8 rossa, con dei pois denim sopra di essa; \u00E8 bisezionata per permettere di aprirsi e attaccare con degli strani poteri. All'estremit\u00E0 del taglio intermedio \u00E8 incastonato il volto di Orbeetle, il quale presenta delle guance bianche con occhi imbronciati celesti, aventi sclere concentriche; sopra di essi ci sono due lunghe sopracciglia dorate a forma di \"V\" e ad incorniciare la faccia del Pok\u00E9mon \u00E8 una cornice grigia, che finisce, con delle striature, sul naso dello stesso. La bocca, assieme alle ginocchia e alla pancia, \u00E8 rossa. Il suo corpo \u00E8 piccolo ed \u00E8 costituito da una vita stretta con una bacino largo, da dove si sviluppano due cosce secche ed esili per poi finire con appuntiti gambali dorati; le sue braccia sono magre e biforcute, come se avessero artigli.")), h("mds-accordion-timer-item", { description: "Dottler" }, h("mds-text", null, "Dottler pu\u00F2 essere considerato la \"crisalide\" della linea evolutiva di Blipbug, vista la sua forma e il suo comportamento. Presenta un guscio di forma poligonale (molto simile a quella di un radar Doppler o di un radome) di color giallo sabbia, con dei pois blu scuro sugli spigoli; leggermente in basso \u00E8 presente la sua faccia di color arancione chiaro, sulla quale ci sono degli occhi celesti attorniati da un contorno arancione, da linee sottili e nere e da delle appendici blu simili a quelle dei Blipbug. Il Pok\u00E9mon non sembra essere dedito a muoversi se non fosse per le quattro zampette blu scuro su cui cammina.")), h("mds-accordion-timer-item", { description: "Centiskorch", duration: 6000 }, h("mds-text", null, "Con l'evoluzione Sizzlipede diventa pi\u00F9 aggressivo, soprattutto grazie alla sua stazza pi\u00F9 grande e al suo enorme potenziale. Il corpo diventa pi\u00F9 lungo e si \"seziona\" in dodici parti, anche qui un'estremit\u00E0 \u00E8 la \"coda\" e l'altra \u00E8 la testa, queste due parti, assieme all'intera parte inferiore del corpo sono del rosso mattone presente nella sua pre-evo, mentre le \"parti\" comprese tra la coda e la testa restano marroni/bordeaux; questa volte, dello stesso colore della \"schiena\" sono le zampe, le quali son diventate pi\u00F9 minacciose e uncinate, questa volta sono dieci per ogni lato; marrone/bordeaux sono anche delle tenaglie. presenti in paia, sulla coda e sulla testa; su queste estremit\u00E0 son presenti quattro sbuffi o \"baffi\" di fuoco. Sulla testa \u00E8 presente un simbolo arancione chiaro a forma di punto esclamativo; stessa gamma cromatica \u00E8 presente nei segni circolari situati nella zona inferiore del corpo, i quali son formati, per\u00F2, anche da un anello e da un cerchio, pi\u00F9 interno, di colore giallo sabbia; non sono altro che i punti che Sizzlipede riscalda per attaccare e scottare le prede. I suoi occhi sono giallo elettrico con pupille triangolari color marrone e rovesciati."))));
|
|
18
|
-
const TemplatePaused = args => h("div", null, h("mds-accordion-timer", Object.assign({}, args), h("mds-accordion-timer-item", { selected: true, description: "Blipbug" }, h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa.")), h("mds-accordion-timer-item", { description: "Drednaw" }, h("mds-text", null, "Drednaw \u00E8 un Pok\u00E9mon quadrupede simile ad una tartaruga alligatore. Il corpo \u00E8 principalmente di colore turchese cos\u00EC come le zampe cilindriche e tozze, le quali terminano con tre unghie allungate e bianche. Sulle zampe anteriori, circa sulla loro met\u00E0, spuntanto delle protuberanze simili a scaglie di roccia color marroncino, ricorrenti anche nel resto del corpo: ad esempio, sul muso c'\u00E8 una protuberanza a zig-zag che ospita le sue narici; sulla coda sono alternate delle scaglie e attorno al guscio c'\u00E8 una cornice dello stesso colore; anche le placche superiori sembrano essere fatte di roccia, ma sono di un colore marrone scuro, invece che chiaro. Queste parti rocciose sembrano essere frastagliate, per niente levigate. Il suo volto presenta occhi bassi e imbronciati, con delle guance arancioni e sporgenti ed una bocca a zig-zag, la cui parte inferiore \u00E8 simile al beige, colore presente anche nelle placche del guscio inferiori, che stavolta fanno vedere la pelle a volte grinzosa del Pok\u00E9mon (in particolare attorno al collo e sulle zampe). Le sue scaglie di roccia sono spesso rivolte verso di dietro, dando l'idea di una roccia grezza e non liscia e lavorata.")), h("mds-accordion-timer-item", { description: "Orbeetle" }, h("mds-text", null, "Orbeetle presenta aspetti comuni ad una coccinella ormai matura. Il suo corpo si sviluppa attorno al guscio che \u00E8 di forma semisferica ed \u00E8 metallizzato in grigio (lo si pu\u00F2 vedere in particolare dalla parte inferiore di esso): la sua scocca \u00E8 rossa, con dei pois denim sopra di essa; \u00E8 bisezionata per permettere di aprirsi e attaccare con degli strani poteri. All'estremit\u00E0 del taglio intermedio \u00E8 incastonato il volto di Orbeetle, il quale presenta delle guance bianche con occhi imbronciati celesti, aventi sclere concentriche; sopra di essi ci sono due lunghe sopracciglia dorate a forma di \"V\" e ad incorniciare la faccia del Pok\u00E9mon \u00E8 una cornice grigia, che finisce, con delle striature, sul naso dello stesso. La bocca, assieme alle ginocchia e alla pancia, \u00E8 rossa. Il suo corpo \u00E8 piccolo ed \u00E8 costituito da una vita stretta con una bacino largo, da dove si sviluppano due cosce secche ed esili per poi finire con appuntiti gambali dorati; le sue braccia sono magre e biforcute, come se avessero artigli.")), h("mds-accordion-timer-item", { description: "Dottler" }, h("mds-text", null, "Dottler pu\u00F2 essere considerato la \"crisalide\" della linea evolutiva di Blipbug, vista la sua forma e il suo comportamento. Presenta un guscio di forma poligonale (molto simile a quella di un radar Doppler o di un radome) di color giallo sabbia, con dei pois blu scuro sugli spigoli; leggermente in basso \u00E8 presente la sua faccia di color arancione chiaro, sulla quale ci sono degli occhi celesti attorniati da un contorno arancione, da linee sottili e nere e da delle appendici blu simili a quelle dei Blipbug. Il Pok\u00E9mon non sembra essere dedito a muoversi se non fosse per le quattro zampette blu scuro su cui cammina.")), h("mds-accordion-timer-item", { description: "Centiskorch" }, h("mds-text", null, "Con l'evoluzione Sizzlipede diventa pi\u00F9 aggressivo, soprattutto grazie alla sua stazza pi\u00F9 grande e al suo enorme potenziale. Il corpo diventa pi\u00F9 lungo e si \"seziona\" in dodici parti, anche qui un'estremit\u00E0 \u00E8 la \"coda\" e l'altra \u00E8 la testa, queste due parti, assieme all'intera parte inferiore del corpo sono del rosso mattone presente nella sua pre-evo, mentre le \"parti\" comprese tra la coda e la testa restano marroni/bordeaux; questa volte, dello stesso colore della \"schiena\" sono le zampe, le quali son diventate pi\u00F9 minacciose e uncinate, questa volta sono dieci per ogni lato; marrone/bordeaux sono anche delle tenaglie. presenti in paia, sulla coda e sulla testa; su queste estremit\u00E0 son presenti quattro sbuffi o \"baffi\" di fuoco. Sulla testa \u00E8 presente un simbolo arancione chiaro a forma di punto esclamativo; stessa gamma cromatica \u00E8 presente nei segni circolari situati nella zona inferiore del corpo, i quali son formati, per\u00F2, anche da un anello e da un cerchio, pi\u00F9 interno, di colore giallo sabbia; non sono altro che i punti che Sizzlipede riscalda per attaccare e scottare le prede. I suoi occhi sono giallo elettrico con pupille triangolari color marrone e rovesciati."))));
|
|
16
|
+
const Template = args => (h("div", null, h("mds-accordion-timer", Object.assign({}, args), h("mds-accordion-timer-item", { selected: true, description: "Blipbug" }, h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa.")), h("mds-accordion-timer-item", { description: "Drednaw" }, h("mds-text", null, "Drednaw \u00E8 un Pok\u00E9mon quadrupede simile ad una tartaruga alligatore. Il corpo \u00E8 principalmente di colore turchese cos\u00EC come le zampe cilindriche e tozze, le quali terminano con tre unghie allungate e bianche. Sulle zampe anteriori, circa sulla loro met\u00E0, spuntanto delle protuberanze simili a scaglie di roccia color marroncino, ricorrenti anche nel resto del corpo: ad esempio, sul muso c'\u00E8 una protuberanza a zig-zag che ospita le sue narici; sulla coda sono alternate delle scaglie e attorno al guscio c'\u00E8 una cornice dello stesso colore; anche le placche superiori sembrano essere fatte di roccia, ma sono di un colore marrone scuro, invece che chiaro. Queste parti rocciose sembrano essere frastagliate, per niente levigate. Il suo volto presenta occhi bassi e imbronciati, con delle guance arancioni e sporgenti ed una bocca a zig-zag, la cui parte inferiore \u00E8 simile al beige, colore presente anche nelle placche del guscio inferiori, che stavolta fanno vedere la pelle a volte grinzosa del Pok\u00E9mon (in particolare attorno al collo e sulle zampe). Le sue scaglie di roccia sono spesso rivolte verso di dietro, dando l'idea di una roccia grezza e non liscia e lavorata.")), h("mds-accordion-timer-item", { description: "Orbeetle" }, h("mds-text", null, "Orbeetle presenta aspetti comuni ad una coccinella ormai matura. Il suo corpo si sviluppa attorno al guscio che \u00E8 di forma semisferica ed \u00E8 metallizzato in grigio (lo si pu\u00F2 vedere in particolare dalla parte inferiore di esso): la sua scocca \u00E8 rossa, con dei pois denim sopra di essa; \u00E8 bisezionata per permettere di aprirsi e attaccare con degli strani poteri. All'estremit\u00E0 del taglio intermedio \u00E8 incastonato il volto di Orbeetle, il quale presenta delle guance bianche con occhi imbronciati celesti, aventi sclere concentriche; sopra di essi ci sono due lunghe sopracciglia dorate a forma di \"V\" e ad incorniciare la faccia del Pok\u00E9mon \u00E8 una cornice grigia, che finisce, con delle striature, sul naso dello stesso. La bocca, assieme alle ginocchia e alla pancia, \u00E8 rossa. Il suo corpo \u00E8 piccolo ed \u00E8 costituito da una vita stretta con una bacino largo, da dove si sviluppano due cosce secche ed esili per poi finire con appuntiti gambali dorati; le sue braccia sono magre e biforcute, come se avessero artigli.")), h("mds-accordion-timer-item", { description: "Dottler" }, h("mds-text", null, "Dottler pu\u00F2 essere considerato la \"crisalide\" della linea evolutiva di Blipbug, vista la sua forma e il suo comportamento. Presenta un guscio di forma poligonale (molto simile a quella di un radar Doppler o di un radome) di color giallo sabbia, con dei pois blu scuro sugli spigoli; leggermente in basso \u00E8 presente la sua faccia di color arancione chiaro, sulla quale ci sono degli occhi celesti attorniati da un contorno arancione, da linee sottili e nere e da delle appendici blu simili a quelle dei Blipbug. Il Pok\u00E9mon non sembra essere dedito a muoversi se non fosse per le quattro zampette blu scuro su cui cammina.")), h("mds-accordion-timer-item", { description: "Centiskorch" }, h("mds-text", null, "Con l'evoluzione Sizzlipede diventa pi\u00F9 aggressivo, soprattutto grazie alla sua stazza pi\u00F9 grande e al suo enorme potenziale. Il corpo diventa pi\u00F9 lungo e si \"seziona\" in dodici parti, anche qui un'estremit\u00E0 \u00E8 la \"coda\" e l'altra \u00E8 la testa, queste due parti, assieme all'intera parte inferiore del corpo sono del rosso mattone presente nella sua pre-evo, mentre le \"parti\" comprese tra la coda e la testa restano marroni/bordeaux; questa volte, dello stesso colore della \"schiena\" sono le zampe, le quali son diventate pi\u00F9 minacciose e uncinate, questa volta sono dieci per ogni lato; marrone/bordeaux sono anche delle tenaglie. presenti in paia, sulla coda e sulla testa; su queste estremit\u00E0 son presenti quattro sbuffi o \"baffi\" di fuoco. Sulla testa \u00E8 presente un simbolo arancione chiaro a forma di punto esclamativo; stessa gamma cromatica \u00E8 presente nei segni circolari situati nella zona inferiore del corpo, i quali son formati, per\u00F2, anche da un anello e da un cerchio, pi\u00F9 interno, di colore giallo sabbia; non sono altro che i punti che Sizzlipede riscalda per attaccare e scottare le prede. I suoi occhi sono giallo elettrico con pupille triangolari color marrone e rovesciati.")))));
|
|
17
|
+
const TemplateVariableDuration = args => (h("div", null, h("mds-accordion-timer", Object.assign({}, args), h("mds-accordion-timer-item", { selected: true, description: "Blipbug", duration: 2000 }, h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa.")), h("mds-accordion-timer-item", { description: "Drednaw", duration: 6000 }, h("mds-text", null, "Drednaw \u00E8 un Pok\u00E9mon quadrupede simile ad una tartaruga alligatore. Il corpo \u00E8 principalmente di colore turchese cos\u00EC come le zampe cilindriche e tozze, le quali terminano con tre unghie allungate e bianche. Sulle zampe anteriori, circa sulla loro met\u00E0, spuntanto delle protuberanze simili a scaglie di roccia color marroncino, ricorrenti anche nel resto del corpo: ad esempio, sul muso c'\u00E8 una protuberanza a zig-zag che ospita le sue narici; sulla coda sono alternate delle scaglie e attorno al guscio c'\u00E8 una cornice dello stesso colore; anche le placche superiori sembrano essere fatte di roccia, ma sono di un colore marrone scuro, invece che chiaro. Queste parti rocciose sembrano essere frastagliate, per niente levigate. Il suo volto presenta occhi bassi e imbronciati, con delle guance arancioni e sporgenti ed una bocca a zig-zag, la cui parte inferiore \u00E8 simile al beige, colore presente anche nelle placche del guscio inferiori, che stavolta fanno vedere la pelle a volte grinzosa del Pok\u00E9mon (in particolare attorno al collo e sulle zampe). Le sue scaglie di roccia sono spesso rivolte verso di dietro, dando l'idea di una roccia grezza e non liscia e lavorata.")), h("mds-accordion-timer-item", { description: "Orbeetle", duration: 1000 }, h("mds-text", null, "Orbeetle presenta aspetti comuni ad una coccinella ormai matura. Il suo corpo si sviluppa attorno al guscio che \u00E8 di forma semisferica ed \u00E8 metallizzato in grigio (lo si pu\u00F2 vedere in particolare dalla parte inferiore di esso): la sua scocca \u00E8 rossa, con dei pois denim sopra di essa; \u00E8 bisezionata per permettere di aprirsi e attaccare con degli strani poteri. All'estremit\u00E0 del taglio intermedio \u00E8 incastonato il volto di Orbeetle, il quale presenta delle guance bianche con occhi imbronciati celesti, aventi sclere concentriche; sopra di essi ci sono due lunghe sopracciglia dorate a forma di \"V\" e ad incorniciare la faccia del Pok\u00E9mon \u00E8 una cornice grigia, che finisce, con delle striature, sul naso dello stesso. La bocca, assieme alle ginocchia e alla pancia, \u00E8 rossa. Il suo corpo \u00E8 piccolo ed \u00E8 costituito da una vita stretta con una bacino largo, da dove si sviluppano due cosce secche ed esili per poi finire con appuntiti gambali dorati; le sue braccia sono magre e biforcute, come se avessero artigli.")), h("mds-accordion-timer-item", { description: "Dottler" }, h("mds-text", null, "Dottler pu\u00F2 essere considerato la \"crisalide\" della linea evolutiva di Blipbug, vista la sua forma e il suo comportamento. Presenta un guscio di forma poligonale (molto simile a quella di un radar Doppler o di un radome) di color giallo sabbia, con dei pois blu scuro sugli spigoli; leggermente in basso \u00E8 presente la sua faccia di color arancione chiaro, sulla quale ci sono degli occhi celesti attorniati da un contorno arancione, da linee sottili e nere e da delle appendici blu simili a quelle dei Blipbug. Il Pok\u00E9mon non sembra essere dedito a muoversi se non fosse per le quattro zampette blu scuro su cui cammina.")), h("mds-accordion-timer-item", { description: "Centiskorch", duration: 6000 }, h("mds-text", null, "Con l'evoluzione Sizzlipede diventa pi\u00F9 aggressivo, soprattutto grazie alla sua stazza pi\u00F9 grande e al suo enorme potenziale. Il corpo diventa pi\u00F9 lungo e si \"seziona\" in dodici parti, anche qui un'estremit\u00E0 \u00E8 la \"coda\" e l'altra \u00E8 la testa, queste due parti, assieme all'intera parte inferiore del corpo sono del rosso mattone presente nella sua pre-evo, mentre le \"parti\" comprese tra la coda e la testa restano marroni/bordeaux; questa volte, dello stesso colore della \"schiena\" sono le zampe, le quali son diventate pi\u00F9 minacciose e uncinate, questa volta sono dieci per ogni lato; marrone/bordeaux sono anche delle tenaglie. presenti in paia, sulla coda e sulla testa; su queste estremit\u00E0 son presenti quattro sbuffi o \"baffi\" di fuoco. Sulla testa \u00E8 presente un simbolo arancione chiaro a forma di punto esclamativo; stessa gamma cromatica \u00E8 presente nei segni circolari situati nella zona inferiore del corpo, i quali son formati, per\u00F2, anche da un anello e da un cerchio, pi\u00F9 interno, di colore giallo sabbia; non sono altro che i punti che Sizzlipede riscalda per attaccare e scottare le prede. I suoi occhi sono giallo elettrico con pupille triangolari color marrone e rovesciati.")))));
|
|
19
18
|
const TemplateClickPaused = args => {
|
|
20
19
|
const startSecond = () => {
|
|
21
20
|
const elements = document.querySelectorAll('mds-accordion-timer-item');
|
|
21
|
+
// eslint-disable-next-line prefer-destructuring
|
|
22
22
|
const elemSecond = elements[1];
|
|
23
23
|
elemSecond.selected = true;
|
|
24
24
|
};
|
|
25
|
-
return h("div", null, h("div", null, h("mds-button", { onClick: startSecond }, "Start second element")), h("mds-accordion-timer", Object.assign({}, args), h("mds-accordion-timer-item", { selected: true, description: "Blipbug" }, h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa.")), h("mds-accordion-timer-item", { description: "Drednaw" }, h("mds-text", null, "Drednaw \u00E8 un Pok\u00E9mon quadrupede simile ad una tartaruga alligatore. Il corpo \u00E8 principalmente di colore turchese cos\u00EC come le zampe cilindriche e tozze, le quali terminano con tre unghie allungate e bianche. Sulle zampe anteriori, circa sulla loro met\u00E0, spuntanto delle protuberanze simili a scaglie di roccia color marroncino, ricorrenti anche nel resto del corpo: ad esempio, sul muso c'\u00E8 una protuberanza a zig-zag che ospita le sue narici; sulla coda sono alternate delle scaglie e attorno al guscio c'\u00E8 una cornice dello stesso colore; anche le placche superiori sembrano essere fatte di roccia, ma sono di un colore marrone scuro, invece che chiaro. Queste parti rocciose sembrano essere frastagliate, per niente levigate. Il suo volto presenta occhi bassi e imbronciati, con delle guance arancioni e sporgenti ed una bocca a zig-zag, la cui parte inferiore \u00E8 simile al beige, colore presente anche nelle placche del guscio inferiori, che stavolta fanno vedere la pelle a volte grinzosa del Pok\u00E9mon (in particolare attorno al collo e sulle zampe). Le sue scaglie di roccia sono spesso rivolte verso di dietro, dando l'idea di una roccia grezza e non liscia e lavorata.")), h("mds-accordion-timer-item", { description: "Orbeetle" }, h("mds-text", null, "Orbeetle presenta aspetti comuni ad una coccinella ormai matura. Il suo corpo si sviluppa attorno al guscio che \u00E8 di forma semisferica ed \u00E8 metallizzato in grigio (lo si pu\u00F2 vedere in particolare dalla parte inferiore di esso): la sua scocca \u00E8 rossa, con dei pois denim sopra di essa; \u00E8 bisezionata per permettere di aprirsi e attaccare con degli strani poteri. All'estremit\u00E0 del taglio intermedio \u00E8 incastonato il volto di Orbeetle, il quale presenta delle guance bianche con occhi imbronciati celesti, aventi sclere concentriche; sopra di essi ci sono due lunghe sopracciglia dorate a forma di \"V\" e ad incorniciare la faccia del Pok\u00E9mon \u00E8 una cornice grigia, che finisce, con delle striature, sul naso dello stesso. La bocca, assieme alle ginocchia e alla pancia, \u00E8 rossa. Il suo corpo \u00E8 piccolo ed \u00E8 costituito da una vita stretta con una bacino largo, da dove si sviluppano due cosce secche ed esili per poi finire con appuntiti gambali dorati; le sue braccia sono magre e biforcute, come se avessero artigli.")), h("mds-accordion-timer-item", { description: "Dottler" }, h("mds-text", null, "Dottler pu\u00F2 essere considerato la \"crisalide\" della linea evolutiva di Blipbug, vista la sua forma e il suo comportamento. Presenta un guscio di forma poligonale (molto simile a quella di un radar Doppler o di un radome) di color giallo sabbia, con dei pois blu scuro sugli spigoli; leggermente in basso \u00E8 presente la sua faccia di color arancione chiaro, sulla quale ci sono degli occhi celesti attorniati da un contorno arancione, da linee sottili e nere e da delle appendici blu simili a quelle dei Blipbug. Il Pok\u00E9mon non sembra essere dedito a muoversi se non fosse per le quattro zampette blu scuro su cui cammina.")), h("mds-accordion-timer-item", { description: "Centiskorch" }, h("mds-text", null, "Con l'evoluzione Sizzlipede diventa pi\u00F9 aggressivo, soprattutto grazie alla sua stazza pi\u00F9 grande e al suo enorme potenziale. Il corpo diventa pi\u00F9 lungo e si \"seziona\" in dodici parti, anche qui un'estremit\u00E0 \u00E8 la \"coda\" e l'altra \u00E8 la testa, queste due parti, assieme all'intera parte inferiore del corpo sono del rosso mattone presente nella sua pre-evo, mentre le \"parti\" comprese tra la coda e la testa restano marroni/bordeaux; questa volte, dello stesso colore della \"schiena\" sono le zampe, le quali son diventate pi\u00F9 minacciose e uncinate, questa volta sono dieci per ogni lato; marrone/bordeaux sono anche delle tenaglie. presenti in paia, sulla coda e sulla testa; su queste estremit\u00E0 son presenti quattro sbuffi o \"baffi\" di fuoco. Sulla testa \u00E8 presente un simbolo arancione chiaro a forma di punto esclamativo; stessa gamma cromatica \u00E8 presente nei segni circolari situati nella zona inferiore del corpo, i quali son formati, per\u00F2, anche da un anello e da un cerchio, pi\u00F9 interno, di colore giallo sabbia; non sono altro che i punti che Sizzlipede riscalda per attaccare e scottare le prede. I suoi occhi sono giallo elettrico con pupille triangolari color marrone e rovesciati."))));
|
|
26
|
-
};
|
|
27
|
-
export const Default =
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
};
|
|
38
|
-
export const
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
25
|
+
return (h("div", null, h("div", null, h("mds-button", { onClick: startSecond }, "Start second element")), h("mds-accordion-timer", Object.assign({}, args), h("mds-accordion-timer-item", { selected: true, description: "Blipbug" }, h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa.")), h("mds-accordion-timer-item", { description: "Drednaw" }, h("mds-text", null, "Drednaw \u00E8 un Pok\u00E9mon quadrupede simile ad una tartaruga alligatore. Il corpo \u00E8 principalmente di colore turchese cos\u00EC come le zampe cilindriche e tozze, le quali terminano con tre unghie allungate e bianche. Sulle zampe anteriori, circa sulla loro met\u00E0, spuntanto delle protuberanze simili a scaglie di roccia color marroncino, ricorrenti anche nel resto del corpo: ad esempio, sul muso c'\u00E8 una protuberanza a zig-zag che ospita le sue narici; sulla coda sono alternate delle scaglie e attorno al guscio c'\u00E8 una cornice dello stesso colore; anche le placche superiori sembrano essere fatte di roccia, ma sono di un colore marrone scuro, invece che chiaro. Queste parti rocciose sembrano essere frastagliate, per niente levigate. Il suo volto presenta occhi bassi e imbronciati, con delle guance arancioni e sporgenti ed una bocca a zig-zag, la cui parte inferiore \u00E8 simile al beige, colore presente anche nelle placche del guscio inferiori, che stavolta fanno vedere la pelle a volte grinzosa del Pok\u00E9mon (in particolare attorno al collo e sulle zampe). Le sue scaglie di roccia sono spesso rivolte verso di dietro, dando l'idea di una roccia grezza e non liscia e lavorata.")), h("mds-accordion-timer-item", { description: "Orbeetle" }, h("mds-text", null, "Orbeetle presenta aspetti comuni ad una coccinella ormai matura. Il suo corpo si sviluppa attorno al guscio che \u00E8 di forma semisferica ed \u00E8 metallizzato in grigio (lo si pu\u00F2 vedere in particolare dalla parte inferiore di esso): la sua scocca \u00E8 rossa, con dei pois denim sopra di essa; \u00E8 bisezionata per permettere di aprirsi e attaccare con degli strani poteri. All'estremit\u00E0 del taglio intermedio \u00E8 incastonato il volto di Orbeetle, il quale presenta delle guance bianche con occhi imbronciati celesti, aventi sclere concentriche; sopra di essi ci sono due lunghe sopracciglia dorate a forma di \"V\" e ad incorniciare la faccia del Pok\u00E9mon \u00E8 una cornice grigia, che finisce, con delle striature, sul naso dello stesso. La bocca, assieme alle ginocchia e alla pancia, \u00E8 rossa. Il suo corpo \u00E8 piccolo ed \u00E8 costituito da una vita stretta con una bacino largo, da dove si sviluppano due cosce secche ed esili per poi finire con appuntiti gambali dorati; le sue braccia sono magre e biforcute, come se avessero artigli.")), h("mds-accordion-timer-item", { description: "Dottler" }, h("mds-text", null, "Dottler pu\u00F2 essere considerato la \"crisalide\" della linea evolutiva di Blipbug, vista la sua forma e il suo comportamento. Presenta un guscio di forma poligonale (molto simile a quella di un radar Doppler o di un radome) di color giallo sabbia, con dei pois blu scuro sugli spigoli; leggermente in basso \u00E8 presente la sua faccia di color arancione chiaro, sulla quale ci sono degli occhi celesti attorniati da un contorno arancione, da linee sottili e nere e da delle appendici blu simili a quelle dei Blipbug. Il Pok\u00E9mon non sembra essere dedito a muoversi se non fosse per le quattro zampette blu scuro su cui cammina.")), h("mds-accordion-timer-item", { description: "Centiskorch" }, h("mds-text", null, "Con l'evoluzione Sizzlipede diventa pi\u00F9 aggressivo, soprattutto grazie alla sua stazza pi\u00F9 grande e al suo enorme potenziale. Il corpo diventa pi\u00F9 lungo e si \"seziona\" in dodici parti, anche qui un'estremit\u00E0 \u00E8 la \"coda\" e l'altra \u00E8 la testa, queste due parti, assieme all'intera parte inferiore del corpo sono del rosso mattone presente nella sua pre-evo, mentre le \"parti\" comprese tra la coda e la testa restano marroni/bordeaux; questa volte, dello stesso colore della \"schiena\" sono le zampe, le quali son diventate pi\u00F9 minacciose e uncinate, questa volta sono dieci per ogni lato; marrone/bordeaux sono anche delle tenaglie. presenti in paia, sulla coda e sulla testa; su queste estremit\u00E0 son presenti quattro sbuffi o \"baffi\" di fuoco. Sulla testa \u00E8 presente un simbolo arancione chiaro a forma di punto esclamativo; stessa gamma cromatica \u00E8 presente nei segni circolari situati nella zona inferiore del corpo, i quali son formati, per\u00F2, anche da un anello e da un cerchio, pi\u00F9 interno, di colore giallo sabbia; non sono altro che i punti che Sizzlipede riscalda per attaccare e scottare le prede. I suoi occhi sono giallo elettrico con pupille triangolari color marrone e rovesciati.")))));
|
|
26
|
+
};
|
|
27
|
+
export const Default = {
|
|
28
|
+
render: Template,
|
|
29
|
+
story: lokiDisabled,
|
|
30
|
+
};
|
|
31
|
+
export const Duration = {
|
|
32
|
+
render: Template,
|
|
33
|
+
args: {
|
|
34
|
+
duration: 1000,
|
|
35
|
+
},
|
|
36
|
+
story: lokiDisabled,
|
|
37
|
+
};
|
|
38
|
+
export const VariableDuration = {
|
|
39
|
+
render: TemplateVariableDuration,
|
|
40
|
+
args: {
|
|
41
|
+
duration: 3000,
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
export const Paused = {
|
|
45
|
+
render: Template,
|
|
46
|
+
args: {
|
|
47
|
+
paused: true,
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
export const Programmatic = {
|
|
51
|
+
render: TemplateClickPaused,
|
|
52
|
+
args: {
|
|
53
|
+
paused: true,
|
|
54
|
+
},
|
|
55
|
+
};
|
|
56
|
+
export const LokiTest = {
|
|
57
|
+
render: Template,
|
|
58
|
+
args: {
|
|
59
|
+
duration: 0,
|
|
60
|
+
},
|
|
50
61
|
};
|
|
@@ -11,12 +11,27 @@ const buttonVariantDictionary = [
|
|
|
11
11
|
'success',
|
|
12
12
|
'warning',
|
|
13
13
|
];
|
|
14
|
+
const buttonDropdownVariantDictionary = [
|
|
15
|
+
'ai',
|
|
16
|
+
'dark',
|
|
17
|
+
'error',
|
|
18
|
+
'info',
|
|
19
|
+
'light',
|
|
20
|
+
'primary',
|
|
21
|
+
'secondary',
|
|
22
|
+
'success',
|
|
23
|
+
'warning',
|
|
24
|
+
];
|
|
14
25
|
const buttonToneVariantDictionary = [
|
|
15
26
|
'strong',
|
|
16
27
|
'weak',
|
|
17
28
|
'ghost',
|
|
18
29
|
'quiet',
|
|
19
30
|
];
|
|
31
|
+
const buttonToneMinimalVariantDictionary = [
|
|
32
|
+
'strong',
|
|
33
|
+
'weak',
|
|
34
|
+
];
|
|
20
35
|
const buttonTargetDictionary = [
|
|
21
36
|
'blank',
|
|
22
37
|
'self',
|
|
@@ -27,6 +42,10 @@ const buttonSizeDictionary = [
|
|
|
27
42
|
'lg',
|
|
28
43
|
'xl',
|
|
29
44
|
];
|
|
45
|
+
const tabSizeDictionary = [
|
|
46
|
+
'sm',
|
|
47
|
+
'md',
|
|
48
|
+
];
|
|
30
49
|
const buttonIconPositionDictionary = [
|
|
31
50
|
'left',
|
|
32
51
|
'right',
|
|
@@ -36,4 +55,4 @@ const buttonTypeDictionary = [
|
|
|
36
55
|
'submit',
|
|
37
56
|
'reset',
|
|
38
57
|
];
|
|
39
|
-
export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonTypeDictionary, buttonVariantDictionary, };
|
|
58
|
+
export { buttonDropdownVariantDictionary, buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneMinimalVariantDictionary, buttonToneVariantDictionary, buttonTypeDictionary, buttonVariantDictionary, tabSizeDictionary, };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import jsonIconsDictionary from "../fixtures/icons.json";
|
|
2
|
-
import jsonMggIconsDictionary from "
|
|
2
|
+
import jsonMggIconsDictionary from "@maggioli-design-system/svg-icons/dist/iconsauce.json";
|
|
3
3
|
const iconsDictionary = jsonIconsDictionary;
|
|
4
4
|
const mggIconsDictionary = jsonMggIconsDictionary;
|
|
5
5
|
const svgIconsDictionary = [
|
|
@@ -18,6 +18,14 @@ const themeStatusVariantDictionary = [
|
|
|
18
18
|
'success',
|
|
19
19
|
'warning',
|
|
20
20
|
];
|
|
21
|
+
const themeInputVariantDictionary = [
|
|
22
|
+
'ai',
|
|
23
|
+
'error',
|
|
24
|
+
'info',
|
|
25
|
+
'primary',
|
|
26
|
+
'success',
|
|
27
|
+
'warning',
|
|
28
|
+
];
|
|
21
29
|
const themeFullVariantDictionary = [
|
|
22
30
|
'amaranth',
|
|
23
31
|
'aqua',
|
|
@@ -113,4 +121,4 @@ const toneMinimalVariantDictionary = [
|
|
|
113
121
|
'strong',
|
|
114
122
|
'weak',
|
|
115
123
|
];
|
|
116
|
-
export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary,
|
|
124
|
+
export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeInputVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantChipDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneSmartVariantDictionary, toneVariantDictionary, };
|
|
@@ -48,9 +48,10 @@ const MdsAccordionTimer$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccordionT
|
|
|
48
48
|
};
|
|
49
49
|
this.setSelectedItem = (uuid) => {
|
|
50
50
|
this.children.forEach((item, key) => {
|
|
51
|
+
var _a;
|
|
51
52
|
if (key === uuid) {
|
|
52
53
|
item.selected = true;
|
|
53
|
-
|
|
54
|
+
this.currentDuration = (_a = item.duration) !== null && _a !== void 0 ? _a : this.duration;
|
|
54
55
|
this.selectedItem = item;
|
|
55
56
|
this.changeEvent.emit({ index: key });
|
|
56
57
|
}
|
|
@@ -85,9 +86,10 @@ const MdsAccordionTimer$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccordionT
|
|
|
85
86
|
componentDidLoad() {
|
|
86
87
|
this.children = this.element.querySelectorAll('mds-accordion-timer-item');
|
|
87
88
|
this.children.forEach((item, key) => {
|
|
89
|
+
var _a;
|
|
88
90
|
item.uuid = key;
|
|
89
91
|
if (item.selected) {
|
|
90
|
-
|
|
92
|
+
this.currentDuration = (_a = item.duration) !== null && _a !== void 0 ? _a : this.duration;
|
|
91
93
|
this.selectedItem = item;
|
|
92
94
|
}
|
|
93
95
|
});
|
|
@@ -142,7 +144,7 @@ const MdsAccordionTimer$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccordionT
|
|
|
142
144
|
this.playTimer();
|
|
143
145
|
}
|
|
144
146
|
render() {
|
|
145
|
-
return (h(Host, { key: '
|
|
147
|
+
return (h(Host, { key: '3070adf0c624fa3b640c04d0757a5b30ecb7ff91' }, h("slot", { key: '19cb85bc8ef2332a520c0124bdfd27c603d20005' })));
|
|
146
148
|
}
|
|
147
149
|
get element() { return this; }
|
|
148
150
|
static get watchers() { return {
|
package/dist/documentation.json
CHANGED
|
@@ -46,9 +46,10 @@ const MdsAccordionTimer = class {
|
|
|
46
46
|
};
|
|
47
47
|
this.setSelectedItem = (uuid) => {
|
|
48
48
|
this.children.forEach((item, key) => {
|
|
49
|
+
var _a;
|
|
49
50
|
if (key === uuid) {
|
|
50
51
|
item.selected = true;
|
|
51
|
-
|
|
52
|
+
this.currentDuration = (_a = item.duration) !== null && _a !== void 0 ? _a : this.duration;
|
|
52
53
|
this.selectedItem = item;
|
|
53
54
|
this.changeEvent.emit({ index: key });
|
|
54
55
|
}
|
|
@@ -83,9 +84,10 @@ const MdsAccordionTimer = class {
|
|
|
83
84
|
componentDidLoad() {
|
|
84
85
|
this.children = this.element.querySelectorAll('mds-accordion-timer-item');
|
|
85
86
|
this.children.forEach((item, key) => {
|
|
87
|
+
var _a;
|
|
86
88
|
item.uuid = key;
|
|
87
89
|
if (item.selected) {
|
|
88
|
-
|
|
90
|
+
this.currentDuration = (_a = item.duration) !== null && _a !== void 0 ? _a : this.duration;
|
|
89
91
|
this.selectedItem = item;
|
|
90
92
|
}
|
|
91
93
|
});
|
|
@@ -140,7 +142,7 @@ const MdsAccordionTimer = class {
|
|
|
140
142
|
this.playTimer();
|
|
141
143
|
}
|
|
142
144
|
render() {
|
|
143
|
-
return (h(Host, { key: '
|
|
145
|
+
return (h(Host, { key: '3070adf0c624fa3b640c04d0757a5b30ecb7ff91' }, h("slot", { key: '19cb85bc8ef2332a520c0124bdfd27c603d20005' })));
|
|
144
146
|
}
|
|
145
147
|
get element() { return getElement(this); }
|
|
146
148
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-461ad561.js";var mdsAccordionTimerCss=":host{--mds-accordion-timer-progress-bar-color:rgb(var(--tone-neutral-03));--mds-accordion-timer-progress-bar-background:rgb(var(--tone-neutral-08));--mds-accordion-timer-progress-bar-thickness:0.25rem;--mds-accordion-timer-duration:500ms;display:block}:host-context(.pref-animation-reduce){--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration, 0s)}@media (prefers-reduced-motion){:host-context(.pref-animation-system){--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration, 0s)}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";var MdsAccordionTimerStyle0=mdsAccordionTimerCss;var MdsAccordionTimer=function(){function d(d){var t=this;registerInstance(this,d);this.changeEvent=createEvent(this,"mdsAccordionTimerChange",7);this.currentDuration=0;this.time=0;this.duration=1e4;this.clearIntervals=function(){if(typeof window!=="undefined"){window.clearInterval(t.timeChecker)}t.timeChecker=0};this.remainingTime=function(){var d=t.selectedItemRemainingTime-((new Date).getTime()-t.timeStarted);return d>=0?d:0};this.progress=function(){return Math.abs(t.remainingTime()/t.currentDuration-1)};this.addTimeListener=function(){if(typeof window!=="undefined"){t.timeChecker=window.setInterval((function(){var d=t.progress();if(t.selectedItem!==undefined){t.selectedItem.progress=d}if(d===1){t.selectedItem.progress=0;t.startNext()}}),100)}};this.beginningTime=function(){t.timeStarted=(new Date).getTime();return t.timeStarted};this.setSelectedItem=function(d){t.children.forEach((function(e,r){if(r===d){e.selected=true;
|
|
1
|
+
import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-461ad561.js";var mdsAccordionTimerCss=":host{--mds-accordion-timer-progress-bar-color:rgb(var(--tone-neutral-03));--mds-accordion-timer-progress-bar-background:rgb(var(--tone-neutral-08));--mds-accordion-timer-progress-bar-thickness:0.25rem;--mds-accordion-timer-duration:500ms;display:block}:host-context(.pref-animation-reduce){--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration, 0s)}@media (prefers-reduced-motion){:host-context(.pref-animation-system){--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration, 0s)}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";var MdsAccordionTimerStyle0=mdsAccordionTimerCss;var MdsAccordionTimer=function(){function d(d){var t=this;registerInstance(this,d);this.changeEvent=createEvent(this,"mdsAccordionTimerChange",7);this.currentDuration=0;this.time=0;this.duration=1e4;this.clearIntervals=function(){if(typeof window!=="undefined"){window.clearInterval(t.timeChecker)}t.timeChecker=0};this.remainingTime=function(){var d=t.selectedItemRemainingTime-((new Date).getTime()-t.timeStarted);return d>=0?d:0};this.progress=function(){return Math.abs(t.remainingTime()/t.currentDuration-1)};this.addTimeListener=function(){if(typeof window!=="undefined"){t.timeChecker=window.setInterval((function(){var d=t.progress();if(t.selectedItem!==undefined){t.selectedItem.progress=d}if(d===1){t.selectedItem.progress=0;t.startNext()}}),100)}};this.beginningTime=function(){t.timeStarted=(new Date).getTime();return t.timeStarted};this.setSelectedItem=function(d){t.children.forEach((function(e,r){var a;if(r===d){e.selected=true;t.currentDuration=(a=e.duration)!==null&&a!==void 0?a:t.duration;t.selectedItem=e;t.changeEvent.emit({index:r})}else{e.selected=false}}))};this.startNext=function(){var d=t.selectedItem.uuid+1>t.children.length-1?0:t.selectedItem.uuid+1;t.setSelectedItem(d);t.startTimer()};this.startTimer=function(){t.clearIntervals();t.time=t.beginningTime();t.selectedItemRemainingTime=t.currentDuration;t.addTimeListener()};this.playTimer=function(){t.beginningTime();t.addTimeListener()};this.pauseTimer=function(){t.clearIntervals();t.selectedItemRemainingTime=t.remainingTime()};this.stopTimer=function(){t.clearIntervals()}}d.prototype.componentDidLoad=function(){var d=this;this.children=this.element.querySelectorAll("mds-accordion-timer-item");this.children.forEach((function(t,e){var r;t.uuid=e;if(t.selected){d.currentDuration=(r=t.duration)!==null&&r!==void 0?r:d.duration;d.selectedItem=t}}));if(this.selectedItem!==undefined){this.startTimer()}if(this.paused){this.pauseTimer()}};d.prototype.disconnectedCallback=function(){this.stopTimer();this.clearIntervals()};d.prototype.onClickSelect=function(d){this.clearIntervals();if(this.selectedItem){this.selectedItem.progress=0}this.setSelectedItem(d.detail.uuid);this.startTimer();this.pauseTimer()};d.prototype.onSelect=function(d){this.clearIntervals();this.paused=false;if(this.selectedItem){this.selectedItem.progress=0}this.setSelectedItem(d.detail.uuid);this.startTimer()};d.prototype.onMouseEnterSelect=function(){if(this.paused){return}this.pauseTimer()};d.prototype.onMouseLeaveSelect=function(){if(this.paused){return}if(this.timeChecker===0){this.playTimer()}};d.prototype.handlePaused=function(d){if(d){this.pauseTimer();return}this.playTimer()};d.prototype.render=function(){return h(Host,{key:"3070adf0c624fa3b640c04d0757a5b30ecb7ff91"},h("slot",{key:"19cb85bc8ef2332a520c0124bdfd27c603d20005"}))};Object.defineProperty(d.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(d,"watchers",{get:function(){return{paused:["handlePaused"]}},enumerable:false,configurable:true});return d}();MdsAccordionTimer.style=MdsAccordionTimerStyle0;export{MdsAccordionTimer as mds_accordion_timer};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as o}from"./p-13443576.js";export{s as setNonce}from"./p-13443576.js";import{g as t}from"./p-e1255160.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),e(t)})().then((async e=>(await t(),o([["p-
|
|
1
|
+
import{p as e,b as o}from"./p-13443576.js";export{s as setNonce}from"./p-13443576.js";import{g as t}from"./p-e1255160.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),e(t)})().then((async e=>(await t(),o([["p-ab278a5f",[[1,"mds-accordion-timer",{duration:[514],paused:[516],time:[32]},[[0,"mdsAccordionTimerItemClickSelect","onClickSelect"],[0,"mdsAccordionTimerItemSelect","onSelect"],[0,"mdsAccordionTimerItemMouseEnterSelect","onMouseEnterSelect"],[0,"mdsAccordionTimerItemMouseLeaveSelect","onMouseLeaveSelect"]],{paused:["handlePaused"]}]]]],e))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,c){function o(e){try{s(r.next(e))}catch(e){c(e)}}function u(e){try{s(r["throw"](e))}catch(e){c(e)}}function s(e){e.done?n(e.value):i(e.value).then(o,u)}s((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(c[0]&1)throw c[1];return c[1]},trys:[],ops:[]},r,i,c,o;return o={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function u(e){return function(t){return s([e,t])}}function s(u){if(r)throw new TypeError("Generator is already executing.");while(o&&(o=0,u[0]&&(n=0)),n)try{if(r=1,i&&(c=u[0]&2?i["return"]:u[0]?i["throw"]||((c=i["return"])&&c.call(i),0):i.next)&&!(c=c.call(i,u[1])).done)return c;if(i=0,c)u=[u[0]&2,c.value];switch(u[0]){case 0:case 1:c=u;break;case 4:n.label++;return{value:u[1],done:false};case 5:n.label++;i=u[1];u=[0];continue;case 7:u=n.ops.pop();n.trys.pop();continue;default:if(!(c=n.trys,c=c.length>0&&c[c.length-1])&&(u[0]===6||u[0]===2)){n=0;continue}if(u[0]===3&&(!c||u[1]>c[0]&&u[1]<c[3])){n.label=u[1];break}if(u[0]===6&&n.label<c[1]){n.label=c[1];c=u;break}if(c&&n.label<c[2]){n.label=c[2];n.ops.push(u);break}if(c[2])n.ops.pop();n.trys.pop();continue}u=t.call(e,n)}catch(e){u=[6,e];i=0}finally{r=c=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};System.register(["./p-000e3530.system.js","./p-56ba5cbf.system.js"],(function(e,t){"use strict";var n,r,i;return{setters:[function(t){n=t.p;r=t.b;e("setNonce",t.s)},function(e){i=e.g}],execute:function(){var e=this;var c=function(){var e=t.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return n(r)};c().then((function(t){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,i()];case 1:e.sent();return[2,r([["p-
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,c){function o(e){try{s(r.next(e))}catch(e){c(e)}}function u(e){try{s(r["throw"](e))}catch(e){c(e)}}function s(e){e.done?n(e.value):i(e.value).then(o,u)}s((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(c[0]&1)throw c[1];return c[1]},trys:[],ops:[]},r,i,c,o;return o={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function u(e){return function(t){return s([e,t])}}function s(u){if(r)throw new TypeError("Generator is already executing.");while(o&&(o=0,u[0]&&(n=0)),n)try{if(r=1,i&&(c=u[0]&2?i["return"]:u[0]?i["throw"]||((c=i["return"])&&c.call(i),0):i.next)&&!(c=c.call(i,u[1])).done)return c;if(i=0,c)u=[u[0]&2,c.value];switch(u[0]){case 0:case 1:c=u;break;case 4:n.label++;return{value:u[1],done:false};case 5:n.label++;i=u[1];u=[0];continue;case 7:u=n.ops.pop();n.trys.pop();continue;default:if(!(c=n.trys,c=c.length>0&&c[c.length-1])&&(u[0]===6||u[0]===2)){n=0;continue}if(u[0]===3&&(!c||u[1]>c[0]&&u[1]<c[3])){n.label=u[1];break}if(u[0]===6&&n.label<c[1]){n.label=c[1];c=u;break}if(c&&n.label<c[2]){n.label=c[2];n.ops.push(u);break}if(c[2])n.ops.pop();n.trys.pop();continue}u=t.call(e,n)}catch(e){u=[6,e];i=0}finally{r=c=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};System.register(["./p-000e3530.system.js","./p-56ba5cbf.system.js"],(function(e,t){"use strict";var n,r,i;return{setters:[function(t){n=t.p;r=t.b;e("setNonce",t.s)},function(e){i=e.g}],execute:function(){var e=this;var c=function(){var e=t.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return n(r)};c().then((function(t){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,i()];case 1:e.sent();return[2,r([["p-9db3df3f.system",[[1,"mds-accordion-timer",{duration:[514],paused:[516],time:[32]},[[0,"mdsAccordionTimerItemClickSelect","onClickSelect"],[0,"mdsAccordionTimerItemSelect","onSelect"],[0,"mdsAccordionTimerItemMouseEnterSelect","onMouseEnterSelect"],[0,"mdsAccordionTimerItemMouseLeaveSelect","onMouseLeaveSelect"]],{paused:["handlePaused"]}]]]],t)]}}))}))}))}}}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
System.register(["./p-000e3530.system.js"],(function(
|
|
1
|
+
System.register(["./p-000e3530.system.js"],(function(d){"use strict";var t,e,r,a,i;return{setters:[function(d){t=d.r;e=d.c;r=d.h;a=d.H;i=d.g}],execute:function(){var s=":host{--mds-accordion-timer-progress-bar-color:rgb(var(--tone-neutral-03));--mds-accordion-timer-progress-bar-background:rgb(var(--tone-neutral-08));--mds-accordion-timer-progress-bar-thickness:0.25rem;--mds-accordion-timer-duration:500ms;display:block}:host-context(.pref-animation-reduce){--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration, 0s)}@media (prefers-reduced-motion){:host-context(.pref-animation-system){--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration, 0s)}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";var n=s;var o=d("mds_accordion_timer",function(){function d(d){var r=this;t(this,d);this.changeEvent=e(this,"mdsAccordionTimerChange",7);this.currentDuration=0;this.time=0;this.duration=1e4;this.clearIntervals=function(){if(typeof window!=="undefined"){window.clearInterval(r.timeChecker)}r.timeChecker=0};this.remainingTime=function(){var d=r.selectedItemRemainingTime-((new Date).getTime()-r.timeStarted);return d>=0?d:0};this.progress=function(){return Math.abs(r.remainingTime()/r.currentDuration-1)};this.addTimeListener=function(){if(typeof window!=="undefined"){r.timeChecker=window.setInterval((function(){var d=r.progress();if(r.selectedItem!==undefined){r.selectedItem.progress=d}if(d===1){r.selectedItem.progress=0;r.startNext()}}),100)}};this.beginningTime=function(){r.timeStarted=(new Date).getTime();return r.timeStarted};this.setSelectedItem=function(d){r.children.forEach((function(t,e){var a;if(e===d){t.selected=true;r.currentDuration=(a=t.duration)!==null&&a!==void 0?a:r.duration;r.selectedItem=t;r.changeEvent.emit({index:e})}else{t.selected=false}}))};this.startNext=function(){var d=r.selectedItem.uuid+1>r.children.length-1?0:r.selectedItem.uuid+1;r.setSelectedItem(d);r.startTimer()};this.startTimer=function(){r.clearIntervals();r.time=r.beginningTime();r.selectedItemRemainingTime=r.currentDuration;r.addTimeListener()};this.playTimer=function(){r.beginningTime();r.addTimeListener()};this.pauseTimer=function(){r.clearIntervals();r.selectedItemRemainingTime=r.remainingTime()};this.stopTimer=function(){r.clearIntervals()}}d.prototype.componentDidLoad=function(){var d=this;this.children=this.element.querySelectorAll("mds-accordion-timer-item");this.children.forEach((function(t,e){var r;t.uuid=e;if(t.selected){d.currentDuration=(r=t.duration)!==null&&r!==void 0?r:d.duration;d.selectedItem=t}}));if(this.selectedItem!==undefined){this.startTimer()}if(this.paused){this.pauseTimer()}};d.prototype.disconnectedCallback=function(){this.stopTimer();this.clearIntervals()};d.prototype.onClickSelect=function(d){this.clearIntervals();if(this.selectedItem){this.selectedItem.progress=0}this.setSelectedItem(d.detail.uuid);this.startTimer();this.pauseTimer()};d.prototype.onSelect=function(d){this.clearIntervals();this.paused=false;if(this.selectedItem){this.selectedItem.progress=0}this.setSelectedItem(d.detail.uuid);this.startTimer()};d.prototype.onMouseEnterSelect=function(){if(this.paused){return}this.pauseTimer()};d.prototype.onMouseLeaveSelect=function(){if(this.paused){return}if(this.timeChecker===0){this.playTimer()}};d.prototype.handlePaused=function(d){if(d){this.pauseTimer();return}this.playTimer()};d.prototype.render=function(){return r(a,{key:"3070adf0c624fa3b640c04d0757a5b30ecb7ff91"},r("slot",{key:"19cb85bc8ef2332a520c0124bdfd27c603d20005"}))};Object.defineProperty(d.prototype,"element",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(d,"watchers",{get:function(){return{paused:["handlePaused"]}},enumerable:false,configurable:true});return d}());o.style=n}}}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as d,c as t,h as e,H as s,g as r}from"./p-13443576.js";const a=class{constructor(e){d(this,e),this.changeEvent=t(this,"mdsAccordionTimerChange",7),this.currentDuration=0,this.time=0,this.duration=1e4,this.clearIntervals=()=>{"undefined"!=typeof window&&window.clearInterval(this.timeChecker),this.timeChecker=0},this.remainingTime=()=>{const d=this.selectedItemRemainingTime-((new Date).getTime()-this.timeStarted);return d>=0?d:0},this.progress=()=>Math.abs(this.remainingTime()/this.currentDuration-1),this.addTimeListener=()=>{"undefined"!=typeof window&&(this.timeChecker=window.setInterval((()=>{const d=this.progress();void 0!==this.selectedItem&&(this.selectedItem.progress=d),1===d&&(this.selectedItem.progress=0,this.startNext())}),100))},this.beginningTime=()=>(this.timeStarted=(new Date).getTime(),this.timeStarted),this.setSelectedItem=d=>{this.children.forEach(((t,e)=>{var s;e===d?(t.selected=!0,this.currentDuration=null!==(s=t.duration)&&void 0!==s?s:this.duration,this.selectedItem=t,this.changeEvent.emit({index:e})):t.selected=!1}))},this.startNext=()=>{this.setSelectedItem(this.selectedItem.uuid+1>this.children.length-1?0:this.selectedItem.uuid+1),this.startTimer()},this.startTimer=()=>{this.clearIntervals(),this.time=this.beginningTime(),this.selectedItemRemainingTime=this.currentDuration,this.addTimeListener()},this.playTimer=()=>{this.beginningTime(),this.addTimeListener()},this.pauseTimer=()=>{this.clearIntervals(),this.selectedItemRemainingTime=this.remainingTime()},this.stopTimer=()=>{this.clearIntervals()}}componentDidLoad(){this.children=this.element.querySelectorAll("mds-accordion-timer-item"),this.children.forEach(((d,t)=>{var e;d.uuid=t,d.selected&&(this.currentDuration=null!==(e=d.duration)&&void 0!==e?e:this.duration,this.selectedItem=d)})),void 0!==this.selectedItem&&this.startTimer(),this.paused&&this.pauseTimer()}disconnectedCallback(){this.stopTimer(),this.clearIntervals()}onClickSelect(d){this.clearIntervals(),this.selectedItem&&(this.selectedItem.progress=0),this.setSelectedItem(d.detail.uuid),this.startTimer(),this.pauseTimer()}onSelect(d){this.clearIntervals(),this.paused=!1,this.selectedItem&&(this.selectedItem.progress=0),this.setSelectedItem(d.detail.uuid),this.startTimer()}onMouseEnterSelect(){this.paused||this.pauseTimer()}onMouseLeaveSelect(){this.paused||0===this.timeChecker&&this.playTimer()}handlePaused(d){d?this.pauseTimer():this.playTimer()}render(){return e(s,{key:"3070adf0c624fa3b640c04d0757a5b30ecb7ff91"},e("slot",{key:"19cb85bc8ef2332a520c0124bdfd27c603d20005"}))}get element(){return r(this)}static get watchers(){return{paused:["handlePaused"]}}};a.style=":host{--mds-accordion-timer-progress-bar-color:rgb(var(--tone-neutral-03));--mds-accordion-timer-progress-bar-background:rgb(var(--tone-neutral-08));--mds-accordion-timer-progress-bar-thickness:0.25rem;--mds-accordion-timer-duration:500ms;display:block}:host-context(.pref-animation-reduce){--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration, 0s)}@media (prefers-reduced-motion){:host-context(.pref-animation-system){--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration, 0s)}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";export{a as mds_accordion_timer}
|